*{box-sizing:border-box;margin:0;padding:0}
:root{
  --acc:#f5c542;--acc-dim:rgba(245,197,66,.13);--acc-dim2:rgba(245,197,66,.28);
  --green:#5dcf8a;--red:#ff6b6b;
  --bg:#090912;--bg2:#0f0f1c;--bg3:#171726;
  --border:rgba(255,255,255,.07);--dim:#6a6a90;--txt:#e8e8f4;
  --font-head:'DM Serif Display',serif;--font:'DM Sans',sans-serif;
  --radius:12px;
}
html,body{min-height:100vh;background:var(--bg);color:var(--txt);font-family:var(--font);overflow-x:hidden}
.blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,rgba(245,197,66,.04),transparent 55%);top:-140px;left:-160px}
.blob.b{width:420px;height:420px;background:radial-gradient(circle,rgba(93,207,138,.03),transparent 55%);bottom:0;right:-100px}

header{position:sticky;top:0;z-index:100;background:rgba(9,9,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:11px 24px}
.logo{font-family:var(--font-head);font-size:1.4rem;font-style:italic;color:var(--acc);white-space:nowrap;flex-shrink:0;text-shadow:0 0 28px rgba(245,197,66,.28)}
.search-wrap{flex:1;max-width:440px;position:relative}
#si{width:100%;background:var(--bg3);border:1.5px solid var(--border);color:var(--txt);padding:8px 12px 8px 36px;border-radius:9px;font-size:.875rem;font-family:var(--font);outline:none;transition:border-color .2s}
#si:focus{border-color:var(--acc)}
#si::placeholder{color:var(--dim)}
.si-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none;font-size:.9rem}
.sr-box{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#191928;border:1px solid rgba(255,255,255,.1);border-radius:12px;z-index:200;max-height:480px;overflow-y:auto;display:none;box-shadow:0 16px 48px rgba(0,0,0,.65)}
.sr-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:rgba(245,197,66,.05)}
.sr-item.in-list{background:rgba(93,207,138,.045)}
.sr-pwrap{position:relative;flex-shrink:0}
.sr-poster{width:38px;height:55px;border-radius:5px;object-fit:cover;background:var(--bg3);display:block}
.sr-check{position:absolute;top:-4px;right:-4px;background:var(--green);color:#0a0a12;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:2px solid #191928;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sr-info{flex:1;min-width:0}
.sr-title{font-size:.83rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:.71rem;color:var(--dim);margin-top:2px}
.sr-add{background:var(--acc-dim);color:var(--acc);border:1px solid rgba(245,197,66,.2);padding:5px 11px;border-radius:6px;font-size:.72rem;font-family:var(--font);cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:600;transition:background .15s}
.sr-add:hover{background:var(--acc-dim2)}
.sr-add.done{background:rgba(93,207,138,.1);color:var(--green);border-color:rgba(93,207,138,.2);cursor:default}
.sr-msg{padding:13px;text-align:center;color:var(--dim);font-size:.82rem}
.sr-msg.err{color:var(--red)}

.hdr-right{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:10px}
.sync{display:flex;align-items:center;gap:6px;font-size:.71rem;color:var(--dim);background:var(--bg3);padding:5px 10px;border-radius:20px;border:1px solid var(--border)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;transition:background .3s}
.dot.saving{background:var(--acc);animation:pulse 1s ease-in-out infinite}
.dot.offline{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.icon-btn{background:var(--bg3);border:1px solid var(--border);color:var(--dim);padding:6px 11px;border-radius:8px;cursor:pointer;font-size:.75rem;font-family:var(--font);transition:all .2s;white-space:nowrap}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}

main{padding:0 24px 28px;position:relative;z-index:1;max-width:1400px;margin:0 auto}
.tabs{display:flex;position:sticky;top:52px;z-index:90;background:rgba(9,9,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin:0 -24px;padding:0 24px;border-bottom:1px solid var(--border)}
.tab{flex:1;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--dim);font-family:var(--font);font-size:.9rem;font-weight:500;padding:14px 0;cursor:pointer;transition:color .2s,border-color .2s}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.tab-count{background:var(--bg3);font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:20px;border:1px solid var(--border);margin-left:4px;vertical-align:1px}
.tab.active .tab-count{background:var(--acc-dim);color:var(--acc);border-color:rgba(245,197,66,.2)}
.tab-panel{display:none;padding-top:20px}
.tab-panel.active{display:block}
.sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sec-sort{margin-left:auto;background:var(--bg3);border:1px solid var(--border);color:var(--dim);padding:5px 9px;border-radius:7px;font-size:.75rem;font-family:var(--font);cursor:pointer;outline:none}
.sec-sort:hover{border-color:var(--acc);color:var(--txt)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:16px}
.empty{grid-column:1/-1;text-align:center;padding:2.5rem;background:var(--bg2);border-radius:var(--radius);border:1.5px dashed var(--border);color:var(--dim);font-size:.85rem;line-height:1.9}
.empty em{font-size:2rem;display:block;margin-bottom:.4rem;font-style:normal}

.card{background:var(--bg2);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);position:relative;transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px) scale(1.01);border-color:rgba(255,255,255,.13);box-shadow:0 10px 32px rgba(0,0,0,.5)}
.card:hover .overlay,.card.touch-active .overlay{opacity:1}
.c-img{width:100%;height:215px;object-fit:cover;display:block;background:var(--bg3)}
.overlay{position:absolute;top:0;left:0;right:0;height:215px;background:linear-gradient(to bottom,rgba(9,9,18,.2),rgba(9,9,18,.95));opacity:0;transition:opacity .2s;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:11px;gap:6px}
.ov{width:100%;border:1px solid rgba(255,255,255,.12);color:var(--txt);padding:6px 0;border-radius:7px;font-size:.74rem;font-family:var(--font);cursor:pointer;text-align:center;transition:background .15s;font-weight:500;background:rgba(255,255,255,.07)}
.ov:hover{background:rgba(255,255,255,.16)}
.ov.p{background:var(--acc-dim);color:var(--acc);border-color:rgba(245,197,66,.2)}
.ov.p:hover{background:var(--acc-dim2)}
.ov.d{color:var(--red);border-color:rgba(255,107,107,.1)}
.ov.d:hover{background:rgba(255,107,107,.09)}
.c-body{padding:9px 11px 11px}
.c-type{font-size:.6rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
.c-title{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-year{font-size:.7rem;color:var(--dim);margin-top:1px}
.stars{display:flex;gap:1px;margin-top:6px}
.star{background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;padding:0;line-height:1;transition:color .1s,transform .1s}
.star.on{color:var(--acc)}
.star:hover{transform:scale(1.35)}
.c-date{margin-top:6px;width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--dim);font-size:.68rem;padding:4px 7px;border-radius:5px;outline:none;font-family:var(--font);color-scheme:dark}
.c-date:focus{border-color:var(--acc);color:var(--txt)}

.toast{position:fixed;bottom:22px;right:22px;background:#1c1c2e;border:1px solid rgba(255,255,255,.1);color:var(--txt);padding:9px 16px;border-radius:10px;font-size:.81rem;z-index:2000;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s;pointer-events:none;max-width:280px}
.toast.show{opacity:1;transform:none}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(8px)}
.modal{background:#15152a;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:2.2rem;max-width:440px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.7)}
.modal-icon{font-size:2.2rem;margin-bottom:.5rem}
.modal h2{font-family:var(--font-head);font-size:1.6rem;font-style:italic;color:var(--acc);margin-bottom:.4rem}
.modal p{color:var(--dim);font-size:.84rem;line-height:1.7;margin-bottom:1.4rem}
.modal-input{width:100%;background:var(--bg3);border:1.5px solid var(--border);color:var(--txt);padding:.75rem 1rem;border-radius:9px;font-size:.9rem;font-family:var(--font);outline:none;margin-bottom:.75rem;transition:border-color .2s}
.modal-input:focus{border-color:var(--acc)}
.modal-btn{width:100%;background:var(--acc);color:#0a0a12;border:none;padding:.8rem;border-radius:9px;font-size:.95rem;font-weight:700;font-family:var(--font);cursor:pointer;letter-spacing:.3px;transition:opacity .2s,transform .15s}
.modal-btn:hover{opacity:.88;transform:translateY(-1px)}
.modal-note{text-align:center;color:var(--dim);font-size:.72rem;margin-top:.75rem}

@media(max-width:600px){
  header{padding:9px 13px;flex-wrap:wrap}
  .search-wrap{order:3;max-width:100%;flex:0 0 100%}
  .hdr-right{order:2}
  main{padding:0 13px 18px}
  .tabs{margin:0 -13px;padding:0 13px;top:88px}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px}
}