:root{
      --bg:#10111a; --bg2:#151725; --panel:rgba(255,255,255,.08); --panel2:rgba(255,255,255,.12);
      --text:#f7f3ff; --muted:#ada8c1; --soft:#d8d1ee; --line:rgba(255,255,255,.14);
      --a:#ff7eb6; --b:#f472b6; --c:#fb7185; --tag-my:#ff7eb6; --tag-public:#38bdf8; --good:#65e6a5; --warn:#ffd166; --bad:#ff6b6b;
      --shadow:0 24px 70px rgba(0,0,0,.35); --radius:24px; --blur:blur(22px);
      --cardw:190px;
    }
    [data-theme="light"]{
      --bg:#f6f4fb; --bg2:#ede9f7; --panel:rgba(255,255,255,.74); --panel2:rgba(255,255,255,.92);
      --text:#242033; --muted:#6b637d; --soft:#413957; --line:rgba(54,43,77,.14); --shadow:0 24px 70px rgba(86,62,110,.16);
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--a) 26%,transparent),transparent 34rem),radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--c) 18%,transparent),transparent 30rem),radial-gradient(circle at 45% 88%,color-mix(in srgb,var(--b) 24%,transparent),transparent 32rem),linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text);overflow:hidden}
    [data-theme="light"] body{background:radial-gradient(circle at 10% 2%,color-mix(in srgb,var(--a) 16%,transparent),transparent 34rem),radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--c) 12%,transparent),transparent 30rem),radial-gradient(circle at 48% 92%,color-mix(in srgb,var(--b) 14%,transparent),transparent 32rem),linear-gradient(135deg,var(--bg),var(--bg2))}
    button,input,select,textarea{font:inherit;color:inherit} button{border:0;cursor:pointer} button:disabled{cursor:not-allowed;opacity:.5}
    .app{display:grid;grid-template-columns:300px minmax(0,1fr);height:100vh;gap:18px;padding:18px}
    .side,.main,.drawer,.modal-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--radius)}
    .side{padding:18px;display:flex;flex-direction:column;min-width:0;overflow:hidden}.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}.logo{width:48px;height:48px;border-radius:17px;background:linear-gradient(135deg,var(--a),var(--b) 58%,var(--c));box-shadow:0 16px 35px rgba(255,126,182,.24);display:grid;place-items:center;font-weight:900;letter-spacing:-.08em}.brand h1{margin:0;font-size:22px;letter-spacing:-.03em}.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.pill{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);color:var(--soft);font-size:12px;white-space:nowrap}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}.stat{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.06);padding:12px}.stat b{display:block;font-size:22px;line-height:1}.stat span{display:block;margin-top:5px;color:var(--muted);font-size:12px}.nav-title{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 8px}.nav{display:grid;gap:8px}.nav button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border-radius:16px;background:transparent;color:var(--soft);text-align:left}.nav button:hover,.nav button.active{background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.16));color:var(--text)}.badge{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:11px}.danger{color:var(--bad)}.tag-list{overflow:auto;min-height:0;display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start;padding:4px 4px 0 0;margin-top:-4px}
    #accountPill a{color:inherit;text-decoration:none}
    .tag-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
    /* "show more" toggle for the tag list — only surfaced on mobile (see media query) */
    .tag-list-more{display:none;width:100%;margin-top:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
    .tag-list-more:hover{color:var(--text);border-color:color-mix(in srgb,var(--a) 40%,var(--line))}
    .tag-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0;flex:none}
    .tag-search-toggle:hover{color:var(--text);background:rgba(255,255,255,.08)}
    .tag-search-toggle.active{color:var(--text);background:color-mix(in srgb,var(--a) 16%,transparent)}
    .tag-search-toggle svg{width:15px;height:15px}
    .tag-filter{flex:none;max-height:0;opacity:0;overflow:hidden;position:relative;margin:0;transition:max-height .26s cubic-bezier(.22,1,.36,1),opacity .2s ease,margin .26s cubic-bezier(.22,1,.36,1)}
    .tag-filter.open{max-height:64px;opacity:1;margin:2px 0 10px}
    .tag-filter-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
    .tag-filter-input{width:100%;background:rgba(0,0,0,.16);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 33px;outline:0;color:var(--text);font-size:13px}
    .tag-filter-input:focus{border-color:var(--accent-line)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 13%,transparent)!important}.tag-chip{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 10px;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag-chip.active{background:linear-gradient(135deg,rgba(70,217,255,.2),rgba(124,92,255,.18));border-color:rgba(70,217,255,.36)}.tag-chip.my-tag{border-color:rgba(255,126,182,.30);background:rgba(255,126,182,.08)}.tag-chip.public-tag{border-color:rgba(70,217,255,.30);background:rgba(70,217,255,.08)}.tag-chip.tag-filter-btn{cursor:pointer}.tag-chip .tag-kind{opacity:.68;font-size:.86em;margin-right:4px}.tag-pair{display:inline-flex;align-items:center;gap:2px;max-width:100%}.tag-open{margin-left:0;opacity:.72;text-decoration:none;color:inherit;font-size:.92em;flex:none}.tag-open:hover{opacity:1;color:var(--c)}
    .main{min-width:0;display:flex;flex-direction:column;overflow:hidden}.top{padding:18px 18px 12px;border-bottom:1px solid var(--line)}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.grow{flex:1}.title{font-size:26px;font-weight:900;letter-spacing:-.04em}.search{position:relative;min-width:240px;flex:1}.search input,.field input,.field textarea,.field select{width:100%;background:rgba(0,0,0,.16);border:1px solid var(--line);border-radius:16px;padding:12px 14px;outline:0}.search input:focus,.field input:focus,.field textarea:focus{border-color:rgba(255,126,182,.6);box-shadow:0 0 0 4px rgba(255,126,182,.12)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text);white-space:nowrap}.btn.primary{background:linear-gradient(135deg,var(--a),var(--b));border-color:transparent;color:white;font-weight:800}.btn.good{background:rgba(101,230,165,.14);border-color:rgba(101,230,165,.28)}.btn.warn{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.32)}.btn.bad{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.32)}.btn.small{padding:8px 10px;border-radius:13px;font-size:12px}.filters{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.content{min-height:0;overflow:auto;padding:18px}.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardw),1fr));gap:18px}.card{position:relative;min-width:0;border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:22px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.16);transition:transform .18s ease, border-color .18s ease, background .18s ease}.card:hover{transform:translateY(-4px);border-color:rgba(255,126,182,.45);background:rgba(255,255,255,.11)}.cover-wrap{aspect-ratio:3/4;position:relative;background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.17));overflow:hidden}.cover{width:100%;height:100%;object-fit:cover;display:block}.no-cover{height:100%;display:grid;place-items:center;padding:18px;color:var(--muted);text-align:center}.status-ribbon{position:absolute;top:10px;left:10px;z-index:2;font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:rgba(16,17,26,.72);backdrop-filter:blur(10px)}.rate{position:absolute;top:10px;right:10px;z-index:2;font-size:13px;font-weight:900;padding:6px 9px;border-radius:999px;background:linear-gradient(135deg,var(--warn),#ff8fab);color:#201526}.card-body{padding:12px}.name{font-weight:900;line-height:1.35;letter-spacing:.03em;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}.comment{margin-top:9px;color:var(--soft);font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0}.mini-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.mini-tags span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.notice{border:1px solid rgba(255,209,102,.28);background:rgba(255,209,102,.1);border-radius:18px;padding:12px 14px;color:var(--soft);line-height:1.5}.empty{height:45vh;display:grid;place-items:center;text-align:center;color:var(--muted)}.empty h2{color:var(--text);margin:0 0 8px}.drawer-mask,.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none}.drawer-mask.show,.modal-mask.show{display:block}.drawer{position:fixed;right:18px;top:18px;bottom:18px;width:min(520px,calc(100vw - 36px));z-index:60;display:none;overflow:hidden}.drawer.show{display:flex;flex-direction:column}.drawer-head{padding:18px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}.drawer-cover{width:98px;aspect-ratio:3/4;border-radius:16px;object-fit:cover;background:rgba(255,255,255,.08);flex:none}.drawer-body{padding:18px;overflow:auto}.kv{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;font-size:14px;margin:14px 0}.kv div:nth-child(odd){color:var(--muted)}.longtext{white-space:pre-wrap;line-height:1.75;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(0,0,0,.13)}.history-list{display:grid;gap:10px}.hist{border:1px solid var(--line);border-radius:16px;padding:10px;background:rgba(255,255,255,.05);font-size:13px;color:var(--soft)}.modal-card{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;margin:16px auto;padding:20px}.field{margin:14px 0}.field label{display:block;margin-bottom:7px;color:var(--muted);font-size:13px}.help{color:var(--muted);font-size:13px;line-height:1.65}.progress{height:10px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b),var(--c));transition:width .25s}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:90;background:rgba(18,19,30,.92);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:12px 16px;color:white;transition:.25s;max-width:min(720px,calc(100vw - 36px));text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.footer-note{margin-top:auto;padding-top:12px;color:var(--muted);font-size:12px;line-height:1.55}.sync-log{max-height:160px;overflow:auto;background:rgba(0,0,0,.14);border:1px solid var(--line);border-radius:16px;padding:10px;font-size:12px;color:var(--muted);white-space:pre-wrap}.hidden{display:none!important}

    /* v0.3 polish: custom scrollbar, dropdowns, motion */
    /* Slim, rounded, arrow-less scrollbar that auto-hides until you hover the scrollable area. */
    *{scrollbar-width:thin;scrollbar-color:rgba(255,126,182,.12) transparent}
    *:hover{scrollbar-color:rgba(255,126,182,.5) transparent}
    *::-webkit-scrollbar{width:9px;height:9px}
    *::-webkit-scrollbar-track{background:transparent;border:0}
    *::-webkit-scrollbar-button,
    *::-webkit-scrollbar-button:single-button,
    *::-webkit-scrollbar-button:double-button,
    *::-webkit-scrollbar-button:start,
    *::-webkit-scrollbar-button:end,
    *::-webkit-scrollbar-button:vertical,
    *::-webkit-scrollbar-button:horizontal{display:none!important;width:0!important;height:0!important;background:transparent!important}
    *::-webkit-scrollbar-corner{background:transparent}
    *::-webkit-scrollbar-thumb{background-color:rgba(255,126,182,.10);border:2px solid transparent;background-clip:padding-box;border-radius:999px;transition:background-color .35s ease}
    *:hover::-webkit-scrollbar-thumb{background-color:rgba(255,126,182,.5)}
    *::-webkit-scrollbar-thumb:hover{background-color:rgba(255,126,182,.85)}
    *::-webkit-scrollbar-thumb:active{background-color:rgba(124,92,255,.9)}
    .brand{position:relative}.brand:after{content:"";position:absolute;inset:auto 4px -10px 4px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,126,182,.5),rgba(70,217,255,.32),transparent)}
    .official-logo{width:118px;height:42px;border-radius:15px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;padding:8px 11px;box-shadow:0 18px 45px rgba(255,126,182,.22);overflow:hidden;transition:.22s ease}.official-logo:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 22px 55px rgba(255,126,182,.28)}.official-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}.official-logo span{display:none;color:#f09199;font-weight:900;font-size:19px;letter-spacing:-.05em}.official-logo.fallback img{display:none}.official-logo.fallback span{display:block}
    .btn{transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.16)}.btn.primary:hover{box-shadow:0 18px 42px rgba(255,126,182,.32)}
    .search:before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-52%);font-size:19px;opacity:.66;pointer-events:none}.search input{padding-left:38px;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}.search input:focus{background:rgba(255,255,255,.08)}
    .selectish{position:relative;display:inline-flex}.select-trigger{min-width:160px;justify-content:space-between}.select-trigger .chev{opacity:.72;transition:transform .18s ease}.selectish.open .chev{transform:rotate(180deg)}.select-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:220px;padding:7px;border:1px solid var(--line);background:rgba(23,24,38,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:18px;box-shadow:var(--shadow);display:grid;gap:4px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .16s ease, transform .16s ease}.selectish.open .select-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.select-menu button{width:100%;text-align:left;border-radius:13px;background:transparent;padding:10px 11px;color:var(--soft);transition:.15s ease}.select-menu button:hover,.select-menu button.active{background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.16));color:var(--text)}[data-theme="light"] .select-menu{background:rgba(255,255,255,.86)}
    @keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes drawerIn{from{opacity:0;transform:translateX(18px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseSoft{0%,100%{opacity:.55}50%{opacity:1}}
    .card{animation:cardIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0), 18) * 18ms);will-change:transform}.card:before{content:"";position:absolute;inset:-1px;z-index:0;background:radial-gradient(circle at var(--mx,50%) var(--my,10%),rgba(255,255,255,.18),transparent 34%);opacity:0;transition:opacity .18s}.card:hover:before{opacity:1}.card>*{position:relative;z-index:1}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));opacity:.88;pointer-events:none}.drawer.show{animation:drawerIn .24s cubic-bezier(.2,.8,.2,1)}.modal-mask.show .modal-card{animation:modalIn .2s ease both}.tag-chip,.nav button{transition:transform .16s ease, background .16s ease, border-color .16s ease}.tag-chip:hover,.nav button:hover{transform:translateY(-1px)}
    .safety-empty{max-width:760px;margin:6vh auto;display:grid;gap:16px}.safety-panel{border:1px solid rgba(255,209,102,.28);background:linear-gradient(135deg,rgba(255,209,102,.12),rgba(124,92,255,.08));border-radius:26px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.16)}.safety-panel h2{margin:0 0 8px;font-size:25px;letter-spacing:-.03em}.safety-panel p{margin:8px 0;color:var(--soft);line-height:1.7}.safety-steps{display:grid;gap:10px;margin-top:14px}.safety-step{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.055);padding:12px 14px;color:var(--soft)}.safety-step b{color:var(--text)}


    /* v0.4 performance and motion polish */
    body{overscroll-behavior:none}
    body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:999px;filter:blur(90px);opacity:.45;animation:floatAura 13s ease-in-out infinite alternate}
    body:before{width:38vw;height:38vw;left:-9vw;top:10vh;background:radial-gradient(circle,rgba(255,126,182,.42),transparent 62%)}
    body:after{width:46vw;height:46vw;right:-16vw;bottom:-12vh;background:radial-gradient(circle,rgba(70,217,255,.28),rgba(124,92,255,.18),transparent 66%);animation-duration:16s}
    @keyframes floatAura{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,-3vh,0) scale(1.08)}}
    .bangumi-logo{width:54px;height:54px;display:grid;place-items:center;border-radius:19px;color:#f09199;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,241,248,.72));box-shadow:0 18px 45px rgba(255,126,182,.25),inset 0 1px 0 rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.45);transition:transform .22s ease, box-shadow .22s ease, color .22s ease;position:relative;overflow:hidden;flex:none}.bangumi-logo:before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 90deg,transparent,rgba(255,126,182,.28),rgba(70,217,255,.2),transparent);animation:spinLogo 6s linear infinite}.bangumi-logo svg{width:38px;height:38px;position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(240,145,153,.28))}.bangumi-logo:hover{transform:translateY(-2px) scale(1.04);color:#ff6fa6;box-shadow:0 24px 58px rgba(255,126,182,.34),inset 0 1px 0 rgba(255,255,255,.82)}@keyframes spinLogo{to{transform:rotate(360deg)}}
    .poster-grid{align-items:start}.card{content-visibility:auto;contain-intrinsic-size:310px 470px;contain:layout style paint}.cover{transform:translateZ(0);will-change:auto}.card:hover .cover{transform:scale(1.035);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
    .load-more-wrap{display:flex;justify-content:center;padding:20px 0 8px}.load-more-wrap .btn{min-width:220px;background:linear-gradient(135deg,rgba(255,126,182,.16),rgba(70,217,255,.12));border-color:rgba(255,126,182,.28)}
    .sync-mode-note{border-color:rgba(101,230,165,.32);background:rgba(101,230,165,.10)}
    @media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

    @media (max-width: 920px){body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-columns:1fr}.side{max-height:none}.tag-list{max-height:130px}.drawer{right:8px;top:8px;bottom:8px;width:calc(100vw - 16px)}.search{min-width:100%}.split{grid-template-columns:1fr}:root{--cardw:150px}}
  

    /* v0.5 layout / interaction polish */
    :root{--poster-body-h:156px;--poster-body-hover:226px;--comment-lines:3;--font-main:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;}
    [data-card-size="compact"]{--cardw:158px;--poster-body-h:136px;--poster-body-hover:190px;}
    [data-card-size="standard"]{--cardw:190px;--poster-body-h:156px;--poster-body-hover:226px;}
    [data-card-size="large"]{--cardw:226px;--poster-body-h:176px;--poster-body-hover:260px;}
    [data-font="system"]{--font-main:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;}
    [data-font="wenkai"]{--font-main:"LXGW WenKai Screen","LXGW WenKai","霞鹜文楷","Noto Serif SC","Songti SC",serif;}
    [data-font="rounded"]{--font-main:"Nunito","M PLUS Rounded 1c","PingFang SC","Microsoft YaHei",sans-serif;}
    [data-font="jp"]{--font-main:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Microsoft YaHei",sans-serif;}
    [data-font="mono"]{--font-main:"JetBrains Mono","Cascadia Code","SFMono-Regular",Consolas,"Microsoft YaHei",monospace;}
    body{font-family:var(--font-main);transition:background-color .35s,color .35s;}
    ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;display:block}::view-transition-new(root){z-index:9999}::view-transition-old(root){z-index:1}
    .poster-grid{align-items:start;gap:28px 18px;overflow:visible;contain:layout paint style}.content{overflow:auto;overflow-x:hidden;padding-bottom:90px;overscroll-behavior:contain}.card{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;border-radius:22px;isolation:isolate;content-visibility:auto;contain-intrinsic-size:360px 460px;animation:cardIn .36s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(min(var(--i),18) * 18ms)}@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
    .card::before{content:"";position:absolute;inset:0;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid var(--line);box-shadow:0 18px 45px rgba(0,0,0,.16);z-index:-1;transition:transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s, border-color .26s, background .26s}.card:hover{transform:none;z-index:30}.card:hover::before{transform:translateY(-10px) scale(1.035);border-color:rgba(255,126,182,.5);background:rgba(255,255,255,.12);box-shadow:0 28px 80px rgba(0,0,0,.28),0 0 0 1px rgba(255,126,182,.14)}.card-glow{position:absolute;inset:-1px;border-radius:22px;background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.22),transparent 36%);opacity:0;pointer-events:none;transition:.22s;z-index:3}.card:hover .card-glow{opacity:1}.cover-wrap{border-radius:22px 22px 0 0;overflow:hidden;flex:0 0 auto;transform:translateZ(0);transition:transform .28s cubic-bezier(.22,1,.36,1)}.card:hover .cover-wrap{transform:translateY(-10px) scale(1.035)}.cover{transition:transform .45s cubic-bezier(.22,1,.36,1),filter .3s}.card:hover .cover{transform:scale(1.08);filter:saturate(1.12)}.card-body{height:var(--poster-body-h);flex:0 0 var(--poster-body-h);padding:12px;background:rgba(24,25,40,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:0 0 22px 22px;overflow:hidden;transition:height .26s cubic-bezier(.22,1,.36,1),flex-basis .26s,transform .26s,background .26s}.card:hover .card-body{height:var(--poster-body-hover);flex-basis:var(--poster-body-hover);transform:translateY(-10px) scale(1.035);background:rgba(24,25,40,.72)}[data-theme="light"] .card-body{background:rgba(255,255,255,.72)}[data-theme="light"] .card:hover .card-body{background:rgba(255,255,255,.94)}.name{min-height:2.5em}.meta{height:1.45em;overflow:hidden;flex-wrap:nowrap}.comment{min-height:calc(1.45em * min(var(--comment-lines),3));-webkit-line-clamp:var(--comment-lines);transition:.22s}.card:hover .comment{-webkit-line-clamp:6}.comment.no-comment{opacity:.42;font-style:italic}.mini-tags{max-height:2.15em;overflow:hidden}
    .drawer-mask.show{display:block;animation:maskIn .25s ease both}@keyframes maskIn{from{opacity:0}to{opacity:1}}.drawer{left:50%;top:50%;right:auto;bottom:auto;width:min(980px,calc(100vw - 36px));max-height:min(860px,calc(100vh - 36px));transform:translate(-50%,-50%) scale(.94);opacity:0;border-radius:30px;overflow:hidden}.drawer.show{display:flex;flex-direction:column;animation:detailPop .38s cubic-bezier(.22,1,.36,1) both}@keyframes detailPop{from{opacity:0;transform:translate(-50%,-48%) scale(.92);filter:blur(10px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}.detail-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.detail-bg img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.2);opacity:.24;transform:scale(1.1)}.detail-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,17,26,.86),rgba(20,16,34,.76) 45%,rgba(16,17,26,.92))}[data-theme="light"] .detail-bg::after{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,242,255,.82) 45%,rgba(255,255,255,.96))}.detail-top,.drawer-body{position:relative;z-index:1}.detail-top{padding:22px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:start}.detail-cover-wrap{border-radius:22px;padding:4px;background:linear-gradient(135deg,rgba(255,126,182,.44),rgba(124,92,255,.36),rgba(70,217,255,.28));box-shadow:0 22px 55px rgba(0,0,0,.24)}.drawer-cover{width:112px;aspect-ratio:3/4;border-radius:18px;object-fit:cover;display:block;background:rgba(255,255,255,.08)}.detail-titlebox h2{font-size:clamp(24px,4vw,42px);letter-spacing:-.04em;line-height:1.08;margin:6px 0 12px}.detail-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.detail-close{align-self:start}.detail-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;padding:22px;overflow:auto}.detail-main,.detail-side{display:grid;align-content:start;gap:14px}.detail-actions{position:sticky;top:0;z-index:2;padding-bottom:4px}.info-card{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:22px;padding:14px}.info-card h3,.detail-main h3{margin:0 0 10px}.big-comment{font-size:15px}.tag-cloud{display:flex;gap:8px;flex-wrap:wrap}.muted-inline{color:var(--muted)}
    .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}.setting-card{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:20px;padding:14px}.setting-title{font-weight:900;margin-bottom:6px}.segmented{display:flex;flex-wrap:wrap;gap:8px}.segmented button{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 11px;color:var(--soft);transition:.2s}.segmented button:hover{transform:translateY(-1px);border-color:rgba(255,126,182,.4)}.segmented button.active{background:linear-gradient(135deg,rgba(255,126,182,.28),rgba(124,92,255,.25));border-color:rgba(255,126,182,.45);color:var(--text);box-shadow:0 10px 24px rgba(255,126,182,.12)}.setting-help{font-size:12px;color:var(--muted);line-height:1.55;margin-top:8px}.number-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.number-grid .field{margin:0}.field input[type="number"]{appearance:textfield}
    [data-motion="soft"] .card{animation:none}[data-motion="soft"] .card:hover::before{transform:translateY(-6px) scale(1.018)}[data-motion="soft"] .card:hover .cover-wrap,[data-motion="soft"] .card:hover .card-body{transform:translateY(-6px) scale(1.018)}[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-motion="off"] .card:hover::before,[data-motion="off"] .card:hover .cover-wrap,[data-motion="off"] .card:hover .card-body{transform:none}.load-more-wrap{padding:34px 0 70px;text-align:center}
    @media (max-width: 920px){.drawer{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.detail-top{grid-template-columns:82px 1fr auto;padding:14px;gap:12px}.drawer-cover{width:74px}.detail-layout{grid-template-columns:1fr;padding:14px}.settings-grid{grid-template-columns:1fr}.number-grid{grid-template-columns:1fr}.card:hover .card-body{height:var(--poster-body-h);flex-basis:var(--poster-body-h)}.card:hover .comment{-webkit-line-clamp:var(--comment-lines)}}


    /* v0.6 fix pass: stable poster wall, centered detail, border control, closing animations */
    :root{--ui-border-width:1px;--modal-max:980px;}
    .side,.main,.drawer,.modal-card,.stat,.pill,.tag-chip,.btn,.search input,.field input,.field textarea,.field select,.select-menu,.select-menu button,.setting-card,.info-card,.longtext,.hist,.sync-log,.notice,.card,.mini-tags span{border-width:var(--ui-border-width)!important;}
    [data-border-zero="true"] .side,[data-border-zero="true"] .main,[data-border-zero="true"] .drawer,[data-border-zero="true"] .modal-card,[data-border-zero="true"] .stat,[data-border-zero="true"] .pill,[data-border-zero="true"] .tag-chip,[data-border-zero="true"] .btn,[data-border-zero="true"] .search input,[data-border-zero="true"] .field input,[data-border-zero="true"] .field textarea,[data-border-zero="true"] .field select,[data-border-zero="true"] .select-menu,[data-border-zero="true"] .select-menu button,[data-border-zero="true"] .setting-card,[data-border-zero="true"] .info-card,[data-border-zero="true"] .longtext,[data-border-zero="true"] .hist,[data-border-zero="true"] .sync-log,[data-border-zero="true"] .notice,[data-border-zero="true"] .card,[data-border-zero="true"] .mini-tags span{border-color:transparent!important;}
    .select-trigger{min-width:180px;padding-right:13px}.select-trigger .chev{font-size:0;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:10px;opacity:.66;flex:none;transition:transform .18s ease,opacity .18s ease}.selectish.open .chev{transform:rotate(225deg);opacity:1}.select-menu{transform-origin:top right;z-index:80}
    .poster-grid{align-items:start;gap:30px 20px;overflow:visible;contain:none}.content{overflow:visible auto;overflow-x:hidden;padding-bottom:120px}.card{cursor:pointer;background:rgba(255,255,255,.07);border:1px solid var(--line);box-shadow:0 18px 45px rgba(0,0,0,.16);padding-bottom:var(--poster-body-h);overflow:visible;contain:layout style;transform-origin:center center;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s,background .22s;will-change:transform}.card::before{display:none!important}.card:hover{transform:translateY(-12px) scale(1.035);z-index:60;border-color:rgba(255,126,182,.52);background:rgba(255,255,255,.115);box-shadow:0 30px 86px rgba(0,0,0,.30),0 0 0 1px rgba(255,126,182,.12)}.card-glow{border-radius:22px;z-index:7}.cover-wrap{border-radius:21px 21px 0 0;transition:none}.card:hover .cover-wrap{transform:none}.card:hover .cover{transform:scale(1.065);filter:saturate(1.10)}.card-body{position:absolute;left:0;right:0;bottom:0;z-index:6;height:var(--poster-body-h);flex:initial;padding:13px;background:rgba(24,25,40,.58);border-radius:0 0 21px 21px;overflow:hidden;transition:height .24s cubic-bezier(.22,1,.36,1),background .22s,box-shadow .22s}.card:hover .card-body{height:var(--poster-body-hover);transform:none;background:rgba(24,25,40,.92);box-shadow:0 -16px 40px rgba(0,0,0,.22);border-radius:0 0 21px 21px}.name{min-height:2.7em}.meta{min-height:1.45em}.mini-tags{max-height:2.25em;overflow:hidden}.card:hover .mini-tags{max-height:4.6em}.comment{min-height:calc(1.45em * min(var(--comment-lines),3));-webkit-line-clamp:var(--comment-lines)}.card:hover .comment{-webkit-line-clamp:7}[data-motion="soft"] .card:hover{transform:translateY(-7px) scale(1.018)}[data-motion="soft"] .card:hover .card-body{height:calc(var(--poster-body-hover) - 28px)}[data-motion="off"] .card:hover{transform:none!important}[data-motion="off"] .card:hover .card-body{height:var(--poster-body-hover)!important;transition:none!important}[data-motion="off"] .drawer.show,[data-motion="off"] .modal-mask.show .modal-card{animation:none!important}
    .drawer-mask,.modal-mask{opacity:0;display:none;transition:opacity .22s ease}.drawer-mask.show,.modal-mask.show{display:flex;opacity:1}.drawer-mask.closing,.modal-mask.closing{display:flex;opacity:0}.modal-mask{align-items:center;justify-content:center;padding:16px}.modal-card{width:min(var(--modal-max),calc(100vw - 32px));margin:0;max-height:calc(100vh - 32px);scrollbar-gutter:stable}.settings-card{--modal-max:900px}.modal-mask.show .modal-card{animation:modalIn .24s cubic-bezier(.22,1,.36,1) both}.modal-mask.closing .modal-card{animation:modalOut .18s ease both}@keyframes modalOut{from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(10px) scale(.985);filter:blur(8px)}}.modal-mask.show.closing{opacity:0}.sync-log:empty{display:none}.field label{font-weight:800;color:var(--soft)}
    .drawer{left:50%;top:50%;right:auto;bottom:auto;width:min(1060px,calc(100vw - 44px));max-height:min(890px,calc(100vh - 44px));transform:translate(-50%,-50%) scale(.96);opacity:0;border-radius:32px;overflow:hidden;display:none;flex-direction:column}.drawer.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);animation:detailPopV6 .36s cubic-bezier(.22,1,.36,1) both}.drawer.closing{display:flex;animation:detailOutV6 .18s ease both}.drawer-mask.show{background:rgba(0,0,0,.50);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@keyframes detailPopV6{from{opacity:0;transform:translate(-50%,-48%) scale(.92);filter:blur(12px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}@keyframes detailOutV6{from{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,-48%) scale(.965);filter:blur(8px)}}.detail-bg img{filter:blur(38px) saturate(1.25);opacity:.25}.detail-bg::after{background:linear-gradient(135deg,rgba(16,17,26,.90),rgba(24,18,39,.82) 48%,rgba(16,17,26,.94))}.detail-titlebar{position:relative;z-index:1;padding:24px 24px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}.detail-titlebar h2{font-size:clamp(26px,4.5vw,48px);line-height:1.04;letter-spacing:-.045em;margin:8px 0 14px}.detail-layout-v6{position:relative;z-index:1;display:grid;grid-template-columns:minmax(210px,300px) minmax(0,1fr);gap:20px;padding:22px;overflow:auto;min-height:0;flex:1}.detail-poster-panel{display:grid;align-content:start;gap:14px}.detail-poster-shell{border-radius:26px;padding:5px;background:linear-gradient(135deg,rgba(255,126,182,.55),rgba(124,92,255,.42),rgba(70,217,255,.34));box-shadow:0 24px 70px rgba(0,0,0,.32)}.detail-poster-shell .drawer-cover{width:100%;border-radius:21px}.detail-content{display:grid;align-content:start;gap:14px}.detail-actions{position:static}.detail-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-side .info-card:last-child{grid-column:1/-1}.kv{grid-template-columns:86px minmax(0,1fr)}.kv div:nth-child(even){min-width:0;word-break:break-word}.big-comment{font-size:15px;max-height:none}.longtext{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
    @media (max-width: 980px){.drawer{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.detail-layout-v6{grid-template-columns:1fr;padding:14px}.detail-titlebar{padding:16px}.detail-side{grid-template-columns:1fr}.detail-poster-panel{grid-template-columns:120px minmax(0,1fr);align-items:start}.detail-poster-shell{max-width:120px}.card:hover .card-body{height:var(--poster-body-h)}.card:hover .comment{-webkit-line-clamp:var(--comment-lines)}.card:hover .mini-tags{max-height:2.25em}}


    /* v0.7 card hover and detail redesign */
    :root{
      --poster-body-h:156px;
      --poster-body-hover:238px;
      --card-rise:-13px;
      --card-hover-scale:1.025;
      --card-shadow-base:0 18px 44px rgba(0,0,0,.18);
      --card-shadow-hover:0 32px 95px rgba(0,0,0,.38),0 0 0 1px rgba(255,126,182,.20),0 0 42px rgba(124,92,255,.16);
    }
    [data-card-size="compact"]{--poster-body-h:132px;--poster-body-hover:206px;--cardw:166px}
    [data-card-size="large"]{--poster-body-h:178px;--poster-body-hover:270px;--cardw:224px}
    .poster-grid{gap:34px 22px;align-items:start;overflow:visible;contain:layout paint style;padding:6px 2px 48px}
    .content{overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:96px}
    .card{height:auto;overflow:visible;border:0;background:transparent;box-shadow:none;isolation:isolate;transform-origin:center 52%;transition:transform .34s cubic-bezier(.16,1,.3,1),filter .34s cubic-bezier(.16,1,.3,1);will-change:transform;contain:layout style;content-visibility:visible;contain-intrinsic-size:360px 520px}
    .card::before{content:"";position:absolute;inset:-1px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));border:var(--ui-border-width) solid var(--line);box-shadow:var(--card-shadow-base);z-index:-2;transition:transform .36s cubic-bezier(.16,1,.3,1),box-shadow .36s cubic-bezier(.16,1,.3,1),background .36s,border-color .36s;pointer-events:none}
    .card::after{content:"";position:absolute;inset:-10px;border-radius:30px;background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.18),transparent 38%),linear-gradient(135deg,rgba(255,126,182,.10),rgba(124,92,255,.08),rgba(70,217,255,.06));opacity:0;z-index:-3;filter:blur(8px);transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1);pointer-events:none}
    .card:hover{z-index:80;transform:translateY(var(--card-rise)) scale(var(--card-hover-scale));filter:saturate(1.03)}
    .card:hover::before{transform:translateY(-2px);box-shadow:var(--card-shadow-hover);border-color:rgba(255,126,182,.46);background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.082))}
    .card:hover::after{opacity:1;transform:scale(1.035)}
    .card-glow{position:absolute;inset:-1px;border-radius:24px;background:radial-gradient(circle at var(--mx,50%) var(--my,15%),rgba(255,255,255,.26),transparent 35%);opacity:0;pointer-events:none;transition:opacity .24s cubic-bezier(.16,1,.3,1);z-index:4}.card:hover .card-glow{opacity:1}
    .cover-wrap{aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:24px 24px 0 0;transform:translateZ(0);transition:transform .38s cubic-bezier(.16,1,.3,1),filter .38s cubic-bezier(.16,1,.3,1);background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.17))}
    .card:hover .cover-wrap{transform:translateY(-2px)}
    .cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .58s cubic-bezier(.16,1,.3,1),filter .45s cubic-bezier(.16,1,.3,1)}
    .card:hover .cover{transform:scale(1.075);filter:saturate(1.12) contrast(1.03)}
    .cover-wrap::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(8,9,15,.42));pointer-events:none}
    .card-body{height:var(--poster-body-h);flex:0 0 var(--poster-body-h);margin-bottom:0;padding:13px 13px 12px;border-radius:0 0 24px 24px;background:linear-gradient(180deg,rgba(30,31,48,.76),rgba(22,23,36,.86));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;transition:height .36s cubic-bezier(.16,1,.3,1),margin-bottom .36s cubic-bezier(.16,1,.3,1),transform .36s cubic-bezier(.16,1,.3,1),background .36s cubic-bezier(.16,1,.3,1);position:relative}
    [data-theme="light"] .card-body{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(247,244,253,.90))}
    .card:hover .card-body{height:var(--poster-body-hover);margin-bottom:calc(var(--poster-body-h) - var(--poster-body-hover));transform:translateY(-1px);background:linear-gradient(180deg,rgba(34,35,54,.88),rgba(22,23,36,.94))}
    [data-theme="light"] .card:hover .card-body{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,244,253,.98))}
    .name{font-size:15px;font-weight:920;letter-spacing:-.025em;line-height:1.28;margin-bottom:7px;min-height:2.55em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
    .meta{min-height:1.5em;font-size:12px;color:var(--muted);display:flex;gap:7px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}.meta span{min-width:0;text-overflow:ellipsis;overflow:hidden}.meta .pill{padding:2px 7px;font-size:11px;flex:0 0 auto}
    .comment{position:relative;margin-top:10px;color:var(--soft);font-size:13px;line-height:1.52;display:block;max-height:calc(1.52em * var(--comment-lines));min-height:calc(1.52em * min(var(--comment-lines),2));overflow:hidden;white-space:pre-wrap;-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.76) 74%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.76) 74%,rgba(0,0,0,0));transition:max-height .36s cubic-bezier(.16,1,.3,1),opacity .28s}.comment.no-comment{font-style:italic;color:var(--muted);opacity:.82}.card:hover .comment{max-height:calc(1.52em * 7);-webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.72) 90%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.72) 90%,rgba(0,0,0,0))}
    .mini-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;height:24px;max-height:24px;overflow:hidden;transition:height .32s cubic-bezier(.16,1,.3,1),max-height .32s cubic-bezier(.16,1,.3,1),opacity .28s;-webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,0))}
    .card:hover .mini-tags{height:56px;max-height:56px;-webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,0))}
    .mini-tags span{height:23px;line-height:22px;font-size:11px;color:var(--muted);border:var(--ui-border-width) solid var(--line);border-radius:999px;padding:0 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;background:rgba(255,255,255,.045)}
    .rate{position:absolute;top:10px;right:10px;z-index:2;font-size:13px;font-weight:950;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,var(--warn),#ff8fab);color:#201526;box-shadow:0 10px 28px rgba(0,0,0,.22)}
    [data-motion="soft"]{--card-rise:-8px;--card-hover-scale:1.015;--poster-body-hover:210px}
    [data-motion="soft"] .card:hover .comment{max-height:calc(1.52em * 5)}
    [data-motion="off"] .card,[data-motion="off"] .card::before,[data-motion="off"] .card::after,[data-motion="off"] .card-body,[data-motion="off"] .cover,[data-motion="off"] .mini-tags,[data-motion="off"] .comment{transition:none!important;animation:none!important}
    [data-motion="off"] .card:hover{transform:none!important}
    [data-motion="off"] .card:hover .card-body{height:var(--poster-body-h)!important;margin-bottom:0!important;transform:none!important}
    [data-motion="off"] .card:hover .mini-tags{height:24px!important;max-height:24px!important}
    [data-motion="off"] .card:hover .comment{max-height:calc(1.52em * var(--comment-lines))!important}

    .drawer{left:50%;top:50%;right:auto;bottom:auto;width:min(1120px,calc(100vw - 44px));max-height:min(900px,calc(100vh - 44px));transform:translate(-50%,-50%) scale(.96);opacity:0;border-radius:32px;overflow:hidden;display:none;flex-direction:column;background:linear-gradient(135deg,rgba(35,36,54,.76),rgba(22,23,36,.88));border:var(--ui-border-width) solid var(--line);box-shadow:0 38px 120px rgba(0,0,0,.48);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
    [data-theme="light"] .drawer{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(246,242,253,.92))}
    .drawer.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);animation:detailPopV7 .38s cubic-bezier(.16,1,.3,1) both}.drawer.closing{display:flex;animation:detailOutV7 .20s ease both}.drawer-mask.show{background:rgba(0,0,0,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
    @keyframes detailPopV7{from{opacity:0;transform:translate(-50%,-47%) scale(.91);filter:blur(14px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}@keyframes detailOutV7{from{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,-47%) scale(.965);filter:blur(10px)}}
    .detail-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.detail-bg img{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(46px) saturate(1.35);opacity:.20;transform:scale(1.04)}.detail-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(255,126,182,.18),transparent 32%),radial-gradient(circle at 86% 8%,rgba(70,217,255,.12),transparent 28%),linear-gradient(135deg,rgba(16,17,26,.92),rgba(28,23,43,.84) 48%,rgba(16,17,26,.95))}[data-theme="light"] .detail-bg::after{background:radial-gradient(circle at 18% 18%,rgba(255,126,182,.16),transparent 32%),radial-gradient(circle at 86% 8%,rgba(70,217,255,.10),transparent 28%),linear-gradient(135deg,rgba(250,247,255,.92),rgba(246,242,253,.82) 48%,rgba(250,247,255,.95))}
    .detail-titlebar{position:relative;z-index:1;padding:26px 28px 18px;border-bottom:var(--ui-border-width) solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start}.detail-kicker{display:inline-flex;width:max-content;margin-bottom:8px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,rgba(255,126,182,.16),rgba(124,92,255,.14));border:var(--ui-border-width) solid rgba(255,255,255,.12);font-size:12px;font-weight:850;color:var(--soft)}.detail-titlebar h2{font-size:clamp(28px,4.7vw,54px);line-height:.98;letter-spacing:-.055em;margin:0 0 15px;text-wrap:balance}.detail-close{align-self:start}
    .detail-layout-v7{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:22px;padding:24px;overflow:auto;min-height:0;flex:1;scrollbar-gutter:stable}.detail-sidebar{position:sticky;top:0;display:grid;align-content:start;gap:15px;align-self:start}.detail-poster-shell{border-radius:28px;padding:5px;background:linear-gradient(135deg,rgba(255,126,182,.62),rgba(124,92,255,.48),rgba(70,217,255,.38));box-shadow:0 26px 80px rgba(0,0,0,.35)}.detail-poster-shell .drawer-cover{display:block;width:100%;aspect-ratio:3/4;border-radius:23px;object-fit:cover;background:rgba(255,255,255,.08)}.detail-main{display:grid;align-content:start;gap:16px;min-width:0}.detail-section-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:16px}.info-card{border:var(--ui-border-width) solid var(--line);border-radius:24px;background:rgba(255,255,255,.072);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);padding:16px;min-width:0}.info-card h3{margin:0 0 12px;font-size:14px;letter-spacing:.03em;color:var(--soft)}.longtext{white-space:pre-wrap;line-height:1.76;border:var(--ui-border-width) solid var(--line);border-radius:18px;padding:14px;background:rgba(0,0,0,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.big-comment{font-size:15px;max-height:none}.tag-cloud{display:flex;gap:8px;flex-wrap:wrap}.tag-cloud .tag-chip{height:auto;max-width:100%;white-space:normal;line-height:1.25}.detail-actions{display:flex;gap:10px;flex-wrap:wrap}.detail-actions .btn{flex:1 1 auto}.score-card{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(135deg,rgba(255,209,102,.14),rgba(255,126,182,.12),rgba(124,92,255,.10));padding:18px;border:var(--ui-border-width) solid rgba(255,209,102,.24)}.score-card::after{content:"";position:absolute;right:-36px;top:-48px;width:150px;height:150px;border-radius:999px;background:radial-gradient(circle,rgba(255,209,102,.24),transparent 68%)}.score-top{position:relative;display:flex;align-items:end;justify-content:space-between;gap:14px}.score-number{font-size:58px;font-weight:950;letter-spacing:-.08em;line-height:.82;background:linear-gradient(135deg,var(--warn),#ff8fab,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}.score-number small{font-size:18px;color:var(--muted);-webkit-text-fill-color:var(--muted);letter-spacing:0}.score-label{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.score-bar{position:relative;margin-top:18px;height:12px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}.score-fill{height:100%;width:var(--score-pct);border-radius:inherit;background:linear-gradient(90deg,var(--warn),#ff8fab,var(--b));box-shadow:0 0 22px rgba(255,126,182,.34);transition:width .55s cubic-bezier(.16,1,.3,1)}.score-caption{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}.kv{display:grid;grid-template-columns:88px minmax(0,1fr);gap:9px 12px;font-size:14px;margin:0}.kv div:nth-child(odd){color:var(--muted);font-weight:700}.kv div:nth-child(even){min-width:0;word-break:break-word}.history-list{display:grid;gap:10px}.hist{border:var(--ui-border-width) solid var(--line);border-radius:16px;padding:10px;background:rgba(255,255,255,.05);font-size:13px;color:var(--soft)}
    @media (max-width: 1050px){.detail-layout-v7{grid-template-columns:1fr}.detail-sidebar{position:relative;top:auto;grid-template-columns:150px minmax(0,1fr);align-items:start}.detail-poster-shell{max-width:150px}.detail-section-grid{grid-template-columns:1fr}.score-card{align-self:stretch}}
    @media (max-width: 680px){.poster-grid{gap:22px 14px}.drawer{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:24px}.detail-titlebar{padding:18px}.detail-layout-v7{padding:14px;gap:14px}.detail-sidebar{grid-template-columns:112px minmax(0,1fr)}.detail-poster-shell{max-width:112px}.score-number{font-size:42px}.card:hover{transform:none}.card:hover .card-body{height:var(--poster-body-h);margin-bottom:0}.card:hover .comment{max-height:calc(1.52em * var(--comment-lines))}.card:hover .mini-tags{height:24px;max-height:24px}}


    /* v0.8 rebuilt poster hover + media-detail layout
       Goals: no layout shift, no cut tag borders, cinematic hover, score visualization. */
    :root{
      --v8-card-ratio:.62;
      --v8-card-body:132px;
      --v8-card-body-hover:228px;
      --v8-card-lift:-15px;
      --v8-card-scale:1.035;
      --v8-card-shadow:0 18px 42px rgba(0,0,0,.22);
      --v8-card-shadow-hover:0 34px 90px rgba(0,0,0,.42),0 0 0 max(var(--ui-border-width), 0px) rgba(255,126,182,.36),0 0 46px rgba(124,92,255,.20);
    }
    [data-card-size="compact"]{--v8-card-body:116px;--v8-card-body-hover:196px;--cardw:164px}
    [data-card-size="standard"]{--v8-card-body:132px;--v8-card-body-hover:228px;--cardw:190px}
    [data-card-size="large"]{--v8-card-body:152px;--v8-card-body-hover:258px;--cardw:224px}
    [data-motion="soft"]{--v8-card-lift:-9px;--v8-card-scale:1.018;--v8-card-body-hover:198px}

    .poster-grid{
      grid-template-columns:repeat(auto-fill,minmax(var(--cardw),1fr));
      gap:28px 22px;
      align-items:start;
      overflow:visible;
      contain:layout style;
      padding:8px 4px 74px;
    }
    .content{overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:96px}
    .card{
      position:relative;
      aspect-ratio:var(--v8-card-ratio);
      height:auto!important;
      min-height:0!important;
      overflow:visible!important;
      border:0!important;
      border-radius:26px;
      background:transparent!important;
      box-shadow:none!important;
      isolation:isolate;
      transform:translateY(0) scale(1) translateZ(0);
      transform-origin:center center;
      transition:transform .42s cubic-bezier(.16,1,.3,1), filter .42s cubic-bezier(.16,1,.3,1);
      will-change:transform;
      contain:layout style;
      cursor:pointer;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      border-radius:26px;
      background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
      border:var(--ui-border-width) solid var(--line);
      box-shadow:var(--v8-card-shadow);
      transition:box-shadow .42s cubic-bezier(.16,1,.3,1), border-color .42s, background .42s, transform .42s cubic-bezier(.16,1,.3,1);
      pointer-events:none;
    }
    .card::after{
      content:"";
      position:absolute;
      inset:-12px;
      z-index:-3;
      border-radius:34px;
      opacity:0;
      background:radial-gradient(circle at var(--mx,50%) var(--my,25%),rgba(255,255,255,.22),transparent 32%),linear-gradient(135deg,rgba(255,126,182,.13),rgba(124,92,255,.10),rgba(70,217,255,.08));
      filter:blur(10px);
      transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
      pointer-events:none;
    }
    .card:hover{z-index:120;transform:translateY(var(--v8-card-lift)) scale(var(--v8-card-scale)) translateZ(0);filter:saturate(1.04)}
    .card:hover::before{box-shadow:var(--v8-card-shadow-hover);border-color:rgba(255,126,182,.46);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.085));transform:translateY(-2px)}
    .card:hover::after{opacity:1;transform:scale(1.04)}
    .card-glow{position:absolute;inset:0;border-radius:26px;background:radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.24),transparent 32%);opacity:0;z-index:7;pointer-events:none;transition:opacity .32s cubic-bezier(.16,1,.3,1)}
    .card:hover .card-glow{opacity:1}
    .cover-wrap{
      position:absolute!important;
      inset:0!important;
      aspect-ratio:auto!important;
      border-radius:26px!important;
      overflow:hidden!important;
      transform:none!important;
      background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.17));
      z-index:0;
    }
    .cover,.no-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:26px;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .48s cubic-bezier(.16,1,.3,1)}
    .card:hover .cover{transform:scale(1.075);filter:saturate(1.13) contrast(1.04)}
    .cover-wrap::after{content:"";position:absolute;inset:0;height:auto;background:linear-gradient(180deg,rgba(9,10,16,.04) 0%,rgba(9,10,16,.10) 34%,rgba(9,10,16,.62) 66%,rgba(9,10,16,.94) 100%);pointer-events:none;z-index:1}
    .status-ribbon,.rate{z-index:5}
    .card-body{
      position:absolute!important;
      left:0;right:0;bottom:0;
      height:var(--v8-card-body)!important;
      margin:0!important;
      padding:14px 14px 13px!important;
      z-index:4;
      border-radius:0 0 26px 26px!important;
      overflow:hidden!important;
      background:linear-gradient(180deg,rgba(33,34,52,.72),rgba(18,19,30,.92))!important;
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      transition:height .42s cubic-bezier(.16,1,.3,1), background .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
      box-shadow:0 -16px 34px rgba(0,0,0,.18);
    }
    [data-theme="light"] .card-body{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(247,244,253,.94))!important;box-shadow:0 -16px 34px rgba(82,58,105,.10)}
    .card:hover .card-body{
      height:min(var(--v8-card-body-hover), calc(100% - 20px))!important;
      margin:0!important;
      transform:translateY(-1px);
      border-radius:22px!important;
      background:linear-gradient(180deg,rgba(37,38,58,.88),rgba(18,19,30,.96))!important;
    }
    [data-theme="light"] .card:hover .card-body{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,244,253,.99))!important}
    .name{font-size:15px;font-weight:930;letter-spacing:-.025em;line-height:1.28;margin-bottom:7px;min-height:2.55em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
    .meta{min-height:1.45em;display:flex;gap:7px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;color:var(--muted);font-size:12px}.meta span{min-width:0;text-overflow:ellipsis;overflow:hidden}.meta .pill{padding:2px 7px;font-size:11px;flex:0 0 auto}
    .comment{position:relative;margin-top:9px;color:var(--soft);font-size:13px;line-height:1.52;display:block!important;white-space:pre-wrap;max-height:calc(1.52em * var(--comment-lines));min-height:calc(1.52em * min(var(--comment-lines),2));overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.70) 76%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.70) 76%,rgba(0,0,0,0));transition:max-height .42s cubic-bezier(.16,1,.3,1), opacity .28s cubic-bezier(.16,1,.3,1)}
    .comment.no-comment{font-style:italic;color:var(--muted);opacity:.82;min-height:0!important}
    .card:hover .comment{max-height:calc(1.52em * 7);-webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.74) 91%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.74) 91%,rgba(0,0,0,0))}
    /* Expanded comment that fully fits (≤7 lines) doesn't reach the bottom → no fade */
    .card:hover .comment.cmt-fits-hover{-webkit-mask-image:none!important;mask-image:none!important}
    .mini-tags{display:flex;gap:6px;flex-wrap:nowrap;margin-top:10px;height:24px;max-height:24px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,0));transition:height .38s cubic-bezier(.16,1,.3,1), max-height .38s cubic-bezier(.16,1,.3,1)}
    .card:hover .mini-tags{flex-wrap:wrap;height:56px;max-height:56px;-webkit-mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,0))}
    .mini-tags span{height:23px;line-height:22px;font-size:11px;color:var(--muted);border:var(--ui-border-width) solid var(--line);border-radius:999px;padding:0 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto;background:rgba(255,255,255,.045)}
    [data-motion="off"] .card,[data-motion="off"] .card::before,[data-motion="off"] .card::after,[data-motion="off"] .card-body,[data-motion="off"] .cover,[data-motion="off"] .comment,[data-motion="off"] .mini-tags{transition:none!important;animation:none!important}
    [data-motion="off"] .card:hover{transform:none!important;filter:none!important}
    [data-motion="off"] .card:hover .card-body{height:var(--v8-card-body)!important;border-radius:0 0 26px 26px!important;transform:none!important}
    [data-motion="off"] .card:hover .mini-tags{flex-wrap:nowrap!important;height:24px!important;max-height:24px!important}
    [data-motion="off"] .card:hover .comment{max-height:calc(1.52em * var(--comment-lines))!important}

    .drawer{
      left:50%;top:50%;right:auto;bottom:auto;
      width:min(1180px,calc(100vw - 36px));
      max-height:min(920px,calc(100vh - 36px));
      transform:translate(-50%,-50%) scale(.96);
      opacity:0;
      border-radius:32px;
      overflow:hidden;
      display:none;
      flex-direction:column;
      background:rgba(17,18,30,.80);
      border:var(--ui-border-width) solid var(--line);
      box-shadow:0 42px 140px rgba(0,0,0,.54);
      backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
    }
    [data-theme="light"] .drawer{background:rgba(255,255,255,.84)}
    .drawer.show{display:flex;opacity:1;animation:detailPopV8 .42s cubic-bezier(.16,1,.3,1) both}.drawer.closing{display:flex;animation:detailOutV8 .22s ease both}.drawer-mask.show{display:block;background:rgba(0,0,0,.56);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
    @keyframes detailPopV8{from{opacity:0;transform:translate(-50%,-47%) scale(.91);filter:blur(16px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
    @keyframes detailOutV8{from{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,-47%) scale(.965);filter:blur(12px)}}
    .detail-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.detail-bg img{position:absolute;inset:-50px;width:calc(100% + 100px);height:calc(100% + 100px);object-fit:cover;filter:blur(44px) saturate(1.35);opacity:.26;transform:scale(1.04)}.detail-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,10,16,.90) 0%,rgba(12,14,24,.72) 44%,rgba(12,14,24,.90) 100%),radial-gradient(circle at 20% 10%,rgba(70,217,255,.16),transparent 32%),radial-gradient(circle at 80% 0%,rgba(255,126,182,.16),transparent 30%)}
    [data-theme="light"] .detail-bg::after{background:linear-gradient(90deg,rgba(245,241,251,.90) 0%,rgba(255,255,255,.78) 44%,rgba(245,241,251,.92) 100%),radial-gradient(circle at 20% 10%,rgba(70,217,255,.11),transparent 32%),radial-gradient(circle at 80% 0%,rgba(255,126,182,.12),transparent 30%)}
    .detail-v8{position:relative;z-index:1;display:grid;flex:1;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:24px;padding:28px;min-height:0;overflow:hidden}
    /* Each column scrolls independently so the short left pane doesn't wait for the long right pane.
       Left pane sizes to its content (fully shown when it fits) and only scrolls if it ever exceeds.
       Scrollbars stay hidden in the detail drawer, matching the previous look. */
    .detail-side-v8{align-self:start;max-height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:grid;align-content:start;gap:16px;padding-bottom:6px}
    .detail-side-v8::-webkit-scrollbar,.detail-main-v8::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
    .detail-poster-frame{border-radius:30px;padding:5px;background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.06));border:var(--ui-border-width) solid rgba(255,255,255,.16);box-shadow:0 28px 88px rgba(0,0,0,.42)}
    .detail-poster-frame img,.detail-poster-frame .drawer-cover{display:block;width:100%;aspect-ratio:3/4;border-radius:24px;object-fit:cover;background:rgba(255,255,255,.08)}
    .detail-actions-v8{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-actions-v8 .btn{min-width:0;padding:11px 12px;border-radius:16px}.detail-actions-v8 .wide{grid-column:1/-1}
    .detail-main-v8{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:6px}
    /* Children must not shrink, or the hero (which has an explicit min-height) gets compressed below its
       content and its bottom-anchored title/kicker get clipped by overflow:hidden. */
    .detail-main-v8 > *{flex:0 0 auto;min-width:0}
    .detail-hero-v8{min-height:200px;border:0;border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.035));padding:30px;display:grid;align-content:end;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
    .detail-hero-v8::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,18,.72),rgba(10,11,18,.28),transparent);pointer-events:none}[data-theme="light"] .detail-hero-v8::before{background:linear-gradient(90deg,rgba(255,255,255,.70),rgba(255,255,255,.32),transparent)}
    .detail-hero-content{position:relative;z-index:1;max-width:780px}.detail-kicker-v8{display:inline-flex;align-items:center;width:max-content;margin-bottom:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.11);border:var(--ui-border-width) solid var(--line);font-size:12px;font-weight:850;color:var(--soft);letter-spacing:.06em}.detail-hero-v8 h2{font-size:clamp(32px,5vw,66px);line-height:.95;letter-spacing:-.06em;margin:0 0 16px;text-shadow:0 6px 24px rgba(0,0,0,.24);text-wrap:balance}.detail-pills-v8{display:flex;gap:8px;flex-wrap:wrap}.detail-close-v8{position:absolute;right:44px;top:44px;z-index:5}
    .detail-grid-v8{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(260px,.84fr);gap:18px}.detail-stack{display:grid;gap:18px;align-content:start}.info-card{border:var(--ui-border-width) solid var(--line);border-radius:24px;background:rgba(255,255,255,.072);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);padding:17px;min-width:0}.info-card h3{margin:0 0 12px;font-size:14px;letter-spacing:.03em;color:var(--soft)}.longtext{white-space:pre-wrap;line-height:1.76;border:var(--ui-border-width) solid var(--line);border-radius:18px;padding:15px;background:rgba(0,0,0,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.big-comment{font-size:15.5px;max-height:none}.tag-cloud{display:flex;gap:8px;flex-wrap:wrap}.tag-cloud .tag-chip{height:auto;max-width:100%;white-space:normal;line-height:1.25}.kv{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px 12px;font-size:14px;margin:0}.kv div:nth-child(odd){color:var(--muted);font-weight:800}.kv div:nth-child(even){min-width:0;word-break:break-word}
    .score-card-v8{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(255,126,182,.12),rgba(124,92,255,.10));padding:20px;border:var(--ui-border-width) solid rgba(255,209,102,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.score-card-v8::after{content:"";position:absolute;right:-46px;top:-58px;width:170px;height:170px;border-radius:999px;background:radial-gradient(circle,rgba(255,209,102,.25),transparent 68%)}.score-row-v8{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:16px}.score-big-v8{font-size:70px;font-weight:970;letter-spacing:-.09em;line-height:.78;background:linear-gradient(135deg,var(--warn),#ff8fab,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}.score-big-v8 small{font-size:18px;color:var(--muted);-webkit-text-fill-color:var(--muted);letter-spacing:0}.score-word-v8{font-size:12px;color:var(--muted);font-weight:850;text-transform:uppercase;letter-spacing:.12em;text-align:right}.stars-v8{display:flex;gap:3px;margin:17px 0 12px}.stars-v8 span{font-size:18px;color:rgba(255,255,255,.24);text-shadow:0 0 0 transparent}.stars-v8 span.on{color:var(--warn);text-shadow:0 0 16px rgba(255,209,102,.42)}[data-theme="light"] .stars-v8 span{color:rgba(36,32,51,.22)}[data-theme="light"] .stars-v8 span.on{color:#f4a000}.score-track-v8{height:13px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}.score-fill-v8{height:100%;width:var(--score-pct);border-radius:inherit;background:linear-gradient(90deg,var(--warn),#ff8fab,var(--b));box-shadow:0 0 22px rgba(255,126,182,.34);transition:width .55s cubic-bezier(.16,1,.3,1)}.score-caption-v8{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}
    @media (max-width: 980px){.detail-v8{grid-template-columns:1fr}.detail-side-v8{position:relative;grid-template-columns:150px minmax(0,1fr);align-items:start}.detail-poster-frame{max-width:150px}.detail-grid-v8{grid-template-columns:1fr}.detail-actions-v8{grid-template-columns:1fr 1fr}.score-big-v8{font-size:52px}}
    @media (max-width: 680px){.poster-grid{gap:22px 14px}.card:hover{transform:none}.card:hover .card-body{height:var(--v8-card-body)!important;border-radius:0 0 26px 26px!important}.card:hover .mini-tags{flex-wrap:nowrap;height:24px;max-height:24px}.drawer{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:24px}.detail-v8{padding:14px;gap:14px}.detail-side-v8{grid-template-columns:112px minmax(0,1fr)}.detail-poster-frame{max-width:112px}.detail-hero-v8{min-height:170px;padding:20px}.detail-hero-v8 h2{font-size:clamp(28px,10vw,42px)}.detail-grid-v8{gap:14px}}

  

    /* v0.9 detail progress + score refinement */
    .detail-hero-content{max-width:900px!important}
    .episode-strip-v9{position:relative;z-index:2;margin-top:16px;display:grid;gap:9px;max-width:760px}
    .episode-strip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--soft);font-size:12px;font-weight:850;letter-spacing:.04em}
    .episode-grid-v9{display:grid;grid-template-columns:repeat(var(--ep-cols, 24), minmax(7px, 1fr));gap:5px;padding:10px;border:var(--ui-border-width) solid rgba(255,255,255,.14);border-radius:16px;background:rgba(0,0,0,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    [data-theme="light"] .episode-grid-v9{background:rgba(255,255,255,.36);border-color:rgba(54,43,77,.13)}
    .ep-cell-v9{height:10px;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .18s ease, background .18s ease, box-shadow .18s ease}
    [data-theme="light"] .ep-cell-v9{background:rgba(54,43,77,.16)}
    .ep-cell-v9.watched{background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 14px rgba(255,126,182,.24)}
    .ep-cell-v9:hover{transform:translateY(-2px) scale(1.18)}
    .episode-grid-v9.too-many{grid-template-columns:repeat(32, minmax(5px, 1fr))}
    .episode-grid-v9.too-many .ep-cell-v9{height:8px}
    .episode-strip-v9.compact .episode-grid-v9{grid-template-columns:repeat(16,minmax(6px,1fr))}
    .score-card-v8{padding:18px!important;overflow:hidden!important}
    .score-row-v8{align-items:center!important}
    .score-big-v8{font-size:62px!important;line-height:1!important;letter-spacing:-.055em!important;padding-bottom:4px;min-height:70px;display:flex;align-items:flex-end;gap:2px}
    .score-big-v8 small{font-size:16px!important;margin-bottom:8px;letter-spacing:0!important}
    .score-empty-v9{font-size:30px!important;letter-spacing:0!important;color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important;background:none!important;line-height:1.15!important;min-height:auto!important;padding:0!important}
    .score-sub-v9{position:relative;z-index:1;margin:14px 0 4px;display:grid;gap:8px}
    .score-sub-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
    .score-sub-row b{color:var(--soft);font-size:13px}.sub-track{height:7px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden}.sub-fill{height:100%;width:var(--sub-pct);background:linear-gradient(90deg,rgba(70,217,255,.72),rgba(124,92,255,.72));border-radius:inherit}.score-caption-v8{margin-top:10px!important}
    .detail-grid-v8{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important}
    .detail-main-v8{gap:16px!important}.detail-hero-v8{padding:28px!important}.detail-hero-v8 h2{margin-bottom:12px!important}
    /* Right side: banner + columns scroll together; once the banner is scrolled out, pin the 2-col grid and let each column scroll independently with their tops aligned. .cols-pinned is toggled by JS at the threshold (see openDrawer). */
    .detail-grid-v8.cols-pinned{position:sticky;top:0;height:100%;}
    .detail-grid-v8.cols-pinned > .detail-stack{max-height:100%;overflow-y:auto;scrollbar-width:none;}
    .detail-grid-v8.cols-pinned > .detail-stack::-webkit-scrollbar{display:none;}
    @media (max-width:980px){.detail-grid-v8.cols-pinned{position:static;height:auto;}.detail-grid-v8.cols-pinned > .detail-stack{max-height:none;overflow:visible;}}
    /* Infobox card collapse: show ~5 rows, fold the rest behind a translucent "查看更多" gradient bar */
    .infobox-extra{max-height:0;overflow:hidden;transition:max-height .3s ease}
    .infobox-check:checked ~ .infobox-extra{max-height:none}
    .infobox-toggle{display:block;text-align:center;margin-top:6px;padding:10px 0 6px;cursor:pointer;font-size:12px;font-weight:700;color:var(--soft);border-radius:14px;user-select:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a) 14%,transparent))}
    .infobox-toggle:hover{color:var(--text)}
    .infobox-toggle::after{content:"查看更多 ▾"}
    .infobox-check:checked ~ .infobox-toggle{background:none}
    .infobox-check:checked ~ .infobox-toggle::after{content:"收起 ▴"}
    @media (max-width: 980px){.detail-grid-v8{grid-template-columns:1fr!important}.episode-grid-v9{grid-template-columns:repeat(var(--ep-cols-mobile, 18), minmax(7px,1fr))}.score-big-v8{font-size:50px!important;min-height:58px}.score-sub-row{grid-template-columns:64px 1fr auto}}
    @media (max-width: 680px){.episode-grid-v9{grid-template-columns:repeat(12,minmax(6px,1fr));gap:4px}.ep-cell-v9{height:8px}.detail-hero-v8{padding:18px!important}.score-empty-v9{font-size:24px!important}}


    /* v0.12 user requested fixes: no seam, hover panel flush, shorter per-episode cells, 16:9 detail */
    :root{
      --v12-detail-w: min(1280px, calc(100vw - 36px));
      --v12-detail-h: min(672px, calc(100vh - 36px));
    }

    /* 卡片：只覆盖，不撑开；遮罩层向下重叠 1px，消除海报与文字遮罩之间的细缝 */
    .card{aspect-ratio:var(--v8-card-ratio)!important;}
    .card::before{overflow:hidden;}
    .cover-wrap{inset:0!important;border-radius:26px!important;}
    .cover-wrap::after{bottom:-2px!important;height:auto!important;background:linear-gradient(180deg,rgba(9,10,16,.02) 0%,rgba(9,10,16,.08) 36%,rgba(9,10,16,.58) 65%,rgba(9,10,16,.96) 100%)!important;}
    .card-body{
      left:0!important;
      right:0!important;
      bottom:-1px!important;
      width:100%!important;
      height:calc(var(--v8-card-body) + 2px)!important;
      padding:14px 14px 18px!important;
      border-radius:0 0 26px 26px!important;
      box-shadow:0 -18px 34px rgba(0,0,0,.18)!important;
    }
    .card:hover .card-body{
      height:min(var(--v8-card-body-hover), calc(100% - 18px))!important;
      bottom:-1px!important;
      transform:none!important;
      border-radius:0 0 26px 26px!important;
      box-shadow:0 -20px 44px rgba(0,0,0,.24)!important;
    }
    [data-theme="light"] .card-body{box-shadow:0 -18px 34px rgba(82,58,105,.10)!important;}
    [data-theme="light"] .card:hover .card-body{box-shadow:0 -20px 44px rgba(82,58,105,.14)!important;}
    /* Unified soft bottom: a transparent->dark vignette over the card body's bottom so comment text
       and tag pills both sink into the body's bottom color, without per-element (pill-breaking) fades. */
    .card-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;z-index:5;background:linear-gradient(180deg,rgba(18,19,30,0) 30%,rgba(18,19,30,1) 82%)}
    [data-theme="light"] .card-body::after{background:linear-gradient(180deg,rgba(247,244,253,0) 30%,rgba(247,244,253,1) 82%)}
    /* Hover expands the body to show more text, so keep the vignette soft (not fully opaque) there. */
    .card:hover .card-body::after{background:linear-gradient(180deg,rgba(18,19,30,0),rgba(18,19,30,.5) 70%,rgba(18,19,30,.85))}
    [data-theme="light"] .card:hover .card-body::after{background:linear-gradient(180deg,rgba(247,244,253,0),rgba(247,244,253,.5) 70%,rgba(247,244,253,.9))}

    /* 标签离底部留出距离；默认与悬停都不露半截边框 */
    .mini-tags{
      /* base 12px, plus 0.6em extra ONLY when comment preview lines = 0 (drops tags a touch without overflowing the card) */
      margin-top:calc(12px + 0.6em * max(0, 1 - var(--comment-lines)))!important;
      margin-bottom:4px!important;
      height:24px!important;
      max-height:24px!important;
      padding-bottom:0!important;
      align-content:flex-start;
    }
    .card:hover .mini-tags{
      /* expanded state: pull tags up closer to the comment (override the resting margin) */
      margin-top:6px!important;
      height:54px!important;
      max-height:54px!important;
      padding-bottom:2px!important;
    }
    .mini-tags span{height:22px!important;line-height:21px!important;}
    /* Keep the first tag row from being top-clipped: top-align the pills and give them a top buffer. */
    .mini-tags{align-items:flex-start!important;align-content:flex-start!important;padding-top:4px!important;height:28px!important;max-height:28px!important;}
    .card:hover .mini-tags{height:62px!important;max-height:62px!important;}

    /* 详情页：外框接近 16:9，内部滚动但隐藏滚动条 */
    .drawer{
      width:var(--v12-detail-w)!important;
      height:auto!important;
      aspect-ratio:16/9!important;
      max-height:var(--v12-detail-h)!important;
      max-width:calc(100vw - 36px)!important;
    }
    @media (min-aspect-ratio: 16/9){
      .drawer{height:var(--v12-detail-h)!important;width:calc(var(--v12-detail-h) * 16 / 9)!important;}
    }
    @media (max-aspect-ratio: 16/9){
      .drawer{width:var(--v12-detail-w)!important;height:calc(var(--v12-detail-w) * 9 / 16)!important;}
    }
    .detail-v8{overflow:hidden!important;padding-bottom:18px!important;}
    /* Soften the bottom of both inner scroll columns: rounded clip + fade-out so overflowing content
       no longer ends in a flat hard cut. padding-bottom matches the fade band so the last item/buttons
       stay fully visible when scrolled to the end. */
    .detail-main-v8,
    .detail-side-v8{
      padding-bottom:24px!important;
      border-radius:0 0 20px 20px;
      -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px), transparent);
      mask-image:linear-gradient(180deg,#000 calc(100% - 24px), transparent);
    }
    /* Single-column layout on narrow screens: let the whole drawer scroll as one again. */
    @media (max-width: 980px){
      .detail-v8{overflow:auto!important;}
      .detail-side-v8,.detail-main-v8{overflow:visible!important;min-height:auto!important;padding-right:0!important;-webkit-mask-image:none!important;mask-image:none!important;padding-bottom:6px!important;}
    }

    /* 进度格：整体宽度保持，只缩短每个单集条条 */
    .episode-strip-v9{max-width:760px!important;}
    .episode-grid-v9{
      width:100%!important;
      grid-template-columns:repeat(var(--ep-cols, 24), minmax(7px, 1fr))!important;
      justify-items:center!important;
    }
    .episode-grid-v9.too-many{grid-template-columns:repeat(32, minmax(5px, 1fr))!important;}
    .episode-strip-v9.compact .episode-grid-v9{grid-template-columns:repeat(16,minmax(6px,1fr))!important;}
    .ep-cell-v9{
      width:68%!important;
      min-width:5px!important;
      justify-self:center!important;
      height:9px!important;
    }
    .episode-grid-v9.too-many .ep-cell-v9{height:7px!important;width:62%!important;}
    @media (max-width: 980px){
      .drawer{width:calc(100vw - 20px)!important;height:auto!important;max-height:calc(100vh - 36px)!important;aspect-ratio:auto!important;}
      .detail-side-v8{display:none!important;}
      .episode-grid-v9{grid-template-columns:repeat(var(--ep-cols-mobile, 18), minmax(7px,1fr))!important;}
    }
    @media (max-width: 680px){
      .episode-grid-v9{grid-template-columns:repeat(12,minmax(6px,1fr))!important;gap:4px!important;}
      .ep-cell-v9{height:7px!important;width:64%!important;}
    }


    /* v0.13 detail title + status readability + episode cell tuning */
    .detail-hero-content{
      max-width:min(920px, 94%)!important;
    }
    .detail-hero-v8 h2{
      font-size:clamp(28px,3.75vw,52px)!important;
      line-height:1.06!important;
      letter-spacing:-.045em!important;
      margin:0 0 14px!important;
      max-width:900px!important;
      text-wrap:pretty!important;
      overflow-wrap:normal!important;
      word-break:normal!important;
    }
    .status-ribbon{
      color:#fff!important;
      background:rgba(30,24,43,.82)!important;
      text-shadow:0 1px 3px rgba(0,0,0,.55)!important;
      box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12)!important;
    }
    [data-theme="light"] .status-ribbon{
      color:#fff!important;
      background:rgba(42,32,62,.76)!important;
      text-shadow:0 1px 3px rgba(0,0,0,.55)!important;
    }
    .episode-grid-v9{
      gap:3px!important;
      column-gap:3px!important;
      row-gap:4px!important;
    }
    .ep-cell-v9{
      width:54%!important;
      height:8px!important;
      border-radius:999px!important;
    }
    .episode-grid-v9.too-many .ep-cell-v9{
      width:50%!important;
      height:6px!important;
    }
    .episode-strip-v9.compact .ep-cell-v9{
      width:52%!important;
      height:7px!important;
    }
    @media (max-width: 680px){
      .detail-hero-v8 h2{font-size:clamp(26px,8.8vw,40px)!important;line-height:1.08!important;}
      .episode-grid-v9{gap:3px!important;}
      .ep-cell-v9{width:52%!important;height:7px!important;}
    }

  

    /* v0.14 episode grid vertical alignment fix */
    .episode-grid-v9{
      grid-auto-flow:row!important;
      grid-template-columns:repeat(var(--ep-cols,24), 18px)!important;
      justify-content:start!important;
      justify-items:center!important;
      align-items:center!important;
      gap:4px 5px!important;
      row-gap:4px!important;
      column-gap:5px!important;
      padding:11px 20px!important;
      overflow:hidden!important;
    }
    .episode-grid-v9.too-many{
      grid-template-columns:repeat(32, 14px)!important;
      gap:3px 4px!important;
      row-gap:3px!important;
      column-gap:4px!important;
    }
    .episode-strip-v9.compact .episode-grid-v9{
      grid-template-columns:repeat(24, 14px)!important;
      gap:3px 4px!important;
    }
    .ep-cell-v9{
      width:12px!important;
      height:7px!important;
      min-width:0!important;
      justify-self:center!important;
      align-self:center!important;
      border-radius:999px!important;
      display:block!important;
    }
    .episode-grid-v9.too-many .ep-cell-v9,
    .episode-strip-v9.compact .ep-cell-v9{
      width:10px!important;
      height:6px!important;
    }
    @media (max-width: 980px){
      .episode-grid-v9{
        grid-template-columns:repeat(var(--ep-cols-mobile,18), 16px)!important;
        gap:4px 5px!important;
      }
      .episode-grid-v9.too-many,
      .episode-strip-v9.compact .episode-grid-v9{
        grid-template-columns:repeat(18, 13px)!important;
        gap:3px 4px!important;
      }
    }
    @media (max-width: 680px){
      .episode-grid-v9{
        grid-template-columns:repeat(12, 15px)!important;
        gap:3px 4px!important;
        padding:9px 14px!important;
      }
      .ep-cell-v9{width:10px!important;height:6px!important;}
    }


    /* v0.15 episode strip background auto-fit
       背景玻璃层跟随实际格子宽度，不再铺满整条导致右侧空白。 */
    .episode-strip-v9{
      align-items:start!important;
      justify-items:start!important;
      max-width:100%!important;
    }
    .episode-grid-v9{
      display:inline-grid!important;
      width:max-content!important;
      max-width:100%!important;
      box-sizing:border-box!important;
      justify-self:start!important;
      justify-content:start!important;
    }
    @supports (width: fit-content){
      .episode-grid-v9{width:fit-content!important;}
    }
    .episode-grid-v9.too-many,
    .episode-strip-v9.compact .episode-grid-v9{
      width:max-content!important;
      max-width:100%!important;
    }
    @supports (width: fit-content){
      .episode-grid-v9.too-many,
      .episode-strip-v9.compact .episode-grid-v9{width:fit-content!important;}
    }
    @media (max-width: 680px){
      .episode-strip-v9{max-width:100%!important;}
      .episode-grid-v9{max-width:100%!important;}
    }

  
  .hist-change{margin-top:4px;color:var(--text-muted);line-height:1.45}.hist-change span{color:var(--text);font-weight:700}
  .login-shell{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 18% 18%,rgba(255,126,182,.24),transparent 30rem),radial-gradient(circle at 82% 18%,rgba(70,217,255,.18),transparent 28rem),linear-gradient(135deg,var(--bg),var(--bg2));}
  .login-shell.hidden{display:none!important}
  .login-card{width:min(430px,calc(100vw - 32px));border:1px solid var(--line);border-radius:24px;background:rgba(24,25,40,.78);box-shadow:0 34px 100px rgba(0,0,0,.42);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:24px}
  [data-theme="light"] .login-card{background:rgba(255,255,255,.84)}
  .login-card h2{margin:0 0 8px;font-size:28px;letter-spacing:-.04em}
  .login-card p{margin:0 0 18px;color:var(--muted);line-height:1.6}
  .auth-status{min-height:20px;margin-top:12px;color:var(--muted);font-size:13px;line-height:1.5}
  .password-panel{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.055);padding:14px}
  .password-panel h3{margin:0 0 8px;font-size:15px;color:var(--soft)}
  #syncMiniBar{display:none;align-items:center;gap:9px;padding:7px 13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;color:var(--text);font-size:12px;font-weight:700;white-space:nowrap;transition:background .18s ease,border-color .18s ease;}
  #syncMiniBar.show{display:inline-flex;}
  #syncMiniBar:hover{background:rgba(255,126,182,.12);border-color:rgba(255,126,182,.32);}
  .smi-ring{width:15px;height:15px;border-radius:999px;flex:none;border:2px solid rgba(255,126,182,.25);border-top-color:#ff7eb6;animation:smiSpin .8s linear infinite;}
  #syncMiniBar.smi-done .smi-ring{border-color:rgba(101,230,165,.4);border-top-color:#65e6a5;animation:none;}
  @keyframes smiSpin{to{transform:rotate(360deg)}}
  .smi-body{min-width:0;display:flex;align-items:center;gap:8px;}
  .smi-label{white-space:nowrap;}
  .smi-track{height:4px;width:64px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;flex:none;}
  .smi-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--a),var(--b));transition:width .28s cubic-bezier(.16,1,.3,1);}
  #loadingScreen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 18% 18%,rgba(255,126,182,.22),transparent 34rem),radial-gradient(circle at 80% 8%,rgba(70,217,255,.16),transparent 28rem),linear-gradient(135deg,#10111a,#151725);transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s;pointer-events:auto}
  #loadingScreen.done{opacity:0;visibility:hidden;pointer-events:none}
  .ld-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
  #loadingScreen .bangumi-logo{width:72px;height:72px;border-radius:24px;pointer-events:none;cursor:default;animation:ldPulse 2.4s ease-in-out infinite}
  #loadingScreen .bangumi-logo svg{width:50px;height:50px}
  @keyframes ldPulse{0%,100%{box-shadow:0 18px 45px rgba(255,126,182,.25),inset 0 1px 0 rgba(255,255,255,.78)}50%{box-shadow:0 26px 68px rgba(255,126,182,.55),0 0 36px rgba(124,92,255,.22),inset 0 1px 0 rgba(255,255,255,.9)}}
  .ld-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:#f7f3ff}
  .ld-dots{display:flex;gap:8px;align-items:center}
  .ld-dots span{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,#ff7eb6,#7c5cff);animation:ldDot 1.2s ease-in-out infinite}
  .ld-dots span:nth-child(2){animation-delay:.18s}.ld-dots span:nth-child(3){animation-delay:.36s}
  @keyframes ldDot{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}
  .settings-tabs{display:flex;gap:6px;margin:16px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);}
  .settings-tab{padding:8px 18px;border-radius:14px;background:transparent;border:1px solid transparent;color:var(--muted);font-weight:700;font-size:14px;transition:.18s;}
  .settings-tab:hover{background:rgba(255,255,255,.06);color:var(--soft);}
  .settings-tab.active{background:linear-gradient(135deg,rgba(255,126,182,.18),rgba(124,92,255,.16));border-color:rgba(255,126,182,.30);color:var(--text);}
  .settings-pane{display:none;padding-top:16px;}
  .settings-pane.active{display:block;}
  .settings-footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}

  /* Sync tab: card-grouped layout (scoped so it never touches the appearance tab) */
  #stab-sync .sync-master{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px;}
  #autoSyncOptions{display:grid;gap:14px;margin-top:16px;}
  #stab-sync .setting-card input[type=number]:not(.btn),#stab-sync .setting-card input[type=text]:not(.btn),#stab-sync .setting-card select{background:rgba(0,0,0,.16);border:1px solid var(--line);border-radius:14px;padding:10px 12px;outline:0;color:var(--text);}
  #stab-sync .setting-card input:not(.btn):focus,#stab-sync .setting-card select:focus{border-color:rgba(255,126,182,.6);box-shadow:0 0 0 4px rgba(255,126,182,.12);}
  #stab-sync .setting-card input:disabled,#stab-sync .setting-card select:disabled{opacity:.55;cursor:not-allowed;}
  #stab-sync .sync-cover{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  /* 高级 tab: group loose toggles/inputs into cards, matching the 同步/外观 tabs */
  .advanced-grid{display:grid;gap:14px;margin-top:4px;}
  #stab-advanced .setting-card > .field{margin:12px 0 0;}
  #stab-advanced .setting-card > .pill{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
  #stab-advanced .setting-card > .pill + .pill{margin-top:10px;}
  /* Collapsible "网络与镜像" card (native <details>, collapsed by default) */
  details.net-collapse > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;margin:0;}
  details.net-collapse > summary::-webkit-details-marker{display:none;}
  details.net-collapse > summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s ease;margin-left:auto;}
  details.net-collapse[open] > summary::after{transform:rotate(45deg);}
  details.net-collapse > summary:hover::after{border-color:var(--text);}
  #stab-sync .selectish.disabled{opacity:.55;pointer-events:none;}

  /* Home toolbar split into left (summary/sync pills) and right (action buttons) groups */
  .filters{justify-content:space-between;}
  .filters-left,.filters-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0;}

  /* Theme color (accent). Palettes override --a/--b/--c (default pink = original :root values).
     Derived --accent-* (color-mix from --a/--b) recolor selection/hover/focus/active states, which in
     this project were hardcoded pink — that's why changing the accent only moved buttons before. */
  [data-accent="wisteria"]{--a:#a78bfa;--b:#8b5cf6;--c:#c084fc;--tag-my:#a78bfa;--tag-public:#34d399;}
  [data-accent="cyan"]{--a:#38bdf8;--b:#06b6d4;--c:#60a5fa;--tag-my:#38bdf8;--tag-public:#f472b6;}
  [data-accent="amber"]{--a:#fbbf24;--b:#f59e0b;--c:#fb7185;--tag-my:#f59e0b;--tag-public:#06b6d4;}
  [data-accent="mint"]{--a:#34d399;--b:#10b981;--c:#22d3ee;--tag-my:#10b981;--tag-public:#a78bfa;}
  :root{--accent-bg:color-mix(in srgb,var(--a) 16%,transparent);--accent-bg-2:color-mix(in srgb,var(--b) 14%,transparent);--accent-line:color-mix(in srgb,var(--a) 42%,transparent);--accent-glow:color-mix(in srgb,var(--a) 22%,transparent);}
  /* My/Public tag chips: upstream v0.30.0 dual-tone — colored text/border/kind + hover/active, follows accent. */
  .tag-chip.my-tag{border-color:color-mix(in srgb,var(--tag-my) 56%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-my) 16%,transparent),color-mix(in srgb,var(--tag-my) 7%,transparent))!important;color:color-mix(in srgb,var(--tag-my) 24%,var(--text))!important;}
  .tag-chip.public-tag{border-color:color-mix(in srgb,var(--tag-public) 62%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-public) 17%,transparent),color-mix(in srgb,var(--tag-public) 7%,transparent))!important;color:color-mix(in srgb,var(--tag-public) 26%,var(--text))!important;}
  .tag-chip.my-tag .tag-kind{color:color-mix(in srgb,var(--tag-my) 62%,var(--muted))!important;opacity:1!important;}
  .tag-chip.public-tag .tag-kind{color:color-mix(in srgb,var(--tag-public) 66%,var(--muted))!important;opacity:1!important;}
  .nav button:hover,.nav button.active,.segmented button.active,.settings-tab.active,.select-menu button:hover,.select-menu button.active{background:linear-gradient(135deg,var(--accent-bg),var(--accent-bg-2))!important;border-color:var(--accent-line)!important;box-shadow:0 10px 24px var(--accent-glow)!important;color:var(--text)!important;}
  .tag-chip.my-tag:hover{border-color:color-mix(in srgb,var(--tag-my) 78%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-my) 23%,transparent),color-mix(in srgb,var(--tag-my) 10%,transparent))!important;box-shadow:0 10px 24px color-mix(in srgb,var(--tag-my) 13%,transparent)!important;}
  .tag-chip.public-tag:hover{border-color:color-mix(in srgb,var(--tag-public) 82%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-public) 24%,transparent),color-mix(in srgb,var(--tag-public) 10%,transparent))!important;box-shadow:0 10px 24px color-mix(in srgb,var(--tag-public) 14%,transparent)!important;}
  .tag-chip.my-tag.active{border-color:color-mix(in srgb,var(--tag-my) 88%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-my) 34%,transparent),color-mix(in srgb,var(--tag-my) 16%,transparent))!important;box-shadow:0 12px 26px color-mix(in srgb,var(--tag-my) 18%,transparent)!important;color:var(--text)!important;}
  .tag-chip.public-tag.active{border-color:color-mix(in srgb,var(--tag-public) 90%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--tag-public) 35%,transparent),color-mix(in srgb,var(--tag-public) 16%,transparent))!important;box-shadow:0 12px 26px color-mix(in srgb,var(--tag-public) 18%,transparent)!important;color:var(--text)!important;}
  /* Generic (untyped) tag filter chip still follows accent --c/--line. */
  .tag-chip.active{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,transparent),var(--accent-bg-2))!important;border-color:color-mix(in srgb,var(--c) 38%,transparent)!important;}
  .tag-chip:hover{border-color:var(--accent-line)!important;}
  .search input:focus,.field input:focus,.field textarea:focus,#stab-sync .setting-card input:not(.btn):focus{border-color:var(--accent-line)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 13%,transparent)!important;}
  .card:hover::before{border-color:var(--accent-line)!important;}
  .accent-buttons button{position:relative;padding-left:28px;}
  .accent-buttons button::before{content:"";position:absolute;left:9px;top:50%;width:12px;height:12px;border-radius:999px;transform:translateY(-50%);background:var(--accent-dot,#ff7eb6);box-shadow:0 0 0 2px rgba(255,255,255,.1);}
  .accent-buttons button[data-value="pink"]{--accent-dot:#ff7eb6;}
  .accent-buttons button[data-value="wisteria"]{--accent-dot:#a78bfa;}
  .accent-buttons button[data-value="cyan"]{--accent-dot:#38bdf8;}
  .accent-buttons button[data-value="amber"]{--accent-dot:#fbbf24;}
  .accent-buttons button[data-value="mint"]{--accent-dot:#34d399;}
  /* 同步最近: lightweight purple (follows accent --b), matching upstream */
  #syncBtn.btn.primary,#mSyncRecent.btn.primary{background:color-mix(in srgb,var(--b) 15%,transparent)!important;border-color:color-mix(in srgb,var(--b) 36%,transparent)!important;color:var(--text)!important;box-shadow:none!important;font-weight:850;}
  #syncBtn.btn.primary:hover,#mSyncRecent.btn.primary:hover{background:color-mix(in srgb,var(--b) 22%,transparent)!important;border-color:color-mix(in srgb,var(--b) 48%,transparent)!important;box-shadow:0 14px 30px color-mix(in srgb,var(--b) 14%,transparent)!important;}

  /* Reusable toggle switch (matches the glass/gradient style) */
  .switch-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
  .switch{position:relative;flex:none;width:44px;height:25px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid var(--line);transition:background .2s,border-color .2s;}
  .switch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transition:transform .2s;}
  .switch-input:checked + .switch{background:linear-gradient(135deg,var(--a),var(--b));border-color:transparent;}
  .switch-input:checked + .switch::after{transform:translateX(19px);}
  .switch-input:focus-visible + .switch{box-shadow:0 0 0 4px rgba(255,126,182,.18);}

  /* Access Token: permanently mask the value with dots; copy/cut are also blocked in JS. */
  .masked-input{-webkit-text-security:disc;text-security:disc;}
  #stab-sync .cron-summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}

  .status-ribbon[data-ct="1"]{background:rgba(70,217,255,.55)!important;}
  .status-ribbon[data-ct="2"]{background:rgba(101,230,165,.60)!important;}
  .status-ribbon[data-ct="3"]{background:rgba(255,138,54,.68)!important;}
  .status-ribbon[data-ct="4"]{background:rgba(173,168,193,.52)!important;}
  .status-ribbon[data-ct="5"]{background:rgba(255,107,107,.62)!important;}
  .r18-badge{position:absolute;bottom:calc(var(--v8-card-body) + 7px);right:10px;z-index:6;font-size:10px;font-weight:900;letter-spacing:.05em;padding:3px 8px;border-radius:999px;background:rgba(220,60,60,.48);color:#fff;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:bottom .42s cubic-bezier(.16,1,.3,1);}
  .card:hover .r18-badge{bottom:calc(var(--v8-card-body-hover) + 14px);}
  [data-motion="soft"] .r18-badge{transition:bottom .28s ease;}
  [data-motion="off"] .r18-badge{transition:none!important;}

  /* ===== Mobile UI: off-canvas sidebar drawer + condensed toolbar (desktop unchanged) ===== */
  .menu-btn{display:none}
  /* Icon-only theme toggle (icon injected by applyAppearance). #themeBtnTop is the mobile title-row copy, desktop-hidden. */
  .theme-toggle{align-items:center;justify-content:center}
  .theme-toggle svg{width:18px;height:18px;display:block}
  #themeBtnTop{display:none}
  /* Clickable "有吐槽" stat → toggles the has-comment filter */
  .stat-clickable{cursor:pointer;transition:background .18s,border-color .18s,transform .1s}
  .stat-clickable:hover{border-color:color-mix(in srgb,var(--a) 42%,var(--line));background:rgba(255,255,255,.1)}
  .stat-clickable:active{transform:translateY(1px)}
  .stat-clickable.active{border-color:color-mix(in srgb,var(--a) 55%,transparent);background:color-mix(in srgb,var(--a) 14%,transparent)}
  .stat-clickable.active b{color:var(--a)}
  /* Filter-summary pill = one-click clear (only interactive when a filter is active) */
  #filterSummary.has-active{cursor:pointer;color:var(--text);border-color:color-mix(in srgb,var(--a) 40%,var(--line));transition:background .15s,border-color .15s}
  #filterSummary.has-active::after{content:"✕";margin-left:7px;font-size:11px;opacity:.7}
  #filterSummary.has-active:hover{background:color-mix(in srgb,var(--a) 14%,transparent);border-color:color-mix(in srgb,var(--a) 55%,transparent)}
  .side-backdrop{display:none}
  .drawer-actions{display:none}
  @media (max-width:920px){
    body{overflow:hidden}
    .app{grid-template-columns:1fr;gap:0;padding:0;height:100vh;min-height:0}
    .main{height:100vh;min-height:0;border-radius:0;border:0;box-shadow:none}
    .content{padding:12px}
    .menu-btn{display:inline-flex;align-items:center;justify-content:center;font-size:18px;padding:7px 12px;flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
    .menu-btn.open{transform:rotate(90deg)}
    #themeBtnTop{display:inline-flex;flex:none}
    .side-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:79;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
    .side-backdrop.open{opacity:1;visibility:visible}
    .side{position:fixed;left:0;top:0;bottom:0;width:min(86vw,330px);max-height:none;z-index:80;transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,1,.36,1);overflow-y:auto;overflow-x:hidden;background:linear-gradient(160deg,rgba(28,29,46,.97),rgba(18,19,30,.99));box-shadow:0 0 60px rgba(0,0,0,.55);border-right:1px solid var(--line)}
    [data-theme="light"] .side{background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(247,244,253,.99))}
    .side.open{transform:none}
    .tag-list{flex:none;max-height:138px;overflow:hidden;transition:max-height .28s cubic-bezier(.22,1,.36,1)}
    .tag-list.tags-expanded{max-height:none;overflow:visible}
    .tag-list-more.show{display:block}
    .footer-note{margin-top:18px}
    .drawer-actions{display:grid;gap:8px;margin-top:14px}
    .poster-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
    /* Settings modal: pin header + tabs, only the active pane scrolls — 关闭 stays reachable without a glass-overlap band */
    #settingsModal .modal-card{display:flex;flex-direction:column;overflow:hidden}
    #settingsModal .modal-card > .row:first-child,
    #settingsModal .settings-tabs,
    #settingsModal .settings-footer{flex:none}
    #settingsModal .settings-pane.active{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
    #syncBtn,#fullSyncBtn,#exportBtn,#settingsBtn,#themeBtn,#cacheCoversBtn,#enrichTagsBtn,#importBtn{display:none}
    .top{padding:12px 12px 10px}
    .top .row{gap:8px}
    .search{min-width:100%;flex:1 1 100%}
    #typeDropdown,#sortDropdown{flex:1 1 0;min-width:0}
    #typeDropdown .select-trigger,#sortDropdown .select-trigger{width:100%}
    /* NSFW floats at the right; left pills scroll the FULL width under it. The float has a SEMI-transparent frosted backing
       so pills passing underneath are softly dimmed/blurred but still visible (not fully transparent, not a solid block). */
    .filters{padding:10px 12px;flex-wrap:nowrap;position:relative}
    .filters-left{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:100px}
    .filters-left::-webkit-scrollbar{display:none}
    .filters-left > *{flex:none}
    /* NSFW filter floats over the right end of the scroll strip; admin filter-right buttons live in the drawer.
       Frosted glass + a theme-colored dim (accent --c blended into --bg, semi-transparent → matches the toolbar tint,
       auto-adapts to theme/accent) + a left-side mask so it fades in softly (no hard edge). */
    .filters-right{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;padding:0 12px 0 38px;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,color-mix(in srgb,var(--c) 18%,var(--bg)) 64%,transparent));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to right,transparent,#000 46px);mask-image:linear-gradient(to right,transparent,#000 46px)}
    .filters-right > *{pointer-events:auto}
    .filters-right #cacheCoversBtn,.filters-right #enrichTagsBtn,.filters-right #importBtn{display:none}
  }
  /* Touch devices: no hover-expand on catalog cards (reset every .card:hover to the default state) */
  @media (hover: none){
    .card:hover{transform:none!important;filter:none!important;z-index:auto!important}
    .card:hover::before{transform:none!important;box-shadow:var(--v8-card-shadow)!important;border-color:var(--line)!important;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055))!important}
    .card:hover::after{opacity:0!important;transform:none!important}
    .card:hover .card-glow{opacity:0!important}
    .card:hover .cover{transform:none!important;filter:none!important}
    .card:hover .card-body{height:calc(var(--v8-card-body) + 2px)!important;transform:none!important;box-shadow:0 -18px 34px rgba(0,0,0,.18)!important;border-radius:0 0 26px 26px!important}
    .card:hover .comment{max-height:calc(1.52em * var(--comment-lines))!important}
    .card:hover .mini-tags{flex-wrap:nowrap!important;height:24px!important;max-height:24px!important}
    .card:hover .r18-badge{bottom:calc(var(--v8-card-body) + 7px)!important}
  }