/* Same visual language as the bug pages: DM Sans + Space Grotesk, near-black surfaces,
   green (#5df08a) primary accent, amber secondary, rounded 22px cards, pill status chips. */
:root{
  --bg:#05070b;--shell:#080c12;--card:#0e141d;--card-2:#131b26;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --text:#f4f7fb;--muted:#8994a8;--dim:#566176;
  --green:#5df08a;--green-bg:rgba(93,240,138,.10);--green-line:rgba(93,240,138,.40);
  --red:#ff6a76;--red-bg:rgba(255,106,118,.10);--red-line:rgba(255,106,118,.40);
  --amber:#ffc266;--amber-bg:rgba(255,194,102,.08);--amber-line:rgba(255,194,102,.38);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --display:"Space Grotesk","DM Sans",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark;background:var(--bg)}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none;
  background:radial-gradient(900px 520px at 50% -10%,rgba(93,240,138,.09),transparent 70%),radial-gradient(700px 500px at 100% 100%,rgba(255,106,118,.04),transparent 70%),var(--bg)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn-primary{padding:13px 26px;border-radius:14px;font:700 14.5px var(--font);color:#06210f;background:linear-gradient(135deg,#46d874,var(--green));box-shadow:0 8px 28px rgba(93,240,138,.25);transition:transform .15s}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{padding:13px 22px;border-radius:14px;font:600 14.5px var(--font);color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.btn-ghost:active{transform:scale(.96)}

/* ================= BOOT ================= */
.boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;transition:opacity .55s ease,transform .55s ease,visibility .55s;
  background:radial-gradient(900px 520px at 50% -10%,rgba(93,240,138,.1),transparent 70%),var(--bg)}
.boot.out{opacity:0;transform:scale(1.03);visibility:hidden;pointer-events:none}
.boot.out *{animation-play-state:paused!important}
.boot-glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.35;pointer-events:none}
.boot-glow.g1{width:320px;height:320px;background:#2fbf60;top:-90px;left:-110px;animation:drift 9s ease-in-out infinite alternate}
.boot-glow.g2{width:300px;height:300px;background:#ff6a76;opacity:.14;bottom:-100px;right:-110px;animation:drift 11s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
.boot-inner{position:relative;width:min(320px,86vw);text-align:center;padding-bottom:var(--sab)}
.logo-wrap{position:relative;width:128px;height:128px;margin:0 auto 26px;display:grid;place-items:center}
.logo-ring{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(93,240,138,.45))}
#bootRing{transition:stroke-dashoffset .45s cubic-bezier(.3,.7,.3,1)}
.logo{width:60px;height:60px;animation:float 2.6s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(93,240,138,.45))}
@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}
.boot-title{margin:0;font:700 23px var(--display);letter-spacing:.2em;color:var(--text)}
.boot-title::after{content:"";display:block;width:34px;height:3px;margin:10px auto 0;border-radius:9px;background:var(--green);box-shadow:0 0 12px var(--green)}
.boot-sub{margin:14px 0 22px;min-height:20px;color:var(--muted);font-size:13px}
.boot-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#2fbf60,var(--green));box-shadow:0 0 14px rgba(93,240,138,.6);transition:width .45s cubic-bezier(.3,.7,.3,1)}
.boot-pct{margin-top:10px;color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.1em}
.boot-error{margin-top:22px;padding:16px;border-radius:18px;border:1px solid var(--red-line);background:var(--red-bg)}
.boot-error-title{font:700 15px var(--display);margin-bottom:6px}
.boot-error-msg{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:14px;word-break:break-word}

/* ================= DASHBOARD (iPhone-app style) ================= */
.home{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;animation:homein .6s ease both}
@keyframes homein{from{opacity:0;transform:translateY(12px)}}
.home-head{flex:none;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + 18px) 12px calc(var(--sal) + 18px);
  border-bottom:1px solid var(--line);background:rgba(8,12,18,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand svg{width:38px;height:38px;padding:8px;flex:none;border-radius:12px;background:linear-gradient(145deg,#1a2535,#0d131b);border:1px solid var(--line-2);filter:drop-shadow(0 0 8px rgba(93,240,138,.25))}
.brand h2{margin:0;font:700 16px/1.1 var(--display);letter-spacing:.08em}
.brand p{margin:3px 0 0;color:var(--muted);font-size:11.5px}
.net{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid rgba(93,240,138,.28);background:var(--green-bg);color:var(--green);font-size:11.5px;font-weight:700}
.net i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(93,240,138,.14),0 0 10px var(--green)}
.net.off{color:var(--red);border-color:var(--red-line);background:var(--red-bg)}.net.off i{background:var(--red);box-shadow:none}

.home-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--sab) + 112px)}
.home-scroll::-webkit-scrollbar{width:0}
.pane{width:min(520px,100%);margin:0 auto;padding:0 calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px);animation:paneIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}}
.greet{padding:22px 4px 14px}
.eyebrow{margin:0;color:var(--green);font:700 11px var(--font);letter-spacing:.16em;text-transform:uppercase}
.greet h1{margin:8px 0 0;font:700 36px/1.05 var(--display);letter-spacing:-.045em}
.greet p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* summary strip with radar */
.summary{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:16px 18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(165deg,var(--card-2),var(--card))}
.radar{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center}
.radar i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--green);opacity:0;animation:ping 2.6s ease-out infinite}
.radar i:nth-child(2){animation-delay:.9s}.radar i:nth-child(3){animation-delay:1.8s}
@keyframes ping{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1);opacity:0}}
.radar b{position:relative;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
.summary.warn .radar i,.summary.warn .radar b{border-color:var(--amber);background:var(--amber);box-shadow:0 0 18px var(--amber)}
.summary.warn .radar i{background:none}
.summary.bad .radar i,.summary.bad .radar b{border-color:var(--red);background:var(--red);box-shadow:0 0 18px var(--red)}
.summary.bad .radar i{background:none}
.summary h4{margin:0;font:700 17px var(--display);letter-spacing:-.02em}
.summary p{margin:4px 0 0;color:var(--muted);font-size:12.5px}

.cards{display:grid;gap:16px;align-content:start}
.card{--a:var(--green);--abg:var(--green-bg);--aline:var(--green-line);--glow:rgba(93,240,138,.38);
  position:relative;overflow:hidden;isolation:isolate;text-align:left;width:100%;min-height:262px;padding:20px;border-radius:30px;border:1px solid var(--line-2);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--card);
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;animation:cardin .6s cubic-bezier(.2,.8,.2,1) both}
.card.amber{--a:var(--amber);--abg:var(--amber-bg);--aline:var(--amber-line);--glow:rgba(255,194,102,.34)}
.card:nth-child(2){animation-delay:.1s}
@keyframes cardin{from{opacity:0;transform:translateY(26px) scale(.96)}}
/* animated aurora behind the content */
.card::before{content:"";position:absolute;z-index:-1;width:300px;height:300px;right:-110px;top:-120px;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(6px);opacity:.75;animation:aurora 7s ease-in-out infinite alternate}
.card::after{content:attr(data-n);position:absolute;z-index:-1;right:14px;bottom:-26px;font:700 150px/1 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--a);opacity:.1;pointer-events:none}
@keyframes aurora{to{transform:translate(-40px,36px) scale(1.18)}}
.card:active{transform:scale(.97)}
.card:hover{border-color:var(--aline);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 44px -10px var(--glow)}
.card[disabled]{opacity:.6;cursor:default}.card[disabled]:active{transform:none}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-ic{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;background:var(--abg);border:1px solid var(--aline);box-shadow:0 0 26px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.08)}
.card-ic svg{width:31px;height:31px;fill:none;stroke:var(--a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--glow))}
.status{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.status i{width:7px;height:7px;border-radius:50%;background:#6b7280;flex:none}
.status.ok{color:var(--green);border-color:rgba(93,240,138,.28)}.status.ok i{background:var(--green);box-shadow:0 0 0 3px rgba(93,240,138,.14),0 0 10px var(--green);animation:pulse 1.6s infinite}
.status.error{color:var(--red);border-color:var(--red-line)}.status.error i{background:var(--red)}
.status.checking{color:var(--amber);border-color:var(--amber-line)}.status.checking i{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.card-mid h3{margin:0;font:700 34px/1.05 var(--display);letter-spacing:-.04em}
.card-mid p{margin:7px 0 0;color:var(--muted);font-size:14px}
.card-mid .proj{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--muted);font:600 11px var(--display)}
.card-mid .proj::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a)}
.launch{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:6px 6px 6px 20px;border-radius:99px;font:700 15px var(--font);color:#06210f;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 78%,#000),var(--a));box-shadow:0 12px 30px -8px var(--glow)}
.launch b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(6,33,15,.16)}
.launch svg{width:19px;height:19px;fill:none;stroke:#06210f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.card:hover .launch svg{transform:translateX(3px)}
.card[disabled] .launch{background:rgba(255,255,255,.06);box-shadow:none;color:var(--muted)}
.card[disabled] .launch svg{stroke:var(--muted)}
.hint{color:var(--muted);font-size:12px;line-height:1.55}
.hint code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--text);font-size:11px}

/* status tab */
.lcard{padding:16px 18px;margin-bottom:12px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(165deg,var(--card-2),var(--card))}
.lcard-h{display:flex;align-items:center;gap:12px}
.lcard-h .dot{width:10px;height:10px;border-radius:50%;background:#6b7280;flex:none}
.lcard-h .dot.ok{background:var(--green);box-shadow:0 0 0 4px rgba(93,240,138,.14),0 0 12px var(--green)}
.lcard-h .dot.error{background:var(--red);box-shadow:0 0 0 4px rgba(255,106,118,.12)}
.lcard-h .dot.checking{background:var(--amber);animation:pulse 1s infinite}
.lcard-h b{flex:1;font:700 16px var(--display);letter-spacing:-.02em}
.lcard-h span{color:var(--muted);font-size:12px;font-weight:700}
.kvs{margin-top:12px;display:grid;gap:8px}
.kvs div{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--muted)}
.kvs div span:last-child{color:var(--text);font:600 12px var(--display);text-align:right;word-break:break-all}
.pane .btn-ghost{width:100%;margin-top:4px}
.steps{display:grid;gap:10px;margin-top:6px}
.steps div{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13.5px;line-height:1.5}
.steps b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);color:var(--green);font:700 12px var(--display)}
.steps em{color:var(--text);font-style:normal;font-weight:600}
.ver{margin:18px 4px 0;color:var(--dim);font-size:11.5px;text-align:center}

/* floating glass dock (iOS tab bar) */
.dock{position:absolute;z-index:6;left:50%;bottom:calc(var(--sab) + 14px);transform:translateX(-50%);width:min(380px,calc(100% - 28px));
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:28px;border:1px solid var(--line-2);
  background:rgba(14,20,29,.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.dk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0 8px;border-radius:22px;color:var(--dim);font:700 10.5px var(--font);letter-spacing:.02em;transition:.22s}
.dk svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dk.on{color:var(--green);background:var(--green-bg);box-shadow:inset 0 0 0 1px rgba(93,240,138,.22)}
.dk:active{transform:scale(.94)}
/* ================= MODULE VIEW ================= */
.module{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--bg);animation:modin .35s cubic-bezier(.2,.8,.2,1) both}
.module.closing{animation:modout .28s ease both}
@keyframes modin{from{transform:translateY(36px);opacity:0}}
@keyframes modout{to{transform:translateY(36px);opacity:0}}
.mod-bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 10px) calc(var(--sar) + 14px) 10px calc(var(--sal) + 14px);background:rgba(8,12,18,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:2}
.back,.reload{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.back:active,.reload:active{transform:scale(.92)}
.back svg,.reload svg{width:19px;height:19px;fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.reload.spinning svg{animation:rot .7s linear}
@keyframes rot{to{transform:rotate(360deg)}}
.mod-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.mod-title b{font:700 14px var(--display);letter-spacing:.1em}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:10.5px;font-weight:700}
.chip i{width:6px;height:6px;border-radius:50%;background:#6b7280}
.chip.ok{color:var(--green);border-color:rgba(93,240,138,.28);background:var(--green-bg)}.chip.ok i{background:var(--green);box-shadow:0 0 8px var(--green)}
.chip.wait{color:var(--amber);border-color:var(--amber-line);background:var(--amber-bg)}.chip.wait i{background:var(--amber);animation:pulse 1s infinite}
.chip.err{color:var(--red);border-color:var(--red-line);background:var(--red-bg)}.chip.err i{background:var(--red)}
.mod-body{position:relative;flex:1;min-height:0;background:var(--bg)}
.mod-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg);opacity:0;transition:opacity .3s}
.mod-body iframe.ready{opacity:1}
.mod-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted);font-size:13px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--green);animation:rot .8s linear infinite;box-shadow:0 0 16px rgba(93,240,138,.3)}
.mod-error{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:10px;padding:30px;text-align:center;background:var(--bg)}
.mod-error-ic svg{width:52px;height:52px;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 12px rgba(255,106,118,.4))}
.mod-error-title{font:700 18px var(--display)}
.mod-error-msg{max-width:320px;color:var(--muted);font-size:13.5px;line-height:1.6}
.mod-error-actions{display:flex;gap:10px;margin-top:10px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}