*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f3f4f6;color:#111827;-webkit-tap-highlight-color:transparent}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.muted{color:#6b7280}
.card{background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:22px;width:100%;max-width:400px}
h1{font-size:22px;margin:0 0 4px}h2{font-size:20px;margin:0}
label{display:block;font-size:14px;margin:14px 0 6px;color:#374151}
input[type=email],input[type=password],input[type=search]{width:100%;font-size:17px;padding:12px;border:1px solid #d1d5db;border-radius:10px;background:#fff}
.chk{display:flex;gap:8px;align-items:center;margin-top:14px}.chk input{width:20px;height:20px}
.btn{display:block;width:100%;margin-top:18px;padding:13px;font-size:17px;border:0;border-radius:10px;background:#1f2937;color:#fff;font-weight:600}
.btn.ghost{background:transparent;color:#374151;border:1px solid #d1d5db}
.err{color:#b91c1c;font-size:14px;margin-top:12px;min-height:18px}
.dots{display:flex;gap:14px;justify-content:center;margin:18px 0}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid #1f2937}.dot.on{background:#1f2937}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.key{font-size:26px;padding:16px 0;border-radius:12px;border:1px solid #e5e7eb;background:#fff;touch-action:manipulation;user-select:none}
.key:active{background:#e5e7eb}.key.blank{visibility:hidden}
.shell{display:flex;min-height:100vh}
.side{width:230px;background:#1f2937;color:#e5e7eb;padding:16px 10px;flex-shrink:0;display:flex;flex-direction:column}
.brand{font-weight:700;font-size:17px;padding:4px 10px 14px;color:#fff}
.grp{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;padding:14px 10px 6px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:11px 10px;border-radius:8px;color:#e5e7eb;text-decoration:none;font-size:16px}
.nav.on{background:#374151;color:#fff}.nav .soon{font-size:11px;color:#9ca3af}
.who{margin-top:auto;padding:12px 10px 0;border-top:1px solid #374151;font-size:14px}
.who button{background:none;border:0;color:#f59e0b;font-size:14px;padding:6px 0;margin-right:14px}
.main{flex:1;padding:20px;min-width:0}
.top{display:none}
.list{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;align-items:start}
@media (min-width:768px){.list{grid-template-columns:1fr 1fr}}
.tire{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.tire .sz{font-weight:700;font-size:18px}.tire .bm{margin:2px 0 8px}
.tire .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#4b5563}

.pill{display:inline-block;background:#fef3c7;color:#92400e;border-radius:999px;font-size:12px;padding:2px 8px}
.count{font-size:14px;color:#6b7280;margin-top:10px}
.soonbox{background:#fff;border-radius:12px;padding:28px;text-align:center;color:#6b7280;margin-top:16px}
@media (max-width:700px){
  .side{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .18s}
  .shell.open .side{transform:none}
  .shell.open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10}
  .top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#1f2937;color:#fff;position:sticky;top:0;z-index:5}
  .top button{background:none;border:0;color:#fff;font-size:24px;padding:2px 6px}
  .shell{flex-direction:column}.main{padding:14px}
}
.bigq{font-size:20px!important;padding:15px 16px!important;border-radius:12px!important;margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:8px 14px;font-size:15px;color:#1f2937}
.chip.on{background:#1f2937;color:#fff;border-color:#1f2937}
.count a{color:#b45309;font-weight:600}
.empty{background:#fff;border-radius:12px;padding:34px 20px;text-align:center;color:#6b7280;font-size:16px}
.tire{cursor:pointer}.tire.oos{opacity:.55}
.tire .l1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tire .px{font-weight:700;font-size:20px}.tire .px small{font-weight:400;font-size:12px;color:#6b7280;margin-left:2px}
.tire .bm{margin:2px 0 8px;color:#374151}
.badge{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;font-size:13px;padding:3px 10px}
.tire.open{box-shadow:0 0 0 2px #1f2937}
.xp{margin-top:12px;border-top:1px solid #e5e7eb;padding-top:12px;cursor:default}
.facts,.owner{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:#4b5563}
.owner{margin-top:10px;background:#fef3c7;color:#78350f;border-radius:8px;padding:8px 10px}
.otd-h{font-size:13px;color:#6b7280;margin:12px 0 6px}
.otd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tot{background:#f3f4f6;border-radius:10px;padding:10px 6px;text-align:center}
.tot .n{font-size:13px;color:#4b5563}.tot .p{font-size:19px;font-weight:700;margin:2px 0}.tot .e{font-size:12px;color:#6b7280}
.acts .btn{margin-top:12px}.acts .btn:disabled{opacity:.5}.acts small{font-weight:400}

/* ---- Dark theme (default): the Streamlit app's palette, dark zinc + Mac's cyan (.streamlit/config.toml) ---- */
:root{color-scheme:dark;--bg:#18181b;--panel:#27272a;--panel2:#202024;--side:#111113;--line:#3f3f46;--text:#f4f4f5;
  --sub:#d4d4d8;--muted:#a1a1aa;--cyan:#05abd6;--btn:#0891b2;--amber:#fbbf24}
html,body{background:var(--bg);color:var(--text);min-height:100%}
.muted,.count,.otd-h,.tot .e,.tire .px small{color:var(--muted)}
.card,.tire,.empty,.soonbox{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.4);color:var(--text)}
.card{border:1px solid var(--line)}
label{color:var(--sub)}
input[type=email],input[type=password],input[type=search]{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
input:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
input::placeholder{color:#8b8b94}
.btn{background:var(--btn);color:#fff}
.btn.ghost{background:transparent;color:var(--sub);border:1px solid var(--line)}
.acts .btn:disabled{background:#3f3f46;color:#a1a1aa;opacity:1}
.acts .btn.ghost:disabled{background:transparent}
.err{color:#fca5a5}
.dot{border-color:var(--cyan)}.dot.on{background:var(--cyan)}
.key{background:var(--panel2);color:var(--text);border:1px solid var(--line)}.key:active{background:var(--line)}
.side{background:var(--side);border-right:1px solid var(--panel)}
.nav{color:var(--sub)}.nav.on{background:#1f1f23;color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}
.nav .soon,.grp{color:#71717a}
.who{border-top-color:var(--panel)}.who button,.count a{color:var(--cyan)}
.top{background:var(--side);border-bottom:1px solid var(--panel)}
.chip{background:var(--panel);color:var(--sub);border-color:var(--line)}
.chip.on{background:var(--btn);color:#fff;border-color:var(--btn)}
.tire .bm{color:var(--sub)}.tire .px{color:var(--text)}
.badge{background:rgba(5,171,214,.15);color:#67d4ef}
.tire.open{box-shadow:0 0 0 2px var(--cyan)}
.xp{border-top-color:var(--line)}
.facts{color:var(--sub)}
.tot{background:var(--panel2);border:1px solid var(--line)}.tot .n{color:var(--sub)}.tot .p{color:var(--text)}
.pill{background:rgba(251,191,36,.15);color:var(--amber)}
.owner{background:rgba(251,191,36,.12);color:#fde68a;border:1px solid rgba(251,191,36,.35)}