:root{
  --bg:#05060d; --panel:#0d1122; --panel2:#151a30; --line:#242c4a; --text:#eaf0ff;
  --dim:#8a93b8; --accent:#35e0c0; --gold:#ffd75e; --war:#ff2e63; --good:#00e436;
  --ui:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
/* Several panels are laid out by id (#bar sets display:flex), which outranks the
   browser's [hidden]{display:none} — so el.hidden = true silently did nothing
   and the signed-out board showed a live top bar behind the auth gate. */
[hidden]{display:none !important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-user-select:none;user-select:none}
#board{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab;touch-action:none}
body:has(#mode-paint.on) #board{cursor:crosshair}

.btn{font:inherit;font-size:13px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer;transition:none}
.btn:hover{border-color:#3a4670}
.btn.on{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:#0e4d41;border-color:var(--accent);color:var(--accent);font-weight:600}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%;margin-top:10px;padding:11px}

/* top bar */
#bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(#0d1122ee,#0d112288);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding-top:max(9px,env(safe-area-inset-top))}
#logo{font-weight:800;letter-spacing:1px;color:var(--accent)}
#wallet{font-size:13px;color:var(--dim)}#wallet b{color:var(--gold);font-size:15px}
.spacer{flex:1}

/* paint dock */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:20;background:linear-gradient(#0d112288,#0d1122ee);
  backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
#palette{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;max-width:520px;margin:0 auto 10px}
.sw{aspect-ratio:1;border:2px solid #0006;border-radius:4px;cursor:pointer;padding:0}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
#pending-info{display:flex;align-items:center;gap:10px;justify-content:center}
#pending-count{color:var(--dim);font-size:13px;min-width:56px}

/* overlays */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#04060cd0;backdrop-filter:blur(3px);padding:16px}
.card{width:min(400px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 20px 60px #000a}
.card h3{margin:0 0 10px}
.auth-logo{font-weight:800;font-size:26px;letter-spacing:2px;color:var(--accent);text-align:center}
.muted{color:var(--dim);font-size:13px;line-height:1.5}
.tabs{display:flex;gap:6px;margin:14px 0 10px}
.tab{flex:1;background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:8px;cursor:pointer;font:inherit}
.tab.on{border-color:var(--accent);color:var(--accent)}
.card input{width:100%;margin:6px 0;padding:11px;font:inherit;font-size:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text)}
.msg{color:var(--gold);font-size:12.5px;min-height:16px;margin-top:8px;text-align:center}

.buyrow{display:flex;gap:8px;margin:12px 0}
.buy{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px}
.buy small{color:var(--dim);font-size:11px;font-weight:400}
.neg{color:var(--war);font-size:13px}
.qtotal{font-size:30px;font-weight:700;color:var(--accent);text-align:center;margin:10px 0 4px}
.qtotal span{font-size:13px;font-weight:400;color:var(--dim)}
.mine{color:var(--gold);font-size:12px;font-weight:400}
.ledger{max-height:52vh;overflow:auto;margin:6px 0}
.lrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px}
.lrow .pos{color:var(--good)}.lrow .neg{color:var(--war)}.lrow .k{flex:1;color:var(--dim)}.lrow .b{color:var(--dim)}

#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;background:#0d1122ee;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:13px;box-shadow:0 6px 20px #0008}

@media (max-width:520px){ #btn-buy,#logo{font-size:12px} #palette{grid-template-columns:repeat(8,1fr)} }