:root {
  --bg: #07071a;
  --bg-2: #0a0a23;
  --glass: rgba(255,255,255,0.055);
  --glass-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.1);
  --glass-border-strong: rgba(255,255,255,0.18);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.62);
  --text-faint: rgba(255,255,255,0.38);
  --green: #00ff88;
  --green-soft: rgba(0,255,136,0.14);
  --blue: #00d4ff;
  --blue-soft: rgba(0,212,255,0.14);
  --red: #ff3b5c;
  --red-soft: rgba(255,59,92,0.14);
  --yellow: #ffd84d;
  --purple: #9d7bff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}

html,body{
  background:#02020a;
  color:var(--text);
  font-family:-apple-system,"SF Pro Display","Inter",BlinkMacSystemFont,system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
  height:100%;width:100%;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#app{
  position:fixed;inset:0;overflow:hidden;z-index:10;
}

.space-bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,212,255,.10),transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%,rgba(157,123,255,.08),transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%,rgba(0,255,136,.06),transparent 60%),
    linear-gradient(180deg,#07071a 0%,#050514 50%,#08081c 100%);
}

.starfield{position:fixed;inset:0;z-index:1;pointer-events:none;}

/* ── App root ── */
.app-root{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:10;overflow:hidden;
}

.screen{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(110px + env(safe-area-inset-bottom,0px));
  transition:transform 480ms cubic-bezier(0.32,0.72,0.2,1),opacity 300ms ease;
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none;}
.screen.enter-from-right{transform:translateX(100%);opacity:0;}
.screen.enter-from-bottom{transform:translateY(100%);opacity:0;}
.screen.exit-to-left{transform:translateX(-30%);opacity:0;}
.screen.active{transform:translate(0,0);opacity:1;}

/* ── Glass ── */
.glass{
  background:var(--glass);
  backdrop-filter:blur(40px) saturate(140%);
  -webkit-backdrop-filter:blur(40px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 32px rgba(0,0,0,.25);
}
.glass-strong{
  background:var(--glass-strong);
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  border:1px solid var(--glass-border-strong);
  border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.3);
}

/* ── Nav pill ── */
.nav-pill{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:60;
  background:rgba(20,20,40,.72);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;padding:6px;
  display:flex;gap:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(0,212,255,.1);
}
.nav-item{
  position:relative;border:0;background:transparent;
  color:var(--text-dim);
  width:52px;height:44px;
  display:grid;place-items:center;
  border-radius:22px;cursor:pointer;
  transition:all 220ms cubic-bezier(0.32,0.72,0.2,1);
  font-size:19px;
}
.nav-item.active{
  background:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav-item.admin{color:var(--purple);}
.nav-item.admin.active{background:rgba(157,123,255,.18);color:var(--purple);}

/* ── Buttons ── */
.btn{
  border:0;border-radius:16px;padding:14px 20px;
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform 120ms ease,box-shadow 200ms ease,background 200ms ease;
  letter-spacing:-0.01em;
}
.btn:active{transform:scale(0.96);}
.btn-green{
  background:linear-gradient(135deg,#00ff88,#00d977);color:#002a14;
  box-shadow:0 8px 24px rgba(0,255,136,.4),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15);
}
.btn-blue{
  background:linear-gradient(135deg,#00d4ff,#009ee0);color:#001b29;
  box-shadow:0 8px 24px rgba(0,212,255,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-red{
  background:linear-gradient(135deg,#ff3b5c,#e02644);color:#fff;
  box-shadow:0 8px 24px rgba(255,59,92,.35),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-ghost{
  background:var(--glass);color:#fff;
  border:1px solid var(--glass-border);backdrop-filter:blur(20px);
}

/* ── Typography ── */
.h-display{font-size:64px;font-weight:700;letter-spacing:-0.04em;line-height:1;}
.h-title{font-size:22px;font-weight:700;letter-spacing:-0.02em;}
.h-section{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);}
.mono{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;}

/* ── Chips ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:500;color:var(--text-dim);
}
.chip.green{background:var(--green-soft);border-color:rgba(0,255,136,.25);color:var(--green);}
.chip.blue{background:var(--blue-soft);border-color:rgba(0,212,255,.25);color:var(--blue);}
.chip.red{background:var(--red-soft);border-color:rgba(255,59,92,.3);color:var(--red);}
.chip.yellow{background:rgba(255,216,77,.12);border-color:rgba(255,216,77,.3);color:var(--yellow);}
.chip.purple{background:rgba(157,123,255,.14);border-color:rgba(157,123,255,.3);color:var(--purple);}

/* ── Progress ── */
.progress{
  height:4px;border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;position:relative;
}
.progress-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  box-shadow:0 0 12px rgba(0,255,136,.5);
  transition:width 600ms cubic-bezier(0.32,0.72,0.2,1);
}

/* ── Status dot ── */
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  position:relative;flex-shrink:0;display:inline-block;
}
.dot::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:var(--green);opacity:.3;animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(.8);opacity:.5;}100%{transform:scale(2);opacity:0;}}
.dot.red{background:var(--red);box-shadow:0 0 8px var(--red);}
.dot.red::before{background:var(--red);}
.dot.yellow{background:var(--yellow);box-shadow:0 0 8px var(--yellow);}
.dot.yellow::before{background:var(--yellow);}
.dot.gray{background:rgba(255,255,255,.3);box-shadow:none;}
.dot.gray::before{display:none;}

/* ── Sheet ── */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity 300ms ease;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:8px;right:8px;
  bottom:-100%;z-index:101;
  background:rgba(20,20,40,.92);
  backdrop-filter:blur(60px) saturate(180%);
  -webkit-backdrop-filter:blur(60px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  padding:14px 18px calc(24px + env(safe-area-inset-bottom,0px));
  transition:bottom 400ms cubic-bezier(0.32,0.72,0.2,1);
  max-height:85%;overflow-y:auto;scrollbar-width:none;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
}
.sheet::-webkit-scrollbar{display:none;}
.sheet.open{bottom:8px;}
.sheet-handle{
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.25);margin:0 auto 16px;
}

/* ── Counter ── */
.counter-num{
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.counter-glow{
  background:linear-gradient(180deg,#00ff88 0%,#00d4ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(0,255,136,.35));
}

/* ── Layout utils ── */
.row{display:flex;align-items:center;}
.col{display:flex;flex-direction:column;}
.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}
.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}
.mt-5{margin-top:20px;}.mt-6{margin-top:24px;}
.between{justify-content:space-between;}
.center{justify-content:center;align-items:center;}
.grow{flex:1;}

/* ── Quick grid ── */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.quick-tile{
  padding:16px 10px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(40px);text-align:center;cursor:pointer;
  transition:transform 200ms,background 200ms;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.quick-tile:active{transform:scale(0.95);}
.quick-tile .icon{font-size:22px;line-height:1;}
.quick-tile .lbl{font-size:11px;color:var(--text-dim);font-weight:500;line-height:1.2;}

/* ── Screen header ── */
.screen-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 4px 12px;
}
.screen-header .title{font-size:26px;font-weight:700;letter-spacing:-0.02em;}

/* ── Tariff card ── */
.tariff-card{
  position:relative;padding:18px 18px 16px;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(40px);cursor:pointer;
  transition:transform 200ms,border-color 200ms;
}
.tariff-card:active{transform:scale(.98);}
.tariff-card.recommended{
  border-color:rgba(0,255,136,.4);
  background:linear-gradient(135deg,rgba(0,255,136,.08),rgba(0,212,255,.06));
  box-shadow:0 0 40px rgba(0,255,136,.12),inset 0 1px 0 rgba(255,255,255,.1);
}
.tariff-card .badge-rec{
  position:absolute;top:-8px;right:14px;
  background:linear-gradient(135deg,#00ff88,#00d4ff);
  color:#002a14;padding:4px 10px;border-radius:100px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}

/* ── List row ── */
.list-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:16px;transition:background 200ms;cursor:pointer;
}
.list-row:active{background:rgba(255,255,255,.04);}
.list-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.04);border-radius:0;}

/* ── Avatar ── */
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:600;font-size:14px;color:#fff;flex-shrink:0;
}

/* ── Server card ── */
.server-card{
  padding:18px;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(40px);position:relative;overflow:hidden;
}
.server-card::before{
  content:"";position:absolute;top:-50px;right:-50px;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--accent,rgba(0,255,136,.15)),transparent 70%);
  pointer-events:none;
}
.server-card .flag{font-size:32px;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}

/* ── Ping bars ── */
.ping-bars{display:flex;gap:2px;align-items:flex-end;height:14px;}
.ping-bars span{width:3px;border-radius:1px;background:rgba(255,255,255,.2);}
.ping-bars span.on{background:var(--green);box-shadow:0 0 6px rgba(0,255,136,.5);}
.ping-bars .b1{height:25%;}.ping-bars .b2{height:50%;}
.ping-bars .b3{height:75%;}.ping-bars .b4{height:100%;}

/* ── World map ── */
.world-map{
  position:relative;height:180px;border-radius:20px;
  background:radial-gradient(ellipse at center,rgba(0,212,255,.08),transparent 70%),rgba(255,255,255,.02);
  overflow:hidden;border:1px solid rgba(255,255,255,.05);
}
.map-dot{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--green);box-shadow:0 0 16px var(--green),0 0 32px var(--green);
}
.map-dot::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid var(--green);opacity:.4;animation:ping 2s infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:.6;}100%{transform:scale(3);opacity:0;}}
.map-label{
  position:absolute;transform:translate(-50%,calc(-100% - 8px));
  font-size:10px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.6);padding:3px 8px;border-radius:100px;
  white-space:nowrap;backdrop-filter:blur(10px);
}

/* ── Segmented ── */
.segmented{
  display:flex;gap:2px;padding:3px;
  background:rgba(255,255,255,.05);border-radius:14px;
  border:1px solid rgba(255,255,255,.05);
}
.seg-btn{
  flex:1;border:0;background:transparent;color:var(--text-dim);
  padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;
  border-radius:11px;cursor:pointer;transition:all 200ms;
}
.seg-btn.active{
  background:rgba(255,255,255,.1);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Metric tile ── */
.metric{
  padding:14px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(40px);
}
.metric .label{font-size:11px;color:var(--text-faint);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.metric .val{font-size:24px;font-weight:700;letter-spacing:-0.02em;margin-top:4px;}
.metric .delta{font-size:11px;margin-top:2px;}

/* ── Traffic row ── */
.traf-row{
  display:grid;grid-template-columns:80px 1fr 70px;
  align-items:center;gap:10px;padding:8px 0;
}

/* ── Sheet btn ── */
.sheet-btn{
  display:flex;align-items:center;gap:14px;padding:16px;
  border-radius:18px;background:var(--glass);border:1px solid var(--glass-border);
  cursor:pointer;transition:background 200ms;width:100%;
}
.sheet-btn:active{background:rgba(255,255,255,.08);}
.sheet-btn .icon-wrap{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}

/* ── Step indicator ── */
.step-indicator{display:flex;gap:6px;justify-content:center;}
.step-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.2);transition:all 300ms;
}
.step-dot.active{
  width:24px;border-radius:4px;
  background:var(--green);box-shadow:0 0 12px rgba(0,255,136,.5);
}

/* ── QR frame ── */
.qr-frame{
  width:200px;height:200px;border-radius:20px;
  background:#fff;display:grid;place-items:center;padding:12px;
}

/* ── Migration banner ── */
.migrate-banner{
  background:linear-gradient(135deg,rgba(255,216,77,.12),rgba(255,59,92,.1));
  border:1px solid rgba(255,216,77,.3);border-radius:18px;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
}

/* ── Loader ── */
.loader{
  position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;z-index:200;
}
.loader-ring{
  width:40px;height:40px;border-radius:50%;
  border:2.5px solid rgba(0,255,136,.15);border-top-color:var(--green);
  animation:spin .8s linear infinite;
  box-shadow:0 0 20px rgba(0,255,136,.3);
}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-text{font-size:13px;color:var(--text-faint);letter-spacing:.5px;}

/* ── Toast ── */
.toast-wrap{
  position:fixed;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%) translateY(8px);
  z-index:500;opacity:0;transition:all .25s;pointer-events:none;
}
.toast-wrap.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast-inner{
  background:rgba(20,20,40,.95);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:10px 20px;font-size:14px;font-weight:500;
  white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* ── Animations ── */
@keyframes slide-up-in{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.slide-in{animation:slide-up-in 320ms ease both;}
@keyframes float-up{0%{opacity:0;transform:translateY(20px);}50%{opacity:1;}100%{opacity:0;transform:translateY(-40px);}}

/* ── Admin sparkline ── */
.donut{position:relative;width:84px;height:84px;}