:root{
  color-scheme:dark;
  --bg:#101315;
  --panel:#191d20;
  --ink:#f1f3f1;
  --muted:#929b9d;
  --line:#ffffff17;
  --accent:#c3f36b;
  --accent-ink:#17200c;
}
body{background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.012em}
.wrap{width:min(1220px,calc(100% - 48px))}
header{height:70px;border-color:#ffffff12}
.brand{display:flex;align-items:center;gap:10px;font-size:1.05rem;letter-spacing:-.04em}
.brand i{color:inherit}
.brand-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--accent);color:#18200e;font-size:.9rem;font-weight:950}
.profile{font-size:.67rem;letter-spacing:.15em;font-weight:800;color:#7e898b}
.account-menu{position:relative;display:inline-block;margin-left:9px;letter-spacing:normal;font-weight:600;color:#c3f36b}
.account-menu summary{cursor:pointer;list-style:none;border:1px solid #ffffff20;border-radius:8px;padding:8px 10px}
.account-panel{position:absolute;z-index:5;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 30px));padding:14px;border:1px solid #ffffff22;border-radius:10px;background:#191d20;box-shadow:0 14px 35px #0008;color:#f1f3f1;letter-spacing:normal;font-size:.8rem}
.account-panel p{margin:0 0 10px;color:#9ba3a3;line-height:1.4}
.account-panel label{display:block;margin:9px 0;color:#9ba3a3}
.account-panel input{display:block;width:100%;margin-top:4px;padding:9px;border:1px solid #ffffff22;border-radius:7px;background:#101315;color:#f1f3f1;font-size:.84rem}
.account-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.account-buttons button{padding:8px 10px;border:0;border-radius:7px;background:#c3f36b;color:#17200c;font-size:.73rem;font-weight:750}
.account-buttons button:disabled{opacity:.5;cursor:not-allowed}
.account-panel>a{color:#c3f36b}
.hero{display:grid;grid-template-columns:1fr minmax(330px,.9fr);align-items:end;gap:48px;padding:57px 0 45px;text-align:left;border-bottom:1px solid #ffffff12}
.eyebrow{color:var(--accent);letter-spacing:.15em;font-size:.66rem}
.hero h1{font-size:clamp(2.25rem,4.2vw,3.7rem);letter-spacing:-.065em;line-height:1.02;margin:11px 0 14px;font-weight:760}
.hero h1 span{color:inherit}
.hero p{margin:0;color:#9ba3a3;max-width:430px;font-size:.98rem}
.hero-tools{padding-bottom:4px}
.search{max-width:none;margin:0}
.search input{padding:16px 62px 16px 17px;border:1px solid #ffffff22;border-radius:11px;background:#191d20;box-shadow:none;font-size:.95rem}
.search input:focus{border-color:#c3f36b99;box-shadow:0 0 0 3px #c3f36b18}
.search button{right:6px;top:6px;bottom:6px;width:43px;padding:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:1.55rem;line-height:1}
.source{margin:12px 2px 0;color:#7f898a;font-size:.75rem;text-align:left}
.source strong{color:#c7cecb;font-weight:750}
.source span{padding:0 4px;color:#555f60}
.live-catalog{margin-top:12px;color:#9ba3a3;font-size:.75rem}
.live-catalog summary{width:max-content;cursor:pointer;color:#c3f36b}
.live-catalog summary:hover{color:#d7ff92}
.live-panel{margin-top:10px;padding:13px;border:1px solid #ffffff18;border-radius:10px;background:#191d20}
.live-panel p{margin:0 0 10px;color:#9ba3a3;font-size:.75rem}
.key-row{display:flex;gap:7px;margin-bottom:8px}
.key-row input{min-width:0;flex:1;padding:9px 10px;border:1px solid #ffffff22;border-radius:7px;background:#101315;color:var(--ink);font-size:.78rem}
.key-row button{padding:8px 12px;border:0;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-size:.76rem;font-weight:750}
.live-panel a,footer a{color:#c3f36b}
.toolbar{margin:25px 0 12px;align-items:center}
.tabs{gap:5px}
.tab{padding:9px 13px;border:1px solid transparent;border-radius:8px;color:#9fa7a7;font-size:.86rem;font-weight:680;transition:background .15s,color .15s,border-color .15s}
.tab:hover{background:#ffffff0a;color:#f1f3f1}
.tab.active{background:#202629;color:#f5f7f5;border-color:#ffffff16}
.tab span{color:var(--accent);margin-left:3px}
.toolbar-right{display:flex;align-items:center;gap:19px}
.result-count{font-size:.79rem;color:#8d9697}
.export{padding:7px 0;border:0;background:transparent;color:#aab2b2;font-size:.78rem;transition:color .15s}
.export:hover{color:var(--accent)}
.hint{margin:0 0 13px;color:#788283;font-size:.78rem}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-bottom:58px}
.card{position:relative;min-height:0;border:1px solid #ffffff13;border-radius:12px;background:#181c1f;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #0002}
.card:hover,.card:focus-within{transform:translateY(-4px);border-color:#c3f36b66;box-shadow:0 15px 34px #0006}
.cover{height:auto;aspect-ratio:1.78;background:#202629}
.cover img{transition:transform .35s ease,filter .25s ease}
.card:hover .cover img,.card:focus-within .cover img{transform:scale(1.045);filter:brightness(.7)}
.cover:after{box-shadow:inset 0 -46px 40px #080a0b55}
.cover-actions{position:absolute;inset:auto 10px 11px;z-index:2;display:flex;gap:8px;opacity:0;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease}
.card:hover .cover-actions,.card:focus-within .cover-actions{opacity:1;transform:translateY(0)}
.cover-actions .action{min-height:37px;padding:8px 9px;border-radius:8px;font-size:.73rem;box-shadow:0 3px 10px #0005}
.cover-actions .action:not(.want):not(.done){background:#15191bd9;color:#f1f3f1;border-color:#ffffff28}
.status-select{width:100%;min-height:38px;padding:8px 32px 8px 11px;border:1px solid #ffffff30;border-radius:8px;background:#15191bed;color:#f1f3f1;font-size:.78rem;font-weight:700;box-shadow:0 3px 10px #0005;cursor:pointer}
.status-select option{background:#191d20;color:#f1f3f1}
.card-content{padding:13px 14px 14px}
.card-top{align-items:center;min-height:24px}
.card h3{font-size:.94rem;font-weight:730;letter-spacing:-.025em}
.status{padding:3px 7px;color:#d4f69b;background:#c3f36b14;border-color:#c3f36b30;font-size:.61rem}
.status.played{color:#cbd0d0;background:#ffffff0a;border-color:#ffffff20}
.meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;margin:7px 0 8px;color:#889192;font-size:.73rem;line-height:1.45}
.card-actions{display:none}
.store-link{display:inline-flex;align-items:center;gap:5px;margin-top:0;color:#8e9899;font-size:.72rem;transition:color .15s}
.store-link:hover{color:var(--accent)}
.empty{padding:50px 18px;border:1px dashed #ffffff24;border-radius:12px;background:#171b1d;color:#8c9697}
.empty strong{margin-bottom:8px;color:#eef1ee;font-weight:700}
.empty .action{display:inline-flex;margin-top:12px;width:auto}
.toast{bottom:22px;border:1px solid #ffffff24;background:#202729;color:#f1f3f1;box-shadow:0 12px 36px #0006}
footer{padding:0 0 24px;color:#697374;font-size:.72rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:none){.cover-actions{opacity:1;transform:none}.cover img{filter:brightness(.78)}}
@media(max-width:950px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{gap:30px}}
@media(max-width:680px){.wrap{width:min(100% - 30px,540px)}.hero{grid-template-columns:1fr;gap:23px;padding:40px 0 28px}.hero h1{font-size:2.65rem}.hero p{font-size:.9rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.cover{aspect-ratio:1.42}.card-content{padding:11px}.card h3{font-size:.85rem}.meta{font-size:.68rem}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-right{width:100%;justify-content:space-between}}
@media(max-width:420px){.grid{grid-template-columns:1fr}.cover{aspect-ratio:1.8}.card{display:grid;grid-template-columns:40% 1fr;min-height:135px}.cover{height:100%;aspect-ratio:auto}.card-content{padding:13px}.card-top{align-items:flex-start}.cover-actions{inset:auto 6px 7px;gap:4px}.cover-actions .action{font-size:.65rem;padding:7px 5px;min-height:33px}.meta{min-height:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}