:root{color:#17233a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f6fa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#f3f6fa;min-width:320px}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.login-page,.app-shell{--navy:#0b1f3a;--navy-2:#12345c;--sky:#2f9bd8;--green:#18a67a;--bg-soft:#f3f6fa;--line:#d9e2ec;--text-main:#17233a;--text-muted:#66758a}.login-page{background:linear-gradient(120deg, #2f9bd824, transparent 42%), linear-gradient(300deg, #18a67a1f, transparent 38%), var(--bg-soft);place-items:center;min-height:100vh;padding:24px;display:grid}.login-panel{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:1.05fr .95fr;width:min(940px,100%);min-height:520px;display:grid;overflow:hidden;box-shadow:0 24px 70px #0b1f3a29}.login-copy{color:#fff;background:linear-gradient(145deg,#0b1f3af7,#12345cf5),url(/favicon.svg);flex-direction:column;justify-content:center;gap:18px;padding:56px;display:flex}.login-copy h1{color:#fff;max-width:420px;margin:0;font-size:46px;line-height:1}.login-copy p{color:#fffc;max-width:430px;font-size:17px}.login-form{flex-direction:column;justify-content:center;gap:18px;padding:56px;display:flex}.app-shell{background:var(--bg-soft);grid-template-columns:280px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#fff;flex-direction:column;gap:22px;height:100vh;padding:22px;display:flex;position:sticky;top:0}.brand{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding-bottom:18px;display:flex}.brand div{display:grid}.brand strong{color:var(--navy);font-size:20px;line-height:1.1}.brand span:not(.brand-mark){color:var(--text-muted);font-size:13px}.brand-mark{color:#fff;background:var(--navy);letter-spacing:0;border-radius:8px;flex:none;place-items:center;width:42px;height:42px;font-weight:800;display:inline-grid}.brand-mark.large{width:58px;height:58px;color:var(--navy);background:#fff}.side-nav{gap:6px;display:grid}.side-nav button,.tabs button,.segmented button,button{min-height:38px;color:var(--text-main);font:inherit;cursor:pointer;background:#fff;border:1px solid #cbd7e4;border-radius:6px;padding:9px 12px;font-size:14px;transition:border-color .18s,background .18s,color .18s,transform .18s}button:hover{border-color:var(--sky);transform:translateY(-1px)}.side-nav button{color:#4b5d73;text-align:left;border-color:#0000;align-items:center;gap:10px;width:100%;display:flex}.side-nav button span{width:28px;height:28px;color:var(--navy-2);background:#edf5fb;border-radius:6px;place-items:center;font-size:11px;font-weight:800;display:inline-grid}.side-nav button.active,.side-nav button.active span,.tabs button.active,.segmented button.active{color:#fff;background:var(--navy);border-color:var(--navy)}.main-area{min-width:0;padding:0 28px 48px}.topbar{z-index:10;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f3f6faeb;justify-content:space-between;align-items:center;gap:16px;min-height:70px;margin-inline:-28px;padding:12px 28px;display:flex;position:sticky;top:0}.topbar>div:first-child{display:grid}.topbar strong{color:var(--navy)}.muted,.eyebrow,.field span,.readonly span,small{color:var(--text-muted)}.user-chip{align-items:center;gap:10px;display:flex}.user-chip div{text-align:right;display:grid}.user-chip span{color:var(--text-muted);font-size:12px}.icon-button{width:38px;min-height:38px;color:var(--navy-2);background:#eaf6fd;border-color:#b9def3;font-weight:800}.page-header{justify-content:space-between;align-items:flex-end;gap:18px;padding:34px 0 22px;display:flex}.page-header h1{color:var(--navy);margin:4px 0 6px;font-size:34px;line-height:1.08}.page-header p{max-width:720px;color:var(--text-muted)}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;display:grid}.stat-card{border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;justify-content:space-between;min-height:128px;padding:18px;display:flex;box-shadow:0 12px 30px #0b1f3a0f}.stat-card.compact{min-height:116px}.stat-card strong{color:var(--navy);font-size:34px;line-height:1}.stat-card span{color:#4b5d73;font-size:13px;font-weight:700}.section{border:1px solid var(--line);background:#fff;border-radius:8px;margin-bottom:20px;padding:20px;box-shadow:0 12px 30px #0b1f3a0f}.section h2{color:var(--navy);margin:0 0 16px;font-size:18px}.demo-flow{background:linear-gradient(135deg,#fff,#eef8fe);border:1px solid #b9def3;border-radius:8px;grid-template-columns:minmax(220px,.65fr) 1fr auto;align-items:center;gap:18px;margin-bottom:20px;padding:20px;display:grid;box-shadow:0 12px 30px #0b1f3a0f}.demo-flow h2{color:var(--navy);margin:4px 0 0;font-size:20px}.demo-flow ol{grid-template-columns:repeat(5,minmax(112px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.demo-flow li{min-height:74px;color:var(--navy);background:#fff;border:1px solid #d8e9f5;border-radius:8px;gap:8px;padding:11px;font-size:13px;font-weight:800;display:grid}.demo-flow li span{color:#fff;background:var(--sky);border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.form-stack{gap:2px;display:grid}.form-grid,.rate-panel,.filters{grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;margin-bottom:16px;display:grid}.filters{grid-template-columns:repeat(6,minmax(130px,1fr))}.field,.readonly{gap:6px;min-width:0;display:grid}.field span,.readonly span{font-size:12px;font-weight:800}input,select{box-sizing:border-box;width:100%;color:var(--text-main);font:inherit;background:#fbfdff;border:1px solid #cbd7e4;border-radius:6px;padding:10px 11px;font-size:14px}input:focus,select:focus{border-color:var(--sky);outline:3px solid #2f9bd82e}.readonly{background:#f7fbff;border:1px dashed #cbd7e4;border-radius:6px;justify-content:center;min-height:65px;padding:10px 12px}.readonly strong{color:var(--navy)}.readonly.highlight{border-style:solid;border-color:var(--green);background:#eaf8f3}.button-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.toolbar{margin-bottom:16px}.primary{border-color:var(--navy);color:#fff;background:var(--navy);font-weight:800}.secondary{color:#0b4c78;background:#eaf6fd;border-color:#9bd6f3;font-weight:800}.full{width:100%}.table-wrap{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:860px;font-size:13px}th,td{text-align:left;vertical-align:middle;border-bottom:1px solid #e4ebf2;padding:11px 12px}th{color:#4c6178;white-space:nowrap;background:#eef4fa;font-size:12px;font-weight:800}td{color:#233047}tbody tr:nth-child(2n){background:#fbfdff}tbody tr:hover{background:#f0f8fd}.mini-actions{flex-wrap:wrap;gap:6px;display:flex}.mini-actions button{min-height:30px;padding:6px 8px;font-size:12px}.status{white-space:nowrap;border-radius:999px;align-items:center;min-height:24px;padding:3px 9px;font-size:12px;font-weight:800;display:inline-flex}.status.info{color:#0b4c78;background:#e4f4fd}.status.success{color:#0e5d3d;background:#e3f5ec}.status.danger{color:#8d261a;background:#ffebe7}.status.pending{color:#7a5200;background:#fff3cf}.status.host{color:#075d71;background:#dff7fb}.status.neutral{color:#536176;background:#eef2f6}.segmented,.tabs{border:1px solid var(--line);background:#fff;border-radius:8px;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:6px;display:flex}.host-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.selected-host-banner{background:#eaf8f3;border:1px solid #91d9c2;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:16px;display:flex}.selected-host-banner div{gap:4px;display:grid}.selected-host-banner span{color:#0e5d3d;text-transform:uppercase;font-size:12px;font-weight:900}.selected-host-banner strong{color:var(--navy);font-size:19px}.host-card{border:1px solid var(--line);background:#fbfdff;border-radius:8px;gap:8px;padding:16px;display:grid}.host-card.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green), 0 12px 28px #18a67a1f}.host-card-header{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.selected-pill{color:#0e5d3d;background:#dff4eb;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900}.host-card h3,.detail-card h3{color:var(--navy);margin:0;font-size:17px}.host-card p,.host-alert p{color:#536176;margin:0}.host-card strong,.host-card small,.host-card span{color:#5f6f83;font-size:13px}.search-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.search-row input{width:min(380px,100%)}.detail-grid{grid-template-columns:.85fr 1.15fr;gap:18px;margin-bottom:18px;display:grid}.detail-card{border:1px solid var(--line);background:#fff;border-radius:8px;padding:18px;box-shadow:0 12px 30px #0b1f3a0f}dl{grid-template-columns:150px 1fr;gap:9px 12px;margin:18px 0 0;display:grid}dt{color:var(--text-muted);font-size:12px;font-weight:800}dd{color:var(--text-main);margin:0}.timeline{gap:10px;display:grid;position:relative}.timeline div{background:#fbfdff;border:1px solid #e2eaf2;border-radius:8px;grid-template-columns:42px 1fr;align-items:center;gap:2px 12px;padding:12px;display:grid}.timeline div span{color:#66758a;background:#eef2f6;border-radius:50%;grid-row:span 2;place-items:center;width:42px;height:42px;font-size:12px;font-weight:800;display:grid}.timeline div.done span{color:#fff;background:var(--green)}.timeline div.current{border-color:var(--sky);box-shadow:inset 4px 0 0 var(--sky);background:#eef8fe}.timeline div.current span{color:#fff;background:var(--sky)}.timeline div.pending{opacity:.7}.timeline strong{color:var(--navy)}.host-alert,.result-box,.upload-box{background:#eaf6fd;border:1px solid #9bd6f3;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.host-alert strong{color:var(--navy)}.host-alert span{color:#0b4c78;margin-top:4px;font-size:13px;font-weight:800;display:inline-block}.upload-box{border-color:var(--line);background:#f7fbff;margin-bottom:16px}.checkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2px 0 16px;display:grid}.checkbox-grid label{border:1px solid var(--line);color:var(--text-main);background:#fbfdff;border-radius:6px;align-items:center;gap:8px;padding:10px;display:flex}.checkbox-grid input{width:auto}.result-box{color:#0e5d3d;background:#eaf8f3;border-color:#91d9c2;justify-content:flex-start;margin-top:14px;font-weight:800}.toast{z-index:40;color:#0e5d3d;background:#eaf8f3;border:1px solid #91d9c2;border-radius:8px;max-width:min(460px,100vw - 44px);padding:14px 16px;font-weight:800;position:fixed;bottom:22px;right:22px;box-shadow:0 18px 50px #0b1f3a2e}.modal-backdrop{z-index:50;background:#0b1f3a8f;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:8px;width:min(520px,100%);padding:28px;position:relative;box-shadow:0 25px 90px #0b1f3a4d}.modal h2{color:var(--navy);margin:12px 0 18px}.close-button{width:34px;min-height:34px;padding:0;position:absolute;top:12px;right:12px}.success-mark{color:#fff;background:var(--green);border-radius:50%;place-items:center;width:54px;height:54px;font-weight:900;display:grid}.summary-list{grid-template-columns:160px 1fr;gap:10px 12px;margin-bottom:18px;display:grid}.summary-list span{color:#6a7672;font-size:13px;font-weight:800}.summary-list strong{color:var(--navy)}@media (width<=1180px){.stats-grid,.form-grid,.rate-panel,.filters,.host-picker,.demo-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-flow ol{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr))}}@media (width<=820px){.login-panel,.app-shell,.detail-grid{grid-template-columns:1fr}.login-copy,.login-form{padding:32px}.sidebar{height:auto;padding:14px;position:static}.side-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.side-nav button{min-height:48px}.main-area{padding:0 16px 34px}.topbar{margin-inline:-16px;padding-inline:16px;position:static}.stats-grid,.form-grid,.rate-panel,.filters,.host-picker,.checkbox-grid,.demo-flow,.demo-flow ol{grid-template-columns:1fr}.demo-flow{align-items:stretch}.page-header{padding-top:24px}.page-header h1{font-size:28px}.user-chip div{display:none}.summary-list,dl{grid-template-columns:1fr}}