:root{--bg:#eef6ff;--panel:#fff;--ink:#16324a;--muted:#5d7a92;--line:#bee0ff;--accent:#2f8de4;--bar:#3fbf5a;--bar2:#8be08f;--track:#e3f0fb;--done:#9aa7b2;--shadow:0 2px 10px rgba(30,80,130,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1620;--panel:#15222f;--ink:#e2eef8;--muted:#8ba3b8;--line:#24425d;--accent:#5fb0ff;--bar:#2fa64a;--bar2:#57d16f;--track:#1c2e3f;--done:#5c6b78;--shadow:0 2px 14px rgba(0,0,0,.4)}}
:root[data-theme=dark]{--bg:#0d1620;--panel:#15222f;--ink:#e2eef8;--muted:#8ba3b8;--line:#24425d;--accent:#5fb0ff;--bar:#2fa64a;--bar2:#57d16f;--track:#1c2e3f;--done:#5c6b78;--shadow:0 2px 14px rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
.hero{display:flex;justify-content:space-between;align-items:center;padding:28px clamp(16px,4vw,48px) 12px;max-width:1500px;margin:auto}
.brand{display:flex;gap:16px;align-items:center}
.logo{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--bar));color:#fff;font-weight:900;letter-spacing:1px;box-shadow:var(--shadow)}
h1{margin:0;font-size:clamp(26px,4vw,40px)}
.hero p{margin:2px 0 0;color:var(--muted)}
.ghost{background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;font-size:20px;width:42px;height:42px;cursor:pointer}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:8px clamp(16px,4vw,48px);max-width:1500px;margin:auto}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px}.stat span{color:var(--muted);font-size:13px}
.controls{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px clamp(16px,4vw,48px);max-width:1500px;margin:auto;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.controls input,.controls select{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);padding:0 12px;font:inherit}
#search{flex:1 1 220px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--ink);padding:0 14px;height:36px;cursor:pointer;font:inherit}
.seg button.on{background:var(--accent);color:#fff}
#games{max-width:1500px;margin:auto;padding:8px clamp(16px,4vw,48px) 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.game{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.game:hover{transform:translateY(-2px)}
.art{position:relative;aspect-ratio:460/215;background:linear-gradient(135deg,var(--track),var(--line))}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.plat,.badge{position:absolute;top:8px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.plat{left:8px}.badge{right:8px;background:#6b7a86}
.body{padding:10px}
.bar{position:relative;display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:linear-gradient(90deg,var(--bar),var(--bar2)) 0/var(--p) 100% no-repeat,var(--track);font-weight:600}
.bar .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .pct{font-variant-numeric:tabular-nums;opacity:.8}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin-top:6px;gap:6px}
.done .bar{background:var(--track);color:var(--done)}.done .bar .name{text-decoration:line-through}
.done .art img{filter:grayscale(1) opacity(.6)}
.list{display:flex;flex-direction:column;gap:6px}
.list .game{display:flex;align-items:center;border-radius:10px}
.list .art{width:120px;flex:none;aspect-ratio:460/215}.list .art .badge{display:none}
.list .body{flex:1;display:flex;align-items:center;gap:14px;padding:6px 12px}
.list .bar{flex:1}.list .meta{margin:0;width:300px;flex:none}
@media (max-width:640px){.list .art{width:80px}.list .body{flex-direction:column;align-items:stretch;gap:4px}.list .meta{width:auto}}
.empty{color:var(--muted);text-align:center;padding:40px}
.totals{position:sticky;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px clamp(16px,4vw,48px);background:var(--panel);border-top:2px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
.donebar{padding:2px 10px;border-radius:8px;background:linear-gradient(90deg,var(--bar),var(--bar2)) 0/var(--p) 100% no-repeat,var(--track)}
.credits{text-align:center;color:var(--muted);font-size:12px;padding:10px 10px 18px;margin:0}
/* admin */
.admin .top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 20px;position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line)}
.admin input,.admin select,.admin button{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.admin button{background:var(--accent);color:#fff;cursor:pointer}
.admintable{width:100%;border-collapse:collapse;background:var(--panel)}
.admintable td,.admintable th{padding:5px 10px;border-bottom:1px solid var(--line);text-align:left}
.admintable input[type=number]{width:90px}
.savebar{position:sticky;bottom:0;padding:12px 20px;background:var(--bg);border-top:1px solid var(--line);text-align:right}
.login{max-width:340px;margin:12vh auto;padding:24px;background:var(--panel);border-radius:12px;box-shadow:var(--shadow)}
.login form{display:flex;gap:8px}.warn{color:#d04545}.flash{margin:12px 20px;color:var(--bar)}

.autob{position:absolute;right:8px;top:32px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;background:#2d7d46;color:#fff;cursor:help}
.list .art .autob{display:none}
.admintable .auto{color:#2d7d46;font-size:12px}
.admintable tr.hiddenrow td{opacity:.55}
.art{overflow:hidden}.art.portrait::before{content:'';position:absolute;inset:0;background:var(--bg) center/cover;filter:blur(14px) brightness(.65);transform:scale(1.2)}
.art.portrait img{position:relative;object-fit:contain}