:root{
  --bg:#f3f7fb;--panel:#fff;--panel-soft:#f8fbfe;--text:#10243b;--muted:#6e8095;--line:#dfe8f1;
  --nav:#071b31;--nav2:#0b2844;--accent:#1377ef;--accent2:#0b5fd0;--cyan:#18b9c8;--teal:#11a888;
  --good:#0c9a69;--good-bg:#e8f8f2;--warn:#d38a00;--warn-bg:#fff5db;--bad:#d83c4b;--bad-bg:#ffedf0;
  --purple:#7656d8;--purple-bg:#f1edff;--shadow:0 18px 50px rgba(16,45,75,.08);--shadow-sm:0 8px 24px rgba(16,45,75,.06);
  --radius:22px;--radius-sm:14px
}
*{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f7fbff 0,#f2f6fa 440px,#f3f7fb 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}.muted{color:var(--muted);margin:.35rem 0;line-height:1.5}.app-shell{min-height:100vh}.sidebar-overlay{display:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:274px;padding:24px 18px 18px;background:linear-gradient(180deg,var(--nav) 0%,#08223c 54%,#071827 100%);color:#eaf3fb;display:flex;flex-direction:column;z-index:30;box-shadow:18px 0 50px rgba(4,28,49,.08)}
.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 25% -5%,rgba(24,185,200,.22),transparent 30%),radial-gradient(circle at 110% 42%,rgba(19,119,239,.17),transparent 30%)}
.sidebar>*{position:relative}.sidebar-head{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#19c0cf,#1474ed);box-shadow:0 10px 28px rgba(18,120,239,.28);font-size:31px;font-weight:900;color:#fff}.brand-mark span{transform:translateY(-2px)}.brand-copy{display:flex;flex-direction:column;gap:1px}.brand-copy b{font-size:22px;letter-spacing:-.04em}.brand-copy small{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#8ba8c4;font-weight:800}.sidebar-close{display:none;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.sidebar-label{font-size:10px;letter-spacing:.14em;color:#6f8ca8;font-weight:850;padding:8px 12px 9px}.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:13px;color:#a9bfd3;font-weight:700;transition:.18s ease}.sidebar nav a:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px)}.sidebar nav a.active{background:linear-gradient(90deg,rgba(20,119,239,.25),rgba(24,185,200,.10));color:#fff;box-shadow:inset 3px 0 0 #18b9c8}.nav-icon{display:grid;place-items:center;width:20px;height:20px}.nav-icon svg,.logout-link svg,.mobile-menu svg{width:20px;height:20px;fill:currentColor}.sidebar-info{margin-top:auto;display:flex;gap:10px;align-items:center;padding:13px 12px;border:1px solid rgba(146,189,220,.12);background:rgba(255,255,255,.035);border-radius:14px}.sidebar-info-dot{width:9px;height:9px;border-radius:50%;background:#26d49b;box-shadow:0 0 0 5px rgba(38,212,155,.1)}.sidebar-info strong,.sidebar-info span{display:block}.sidebar-info strong{font-size:12px}.sidebar-info span{font-size:10px;color:#7392ac;margin-top:2px}.sidebar-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 8px 4px;color:#829bb1;font-size:12px}.version{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);padding:6px 8px;border-radius:9px}.logout-link{display:flex;align-items:center;gap:6px}.logout-link svg{width:15px;height:15px}
.main{margin-left:274px;padding:30px 38px 46px;max-width:1800px;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.page-heading{min-width:0}.page-kicker,.eyebrow{display:block;font-size:10px;letter-spacing:.15em;font-weight:900;color:var(--accent);margin-bottom:5px}.topbar h1{font-size:32px;line-height:1.08;margin:0;font-weight:900;letter-spacing:-.045em}.topbar p{margin:7px 0 0;color:var(--muted);font-size:14px}.topbar-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:9px 12px;border-radius:999px;color:#47627e;font-size:12px;font-weight:800;white-space:nowrap}.topbar-badge span{width:8px;height:8px;background:#19b885;border-radius:50%;box-shadow:0 0 0 4px #e4f8f1}.mobile-menu{display:none;border:0;background:#fff;border-radius:12px;width:43px;height:43px;place-items:center;color:#27435f;box-shadow:var(--shadow-sm);cursor:pointer}
.hero-panel{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(120deg,#092641 0%,#0c3858 55%,#0c6b7c 120%);color:#fff;padding:26px 28px;margin-bottom:20px;box-shadow:0 20px 55px rgba(6,50,82,.16)}.hero-panel:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:rgba(35,190,203,.13);right:-160px;top:-250px}.hero-panel:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.08);right:36px;bottom:-150px}.hero-panel>*{position:relative;z-index:1}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:22px}.hero-panel h2{font-size:24px;letter-spacing:-.035em;margin:0 0 6px}.hero-panel p{margin:0;color:#acc3d5;max-width:720px;font-size:14px;line-height:1.55}.hero-actions{display:flex;gap:9px;flex-wrap:wrap}.hero-panel .btn.secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.11);color:#fff}.hero-panel .btn.secondary:hover{background:rgba(255,255,255,.16)}
.panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;margin-bottom:20px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.panel h2{font-size:19px;margin:0;letter-spacing:-.025em}.panel h3{margin:0}.panel-head .muted{font-size:13px;margin-top:5px}.panel-accent{border-top:3px solid var(--accent)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;padding:18px 19px;box-shadow:var(--shadow-sm)}.kpi:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-34px;top:-34px;background:var(--kpi-soft,#edf4ff)}.kpi-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:9px}.kpi-dot{width:8px;height:8px;border-radius:50%;background:var(--kpi-color,var(--accent))}.kpi strong{display:block;font-size:30px;letter-spacing:-.05em;line-height:1}.kpi strong.small{font-size:19px;letter-spacing:-.025em;line-height:1.25}.kpi small{display:block;margin-top:7px;color:#8a9aab;font-size:11px}.kpi.blue{--kpi-color:#1578ef;--kpi-soft:#e8f2ff}.kpi.green{--kpi-color:#0baa75;--kpi-soft:#e7f8f1}.kpi.cyan{--kpi-color:#10adbb;--kpi-soft:#e6f8fa}.kpi.purple{--kpi-color:#775bd8;--kpi-soft:#f0edff}
.btn{border:1px solid transparent;border-radius:11px;padding:10px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,#147bf1,#0b63d7);color:#fff;box-shadow:0 8px 20px rgba(20,123,241,.20)}.btn.primary:hover{box-shadow:0 11px 28px rgba(20,123,241,.28)}.btn.secondary{background:#f0f6fc;color:#285a8a;border-color:#e0ebf4}.btn.secondary:hover{background:#e9f2fb}.btn.ghost{background:#fff;border-color:var(--line);color:#49647f}.btn-large{padding:13px 18px;font-size:14px}.action-row{display:flex;gap:9px;flex-wrap:wrap}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:#fff}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:12px 13px;text-align:left;border-bottom:1px solid #e8eef4;white-space:nowrap}th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#72849a;background:#f7fafc;font-weight:900}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdff}td a{font-weight:800;color:#176dcf}.score-pill{display:inline-grid;place-items:center;min-width:43px;height:32px;padding:0 10px;border-radius:10px;background:var(--good-bg);color:#087a54;font-weight:900}.score-pill.big{font-size:16px}.score-pill.mid{background:var(--warn-bg);color:#956400}.score-pill.low{background:var(--bad-bg);color:#b9303d}.confidence-pill{display:inline-flex;align-items:center;gap:5px;font-weight:850}.confidence-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#18a77f}.mini-pill{display:inline-block;padding:4px 7px;background:#eef3f7;border-radius:7px;font-size:10px;font-weight:800;color:#60758a}.sub{display:block;color:var(--muted);font-size:10px;margin-top:3px}.empty{padding:34px;text-align:center;border:1px dashed #cbd9e6;border-radius:14px;color:var(--muted);background:#fbfdff}.empty.small{padding:18px}.footnote{font-size:11px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid.single{grid-template-columns:1fr}.form-grid label,.service-card label,.panel>label{font-size:12px;font-weight:800;color:#405a73;display:block}.form-grid input,.form-grid select,.service-card input,.panel>label input{width:100%;margin-top:6px;border:1px solid #cddae6;border-radius:10px;padding:10px 11px;background:#fbfdff;color:#152c44;font:inherit;font-size:13px;transition:.16s}.form-grid input:focus,.form-grid select:focus,.service-card input:focus,.panel>label input:focus{outline:3px solid rgba(20,123,241,.10);border-color:#75aef2;background:#fff}.wide{grid-column:1/-1}.check{display:flex!important;align-items:center;gap:8px;margin-top:6px}.check input{width:auto!important;margin:0!important;accent-color:var(--accent)}.section-title{padding-top:13px;border-top:1px solid var(--line);margin-top:10px!important;font-size:12px;color:#1f4668;text-transform:uppercase;letter-spacing:.07em}.split-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.spot-list{display:flex;flex-direction:column;gap:10px}.spot-card{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border:1px solid var(--line);background:#fff;border-radius:15px;transition:.18s}.spot-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#17b9c6,#1678ed);opacity:0;transition:.18s}.spot-card:hover{border-color:#b7cee2;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.spot-card:hover:before{opacity:1}.spot-main{display:flex;align-items:center;gap:12px;min-width:0}.spot-marker{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:12px;background:linear-gradient(145deg,#e9f8fa,#e9f2ff);color:#0f7caa;font-size:18px}.spot-card strong{display:block;font-size:14px}.spot-card span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.spot-score{text-align:right}.spot-score b{font-size:25px;display:block;letter-spacing:-.04em}.spot-score small{color:var(--muted);font-size:10px}.spot-score-row{display:flex;gap:9px;align-items:center}.score-circle{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--score-color,#14a77b) calc(var(--score,0)*1%),#e8eff5 0);position:relative}.score-circle:after{content:"";position:absolute;width:38px;height:38px;background:#fff;border-radius:50%}.score-circle b{position:relative;z-index:1;font-size:14px!important}.spot-meta-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.meta-pill{font-size:10px!important;font-weight:750;background:#f3f7fa;border:1px solid #e6edf3;padding:4px 6px;border-radius:7px;margin:0!important}
.service-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.summary-chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow-sm)}.summary-chip span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:900}.summary-chip strong{display:block;font-size:23px;margin-top:4px;letter-spacing:-.04em}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.service-card{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;border-radius:17px;padding:17px}.service-card:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#cfdbe6}.service-card.service-up:after{background:#18a97b}.service-card.service-down:after{background:#dc4553}.service-card.service-limited:after{background:#db940e}.service-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.service-title{display:flex;gap:10px}.service-logo{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#eff5fa;color:#246894;font-weight:900;font-size:12px}.service-top h3{font-size:15px;margin-top:1px}.service-top span:not(.status){font-size:10px;color:var(--muted);margin-top:3px;display:block}.service-card p{font-size:12px;color:var(--muted);min-height:35px;line-height:1.45}.status{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-radius:999px;height:max-content}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status.up{background:var(--good-bg);color:#08734f}.status.down{background:var(--bad-bg);color:#b22333}.status.limited{background:var(--warn-bg);color:#936200}.status.unknown{background:#eef2f7;color:#68778d}.quota-block{padding:10px 0 11px;margin:7px 0 11px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quota-line{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px}.quota-progress{height:6px;background:#edf2f6;border-radius:99px;overflow:hidden}.quota-progress span{display:block;height:100%;width:var(--quota,0%);max-width:100%;background:linear-gradient(90deg,#1c90e8,#18b9c8);border-radius:99px}.service-meta{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0;color:var(--muted);font-size:10px}.service-meta span{padding:4px 6px;background:#f4f7fa;border-radius:6px}.error-text{color:var(--bad)!important;background:var(--bad-bg)!important}.note-box,.safe-box{padding:17px 19px;border-radius:16px;background:#edf5ff;border:1px solid #d2e5fb;margin-bottom:20px}.note-box p{margin:5px 0 0;color:#536e88;font-size:12px;line-height:1.5}.safe-box{display:flex;flex-direction:column;gap:4px;background:#ecfaf5;border-color:#cfefe2;color:#25664f}.safe-box span{font-size:12px;color:#59806f}
.code-chip,.code-example{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f4f7fa;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px}.code-example{margin:10px 0;white-space:pre-wrap;word-break:break-all;line-height:1.55}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.alert{padding:12px 14px;border-radius:12px;margin-bottom:16px;font-size:12px;font-weight:750;border:1px solid transparent}.alert.success{background:var(--good-bg);color:#08734f;border-color:#cceee0}.alert.error{background:var(--bad-bg);color:#a92534;border-color:#f6ced3}
.best-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.best-card{display:block;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff);padding:15px;transition:.17s}.best-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#bcd1e2}.best-card-head{display:flex;justify-content:space-between;gap:10px;align-items:start}.best-card h3{font-size:13px}.best-card .location{font-size:10px;color:var(--muted);margin-top:3px}.best-card-score{font-size:26px;font-weight:950;letter-spacing:-.05em}.best-card-time{font-size:10px;color:var(--muted);margin-top:13px;padding-top:10px;border-top:1px solid #ebf0f4}.metric-pair{display:flex;gap:8px;margin-top:8px}.metric-pair span{background:#f4f8fb;border-radius:8px;padding:5px 7px;font-size:10px;color:#5c748a}.metric-pair b{color:#234b6b}
.update-shell{max-width:760px;margin:25px auto}.update-card{padding:28px}.update-visual{display:flex;align-items:center;gap:18px}.update-orb{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(145deg,#157cf1,#16b7c4);color:#fff;font-size:33px;box-shadow:0 12px 30px rgba(20,123,241,.22)}.update-card h2{font-size:25px;margin:2px 0 4px}.version-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:24px 0}.version-compare>div:not(.version-arrow){background:#f7fafc;border:1px solid var(--line);padding:15px;border-radius:14px;text-align:center}.version-compare span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:900}.version-compare strong{font-size:23px;display:block;margin-top:4px}.version-arrow{color:#8aa0b3;font-size:23px}
.install-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 0,#dff7f9,transparent 26%),radial-gradient(circle at 100% 0,#e4efff,transparent 35%),#f4f8fb}.install-card{width:min(760px,100%);background:#fff;border:1px solid var(--line);border-radius:25px;box-shadow:0 24px 70px rgba(20,49,77,.12);padding:30px}.install-card>.brand-mark{margin-bottom:14px}.install-card h1{margin:0;font-size:28px}.install-card h3{grid-column:1/-1;margin:10px 0 0}.login-card{max-width:430px}.app-footer{display:flex;justify-content:space-between;gap:15px;margin-top:28px;padding:17px 3px 0;border-top:1px solid #dee7ef;color:#8798a9;font-size:10px}.app-footer span:first-child{font-weight:900;color:#577087}
@media(max-width:1180px){.kpi-grid,.best-card-grid{grid-template-columns:repeat(2,1fr)}.service-summary{grid-template-columns:repeat(2,1fr)}.split-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}}
@media(max-width:920px){.sidebar{transform:translateX(-105%);transition:.22s ease}.sidebar.open{transform:translateX(0)}.sidebar.open+.main{}.sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(5,23,39,.45);backdrop-filter:blur(3px);z-index:29}.sidebar-close{display:block}.main{margin-left:0;padding:24px}.mobile-menu{display:grid}.topbar{justify-content:flex-start}.topbar-badge{margin-left:auto}.two-col{grid-template-columns:1fr}}
@media(max-width:640px){.main{padding:16px}.topbar{align-items:flex-start}.topbar h1{font-size:26px}.topbar p{font-size:12px}.topbar-badge{display:none}.hero-row{align-items:flex-start;flex-direction:column}.hero-panel{padding:21px}.kpi-grid,.best-card-grid,.service-summary{grid-template-columns:1fr 1fr;gap:9px}.kpi{padding:15px}.kpi strong{font-size:25px}.panel{padding:16px;border-radius:17px}.panel-head{flex-direction:column;gap:10px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.service-grid{grid-template-columns:1fr}.spot-card{padding:13px}.spot-marker{display:none}.spot-score-row{gap:5px}.score-circle{width:44px;height:44px}.score-circle:after{width:35px;height:35px}.app-footer{flex-direction:column}.version-compare{gap:7px}.update-visual{align-items:flex-start}.update-orb{width:54px;height:54px;flex:0 0 54px}}
