/* Astra comfort system. Loaded after the existing page styles.
   Tokens and shared components are isolated here to keep page contracts stable. */
:root {
  --bg:#f6f7f2; --bg2:#eef1e9; --surface:#fff; --surface2:#edf1e9;
  --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:10px; --r2:16px; --r3:24px; --pad:28px; --gap:20px;
  --shadow:0 18px 48px rgba(26,48,35,.10); --shadow-sm:0 4px 16px rgba(26,48,35,.06);
  --topbar-h:76px; --dock-space:calc(100px + env(safe-area-inset-bottom,0px));
}
:root[data-theme="dark"] {
  --bg:#171d1c; --bg2:#121715; --surface:#202825; --surface2:#29332e;
  --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-size:15px; line-height:1.65; animation:none; }
main.container { width:100%; flex:1; padding-top:32px; padding-bottom:48px; }
.container { max-width:1320px; }
h1,h2,h3 { letter-spacing:-.025em; font-weight:700; overflow-wrap:anywhere; }
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:12px; background:var(--surface); color:var(--text); }
.skip-link:focus { transform:none; }
.topbar { backdrop-filter:blur(12px); }
.topbar.is-compact { height:var(--topbar-h); }
.brand { font-size:28px; font-weight:750; letter-spacing:-1.4px; 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 { gap:6px; margin-left:22px; }
.nav-tab { min-height:44px; display:flex; align-items:center; font-size:14px; text-transform:none; letter-spacing:0; font-weight:600; }
.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 var(--line2); border-radius:99px; background:var(--surface); }
.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:24px; border-radius:var(--r2); }
.neo-btn { min-height:44px; font-size:14px; font-weight:650; letter-spacing:0; text-transform:none; padding:10px 18px; border-radius:12px; white-space:normal; transition:background .16s,transform .16s; }
.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:600; text-transform:none; letter-spacing:0; border-radius:6px; }
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(--surface); border:1px solid var(--line3); border-radius:10px; min-height:46px; }
.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:10px; 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 { font-size:19px; letter-spacing:-.02em; text-transform:none; }
.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:20px; }
.mini-card,.card,.carousel-card { background:transparent; border-color:transparent; box-shadow:none; animation:none; border-radius:14px; }
.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:14px; }
.mini-body { padding:12px 2px; }
.mini-title,.hl-card-title { font-size:14px; font-weight:650; line-height:1.45; }
.mini-badges { gap:5px; flex-wrap:wrap; }
.hl-scroll-row { gap:18px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.hl-card { flex-basis:170px; }
.hl-card-img-wrap { border-radius:14px; }
.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:32px; padding:32px; }
.hl-hero-title { font-size:clamp(26px,3.5vw,42px); line-height:1.15; text-shadow:none; }
.hl-hero-poster img { box-shadow:0 12px 30px rgba(0,0,0,.2); }
.hl-hero-backdrop { filter:blur(2px) brightness(.5) saturate(.8); }
.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:28px; gap:28px; border-radius:var(--r3); }
.anime-hero-bg { opacity:.06; }
.anime-hero .cover { border-radius:14px; 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:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.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:16px; color:#fff; isolation:isolate; }
.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:16px auto!important; padding:32px; }
.auth-intro { text-align:center; margin-bottom:24px; }
.auth-intro h1 { font-size:28px; 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:20px; }
.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:10px; color:var(--text); }
.form-notice--error { border-left:3px solid #bc5555; }
.site-footer { border-top:1px solid var(--line2); background:var(--surface); margin-top:12px; }
.footer-inner { display:grid; grid-template-columns:1fr auto auto; gap:32px; align-items:center; padding-top:36px; padding-bottom:24px; 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; }
@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:6px; background:var(--glass); border:1px solid var(--line3); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
  .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.active { background:var(--accent-dim); color:var(--accent); }
  .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:30px; }
  .hl-hero-desc { -webkit-line-clamp:2; }
  .mini-grid,.grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap: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:24px; }
  .search-overlay { align-items:flex-start; overflow:auto; padding-top:calc(80px + env(safe-area-inset-top,0px)); }
  .search-overlay-inner { padding:20px; }
  .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:12px; }
  .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; }
}
@media (max-width:480px) {
  .mini-grid,.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap: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:27px; }
  .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; }
}
@media (max-height:500px) and (orientation:landscape) {
  .topbar { position:relative; }
  .search-overlay { padding-top:44px; }
  .search-overlay-inner { padding-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}