/* Astra catalogue theme: straight artwork edges, restrained surfaces and clear typography.
   Shared visual tokens live here; style.css retains layout/behavior contracts. */
:root {
  --bg:#f5f5f0; --bg2:#ebeee7; --surface:#fdfdf9; --surface2:#edf0e8;
  --surface3:#e2e8df; --surface4:#d4ded0; --text:#243830; --text2:#52645a; --muted:#627267;
  --line:rgba(36,56,48,.09); --line2:rgba(36,56,48,.15); --line3:rgba(36,56,48,.25);
  --accent:#35644b; --accent-rgb:53,100,75; --accent2:#397c6b; --accent-dim:rgba(53,100,75,.10);
  --sp:var(--accent); --sp-rgb:var(--accent-rgb); --sp-dim:var(--accent-dim);
  --glass:rgba(246,247,242,.96); --glass-border:var(--line2);
  --r:3px; --r2:4px; --r3:6px; --pad:32px; --gap:24px;
  --font-display:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --shadow:0 12px 32px rgba(26,48,35,.12); --shadow-sm:0 2px 8px rgba(26,48,35,.06);
  --topbar-h:76px; --dock-space:calc(100px + env(safe-area-inset-bottom,0px));
}
:root[data-theme="dark"] {
  --bg:#151a18; --bg2:#101512; --surface:#1d2520; --surface2:#28322b;
  --surface3:#344139; --surface4:#415046; --text:#e8eee6; --text2:#bbc8bd; --muted:#a5b6a9;
  --line:rgba(211,230,214,.08); --line2:rgba(211,230,214,.14); --line3:rgba(211,230,214,.26);
  --accent:#b5cf9c; --accent-rgb:181,207,156; --accent2:#99c7b6; --accent-dim:rgba(181,207,156,.12);
  --glass:rgba(23,29,28,.96); --shadow:0 18px 48px rgba(0,0,0,.2); --shadow-sm:0 4px 16px rgba(0,0,0,.12);
}
body[data-section] { --sp:var(--accent); --sp-rgb:var(--accent-rgb); --sp-dim:var(--accent-dim); }
html { scroll-padding-top:90px; }
body { min-height:100vh; display:flex; flex-direction:column; font-family:var(--font-display); font-size:15px; line-height:1.65; animation:none; background:var(--bg); }
main.container { width:100%; flex:1; padding-top:40px; padding-bottom:64px; }
.container { max-width:1320px; }
h1,h2,h3 { letter-spacing:-.025em; font-weight:600; overflow-wrap:anywhere; }
h1,.forum-title { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.5vw,42px); line-height:1.18; text-transform:none; }
p, .meta, .forum-post-body, .forum-post-content { overflow-wrap:anywhere; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; top:8px; left:12px; z-index:10001; transform:translateY(-150%); padding:10px 18px; border-radius:var(--r); background:var(--surface); color:var(--text); }
.skip-link:focus { transform:none; }
.topbar { backdrop-filter:blur(18px); background:var(--glass); border-bottom:1px solid var(--line2); box-shadow:none; }
.topbar.is-compact { height:var(--topbar-h); }
.brand { font-family:var(--font-display); font-size:31px; font-weight:650; letter-spacing:-1.6px; text-transform:none; color:var(--text); }
.brand span { display:inline-block; margin-left:3px; color:var(--accent); font-size:19px; vertical-align:top; }
.brand::after { display:none; }
.nav-tabs { flex:0 0 auto; gap:4px; margin-left:28px; padding:4px; border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2); }
.topbar .search-trigger { margin-left:auto; }
.topbar .nav-tabs ~ .tags { margin-left:0; }
.nav-tab { min-height:36px; display:flex; align-items:center; padding:6px 18px; border-radius:var(--r); font-size:13px; text-transform:none; letter-spacing:0; font-weight:600; }
.nav-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.topbar .tags { margin-left:auto; gap:8px; }
.search-trigger,.burger-btn { width:44px; height:44px; border-radius:50%; }
.theme-toggle { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:50%; background:var(--surface); color:var(--text); font-size:23px; cursor:pointer; }
.ui-icon { width:20px; height:20px; display:block; flex:none; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.avatar-pill { min-height:44px; border:1px solid transparent; border-radius:var(--r); background:transparent; padding:3px 12px 3px 5px; }
.avatar-name { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.account-actions { display:inline-flex; align-items:center; flex:none; gap:4px; padding:4px; border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2); }
.account-action { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--surface); color:var(--text2); transition:background .18s,color .18s,transform .18s; }
.account-action:hover { background:var(--accent-dim); color:var(--accent); }
.account-action:active { transform:scale(.94); }
.account-action--logout:hover { color:#b44848; background:#b4484814; }
:root[data-theme="dark"] .account-action--logout:hover { color:#f1a6a0; background:#f1a6a014; }
.user-menu .account-actions { display:flex; width:max-content; margin:10px 14px; }
.user-menu .account-action { width:44px; height:44px; }
.user-menu { background:var(--surface); border-color:var(--line2); box-shadow:var(--shadow); max-height:calc(100dvh - 110px); overflow:auto; }
.user-menu-item { min-height:44px; }
.panel,.sidebar-box,.staff-edit-panel,.admin-card,.forum-quote,.thread-mod-bar { border-color:var(--line2); }
.panel,.sidebar-box,.admin-card { background:var(--surface); box-shadow:none; }
.panel { padding:28px; border-radius:var(--r2); }
.neo-btn { min-height:44px; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; padding:11px 22px; border-radius:var(--r); white-space:normal; transition:background .18s,transform .18s; }
.neo-btn--accent,.neo-btn--anime,.neo-btn--sp { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.neo-btn--ghost { background:var(--surface); color:var(--text); border-color:var(--line2); }
.neo-btn:hover,.neo-btn--anime:hover { box-shadow:none; filter:none; }
.neo-btn:active { transform:scale(.98); }
.tag { font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; border-radius:var(--r); border-color:transparent; padding:4px 8px; }
a.tag { min-height:36px; align-items:center; }
.tag--accent { background:var(--accent-dim); color:var(--accent); border-color:var(--line2); }
.form-input,.search input,.theme-control select { color:var(--text); background:var(--bg); border:1px solid var(--line2); border-radius:var(--r); min-height:48px; padding:12px 16px; }
.form-input::placeholder { color:var(--muted); opacity:1; }
label { display:block; margin-bottom:6px; }
.theme-control { margin-bottom:0; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
select option { background:var(--surface); color:var(--text); }
input[type="file"] { max-width:100%; font-size:14px; }
input::file-selector-button { min-height:44px; margin-right:10px; padding:8px 14px; border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2); color:var(--text); cursor:pointer; }
.library-head,.hl-section-head { flex-wrap:wrap; gap:12px; }
.library-head h2,.hl-section-title,.sidebar-box-title,.episodes h2,.carousel-head h2 { font-size:21px; letter-spacing:-.025em; text-transform:none; font-weight:600; }
.hl-section-title { padding-left:0; }
.hl-section-title::before { display:none; }
.mini-grid,.grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:28px 22px; }
.mini-card,.card,.carousel-card { background:transparent; border:0; box-shadow:none; animation:none; border-radius:var(--r); }
.mini-card:hover,.card:hover,.carousel-card:hover { box-shadow:none; }
.mini-thumb,.thumb { aspect-ratio:2/3; height:auto; width:100%; object-fit:cover; border-radius:var(--r); }
.mini-body { padding:14px 0 4px; }
.mini-title,.hl-card-title { font-size:14px; font-weight:600; line-height:1.5; }
.mini-badges { gap:5px; flex-wrap:wrap; }
.hl-scroll-row { gap:18px; scroll-snap-type:x proximity; scrollbar-width:none; }
/* Keep scrolling shelves inside the same content edges as their headings.
   Negative gutters plus scroll snapping previously pulled the first card left. */
.carousel { margin-inline:0; min-width:0; }
.carousel-head { padding-inline:0; }
.carousel-track { padding-inline:0; scroll-padding-inline:0; }
.carousel-card:hover { transform:translateY(-2px); }
.hl-scroll-row { margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
.hl-card { flex-basis:170px; }
.hl-card-img-wrap { border-radius:var(--r); border:0; }
.hl-card:hover .hl-card-img-wrap { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.hl-hero,.idx-hero { background:#202c27; --text:#f4f6ee; --text2:#d1dbd0; --muted:#c2d0c2; --sp:#c2dba9; --accent:#c2dba9; --accent-dim:rgba(194,219,169,.15); color:var(--text); }
.hl-hero { min-height:360px; }
.hl-hero-inner { grid-template-columns:170px 1fr; align-items:center; gap:40px; padding:40px; }
.hl-hero-title { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,52px); line-height:1.1; text-shadow:none; letter-spacing:-.035em; }
.hl-hero-poster img { box-shadow:0 12px 30px rgba(0,0,0,.2); }
.hl-hero-backdrop { filter:brightness(.45) saturate(.85); }
.hl-hero-scrim { background:linear-gradient(90deg,rgba(24,37,29,.96),rgba(24,37,29,.5)); }
.hl-hero:hover .hl-hero-backdrop,.idx-hero:hover .idx-hero-bg { transform:scale(1.06); }
.hl-hero .neo-btn--anime,.idx-hero .neo-btn--anime { color:#203528; }
.hl-hero .neo-btn--ghost,.idx-hero .neo-btn--ghost { color:#f4f6ee; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.hl-hero .tag,.idx-hero .tag { background:rgba(255,255,255,.1); color:#e5ece1; border-color:rgba(255,255,255,.16); }
.idx-hero { min-height:300px; }
.idx-hero-bg { filter:brightness(.4) saturate(.8); }
.idx-hero-title { text-shadow:none; }
.anime-hero { background:var(--surface); box-shadow:none; padding:32px; gap:32px; border-radius:var(--r2); }
.anime-hero-bg { opacity:.06; }
.anime-hero .cover { border-radius:var(--r); box-shadow:var(--shadow-sm); }
.anime-hero .desc { color:var(--text2); max-width:72ch; line-height:1.75; }
.description-toggle { color:var(--accent); min-height:44px; padding:6px 0; border:0; background:none; cursor:pointer; font-weight:600; }
.desc.is-collapsed { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.ep { min-height:48px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); background:var(--surface); border-color:var(--line2); font-weight:500; }
.ep-row { min-height:44px; display:flex; align-items:center; }
.episode-picker summary { min-height:44px; padding:10px 4px; color:var(--text); cursor:pointer; font-weight:650; }
.episode-picker[open] summary { margin-bottom:8px; }
.topbar a.tag { min-height:44px; font-size:13px; }
.player-layout { grid-template-columns:minmax(0,1fr) 240px; gap:24px; }
.player { min-width:0; }
.player-top { flex-wrap:wrap; gap:10px; }
.crumb { min-width:0; overflow-wrap:anywhere; }
.vid-wrap { background:#101612; border-radius:var(--r); color:#fff; isolation:isolate; box-shadow:0 12px 32px #00000018; }
.vid-controls { color:#fff; }
.vid-btn { min-width:44px; min-height:44px; color:#fff; }
#reportBugBtn { min-height:44px; }
.vid-speed { color:#fff; background:#25342b; min-height:36px; }
.vid-speed option { color:#fff; background:#25342b; }
.vid-time { color:#fff; }
.media-status { position:absolute; inset:0; display:flex; gap:12px; align-items:center; justify-content:center; flex-direction:column; color:#edf3e9; background:rgba(15,22,17,.62); pointer-events:none; font-size:14px; z-index:3; padding:24px; text-align:center; }
.media-status[hidden] { display:none; }
.media-status:not(.media-error)::before { content:''; width:26px; height:26px; border:2px solid #ffffff40; border-top-color:#c2dba9; border-radius:50%; animation:astra-spin .8s linear infinite; }
@keyframes astra-spin { to { transform:rotate(360deg); } }
.image-pending { background:linear-gradient(100deg,var(--surface2) 20%,var(--surface3) 45%,var(--surface2) 70%); background-size:220% 100%; animation:astra-loading 1.7s ease infinite; }
@keyframes astra-loading { to { background-position:-220% 0; } }
.image-failed { background:var(--surface2); color:var(--muted); font-size:13px; }
.search-overlay { background:var(--glass); backdrop-filter:blur(16px); }
.search-overlay-inner { max-width:680px; width:100%; padding:24px; }
.search-overlay-input { color:var(--text); font-size:24px; }
.search-overlay-bar { border-color:var(--line3); }
.search-overlay-close,.bug-close { min-width:44px; min-height:44px; color:var(--text); }
.bug-modal { background:var(--surface); color:var(--text); border-color:var(--line2); max-height:calc(100dvh - 40px); overflow:auto; }
body.overlay-open { overflow:hidden; }
.auth-panel { margin:24px auto!important; padding:40px; border-top:3px solid var(--accent); }
.auth-intro { text-align:center; margin-bottom:24px; }
.auth-intro h1 { font-size:36px; margin:8px 0; }
.auth-intro p { color:var(--text2); font-size:14px; }
.astra-mascot { display:inline-block; width:110px; height:110px; background-image:url('/assets/mascots/astra-emotions.webp'); background-size:300% 100%; background-repeat:no-repeat; }
.astra-mascot--welcome { background-position:0 50%; }
.astra-mascot--curious { background-position:50% 50%; }
.astra-mascot--error { background-position:100% 50%; }
.empty-state { grid-column:1/-1; text-align:center; padding:40px 20px; background:var(--surface); border:1px dashed var(--line3); border-radius:var(--r); }
.empty-state h3 { margin:8px 0; font-size:20px; }
.empty-state p { color:var(--text2); margin-bottom:16px; }
.form-notice { padding:12px 16px; margin:12px 0; background:var(--surface2); border-radius:var(--r); color:var(--text); }
.form-notice--error { border-left:3px solid #bc5555; }
.site-footer { border-top:1px solid var(--line2); background:var(--bg2); margin-top:24px; }
.footer-inner { display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; padding-top:48px; padding-bottom:28px; width:100%; }
.footer-brand p { font-size:13px; color:var(--text2); margin-top:6px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; }
.footer-links a { min-height:44px; display:flex; align-items:center; }
.footer-links a:hover,.footer-bottom a:hover { text-decoration:underline; text-underline-offset:4px; }
.theme-control { display:flex; gap:8px; align-items:center; color:var(--text2); font-size:13px; }
.theme-control select { font-size:14px; padding:8px 30px 8px 12px; min-height:44px; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.resume-toast { background:var(--surface); color:var(--text); border-color:var(--line2); box-shadow:var(--shadow-sm); }
.reveal { opacity:1; transform:none; }
#page-progress { display:none; }
.forum-post,.forum-thread,.forum-cat,.forum-row,.um-table { background:var(--surface); color:var(--text); }
.forum-quote { background:var(--surface2); }
.forum-quote-body { color:var(--text2); }
.forum-quote-btn,.thread-mod-btn,.score-remove-btn { min-height:36px; font-size:12px; }
.ur-admin,.ur-mod,.ur-otaku3,.ur-otaku2,.ur-otaku1,.ur-otaku { animation:none; }
.ur-admin,.ur-mod,.ur-otaku3,.ur-otaku2,.ur-otaku1,.ur-otaku { background-image:none!important; -webkit-text-fill-color:currentColor!important; filter:none; color:var(--accent)!important; }
:root[data-theme="light"] .ur-admin { color:#a43445!important; }
:root[data-theme="light"] .ur-mod { color:#216f62!important; }
:root[data-theme="light"] .ur-otaku3,:root[data-theme="light"] .ur-otaku2,:root[data-theme="light"] .ur-otaku1 { color:#73532a!important; }
:root[data-theme="light"] .tag--bad { color:#a12d3d; background:#fae8e8; }
:root[data-theme="light"] .tag--ok { color:#286043; background:#e5f1e7; }
:root[data-theme="light"] .rbadge { color:var(--text)!important; background:var(--surface2); }
:root[data-theme="light"] .thread-mod-btn--pin,:root[data-theme="light"] .um-action-btn--warn { color:#855717; }
:root[data-theme="light"] .thread-mod-btn--ok,:root[data-theme="light"] .um-action-btn--ok { color:#286043; }
.um-table { display:block; overflow-x:auto; width:100%; }
.um-table th:nth-child(n),.um-table td:nth-child(n) { display:table-cell; }
/* Content surfaces: quiet dividers, editorial headings and consistent controls. */
.hl-hero,.idx-hero { border-radius:var(--r); border-color:var(--line2); }
.hl-hero-poster img { border-radius:var(--r); }
.hl-hero-eyebrow { font-size:11px; font-weight:500; letter-spacing:.15em; margin-bottom:16px; }
.idx-hero-title,.hl-wh-name,.home-hero-wordmark { font-family:var(--font-display); font-weight:400; letter-spacing:-.04em; text-transform:none; text-shadow:none; }
.hl-wh-name,.home-hero-wordmark span { text-shadow:none; }
.hl-wh-bg,.home-hero-bg { background:radial-gradient(ellipse at 25% 10%,var(--accent-dim),transparent 65%); animation:none; }
.hl-stats-bar { background:var(--surface); border-radius:var(--r); }
.hl-stat { padding:20px 4px; gap:8px; }
.hl-stat-n { font-family:var(--font-display); font-size:26px; font-weight:400; }
.hl-stat-l { font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; }
.hl-section-head,.library-head,.carousel-head { padding-bottom:12px; border-bottom:1px solid var(--line2); margin-bottom:20px; }
.sidebar-box-title { font-size:16px; }
.sidebar-box { border-radius:var(--r); }
.status-pill,.tag-pill { min-height:36px; padding:7px 13px; font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; border-radius:var(--r); background:transparent; border-color:var(--line2); }
.status-pill.active,.tag-pill.active { background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:none; }
.tag-filter-label { font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; padding-top:8px; }
.badge { font-weight:500; text-transform:none; letter-spacing:0; border:0; border-radius:var(--r); }
.mini-score-badge { background:#202c27ed; border:1px solid #ffffff30; color:#e2ebd8; border-radius:var(--r); padding:4px 8px; }
.ep.active,.ep-row.active { background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:none; }
.ep-row { border-radius:var(--r); font-weight:500; padding:12px; }
.player-top { margin-bottom:18px; }
.player .nav { padding-top:8px; gap:12px; }
.player-layout > .sidebar { background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:18px; }
.comment { background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:20px; }
.comment + .comment { margin-top:12px; }
.comment-body { min-width:0; }
.comment-meta > a.tag { display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.3; padding:6px 10px; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
.forum-head { margin-bottom:28px; }
.forum-cat-list { gap:12px; background:transparent; border:0; overflow:visible; }
.forum-cat-card { padding:24px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); box-shadow:none; transition:background .18s,border-color .18s; }
.forum-cat-card:hover { background:var(--surface2); border-color:var(--line3); transform:none; box-shadow:none; }
.forum-cat-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--accent-dim); color:var(--accent); border:0; }
.forum-cat-name { font-size:18px; font-weight:600; letter-spacing:-.02em; }
.forum-cat-desc { color:var(--text2); line-height:1.6; }
.forum-cat-stat-n { font-family:var(--font-display); font-weight:400; font-size:24px; }
.forum-cat-stat-l { text-transform:none; font-weight:500; letter-spacing:0; }
.forum-thread-row { background:var(--surface); border-color:var(--line2); padding:18px 20px; }
.forum-post { border:1px solid var(--line2); border-radius:var(--r); box-shadow:none; }
.forum-post-author { background:var(--bg2); border-color:var(--line2); }
.forum-post-body { padding:24px; min-width:0; }
.forum-post-text { font-size:15px; line-height:1.8; }
.forum-post-meta { padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.forum-quote { border:0; border-left:2px solid var(--accent); border-radius:var(--r); padding:16px 20px; }
.forum-quote-author { font-weight:600; text-transform:none; letter-spacing:0; }
.forum-quote-btn,.thread-mod-btn { border-radius:var(--r); padding:7px 14px; font-weight:500; text-transform:none; letter-spacing:0; }
.pf-thread-row { padding:18px 22px; gap:8px; }
.pf-stat-row { padding:11px 0; }
.score-avg-num { font-family:var(--font-display); font-weight:400; }
.search-overlay-inner { background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--shadow); }
.search-overlay-input { font-family:var(--font-display); }
.search-overlay-tab { border-radius:var(--r); font-weight:500; text-transform:none; letter-spacing:0; }
.empty-state { background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r); padding:48px 24px; }
.empty-state h3 { font-family:var(--font-display); font-size:28px; font-weight:400; }
.admin-card { padding:24px; border-radius:var(--r); }
.admin-card-title { text-transform:none; letter-spacing:0; font-size:18px; }
.um-table { border-radius:var(--r); border-color:var(--line2); }
.um-table th { background:var(--bg2); text-transform:none; letter-spacing:0; font-weight:600; }
.announce-bar { background:var(--accent-dim); color:var(--text); border-bottom:1px solid var(--line2); }
.announce-close { color:var(--text); }
/* Catalogue-wide visual language. Circles are reserved for portraits and compact account icons. */
.nav-tabs{background:transparent;border:0;padding:0;gap:18px;border-radius:0}
.nav-tab{padding:10px 4px;border-radius:0;border-bottom:2px solid transparent;min-height:44px;color:var(--text2)}
.nav-tab.active{background:transparent;box-shadow:none;border-bottom-color:var(--accent);color:var(--text)}
.nav-tab:hover{background:transparent;border-bottom-color:var(--line3)}
.account-actions{border-radius:6px;gap:3px;background:var(--bg2)}
.avatar-pill{border-radius:var(--r);background:transparent}
.neo-btn{border:1px solid var(--line3);border-radius:var(--r);box-shadow:none;transition:background .16s,color .16s,border-color .16s}
.neo-btn:hover,.neo-btn--anime:hover{transform:none;border-color:var(--accent)}
.neo-btn:active{transform:translateY(1px)}
.neo-btn--accent,.neo-btn--anime,.neo-btn--sp,.neo-btn--webtoon{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.neo-btn--ghost{background:transparent;border-color:var(--line3);color:var(--text)}
.form-input,.search input,.theme-control select{border-radius:var(--r);background:var(--surface);border-color:var(--line3)}
.form-input:focus{box-shadow:0 0 0 2px var(--accent-dim)}
.tag,.badge,.rbadge{border-radius:2px;font-weight:600}
.library-head,.hl-section-head,.carousel-head{padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:20px}
.library-head h2,.hl-section-title,.carousel-head h2{font-size:20px;font-weight:650;letter-spacing:-.025em}
.library-head h2::before,.carousel-head h2::before{display:none}
.library-head h2,.carousel-head h2,.episodes h2{padding-left:0}
.mini-card,.card,.carousel-card,.hl-card-img-wrap,.mini-thumb,.thumb,.anime-hero .cover,.hl-hero-poster img{border-radius:0}
.mini-card:hover,.card:hover,.carousel-card:hover{transform:none}
.hl-card:hover .hl-card-img-wrap{transform:none;box-shadow:0 0 0 1px var(--accent)}
.mini-card:hover .mini-title,.card:hover .title,.hl-card:hover .hl-card-title{color:var(--accent)}
.mini-body{padding-top:12px}.mini-title,.hl-card-title{font-size:14px;font-weight:650;line-height:1.45}
.hl-hero,.idx-hero{border-radius:0;border:0;box-shadow:none}
.hl-hero-title,.idx-hero-title{font-weight:600;letter-spacing:-.045em}
.hl-hero-eyebrow,.idx-hero-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:650}
.hl-hero-poster img{box-shadow:0 8px 24px #0003}
.hl-hero:hover .hl-hero-backdrop,.idx-hero:hover .idx-hero-bg{transform:scale(1.025)}
.hl-stats-bar{border-radius:0;border-top:1px solid var(--line2)}
.anime-hero,.player-layout>.sidebar,.comment,.forum-post,.forum-cat-card,.um-table{border-radius:var(--r2);box-shadow:none}
.ep,.ep-row{border-radius:2px;font-variant-numeric:tabular-nums}
.ep:hover,.ep-row:hover{border-color:var(--accent);box-shadow:none;transform:none}
.vid-wrap{border-radius:0;box-shadow:none}
.forum-cat-list{gap:0;border-top:1px solid var(--line2)}
.forum-cat-card{border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent}
.forum-cat-icon{border-radius:var(--r);background:var(--surface2)}
.forum-thread-row{border-radius:0;box-shadow:none}
.forum-quote{border-radius:0;border-left:2px solid var(--accent);background:var(--bg2)}
.forum-quote-btn,.thread-mod-btn,.score-remove-btn{border-radius:var(--r)}
.activity-item{border-radius:0}.activity-item+.activity-item{border-top:1px solid var(--line)}
.search-overlay-inner,.bug-modal,.user-menu{border-radius:var(--r3)}
.search-overlay-tab{border-radius:0;border-bottom:2px solid transparent}
.search-overlay-tab.active{background:transparent;color:var(--accent);border-bottom-color:var(--accent)}
.auth-panel{border-top:3px solid var(--accent);box-shadow:none}
.auth-intro h1{font-weight:600}.auth-intro{margin-bottom:24px}
.empty-state{border-radius:var(--r2);background:transparent;border-style:dashed}
.empty-state h3{font-weight:600}
.site-footer{background:var(--bg2);border-top:1px solid var(--line3)}
.footer-inner{padding-top:40px;padding-bottom:24px;gap:28px}
.footer-brand .brand{font-weight:650}.footer-brand p{max-width:28ch}
.footer-links a{padding-block:8px;text-underline-offset:5px}
.footer-bottom{border-top-color:var(--line2);font-variant-numeric:tabular-nums}
@media (min-width:761px) and (max-width:1024px) {
  .avatar-name { max-width:80px; }
  .nav-tabs { margin-left:8px; }
  .nav-tab { padding-inline:12px; }
  .topbar-inner { gap:10px; }
}
@media (max-width:1024px) {
  :root { --pad:22px; }
  .player-layout { grid-template-columns:1fr; }
  .player-layout .ep-list { max-height:220px; display:grid; grid-template-columns:repeat(auto-fill,minmax(75px,1fr)); gap:8px; }
  .footer-inner { grid-template-columns:1fr auto; }
  .footer-brand { grid-column:1/-1; }
  .community-grid { grid-template-columns:1fr; }
  .community-sidebar { flex-direction:row; flex-wrap:wrap; }
  .community-sidebar > * { flex:1 1 240px; }
}
@media (max-width:760px) {
  :root { --pad:16px; --topbar-h:66px; }
  .topbar-inner { gap:8px; }
  .topbar .brand { font-size:26px; }
  .nav-tabs { display:none; }
  .topbar .search-trigger { display:none; }
  .topbar .theme-toggle { margin-left:auto; }
  .topbar .tags { margin-left:0; }
  .avatar-name { display:none; }
  main.container,body.has-dock main.container { padding-top:20px; padding-bottom:32px; }
  .site-nav-mobile { display:block; width:min(420px,calc(100% - 24px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding:7px; border-radius:8px; background:var(--glass); border:1px solid var(--line3); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
  .site-nav-mobile-inner { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
  .snm-btn { min-width:0; min-height:52px; padding:6px 2px; gap:4px; font-size:11px; text-transform:none; letter-spacing:0; font-weight:600; color:var(--text2); }
  .snm-icon { display:grid; place-items:center; width:22px; height:22px; }
  .snm-btn { border-radius:var(--r); }
  .snm-btn.active { background:var(--accent); color:var(--bg); }
  .site-nav-mobile:focus-within { transform:translateX(-50%); opacity:1; pointer-events:auto; }
  body.overlay-open .site-nav-mobile,body.keyboard-open .site-nav-mobile { visibility:hidden; pointer-events:none; }
  .site-footer { padding-bottom:var(--dock-space); }
  .footer-inner { gap:20px; padding-top:28px; }
  .footer-links { gap:8px 20px; }
  .theme-control { flex-wrap:wrap; }
  .resume-toast { bottom:var(--dock-space); width:max-content; max-width:calc(100% - 32px); text-align:center; }
  .hl-hero { min-height:280px; }
  .hl-hero-inner { grid-template-columns:1fr; padding:24px; gap:16px; }
  .hl-hero-poster { display:none; }
  .hl-hero-title { font-size:36px; }
  .hl-hero-desc { -webkit-line-clamp:2; }
  .mini-grid,.grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; }
  .anime-hero { grid-template-columns:110px minmax(0,1fr); gap:16px; padding:20px; }
  .anime-hero .cover { max-width:110px; margin:0; }
  .anime-hero .meta { min-width:0; }
  .anime-hero h1 { font-size:28px; }
  .search-overlay { align-items:flex-start; overflow:auto; padding-top:calc(80px + env(safe-area-inset-top,0px)); }
  .search-overlay-inner { padding:20px; width:calc(100% - 24px); margin-inline:auto; }
  .search-overlay-input { font-size:22px; }
  .search-overlay-hint { display:none; }
  .form-input,select,textarea { font-size:16px; }
  .auth-panel { padding:24px 20px; }
  .vid-wrap { border-radius:0; }
  .vid-bar { gap:2px; padding:4px; }
  .vid-btn { width:44px; padding:4px; }
  .vid-time { font-size:10px; white-space:nowrap; }
  .vid-speed { font-size:12px; max-width:62px; padding:2px; }
  .panel { padding:20px; }
  .forum-post-meta { flex-wrap:wrap; }
  .forum-cat-card { padding:18px; }
  .forum-post-body { padding:18px; }
  .comment { padding:16px; }
  .account-action { width:44px; height:44px; }
}
@media (max-width:480px) {
  .mini-grid,.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
  .hl-card { flex-basis:145px; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-links { justify-content:space-between; gap:8px; font-size:13px; }
  .theme-control { justify-content:space-between; }
  .footer-bottom { font-size:11px; }
  .anime-hero { grid-template-columns:1fr; }
  .anime-hero > div:first-of-type + div:not(.meta) { display:flex; gap:12px; align-items:center; }
  .anime-hero .cover { width:100px; }
  .hl-hero-inner { padding:22px; }
  .hl-hero-title { font-size:32px; }
  .hl-hero-btns .neo-btn { flex:1; }
  .score-block { flex-wrap:wrap; }
}
@media (hover:none) {
  .mini-card:hover,.card:hover,.carousel-card:hover,.neo-btn:hover,.hl-card:hover .hl-card-img-wrap { transform:none; filter:none; box-shadow:none; }
}
/* Mobile navigation: animate both directions without exposing closed controls. */
.burger-btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.burger-lines { position:relative; display:block; width:22px; height:18px; }
.burger-lines span { position:absolute; left:0; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .22s ease,opacity .15s ease; }
.burger-lines span:nth-child(1) { top:1px; }
.burger-lines span:nth-child(2) { top:8px; }
.burger-lines span:nth-child(3) { top:15px; }
.burger-btn[aria-expanded=true] .burger-lines span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger-btn[aria-expanded=true] .burger-lines span:nth-child(2) { opacity:0; transform:scaleX(.3); }
.burger-btn[aria-expanded=true] .burger-lines span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.user-menu { display:flex; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top right; animation:none; transition:opacity .18s ease,transform .22s ease,visibility 0s .22s; z-index:450; width:min(340px,calc(100vw - 32px)); min-width:0; max-height:calc(100dvh - var(--topbar-h) - 28px - env(safe-area-inset-bottom,0px)); overscroll-behavior:contain; }
.user-menu.open { visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }
.user-menu .account-actions { max-width:calc(100% - 28px); flex-wrap:wrap; }
.user-menu button.user-menu-item { background:transparent; border:0; text-align:left; width:100%; cursor:pointer; font:600 13px/1.5 var(--font-display); }
.user-menu button.user-menu-item:hover { background:var(--surface2); }
.menu-backdrop { position:fixed; inset:0; z-index:420; background:rgba(7,15,11,.35); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility 0s .22s; }
body.menu-open { overflow:hidden; overscroll-behavior:none; }
body.menu-open .menu-backdrop { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
body.menu-open .topbar { z-index:430; }
body.menu-open .site-nav-mobile,body.overlay-open .site-nav-mobile,body.keyboard-open .site-nav-mobile { visibility:hidden; pointer-events:none; }
@media (max-width:760px) {
  .user-menu { right:max(16px,env(safe-area-inset-right,0px)); }
  .topbar .topbar-inner .tags { margin-left:auto; }
  .topbar-inner > .theme-toggle + .tags { margin-left:0; }
}
/* Short touch screens retain their mobile controls above the desktop breakpoint. */
@media (max-width:1024px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse) {
  :root { --topbar-h:0px; --dock-space:0px; --rail-space:calc(88px + env(safe-area-inset-right,0px)); }
  body { padding-right:var(--rail-space); padding-left:env(safe-area-inset-left,0px); }
  .topbar { position:static; height:0; min-height:0; background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .topbar-inner { height:0; min-height:0; padding:0; }
  .topbar-inner > :not(.tags),.topbar .tags > :not(.burger-btn) { display:none!important; }
  .topbar .tags { display:contents; }
  .burger-btn { display:inline-flex; position:fixed; top:calc(8px + env(safe-area-inset-top,0px)); right:calc(18px + env(safe-area-inset-right,0px)); z-index:430; background:var(--surface); border:1px solid var(--line3); box-shadow:var(--shadow-sm); }
  .site-nav-mobile { display:block!important; left:auto; right:calc(8px + env(safe-area-inset-right,0px)); top:calc(64px + env(safe-area-inset-top,0px)); bottom:calc(8px + env(safe-area-inset-bottom,0px)); width:64px; padding:5px; border-radius:8px; background:var(--glass); border:1px solid var(--line3); box-shadow:var(--shadow); overflow-y:auto; overscroll-behavior:contain; }
  .site-nav-mobile,.site-nav-mobile.snm-hidden,.site-nav-mobile:focus-within { transform:none; opacity:1; pointer-events:auto; }
  .site-nav-mobile-inner { height:100%; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(5,minmax(44px,1fr)); gap:2px; }
  .snm-btn { min-width:0; min-height:44px; padding:4px 0; gap:3px; font-size:10px; text-transform:none; letter-spacing:0; border-radius:var(--r); }
  .snm-icon { display:grid; place-items:center; width:20px; height:20px; }
  .snm-btn.active { background:var(--accent); color:var(--bg); }
  .user-menu { top:calc(8px + env(safe-area-inset-top,0px)); right:var(--rail-space); width:min(340px,calc(100vw - var(--rail-space) - 24px - env(safe-area-inset-left,0px))); max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
  main.container,body.has-dock main.container { padding-top:16px; padding-bottom:24px; }
  .site-footer { padding-bottom:24px; }
  .search-overlay { padding-top:max(16px,env(safe-area-inset-top,0px)); }
  .search-overlay-inner { padding-top:0; max-height:calc(100dvh - 32px); overflow-y:auto; }
  .resume-toast { bottom:12px; max-width:calc(100vw - var(--rail-space) - 32px); }
  body.focus-mode { padding-right:0; }
  body.focus-mode .burger-btn,body.focus-mode .site-nav-mobile { display:none!important; }
}
/* Shared full-height account drawer. Header and close control remain visible. */
.user-menu.account-drawer { inset:0 0 0 auto; width:min(400px,calc(100vw - 24px)); height:100dvh; max-height:100dvh; min-width:0; padding:0; border-radius:0; border:0; border-left:1px solid var(--line2); overflow:hidden; transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.75,.25,1),opacity .2s ease,visibility 0s .26s; }
.user-menu.account-drawer.open { transform:translateX(0); transition-delay:0s; }
.account-drawer-heading { display:flex; align-items:center; justify-content:space-between; flex:none; min-height:76px; gap:16px; padding:calc(12px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 12px 24px; border-bottom:1px solid var(--line2); }
.account-drawer-heading > strong { font-size:19px; font-weight:650; }
.drawer-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line2); border-radius:50%; background:var(--surface2); color:var(--text); cursor:pointer; flex:none; }
.account-drawer-content { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:20px max(16px,env(safe-area-inset-right,0px)) 24px 16px; }
.drawer-identity { display:flex; align-items:center; gap:18px; min-width:0; padding:8px 12px 24px; margin-bottom:12px; }
.drawer-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.drawer-identity .avatar-frame { margin:6px; }
.drawer-identity-text { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.drawer-name { font-size:18px; line-height:1.4; overflow-wrap:anywhere; }
.drawer-welcome { padding:8px 12px 24px; }
.drawer-welcome > strong { font-size:19px; }
.drawer-welcome p { margin:8px 0 0; color:var(--text2); font-size:14px; }
.drawer-actions-section { margin-top:12px; padding-top:12px; border-top:1px solid var(--line2); }
.account-drawer .account-actions { display:flex; flex-direction:column; align-items:stretch; width:100%; max-width:none; padding:0; margin:0; gap:4px; background:none; border:0; border-radius:0; }
.account-drawer .user-menu-item,.account-drawer button.user-menu-item,.account-drawer .account-actions > .account-action,.account-drawer .account-actions > .notification-bell { display:flex; align-items:center; justify-content:flex-start; gap:16px; width:100%; height:auto; min-height:54px; padding:14px 16px; margin:0; background:transparent; border:0; border-radius:var(--r2); font:600 15px/1.5 var(--font-display); color:var(--text); text-align:left; white-space:normal; }
.account-drawer .ui-icon { width:22px; height:22px; flex:0 0 22px; color:var(--text2); }
.account-drawer .account-actions > .account-action:hover,.account-drawer .account-actions > .notification-bell:hover,.account-drawer .user-menu-item:hover { background:var(--accent-dim); }
.account-drawer .account-actions > .account-action:active { transform:none; background:var(--surface2); }
.account-drawer .account-actions .notification-count { position:static; margin-left:auto; flex:none; }
.account-drawer-footer { flex:none; padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line2); color:var(--muted); font-size:12px; }
@media (max-height:600px) and (orientation:landscape) {
  .account-drawer-heading { min-height:60px; padding-block:8px; }
  .account-drawer-footer { padding-block:10px; }
  .account-drawer-content { padding-top:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
