:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  --page:#EDE4F4;
  --page-2:#DCCFE9;
  --ink:#2B2140;
  --ink-soft:#5C4E76;

  --shell:#3B2B54;
  --shell-hi:#54407A;
  --shell-lo:#241736;
  --bezel:#1B1029;
  --screen:#150D22;
  --screen-glow:#2A1B3E;

  --amber:#FFC24B;
  --mint:#6FE3BE;
  --pink:#FF6F91;
  --cyan:#54D8E8;
  --dim:#9A86BC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#140D1E;
    --page-2:#1E1430;
    --ink:#F3EAFB;
    --ink-soft:#A995C4;
  }
}
:root[data-theme="dark"]{
  --page:#140D1E; --page-2:#1E1430; --ink:#F3EAFB; --ink-soft:#A995C4;
}

*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--page-2) 0%, var(--page) 62%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 12px 32px;
}

.pix{font-family:"Silkscreen", ui-monospace, monospace; letter-spacing:.02em}

/* ---------- device ---------- */
.device{
  background:linear-gradient(168deg, var(--shell-hi) 0%, var(--shell) 38%, var(--shell-lo) 100%);
  border-radius:26px 26px 34px 34px;
  padding:14px 14px 18px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -6px 0 rgba(0,0,0,.28),
    0 18px 32px -18px rgba(20,8,38,.85);
  max-width:100%;
}
.brand{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; padding:0 4px 9px;
}
.brand b{font-family:"Silkscreen",monospace; font-weight:700; font-size:13px; color:#F0E4FF}
.brand span{font-family:"Silkscreen",monospace; font-size:9px; color:#9E86C6}
.brand{align-items:center}
#coinLabel{
  margin-left:auto; color:#FFC24B;
  background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.35);
  border-radius:999px; padding:2px 7px 1px;
}
.key.working{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #22142f, 0 0 0 2px var(--mint)}
.key.dose{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #22142f, 0 0 0 2px var(--cyan)}

.bezel{
  background:var(--bezel);
  border-radius:12px;
  padding:8px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6);
  position:relative;
  line-height:0;
}
canvas{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:3px;
  background:var(--screen);
  touch-action:manipulation;
  cursor:pointer;
}

/* ---------- gauges ---------- */
.gauges{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:6px; margin:12px 2px 4px;
}
.gauge{text-align:center}
.gauge .lab{
  font-family:"Silkscreen",monospace; font-size:8px; color:#A994CC;
  display:block; margin-bottom:4px;
}
.bars{display:flex; gap:2px; justify-content:center; height:10px}
.seg{width:100%; max-width:6px; flex:1; background:#2E2044; border-radius:1px}
.seg.on{background:var(--c, var(--mint))}
.seg.warn{background:var(--pink)}

/* ---------- buttons ---------- */
.pad{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:7px; margin-top:14px;
}
/* Eight keys across is too tight on a small phone; fall back to three. */
@media (max-width: 380px){
  .pad{grid-template-columns:repeat(3,1fr)}
}
button.key{
  appearance:none; border:0; cursor:pointer;
  background:linear-gradient(180deg,#5B4683,#3A2A57);
  color:#EFE3FF;
  border-radius:12px;
  padding:9px 4px 7px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #22142f;
  font-family:"Silkscreen",monospace; font-size:8.5px;
  transition:transform .06s ease, box-shadow .06s ease;
}
button.key:active{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 #22142f}
button.key[disabled]{opacity:.38; cursor:default}
button.key:focus-visible, .linkbtn:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.key svg{width:20px; height:20px; display:block}
.key.alert{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #22142f, 0 0 0 2px var(--pink)}

/* ---------- notes under device ---------- */
.note{
  max-width:34rem; text-align:center; font-size:14px; line-height:1.55;
  color:var(--ink-soft); margin:0; padding:0 6px;
}
.toast{
  max-width:34rem; width:100%;
  background:rgba(59,43,84,.9); color:#F2E8FF;
  border-radius:14px; padding:12px 14px;
  font-size:13.5px; line-height:1.5;
}
.toast h3{margin:0 0 6px; font-family:"Silkscreen",monospace; font-size:10px; color:var(--amber); font-weight:400}
.toast ul{margin:0; padding-left:18px}
.linkbtn{
  background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font-family:"Silkscreen",monospace; font-size:9px; padding:6px;
  text-decoration:none; display:inline-block;
}
.footer{display:flex; gap:4px; align-items:center}

@media (prefers-reduced-motion: reduce){
  button.key{transition:none}
}

/* ---------- login ---------- */
.card{
  background:linear-gradient(168deg, var(--shell-hi) 0%, var(--shell) 38%, var(--shell-lo) 100%);
  border-radius:22px;
  padding:26px 24px 22px;
  width:min(24rem, 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -6px 0 rgba(0,0,0,.28),
    0 18px 32px -18px rgba(20,8,38,.85);
  color:#F0E4FF;
}
.card h1{
  font-family:"Silkscreen",monospace; font-size:16px; font-weight:700;
  margin:0 0 4px; color:#F0E4FF;
}
.card p.sub{
  font-size:13px; color:#A994CC; margin:0 0 18px;
}
.field{display:block; margin-bottom:14px}
.field span{
  display:block; font-family:"Silkscreen",monospace; font-size:8.5px;
  color:#A994CC; margin-bottom:6px;
}
.field input[type=text], .field input[type=password]{
  width:100%; box-sizing:border-box;
  background:#241736; border:1px solid #4a3670; border-radius:10px;
  color:#F0E4FF; padding:10px 12px; font-family:inherit; font-size:14px;
}
.field input:focus-visible{outline:2px solid var(--amber); outline-offset:1px}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:#A994CC; margin-bottom:18px}
.submit{
  appearance:none; border:0; cursor:pointer; width:100%;
  background:linear-gradient(180deg,#5B4683,#3A2A57);
  color:#EFE3FF; border-radius:12px; padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #22142f;
  font-family:"Silkscreen",monospace; font-size:10px;
}
.submit:active{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 #22142f}
.submit:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.flash{
  background:rgba(255,111,145,.16); border:1px solid rgba(255,111,145,.5);
  color:#FFD3DE; border-radius:10px; padding:10px 12px;
  font-size:13px; margin-bottom:16px;
}

#toastHost{width:100%; display:flex; justify-content:center}
form.inline{display:inline}

/* ---------- connection banner ---------- */
.banner{
  max-width:34rem; width:100%;
  border-radius:12px; padding:10px 14px;
  font-size:13px; line-height:1.5;
  background:rgba(255,194,75,.14); border:1px solid rgba(255,194,75,.45);
  color:var(--ink);
}
.banner[hidden]{display:none}
.banner.bad{background:rgba(255,111,145,.16); border-color:rgba(255,111,145,.5)}

/* ---------- settings ---------- */
.card-wide{width:min(38rem, 100%)}
.card h2{
  font-family:"Silkscreen",monospace; font-size:11px; font-weight:400;
  color:var(--amber); margin:0 0 10px; letter-spacing:.04em;
}
.panel{
  background:rgba(20,10,36,.45);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:16px; margin:0 0 16px;
}
.panel-warn{border-color:rgba(255,194,75,.45); background:rgba(255,194,75,.08)}

.profile-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:16px}
.profile-forms{flex:1; min-width:0}
.avatar{
  border-radius:14px; background:#241640; display:block;
  image-rendering:pixelated; border:1px solid rgba(255,255,255,.1);
}
.field input[type=file]{
  width:100%; box-sizing:border-box; color:#C9B8E6; font-size:13px;
  background:#241736; border:1px solid #4a3670; border-radius:10px; padding:8px 10px;
}
.submit-small{width:auto; padding:9px 16px; font-size:9px}
.submit-danger{background:linear-gradient(180deg,#8A3A57,#5E2038)}

.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr));
  gap:10px; margin:0;
}
.stats div{
  background:rgba(0,0,0,.22); border-radius:10px; padding:9px 11px;
}
.stats dt{
  font-family:"Silkscreen",monospace; font-size:8px; color:#9E86C6;
  margin:0 0 4px; letter-spacing:.03em;
}
.stats dd{margin:0; font-size:19px; color:#F0E6FF; line-height:1.1}

.status{font-size:13px; margin:0 0 14px}
.status-on{color:var(--mint)}
.status-off{color:var(--dim)}

.qr{
  display:block; margin:4px auto 14px; border-radius:10px;
  background:#fff; padding:8px; image-rendering:pixelated;
}
.secret{
  font-family:ui-monospace, monospace; font-size:14px; letter-spacing:.14em;
  background:#241736; border:1px solid #4a3670; border-radius:10px;
  padding:10px 12px; margin:0 0 16px; word-break:break-all; color:#F0E4FF;
}
.codes{
  list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:7px;
}
.codes li{
  font-family:ui-monospace, monospace; font-size:13px; color:#FFE9AE;
  background:rgba(0,0,0,.3); border-radius:8px; padding:7px 9px; text-align:center;
}
.hint-small{font-size:12.5px; color:var(--dim); line-height:1.5; margin:8px 0 0}
.backlink{color:var(--ink-soft); font-size:13px}
details.danger{margin-top:14px}
details.danger summary{
  cursor:pointer; color:var(--pink); font-size:12.5px; padding:6px 0;
}
.flash-ok{background:rgba(111,227,190,.14); border-color:rgba(111,227,190,.5); color:#CFFFF0}
.flash-warning{background:rgba(255,194,75,.14); border-color:rgba(255,194,75,.5); color:#FFE9AE}

/* ---------- vertically centred card pages ---------- */
body.centered{
  min-height:100vh;
  min-height:100dvh;          /* shrinks with the mobile keyboard */
  justify-content:center;
  /* `safe` keeps the top reachable if the card ever outgrows the viewport;
     browsers without it fall back to the plain `center` above. */
  justify-content:safe center;
}