*,*::before,*::after{box-sizing:border-box}
:root{
  /* brand spectrum — sampled from the mark */
  --spec:linear-gradient(90deg,#8b17f0 0%,#5b2ff5 11%,#1e6bf5 22%,#00b4f0 33%,
         #00d9c0 43%,#22dd7a 52%,#ffc400 64%,#ff9500 73%,#ff5c7a 84%,#e81ff0 93%,#c81ff5 100%);
  --spec-soft:linear-gradient(90deg,#8b17f01a,#1e6bf51a,#00d9c01a,#ffc4001a,#ff5c7a1a,#e81ff01a);
  --mark:linear-gradient(135deg,#e81ff0 0%,#ff5c7a 22%,#ff9500 38%,#ffc400 50%,
         #22dd7a 62%,#00b4f0 76%,#5b2ff5 90%,#8b17f0 100%);

  --bg:#f4f6fa; --panel:#ffffff; --chrome:#0d1424; --chrome2:#18213a;
  --ink:#0d1424; --ink2:#5a6780; --ink3:#95a1b8; --line:#e6eaf1; --line2:#ccd4e0;
  --pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#eef4ff;
  --ok:#00a173; --ok-l:#e8fbf4; --warn:#e08600; --warn-l:#fff8e8;
  --err:#e0303f; --err-l:#fef1f2; --pur:#7c1ff5; --pur-l:#f4efff;
  --r:10px; --r2:14px;
  --sh:0 1px 2px rgba(13,20,36,.04),0 1px 3px rgba(13,20,36,.06);
  --sh2:0 8px 24px -12px rgba(13,20,36,.18),0 2px 6px -2px rgba(13,20,36,.06);
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
html,body{height:100%}
body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid var(--bg)}

/* ---------- prototype chrome ---------- */
.protobar{position:fixed;top:0;left:0;right:0;height:46px;background:#070b16;color:#e2e8f0;
  display:flex;align-items:center;gap:16px;padding:0 16px;z-index:200;font-size:13px}
.protobar .brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em}
.protobar .dot{width:18px;height:18px;border-radius:6px;background:var(--mark)}
.protobar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--spec)}
.protobar .tag{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#93c5fd;background:#1e3a8a55;border:1px solid #1e40af;padding:2.5px 7px;border-radius:5px}
.modes{display:flex;gap:3px;background:#0f172a;padding:3px;border-radius:9px;margin-left:auto}
.modes button{padding:6px 14px;border-radius:6px;font-size:12.5px;font-weight:500;color:#94a3b8}
.modes button.on{background:#334155;color:#fff}
.protobar .note{color:#64748b;font-size:12px}

/* ---------- app shell ---------- */
.app{display:flex;height:100vh;padding-top:46px}
.side{width:232px;flex:0 0 232px;background:linear-gradient(180deg,var(--chrome),var(--chrome2));
  color:#c7d0e0;display:flex;flex-direction:column;overflow-y:auto;position:relative}
.side .logo{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #23304f}
.side .logo .mk{width:30px;height:30px;border-radius:8px;background:var(--mark);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.side .logo b{color:#fff;font-size:14.5px;font-weight:600;display:block;line-height:1.2}
.side .logo span{font-size:11px;color:#64748b}
.nav{padding:12px 10px;flex:1}
.nav .grp{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5b6a8a;padding:15px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:13.3px;
  color:#cbd5e1;margin-bottom:1px;transition:.12s}
.nav a:hover{background:#1f2a45;color:#fff}
.nav a.on{background:#1f2a45;color:#fff;font-weight:550;position:relative}
.nav a.on::before{content:'';position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--spec);background-size:600% 100%}
.nav a .ic{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.nav a .cnt{margin-left:auto;font-size:10.5px;background:#334155;padding:1px 6px;border-radius:20px}
.nav a.on .cnt{background:#2f3d5e}
.side .me{padding:12px;border-top:1px solid #23304f;display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;background:#2b3550;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:#e2e8f0;flex:0 0 30px}
.side .me b{color:#e2e8f0;font-size:12.5px;font-weight:500;display:block;line-height:1.3}
.side .me span{font-size:10.5px;color:#64748b}

.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.top{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 26px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.top h1{font-size:17px}
.top .sub{font-size:12.5px;color:var(--ink2);margin-top:2px}
.top .r{margin-left:auto;display:flex;align-items:center;gap:9px}
.wrap{padding:22px 26px 60px;max-width:1320px;width:100%}

/* ---------- atoms ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh);
  transition:box-shadow .18s}
.card:hover{box-shadow:var(--sh2)}
.card.hero{position:relative;overflow:hidden}
.card.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--spec)}
.card>.hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card>.hd h3{font-size:14px}
.card>.hd .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.card>.bd{padding:18px}
.card>.ft{padding:12px 18px;border-top:1px solid var(--line);background:#fafbfd;
  border-radius:0 0 var(--r2) var(--r2);display:flex;gap:8px;align-items:center}
.muted{color:var(--ink2)}.sm{font-size:12.5px}.xs{font-size:11.5px}
.mono{font-family:var(--mono);font-size:12px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;align-items:center}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;font-size:13px;
  font-weight:500;background:var(--panel);border:1px solid var(--line2);color:var(--ink);transition:.12s;white-space:nowrap}
.btn:hover{background:#f8fafc;border-color:#94a3b8}
.btn.p{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25)}
.btn.grad{border:0;color:#fff;background:linear-gradient(100deg,#7c1ff5,#2563eb 55%,#00b4f0);
  background-size:170% 100%;box-shadow:0 2px 10px -4px rgba(124,31,245,.55)}
.btn.grad:hover{background-position:100% 0}
.btn.p:hover{background:var(--pri-d);border-color:var(--pri-d)}
.btn.d{background:var(--err);border-color:var(--err);color:#fff}
.btn.d:hover{filter:brightness(.92)}
.btn.g{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.g:hover{background:#f1f5f9;color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.pill.ok{background:var(--ok-l);color:#047857}
.pill.w{background:var(--warn-l);color:#b45309}
.pill.e{background:var(--err-l);color:#b91c1c}
.pill.i{background:var(--pri-l);color:#1d4ed8}
.pill.n{background:#f1f5f9;color:#475569}
.pill.p{background:var(--pur-l);color:#6d28d9}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}

label.f{display:block;margin-bottom:14px}
label.f>span{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px;color:var(--ink)}
label.f>em{display:block;font-size:11.5px;color:var(--ink2);font-style:normal;margin-top:5px;line-height:1.45}
.inp{width:100%;padding:8px 11px;border:1px solid var(--line2);border-radius:8px;background:#fff;
  font-size:13.3px;transition:.12s}
.inp:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px #2563eb22}
.inp[readonly]{background:#f8fafc;color:var(--ink2)}
select.inp{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
textarea.inp{resize:vertical;min-height:70px;line-height:1.5}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tbody tr:hover{background:#f7f9fc}
tbody tr:last-child td{border-bottom:0}
th:first-child,td:first-child{padding-left:18px}
th:last-child,td:last-child{padding-right:18px}

/* ---- spectrum progress: full-width, hairline, 256-colour gradient ---- */
.bar{height:3px;background:#e6ebf2;border-radius:20px;overflow:hidden;width:100%}
.bar>i{display:block;height:100%;border-radius:20px;transition:width .45s ease;
  background:var(--spec);background-size:240% 100%;background-position:0 0}
.bar.live>i{animation:flow 3s linear infinite}
.bar.stall>i{background:repeating-linear-gradient(45deg,#cbd5e1,#cbd5e1 6px,#e2e8f0 6px,#e2e8f0 12px)!important;animation:none}
.bar.stall{background:#eef1f6}
.bar.thin{height:2px}
.bar.tick{height:5px}
@keyframes flow{to{background-position:240% 0}}
.bar>i.ok{background:var(--ok)}.bar>i.w{background:var(--warn)}.bar>i.e{background:var(--err)}
.bar>i.mut{background:#cbd5e1}

/* big, airy progress block — prominent readout, hairline rule */
.prog{padding:2px 0}
.prog .top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.prog .pct{font-size:38px;font-weight:650;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.prog .rate{font-size:13px;color:var(--ink2);margin-top:6px}
.prog .meta{display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-size:11.8px;color:var(--ink2)}
.prog .seg{display:flex;gap:2px;margin-top:11px;height:3px}
.prog .seg i{flex:1;border-radius:20px;background:#e6ebf2}
.prog .seg i.d{background:var(--spec);background-size:1400% 100%}
.pct.stall{background:none!important;-webkit-text-fill-color:var(--ink3);color:var(--ink3)!important}
.netban{border-radius:10px;padding:11px 13px;margin:14px 0 0;font-size:12.6px;line-height:1.5;
  display:flex;gap:10px;align-items:flex-start;border:1px solid}
.netban.lost{background:var(--err-l);border-color:#fecaca;color:#991b1b}
.netban.wait{background:var(--warn-l);border-color:#fde68a;color:#92400e}
.netban.res{background:var(--pri-l);border-color:#bfdbfe;color:#1e40af}
.netban.ok{background:var(--ok-l);border-color:#a7f3d0;color:#065f46}
.netban b{font-weight:650}
.netban .act{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  display:inline-block;animation:sp .7s linear infinite;flex:0 0 13px;margin-top:1px}
@keyframes sp{to{transform:rotate(360deg)}}
.netchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;background:#101a2e;color:#94a3b8;border:1px solid #24314f;cursor:pointer}
.netchip.dn{background:#3f1418;color:#fca5a5;border-color:#7f1d1d}
.netchip .d{width:6px;height:6px;border-radius:50%;background:#22c55e}
.netchip.dn .d{background:#ef4444;animation:pls2 1s infinite}
.netchip.on{background:#3a2a05;color:#fcd34d;border-color:#78350f}
.netchip:hover{border-color:#475569}
@keyframes pls2{50%{opacity:.25}}
.gtxt{background:linear-gradient(92deg,#7c1ff5,#2563eb 42%,#00a9d6 78%,#00b892);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.prog .pct{transition:none}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;
  box-shadow:0 0 0 0 rgba(0,161,115,.55);animation:pls 1.8s infinite}
@keyframes pls{70%{box-shadow:0 0 0 7px rgba(0,161,115,0)}100%{box-shadow:0 0 0 0 rgba(0,161,115,0)}}
.prog .seg i{transition:background .35s}

.kpi{padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:3px;
  background:var(--spec);background-size:420% 100%;opacity:.9}
.g4>.kpi:nth-child(1)::after{background-position:0% 0}
.g4>.kpi:nth-child(2)::after{background-position:33% 0}
.g4>.kpi:nth-child(3)::after{background-position:66% 0}
.g4>.kpi:nth-child(4)::after{background-position:100% 0}
.kpi .lb{font-size:11.5px;color:var(--ink2);font-weight:500;display:flex;align-items:center;gap:6px}
.kpi .vl{font-size:26px;font-weight:650;letter-spacing:-.025em;margin:6px 0 3px;font-variant-numeric:tabular-nums}
.kpi .dl{font-size:11.5px;color:var(--ink2)}
.kpi .dl b{font-weight:600}
.up{color:var(--ok)}.dn{color:var(--err)}

.note{padding:12px 14px;border-radius:10px;font-size:12.8px;line-height:1.55;display:flex;gap:10px}
.note .ic{flex:0 0 16px;margin-top:1px}
.note.i{background:var(--pri-l);color:#1e40af;border:1px solid #bfdbfe}
.note.w{background:var(--warn-l);color:#92400e;border:1px solid #fde68a}
.note.e{background:var(--err-l);color:#991b1b;border:1px solid #fecaca}
.note.o{background:var(--ok-l);color:#065f46;border:1px solid #a7f3d0}
.note b{font-weight:600}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{padding:9px 14px;font-size:13px;color:var(--ink2);border-bottom:2px solid transparent;
  margin-bottom:-1px;font-weight:500;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:transparent;position:relative}
.tabs button.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2.5px;border-radius:3px;background:var(--spec);background-size:700% 100%}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 10px;border-radius:7px;
  background:#f1f5f9;border:1px solid var(--line);font-size:12px;font-family:var(--mono)}
.chip.ok{background:var(--ok-l);border-color:#a7f3d0;color:#047857}
.chip.e{background:var(--err-l);border-color:#fecaca;color:#b91c1c}
.chip x{cursor:pointer;opacity:.5;font-style:normal;font-size:14px;line-height:1}
.chip x:hover{opacity:1}

.steps{display:flex;align-items:center;gap:0;margin-bottom:22px}
.steps .s{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink3);font-weight:500}
.steps .s .n{width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:var(--ink2);
  display:grid;place-items:center;font-size:11.5px;font-weight:600}
.steps .s.on{color:var(--pri)}
.steps .s.on .n{background:var(--mark);color:#fff;box-shadow:0 2px 8px -2px rgba(124,31,245,.55)}
.steps .s.dn{color:var(--ok)}
.steps .s.dn .n{background:var(--ok);color:#fff}
.steps .ln{flex:1;height:1.5px;background:#e2e8f0;margin:0 12px;min-width:20px}

.drop{border:2px dashed var(--line2);border-radius:var(--r2);padding:38px;text-align:center;background:#fafbfc;transition:.15s}
.drop:hover{border-color:transparent;background:#fbfcfe;box-shadow:0 0 0 2px #8b17f033,0 0 0 4px #00b4f022}
.drop .big{font-size:15px;font-weight:600;margin:12px 0 5px}

.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.tl .ev{position:relative;padding-bottom:16px}
.tl .ev:last-child{padding-bottom:0}
.tl .ev::before{content:'';position:absolute;left:-23.5px;top:4px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--line2)}
.tl .ev.ok::before{border-color:var(--ok);background:var(--ok)}
.tl .ev.pri::before{border-color:var(--pri);background:var(--pri)}
.tl .ev.e::before{border-color:var(--err);background:var(--err)}
.tl .ev .t{font-size:13px;font-weight:500}
.tl .ev .m{font-size:11.8px;color:var(--ink2);margin-top:2px;line-height:1.5}

.sw{position:relative;width:38px;height:21px;flex:0 0 38px;border-radius:20px;background:#cbd5e1;transition:.16s;cursor:pointer}
.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:.16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--pri)}
.sw.on::after{transform:translateX(17px)}
.swrow{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid #f1f5f9}
.swrow:last-child{border-bottom:0}
.swrow .tx{flex:1}
.swrow .tx b{font-size:13px;font-weight:500;display:block}
.swrow .tx span{font-size:11.8px;color:var(--ink2);display:block;margin-top:2px;line-height:1.45}

.spark{display:flex;align-items:flex-end;gap:3px;height:40px}
.spark.tall{height:118px;gap:4px}
.spark i{flex:1;border-radius:3px 3px 0 0;min-height:3px}

.otpbox{display:flex;gap:8px;justify-content:center;margin:20px 0}
.otpbox input{width:44px;height:54px;text-align:center;font-size:22px;font-weight:600;
  border:1.5px solid var(--line2);border-radius:10px;font-family:var(--mono)}
.otpbox input:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px #2563eb22}

.pub{min-height:100%;background:linear-gradient(180deg,#f8fafc,#eef2f7);padding:36px 20px 60px}
.pubcard{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 10px 30px -10px rgba(15,23,42,.16);overflow:hidden}
.pubhd{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;background:#fff}
.pubhd .mk{width:32px;height:32px;border-radius:9px;background:var(--mark);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}

.filerow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.filerow:last-child{border-bottom:0}
.fic{width:32px;height:32px;border-radius:8px;background:#f1f5f9;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;color:var(--ink2);flex:0 0 32px;letter-spacing:.02em}
.filerow .nm{flex:1;min-width:0}
.filerow .nm b{font-size:13px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filerow .nm span{font-size:11.5px;color:var(--ink2)}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
.hr{height:1px;background:var(--line);margin:16px 0}
.anno{background:#fffbeb;border:1px dashed #fbbf24;border-radius:9px;padding:9px 12px;
  font-size:11.8px;color:#92400e;line-height:1.5;margin-bottom:14px}
.anno b{font-weight:700}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:820px){.side{display:none}.g2,.g4{grid-template-columns:1fr}.wrap{padding:16px}}

/* ============================================================
   Aegis Transfer — application extensions
   Everything above this line is the approved prototype stylesheet,
   copied verbatim. Everything below adds the screens the prototype
   did not have (sign-in, modals, toasts) in the same visual language.
   ============================================================ */

/* the app shell has no prototype bar, so the chrome starts at the top */
.app{padding-top:0}

/* ---------- accessibility: a visible focus ring everywhere ---------- */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
.side a:focus-visible{outline-color:#93c5fd}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);padding:10px 14px;
  border-radius:8px;z-index:400;border:1px solid var(--line2)}
.skip:focus{left:10px;top:10px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- sign-in ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;background:
    radial-gradient(1100px 480px at 50% -8%,#e8ecff 0%,transparent 62%),
    linear-gradient(180deg,#f8fafc,#eef2f7)}
.authcard{width:100%;max-width:412px}
.authbrand{display:flex;flex-direction:column;align-items:center;gap:11px;margin-bottom:22px}
.authbrand .mk{width:46px;height:46px;border-radius:13px;background:var(--mark);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;
  box-shadow:0 8px 22px -10px rgba(124,31,245,.7)}
.authbrand b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.authbrand span{font-size:12.5px;color:var(--ink2)}
.authpanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 40px -20px rgba(15,23,42,.28);overflow:hidden;position:relative}
.authpanel::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--spec)}
.authpanel .bd{padding:24px 26px 26px}
.authpanel h2{font-size:17px;margin-bottom:5px}
.authfoot{padding:14px 26px;background:#fafbfd;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink2);line-height:1.6}
.devhint{margin-top:16px;border:1px dashed var(--line2);border-radius:10px;
  padding:11px 13px;background:#fbfcfe}
.devhint summary{font-size:11.8px;font-weight:600;color:var(--ink2);cursor:pointer;list-style:none}
.devhint summary::-webkit-details-marker{display:none}
.devhint summary::before{content:'▸ ';color:var(--ink3)}
.devhint[open] summary::before{content:'▾ '}
.devhint .in{margin-top:9px;font-size:11.5px;color:var(--ink2);line-height:1.65}
.devhint code{font-family:var(--mono);font-size:11px;background:#f1f5f9;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.btn.wide{width:100%;justify-content:center;padding:11px}

/* ---------- modal (step-up, confirmations) ---------- */
.ovl{position:fixed;inset:0;background:rgba(13,20,36,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:300}
.modal{background:var(--panel);border-radius:16px;width:100%;max-width:452px;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(13,20,36,.5);position:relative}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--spec)}
.modal .hd{padding:18px 22px 0;display:flex;align-items:center;gap:10px}
.modal .hd h3{font-size:15.5px}
.modal .bd{padding:14px 22px 18px}
.modal .ft{padding:13px 22px;border-top:1px solid var(--line);background:#fafbfd;
  display:flex;gap:8px;align-items:center}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:320;display:flex;
  flex-direction:column;gap:9px;max-width:380px}
.toast{background:#0d1424;color:#e2e8f0;border-radius:10px;padding:11px 14px;font-size:12.8px;
  line-height:1.5;box-shadow:0 12px 30px -14px rgba(13,20,36,.7);display:flex;gap:10px;
  align-items:flex-start;animation:tin .18s ease-out}
.toast b{color:#fff;font-weight:600}
.toast.e{background:#3f1418;color:#fecaca}
.toast.ok{background:#04352a;color:#a7f3d0}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* ---------- light network chip (the prototype's lives on dark chrome) ---------- */
.netchip.lt{background:#f1f5f9;color:#475569;border-color:var(--line2)}
.netchip.lt.dn{background:var(--err-l);color:#b91c1c;border-color:#fecaca}
.netchip.lt .d{background:var(--ok)}

/* ---------- loading + empty states ---------- */
.skel{height:9px;border-radius:20px;background:linear-gradient(90deg,#eef1f6,#e2e8f0,#eef1f6);
  background-size:220% 100%;animation:shim 1.1s linear infinite}
@keyframes shim{to{background-position:-220% 0}}
.loading{padding:34px;text-align:center;color:var(--ink2);font-size:12.8px}
.empty{padding:40px 20px;text-align:center;color:var(--ink2)}
.empty b{display:block;font-size:14px;color:var(--ink);margin-bottom:5px;font-weight:600}

/* ---------- misc small additions ---------- */
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:12.8px}
.kv dt{color:var(--ink2)}
.kv dd{margin:0;font-weight:550}
.codebox{background:#0f172a;border-radius:10px;padding:13px;overflow:auto}
.codebox code{color:#93c5fd;font-family:var(--mono);font-size:11.5px;
  white-space:pre-wrap;word-break:break-all;display:block;line-height:1.6}
.tabs button{background:none}
.chip button{background:none;border:0;padding:0 0 0 2px;cursor:pointer;color:inherit;
  opacity:.5;font-size:14px;line-height:1}
.chip button:hover{opacity:1}
table.clickable tbody tr{cursor:pointer}
.err-inline{color:#b91c1c;font-size:11.8px;margin-top:6px;display:block}
.gline{height:2.5px;border-radius:3px;background:var(--spec)}
.filerow .act{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}

/* a switch that is structurally always-on reads as locked, not as broken */
.sw[disabled]{opacity:.5;cursor:not-allowed}