:root{
    --bg:#1a1a20; --bg-bar:#22222b; --line:#2c2c38; --track:#2b2b36;
    --text:#e4e4ea; --dim:#8b8b97; --dimmer:#5f5f6c;
    --accent:#b3a6f0; --accent-bright:#cabff8; --accent-deep:#6a5fa0; --good:#8fbf9f; --bad:#d98b8b;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--text);font-family:ui-monospace,"SF Mono","JetBrains Mono","Menlo","Consolas",monospace;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:64px}
  .tabnum{font-variant-numeric:tabular-nums}
  .hidden{display:none!important}
  .dim{color:var(--dim)} .muted{color:var(--dim)}
  a{color:var(--accent)}

  /* login */
  .login-wrap{max-width:380px;margin:14vh auto 0;padding:0 22px}
  .login-wrap .spark{color:var(--accent);font-size:22px}
  .login-wrap h1{font-size:19px;font-weight:600;margin:10px 0 2px}
  .login-wrap p.sub{color:var(--dim);margin:0 0 26px;font-size:13px}
  label{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
  input[type=email],input[type=password],input[type=text]{width:100%;background:#16161b;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:10px 12px;margin-bottom:16px}
  input:focus{outline:none;border-color:var(--accent)}
  .btn{appearance:none;border:0;background:var(--accent);color:#16161b;font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer}
  .btn:hover{background:var(--accent-bright)}
  .btn.block{width:100%}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
  .btn.ghost:hover{color:var(--text);border-color:#3a3a48}
  .err{color:var(--bad);font-size:13px;margin:4px 0 14px;min-height:1.2em}

  /* modal */
  .modal-backdrop{position:fixed;inset:0;background:rgba(8,8,11,.72);display:flex;align-items:flex-start;justify-content:center;padding:14vh 22px 22px;z-index:50}
  .modal-card{position:relative;width:100%;max-width:380px;background:var(--bg-bar);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
  .modal-card .spark{color:var(--accent);font-size:22px}
  .modal-card h1{font-size:19px;font-weight:600;margin:8px 0 2px}
  .modal-card p.sub{color:var(--dim);margin:0 0 22px;font-size:13px}
  .modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--dim);font-size:18px;cursor:pointer;line-height:1}
  .modal-close:hover{color:var(--text)}
  .standlink{color:var(--accent);cursor:pointer;text-decoration:underline}

  /* app chrome */
  .bar{background:var(--bg-bar);border-bottom:1px solid var(--line)}
  .bar-inner{display:flex;align-items:center;gap:10px;max-width:880px;margin:0 auto;padding:9px 22px;font-size:13px;color:var(--dim)}
  .bar .sparkle{color:var(--accent)} .bar .brand{color:var(--text)} .bar .ver{color:var(--dimmer);font-size:11px;margin-left:3px;letter-spacing:.02em}
  .bar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
  @media (max-width:600px){
    #whoami{display:none}
    .lrow{grid-template-columns:1fr auto auto;grid-template-areas:"handle amt mlt" "plan plan plan";column-gap:14px;row-gap:2px}
    .lrow>.handle{grid-area:handle}
    .lrow>.amt{grid-area:amt}
    .lrow>.mlt{grid-area:mlt}
    .lrow>.plan{grid-area:plan}
    .lrow>.meter,.lrow>.meterhead{display:none}
    .lrow.head>.plan{display:none}
    .mrow{grid-template-columns:1fr auto auto}
    .mrow .mname{min-width:0}
    .mrow .meter{display:none}
  }
  .wrap{max-width:880px;margin:0 auto;padding:28px 22px 0}
  nav{display:flex;gap:6px;margin-bottom:30px;flex-wrap:wrap}
  .pill{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--dim);font:inherit;padding:5px 14px;border-radius:999px}
  .pill:hover{color:var(--text);background:#23232c}
  .pill.active{background:var(--accent);color:#16161b;font-weight:600}

  .seclabel{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
  .rule{height:1px;background:var(--line);margin:26px 0}
  .footnote{color:var(--dimmer);font-size:12px;margin-top:30px;line-height:1.6}

  /* rendered privacy policy */
  .doc{font-size:13.5px;line-height:1.65}
  .doc h1{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--text)}
  .doc h2{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:28px 0 10px}
  .doc h3{font-size:14px;font-weight:600;color:var(--text);margin:18px 0 6px}
  .doc p{margin:0 0 12px;color:var(--dim)}
  .doc ul{margin:0 0 14px;padding-left:20px}
  .doc li{margin:4px 0;color:var(--dim)}
  .doc strong{color:var(--text)} .doc em{color:var(--text)}
  .doc a{color:var(--accent)} .doc code{font-size:12px}

  .ranges{display:flex;gap:4px;margin:0 0 26px;flex-wrap:wrap}
  .range{appearance:none;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--dim);font:inherit;font-size:12.5px;padding:4px 11px;border-radius:999px}
  .range:hover{color:var(--text);border-color:#3a3a48}
  .range.active{background:#24222e;border-color:var(--accent);color:var(--accent-bright)}

  .who{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
  .who .name{font-size:18px}.who .plan{color:var(--dim);font-size:13px}
  .herolabel{color:var(--dim);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
  .hero{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
  .hero .val{font-size:46px;line-height:1;letter-spacing:-.02em}
  .mult{margin-top:12px;font-size:15px;color:var(--dim)}.mult b{color:var(--accent-bright);font-weight:600;font-size:17px}
  .vbar{display:flex;height:30px;border-radius:6px;overflow:hidden;margin:14px 0 6px;background:var(--track)}
  .vbar .pay{background:var(--accent-deep);display:flex;align-items:center;padding:0 10px;font-size:12px;color:#e9e6f6;white-space:nowrap}
  .vbar .surplus{background:var(--accent);display:flex;align-items:center;padding:0 10px;font-size:12px;color:#16161b;white-space:nowrap;font-weight:600}
  .vbarcap{display:flex;justify-content:space-between;color:var(--dimmer);font-size:11.5px}

  .mrow{display:grid;grid-template-columns:200px 96px 1fr 46px;align-items:center;gap:14px;padding:7px 0}
  .mrow .mname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow .mval,.mrow .mpct{color:var(--dim);text-align:right}
  .meter{height:9px;border-radius:999px;background:var(--track);overflow:hidden}
  .meter>span{display:block;height:100%;background:var(--accent);border-radius:999px}

  .stand{font-size:15px;margin-bottom:4px}.stand b{color:var(--accent-bright)}
  .lrow{display:grid;grid-template-columns:140px 72px 56px 175px 1fr;align-items:center;column-gap:24px;padding:8px 0;border-top:1px solid var(--line)}
  .lrow.head{border-top:0;color:var(--dim);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
  .lrow.me{color:var(--text)}
  .lrow .handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lrow.me .handle b{color:var(--accent-bright)}
  .lrow .plan{color:var(--dim);font-size:12.5px}
  .lrow .mlt{color:var(--accent-bright);font-weight:600}
  .lrow.me .meter>span{background:var(--accent-bright)}
  .sortable{cursor:pointer}.sortable:hover{color:var(--text)}
  .activesort{color:var(--accent-bright)}.activesort::after{content:" ↓"}

  .field{margin-bottom:24px}
  .field .k{color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .tiers{display:flex;gap:8px;flex-wrap:wrap}
  .tier{border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--dim);font:inherit;padding:10px 14px;border-radius:8px;text-align:left;min-width:120px}
  .tier:hover{border-color:#3a3a48;color:var(--text)}
  .tier.sel{border-color:var(--accent);background:#24222e;color:var(--text)}
  .tier .price{font-size:16px}.tier.sel .price{color:var(--accent-bright)}.tier .sub{font-size:12px;color:var(--dim);margin-top:2px}
  .toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
  .knob{width:38px;height:20px;border-radius:999px;background:var(--track);position:relative;transition:background .15s}
  .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:all .15s}
  .toggle.on .knob{background:var(--accent)}.toggle.on .knob::after{left:20px;background:#16161b}
  code,pre{background:#16161b;border:1px solid var(--line);border-radius:6px;color:var(--text)}
  code{padding:4px 9px}
  pre{padding:12px;overflow:auto;font-size:12.5px;white-space:pre-wrap;word-break:break-all}
  pre code{border:0;background:none;padding:0;border-radius:0} /* block code: no per-line chip border */
  .ok{color:var(--good);font-size:13px}
  .view{display:none;animation:up .35s ease both}.view.show{display:block}
  @keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

  /* utility classes — replace former inline style="" so the CSP needs no 'unsafe-inline' */
  #dispName{width:240px;margin:0}
  #invEmail{width:280px}
  .lead-note{font-size:13px;margin-top:2px}
  .fnote{font-size:12px;margin-top:8px}
  .fnote10{font-size:12px;margin-top:10px}
  .fnote0{font-size:12px}
  .mt12{margin-top:12px}
  .mt10{margin-top:10px}
  .empty-note{padding-top:10px}
  .mlt.none{color:var(--dimmer);font-weight:400}
  .lrow .plan.dimmed{color:var(--dimmer)}