:root {
  --bg: #f5f5f7; --surface: #fff; --text: #1c1c1e; --muted: #6e6e73;
  --border: #d2d2d7; --accent: #0a66c2; --danger: #c62828; --ok: #2e7d32;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111214; --surface: #1c1d21; --text: #f2f2f2; --muted: #9a9aa0; --border: #33343a; --accent: #4d9cf0; --danger: #ef5350; --ok: #66bb6a; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; align-items: center; gap: 1rem; padding: 1rem; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 1.4rem; }
#stats { color: var(--muted); flex: 1; }
button, .button, input, select, textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .45rem .6rem; }
button { cursor: pointer; }
button.primary, #add-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { color: var(--danger); border-color: var(--danger); }
.filters { display: flex; gap: .5rem; padding: 0 1rem 1rem; flex-wrap: wrap; }
.filters input { flex: 1; min-width: 200px; }
#pager { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0 1rem 2rem; font-size: .85rem; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; padding: 0 1rem 2rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.card:hover { outline: 2px solid var(--accent); }
.cover { aspect-ratio: 3 / 4; background: var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 2rem; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.card .info { padding: .5rem; font-size: .85rem; }
.card .title { font-weight: 600; margin-bottom: .2rem; }
.card .meta { color: var(--muted); }
.views { display: flex; }
.views button { border-radius: 0; margin-left: -1px; }
.views button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.views button:last-child { border-radius: 0 6px 6px 0; }
.views button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); position: relative; }
.grid.list { grid-template-columns: 1fr; gap: .4rem; }
.grid.list .card { flex-direction: row; align-items: center; }
.grid.list .cover { width: 48px; flex-shrink: 0; font-size: 1.2rem; }
.grid.list .info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .4rem .6rem; }
.grid.list .title { margin: 0; }
.grid.table { display: block; overflow-x: auto; }
table.games { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
table.games th { text-align: left; font-weight: 600; color: var(--muted); padding: .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
table.games td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.games th[data-sort] { cursor: pointer; user-select: none; }
table.games th[data-sort]:hover, table.games th[aria-sort] { color: var(--text); }
table.games tr[data-id] { cursor: pointer; }
table.games tr[data-id]:hover td { background: var(--bg); }
table.games td.num { text-align: right; white-space: nowrap; }
table.games td.c { width: 36px; padding: .2rem .5rem; }
table.games td.c img, table.games td.c span { width: 30px; height: 40px; object-fit: cover; border-radius: 3px; display: flex; align-items: center; justify-content: center; background: var(--border); }
table.games .t { font-weight: 600; }
.badge { display: inline-block; font-size: .7rem; padding: 0 .35rem; border-radius: 4px; border: 1px solid var(--border); margin-right: .25rem; }
#empty { text-align: center; color: var(--muted); }
dialog { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); width: min(640px, 95vw); }
dialog::backdrop { background: rgba(0,0,0,.5); }
#provider-tests { list-style: none; padding: 0; margin: 0 0 .6rem; }
#provider-tests li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
#provider-tests .p-name { min-width: 7rem; font-weight: 600; }
#provider-tests .p-result { flex: 1; color: var(--muted); overflow-wrap: anywhere; }
#provider-tests .p-result.ok { color: var(--ok); }
#provider-tests .p-result.error { color: var(--danger); }
form label { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .6rem; font-size: .85rem; color: var(--muted); flex: 1; }
form .row { display: flex; gap: .6rem; flex-wrap: wrap; }
menu { display: flex; gap: .5rem; padding: 0; margin: 1rem 0 0; }
.spacer { flex: 1; }
.title-row { align-items: flex-end; }
.title-row button { margin-bottom: .6rem; }
#lookup { border: 1px solid var(--border); border-radius: 8px; padding: .5rem; margin-bottom: .6rem; max-height: 320px; overflow-y: auto; }
#lookup-status { font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
.result { display: flex; gap: .6rem; align-items: center; padding: .35rem; border-radius: 6px; cursor: pointer; }
.result:hover { background: var(--bg); }
.result img, .result .noimg { width: 45px; height: 60px; object-fit: cover; border-radius: 4px; background: var(--border); flex-shrink: 0; }
.result .r-title { font-weight: 600; }
.result .r-meta { font-size: .78rem; color: var(--muted); }
#cover-preview { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; font-size: .8rem; color: var(--muted); }
#cover-preview img { width: 120px; height: 180px; object-fit: cover; border-radius: 6px; background: var(--border); cursor: zoom-in; }
.cover-row { align-items: end; }
.cover-row button { flex: 0 0 auto; }
#cover-picker { border: 1px solid var(--border); border-radius: 8px; padding: .5rem; margin-bottom: .6rem; max-height: 360px; overflow-y: auto; }
#cover-picker-status { font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
#cover-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
#cover-picker-grid h4 { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .78rem; color: var(--muted); font-weight: 600; }
.cover-opt { background: none; border: 2px solid transparent; border-radius: 6px; padding: 2px; cursor: pointer; text-align: left; color: inherit; }
.cover-opt:hover { border-color: var(--border); }
.cover-opt[aria-pressed="true"] { border-color: var(--accent); }
.cover-opt img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--border); display: block; }
.cover-opt span { display: block; font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.button { text-decoration: none; display: inline-block; }
[hidden] { display: none !important; }
.tabs { display: flex; gap: .25rem; padding: 0 1rem .75rem; flex-wrap: wrap; }
.tabs button { border: none; background: none; padding: .4rem .8rem; border-radius: 999px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
#stats-view { padding: 0 1rem 2rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tile, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.tile-value { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-label { color: var(--muted); font-size: .85rem; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.panel h3 { margin: 0 0 .75rem; font-size: 1rem; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 3ch; gap: .5rem; align-items: center; padding: .2rem 0; font-size: .85rem; }
.bar-row:hover .bar { opacity: .8; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; }
.bar { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: .8rem; }
.dlg-tabs { padding: 0 0 .75rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; }
.dlg-tabs button[aria-selected="true"] { background: var(--bg); }
.pane { min-height: 280px; }
form .row label { flex: 1 1 0; min-width: 120px; }
form input, form select, form textarea { width: 100%; min-width: 0; }
form input[type=file] { width: auto; }
.dlg-tabs { flex-wrap: nowrap; overflow-x: auto; }
.dlg-tabs button { white-space: nowrap; padding: .4rem .7rem; }
footer { padding: 1rem; text-align: center; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--border); }
footer a { color: inherit; }
#scrape-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 1rem .75rem; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; }
#scrape-bar .scrape-text { flex: 1 1 300px; }
#scrape-bar progress { flex: 0 1 200px; accent-color: var(--accent); }
form label.radio { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); font-size: .95rem; }
form label.radio input { width: auto; }
.lookup-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem; margin: -.3rem 0 .6rem; font-size: .8rem; }
.lookup-opts .opts-label { color: var(--muted); }
.lookup-opts label.radio { margin: 0; font-size: .8rem; flex: 0 0 auto; gap: .3rem; }
#lookup-providers { display: contents; }
#scrape-form fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 .7rem; padding: .4rem .7rem .2rem; }
#scrape-form legend { font-size: .8rem; color: var(--muted); padding: 0 .3rem; }