:root{--bg: #ffffff;--fg: #1f1f1f;--muted: #5f6368;--border: #dadce0;--card: #f8f9fa;--accent: #1a73e8;--error: #c62828;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #1e1e1e;--fg: #e8e8e8;--muted: #a0a0a0;--border: #3c4043;--card: #2a2a2a;--accent: #8ab4f8;--error: #ef9a9a}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px system-ui,sans-serif}button,select{padding:8px 12px;font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--border);border-radius:6px}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.muted{color:var(--muted)}.error{color:var(--error)}.center{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;text-align:center}.shell header{position:sticky;top:0;z-index:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--border)}.brand{font-size:16px;margin-right:8px}nav{display:flex;gap:4px}nav button{border-color:transparent;background:transparent}nav button.on{background:var(--card);border-color:var(--border);font-weight:600}.spacer{flex:1}main{max-width:1200px;margin:0 auto;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.toolbar{display:flex;align-items:center;justify-content:space-between}.toolbar h2{font-size:18px;margin:8px 0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:8px}.card{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden}.card img,.card .noimg{width:100%;height:140px;object-fit:cover;display:block;background:var(--border)}.card .noimg{display:grid;place-content:center;color:var(--muted);font-weight:600}.card h3{font-size:12px;font-weight:500;margin:8px;word-break:break-all}