:root{--green:#15a889;--green-dark:#087a65;--green-soft:#eaf9f5;--ink:#24313d;--muted:#758493;--line:#e6ecef;--panel:#fff;--bg:#f5f8f9;--blue:#3979d5;--amber:#e79b23;--red:#d84e4e;--purple:#7656cf;--shadow:0 8px 30px rgba(31,50,65,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:244px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{height:76px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid var(--line);color:#236b5b}.brand-mark{width:35px;height:35px;border:4px solid #52bd76;border-right-color:#159d86;border-radius:14px 4px 14px 4px;display:grid;place-items:center;font-weight:800}.brand strong{display:block;line-height:1}.brand small{display:block;color:#65b770;margin-top:2px}.sidebar nav{padding:18px 12px;overflow:auto}.sidebar nav a{display:flex;align-items:center;gap:12px;color:#62717f;text-decoration:none;padding:11px 14px;border-radius:8px;margin:3px 0;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:var(--green-soft);color:var(--green-dark);font-weight:650}.nav-icon{width:20px;text-align:center;font-size:17px}.nav-section{padding:18px 14px 6px;color:#a0aab2;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:700}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:16px 22px;font-size:11px;color:#6f7e8b}.status-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:#20b87d;box-shadow:0 0 0 4px rgba(32,184,125,.12);margin-right:8px}.main-wrap{margin-left:244px;min-width:0;flex:1}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;position:sticky;top:0;z-index:12}.top-title{display:flex;gap:10px;align-items:center;font-size:13px}.muted{color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.icon-button{border:0;background:transparent;color:#536474;font-size:21px;position:relative}.notification-dot{position:absolute;width:7px;height:7px;background:#ef6b5b;border-radius:50%;right:3px;top:0;border:2px solid white}.avatar{height:38px;width:38px;border-radius:50%;background:linear-gradient(135deg,#244d6c,#19a58b);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}.avatar.small{width:34px;height:34px}.avatar.blue{background:#3979d5}.menu-button{display:none}main{padding:24px 34px 60px;max-width:1540px;margin:auto}.prototype-banner{background:#edf8f5;border:1px solid #cfece3;color:#38685d;padding:10px 14px;border-radius:7px;display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:23px}.prototype-banner strong{color:#087a65}.prototype-banner button{margin-left:auto;border:0;background:transparent;color:#56857a;font-size:18px}.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:24px}.breadcrumbs{font-size:12px;color:#8a98a4;margin-bottom:10px}.breadcrumbs span{margin:0 5px}.page-heading h1{font-size:26px;margin:0 0 4px}.page-heading p{margin:0;color:var(--muted);font-size:14px}.heading-actions{display:flex;gap:10px;align-items:center}.zone-switcher{display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:7px;padding:0 10px}.zone-switcher select{border:0;background:transparent;height:40px;color:var(--ink);font-weight:600}.button{border-radius:7px;padding:10px 15px;font-weight:650;font-size:13px;border:1px solid transparent;white-space:nowrap}.button.primary{background:var(--green);color:white}.button.primary:hover{background:var(--green-dark)}.button.secondary{background:white;border-color:#cfdadd;color:#3e5662}.button.white{background:white;color:var(--green-dark);border:0}.button.danger{color:#be3838;border-color:#efc4c4;background:#fff7f7}.page{display:none}.page.active{display:block}.health-hero{background:linear-gradient(120deg,#0e8c74,#18b494);border-radius:11px;padding:25px 28px;color:white;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.health-score{display:flex;align-items:center;gap:22px}.score-ring{width:82px;height:82px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#fff 0 96%,rgba(255,255,255,.22) 96%);position:relative;color:#08745f}.score-ring:before{content:"";position:absolute;inset:5px;background:#12a185;border-radius:50%}.score-ring>*{position:relative}.score-ring strong{font-size:25px}.score-ring span{font-size:10px;color:white}.health-hero h2,.security-hero h2{margin:4px 0;font-size:20px}.health-hero p,.security-hero p{margin:0;opacity:.87;font-size:13px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:750}.metric-grid{display:grid;gap:16px;margin:18px 0}.metric-grid.four{grid-template-columns:repeat(4,1fr)}.metric-grid.three{grid-template-columns:repeat(3,1fr)}.metric{background:white;border:1px solid var(--line);border-radius:9px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 3px 14px rgba(31,50,65,.035)}.metric-icon{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-weight:800}.metric-icon.green{background:#e6f8f2;color:#15936f}.metric-icon.blue{background:#eaf2fd;color:#3979d5}.metric-icon.amber{background:#fff3dd;color:#d98a14}.metric-icon.purple{background:#f0ecfd;color:#7656cf}.metric span,.metric small{display:block;color:var(--muted);font-size:11px}.metric strong{display:block;font-size:19px;margin:3px 0}.positive{color:#149366!important}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.card{background:white;border:1px solid var(--line);border-radius:9px;padding:21px;box-shadow:0 3px 14px rgba(31,50,65,.035)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.card h2{font-size:16px;margin:0 0 4px}.card p{color:var(--muted);font-size:12px;margin:0}.badge{font-size:10px;font-weight:750;padding:5px 8px;border-radius:99px;display:inline-block}.badge.success{background:#e4f7f0;color:#118365}.badge.warning{background:#fff2dc;color:#b97111}.badge.neutral{background:#edf1f4;color:#627180}.badge.large{font-size:12px;padding:7px 12px}.ns-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.ns-row code{font-weight:700}.ns-row small{display:block;color:var(--muted);margin-top:5px}.latency{color:#168866;font-size:12px;font-weight:700}.check-footer{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;color:var(--muted)}.recommendation{display:flex;gap:14px}.recommend-icon{width:44px;height:44px;background:#fff3dd;color:#cd8112;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:18px;flex:0 0 auto}.recommendation strong{font-size:13px}.recommendation p{margin:6px 0!important;line-height:1.5}.text-button{border:0;background:transparent;color:var(--green-dark);padding:0;font-weight:700;font-size:11px}.timeline>div{display:grid;grid-template-columns:14px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}.timeline>div:last-child{border-bottom:0}.timeline-dot{width:9px;height:9px;border-radius:50%;margin-top:4px}.timeline-dot.green{background:#20af7e}.timeline-dot.blue{background:#3979d5}.timeline-dot.purple{background:#7656cf}.timeline-dot.amber{background:#e79b23}.timeline strong{font-size:12px}.timeline p{margin:3px 0!important}.timeline time{font-size:10px;color:var(--muted);text-align:right}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid var(--line);border-radius:9px;margin-bottom:18px}.summary-strip div{padding:15px 20px;border-right:1px solid var(--line)}.summary-strip div:last-child{border:0}.summary-strip span{display:block;color:var(--muted);font-size:10px}.summary-strip strong{display:block;margin-top:4px;font-size:14px}.records-card{padding:0;overflow:hidden}.toolbar{padding:15px;display:flex;gap:9px;border-bottom:1px solid var(--line)}.toolbar select,.card-actions select{border:1px solid var(--line);border-radius:7px;padding:0 10px;color:#586a77;background:white}.search{height:39px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;padding:0 11px;gap:7px;flex:1}.search input{border:0;outline:0;width:100%}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;color:#8a98a4;text-transform:uppercase;letter-spacing:.06em;background:#f9fbfb;padding:11px 15px}td{padding:13px 15px;border-top:1px solid var(--line);vertical-align:middle}td code{font-size:11px}.type-pill{font-size:10px;font-weight:800;padding:5px 7px;border-radius:5px;background:#eaf6f4;color:#0d826c}.record-actions{display:flex;gap:5px;justify-content:flex-end}.record-actions button{border:0;background:transparent;color:#687986;font-size:13px}.table-footer{display:flex;justify-content:space-between;padding:13px 15px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.table-footer button{border:1px solid var(--line);background:#fff;padding:5px 8px;color:#657583}.table-footer button.current{background:var(--green);color:#fff}.security-hero{background:linear-gradient(120deg,#183f56,#1f756f);border-radius:10px;color:#fff;display:flex;gap:18px;align-items:center;padding:26px}.security-hero .shield{width:56px;height:56px;border:1px solid rgba(255,255,255,.35);border-radius:12px;display:grid;place-items:center;font-size:27px}.security-hero .badge{margin-left:auto}.live-pulse{color:#178866;font-size:11px}.details{margin:0}.details>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.details dt{color:var(--muted)}.details dd{margin:0;font-weight:650}.code-block{background:#1e2d39;color:#deece8;padding:16px;border-radius:8px;position:relative;font-size:11px;line-height:1.6}.code-block button{position:absolute;right:10px;top:10px;border:0;border-radius:5px;padding:5px 8px}.check-list{display:grid;gap:8px;margin-top:14px;color:#218268;font-size:11px}.danger-zone{display:flex;align-items:center;justify-content:space-between;border-color:#f1caca!important;background:#fffafa!important}.monitor-list>div{display:grid;grid-template-columns:12px minmax(220px,1fr) auto auto 30px;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.health-dot{width:9px;height:9px;border-radius:50%}.health-dot.up{background:#1eae7a;box-shadow:0 0 0 4px #e3f6ef}.monitor-list small{display:block;color:var(--muted);margin-top:4px}.monitor-regions{display:flex;gap:6px}.monitor-regions span{background:#f4f7f8;padding:5px 7px;border-radius:5px;font-size:9px}.monitor-list button{border:0;background:transparent}.event-flow{display:flex;align-items:center;justify-content:center;gap:24px;text-align:center}.event-flow div{display:grid;gap:4px}.event-flow span,.event-flow small{font-size:10px;color:var(--muted)}.event-flow strong{font-size:12px}.page-callout{display:flex;justify-content:space-between;align-items:center;background:#e8f7f3;border:1px solid #cdebe3;border-radius:9px;padding:17px 20px;margin-bottom:18px}.page-callout strong,.page-callout span{display:block}.page-callout span{font-size:12px;color:#5e7c75;margin-top:3px}.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.policy-head{display:flex;gap:11px;align-items:center}.policy-head .badge{margin-left:auto}.policy-icon{width:39px;height:39px;border-radius:8px;display:grid;place-items:center;font-weight:800}.policy-icon.failover{background:#e7f7f2;color:#12856a}.policy-icon.weighted{background:#eaf2fd;color:#3979d5}.policy-icon.geo{background:#f0ecfd;color:#7656cf}.policy-head h2{font-size:14px}.route-line{margin:19px 0}.route-line>div{display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;padding:9px 0}.route-line code,.route-line div>span:last-child{grid-column:2;font-size:10px;color:var(--muted)}.route-dot{width:7px;height:7px;border-radius:50%}.primary-dot{background:#1cac7a}.backup-dot{background:#8b9aa5}.policy-foot{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.policy-foot button{border:0;background:transparent;color:var(--green-dark);font-weight:700}.weight-chart{margin:19px 0}.weight-chart>div{height:37px;width:var(--weight);min-width:90px;background:#4e8cdd;color:white;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:10px}.weight-chart .new{background:#54bda4;margin-top:5px}.geo-list{display:grid;gap:9px;margin:17px 0}.geo-list span{display:grid;grid-template-columns:25px 1fr auto;align-items:center;font-size:10px}.analytics-toolbar{display:flex;justify-content:space-between;margin-bottom:18px}.analytics-toolbar>div{background:white;border:1px solid var(--line);border-radius:7px;padding:3px}.analytics-toolbar>div button{border:0;background:transparent;padding:7px 11px;color:var(--muted);font-size:11px}.analytics-toolbar>div button.active{background:var(--green);color:white;border-radius:5px}.legend{font-size:10px;color:var(--muted)}.legend i{display:inline-block;width:14px;height:3px;background:var(--green);margin-right:5px}.chart{height:190px;display:flex;align-items:flex-end;gap:4px;padding-top:10px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 46px,#edf1f2 47px)}.chart span{flex:1;background:linear-gradient(to top,rgba(21,168,137,.2),#15a889);border-radius:3px 3px 0 0;min-width:3px}.chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:7px}.donut-wrap{display:flex;gap:30px;align-items:center;justify-content:center;padding:15px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#18a887 0 98.1%,#f0aa36 98.1% 99.8%,#df6262 99.8%);display:grid;place-items:center}.donut:before{content:"";position:absolute;width:106px;height:106px;background:white;border-radius:50%}.donut>div{position:relative;text-align:center}.donut strong,.donut span{display:block}.donut strong{font-size:22px}.donut span{font-size:10px;color:var(--muted)}.donut-legend{display:grid;gap:10px}.donut-legend span{font-size:10px;display:grid;grid-template-columns:10px 1fr auto;gap:7px}.donut-legend i{width:8px;height:8px;border-radius:50%}.donut-legend .ok{background:#18a887}.donut-legend .nx{background:#f0aa36}.donut-legend .sf{background:#df6262}.rank-list>div{display:grid;grid-template-columns:24px 1fr auto;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px}.rank-list>div>span{color:var(--muted)}.region-bars>div{display:grid;grid-template-columns:90px 1fr 35px;gap:10px;align-items:center;padding:8px 0;font-size:10px}.region-bars i{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--green) var(--bar),#edf1f2 var(--bar))}.audit>div{padding:17px 0}.audit time{display:grid;gap:8px}.audit time button{border:0;background:transparent;color:var(--green-dark);font-size:10px;font-weight:700}.card-actions{display:flex;gap:8px}.settings-layout{display:grid;grid-template-columns:210px 1fr;gap:18px}.settings-nav{background:white;border:1px solid var(--line);border-radius:9px;padding:8px;height:max-content}.settings-nav button{width:100%;text-align:left;border:0;background:transparent;padding:11px;border-radius:6px;color:#667582;font-size:12px}.settings-nav button.active{background:var(--green-soft);color:var(--green-dark);font-weight:700}.settings-panel{display:none}.settings-panel.active{display:block}.settings-panel label{display:grid;gap:6px;font-size:11px;font-weight:650;margin:13px 0}.settings-panel input,.settings-panel select{height:39px;border:1px solid var(--line);border-radius:7px;padding:0 10px;background:white}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.toggle-row{display:flex!important;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line)}.toggle-row small{display:block;color:var(--muted);font-weight:400;margin-top:3px}.toggle-row input{accent-color:var(--green)}.ns-detail{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px}.ns-detail strong{color:#168866}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.mode-cards button{border:1px solid var(--line);border-radius:8px;background:white;padding:15px;text-align:left}.mode-cards button.selected{border-color:var(--green);background:var(--green-soft)}.mode-cards strong,.mode-cards span{display:block}.mode-cards span{color:var(--muted);font-size:10px;margin-top:5px}.integration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.integration-grid button{background:white;border:1px solid var(--line);border-radius:8px;padding:14px;text-align:left}.integration-grid span,.integration-grid strong,.integration-grid small{display:block}.integration-grid span{font-size:20px;color:var(--green)}.integration-grid strong{font-size:11px;margin:8px 0 3px}.integration-grid small{font-size:9px;color:var(--muted)}.token-row,.member-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:12px;margin:15px 0}.token-row div,.member-row div:nth-child(2){flex:1}.token-row small,.member-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.token-row button,.member-row button{border:0;background:transparent;color:var(--green-dark)}.simple-page{max-width:700px}.modal-backdrop{position:fixed;z-index:50;inset:0;background:rgba(18,32,42,.55);display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.modal{background:white;border-radius:11px;width:min(590px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.25)}.modal-header{display:flex;justify-content:space-between;padding:21px 24px;border-bottom:1px solid var(--line)}.modal-header h2{margin:4px 0 0;font-size:19px}.modal-header button{border:0;background:transparent;font-size:24px;color:#768591}.modal form{padding:20px 24px}.modal label{display:grid;gap:6px;font-size:11px;font-weight:700;margin-bottom:14px}.modal input,.modal select{height:40px;border:1px solid #d9e1e4;border-radius:7px;padding:0 10px}.modal label small{font-weight:400;color:var(--muted)}.input-suffix{display:flex;border:1px solid #d9e1e4;border-radius:7px;overflow:hidden}.input-suffix input{border:0;flex:1;min-width:0}.input-suffix span{background:#f5f8f9;padding:12px 10px;color:var(--muted);font-size:10px}.validation-preview{display:flex;gap:10px;background:#f0faf7;border:1px solid #d3eee7;border-radius:7px;padding:12px;color:#13795f}.validation-preview p{margin:3px 0 0;font-size:10px;color:#66877f}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.toast-stack{position:fixed;z-index:70;right:20px;bottom:20px;display:grid;gap:9px}.toast{background:#20323f;color:white;border-radius:8px;padding:13px 16px;box-shadow:var(--shadow);font-size:12px;animation:toast-in .25s ease}.toast strong{color:#5ee1bd;margin-right:6px}@keyframes toast-in{from{transform:translateY(10px);opacity:0}}@media(max-width:1150px){.metric-grid.four{grid-template-columns:repeat(2,1fr)}.policy-grid{grid-template-columns:1fr 1fr}.integration-grid{grid-template-columns:1fr 1fr}}@media(max-width:860px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0);box-shadow:12px 0 30px rgba(0,0,0,.16)}.main-wrap{margin-left:0}.menu-button{display:block;margin-right:10px}.topbar{padding:0 18px}main{padding:20px 18px 50px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%;flex-wrap:wrap}.two-col,.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav button{min-width:max-content}.policy-grid{grid-template-columns:1fr}.monitor-list>div{grid-template-columns:12px 1fr auto}.monitor-regions{display:none}.event-flow{gap:8px}.event-flow i{font-size:10px}.ns-detail{grid-template-columns:1fr 1fr}.ns-detail span:nth-child(3){display:none}}@media(max-width:580px){.top-title .muted,.top-title span{display:none}.prototype-banner span{display:none}.page-heading h1{font-size:22px}.zone-switcher{width:100%}.zone-switcher select{width:100%}.health-hero,.security-hero{align-items:flex-start;flex-direction:column}.health-score{align-items:flex-start}.score-ring{flex:0 0 auto}.metric-grid.four,.metric-grid.three{grid-template-columns:1fr}.summary-strip{grid-template-columns:1fr 1fr}.summary-strip div:nth-child(2){border-right:0}.summary-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}.toolbar{flex-wrap:wrap}.toolbar .search{flex:1 0 100%}.toolbar select{height:39px;flex:1}.toolbar .button{flex:1}.check-footer,.danger-zone{align-items:flex-start;flex-direction:column}.event-flow{align-items:flex-start;flex-direction:column;text-align:left}.event-flow i{transform:rotate(90deg)}.field-row{grid-template-columns:1fr}.integration-grid{grid-template-columns:1fr 1fr}.donut-wrap{flex-direction:column}.card-actions{flex-wrap:wrap}.settings-content{min-width:0}.input-suffix span{display:none}.ns-detail{grid-template-columns:1fr}.ns-detail span{display:none}.mode-cards{grid-template-columns:1fr}.monitor-list>div{grid-template-columns:12px 1fr auto}.monitor-list>div>.badge{display:none}.analytics-grid{grid-template-columns:1fr}}
