:root{--bg:#121316;--surface:#1b1d21;--line:#2c2f35;--text:#ebe6dc;--muted:#8d9299;--accent:#c8a45d;
--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif;--pad:clamp(16px,4vw,48px)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-text-size-adjust:100%}
body{min-height:100vh;padding-bottom:env(safe-area-inset-bottom,0px)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block;max-width:100%}
[hidden]{display:none!important}
header{position:sticky;top:0;z-index:20;display:flex;gap:14px;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) var(--pad) 12px;background:linear-gradient(var(--bg) 60%,transparent)}
.logo{font-family:var(--serif);font-size:1.25rem;font-weight:600}
nav{display:flex;gap:4px}
nav button,.link{padding:6px 10px;color:var(--muted);border-radius:4px}
nav button.on{color:var(--text);background:var(--surface)}
.search{flex:1;max-width:380px;margin-left:auto}
.search input,.dlg input,textarea,.rate input{width:100%;padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit}
.hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;margin-top:-64px;padding:120px var(--pad) 48px;background-size:cover;background-position:center 20%}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,rgba(18,19,22,.35) 55%,rgba(18,19,22,.65)),linear-gradient(to right,rgba(18,19,22,.85),transparent 60%)}
.hero-inner{position:relative;max-width:620px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.05;margin-bottom:14px}
.hero p{color:#cfcabf;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:22px}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{padding:10px 18px;border-radius:4px;border:1px solid var(--line);background:var(--surface);font-weight:500;color:var(--text);text-decoration:none}
.btn.primary,.btn.on{background:var(--accent);border-color:var(--accent);color:#17130a}
.btn:hover{border-color:var(--accent)}
main{padding:0 var(--pad) 64px}
.row{margin-top:36px}
.row h2,.lib-h{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:14px}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.card{flex:0 0 auto;width:150px;text-align:left;scroll-snap-align:start}
.grid .card{width:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px}
.poster{aspect-ratio:2/3;width:100%;border-radius:4px;object-fit:cover;background:var(--surface);border:1px solid var(--line)}
.noposter{display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;color:var(--muted);font-size:.85rem}
.card:hover .poster{border-color:var(--accent)}
.card .t{margin-top:8px;font-size:.9rem;line-height:1.3}
.card .y{color:var(--muted);font-size:.8rem}
.card .y b{color:var(--accent);font-weight:500}
.msg{color:var(--muted);padding:48px 0}
.tabs{display:flex;gap:8px;margin:12px 0 22px;flex-wrap:wrap;align-items:center}
#detail{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;display:none}
#detail.open{display:block}
.close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:var(--pad);z-index:60;padding:8px 14px;border-radius:4px;background:rgba(18,19,22,.8);border:1px solid var(--line)}
.stage{position:relative;aspect-ratio:16/9;max-height:62vh;width:100%;background-size:cover;background-position:center;background-color:var(--surface)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent 55%);pointer-events:none}
.stage.playing::after{display:none}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.d-body{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:0 var(--pad) 64px;margin-top:-90px;position:relative;z-index:2;max-width:1100px}
.d-body .poster{box-shadow:0 12px 40px rgba(0,0,0,.5)}
.d-body h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,3rem);line-height:1.1}
.meta{color:var(--muted);margin:10px 0 4px}
.tag{font-family:var(--serif);font-style:italic;color:var(--accent);margin:10px 0}
.ov{line-height:1.65;max-width:70ch;margin:14px 0}
.facts{display:grid;gap:8px;margin:18px 0;color:#cfcabf;max-width:70ch}
.facts b{color:var(--muted);font-weight:500;margin-right:6px}
.mine{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);max-width:70ch;display:grid;gap:12px}
.rate{display:flex;align-items:center;gap:10px;color:var(--muted)}
.rate input{width:90px}
textarea{min-height:90px;resize:vertical}
@media(max-width:640px){.d-body{grid-template-columns:1fr;margin-top:-50px}.d-body .poster{width:120px}.hero{min-height:56vh}
header{flex-wrap:wrap}.search{order:5;flex-basis:100%;max-width:none}}
.overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.8);padding:20px}
.overlay.open{display:flex}
.dlg{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px;max-width:420px;width:100%;display:grid;gap:10px}
.dlg h2{font-family:var(--serif);font-weight:600}
.dlg p{color:#cfcabf;line-height:1.5;font-size:.95rem}
.dlg input{background:var(--bg)}
.err{color:#e08a7a;min-height:1.2em;font-size:.9rem}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);padding:10px 16px;border-radius:4px;z-index:200;display:none}
footer{padding:24px var(--pad);color:var(--muted);font-size:.78rem;border-top:1px solid var(--line)}
.rmx{position:absolute;top:6px;right:6px;min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:rgba(18,19,22,.93);border:1px solid #e08a7a;color:#e08a7a;font-weight:600}
.rmx.rs{border-color:var(--accent);color:var(--accent);font-size:.8rem}
#dHidden .poster{opacity:.45}
.np{display:block}
.dtile{display:flex;gap:12px;align-items:center}
.dtile img,.dtile .np{width:56px;height:84px;object-fit:cover;border-radius:3px;background:var(--bg);flex:none}
.dtile>div{flex:1;min-width:0}
.prs{display:flex;gap:12px;align-items:center;text-align:left;width:100%;max-width:520px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);margin-bottom:8px}
.prs:hover{border-color:var(--accent)}
.prs img,.prs .np{width:40px;height:60px;object-fit:cover;border-radius:2px;background:var(--bg);flex:none}
.prs small{color:var(--muted)}
.prs em{margin-left:auto;color:var(--accent);font-size:.8rem;font-style:normal}
.pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 22px}
.pk h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:4px}
.pkc{width:150px;margin:12px 0}
#lmenu{position:fixed;z-index:150;width:240px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.lm{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:4px}
.lm:hover{background:var(--bg)}
.lm.on{color:var(--accent)}
.ck{width:16px;display:inline-flex;flex:none}
.lmn{color:var(--muted);padding:8px 10px;font-size:.9rem}
.lmnew{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line);margin-top:4px}
.lmnew input{flex:1;min-width:0;padding:7px 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.lm.add{width:auto;padding:7px 10px;border:1px solid var(--line)}
.card{position:relative}
.card .pb,.card .tb{display:block;width:100%;text-align:left;padding:0}
.card .t,.card .y{display:block}
.qa{position:absolute;right:6px;bottom:6px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.card:hover .qa,.card:focus-within .qa{opacity:1}
@media(hover:none){.qa{opacity:1}}
.q{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(18,19,22,.9);color:var(--text);border:1px solid var(--line)}
.q:hover{border-color:var(--accent);color:var(--accent)}
.q.on{background:var(--accent);border-color:var(--accent);color:#17130a}
.dlg.wide{max-width:880px;max-height:88vh;overflow-y:auto}
.dlg select{padding:9px 10px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.irow{padding:12px 0;border-top:1px solid var(--line)}
.ihead{margin-bottom:8px}
.ist{margin-left:8px;font-size:.78rem;color:var(--muted)}
.ist.ok{color:var(--accent)}
.icands{display:flex;flex-wrap:wrap;gap:8px}
.ic{display:flex;gap:8px;align-items:center;text-align:left;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:4px;background:var(--bg);font-size:.85rem;max-width:230px}
.ic img,.ic .np{width:34px;height:51px;object-fit:cover;border-radius:2px;background:var(--surface);flex:none}
.ic small{color:var(--muted)}
.ic.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ic.skip{padding:10px 14px}
nav{flex-wrap:wrap}
.cat{margin-top:34px}
.cat h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:12px}
.nomgrid{display:flex;flex-wrap:wrap;gap:18px 16px}
.nom{width:150px}
.wtag{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nom.win .wtag{color:var(--accent);font-weight:500}
.nom.win .poster{border:2px solid var(--accent)}
.who{color:var(--muted);font-size:.8rem;margin-top:2px}
.chip{padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-size:.9rem}
.nom.win .chip{border-color:var(--accent)}
.pw{position:relative}
.bdg{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(18,19,22,.88);color:var(--accent);border:1px solid var(--accent)}
.bdg.watched{background:var(--accent);color:#17130a}
.bdg.inl{position:static;display:inline-flex}
.chk{display:flex;align-items:center;gap:8px;color:var(--text)}
.tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tile{text-align:left;padding:16px;border:1px solid var(--line);background:var(--surface);border-radius:6px}
.tile:hover{border-color:var(--accent)}
.tn{font-family:var(--serif);font-size:1.15rem;margin-bottom:6px}
.bar{height:4px;background:var(--line);border-radius:2px;margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.newlist input{max-width:320px;width:100%}
.ctl{display:grid;gap:12px;margin:12px 0 26px}
.ctl select,.ctl input[type=date],.mine select,.tabs select,.newlist input{padding:9px 10px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;color-scheme:dark}
.day{font-family:var(--serif);font-size:1.15rem;margin:30px 0 12px;color:var(--accent)}
.more{margin:28px 0;text-align:center}