:root{color-scheme:dark;--bg:#0b0b10;--panel:#14141c;--panel2:#1b1b25;--line:#2a2a36;--muted:#9a97a6;--text:#f5f2f8;--red:#f0445d;--red2:#ff7185;--green:#63dca3;--sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--nav:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
img{display:block}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav);display:flex;align-items:center;gap:20px;padding:0 clamp(14px,4vw,48px);background:linear-gradient(#0b0b10f2,#0b0b10dd);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff10}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:1.5px;white-space:nowrap}
.brand i{font-style:normal;color:var(--red2)}.logo{width:32px;height:32px;flex:none;border-radius:9px}
.nav-search{flex:1;max-width:560px;margin-left:auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;background:#17171f;border:1px solid #31313d;color:var(--muted);transition:border-color .15s,box-shadow .15s}
.nav-search:focus-within{border-color:#b13d54;box-shadow:0 0 0 3px #f0445d22;color:#fff}
.nav-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:14px;color:#fff;-webkit-appearance:none;appearance:none}
.nav-search input::-webkit-search-cancel-button,.nav-search input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.nav-search input::placeholder{color:#7e7b89}
.nav-search button{background:#ffffff14;border:0;border-radius:50%;width:22px;height:22px;font-size:10px;line-height:1;color:#ddd}
@media(max-width:620px){.nav{gap:10px}.brand span:last-child{display:none}.logo{width:36px;height:36px}.nav-search{max-width:none}}

/* ---------- layout ---------- */
main{min-height:calc(100vh - var(--nav))}
.page{padding:22px clamp(14px,4vw,48px) 60px;max-width:1500px;margin:auto}
.hero{padding:clamp(34px,7vw,90px) clamp(14px,4vw,48px) 26px;max-width:1500px;margin:auto;background:radial-gradient(ellipse 60% 80% at 15% 0,#f0445d1f,transparent 70%)}
.hero .eyebrow{font-size:11px;letter-spacing:1.4px;color:var(--red2);font-weight:700}
.hero h1{font-size:clamp(34px,6vw,70px);line-height:1.04;letter-spacing:-.05em;margin:14px 0;font-weight:800}
.hero h1 em{font-style:normal;color:var(--red2)}
.hero p{max-width:520px;color:#aaa7b6;line-height:1.7;margin:0 0 20px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chip{background:#17171f;border:1px solid #31313d;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:600;color:#cfcbd8;transition:.15s}
.chips a:hover,.chip:hover{border-color:#b13d54;color:#fff;background:#25151d}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- rows & cards ---------- */
.row{padding:14px 0 6px;max-width:1500px;margin:auto}
.row h2,.page h2{font-size:19px;letter-spacing:-.02em;margin:0 clamp(14px,4vw,48px) 12px}
.page h2{margin-left:0}
.scroller{display:flex;gap:14px;overflow-x:auto;padding:4px clamp(14px,4vw,48px) 14px;scroll-snap-type:x proximity;scroll-padding:0 clamp(14px,4vw,48px);scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller .card{flex:none;width:clamp(120px,15vw,172px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px}
@media(max-width:620px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}.scroller{gap:10px}}
@media(max-width:400px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:block;min-width:0}
.poster{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#2a1520,#14141c);border:1px solid #ffffff12;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover .poster,.card:focus-visible .poster{transform:translateY(-4px) scale(1.02);border-color:#f0445d88;box-shadow:0 14px 34px #0009}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.poster img.in{opacity:1}
.ph{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-weight:800;color:#f0445d55}
.ctitle{margin-top:9px;font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csub{margin-top:3px;font-size:11px;color:var(--muted)}
.bar{height:3px;background:#ffffff1f;border-radius:2px;margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:var(--red)}
.sk .poster{animation:pulse 1.3s infinite}.sk .ctitle{height:12px;width:70%;background:#1d1d27;border-radius:4px;animation:pulse 1.3s infinite}
@keyframes pulse{50%{opacity:.45}}
.state{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 16px;line-height:1.7}
.state b{display:block;color:#e4e0ec;font-size:16px;margin-bottom:6px}
.state button{margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:12px 20px;font-weight:800;font-size:14px;background:var(--red);color:#fff;transition:.15s}
.btn:hover{background:#ff536b}.btn.alt{background:#ffffff1c}.btn.alt:hover{background:#ffffff2e}
.ph1{font-size:clamp(20px,3vw,28px);margin:0 0 20px;letter-spacing:-.03em}

/* ---------- anime detail ---------- */
.detail{position:relative;overflow:hidden;padding:clamp(22px,4vw,48px) clamp(14px,4vw,48px)}
.d-bg{position:absolute;inset:-30px;background-size:cover;background-position:center 20%;filter:blur(34px) brightness(.38) saturate(1.3);transform:scale(1.1)}
.detail:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,var(--bg))}
.d-inner{position:relative;z-index:1;max-width:1500px;margin:auto;display:flex;gap:clamp(16px,3vw,34px);align-items:flex-end}
.d-poster{flex:none;width:clamp(110px,19vw,230px);aspect-ratio:2/3;border-radius:12px;overflow:hidden;position:relative;background:#1d1520;box-shadow:0 20px 50px #000a}
.d-poster .poster{border-radius:0;border:0;height:100%;aspect-ratio:auto}
.d-info{min-width:0;padding-bottom:6px}
.d-info h1{font-size:clamp(24px,4.4vw,48px);line-height:1.08;letter-spacing:-.04em;margin:0 0 10px}
.d-meta{color:#c0bccb;font-size:13px;margin-bottom:18px}
.d-actions{display:flex;flex-wrap:wrap;gap:10px}
.ep-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.ep-head h2{margin:0}
.ep-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ep-tools input{width:130px;height:38px;border-radius:8px;border:1px solid #31313d;background:#17171f;padding:0 12px;font-size:13px;outline:0}
.ep-tools input:focus{border-color:#b13d54}
.seg{display:inline-flex;background:#17171f;border:1px solid #31313d;border-radius:8px;padding:3px}
.seg button{border:0;background:transparent;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:800;color:var(--muted)}
.seg button.on{background:var(--red);color:#fff}
.ranges{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scrollbar-width:none}.ranges::-webkit-scrollbar{display:none}
.ranges .chip{flex:none;font-size:11px;padding:6px 12px}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ep{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:13px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:.15s}
.ep:hover{border-color:#b13d54;background:#1d151b}
.ep b{flex:none;min-width:34px;font-size:20px;font-weight:800;color:#6c6977;letter-spacing:-.04em}
.ep span{min-width:0;font-size:13px;font-weight:600;line-height:1.35;color:#dcd8e4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep.seen b{color:var(--green)}
.ep.now{border-color:var(--red);background:linear-gradient(135deg,#4c1927,#1d151b)}.ep.now b{color:var(--red2)}
.ep .bar{position:absolute;left:0;right:0;bottom:0;margin:0;height:3px;border-radius:0}
@media(max-width:620px){.ep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ep{padding:11px;gap:8px}.ep b{font-size:17px;min-width:26px}.d-inner{align-items:flex-end}}

/* ---------- watch page ---------- */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;padding:18px clamp(14px,3vw,36px) 50px;max-width:1700px;margin:auto}
@media(max-width:1000px){.watch{grid-template-columns:minmax(0,1fr);padding:0 0 40px;gap:0}.w-info,.w-side{margin:0 14px}}
.w-info{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 0}
.w-info h1{font-size:clamp(17px,2.4vw,24px);letter-spacing:-.03em;margin:0 0 4px}
.w-sub{font-size:12px;color:var(--muted)}
.w-btns{display:flex;gap:8px;flex-wrap:wrap}
.w-btns .btn{padding:9px 14px;font-size:12px}
.btn[disabled]{opacity:.4;pointer-events:none}
.w-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;align-self:start;max-height:calc(100vh - var(--nav) - 36px);display:flex;flex-direction:column;position:sticky;top:calc(var(--nav) + 16px)}
@media(max-width:1000px){.w-side{position:static;max-height:none;margin-top:6px}}
.side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.side-head h3{margin:0;font-size:15px}.side-head a{font-size:11px;color:var(--red2);font-weight:700}
.side-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0;max-height:62vh;scrollbar-width:thin;scrollbar-color:#333 transparent}
@media(max-width:1000px){.side-list{max-height:420px}}
.side-list .ep{padding:10px 12px;flex:none}.side-list .ep b{font-size:16px}

/* ---------- player ---------- */
.player{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--nav) - 90px);background:#000;overflow:hidden;border-radius:12px;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-size:14px}
@media(max-width:1000px){.player{border-radius:0;max-height:none}}
.player.idle{cursor:none}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player video::cue{background:rgba(0,0,0,.72);color:#fff;font-family:var(--sans);font-size:1.15em;line-height:1.3}
.player:fullscreen,.player:-webkit-full-screen{max-height:none;width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}
.player:not(.idle) video::-webkit-media-text-track-container{transform:translateY(-58px)}
.p-surface{position:absolute;inset:0;z-index:1}
.p-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:14px 16px 40px;background:linear-gradient(#000b,transparent);font-weight:700;pointer-events:none;transition:opacity .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-center{position:absolute;z-index:3;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .25s}
.p-bigplay{pointer-events:auto;width:64px;height:64px;border-radius:50%;border:0;background:#000a;display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .15s,background .15s}
.p-bigplay:hover{background:var(--red);transform:scale(1.07)}.p-bigplay svg{width:34px;height:34px}
.p-spin{position:absolute;z-index:4;inset:0;display:none;place-items:center;pointer-events:none}
.p-spin.on{display:grid}
.p-spin i{width:46px;height:46px;border-radius:50%;border:4px solid #ffffff30;border-top-color:var(--red2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-flash{position:absolute;z-index:4;top:50%;transform:translateY(-50%);padding:14px 20px;border-radius:999px;background:#000a;font-weight:800;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s}
.p-flash.on{opacity:1}
.p-controls{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:34px 14px 8px;background:linear-gradient(transparent,#000d);transition:opacity .25s}
.player.idle .p-controls,.player.idle .p-top,.player.idle .p-center{opacity:0;pointer-events:none}
.player.idle .p-controls *,.player.idle .p-bigplay{pointer-events:none}
.p-seek{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.p-seek:before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:#ffffff38;transition:height .12s}
.p-seek:hover:before,.p-seek.drag:before{height:6px}
.s-buf,.s-played{position:absolute;left:0;height:4px;border-radius:2px;width:0;pointer-events:none;transition:height .12s}
.s-buf{background:#ffffff55}.s-played{background:var(--red)}
.p-seek:hover .s-buf,.p-seek:hover .s-played,.p-seek.drag .s-buf,.p-seek.drag .s-played{height:6px}
.s-knob{position:absolute;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--red2);transform:scale(0);transition:transform .12s;pointer-events:none}
.p-seek:hover .s-knob,.p-seek.drag .s-knob{transform:scale(1)}
.s-tip{position:absolute;bottom:26px;transform:translateX(-50%);padding:3px 8px;border-radius:5px;background:#000c;font-size:12px;font-weight:700;pointer-events:none;display:none}
.p-seek:hover .s-tip,.p-seek.drag .s-tip{display:block}
.p-row{display:flex;align-items:center;gap:2px}
.p-row button{width:42px;height:42px;display:grid;place-items:center;background:transparent;border:0;border-radius:8px;color:#fff;flex:none}
.p-row button:hover{background:#ffffff1f}
.p-row button svg{width:26px;height:26px;fill:currentColor}
.p-row button[hidden]{display:none}
.sp{flex:1}
.p-time{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin:0 8px;color:#e8e4ee;white-space:nowrap}
.p-vol{display:flex;align-items:center}
.p-vol input{width:0;opacity:0;transition:width .18s,opacity .18s;accent-color:var(--red);height:4px;cursor:pointer}
.p-vol:hover input,.p-vol:focus-within input{width:80px;opacity:1;margin:0 8px 0 2px}
@media(hover:none),(max-width:620px){.p-vol input{display:none}.p-row button{width:38px;height:38px}.p-row button svg{width:23px;height:23px}.p-time{font-size:11px;margin:0 4px}.p-controls{padding:26px 8px 4px}.p-bigplay{width:58px;height:58px}}
@media(max-width:420px){.p-row [data-a=back],.p-row [data-a=fwd]{display:none}}
.p-skip{position:absolute;z-index:6;right:16px;bottom:84px;padding:10px 18px;border-radius:6px;border:1px solid #fff9;background:#000b;color:#fff;font-weight:800;font-size:13px;backdrop-filter:blur(6px)}
.p-skip:hover{background:#fff;color:#000}.p-skip[hidden]{display:none}
.p-next{position:absolute;z-index:7;right:16px;bottom:84px;padding:14px;border-radius:10px;background:#000d;border:1px solid #ffffff33;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 32px)}
.p-next[hidden],.p-error[hidden],.p-menu[hidden]{display:none}
.p-next div{font-weight:700;font-size:13px}.p-next b{color:var(--red2)}
.p-next button,.p-error button{border:0;border-radius:6px;padding:8px 14px;font-weight:800;font-size:12px;background:var(--red);color:#fff}
.p-next .n-cancel{background:#ffffff22}
.p-error{position:absolute;z-index:8;inset:0;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
.e-msg{max-width:420px;line-height:1.6;color:#e8e4ee}
.e-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.e-btns button:nth-child(n+2){background:#ffffff22}
.p-menu{position:absolute;z-index:9;right:12px;bottom:70px;min-width:210px;max-width:calc(100% - 24px);max-height:70%;overflow-y:auto;background:#14141cf2;border:1px solid #ffffff22;border-radius:10px;padding:6px;backdrop-filter:blur(10px)}
.p-menu button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:600;text-align:left}
.p-menu button:hover{background:#ffffff1a}.p-menu button.on{color:var(--red2)}.p-menu small{color:var(--muted);font-weight:600}
.p-menu .m-title{font-size:11px;letter-spacing:1px;color:var(--muted);padding:8px 12px 4px;font-weight:800}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#27171d;border:1px solid #71303f;color:#ffe5e9;padding:12px 16px;border-radius:9px;font-size:13px;line-height:1.5;z-index:99;transition:.2s;max-width:calc(100vw - 28px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}

/* ---------- HAU additions: account ---------- */
.btn.sm{padding:8px 14px;font-size:12px;border-radius:999px}
.nav-user{position:relative;display:flex;align-items:center;gap:8px;flex:none}
@media(max-width:620px){.nav-user .btn.sm{padding:7px 11px}.nav-signup{display:none}}
.avatar{width:38px;height:38px;border-radius:50%;border:2px solid #f0445d88;background:linear-gradient(135deg,#f0445d,#7a2336);color:#fff;font-weight:800;font-size:15px}
.u-menu{position:absolute;right:0;top:48px;min-width:220px;background:#14141cf7;border:1px solid #ffffff22;border-radius:12px;padding:10px;backdrop-filter:blur(12px);box-shadow:0 18px 40px #000a;z-index:60}
.u-menu[hidden]{display:none}
.u-name{font-weight:800;font-size:14px}.u-sub{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.u-menu button{margin-top:10px;width:100%;padding:10px;border:0;border-radius:8px;background:#ffffff14;font-weight:700;font-size:13px}.u-menu button:hover{background:#f0445d55}
.auth{min-height:calc(100vh - var(--nav));display:grid;place-items:center;padding:24px 14px;background:radial-gradient(ellipse 50% 60% at 50% 0,#f0445d1f,transparent 70%)}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,5vw,32px);box-shadow:0 24px 60px #0008}
.auth-card h1{margin:0 0 6px;font-size:26px;letter-spacing:-.04em}
.auth-sub{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.6}
.f{display:block;margin-bottom:14px}.f span{display:block;font-size:12px;font-weight:700;color:#cfcbd8;margin-bottom:6px}
.f input{width:100%;height:44px;border-radius:9px;border:1px solid #31313d;background:#0f0f15;padding:0 13px;font-size:15px;outline:0;color:#fff}
.f input:focus{border-color:#b13d54;box-shadow:0 0 0 3px #f0445d22}
.f-err{display:block;color:#ff8a9a;font-size:12px;font-style:normal;margin-top:5px;min-height:0}.f-err:empty{display:none}
.form-err{margin:0 0 12px}
.show-pw{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:-4px 0 16px}
.btn.wide{width:100%;padding:14px}.btn:disabled{opacity:.6;pointer-events:none}
.auth-alt{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted)}.auth-alt a{color:var(--red2);font-weight:700}

/* ---------- HAU additions: player ---------- */
.p-row .p-q{width:auto;padding:0 9px;font-size:12px;font-weight:800;letter-spacing:.2px;border:1px solid #ffffff44;height:28px;margin:0 4px;border-radius:6px;white-space:nowrap}
.p-row .p-q.hd{border-color:var(--red2);color:var(--red2)}
.p-menu button:disabled{opacity:.4;cursor:not-allowed}.p-menu button:disabled:hover{background:transparent}
.seg button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.s-mark{position:absolute;height:4px;border-radius:2px;background:#ffd166cc;pointer-events:none;z-index:0}
.s-played,.s-knob{z-index:1}
.watch.theater{grid-template-columns:minmax(0,1fr)}
.watch.theater .player{max-height:calc(100vh - var(--nav) - 60px);border-radius:0}
.watch.theater .w-side{position:static;max-height:none;margin-top:14px}
.watch.theater .side-list{max-height:320px}
@media(max-width:1000px){.p-theater{display:none!important}.p-row .p-q{height:24px;padding:0 6px;font-size:11px;margin:0 2px}}

/* ---------- HAU additions: branding, spotlight, misc ---------- */
#boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-weight:800;letter-spacing:3px;font-size:15px;transition:opacity .4s}
#boot i{font-style:normal;color:var(--red2)}#boot .logo.big{width:84px;height:84px;border-radius:22px;animation:pulse 1.2s infinite}
#boot.hide{opacity:0;pointer-events:none}
.loader{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--red2);animation:spin .8s linear infinite}
.state.find{padding-top:22vh}
.spot{position:relative;overflow:hidden;min-height:clamp(340px,52vw,520px);display:flex;align-items:center}
.spot-bg{position:absolute;inset:-40px;background-size:cover;background-position:center 25%;filter:blur(30px) brightness(.34) saturate(1.35);transform:scale(1.1);transition:background-image .6s}
.spot:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b10cc,transparent 70%),linear-gradient(transparent 55%,var(--bg))}
.spot-in{position:relative;z-index:1;width:100%;max-width:1500px;margin:auto;padding:30px clamp(14px,4vw,48px);display:flex;gap:clamp(18px,4vw,50px);align-items:center;justify-content:space-between;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.spot-in.in{opacity:1;transform:none}
.spot-text{max-width:620px;min-width:0}
.spot-text .eyebrow{font-size:11px;letter-spacing:1.4px;color:var(--red2);font-weight:800}
.spot-text h1{font-size:clamp(28px,5vw,58px);line-height:1.05;letter-spacing:-.045em;margin:10px 0}
.spot-meta{font-size:13px;color:#d6d2df;font-weight:600;margin-bottom:12px}
.spot-text p{color:#b8b4c4;line-height:1.7;font-size:14px;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dots{display:flex;gap:8px;margin-top:22px}.dots button{width:22px;height:5px;border:0;border-radius:3px;background:#ffffff33;padding:0;transition:.2s}.dots button.on{width:40px;background:var(--red)}
.spot-poster{flex:none;width:clamp(120px,19vw,250px);aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px #000b;border:1px solid #ffffff1f}
.spot-poster img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.spot{min-height:0}.spot-in{flex-direction:column-reverse;align-items:flex-start;padding-top:22px}.spot-poster{width:46%;max-width:190px;align-self:center}.spot-text p{-webkit-line-clamp:3}}
.m-help{padding:6px 8px;display:grid;gap:7px;font-size:12px;min-width:240px}.m-help div{display:flex;justify-content:space-between;gap:14px;color:#cfcbd8}
.m-help kbd{font:700 11px var(--sans);background:#ffffff1c;border-radius:5px;padding:2px 7px;white-space:nowrap}

/* ---------- HAU app-style shell ---------- */
.tabbar{display:none}
@media(max-width:760px){html .tabbar{display:flex}}
html.app .tabbar{display:flex}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#0e0e14f2;backdrop-filter:blur(16px);border-top:1px solid #ffffff14}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.2px;-webkit-tap-highlight-color:transparent;transition:color .15s}
.tabbar a.on{color:var(--red2)}.tabbar a:active svg{transform:scale(.88)}.tabbar svg{transition:transform .15s}
body.no-tabs .tabbar{display:none!important}
@media(max-width:760px){body:not(.no-tabs) main{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}}
html.app body:not(.no-tabs) main{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
html.app .nav-search{display:none}html.app .nav{--nav:56px;height:56px}html.app .brand span{display:inline}
html.app *{-webkit-tap-highlight-color:transparent}html.app body{overscroll-behavior-y:contain;user-select:none;-webkit-user-select:none}
html.app input,html.app textarea{user-select:text;-webkit-user-select:text}
#view.enter{animation:viewIn .26s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#ptr{position:fixed;top:56px;left:50%;z-index:90;width:38px;height:38px;border-radius:50%;background:#1b1b25;border:1px solid #ffffff22;display:grid;place-items:center;opacity:0;transform:translate(-50%,0);pointer-events:none;box-shadow:0 8px 24px #0009}
#ptr.spin .loader{animation:spin .6s linear infinite}.loader.sm{width:20px;height:20px;border-width:3px;margin:0}
.big-search{display:flex;gap:10px;margin:6px 0 22px}.big-search input{flex:1;min-width:0;height:50px;border-radius:12px;border:1px solid #31313d;background:#0f0f15;color:#fff;padding:0 16px;font-size:16px;outline:0}
.big-search input:focus{border-color:#b13d54;box-shadow:0 0 0 3px #f0445d22}
.ph2{font-size:15px;margin:22px 0 12px;letter-spacing:-.01em}.ph2-row{display:flex;align-items:center;justify-content:space-between}
.link{background:none;border:0;color:var(--red2);font-weight:700;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:9px}.chip{padding:9px 15px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip:active{background:#f0445d33}.chip.ghost{opacity:.5}
.page.narrow{max-width:640px;margin:0 auto}
.p-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px}.p-card.flush{padding:4px 0}.p-card.center{text-align:center;padding:30px 20px}
.p-card.center .logo.big{width:76px;height:76px;border-radius:20px;margin:0 auto 14px;display:block}.p-card.center p{color:var(--muted);line-height:1.6;font-size:14px;margin:0 0 22px}
.p-card h1{font-size:20px;margin:0 0 3px;letter-spacing:-.03em}
.p-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}.avatar.xl{width:60px;height:60px;font-size:26px;flex:none}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #ffffff10;font-size:13px}.kv span{color:var(--muted)}.kv b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.s-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid #ffffff0d;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit}
.s-row:last-child{border-bottom:0}.s-row b{font-size:14px;font-weight:600;display:block}.s-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.s-row select{background:#0f0f15;color:#fff;border:1px solid #31313d;border-radius:8px;padding:9px 10px;font-size:13px;max-width:46%}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:26px;border-radius:13px;background:#3a3a48;position:relative;transition:.2s;border:0}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.switch:checked{background:var(--red)}.switch:checked:after{left:23px}
.btn-row{cursor:pointer}.btn-row:active{background:#ffffff0a}.danger b{color:#ff8a9a}
.fine{text-align:center;color:#6d6a79;font-size:11px;margin:22px 0 10px}
.avatar{display:grid;place-items:center;line-height:1}
@media(max-width:760px){body:not(.no-tabs) .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
html.app body:not(.no-tabs) .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}

#appbar{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#f0445d,#b8283f);color:#fff;font-size:13px;font-weight:700;padding:9px 14px}
#appbar span{flex:1}#appbar a{background:#fff;color:#b8283f;border-radius:999px;padding:6px 14px;font-weight:800}#appbar button{background:none;border:0;color:#fff;font-size:16px}

#ann{position:fixed;inset:0;z-index:300;background:#000a;display:grid;place-items:center;padding:20px}
.ann-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:380px;width:100%;box-shadow:0 24px 60px #000b}
.ann-card h3{margin:0 0 8px;font-size:19px}.ann-card p{margin:0 0 18px;color:#cfcbd8;line-height:1.6;white-space:pre-wrap}.ann-card .btn{width:100%}
.srv{background:#17171f;border:1px solid #31313d;border-radius:8px;color:#fff;font-size:12px;font-weight:800;padding:8px 10px;margin-left:8px}

/* ================= v10 visual refresh (Anilab / WakuWaku inspired) ================= */
:root{--red:#f0384f;--red2:#ff6b81;--glow:0 10px 30px #f0384f40;--r:14px}
body{background:radial-gradient(900px 500px at 85% -120px,#f0384f14,transparent 60%),var(--bg)}
.btn{background:linear-gradient(135deg,#ff4d63,#e02745);border-radius:999px;box-shadow:var(--glow)}
.btn:hover{background:linear-gradient(135deg,#ff6479,#ee3350)}
.btn.alt,.btn.ghost-btn{background:transparent;border:1.5px solid #ffffffd0;box-shadow:none}
.btn.alt:hover,.btn.ghost-btn:hover{background:#ffffff1f}
.d-actions{display:flex;gap:10px;flex-wrap:wrap}
.chips a,.chip{border-radius:999px;background:#ffffff0d;border-color:#ffffff1c}
.chip.on{background:linear-gradient(135deg,#ff4d63,#e02745);border-color:transparent;box-shadow:var(--glow)}
/* section titles with accent */
.row h2{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.row h2:before{content:"";width:4px;height:18px;border-radius:3px;background:linear-gradient(var(--red2),var(--red))}
/* cards */
.poster{border-radius:var(--r);border:0;box-shadow:0 8px 22px #0007}
.card:hover .poster,.card:focus-visible .poster{box-shadow:0 16px 38px #000a,0 0 0 2px #f0384f99}
.poster:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,#0b0b10cc);pointer-events:none}
.badge{position:absolute;z-index:2;top:8px;left:8px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;background:#0b0b10b3;backdrop-filter:blur(6px);color:#ffd36b;border:1px solid #ffffff1f}
.ctitle{font-size:13.5px;font-weight:800}
.csub{font-size:11.5px}
/* ranked Top 10 */
.ranked-row .scroller{gap:6px}
.ranked-row .scroller .card{width:clamp(150px,19vw,210px);padding-left:34px;position:relative}
.rank{position:absolute;z-index:3;left:-34px;bottom:-6px;font-size:clamp(78px,11vw,120px);font-weight:900;line-height:1;letter-spacing:-.08em;color:#0b0b10;-webkit-text-stroke:2.5px #ff6b81;text-shadow:0 0 22px #f0384f66;pointer-events:none}
.ranked-row .poster{border-radius:var(--r)}
/* hero */
.spot-text h1{background:linear-gradient(90deg,#fff,#ffd9de);-webkit-background-clip:text;background-clip:text;color:transparent}
.spot-poster{border-radius:20px;box-shadow:0 30px 70px #000c,0 0 0 1px #ffffff22,0 0 60px #f0384f2e}
.spot .dots button{transition:.25s}
.spot .dots button.on{background:var(--red);width:24px}
/* nav */
.nav{background:linear-gradient(#0b0b10ee,#0b0b10b8);border-bottom-color:#ffffff0d}
.nav-search{background:#ffffff0d;border-color:#ffffff1a}
/* floating pill tab bar */
@media(max-width:760px){
  html .tabbar{left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:62px;padding-bottom:0;border-radius:22px;border:1px solid #ffffff1a;background:#14141cd9;backdrop-filter:blur(20px);box-shadow:0 14px 40px #000a}
  .tabbar a.on{color:#fff}.tabbar a.on svg{color:var(--red2);filter:drop-shadow(0 0 8px #f0384f)}
  .tabbar a.on span{color:var(--red2)}
  main{padding-bottom:84px}
}
html.app .tabbar{left:14px;right:14px}