/* CreditsHQ - one screen, no scroll, locked viewport (LifeDash philosophy).
   Board never scrolls. Drawers scroll internally. Manual balances in localStorage. */
:root{
  --paper:#0b0b0b;      /* board background */
  --pad:#16181c;        /* tile fill */
  --ink:#f2f2f2;        /* text */
  --hair:#3a3d44;       /* hairline */
  --muted:#9aa0aa;
  --ok:#35d07f;
  --low:#ffb020;
  --red:#ff5252;
  --unknown:#7f8792;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;width:100%}
html{overflow:hidden}
body{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100vw;height:100vh;height:100dvh;
  overflow:hidden;overscroll-behavior:none;
  background:var(--paper);color:var(--ink);
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  touch-action:manipulation;
}
button{font-family:inherit}

/* ---- app shell: header / board / subs band, three grid rows ---- */
.app{
  position:absolute;inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:7px;
  padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
          calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}

/* ---- header ---- */
.topbar{
  display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  justify-content:space-between;min-width:0;
}
.brand{
  font-weight:700;text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(15px,3.2vw,26px);line-height:1;white-space:nowrap;
  color:var(--paper);background:var(--ink);padding:6px 12px 6px 15px;
}
.stats{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.chip{
  border:1.5px solid var(--hair);background:var(--pad);color:var(--ink);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;
  padding:4px 9px;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;
}
.chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.chip.red{border-color:var(--red)} .chip.red .dot{background:var(--red)}
.chip.low{border-color:var(--low)} .chip.low .dot{background:var(--low)}
.chip.ok{border-color:var(--ok)} .chip.ok .dot{background:var(--ok)}
.chip.unknown .dot{background:var(--unknown)}
.chip.cash{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ---- board grid: always fills, always fits ---- */
.board{
  display:grid;gap:6px;min-height:0;min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));
}

/* ---- tile = filled service pad ---- */
.pad{
  position:relative;text-align:left;cursor:pointer;
  border:1.5px solid var(--hair);background:var(--pad);color:var(--ink);
  border-top:4px solid var(--unknown);
  box-shadow:0 0 0 1px #000;
  min-height:0;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:6px 8px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform .08s ease;
}
.pad:active{transform:scale(.98)}
.pad .pad-name{
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.03;
  max-height:2.15em;overflow:hidden;flex:none;
  word-break:normal;overflow-wrap:break-word;font-size:12px;
}
.pad .pad-mid{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-top:2px;
}
.pad .bal-num{
  font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  font-size:30px;max-width:100%;
}
.pad .bal-num.enter{opacity:.55;font-size:18px;letter-spacing:.04em}
.pad .pad-unit{
  margin-top:2px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:9px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}

/* status coloring per tile */
.pad.s-ok{border-top-color:var(--ok)}
.pad.s-ok .bal-num{color:var(--ok)}
.pad.s-low{border-top-color:var(--low);box-shadow:0 0 0 1px var(--low)}
.pad.s-low .bal-num{color:var(--low)}
.pad.s-red{border-color:var(--red);border-top-color:var(--red);
  box-shadow:0 0 0 1px var(--red);
  background:linear-gradient(180deg,rgba(255,82,82,.12),rgba(255,82,82,0) 62%),var(--pad)}
.pad.s-red .bal-num{color:var(--red)}
.pad.s-unknown{border-top-color:var(--unknown)}
.pad.s-unknown .bal-num{color:var(--ink)}
.pad.manual::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;
  border-radius:50%;background:var(--muted);opacity:.7}

/* ---- subscriptions band (bottom) ---- */
.subsband{
  min-height:0;display:flex;flex-direction:column;gap:5px;
  border-top:2px solid var(--hair);padding-top:6px;
}
.subs-label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.subs-word{font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(11px,1.9vw,15px);line-height:1;color:var(--muted)}
.subs-total{font-weight:700;letter-spacing:-.01em;
  font-size:clamp(13px,2.3vw,18px);line-height:1;color:var(--ink)}
.subs-chips{position:relative;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;min-width:0;overflow:hidden}
.subchip{
  border:1.5px solid var(--hair);background:var(--pad);color:var(--ink);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:10px;line-height:1;
  padding:4px 7px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer;
  touch-action:manipulation;
}
.subchip .amt{color:var(--muted)}
.subchip:active{opacity:.8}
.subchip.unclear{opacity:.5;border-style:dashed}
.subchip.more{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.subchip.more .amt{color:var(--paper)}

/* ---- detail drawer / side popover (LifeDash boxpop) ---- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5)}
.boxpop{
  position:fixed;z-index:80;top:50%;left:20px;transform:translateY(-50%);
  width:min(360px,90vw);max-height:88dvh;overflow:auto;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
  background:#0e0f12;color:var(--ink);border:3px solid var(--ink);
  box-shadow:0 18px 60px rgba(0,0,0,.6);padding:18px;
}
.boxpop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.boxpop-title{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:18px;line-height:1.1}
.boxpop-x{background:none;border:none;color:var(--ink);font-size:30px;line-height:.8;cursor:pointer;flex:none}
.pop-bal{font-weight:700;font-size:34px;line-height:1;margin:8px 0 4px;word-break:break-word}
.pop-bal .u{font-size:14px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.pop-status{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-bottom:14px}
.s-ok .pop-bal,.s-ok .pop-status{color:var(--ok)}
.s-low .pop-bal,.s-low .pop-status{color:var(--low)}
.s-red .pop-bal,.s-red .pop-status{color:var(--red)}
.s-unknown .pop-bal{color:var(--ink)} .s-unknown .pop-status{color:var(--unknown)}
.pop-rows{display:flex;flex-direction:column;border-top:2px solid var(--hair)}
.pop-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  border-bottom:1px solid var(--hair);padding:10px 1px;font-size:13px}
.pop-row .k{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;flex:none}
.pop-row .v{text-align:right;font-weight:700;min-width:0;word-break:break-word}
.pop-note{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.4}
.manual-box{margin-top:16px;border:2px solid var(--hair);padding:12px;background:#121317}
.manual-box .ml{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  color:var(--muted);margin-bottom:8px}
.manual-row{display:flex;gap:8px}
.manual-row input{
  flex:1;min-width:0;background:#0b0b0b;border:2px solid var(--hair);color:var(--ink);
  font:inherit;font-weight:700;font-size:16px;padding:11px 12px;
}
.manual-row input:focus{outline:none;border-color:var(--ink)}
.manual-row .save{flex:none;border:2px solid var(--ink);background:var(--ink);color:#000;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px;padding:0 16px;cursor:pointer}
.manual-row .save:active{opacity:.8}
.manual-hint{margin-top:8px;color:var(--muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.manual-clear{margin-top:8px;background:none;border:none;color:var(--muted);
  font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;
  text-decoration:underline;cursor:pointer;padding:0}
.pop-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pop-btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--ink);color:#000;border:3px solid var(--ink);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;padding:15px;cursor:pointer;
}
.pop-btn.ghost{background:none;color:var(--ink)}
.pop-btn:active{opacity:.85}

/* all-subs list inside drawer */
.subs-all{display:flex;flex-direction:column;border-top:2px solid var(--hair)}
.subs-all .sa-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--hair);padding:11px 1px}
.subs-all .sa-l{min-width:0}
.subs-all .sa-v{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:13px;line-height:1.1}
.subs-all .sa-p{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size:10px;margin-top:2px}
.subs-all .sa-a{font-weight:700;font-size:15px;white-space:nowrap;flex:none}
.subs-all .sa-a small{color:var(--muted);font-size:9px;letter-spacing:.05em;display:block;text-align:right}
.subs-all .sa-row.unclear{opacity:.55}

/* ---- PIN gate ---- */
#buildtag{position:fixed;right:10px;bottom:calc(4px + env(safe-area-inset-bottom));
  font-weight:700;font-size:10px;letter-spacing:.1em;opacity:.22;pointer-events:none;z-index:55}
.pin-overlay{position:fixed;inset:0;z-index:200;background:#0b0b0b;
  display:flex;align-items:flex-start;justify-content:center;
  padding:max(16vh,80px) 20px 20px}
.pin-card{background:var(--pad);border:3px solid var(--ink);
  width:min(340px,92vw);padding:22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.pin-msg{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px;text-align:center}
.pin-input{font:inherit;font-size:22px;font-weight:700;text-align:center;letter-spacing:.35em;
  padding:14px;border:3px solid var(--ink);background:#0b0b0b;color:var(--ink)}
.pin-input:focus{outline:none}
.pin-row{display:flex}
.pin-btn{flex:1;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:14px;border:3px solid var(--ink);background:var(--ink);color:#000;cursor:pointer}
.pin-btn:active{opacity:.85}
.pin-err{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;text-align:center}

/* phone bottom-sheet drawer */
@media (max-width:640px){
  .boxpop{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-height:86dvh;
    border-left:none;border-right:none;border-bottom:none;}
}