:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, Arial, sans-serif; background:#f4f7f6;
       color:#222; margin:0; font-size:13px; }
.muted { color:#888; font-weight:400; }
.topbar { display:flex; align-items:center; gap:18px; background:#0f1320; color:#e6edf3;
          padding:10px 18px; position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.topbar .brand { font-size:1.2em; font-weight:700; letter-spacing:.03em; }
.topbar nav { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.topbar nav a { color:#aab2c0; text-decoration:none; padding:6px 11px; border-radius:6px; font-weight:600; }
.topbar nav a:hover { background:#1c2333; color:#fff; }
.topbar nav a.on { background:#2563eb; color:#fff; }
.topbar nav a.logout { color:#f87171; }
.container { max-width:1040px; margin:16px auto; background:#fff; padding:16px;
             border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.08); }
.stale-banner { background:#fde68a; color:#713f12; text-align:center; padding:6px; font-weight:600; }
.phase-bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
             padding:10px 12px; background:#eef2ff; border-radius:8px; margin-bottom:14px; }
.section-title { color:#fff; padding:9px 12px; border-radius:6px; font-weight:700;
                 display:flex; justify-content:space-between; margin:18px 0 6px; }
.section-title.grow { background:#ea8a00; } .section-title.kids { background:#6b1f8f; }
.section-title.gold { background:#c79a2e; } .section-title.cash { background:#2e8b57; }
.section-title.div { background:#9b59b6; } .section-title.net { background:#0f9ed5; }
.tw { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
      border:1px solid #eee; border-radius:6px; }
table { width:100%; border-collapse:collapse; }
table.wide { min-width:560px; }
th, td { border:1px solid #eee; padding:6px 10px; text-align:right; white-space:nowrap; }
th { background:#f8f9fa; font-weight:600; }
td.lbl, th.lbl { text-align:left; font-weight:700; background:#fafafa; position:sticky; left:0; }
td.pos { color:#16a34a; font-weight:700; } td.neg { color:#dc2626; font-weight:700; }
.total-bar { background:#0f9ed5; color:#fff; padding:12px; border-radius:8px;
             font-size:1.1em; font-weight:700; display:flex; justify-content:space-between; margin:18px 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:680px){ .grid2 { grid-template-columns:1fr; } }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-top:14px; }
.card { padding:8px; border-radius:8px; text-align:center; font-weight:700; border:1px solid #ddd; }
.card.buy { background:#c6e0b4; color:#1e4620; } .card.wait { background:#f8cbad; color:#702e1f; }
/* login */
.login-wrap { max-width:340px; margin:8vh auto; }
.login-wrap input { width:100%; padding:10px; margin:6px 0; border:1px solid #ccc; border-radius:6px; font-size:14px; }
.login-wrap button { width:100%; padding:10px; background:#2563eb; color:#fff; border:0; border-radius:6px; font-weight:700; cursor:pointer; }
.err { color:#dc2626; font-weight:600; }
form.inline { display:inline; }
input.num { width:90px; text-align:right; padding:4px; }
.btn { background:#2563eb; color:#fff; border:0; padding:7px 14px; border-radius:6px; font-weight:700; cursor:pointer; }