/* =========================================================================
   AniTube — YouTube-faithful UI shell for an anime streaming site.
   Design tokens mirror youtube.com (dark/light), class names are our own.
   ========================================================================= */

:root {
  --at-font: "Roboto", "Arial", sans-serif;
  --at-masthead-h: 56px;
  --at-guide-w: 240px;
  --at-mini-guide-w: 72px;
  --at-chips-h: 56px;
  --at-sticky-top: var(--at-masthead-h);
  --at-red: #ff0000;
  --at-live: #cc0000;

  /* dark (default) */
  --at-bg: #0f0f0f;
  --at-bg-raised: #212121;
  --at-bg-menu: #282828;
  --at-bg-input: #121212;
  --at-bg-search-btn: #222222;
  --at-text: #f1f1f1;
  --at-text-2: #aaaaaa;
  --at-text-3: #717171;
  --at-chip: rgba(255, 255, 255, 0.1);
  --at-chip-hover: rgba(255, 255, 255, 0.2);
  --at-layer-10: rgba(255, 255, 255, 0.2);
  --at-layer-5: rgba(255, 255, 255, 0.1);
  --at-hover: rgba(255, 255, 255, 0.1);
  --at-border: #303030;
  --at-cta: #3ea6ff;
  --at-brand-btn: #f1f1f1;
  --at-brand-btn-text: #0f0f0f;
  --at-scrim: rgba(0, 0, 0, 0.6);
  --at-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
  --at-badge-bg: rgba(0, 0, 0, 0.8);
  --at-progress-bg: rgba(255, 255, 255, 0.4);
  --at-tooltip-bg: #616161;
  --at-live-chat-bg: #181818;
  --at-mana: #a78bfa;
}
/* dark blue — soft midnight navy (dark base, tinted surfaces; same layout) */
html[data-theme="blue"] {
  color-scheme: dark;
  --at-bg: #0b1220;
  --at-bg-raised: #141e33;
  --at-bg-menu: #1a2540;
  --at-bg-input: #0e1729;
  --at-bg-search-btn: #172139;
  --at-text: #e8edf8;
  --at-text-2: #9fadc9;
  --at-text-3: #6f7f9f;
  --at-chip: rgba(140, 170, 255, 0.10);
  --at-chip-hover: rgba(140, 170, 255, 0.18);
  --at-layer-10: rgba(140, 170, 255, 0.18);
  --at-layer-5: rgba(140, 170, 255, 0.09);
  --at-hover: rgba(140, 170, 255, 0.10);
  --at-border: #243252;
  --at-cta: #7fa8ff;
  --at-brand-btn: #e8edf8;
  --at-brand-btn-text: #0b1220;
  --at-scrim: rgba(4, 8, 18, 0.65);
  --at-shadow: 0 4px 32px rgba(2, 6, 18, 0.55);
  --at-badge-bg: rgba(6, 11, 24, 0.8);
  --at-progress-bg: rgba(170, 195, 255, 0.4);
  --at-tooltip-bg: #2b3a5e;
  --at-live-chat-bg: #101a2e;
  --at-mana: #b4a2ff;
}
html[data-theme="blue"] ::-webkit-scrollbar-thumb { background: #2d3e63; }
html[data-theme="blue"] .at-hero-slide .shade { background: linear-gradient(90deg, rgba(8, 14, 28, .92) 0%, rgba(8, 14, 28, .65) 35%, rgba(8, 14, 28, .05) 70%), linear-gradient(0deg, rgba(8, 14, 28, .88) 0%, transparent 45%); }
@media (max-width: 791px) {
  html[data-theme="blue"] .at-hero-slide .shade { background: linear-gradient(0deg, var(--at-bg) 0%, rgba(8, 14, 28, .55) 45%, rgba(8, 14, 28, .1) 100%); }
}
/* blue-only soft controls — does not touch dark/light */
html[data-theme="blue"] .at-btn {
  border-radius: 999px;
  transition: background .18s ease, box-shadow .18s ease, opacity .18s ease, color .18s ease;
}
html[data-theme="blue"] .at-btn.primary,
html[data-theme="blue"] .at-hero-btns .at-btn.primary {
  background: linear-gradient(180deg, #dce7ff 0%, #c5d6ff 100%);
  color: #0b1220;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 18px rgba(70, 110, 200, .18);
}
html[data-theme="blue"] .at-btn.primary:hover,
html[data-theme="blue"] .at-hero-btns .at-btn.primary:hover {
  background: linear-gradient(180deg, #e8efff 0%, #d0ddff 100%);
  opacity: 1;
}
html[data-theme="blue"] .at-btn.cta {
  background: linear-gradient(180deg, #93b6ff 0%, #6f9bff 100%);
  color: #0b1220;
  box-shadow: 0 6px 16px rgba(80, 120, 220, .22);
}
html[data-theme="blue"] .at-btn.cta:hover { opacity: 1; filter: brightness(1.05); }
html[data-theme="blue"] .at-hero-btns .at-btn.glass,
html[data-theme="blue"] .at-btn.outline {
  background: rgba(140, 170, 255, .10);
  border: 1px solid rgba(140, 170, 255, .18);
  color: #e8edf8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="blue"] .at-hero-btns .at-btn.glass:hover,
html[data-theme="blue"] .at-btn.outline:hover {
  background: rgba(140, 170, 255, .16);
}
html[data-theme="blue"] .at-chip {
  border-radius: 999px;
  background: rgba(140, 170, 255, .08);
  border: 1px solid rgba(140, 170, 255, .10);
}
html[data-theme="blue"] .at-chip:hover { background: rgba(140, 170, 255, .14); }
html[data-theme="blue"] .at-chip.active,
html[data-theme="blue"] .at-chip[aria-pressed="true"] {
  background: rgba(140, 170, 255, .22);
  color: #e8edf8;
  border-color: rgba(140, 170, 255, .28);
}
html[data-theme="blue"] .at-pill-badge {
  background: rgba(140, 170, 255, .12);
  border: 1px solid rgba(140, 170, 255, .10);
}
html[data-theme="blue"] .at-pill-badge.sub { background: rgba(127, 168, 255, .18); color: #a8c6ff; }
html[data-theme="blue"] .at-pill-badge.mana { background: rgba(180, 162, 255, .18); color: #d2c6ff; }
html[data-theme="blue"] .at-menu-item { border-radius: 10px; }
html[data-theme="blue"] .at-shelf-arrow {
  background: rgba(140, 170, 255, .12);
  border: 1px solid rgba(140, 170, 255, .14);
  box-shadow: 0 4px 14px rgba(2, 6, 18, .28);
}
html[data-theme="blue"] .at-shelf-arrow:hover { background: rgba(140, 170, 255, .2); }
html[data-theme="light"] {
  --at-bg: #ffffff;
  --at-bg-raised: #f2f2f2;
  --at-bg-menu: #ffffff;
  --at-bg-input: #ffffff;
  --at-bg-search-btn: #f8f8f8;
  --at-text: #0f0f0f;
  --at-text-2: #606060;
  --at-text-3: #909090;
  --at-chip: rgba(0, 0, 0, 0.05);
  --at-chip-hover: rgba(0, 0, 0, 0.1);
  --at-layer-10: rgba(0, 0, 0, 0.1);
  --at-layer-5: rgba(0, 0, 0, 0.05);
  --at-hover: rgba(0, 0, 0, 0.05);
  --at-border: #cccccc;
  --at-cta: #065fd4;
  --at-brand-btn: #0f0f0f;
  --at-brand-btn-text: #ffffff;
  --at-scrim: rgba(0, 0, 0, 0.5);
  --at-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
  --at-tooltip-bg: #616161;
  --at-live-chat-bg: #ffffff;
}

* { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--at-font);
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--at-text);
  background: var(--at-bg);
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}
body.at-no-scroll { overflow: hidden; overscroll-behavior: none; } /* JS also freezes body with position:fixed (iOS) */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg.at-icon { width: 24px; height: 24px; fill: currentColor; flex: none; pointer-events: none; }
.at-icon.sm { width: 20px; height: 20px; }
.at-icon.xs { width: 16px; height: 16px; }
.at-hidden { display: none !important; }
.at-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.at-clamp-1, .at-clamp-2, .at-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.at-clamp-1 { -webkit-line-clamp: 1; }
.at-clamp-2 { -webkit-line-clamp: 2; }
.at-clamp-3 { -webkit-line-clamp: 3; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--at-text-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.at-scroll-x {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.at-scroll-x::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------------------------
   Buttons / chips (YouTube spec)
   ------------------------------------------------------------------------- */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 18px;
  font-size: 1.4rem; font-weight: 500; line-height: 3.6rem; white-space: nowrap;
  background: var(--at-chip); color: var(--at-text);
  transition: background .15s;
}
.at-btn:hover { background: var(--at-chip-hover); }
.at-btn.has-icon { padding-left: 12px; }
.at-btn.icon-only { width: 36px; padding: 0; }
.at-btn.primary { background: var(--at-brand-btn); color: var(--at-brand-btn-text); }
.at-btn.primary:hover { background: var(--at-brand-btn); opacity: .9; }
.at-btn.cta { background: var(--at-cta); color: #fff; }
.at-btn.ghost { background: transparent; }
.at-btn.outline { background: transparent; border: 1px solid var(--at-layer-10); }
.at-btn.text-cta { background: transparent; color: var(--at-cta); }
.at-btn.text-cta:hover { background: rgba(62, 166, 255, .15); }
.at-btn.lg { height: 48px; padding: 0 24px; border-radius: 24px; font-size: 1.6rem; }
.at-btn[disabled] { opacity: .5; cursor: default; }
.at-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--at-text); flex: none; position: relative;
}
.at-iconbtn:hover { background: var(--at-hover); }
.at-iconbtn.sm { width: 32px; height: 32px; }
.at-iconbtn.sm .at-icon { width: 20px; height: 20px; }
.at-badge-count {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--at-live); color: #fff; font-size: 1.1rem; line-height: 16px; font-weight: 500;
  text-align: center; border: 2px solid var(--at-bg);
  box-sizing: content-box; transform: translate(4px, -2px);
}
.at-segment { display: inline-flex; border-radius: 18px; background: var(--at-chip); overflow: hidden; height: 36px; }
.at-segment > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px 0 12px; font-weight: 500; font-size: 1.4rem; }
.at-segment > button:hover { background: var(--at-chip-hover); }
.at-segment > button + button { border-left: 1px solid var(--at-layer-10); padding: 0 12px; }
.at-segment > button.active { background: var(--at-text); color: var(--at-bg); }
.at-segment.sm { height: 32px; border-radius: 8px; }
.at-segment.sm > button { padding: 0 12px; font-size: 1.3rem; }
.at-segment.sm > button .at-icon { width: 18px; height: 18px; }
.at-segment.sm.ph-style > button { padding: 0 10px; }

.at-chips { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; min-width: 0; }
.at-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--at-chip); color: var(--at-text); font: inherit;
  font-size: 1.4rem; font-weight: 500; white-space: nowrap; transition: background .15s;
}
.at-chip:disabled { opacity: .6; cursor: default; }
.at-chip:hover { background: var(--at-chip-hover); }
.at-chip.active, .at-chip[aria-pressed="true"] { background: var(--at-text); color: var(--at-bg); }
.at-chip.outline { background: transparent; border: 1px solid var(--at-layer-10); }
.at-chip .at-icon { width: 18px; height: 18px; }

.at-pill-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: 1.2rem; font-weight: 500; line-height: 20px; background: var(--at-chip); color: var(--at-text);
}
.at-pill-badge.sub { background: rgba(62, 166, 255, .18); color: #7cc4ff; }
.at-pill-badge.dub { background: rgba(255, 196, 0, .2); color: #ffd666; }
.at-pill-badge.live { background: var(--at-live); color: #fff; }
.at-pill-badge.new { background: var(--at-text); color: var(--at-bg); }
.at-pill-badge.mana { background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.at-pill-badge.adult { background: #d62828; color: #fff; }
html[data-theme="light"] .at-pill-badge.sub { color: #065fd4; }
html[data-theme="light"] .at-pill-badge.dub { color: #8a5b00; }
html[data-theme="light"] .at-pill-badge.mana { color: #6d28d9; }

.at-tooltip {
  position: fixed; z-index: 4000; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--at-tooltip-bg); color: #fff; font-size: 1.2rem; line-height: 1.6rem; padding: 8px; border-radius: 4px; max-width: 240px;
}
.at-tooltip.show { opacity: 1; }

/* -------------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------------- */
#at-masthead {
  position: fixed; inset: 0 0 auto 0; height: var(--at-masthead-h); z-index: 2020;
  background: var(--at-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.at-mh-start { display: flex; align-items: center; min-width: 169px; }
.at-logo { display: inline-flex; align-items: center; gap: 2px; padding: 18px 14px 18px 16px; text-decoration: none; }
/* Theme-colored box + Anikoto flower + KotoPlay text + country<sup> */
.at-logo-mark {
  width: 29px; height: 20px; flex: none; display: block;
  border-radius: 6px; background: var(--at-red); position: relative;
}
.at-logo-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  background: url("../img/koto-flower.svg") center / contain no-repeat;
}
.at-logo-text {
  font-family: var(--at-font); font-weight: 700; font-size: 2rem; letter-spacing: -.08rem;
  color: var(--at-text); line-height: 1; position: relative; display: inline-block;
}
/* YouTube: tiny gray country snug to the last letter, slightly above the wordmark — no gap */
.at-logo-text sup {
  position: absolute; left: 100%; top: -4px; margin-left: 1px;
  font-size: 10px; font-weight: 400; color: var(--at-text-2);
  letter-spacing: 0; line-height: 1; white-space: nowrap;
}
.at-logo-text:has(sup:empty) sup { display: none; }
.at-auth-brand { display: inline-flex; align-items: center; gap: 6px; }
.at-auth-brand .at-logo { padding: 0; }
.at-mh-center { flex: 0 1 732px; min-width: 0; display: flex; align-items: center; justify-content: center; margin: 0 40px; }
.at-search { display: flex; flex: 1; min-width: 0; max-width: 640px; position: relative; }
.at-search-box {
  display: flex; align-items: center; flex: 1; min-width: 0; height: 40px; margin-left: 32px;
  border: 1px solid var(--at-border); border-radius: 40px 0 0 40px; background: var(--at-bg-input); padding: 0 4px 0 16px;
  position: relative;
}
.at-search-box:focus-within { border-color: #1c62b9; margin-left: 0; padding-left: 48px; }
.at-search-box:focus-within .at-search-leading { display: flex; }
.at-search-leading { display: none; position: absolute; left: 12px; width: 24px; height: 40px; align-items: center; color: var(--at-text); }
.at-search-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--at-text); font-size: 1.6rem; }
.at-search-box input::placeholder { color: var(--at-text-3); }
/* Kill Safari/Chrome native clear (blue ×) everywhere we use our own clear button */
.at-search-box input,
#at-msearch input {
  -webkit-appearance: none; appearance: none;
}
.at-search-box input::-webkit-search-decoration,
.at-search-box input::-webkit-search-cancel-button,
.at-search-box input::-webkit-search-results-button,
.at-search-box input::-ms-clear,
#at-msearch input::-webkit-search-decoration,
#at-msearch input::-webkit-search-cancel-button,
#at-msearch input::-webkit-search-results-button,
#at-msearch input::-ms-clear {
  -webkit-appearance: none !important; appearance: none !important;
  display: none !important; width: 0 !important; height: 0 !important;
}
.at-search-clear { display: none; }
.at-search-box.has-text .at-search-clear { display: inline-flex; }
.at-search-btn {
  width: 64px; height: 40px; border: 1px solid var(--at-border); border-left: 0; border-radius: 0 40px 40px 0;
  background: var(--at-bg-search-btn); display: inline-flex; align-items: center; justify-content: center;
}
.at-search-btn:hover { background: var(--at-chip-hover); }
.at-search-random { margin-left: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--at-chip); }
.at-search-random:hover { background: var(--at-chip-hover); }
.at-mh-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 225px; flex: none; position: relative; z-index: 2; }
.at-avatar-btn { width: 32px; height: 32px; border-radius: 50%; overflow: visible; margin-left: 8px; position: relative; flex: none; }
.at-avatar-btn .av { width: 100% !important; height: 100% !important; display: block; overflow: visible; }
.at-avatar-btn > img, .at-avatar-btn .av > img:not(.at-deco-img) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* search suggestions */
.at-suggest {
  position: absolute; top: 44px; left: 32px; right: 0; max-width: 608px; z-index: 2030; display: none;
  background: var(--at-bg-menu); border-radius: 12px; box-shadow: var(--at-shadow); padding: 12px 0; overflow: hidden;
}
.at-suggest.open { display: block; }
.at-suggest-item { display: flex; align-items: center; gap: 12px; padding: 6px 16px; height: 44px; cursor: pointer; }
.at-suggest-item:hover, .at-suggest-item.active { background: var(--at-hover); }
.at-suggest-item img { width: 28px; height: 40px; object-fit: cover; border-radius: 4px; }
.at-suggest-item .t { flex: 1; min-width: 0; font-size: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-suggest-item .t small { display: block; font-size: 1.2rem; color: var(--at-text-2); line-height: 1.6rem; }
.at-suggest-item.more { color: var(--at-cta); font-size: 1.4rem; font-weight: 500; justify-content: center; }

/* -------------------------------------------------------------------------
   Guide (sidebar)
   ------------------------------------------------------------------------- */
#at-guide {
  position: fixed; top: var(--at-masthead-h); left: 0; bottom: 0; width: var(--at-guide-w); z-index: 2010;
  background: var(--at-bg); overflow-y: auto; overflow-x: hidden; padding: 0 12px 12px; scrollbar-width: thin;
}
#at-guide::-webkit-scrollbar { width: 8px; }
#at-guide:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
.at-guide-section { padding: 12px 0; border-bottom: 1px solid var(--at-layer-10); }
.at-guide-section:last-child { border-bottom: 0; }
.at-guide-title { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 1.6rem; font-weight: 500; line-height: 2.2rem; color: var(--at-text); }
.at-guide-title a { display: inline-flex; align-items: center; gap: 4px; }
.at-guide-title .at-icon { width: 16px; height: 16px; }
.at-guide-item {
  display: flex; align-items: center; gap: 24px; height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 1.4rem; line-height: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--at-text);
}
.at-guide-item:hover { background: var(--at-hover); }
.at-guide-item.active { background: var(--at-hover); font-weight: 500; }
.at-guide-item .at-icon { flex: none; }
.at-guide-item .av { width: 24px; height: 24px; position: relative; overflow: visible; flex: none; }
.at-guide-item img:not(.at-deco-img) { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.at-guide-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.at-guide-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--at-cta); flex: none; }
.at-guide-item .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--at-live); flex: none; box-shadow: 0 0 0 2px var(--at-bg); }
.at-guide-footer { padding: 16px 12px; font-size: 1.3rem; line-height: 1.8rem; color: var(--at-text-2); }
.at-guide-footer a { margin-right: 8px; font-weight: 500; color: var(--at-text-2); }
.at-guide-footer .copy { margin-top: 12px; color: var(--at-text-3); font-size: 1.2rem; }

/* Mini guide */
#at-mini-guide {
  position: fixed; top: var(--at-masthead-h); left: 0; bottom: 0; width: var(--at-mini-guide-w); z-index: 2010; background: var(--at-bg); padding: 0 4px; display: none;
}
.at-mini-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 64px; height: 74px; padding: 16px 0 14px; border-radius: 10px; font-size: 1rem; line-height: 1.4rem; color: var(--at-text);
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.at-mini-item:hover { background: var(--at-hover); }
.at-mini-item.active { font-weight: 500; }
.at-mini-item .at-icon { width: 24px; height: 24px; }

/* Guide drawer (overlay when on compact layouts) */
.at-guide-drawer-head { display: none; align-items: center; height: var(--at-masthead-h); padding: 0 4px 0 4px; margin-bottom: 0; }
#at-guide-scrim { position: fixed; inset: 0; background: var(--at-scrim); z-index: 2005; display: none; }

/* layout modes */
body[data-guide="full"] #at-guide { display: block; }
body[data-guide="full"] #at-mini-guide { display: none; }
body[data-guide="mini"] #at-guide { display: none; }
body[data-guide="mini"] #at-mini-guide { display: block; }
body[data-guide="hidden"] #at-guide, body[data-guide="hidden"] #at-mini-guide { display: none; }
body[data-guide="drawer"] #at-guide { display: block; transform: translateX(0); top: 0; z-index: 2100; }
body[data-guide="drawer"] #at-guide .at-guide-drawer-head { display: flex; }
body[data-guide="drawer"] #at-guide-scrim { display: block; }
body[data-guide="drawer"] #at-mini-guide { display: none; }

#at-page { padding-top: var(--at-masthead-h); min-height: 100vh; }
body[data-guide="full"] #at-page { margin-left: var(--at-guide-w); }
body[data-guide="mini"] #at-page { margin-left: var(--at-mini-guide-w); }
body[data-guide="hidden"] #at-page, body[data-guide="drawer"] #at-page { margin-left: 0; }
body[data-base-guide="hidden"][data-guide="drawer"] #at-page { margin-left: 0; }
body[data-base-guide="mini"][data-guide="drawer"] #at-page { margin-left: var(--at-mini-guide-w); }

/* -------------------------------------------------------------------------
   Menus / popups / sheets / toasts / modals
   ------------------------------------------------------------------------- */
.at-menu {
  position: absolute; z-index: 1800; min-width: 220px; max-width: 320px; max-height: none; overflow: visible;
  background: var(--at-bg-menu); border-radius: 12px; box-shadow: var(--at-shadow); padding: 8px 0; display: none;
}
.at-menu.open { display: block; }
.at-menu.at-over-chat { z-index: 2200; }
.at-menu-item {
  display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px 0 16px; font-size: 1.4rem; line-height: 2rem; cursor: pointer; width: 100%; text-align: left; color: var(--at-text);
}
.at-menu-item:hover { background: var(--at-hover); }
.at-menu-item.active { background: var(--at-hover); }
.at-menu-item .at-icon { color: var(--at-text); }
.at-menu-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-menu-item .end { color: var(--at-text-2); font-size: 1.3rem; display: inline-flex; align-items: center; gap: 4px; }
.at-menu-item .end .at-icon { width: 16px; height: 16px; }
.at-menu-item .check { width: 20px; height: 20px; visibility: hidden; }
.at-menu-item.checked .check { visibility: visible; }
.at-menu-sep { height: 1px; background: var(--at-layer-10); margin: 8px 0; }
.at-menu-head { display: flex; align-items: center; gap: 16px; padding: 8px 16px 16px; }
.at-menu-head .av { position: relative; overflow: visible; flex: none; }
.at-menu-head img:not(.at-deco-img) { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.at-menu-head .name { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; }
.at-menu-head .handle { font-size: 1.25rem; line-height: 1.7rem; font-weight: 400; color: var(--at-text-2); }
.at-menu-head .link { font-size: 1.4rem; color: var(--at-cta); display: block; margin-top: 4px; }
.at-menu-mana { margin: 0 16px 8px; padding: 10px 12px; border-radius: 10px; background: var(--at-chip); display: flex; align-items: center; justify-content: space-between; font-size: 1.3rem; }
.at-menu-mana b { font-size: 1.6rem; color: var(--at-mana); display: inline-flex; align-items: center; gap: 6px; }
.at-menu-mana b .at-icon { width: 18px; height: 18px; }
.at-menu-title { padding: 8px 16px; font-size: 1.2rem; color: var(--at-text-2); text-transform: uppercase; letter-spacing: .05em; }

.at-popup {
  position: fixed; z-index: 3000; width: 480px; max-width: calc(100vw - 32px); max-height: min(642px, calc(100vh - 80px));
  background: var(--at-bg-menu); border-radius: 12px; box-shadow: var(--at-shadow); display: none; flex-direction: column; overflow: hidden;
}
.at-popup.open { display: flex; }
.at-popup-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--at-layer-10); font-size: 1.6rem; font-weight: 500; }
.at-popup-body { overflow-y: auto; flex: 1; }
.at-popup-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; overflow-x: auto; scrollbar-width: none; }

.at-sheet-scrim { position: fixed; inset: 0; background: var(--at-scrim); z-index: 3500; display: none; }
.at-sheet-scrim.open { display: block; }
.at-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3600; max-height: 85vh; display: none; flex-direction: column;
  background: var(--at-bg-menu); border-radius: 16px 16px 0 0; box-shadow: var(--at-shadow); transform: translateY(100%);
}
/* End at transform:none. translateY(0) is still a transform, and iOS will not scroll inside it. */
.at-sheet.open { display: flex; animation: at-sheet-in .25s var(--at-ease) forwards; }
.at-sheet.closing { display: flex; animation: at-sheet-out .25s var(--at-ease) forwards; }
@keyframes at-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes at-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
.at-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--at-text-3); margin: 8px auto 4px; flex: none; }
.at-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; font-size: 2rem; font-weight: 700; flex: none; }
.at-sheet-tools { display: flex; align-items: center; }
#at-sheet-info[hidden] { display: none !important; }
.at-cm-ysort, .at-cm-yrules { display: none; }
#at-sheet-body .at-comments-head { display: none; }
#at-sheet-body .at-cm-ysort { display: flex; gap: 8px; margin: 2px 0 12px; }
#at-sheet-body .at-cm-ypill {
  height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--at-chip); color: var(--at-text);
  font: inherit; font-size: 1.4rem; font-weight: 500; cursor: pointer;
}
#at-sheet-body .at-cm-ypill.on { background: var(--at-text); color: var(--at-bg); }
#at-sheet-body .at-cm-yrules { display: block; margin: 0 0 16px; color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem; }
#at-sheet-body .at-cm-yrules button { border: 0; padding: 0; background: none; color: var(--at-text); font: inherit; font-weight: 600; cursor: pointer; }
.at-crules h3 { margin: 16px 0 6px; font-size: 1.5rem; }
.at-crules h3:first-child { margin-top: 0; }
.at-crules ul { margin: 0; padding-left: 18px; color: var(--at-text-2); font-size: 1.35rem; line-height: 1.9rem; }
.at-crules li + li { margin-top: 4px; }
.at-crules a { color: var(--at-cta); }
.at-sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); flex: 1; min-height: 0; }
/* Sort / comment ⋮ while the Comments sheet is open: small card rising from the bottom over a dim backdrop. */
.at-sheet-menu { position: fixed; inset: 0; z-index: 3700; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .2s ease; }
.at-sheet-menu.open { background: rgba(0, 0, 0, .45); }
.at-sheet-menu[hidden] { display: none !important; }
.at-sheet-menu.at-over-modal { z-index: 3950; }
.at-sheet-menu-panel {
  width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--at-bg-menu); border-radius: 16px 16px 0 0; box-shadow: var(--at-shadow);
  transform: translateY(100%);
}
.at-sheet-menu.open .at-sheet-menu-panel { animation: at-sheet-in .22s var(--at-ease) forwards; }
/* YouTube-style Replies screen (phone): sits over the Comments sheet (3600), under Sort / ⋮ menus (3700). */
.at-rv { position: fixed; inset: 0; z-index: 3650; display: flex; align-items: flex-end; justify-content: center; }
.at-rv-panel {
  width: 100%; max-width: 640px; height: 85vh; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--at-bg-menu); border-radius: 16px 16px 0 0; box-shadow: var(--at-shadow); animation: at-rv-in .22s var(--at-ease) forwards;
}
@keyframes at-rv-in { from { transform: translateY(100%); } to { transform: none; } }
.at-rv-head { display: flex; align-items: center; gap: 4px; padding: 8px; flex: none; font-size: 1.8rem; font-weight: 700; border-bottom: 1px solid var(--at-layer-10); }
.at-rv-head span { flex: 1; padding-left: 8px; }
.at-rv-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; }
#at-sheet-body { overflow-anchor: none; }
.at-rv-tree { padding: 12px 12px 4px; }
.at-rv-tree > .at-comment { margin-bottom: 4px; }
.at-rv-tree > .at-comment > .cm-body > .cm-thread > .cm-replies { display: block; }
.at-rv-tree > .at-comment > .cm-body > .cm-thread > .cm-replies-toggle { display: none; }
.at-rv-note { color: var(--at-text-2); font-size: 1.4rem; padding: 8px 16px 16px; margin: 0; text-align: center; }
.at-rv-bar { flex: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--at-layer-10); background: var(--at-bg-menu); }
.at-rv-tools { display: none; padding: 0 0 6px 36px; }
.at-rv-bar.on .at-rv-tools { display: block; }
.at-rv-tools .at-fmt-bar { border: 0; background: transparent; padding: 0; flex-wrap: nowrap; gap: 0; }
.at-rv-tools .at-cfmt > button, .at-rv-tools .at-cfmt .at-iconbtn { width: 28px; height: 28px; min-width: 28px; padding: 0; font-size: 1.2rem; color: var(--at-text-2); }
.at-rv-tools .at-cfmt .at-icon, .at-rv-tools .at-cfmt .at-iconbtn .at-icon { width: 16px; height: 16px; }
.at-rv-tools .at-fmt-sep { height: 16px; margin: 0 2px; }
.at-rv-row { display: flex; align-items: flex-end; gap: 10px; }
.at-rv-row .av { flex: none; margin-bottom: 4px; }
.at-rv-row textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: var(--at-chip); color: var(--at-text); border-radius: 18px; padding: 9px 14px; font: inherit; font-size: 1.4rem; line-height: 2rem; max-height: 120px; }
.at-rv-row .at-md-preview { flex: 1; min-width: 0; min-height: 36px; padding: 8px 14px; border: 0; }
.at-rv-row [data-rv-send] { flex: none; color: var(--at-cta); }
.at-rv-row [data-rv-send][disabled] { opacity: .35; }
.at-rv-guest { width: 100%; height: 40px; border-radius: 20px; background: var(--at-chip); color: var(--at-text-2); text-align: left; padding: 0 16px; font-size: 1.4rem; }
.at-sheet-menu-head { flex: none; padding: 14px 16px 6px; font-size: 1.5rem; font-weight: 700; color: var(--at-text-2); }
.at-sheet-menu-body { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 0 calc(8px + env(safe-area-inset-bottom)); }

.at-modal-scrim { position: fixed; inset: 0; background: var(--at-scrim); z-index: 3800; display: none; align-items: center; justify-content: center; padding: 16px; }
.at-modal-scrim.open { display: flex; }
.at-modal-scrim.at-crop-scrim { background: rgba(0, 0, 0, .28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html.at-reduced-motion .at-modal-scrim.at-crop-scrim,
body.at-reduced-motion .at-modal-scrim.at-crop-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .62); }
.at-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: var(--at-bg-menu); border-radius: 12px; box-shadow: var(--at-shadow); }
.at-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 8px 24px; font-size: 2rem; font-weight: 700; }
.at-modal-body { padding: 8px 24px 24px; font-size: 1.4rem; }
.at-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 24px 24px; }
/* Same pill as comment Comment / Reply — not the blue --at-cta link color */
.at-modal-foot .at-btn.cta {
  background: var(--at-brand-btn); color: var(--at-brand-btn-text); font-weight: 500;
}
.at-modal-foot .at-btn.cta:hover { opacity: .9; }
/* Mapper download modal (same links Anikoto pulls from mapper.nekostream.site) */
.at-dl-list { display: flex; flex-direction: column; gap: 10px; }
.at-dl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--at-layer-10); flex-wrap: wrap; }
.at-dl-row:first-child { border-top: 0; padding-top: 0; }
.at-dl-label { min-width: 120px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--at-text-2); }
.at-dl-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.at-dl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--at-chip); color: var(--at-text); font-size: 1.3rem; font-weight: 500; text-decoration: none;
}
.at-dl-chip:hover { background: var(--at-cta); color: #fff; }
.at-dl-chip .at-icon { width: 16px; height: 16px; }

.at-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px); z-index: 5000;
  background: var(--at-text); color: var(--at-bg); padding: 0 24px; height: 48px; display: flex; align-items: center; gap: 24px;
  border-radius: 8px; font-size: 1.4rem; font-weight: 400; opacity: 0; transition: all .25s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3); max-width: calc(100vw - 32px); white-space: nowrap;
}
.at-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.at-toast.has-check { gap: 12px; padding-left: 16px; }
.at-toast-check { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; animation: at-toast-pop .35s cubic-bezier(.2, .8, .2, 1); }
.at-toast-check svg { width: 22px; height: 22px; display: block; }
.at-toast-check circle,
.at-toast-check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.at-toast-check circle { stroke-dasharray: 57; stroke-dashoffset: 57; animation: at-toast-ring .35s ease forwards; }
.at-toast-check path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: at-toast-tick .28s ease .2s forwards; }
@keyframes at-toast-pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes at-toast-ring { to { stroke-dashoffset: 0; } }
@keyframes at-toast-tick { to { stroke-dashoffset: 0; } }
body.at-reduced-motion .at-toast-check,
body.at-reduced-motion .at-toast-check circle,
body.at-reduced-motion .at-toast-check path { animation: none; stroke-dashoffset: 0; }
.at-toast button { color: var(--at-cta); font-weight: 500; }
html[data-theme="light"] .at-toast button { color: #8ab4f8; }

/* -------------------------------------------------------------------------
   Chips bar (sticky under masthead)
   ------------------------------------------------------------------------- */
.at-chipbar {
  position: sticky; top: var(--at-sticky-top); z-index: 1900; height: var(--at-chips-h); display: flex; align-items: center; gap: 12px;
  background: var(--at-bg); padding: 0 24px; margin-bottom: 0;
}
.at-chipbar .at-chips { flex: 1; overflow-x: auto; scrollbar-width: none; }
.at-chipbar .at-chips::-webkit-scrollbar { display: none; }
.at-chipbar .fade { position: absolute; right: 24px; top: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, transparent, var(--at-bg) 60%); pointer-events: none; }
.at-chipbar .arrow { position: absolute; right: 24px; top: 8px; z-index: 2; }

/* -------------------------------------------------------------------------
   Home / grids
   ------------------------------------------------------------------------- */
.at-browse { padding: 0 24px 48px; }
#at-browse-results[aria-busy="true"] { pointer-events: none; }
#at-browse-sk .at-sk {
  background: linear-gradient(90deg, var(--at-bg-raised, #272727) 25%, rgba(255,255,255,.16) 50%, var(--at-bg-raised, #272727) 75%);
  background-size: 200% 100%;
}
html[data-theme="light"] #at-browse-sk .at-sk {
  background: linear-gradient(90deg, #e4e4e4 25%, #f7f7f7 50%, #e4e4e4 75%);
  background-size: 200% 100%;
}
#at-browse-sk .at-sk-thumb { min-height: 160px; }
@media (max-width: 791px) {
  html:not(.at-compact-cards) body:not(.at-compact-cards) #at-browse-sk.at-grid { margin-top: 8px; row-gap: 20px; }
  html:not(.at-compact-cards) body:not(.at-compact-cards) #at-browse-sk .at-sk-thumb { border-radius: 0; min-height: 0; }
  html:not(.at-compact-cards) body:not(.at-compact-cards) #at-browse-sk .at-sk-row { padding: 0 12px; }
}
.at-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 16px; row-gap: 40px; margin-top: 24px;
}
.at-grid.dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); row-gap: 32px; }
.at-grid.posters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); row-gap: 24px; }
.at-grid.playlists { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 16px; row-gap: 24px; }

/* video card (anime episode) */
.at-card { display: flex; flex-direction: column; position: relative; cursor: pointer; }
.at-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--at-bg-raised); }
.at-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.at-thumb .poster-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(24px) saturate(1.3); transform: scale(1.3); opacity: .9; }
.at-thumb .poster-fit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.at-thumb .dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 4px; border-radius: 4px; background: var(--at-badge-bg); color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2rem; }
.at-thumb .tl { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.at-thumb .tl .at-pill-badge { background: var(--at-badge-bg); color: #fff; }
.at-thumb .tl .at-pill-badge.sub { color: #7cc4ff; }
.at-thumb .tl .at-pill-badge.dub { color: #ffd666; }
.at-thumb .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--at-progress-bg); }
.at-thumb .progress i { display: block; height: 100%; background: var(--at-red); }
.at-thumb .hover-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; background: rgba(0, 0, 0, .25); transition: opacity .2s; }
.at-thumb .hover-play .at-icon { width: 56px; height: 56px; color: #fff; }
.at-card:hover .at-thumb .hover-play { opacity: 1; }
.at-card:hover .at-thumb { border-radius: 0; }
.at-card:hover .at-thumb img { transform: none; }
.at-card-body { display: flex; gap: 12px; margin-top: 12px; }
.at-card-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; margin-top: 2px; }
.at-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.at-card-text { flex: 1; min-width: 0; }
.at-card-title { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; color: var(--at-text); margin: 0 0 4px; }
.at-card-meta { font-size: 1.4rem; line-height: 2rem; color: var(--at-text-2); }
.at-card-meta .row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.at-card-meta .verified { width: 14px; height: 14px; }
.at-card-meta .sep::before { content: "•"; margin: 0 2px; }
/* Star and the number share one center line. line-height:1 keeps the digits the same height as the icon. */
.at-card-meta .at-score { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.at-card-meta .at-score .at-icon { width: 14px; height: 14px; display: block; flex: none; }
.at-card-menu { width: 24px; height: 24px; flex: none; align-self: flex-start; opacity: 0; color: var(--at-text); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.at-card:hover .at-card-menu, .at-card-menu:focus { opacity: 1; }
.at-card-menu:hover { background: var(--at-hover); }
.at-card.compact .at-card-body { margin-top: 8px; }

/* poster card (portrait, used in "Top anime" shelf & profile favorites) */
.at-poster-card { display: flex; flex-direction: column; min-width: 0; width: 100%; box-sizing: border-box; cursor: pointer; position: relative; }
.at-poster-card .pc-img { position: relative; aspect-ratio: 9 / 13; border-radius: 12px; overflow: hidden; background: var(--at-bg-raised); width: 100%; }
.at-poster-card .pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-poster-card .rank { position: absolute; left: 8px; top: 4px; font-size: 5.6rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 2px #000; opacity: .95; pointer-events: none; }
.at-poster-card .pc-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); display: flex; gap: 4px; overflow: hidden; }
.at-poster-card .pc-title { font-size: 1.4rem; line-height: 2rem; font-weight: 500; margin-top: 8px; width: 100%; min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.at-poster-card .pc-meta { font-size: 1.2rem; color: var(--at-text-2); line-height: 1.8rem; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-poster-card:hover .pc-img img { opacity: .85; }

.at-shelf-track .at-poster-card { width: 180px; flex: 0 0 180px; }

/* shelf */
.at-shelf { margin-top: 24px; position: relative; }
.at-shelf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.at-shelf-head .at-icon.brand { color: var(--at-red); width: 24px; height: 24px; }
.at-shelf-title { font-size: 2rem; line-height: 2.8rem; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.at-shelf-title small { font-size: 1.4rem; color: var(--at-text-2); font-weight: 400; }
.at-shelf-head .spacer { flex: 1; }
.at-shelf-head .at-chips { gap: 8px; }
.at-shelf-head .at-chip { height: 28px; font-size: 1.3rem; padding: 0 10px; }
.at-shelf-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.at-shelf-track::-webkit-scrollbar { display: none; }
.at-shelf-track > * { scroll-snap-align: start; }
.at-shelf-track .at-card { width: 300px; flex: none; }
.at-shelf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; background: var(--at-bg-raised); color: var(--at-text);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 4px rgba(0, 0, 0, .3), 0 0 4px rgba(0, 0, 0, .2);
}
html[data-theme="light"] .at-shelf-arrow { background: #fff; }
.at-shelf-arrow:hover { background: var(--at-bg-menu); }
.at-shelf-arrow.prev { left: -20px; }
.at-shelf-arrow.next { right: -20px; }
.at-shelf-arrow[disabled] { display: none; }
.at-shelf-divider { height: 1px; background: var(--at-layer-10); margin: 24px 0 0; }

/* hero / spotlight — stacked crossfade (not horizontal scroll) */
.at-hero { margin: 24px 0 0; position: relative; width: 100%; min-width: 0; align-self: stretch; }
.at-hero-viewport, .at-hero-track {
  position: relative; overflow: hidden; border-radius: 12px; cursor: grab;
  width: 100%; aspect-ratio: 21 / 8; min-height: 320px; max-height: 480px; background: var(--at-bg-raised);
}
/* Very wide / zoomed-out screens: keep full width and let the banner grow instead of shrinking to a small box. */
@media (min-width: 1700px) {
  .at-hero-viewport, .at-hero-track { aspect-ratio: auto; height: clamp(420px, 30vw, 640px); max-height: none; }
  .at-hero-content { width: min(720px, 50%); padding: 40px 56px; }
  .at-hero-nav { right: 56px; bottom: 40px; }
  .at-hero-dots { left: 56px; }
}
.at-hero-viewport.is-grabbing, .at-hero-track.is-grabbing { cursor: grabbing; user-select: none; }
.at-hero-slide {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity .7s ease-in-out;
}
.at-hero-slide.is-on { opacity: 1; pointer-events: auto; z-index: 1; }
.at-hero-slide img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.at-hero-slide .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 15, 15, .92) 0%, rgba(15, 15, 15, .65) 35%, rgba(15, 15, 15, .05) 70%), linear-gradient(0deg, rgba(15, 15, 15, .85) 0%, transparent 45%); }
.at-hero-content {
  position: absolute; left: 0; bottom: 0; top: 0; width: min(560px, 60%); padding: 32px 40px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; color: #fff;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease-out .15s, transform .5s ease-out .15s;
}
.at-hero-slide.is-on .at-hero-content { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .at-hero-slide, .at-hero-content { transition: none !important; }
}
body.at-reduced-motion .at-hero-slide,
body.at-reduced-motion .at-hero-content { transition: none !important; }
.at-hero-kicker { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.at-hero-logo {
  display: block; max-width: min(420px, 100%); max-height: 110px; width: auto; height: auto;
  object-fit: contain; object-position: left bottom; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
}
.at-hero-title { font-size: 3.2rem; line-height: 3.8rem; font-weight: 700; margin: 0; letter-spacing: -.02rem; }
.at-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 1.3rem; color: rgba(255, 255, 255, .85); }
.at-hero-meta .at-pill-badge { background: rgba(255, 255, 255, .15); color: #fff; }
.at-hero-desc { font-size: 1.4rem; line-height: 2rem; color: rgba(255, 255, 255, .8); }
.at-hero-btns { display: flex; gap: 8px; margin-top: 6px; }
.at-hero-btns .at-btn.primary { background: #f1f1f1; color: #0f0f0f; }
.at-hero-btns .at-btn.glass { background: rgba(255, 255, 255, .15); color: #fff; }
.at-hero-btns .at-btn.glass:hover { background: rgba(255, 255, 255, .25); }
.at-hero-nav { position: absolute; right: 40px; bottom: 32px; z-index: 2; display: flex; gap: 8px; align-items: center; }
.at-hero-nav .at-shelf-arrow { position: static; transform: none; width: 36px; height: 36px; background: rgba(255, 255, 255, .15); color: #fff; box-shadow: none; }
.at-hero-nav .at-shelf-arrow:hover { background: rgba(255, 255, 255, .3); }
/* Light only: shelf arrows force #fff (higher specificity) → white disc + white chevron. Keep hero frost identical to dark. */
html[data-theme="light"] .at-hero-nav .at-shelf-arrow {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="light"] .at-hero-nav .at-shelf-arrow:hover {
  background: rgba(255, 255, 255, .3) !important;
}
.at-hero-dots { position: absolute; left: 40px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.at-hero-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .4); transition: all .2s; cursor: pointer; }
.at-hero-dots i.on { width: 20px; background: #fff; }

/* list rows (search results / browse / history) */
.at-row { display: flex; gap: 16px; padding: 0; cursor: pointer; position: relative; }
.at-row .at-thumb { width: 360px; max-width: 50%; flex: none; }
.at-row .r-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-row .r-title { font-size: 1.8rem; line-height: 2.6rem; font-weight: 400; margin: 0; }
.at-row .r-meta { font-size: 1.2rem; color: var(--at-text-2); line-height: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.at-row .r-owner { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 12px 0; font-size: 1.2rem; line-height: 1.6rem; color: var(--at-text-2); min-width: 0; }
.at-row .r-owner img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.at-row .r-owner .studio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row .r-owner .sep { flex: none; }
.at-row .r-owner .at-score { display: inline-flex; align-items: center; gap: 3px; flex: none; white-space: nowrap; line-height: 1; }
.at-row .r-owner .at-score .at-icon { width: 14px; height: 14px; display: block; flex: none; }
.at-row .r-desc { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); }
.at-row .r-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.at-row .at-card-menu { opacity: 0; }
.at-row:hover .at-card-menu { opacity: 1; }
.at-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.at-rows.ranked .at-row { padding-left: 48px; }
.at-rows.ranked .at-row .rank { position: absolute; left: 0; top: 0; width: 40px; text-align: center; font-size: 2.4rem; font-weight: 700; color: var(--at-text-2); line-height: 1; padding-top: 2px; }

/* compact card (watch sidebar) */
.at-compact { display: flex; gap: 8px; cursor: pointer; position: relative; align-items: flex-start; }
.at-compact .at-thumb { width: 168px; flex: none; border-radius: 8px; }
.at-compact .c-body { flex: 1; min-width: 0; padding-right: 28px; }
.at-compact .c-title { font-size: 1.4rem; line-height: 2rem; font-weight: 500; margin: 0 0 2px; }
.at-compact .c-meta { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); }
.at-compact .c-owner { display: inline-flex; align-items: center; gap: 4px; }
.at-compact .c-owner .at-icon { width: 12px; height: 12px; color: var(--at-text-2); }
.at-compact .c-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.at-compact .c-badges .at-pill-badge { height: 16px; font-size: 1rem; line-height: 16px; padding: 0 5px; }
.at-compact .at-card-menu { position: absolute; right: 0; top: 0; opacity: 0; }
.at-compact:hover .at-card-menu { opacity: 1; }
/* Seasons sequence (YouTube playlist): index column + "Now watching" row */
.at-side-seq { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; font-size: 1.4rem; font-weight: 500; }
.at-side-seq span { font-size: 1.2rem; font-weight: 400; color: var(--at-text-2); }
.at-compact.has-idx { padding: 4px 8px 4px 0; border-radius: 8px; }
.at-compact .c-idx { flex: none; width: 24px; align-self: center; text-align: center; font-size: 1.2rem; color: var(--at-text-2); }
.at-compact .c-idx .at-icon { width: 14px; height: 14px; color: var(--at-text); }
.at-compact.is-now { background: var(--at-layer-10, rgba(255,255,255,.1)); }
.at-compact.is-now .c-title { font-weight: 700; }
.at-compact .c-now { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 1.1rem; font-weight: 500; }
.at-compact .c-now .at-icon { width: 12px; height: 12px; color: #fff; }
.at-pill-badge.airing { background: rgba(74, 222, 128, .18); color: #4ade80; }

/* page header */
.at-page-head { display: flex; align-items: center; gap: 16px; padding: 24px 0 0; }
.at-page-head h1 { font-size: 3.6rem; line-height: 5rem; font-weight: 700; margin: 0; }
.at-page-head h1.sm { font-size: 2.4rem; line-height: 3.2rem; }
.at-page-head .at-icon.big { width: 48px; height: 48px; }
.at-page-sub { color: var(--at-text-2); font-size: 1.4rem; }
.at-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--at-layer-10); margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.at-tabs::-webkit-scrollbar { display: none; }
.at-tab { position: relative; height: 48px; padding: 0 16px; font-size: 1.6rem; font-weight: 500; color: var(--at-text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: none; }
@media (hover: hover) { .at-tab:hover { color: var(--at-text); } }   /* no sticky "hover" on touch (a tapped tab looked active) */
.at-tab.active { color: var(--at-text); }
.at-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--at-text); }
.at-tab .count { font-size: 1.2rem; color: var(--at-text-2); }
.at-empty { text-align: center; padding: 80px 24px; color: var(--at-text-2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* only the hero glyph — not icons inside the CTA button (those stay 24px via svg.at-icon) */
.at-empty > .at-icon { width: 96px; height: 96px; color: var(--at-text-3); }
.at-empty .at-btn .at-icon { width: 20px; height: 20px; color: inherit; }
.at-empty h2 { font-size: 2.4rem; line-height: 3.2rem; margin: 0; color: var(--at-text); font-weight: 400; }
.at-empty p { margin: 0; font-size: 1.4rem; max-width: 420px; }

/* -------------------------------------------------------------------------
   Watch page
   ------------------------------------------------------------------------- */
#at-watch { display: flex; justify-content: center; padding: 24px 24px 48px; gap: 24px; }
.at-primary { flex: 1 1 auto; min-width: 0; max-width: 1280px; }
.at-secondary { width: 402px; flex: none; }
body.at-theater .at-secondary, body.at-theater #at-watch { display: block; padding: 0; }
body.at-theater .at-primary { max-width: none; }
body.at-theater .at-player-wrap { border-radius: 0; max-height: calc(100vh - var(--at-masthead-h) - 169px); aspect-ratio: auto; height: calc(100vh - var(--at-masthead-h) - 169px); }
body.at-theater .at-below { padding: 0 24px; }
body.at-theater .at-secondary { padding: 24px 24px 0; width: auto; }
/* Lights off = cinema: real scrim (not body::before — that fought the persistent #at-pl host). Player + ctrlbar stay above. */
.at-lights-scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .92);
  z-index: 2050; display: none; cursor: pointer;
}
.at-lights-scrim.open { display: block; }
body.at-lights-off .at-player-wrap,
body.at-lights-off .at-player-sticky { position: relative; z-index: 2060; }
body.at-lights-off #at-ctrlbar { position: relative; z-index: 2062; }
body.at-lights-off #at-masthead,
body.at-lights-off #at-bottomnav { opacity: .12; }
.at-player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.at-player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.at-player-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #000; }
.at-player-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.at-player-poster .big-play { position: relative; width: 68px; height: 48px; border-radius: 14px; background: rgba(33, 33, 33, .8); display: flex; align-items: center; justify-content: center; }
.at-player-poster .big-play .at-icon { width: 36px; height: 36px; color: #fff; }
.at-player-poster:hover .big-play { background: var(--at-red); }
.at-player-poster .pp-info { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-size: 1.8rem; font-weight: 400; }
.at-player-poster .pp-info img { position: static; width: 40px; height: 40px; border-radius: 50%; opacity: 1; }
.at-player-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
.at-player-bar i { display: block; height: 100%; width: 0%; background: var(--at-red); }

/* Site player controls (autoplay / light / prev-next) */
.at-ctrlbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.at-ctrlbar .group { display: inline-flex; align-items: center; gap: 6px; }
.at-ctrlbar .at-toggle-ico { display: none; }
.at-ctrlbar .at-chip { height: 30px; font-size: 1.3rem; }
.at-ctrlbar .at-chip.active { background: var(--at-text); color: var(--at-bg); }
.at-ctrl-btn { cursor: pointer; border: 0; }

/* Servers panel — sleek modern YouTube dark aesthetic */
.at-servers {
  display: flex; flex-direction: column; overflow: hidden; margin-top: 12px;
  background: var(--at-chip); border-radius: 12px; border: 1px solid var(--at-layer-10);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.at-srv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--at-layer-10); background: var(--at-layer-5);
}
.at-srv-status {
  display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); min-width: 0;
}
.at-srv-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #2ba640; flex: none;
  box-shadow: 0 0 0 0 rgba(43, 166, 64, .7);
  animation: at-pulse 2s infinite;
}
@keyframes at-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(43, 166, 64, .7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(43, 166, 64, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(43, 166, 64, 0); }
}
.at-srv-title { color: var(--at-text); font-weight: 400; white-space: nowrap; }
.at-srv-title b { color: var(--at-cta); font-weight: 600; }
.at-srv-sep { color: var(--at-text-3); }
.at-srv-current { color: var(--at-text-2); white-space: nowrap; }
.at-srv-current b { color: var(--at-text); font-weight: 600; }
.at-srv-current small { color: var(--at-text-2); font-size: 1.1rem; }
.at-srv-hint { font-size: 1.2rem; color: var(--at-text-3); white-space: nowrap; }

.at-srv-body {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
}
.at-srv-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
}
.at-srv-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 6px; font-size: 1.2rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; flex: none; min-width: 64px; justify-content: center;
}
.at-srv-badge.sub {
  background: rgba(62, 166, 255, .12); color: #3ea6ff; border: 1px solid rgba(62, 166, 255, .25);
}
.at-srv-badge.dub {
  background: rgba(251, 192, 45, .12); color: #fbc02d; border: 1px solid rgba(251, 192, 45, .25);
}
.at-srv-badge .at-icon { width: 16px; height: 16px; }
.at-srv-list {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0;
}
.at-srv-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 16px; border: 1px solid var(--at-layer-10);
  background: var(--at-layer-5); color: var(--at-text); font: 500 1.3rem/32px inherit;
  cursor: pointer; white-space: nowrap; transition: all .15s ease;
}
.at-srv-pill:hover {
  background: var(--at-chip-hover); border-color: var(--at-layer-15); color: var(--at-text);
}
.at-srv-pill.active {
  background: var(--at-text); color: var(--at-bg); font-weight: 600; border-color: var(--at-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.at-srv-pill-ico { display: inline-flex; align-items: center; }
.at-srv-pill-ico .at-icon { width: 12px; height: 12px; fill: currentColor; }
.at-srv-pill-name { line-height: 1; }
.at-toggle { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 1.3rem; font-weight: 500; color: var(--at-text-2); }
.at-toggle:hover { background: var(--at-hover); }
.at-toggle .sw { width: 28px; height: 14px; border-radius: 7px; background: var(--at-text-3); position: relative; transition: background .2s; }
.at-toggle .sw::after { content: ""; position: absolute; top: -3px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #bdbdbd; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: all .2s; }
.at-toggle.on { color: var(--at-text); }
.at-toggle.on .sw { background: rgba(62, 166, 255, .5); }
.at-toggle.on .sw::after { left: 10px; background: var(--at-cta); }

.at-nextep { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 16px; border-radius: 12px; background: var(--at-chip); font-size: 1.4rem; }
.at-nextep .at-icon { color: var(--at-cta); }
.at-nextep b { font-weight: 500; }
.at-nextep .countdown { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--at-text); background: var(--at-layer-5); padding: 4px 10px; border-radius: 8px; }

.at-below { margin-top: 12px; }
.at-whead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.at-whead .at-wtitle { flex: 1; min-width: 0; }
.at-wedit { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--at-chip); color: var(--at-text); font-size: 1.4rem; font-weight: 500; }
.at-wedit:hover { background: var(--at-chip-hover); }
.at-wedit .at-icon { width: 18px; height: 18px; }
.at-wtitle { font-size: 2rem; line-height: 2.8rem; font-weight: 600; margin: 0; }
.at-wtitle .ep { color: var(--at-text-2); font-weight: 400; }
.at-wtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.at-owner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.at-owner .av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; }
.at-owner .av > img:not(.at-deco-img) { width: 100%; height: 100%; object-fit: cover; }
.at-owner .nm { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-owner .nm .at-icon { width: 14px; height: 14px; color: var(--at-text-2); }
.at-owner .sb { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); white-space: nowrap; }
.at-owner .at-btn { margin-left: 12px; }
.at-wactions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.at-wactions::-webkit-scrollbar { display: none; }
.at-wactions .at-btn { flex: none; }

.at-desc { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--at-chip); font-size: 1.4rem; line-height: 2rem; cursor: pointer; }
.at-desc:hover { background: var(--at-chip-hover); }
.at-desc.open { cursor: default; }
.at-desc.open:hover { background: var(--at-chip); }
.at-desc .d-head { font-weight: 500; display: flex; flex-wrap: wrap; gap: 0 6px; }
.at-desc .d-head .tag { color: var(--at-cta); }
.at-desc .d-body { margin-top: 8px; white-space: pre-line; }
.at-desc:not(.open) .d-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.at-desc .d-more { font-weight: 500; margin-top: 4px; }
.at-desc .d-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--at-layer-10); }
.at-desc .d-meta div { display: flex; gap: 8px; }
.at-desc .d-meta b { font-weight: 500; color: var(--at-text-2); flex: none; min-width: 84px; }
.at-desc .d-meta a { color: var(--at-cta); }
.at-desc .d-names { margin-top: 12px; font-style: italic; color: var(--at-text-2); }
.at-desc .d-links { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.at-desc .d-links .at-chip { height: 36px; border-radius: 18px; background: var(--at-layer-5); }
.at-desc .d-poster { float: right; width: 100px; margin: 0 0 8px 16px; border-radius: 8px; }
.at-desc .d-rate { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--at-layer-5); }
.at-stars { display: inline-flex; gap: 2px; }
.at-stars button { width: 28px; height: 28px; color: var(--at-text-3); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: color var(--at-t, .18s) var(--at-ease, ease), background-color var(--at-t, .18s) var(--at-ease, ease); }
.at-stars button.on { color: #ffd166; }
.at-stars button:hover { background: var(--at-hover); }
.at-stars button.at-star-pop > .at-icon { animation: at-star-bounce .4s cubic-bezier(.34, 1.45, .64, 1); transform-origin: 50% 55%; will-change: transform; }
@keyframes at-star-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.38); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .at-stars button.at-star-pop > .at-icon { animation: none !important; } }
body.at-reduced-motion .at-stars button.at-star-pop > .at-icon { animation: none !important; }

.at-sidepanels { display: flex; flex-direction: column; gap: 16px; }
.at-sidepanel { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--at-chip); display: flex; align-items: center; gap: 12px; }
.at-sidepanel .sp-body { flex: 1; min-width: 0; }
.at-sidepanel .sp-title { font-weight: 500; }
.at-sidepanel .sp-sub { color: var(--at-text-2); font-size: 1.3rem; }

/* comments */
.at-comments { margin-top: 24px; }
.at-cmt-sk { display: flex; flex-direction: column; gap: 22px; padding: 4px 0 8px; }
.at-cmt-sk-row { display: flex; gap: 16px; align-items: flex-start; min-height: 64px; }
.at-cmt-sk-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.at-cmt-sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.at-cmt-sk-lines .at-sk { display: block; border-radius: 6px; }
#at-sheet-body .at-cmt-sk .at-sk {
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.08) 75%);
  background-size: 200% 100%;
}
html[data-theme="light"] #at-sheet-body .at-cmt-sk .at-sk {
  background: linear-gradient(90deg, #e4e4e4 25%, #f4f4f4 50%, #e4e4e4 75%);
  background-size: 200% 100%;
}
.cm-replies .at-cmt-sk { gap: 14px; margin: 8px 0 4px; }
.cm-replies .at-cmt-sk-av { width: 32px; height: 32px; }
.at-comments, .cm-replies, .at-rv-tree { overflow-anchor: none; }
body.at-reduced-motion .at-cmt-sk .at-sk { animation: none; }
.at-comments-gate { padding: 8px 0 24px; }
.at-comments-gate-hint { margin: 10px 0 0; font-size: 1.2rem; color: var(--at-text-2); }
.at-comments-head { display: flex; align-items: center; gap: 12px 24px; margin-bottom: 24px; flex-wrap: wrap; }
.at-comments-head h2 { font-size: 2rem; line-height: 2.8rem; font-weight: 700; margin: 0; white-space: nowrap; }
.at-comments-head .at-sort { flex: none; }
.at-comments-head .at-pill-badge.mana { flex: none; max-width: 100%; white-space: nowrap; }
/* Edit uses the same .at-composer chrome as “Add a comment” (tools + spoiler). */
.at-cedit.at-composer { margin: 8px 0 0; gap: 0; }
.at-cedit .at-cedit-ta { min-height: 48px; max-height: 200px; resize: vertical; }
.at-cedit .cf-actions { display: flex !important; }
/* Kill iOS/Android double-tap zoom on controls (reply / toggles / chips) without locking page zoom via viewport. */
a, button, [role="button"], .at-iconbtn, .at-ctrl-btn, .at-chip, .at-btn, .reply-btn, .at-toggle, .cm-replies-toggle, input, select, label {
  touch-action: manipulation;
}
.at-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 500; }
.at-composer { display: flex; gap: 16px; margin-bottom: 32px; }
/* Frame sits outside the circle — same as comments. overflow:hidden cropped it off on every theme. */
.at-composer .av { width: 40px; height: 40px; border-radius: 50%; overflow: visible; flex: none; position: relative; }
.at-composer .av > img:not(.at-deco-img) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.at-composer .cf { flex: 1; min-width: 0; }
.at-composer textarea, .at-composer input[type="text"] { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--at-layer-10); outline: 0; padding: 4px 0 8px; resize: none; font-size: 1.4rem; line-height: 2rem; color: var(--at-text); }
.at-composer textarea:focus { border-bottom: 2px solid var(--at-text); }
.at-composer .cf-actions { display: none; align-items: center; justify-content: space-between; margin-top: 8px; }
/* focus-within: tools + Cancel/Comment show whenever the textarea is focused (don’t rely on JS .active alone) */
.at-composer.active .cf-actions,
.at-composer:focus-within .cf-actions { display: flex; }
.at-composer .cf-tools { display: flex; align-items: center; gap: 4px; }
.at-composer .cf-tools .at-iconbtn { width: 36px; height: 36px; }
.at-composer .cf-tools .at-iconbtn .at-icon { width: 22px; height: 22px; }
.at-composer .cf-tools .spoiler { display: inline-flex; align-items: center; gap: 6px; font-size: 1.3rem; color: var(--at-text-2); padding: 0 8px; }
/* YouTube comment actions: Cancel = text; Comment disabled = solid muted pill; enabled = blue + dark text */
.at-composer .cf-actions .at-btn.ghost {
  background: transparent; color: var(--at-text); font-weight: 500;
}
.at-composer .cf-actions .at-btn.ghost:hover { background: var(--at-hover); }
.at-composer .cf-actions .at-btn.cta {
  background: var(--at-brand-btn); color: var(--at-brand-btn-text); font-weight: 500;
}
.at-composer .cf-actions .at-btn.cta:hover { opacity: .9; }
.at-composer .cf-actions .at-btn.cta[disabled],
.at-composer .cf-actions .at-btn.cta[disabled]:hover {
  opacity: 1; cursor: default;
  background: #272727; color: #717171;
}
html[data-theme="light"] .at-composer .cf-actions .at-btn.cta[disabled],
html[data-theme="light"] .at-composer .cf-actions .at-btn.cta[disabled]:hover {
  background: #f2f2f2; color: #909090;
}
.at-comment { display: flex; gap: 16px; margin-bottom: 20px; }
.at-comment > .av-link { flex: none; line-height: 0; color: inherit; text-decoration: none; overflow: visible; }
.at-comment .cm-head .nm-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.at-comment .av { width: 40px; height: 40px; border-radius: 50%; overflow: visible; flex: none; position: relative; }
.at-comment .av > img:not(.at-deco-img) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.at-comment.reply .av { width: 24px; height: 24px; }
.at-comment .cm-body { flex: 1; min-width: 0; }
.at-comment .cm-head { display: flex; align-items: center; gap: 4px; font-size: 1.3rem; line-height: 1.8rem; flex-wrap: wrap; min-width: 0; }
.at-comment .cm-head .nm { font-weight: 500; color: var(--at-text); display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow: hidden; }
.at-comment .cm-head .nm .at-rn {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.at-comment .cm-head .nm .at-rn-t,
.at-comment .cm-head .nm .at-rn::before {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-comment .cm-head .nm.owner { background: var(--at-layer-10); border-radius: 12px; padding: 0 6px; }
.at-comment .cm-head .at-user-title { flex: none; }
.at-comment .cm-head .time { color: var(--at-text-2); font-size: 1.2rem; }
.at-comment .cm-head .pin { display: inline-flex; align-items: center; gap: 4px; font-size: 1.2rem; color: var(--at-text-2); width: 100%; }
.at-comment .cm-head .pin .at-icon { width: 14px; height: 14px; }
.at-comment .cm-text { font-size: 1.4rem; line-height: 2rem; margin-top: 4px; white-space: pre-wrap; word-wrap: break-word; }
.at-comment .cm-text.spoiler { background: var(--at-text-3); color: transparent; border-radius: 4px; cursor: pointer; user-select: none; }
.at-comment .cm-text.spoiler::before { content: "Spoiler — click to reveal"; color: var(--at-text); font-size: 1.2rem; padding: 0 6px; }
.at-comment .cm-text.spoiler.revealed { background: transparent; color: var(--at-text); cursor: auto; }
.at-comment .cm-text.spoiler.revealed::before { display: none; }
.at-comment .cm-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; margin-left: -8px; }
.at-comment .cm-actions .at-iconbtn { width: 32px; height: 32px; }
.at-comment .cm-actions .at-iconbtn .at-icon { width: 16px; height: 16px; }
.at-comment .cm-actions .cnt { font-size: 1.2rem; color: var(--at-text-2); margin: 0 8px 0 -4px; }
.at-comment .cm-actions .reply-btn { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 1.2rem; font-weight: 500; }
.at-comment .cm-actions .reply-btn:hover { background: var(--at-hover); }
.at-comment .cm-reactions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.at-comment .cm-reactions span { font-size: 1.2rem; padding: 2px 8px; border-radius: 12px; background: var(--at-chip); display: inline-flex; gap: 4px; align-items: center; }
/* Reply toggles: YouTube/dark link blue (not Volt --at-cta cyan) */
.at-comment .cm-replies-toggle { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 16px 0 8px; border-radius: 18px; color: #3ea6ff; font-size: 1.4rem; font-weight: 500; margin-top: 6px; margin-left: -8px; }
.at-comment .cm-replies-toggle:hover { background: rgba(62, 166, 255, .15); }
.at-comment .cm-replies-toggle .at-icon { width: 20px; height: 20px; }
/* ---- Thread lines (ReAnime) ----
   Real .cm-rail = 1px background spine under avatar (not border-left).
   Kids/Hide get tall rounded-bl elbows; Hide gets a --at-bg mask so the spine ends clean. */
.at-comment { --rail: rgba(82, 82, 91, .9); position: relative; }
html[data-theme="light"] .at-comment { --rail: rgba(0, 0, 0, .14); }
html[data-theme="blue"] .at-comment { --rail: rgba(100, 120, 160, .45); }
.at-comment > .av-link, .at-comment > .av { position: relative; z-index: 1; }
/* no z-index on .cm-body: the focus wash (::after z-index:-1) must stay BEHIND the spine */
.at-comment > .cm-body { position: relative; }
.at-comment > .cm-rail {
  position: absolute; left: 20px; top: 40px; bottom: 0; width: 1px; margin: 0; padding: 0;
  background: var(--rail); border: 0; z-index: 0;
  pointer-events: none; display: block; font: 0/0 a;
}
.at-comment.reply > .cm-rail { left: 12px; top: 24px; }
.at-comment .cm-thread { position: relative; margin-top: 8px; }
.at-comment .cm-replies { display: none; margin-top: 12px; }
.at-comment .cm-replies.open { display: block; }
.at-comment .cm-replies > .at-comment { position: relative; margin-bottom: 16px; }
.at-comment .cm-replies > .at-comment:last-child { margin-bottom: 0; }

/* L1 → L2 elbows (body starts 56px past comment left; av center at 20 → -36) */
.at-comment[data-level="1"] > .cm-body > .cm-thread > .cm-replies.open > .at-comment::before {
  content: ""; position: absolute; left: -36px; top: -14px; width: 28px; height: 38px;
  border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  border-bottom-left-radius: 12px; box-sizing: border-box; pointer-events: none; z-index: 1;
  background: transparent;
}
/* Toggle elbow: ONLY on .cm-rail::after, and rail bg STOPS above it (no double vertical). */
.at-comment .cm-replies-toggle::before,
.at-comment .cm-replies-toggle::after { content: none !important; display: none !important; }
.at-comment[data-level="1"]:has(> .cm-body > .cm-thread > .cm-replies-toggle) > .cm-rail {
  bottom: 32px; /* spine ends; elbow below continues the L alone */
}
.at-comment[data-level="1"]:has(> .cm-body > .cm-thread > .cm-replies-toggle) > .cm-rail::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 20px; height: 14px;
  border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  border-bottom-left-radius: 12px; box-sizing: border-box; pointer-events: none;
}
.at-comment.l2:has(> .cm-body > .cm-thread > .cm-replies-toggle) > .cm-rail { bottom: 30px; }
.at-comment.l2:has(> .cm-body > .cm-thread > .cm-replies-toggle) > .cm-rail::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 14px; height: 12px;
  border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  border-bottom-left-radius: 10px; box-sizing: border-box; pointer-events: none;
}

/* L2 → L3 */
.at-comment.l2 > .cm-body > .cm-thread.l3 { margin-top: 6px; }
.at-comment .cm-replies.l3 { margin-top: 10px; }
.at-comment .cm-replies.l3 > .at-comment { position: relative; margin-bottom: 14px; }
.at-comment .cm-replies.l3.open > .at-comment::before {
  content: ""; position: absolute; left: -28px; top: -12px; width: 22px; height: 34px;
  border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail);
  border-bottom-left-radius: 12px; box-sizing: border-box; pointer-events: none; z-index: 1;
  background: transparent;
}

.at-comment.l2 { margin-bottom: 16px; }
.at-comment.l3 { margin-bottom: 14px; }
.at-comment.l3 .cm-actions { margin-top: 6px; }
.at-comment.l3 .cm-text { margin-top: 3px; }
/* ReAnime-style reply quote on flattened L3 */
.at-comment .cm-ref {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  margin: 4px 0 2px; padding: 4px 10px 4px 8px; border-radius: 10px;
  border: 0; background: var(--at-layer-5); color: var(--at-text-2);
  font-size: 1.2rem; line-height: 1.6rem; text-align: left; cursor: pointer;
}
.at-comment .cm-ref:hover { background: var(--at-hover); color: var(--at-text); }
.at-comment .cm-ref .at-icon { width: 14px; height: 14px; flex: none; opacity: .7; }
.at-comment .cm-ref-user { color: var(--at-cta); font-weight: 500; flex: none; }
.at-comment .cm-ref-snip {
  color: var(--at-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* focus wash on the chat text only (not the whole card / rail / actions) */
.at-comment.at-cm-focus > .cm-body > .cm-text { position: relative; }
.at-comment.at-cm-focus > .cm-body > .cm-text::after {
  content: ""; position: absolute; inset: -4px -8px; border-radius: 8px;
  background: var(--at-layer-5); z-index: -1; pointer-events: none;
  animation: at-cm-focus-fade 5s ease-out 1 forwards;
}
@keyframes at-cm-focus-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
body.at-reduced-motion .at-comment.at-cm-focus > .cm-body > .cm-text::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .at-comment.at-cm-focus > .cm-body > .cm-text::after { animation: none; } }
.at-user-title { display: inline-flex; align-items: center; gap: 3px; font-size: 1.1rem; font-weight: 500; padding: 0 6px; border-radius: 10px; background: var(--at-chip); color: var(--at-text-2); }
.at-user-title .at-icon { width: 11px; height: 11px; }
.at-user-title i { font-size: .72em; line-height: 1; opacity: .9; }
.at-badge-mod { font-size: 1.1rem; font-weight: 500; padding: 0 6px; border-radius: 10px; background: rgba(62, 166, 255, .2); color: var(--at-cta); }
.at-deco { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--deco, transparent); box-shadow: 0 0 8px var(--deco, transparent); pointer-events: none; }

/* episode / playlist panel */
.at-panel { border: 1px solid var(--at-layer-10); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.at-panel-head { padding: 12px 8px 12px 16px; background: var(--at-bg-raised); display: flex; align-items: flex-start; gap: 8px; }
.at-panel-head .ph-body { flex: 1; min-width: 0; }
.at-panel-head h3 { margin: 0; font-size: 2rem; line-height: 2.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-panel-head .ph-sub { font-size: 1.2rem; color: var(--at-text-2); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.at-panel-head .ph-sub b { color: var(--at-text); font-weight: 500; }
.at-panel-tools { display: flex; gap: 8px; padding: 8px 12px; background: var(--at-bg-raised); border-top: 1px solid var(--at-layer-10); align-items: center; flex-wrap: wrap; }
.at-select { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 8px; background: var(--at-chip); padding: 0 8px 0 12px; font-size: 1.3rem; font-weight: 500; gap: 4px; }
.at-select select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; outline: 0; color: var(--at-text); font-size: 1.3rem; font-weight: 500; padding-right: 20px; cursor: pointer; max-width: 160px; }
.at-select select option { color: #000; }
.at-select .at-icon { position: absolute; right: 6px; width: 18px; height: 18px; pointer-events: none; }
.at-input { display: inline-flex; align-items: center; height: 32px; border-radius: 8px; background: var(--at-chip); padding: 0 10px; gap: 6px; font-size: 1.3rem; }
.at-input input { background: transparent; border: 0; outline: 0; color: var(--at-text); width: 90px; font-size: 1.3rem; }
.at-input .at-icon { width: 18px; height: 18px; color: var(--at-text-2); }
.at-panel-list { max-height: 480px; overflow-y: auto; background: var(--at-bg); }
.at-ep { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 0; cursor: pointer; }
.at-ep:hover { background: var(--at-hover); }
.at-ep.active { background: var(--at-hover); }
.at-ep .idx { width: 32px; text-align: center; font-size: 1.2rem; color: var(--at-text-2); flex: none; }
.at-ep.active .idx { color: var(--at-text); }
.at-ep .idx .at-icon { width: 16px; height: 16px; }
.at-ep .th { width: 100px; height: 56px; border-radius: 8px; overflow: hidden; flex: none; position: relative; background: var(--at-bg-raised); }
.at-ep .th img { width: 100%; height: 100%; object-fit: cover; }
#at-eppanel.is-thumb-blur .at-ep .th img { filter: blur(8px); transform: scale(1.15); }
.at-panel-head .at-iconbtn.on { background: var(--at-hover); }
.at-ep .th .dur { position: absolute; right: 4px; bottom: 4px; font-size: 1.1rem; padding: 1px 4px; border-radius: 4px; background: var(--at-badge-bg); color: #fff; }
.at-ep .th .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--at-progress-bg); }
.at-ep .th .progress i { display: block; height: 100%; background: var(--at-red); }
.at-ep .eb { flex: 1; min-width: 0; }
.at-ep .et { font-size: 1.4rem; line-height: 2rem; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.at-ep .ed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 1px; font-size: 1.2rem; line-height: 1.6rem; font-style: italic; color: var(--at-text-2); }
.at-ep .em { font-size: 1.2rem; color: var(--at-text-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.at-ep .em .at-pill-badge { height: 16px; font-size: 1rem; line-height: 16px; padding: 0 4px; }
.at-ep.filler .et::after { content: "Filler"; margin-left: 6px; font-size: 1rem; font-weight: 500; padding: 0 5px; border-radius: 8px; background: rgba(245, 158, 11, .2); color: #f59e0b; vertical-align: middle; }
.at-epgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; padding: 12px; }
.at-epgrid a { height: 40px; border-radius: 8px; background: var(--at-chip); font-size: 1.3rem; font-weight: 500; position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--at-text); }
.at-epgrid a:hover { background: var(--at-chip-hover); }
.at-epgrid a.active { background: var(--at-text); color: var(--at-bg); }
.at-epgrid a.active .at-icon { width: 16px; height: 16px; }
.at-epgrid a.watched:not(.active) { color: var(--at-text-3); }
.at-epgrid a.filler::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.at-epgrid a.dub::before { content: ""; position: absolute; bottom: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #3ea6ff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.at-epgrid a.filler.dub::before { right: 14px; }
.at-panel.collapsed .at-panel-tools,
.at-panel.collapsed .at-panel-list,
.at-panel.collapsed .at-panel-foot { display: none; }
.at-panel-foot { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 1.2rem; color: var(--at-text-2); border-top: 1px solid var(--at-layer-10); flex-wrap: wrap; }
.at-panel-foot .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.at-panel-foot .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.at-panel-foot .sw.now { background: var(--at-text); }
.at-panel-foot .sw.seen { background: var(--at-text-3); }
.at-panel-foot .sw.filler { background: #f59e0b; }
.at-panel-foot .sw.dub { background: #3ea6ff; }
.at-panel-foot .at-iconbtn { margin-left: auto; }
.at-panel-head .airing { color: #4ade80; font-weight: 500; }
.at-panel-tools .at-chip.cur { height: 32px; gap: 4px; }
.at-panel-tools .at-chip.cur .at-icon { width: 14px; height: 14px; }
.at-signin-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--at-chip); margin-bottom: 24px; }
.at-signin-card .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--at-layer-10); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.at-signin-card .ic .at-icon { width: 20px; height: 20px; color: var(--at-cta); }
.at-signin-card .sb { flex: 1; min-width: 0; }
.at-signin-card .sb b { display: block; font-size: 1.4rem; font-weight: 500; }
.at-signin-card .sb small { display: block; font-size: 1.2rem; color: var(--at-text-2); margin-top: 2px; line-height: 1.6rem; }
.at-signin-card .at-btn { flex: none; }
.at-sidebar-chips { margin-bottom: 16px; }
.at-side-list { display: flex; flex-direction: column; gap: 8px; }
.at-side-sk { display: flex; gap: 8px; align-items: flex-start; }
.at-side-sk .at-sk-rthumb { width: 168px; }
.at-side-sk .at-sk-lines { flex: 1; min-width: 0; padding-top: 2px; }

/* -------------------------------------------------------------------------
   Anime title page (/anime/{slug}) — not a user channel
   ------------------------------------------------------------------------- */
.at-anime { max-width: 1284px; margin: 0 auto; padding: 0 24px 48px; }
.at-anime-hero {
  position: relative; width: 100%; aspect-ratio: 21 / 6; max-height: 280px;
  border-radius: 12px; overflow: hidden; margin-top: 16px; background: var(--at-bg-raised);
}
.at-anime-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-anime-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--at-bg) 0%, transparent 55%);
  pointer-events: none;
}
.at-anime-head { display: flex; gap: 24px; margin-top: -72px; align-items: flex-start; position: relative; z-index: 1; }
.at-anime-poster {
  width: 140px; flex: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); background: var(--at-bg-raised); aspect-ratio: 2 / 3;
}
.at-anime-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-anime-meta { flex: 1; min-width: 0; padding-top: 8px; }
.at-anime-meta h1 { margin: 0; font-size: 2.8rem; line-height: 3.4rem; font-weight: 700; }
.at-anime-alt { margin-top: 4px; color: var(--at-text-2); font-size: 1.4rem; }
.at-anime-stats {
  margin-top: 8px; color: var(--at-text-2); font-size: 1.4rem; line-height: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
}
.at-anime-stats a { color: var(--at-cta); font-weight: 500; }
.at-anime-stats .sep { opacity: 0.5; margin: 0 2px; }
.at-anime-syn { margin: 10px 0 0; color: var(--at-text-2); font-size: 1.4rem; line-height: 2.1rem; max-width: 64rem; }
.at-anime-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.at-anime-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.at-continue-cta .lbl-left { display: none; }
.at-continue-cta:hover .lbl-main, .at-continue-cta:focus-visible .lbl-main { display: none; }
.at-continue-cta:hover .lbl-left, .at-continue-cta:focus-visible .lbl-left { display: inline; }
.at-anime-section { margin-top: 28px; }
.at-anime-section h2 { font-size: 2rem; line-height: 2.8rem; font-weight: 700; margin: 0 0 12px; }
@media (max-width: 640px) {
  .at-anime { padding: 0 12px 32px; }
  .at-anime-hero { aspect-ratio: 16 / 7; border-radius: 8px; margin-top: 8px; }
  .at-anime-head { flex-direction: row; gap: 12px; margin-top: -48px; align-items: flex-start; }
  .at-anime-poster { width: 96px; border-radius: 8px; }
  .at-anime-meta { padding-top: 4px; }
  .at-anime-meta h1 { font-size: 1.8rem; line-height: 2.4rem; }
  .at-anime-alt { font-size: 1.2rem; }
  .at-anime-stats { font-size: 1.2rem; }
  .at-anime-syn { font-size: 1.3rem; }
  .at-anime-btns .at-btn.lg { padding-left: 14px; padding-right: 14px; }
  .at-anime-section h2 { font-size: 1.6rem; line-height: 2.2rem; }
  .at-anime-section .at-grid { margin-left: -12px; margin-right: -12px; }
}

/* -------------------------------------------------------------------------
   Channel (profile) page
   ------------------------------------------------------------------------- */
.at-channel { max-width: 1284px; margin: 0 auto; padding: 0 24px 48px; }
.at-banner { width: 100%; aspect-ratio: 6.2 / 1; border-radius: 12px; overflow: hidden; margin-top: 16px; background: var(--at-bg-raised); position: relative; }
.at-banner img { width: 100%; height: 100%; object-fit: cover; }
.at-banner .edit { position: absolute; right: 12px; bottom: 12px; }
.at-ch-head { display: flex; gap: 24px; margin-top: 16px; align-items: flex-start; overflow: visible; }
.at-ch-avatar { width: 160px; height: 160px; border-radius: 50%; flex: none; position: relative; overflow: visible; margin-bottom: 18px; }
/* Clip only the PFP — never apply this to .at-deco-img (frame overlays need full square). */
.at-ch-avatar .at-av-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1; background: var(--at-bg-raised); }
.at-ch-avatar .at-av-clip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.at-ch-avatar .at-deco { inset: -6px; border-width: 4px; z-index: 2; }
.at-ch-avatar .at-deco-img {
  position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none;
  object-fit: contain; pointer-events: none; z-index: 2; border-radius: 0 !important;
}
.at-ch-meta { flex: 1; min-width: 0; }
.at-ch-meta h1 { margin: 0; font-size: 3.6rem; line-height: 5rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-ch-meta h1 .at-user-title { font-size: 1.3rem; height: 24px; padding: 0 10px; color: var(--at-text-2); }
.at-ch-meta h1 .at-verified { display: inline-flex; color: var(--at-text); }
.at-ch-meta h1 .at-verified .at-icon { width: 20px; height: 20px; }
.at-ch-stats { color: var(--at-text-2); font-size: 1.4rem; line-height: 2rem; display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 4px; }
.at-ch-stats b { color: var(--at-text); font-weight: 400; }
.at-ch-bio { margin-top: 8px; color: var(--at-text-2); font-size: 1.4rem; cursor: pointer; display: flex; gap: 6px; }
.at-ch-bio .at-clamp-1 { flex: 1; }
.at-ch-links { margin-top: 4px; display: flex; gap: 8px; align-items: center; color: var(--at-text-2); font-size: 1.4rem; flex-wrap: wrap; }
.at-ch-links a { color: var(--at-cta); font-weight: 500; }
.at-ch-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.at-ch-act .at-ch-short,
.at-ch-act > .at-icon { display: none; }
.at-ch-tabs { margin-top: 24px; }
.at-ch-section { margin-top: 24px; }
.at-ch-section h2 { font-size: 2rem; line-height: 2.8rem; font-weight: 700; margin: 0 0 12px; }
.at-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.at-stat { padding: 16px; border-radius: 12px; background: var(--at-chip); }
.at-stat .v { font-size: 2.4rem; line-height: 3rem; font-weight: 700; }
.at-stat .l { font-size: 1.3rem; color: var(--at-text-2); }
.at-stat .s { font-size: 1.2rem; color: var(--at-text-3); }
.at-statusmix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 12px 0 8px; background: var(--at-layer-5); }
.at-statusmix i { display: block; height: 100%; }
.at-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 1.3rem; color: var(--at-text-2); }
.at-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---- Profile › Stats (YouTube Studio analytics look) ---- */
.at-an { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 0 8px; align-items: stretch; }
.at-an .span2, .at-an-overview { grid-column: 1 / -1; }
.at-an-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.at-an-metric { padding: 14px 16px; border: 1px solid var(--at-border); border-radius: 12px; background: var(--at-bg); min-width: 0; }
.at-an-metric .l { font-size: 1.3rem; color: var(--at-text-2); }
.at-an-metric .v { font-size: 2.6rem; line-height: 3.2rem; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-an-metric .s { font-size: 1.2rem; color: var(--at-text-3); margin-top: 2px; }
.at-an-metric .at-an-fire { color: #ff7a3d; vertical-align: -2px; }
.at-an-metric.big { grid-column: span 2; border-color: transparent; background: linear-gradient(135deg, rgba(62,166,255,.18), rgba(62,166,255,.04)); }
.at-an-metric.big .v { font-size: 3.6rem; line-height: 4rem; }
/* flex column so stretched row mates (Library / Score) match height; chart grows into leftover space */
.at-an-card { border: 1px solid var(--at-border); border-radius: 12px; padding: 16px; background: var(--at-bg); min-width: 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.at-an-head { margin-bottom: 12px; flex: none; }
.at-an-title { font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.at-an-title .at-icon { color: var(--at-text-2); }
.at-an-sub { font-size: 1.3rem; color: var(--at-text-2); margin-top: 2px; }
.at-an-sub b { color: var(--at-text); font-weight: 500; }
.at-an-empty { font-size: 1.3rem; color: var(--at-text-2); margin: 8px 0 0; }
.at-an-row { display: flex; align-items: center; gap: 20px; }
.at-an-legend { flex: 1; min-width: 0; font-size: 1.3rem; }
.at-an-legend > div { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.at-an-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.at-an-legend span { flex: 1; color: var(--at-text-2); }
.at-an-legend b { font-weight: 500; }
.at-an-legend small { width: 36px; text-align: right; color: var(--at-text-3); }
.at-an-kpis { display: flex; gap: 8px; margin-top: 14px; }
.at-an-kpis > div { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--at-chip); }
.at-an-kpis b { display: block; font-size: 1.8rem; font-weight: 500; }
.at-an-kpis span { font-size: 1.2rem; color: var(--at-text-2); }
.at-an-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.at-an-chips .at-chip b { margin-left: 6px; color: var(--at-text-2); font-weight: 500; }
/* donut */
.at-donut { position: relative; width: 132px; height: 132px; flex: none; }
.at-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.at-donut circle { fill: none; stroke-width: 10; stroke-linecap: butt; }
.at-donut circle.track { stroke: var(--at-layer-5); }
.at-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.at-donut-c b { font-size: 2.4rem; font-weight: 500; line-height: 1; }
.at-donut-c small { font-size: 1.2rem; color: var(--at-text-2); margin-top: 2px; }
/* horizontal bars */
.at-hbars { display: flex; flex-direction: column; gap: 8px; }
.at-hbar { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.at-hbar .n { width: 110px; color: var(--at-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.at-hbar .t { flex: 1; height: 8px; border-radius: 4px; background: var(--at-layer-5); overflow: hidden; }
.at-hbar .t i { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.at-hbar b { width: 28px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
/* vertical bars — fill card height; bars stay on the baseline */
.at-vbars { display: flex; align-items: flex-end; gap: 4px; flex: 1 1 auto; min-height: 160px; padding: 8px 0 22px; position: relative; box-sizing: border-box; }
.at-vbar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; border-radius: 4px; }
.at-vbar:hover { background: var(--at-hover); }
.at-vbar i { display: block; width: 100%; max-width: 28px; background: var(--at-cta); border-radius: 3px 3px 0 0; min-height: 0; flex: none; align-self: center; transition: height .4s ease; }
.at-vbar span { position: absolute; bottom: -18px; font-size: 1.1rem; color: var(--at-text-3); white-space: nowrap; }
/* activity heatmap — cells scale with card width (square), all 7 day-rows always visible */
.at-hm-wrap { width: 100%; overflow-x: auto; overflow-y: visible; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.at-hm-wrap::-webkit-scrollbar { display: none; }
.at-hm {
  --cols: 53;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 18px auto;
  gap: 4px 8px; width: 100%; min-width: 560px; box-sizing: border-box;
}
.at-hm-months {
  grid-column: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 3px; font-size: 1.1rem; line-height: 1.4rem; color: var(--at-text-3);
}
.at-hm-months span { grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.at-hm-days {
  grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 3px; font-size: 1.05rem; line-height: 1; color: var(--at-text-3); align-self: stretch;
}
.at-hm-days span { display: flex; align-items: center; }
.at-hm-days span:nth-child(1) { grid-row: 2; } .at-hm-days span:nth-child(2) { grid-row: 4; } .at-hm-days span:nth-child(3) { grid-row: 6; }
.at-hm-grid {
  grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 3px; min-width: 0;
}
.at-hm-col { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.at-hm i {
  display: block; width: 100%; aspect-ratio: 1; height: auto; min-height: 0;
  border-radius: 2px; background: var(--at-cta); box-sizing: border-box;
}
.at-hm-scale i { display: inline-block; width: 11px; height: 11px; aspect-ratio: auto; border-radius: 2px; background: var(--at-cta); }
.at-hm i.e { background: transparent; }
.at-hm i.l0, .at-hm-scale i.l0 { background: var(--at-layer-5); }
.at-hm i.l1, .at-hm-scale i.l1 { opacity: .3; } .at-hm i.l2, .at-hm-scale i.l2 { opacity: .5; } .at-hm i.l3, .at-hm-scale i.l3 { opacity: .75; }
.at-hm i:not(.e):hover { outline: 1px solid var(--at-text); outline-offset: 1px; }
.at-hm-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 1.2rem; color: var(--at-text-2); gap: 12px; flex-wrap: wrap; }
.at-hm-scale { display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 760px) {
  .at-an { grid-template-columns: 1fr; }
  .at-an-metric.big { grid-column: 1 / -1; }
  .at-an-row { flex-direction: column; align-items: stretch; }
  .at-donut { margin: 0 auto; }
  .at-hbar .n { width: 84px; }
}
.at-featured { display: flex; gap: 24px; }
.at-featured .at-thumb { width: 424px; flex: none; }
.at-featured .f-body { flex: 1; min-width: 0; }
.at-featured .f-title { font-size: 1.6rem; font-weight: 500; line-height: 2.2rem; margin: 0; }
.at-featured .f-meta { color: var(--at-text-2); font-size: 1.2rem; margin: 4px 0 12px; }
.at-featured .f-desc { font-size: 1.4rem; line-height: 2rem; color: var(--at-text-2); }
.at-ledger { display: flex; flex-direction: column; }
.at-ledger-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--at-layer-5); font-size: 1.4rem; }
.at-ledger-row .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--at-chip); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.at-ledger-row .ic .at-icon { width: 18px; height: 18px; }
.at-ledger-row .lb { flex: 1; min-width: 0; }
.at-ledger-row .lb small { display: block; color: var(--at-text-2); font-size: 1.2rem; }
.at-ledger-row .amt { font-weight: 500; color: #4ade80; }
.at-ledger-row .amt.neg { color: #f87171; }
/* My Zone chips — scrollable, New pinned (YouTube filter row) */
.at-mine-bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; min-width: 0; }
.at-mine-bar .at-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.at-mine-bar .at-chips::-webkit-scrollbar { display: none; }
.at-mine-bar .at-chip .n,
.at-board-chips .at-chip .n { opacity: .7; font-weight: 500; }
.at-mine-bar .at-mine-new { flex: none; }
.at-mine-bar .at-mine-new span { margin-left: 4px; }
@media (max-width: 520px) {
  .at-mine-bar .at-mine-new span { display: none; }
  .at-mine-bar .at-mine-new { width: 40px; height: 36px; padding: 0; justify-content: center; }
}
/* My Zone — Mana history (flat YouTube list: no cards, hairline rows) */
.at-mh-head { margin-top: 12px; }
.at-mh-title h2 { font-size: 2rem; font-weight: 700; margin: 0 0 2px; }
.at-mh-title p { margin: 0; color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem; }
.at-mh-hero { margin-top: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--at-layer-10); }
.at-mh-hero-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.at-mh-lv { position: relative; flex: none; width: 42px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.at-mh-lv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.at-mh-lv polygon { fill: #121212; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.at-mh-lv .lv { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; }
.at-mh-lv .lv small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.at-mh-lv .lv b { font-size: 1.4rem; font-weight: 800; margin-top: 1px; }
.at-mh-hero-meta { flex: 1; min-width: 0; }
.at-mh-xp { max-width: none !important; margin: 0 !important; }
.at-mh-hero-sub { margin-top: 5px; font-size: 1.2rem; color: var(--at-text-2); }
.at-mh-meters { display: flex; gap: 16px; margin-top: 12px; }
.at-mh-meter { flex: 1; min-width: 0; }
.at-mh-meter .mh-l { display: flex; justify-content: space-between; gap: 8px; font-size: 1.15rem; color: var(--at-text-2); margin-bottom: 4px; }
.at-mh-meter .mh-l b { color: var(--at-text); font-weight: 500; white-space: nowrap; }
.at-mh-meter .mh-bar { height: 3px; border-radius: 2px; background: var(--at-layer-10); overflow: hidden; }
.at-mh-meter .mh-bar i { display: block; height: 100%; background: var(--at-mana); }
.at-mh-feed { margin-top: 4px; }
.at-mh-day { display: flex; align-items: baseline; gap: 12px; font-size: 1.6rem; font-weight: 700; margin: 18px 0 4px; }
.at-mh-day-sum { margin-left: auto; font-size: 1.3rem; font-weight: 500; color: #4ade80; }
.at-mh-day-sum.neg { color: #f87171; }
.at-mh-lines { display: flex; flex-direction: column; }
.at-mh-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--at-layer-5); }
.at-mh-line .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--at-chip); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.at-mh-line .ic .at-icon { width: 18px; height: 18px; }
.at-mh-line .lb { flex: 1; min-width: 0; }
.at-mh-line .t { font-size: 1.4rem; font-weight: 500; line-height: 2rem; }
.at-mh-line .why { font-size: 1.2rem; color: var(--at-text-2); line-height: 1.6rem; }
.at-mh-line .tm { font-size: 1.2rem; color: var(--at-text-2); }
.at-mh-line .amt { font-size: 1.4rem; font-weight: 500; color: #4ade80; flex: none; font-variant-numeric: tabular-nums; }
.at-mh-line .amt.neg { color: #f87171; }
.at-mh-pill { display: none; }
.at-mh-line.is-removed .ic { background: rgba(248, 113, 113, .12); color: #f87171; }
.at-mh-foot { margin: 16px 0 8px; font-size: 1.2rem; color: var(--at-text-2); text-align: center; }
@media (max-width: 791px) {
  /* .at-community has 0 side padding on phones (post cards pad themselves) — give the My Zone chrome its own gutter */
  .at-mine-bar { padding: 0 12px; margin-top: 12px; gap: 8px; }
  .at-mine-bar .at-chips { gap: 8px; }
  .at-mh-head, .at-mh-feed, .at-mh-foot { padding-left: 12px; padding-right: 12px; }
  .at-mh-title h2 { font-size: 1.8rem; }
  .at-mh-title p { font-size: 1.25rem; }
  .at-mh-hero { padding-bottom: 12px; }
  .at-mh-line { gap: 10px; }
}
.at-mute-list { margin-top: 8px; }
.at-mute-list .at-friend-row { border-bottom: 1px solid var(--at-layer-5); }
.at-mute-list .at-friend-row:last-child { border-bottom: 0; }
.at-friend-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.at-friend-row .av { width: 56px; height: 56px; border-radius: 50%; position: relative; flex: none; overflow: visible; }
.at-friend-row .av > img:not(.at-deco-img) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.at-friend-row .fb { flex: 1; min-width: 0; }
.at-friend-row .fn { font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.at-friend-row .fm { font-size: 1.3rem; color: var(--at-text-2); }
.at-friend-row .fm .live { color: var(--at-text); display: inline-flex; align-items: center; gap: 4px; }
.at-friend-row .fm .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.at-friend-row .fx { display: flex; gap: 8px; flex: none; }
.at-friends-page .at-friend-row .av { width: 100px; height: 100px; }

/* playlists (watch lists) */
.at-playlist-card { display: flex; flex-direction: column; min-width: 0; width: 100%; box-sizing: border-box; cursor: pointer; }
.at-playlist-card .pl-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-top: 10px; background: var(--at-bg-raised); }
.at-playlist-card .pl-thumb::before, .at-playlist-card .pl-thumb::after { content: ""; position: absolute; left: 8px; right: 8px; top: -8px; height: 8px; border-radius: 8px 8px 0 0; background: var(--at-text-3); z-index: 0; }
.at-playlist-card .pl-thumb::after { left: 4px; right: 4px; top: -4px; background: var(--at-text-2); }
.at-playlist-card .pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-playlist-card .pl-stack { display: grid; grid-template-columns: repeat(var(--pl-n, 4), 1fr); height: 100%; width: 100%; }
.at-playlist-card .pl-stack img { height: 100%; width: 100%; object-fit: cover; display: block; }
.at-playlist-card .pl-count { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 4px; background: var(--at-badge-bg); color: #fff; font-size: 1.2rem; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; z-index: 2; }
.at-playlist-card .pl-count .at-icon { width: 14px; height: 14px; }
.at-playlist-card .pl-title { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; line-height: 2.1rem; font-weight: 500; margin-top: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-playlist-card .pl-title .at-icon { flex: none; }
.at-playlist-card .pl-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 1.3rem; color: var(--at-text-2); }
.at-playlist-card .pl-stats span { display: inline-flex; align-items: center; gap: 4px; }
.at-playlist-card .pl-stats .at-icon { width: 16px; height: 16px; }
.at-playlist-card .pl-meta { font-size: 1.3rem; line-height: 1.8rem; color: var(--at-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-playlist-card .pl-link { font-size: 1.3rem; color: var(--at-text-2); font-weight: 500; margin-top: 2px; }
.at-shelf-track .at-playlist-card { width: 220px; flex: 0 0 220px; }

/* ---- watch-list folders (custom playlists): card, pin animation, adult blur, edit modal, picker ---- */
.at-fcard .pl-thumb .pl-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--at-text-3); }
.at-fcard .pl-thumb .pl-empty .at-icon { width: 36px; height: 36px; }
.at-fcard .pl-title .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.at-fcard .pl-thumb img { transition: filter .25s, transform .25s; }
.at-fcard.is-blur .pl-thumb img { filter: blur(18px) saturate(.8); transform: scale(1.12); }
.at-fcard .pl-adult { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 1.3rem; font-weight: 500; white-space: nowrap; }
.at-fcard .pl-pin { position: absolute; left: 8px; top: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #0f0f0f; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transform-origin: 50% 100%; }
.at-fcard .pl-pin .at-icon { width: 14px; height: 14px; }
.at-pinned .at-fcard { animation: at-pin-in .55s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--pin-i, 0) * 70ms); }
.at-pinned .at-fcard .pl-pin { animation: at-pin-drop .6s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--pin-i, 0) * 70ms + 220ms); }
.at-fcard.pinned .pl-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
@keyframes at-pin-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes at-pin-drop { 0% { opacity: 0; transform: translateY(-14px) rotate(-40deg) scale(1.5); } 60% { opacity: 1; transform: translateY(2px) rotate(8deg) scale(.95); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .at-pinned .at-fcard, .at-pinned .at-fcard .pl-pin { animation: none; } }
.at-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.at-pl-side .at-fld-desc { margin-top: 12px; font-size: 1.3rem; line-height: 1.8rem; color: rgba(255, 255, 255, .8); white-space: pre-line; }
.at-pl-side .cover.cover-empty { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); }
.at-pl-side .cover.cover-empty .at-icon { width: 48px; height: 48px; }
.at-fld-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.at-fld-act { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .15); color: #fff; font: inherit; font-size: 1.4rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.at-fld-act:hover { background: rgba(255, 255, 255, .25); }
.at-fld-act.on { background: rgba(255, 255, 255, .28); }
.at-fld-act .at-icon { flex: none; width: 18px; height: 18px; }
.at-fld-adultbar { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.3rem; color: rgba(255, 255, 255, .85); }
.at-playlist-page.is-blur .at-pl-side .cover img, .at-playlist-page.is-blur .at-pl-side .cover .poster-fit, .at-playlist-page.is-blur .at-pl-item .at-thumb img, .at-playlist-page.is-blur .at-pl-item .at-thumb .poster-bg { filter: blur(16px); }
.at-playlist-page.is-blur .at-pl-side .bgc { filter: blur(40px); }
.at-fld { min-width: min(480px, 80vw); }
.at-fld-sub { margin: 0 0 16px; color: var(--at-text-2); font-size: 1.4rem; line-height: 2rem; }
.at-fld-row { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; font-size: 1.3rem; font-weight: 500; }
.at-fld-row label i { font-weight: 400; font-style: normal; color: var(--at-text-3); margin-left: 4px; }
.at-fld-count { color: var(--at-text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.at-fld input[data-fld="name"], .at-fld textarea { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--at-border); background: transparent; color: var(--at-text); padding: 12px 14px; font: inherit; font-size: 1.5rem; outline: 0; resize: vertical; }
.at-fld input[data-fld="name"]:focus, .at-fld textarea:focus { border-color: var(--at-cta); }
.at-fld .at-radio-group small, .at-fld-adult small { display: block; color: var(--at-text-2); font-size: 1.2rem; line-height: 1.7rem; margin-top: 2px; }
.at-fld .at-radio-group label { align-items: flex-start; }
.at-fld-adult { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer; font-size: 1.4rem; }
.at-fld-adult input { accent-color: var(--at-cta); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.at-fld-list { display: flex; flex-direction: column; min-width: min(360px, 80vw); max-height: 50vh; overflow: auto; }
.at-fld-pickrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 1.5rem; cursor: pointer; }
.at-fld-pickrow input { accent-color: var(--at-cta); width: 18px; height: 18px; margin: 0; flex: none; }
.at-fld-pickrow .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-playlist-page { display: flex; gap: 24px; padding: 24px; }
.at-pl-side { width: 360px; flex: none; position: sticky; top: calc(var(--at-masthead-h) + 24px); align-self: flex-start; padding: 24px; border-radius: 12px; overflow: hidden; position: relative; color: #fff; }
.at-pl-side .bgc { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(40px) brightness(.5) saturate(1.4); transform: scale(1.4); z-index: 0; }
.at-pl-side > * { position: relative; z-index: 1; }
.at-pl-side .cover { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.at-pl-side .cover img { width: 100%; height: 100%; object-fit: cover; }
.at-pl-side h1 { font-size: 2.8rem; line-height: 3.6rem; font-weight: 700; margin: 16px 0 8px; }
.at-pl-side .owner { font-size: 1.4rem; font-weight: 500; }
.at-pl-side .meta { font-size: 1.2rem; color: rgba(255, 255, 255, .7); margin-top: 4px; }
.at-pl-side .btns { display: flex; gap: 8px; margin-top: 16px; }
.at-pl-side .btns .at-btn { flex: 1; }
.at-pl-side .btns .at-btn.primary { background: #fff; color: #0f0f0f; }
.at-pl-side .btns .at-btn.glass { background: rgba(255, 255, 255, .15); color: #fff; }
.at-pl-main { flex: 1; min-width: 0; }
.at-pl-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 0; border-radius: 12px; cursor: pointer; }
.at-pl-item:hover { background: var(--at-hover); }
.at-pl-item .idx { width: 32px; text-align: center; color: var(--at-text-2); font-size: 1.4rem; flex: none; }
.at-pl-item .at-thumb { width: 160px; flex: none; border-radius: 8px; }
.at-pl-item .pb { flex: 1; min-width: 0; }
.at-pl-item .pt { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; }
.at-pl-item .pm { font-size: 1.2rem; color: var(--at-text-2); margin-top: 2px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* history */
.at-history { display: flex; gap: 24px; padding: 24px; }
.at-history-main { flex: 1; min-width: 0; max-width: 1096px; }
.at-history-side { width: 400px; flex: none; position: sticky; top: calc(var(--at-masthead-h) + 24px); align-self: flex-start; }
.at-history-side .search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--at-layer-10); padding: 8px 0; margin-bottom: 16px; }
.at-history-side .search input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 1.6rem; color: var(--at-text); }
.at-history-side .at-btn { width: 100%; justify-content: flex-start; margin-bottom: 4px; }
.at-history-day { font-size: 2rem; font-weight: 700; margin: 24px 0 16px; }
.at-history-day:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   Search / filter
   ------------------------------------------------------------------------- */
.at-search-page { max-width: 1096px; padding: 0 24px 48px; margin: 0 auto; }
.at-filterbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 0 0;
  position: sticky; top: var(--at-sticky-top); z-index: 12; background: var(--at-bg);
}
.at-filterbar .at-chips { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.at-filterbar .at-chips::-webkit-scrollbar { display: none; }
.at-filterbar-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.at-filterbar .at-btn.active { background: var(--at-chip); }
.at-filt-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 9px; background: var(--at-text); color: var(--at-bg);
  font-size: 1.1rem; font-weight: 600; line-height: 1;
}
/* YouTube-style "Search filters" dialog: plain text options, uppercase column heads with underline, selected = bold white */
.at-filters-scrim { position: fixed; inset: 0; z-index: 2900; background: var(--at-scrim); }
.at-filters {
  display: none; position: fixed; z-index: 2910; top: 72px; left: 50%; transform: translateX(-50%);
  width: min(980px, calc(100vw - 48px)); max-height: calc(100vh - 96px); flex-direction: column;
  background: var(--at-bg-menu); border-radius: 12px; box-shadow: var(--at-shadow); overflow: hidden;
}
.at-filters.open { display: flex; }
.at-filt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 20px; font-size: 1.8rem; font-weight: 400; }
.at-filt-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; padding: 12px 20px 8px; overflow-y: auto; }
.at-filt-col { min-width: 0; }
.at-filters h4 {
  margin: 0 0 8px; padding-bottom: 12px; font-size: 1.2rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; color: var(--at-text); border-bottom: 1px solid var(--at-layer-10);
}
.at-filters h4:not(:first-child) { margin-top: 24px; }
.at-filters .opt {
  display: flex; align-items: center; min-height: 32px; padding: 0; position: relative;
  font-size: 1.3rem; color: var(--at-text-2); cursor: pointer; user-select: none;
}
.at-filters .opt:hover { color: var(--at-text); }
.at-filters .opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.at-filters .opt span { min-width: 0; padding: 6px 0; flex: 1; }
.at-filters .opt.on { color: var(--at-text); font-weight: 600; }
.at-filters .opt.on span::after { content: "\00d7"; margin-left: 8px; font-weight: 400; color: var(--at-text-2); font-size: 1.6rem; line-height: 1; }
.at-filters .scroll { max-height: 280px; overflow-y: auto; scrollbar-width: thin; }
.at-filters .range { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.at-filters .range .sep { color: var(--at-text-3); }
.at-filters .range input {
  width: 100%; min-width: 0; height: 34px; border-radius: 8px; background: var(--at-chip); border: 0; outline: 0;
  padding: 0 10px; color: var(--at-text); font-size: 1.3rem;
}
.at-filters .applyrow {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 20px;
  border-top: 1px solid var(--at-layer-10);
}
/* mobile bottom sheet: sections of pill chips */
.at-filters-sheet .at-filters { display: flex; position: static; transform: none; width: auto; max-height: none; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.at-filters-sheet .at-filt-cols { display: block; padding: 0 16px 8px; overflow: visible; }
.at-filters-sheet .at-filt-col { padding: 8px 0 4px; }
.at-filters-sheet h4 { border: 0; padding: 0; margin: 0 0 10px; font-size: 1.4rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.at-filters-sheet h4:not(:first-child) { margin-top: 20px; }
.at-filters-sheet .at-filt-col { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; border-bottom: 1px solid var(--at-layer-10); padding: 14px 0; }
.at-filters-sheet .at-filt-col h4 { width: 100%; margin: 6px 0 0; }
.at-filters-sheet .at-filt-col h4:first-child { margin-top: 0; }
.at-filters-sheet .scroll { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-height: 220px; overflow-y: auto; align-content: flex-start; }
.at-filters-sheet .opt { min-height: 0; }
.at-filters-sheet .opt span { padding: 0 14px; height: 32px; line-height: 32px; flex: none; border-radius: 8px; background: var(--at-chip); color: var(--at-text); font-size: 1.3rem; font-weight: 500; }
.at-filters-sheet .opt.on span { background: var(--at-text); color: var(--at-bg); }
.at-filters-sheet .opt.on span::after { content: none; }
.at-filters-sheet .range { width: 100%; }
.at-filters-sheet .applyrow {
  position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--at-bg-menu); border-top: 1px solid var(--at-layer-10);
}
.at-filters-sheet .applyrow .at-btn { flex: 1; }
.at-active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.at-active-filters .at-chip .x { width: 16px; height: 16px; margin-right: -4px; }
.at-search-meta { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; color: var(--at-text-2); font-size: 1.4rem; }
.at-search-meta b { color: var(--at-text); font-weight: 500; }
.at-more-wrap { text-align: center; margin: 24px 0; }

/* -------------------------------------------------------------------------
   Schedule
   ------------------------------------------------------------------------- */
.at-schedule { max-width: 1096px; margin: 0 auto; padding: 0 24px 48px; }
.at-sched-head { align-items: flex-start; }
.at-sched-titles { min-width: 0; flex: 1; }
.at-sched-sub { margin-top: 2px; font-size: 1.3rem; color: var(--at-text-2); }
.at-days {
  display: flex; gap: 8px; margin-top: 12px; position: sticky; top: var(--at-sticky-top); z-index: 11;
  background: var(--at-bg); padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.at-days::-webkit-scrollbar { display: none; }
.at-day {
  flex: 1; min-width: 88px; padding: 10px 8px; border-radius: 12px; background: var(--at-chip);
  text-align: center; cursor: pointer; border: 0; color: inherit; font: inherit;
}
.at-day:hover { background: var(--at-chip-hover); }
.at-day.active { background: var(--at-text); color: var(--at-bg); }
.at-day .wd { font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.at-day .dt { font-size: 1.6rem; font-weight: 700; margin-top: 2px; }
.at-day .cnt { font-size: 1.1rem; opacity: .7; margin-top: 2px; }
.at-day .cnt::after { content: " eps"; }
.at-sched-filters {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 4px 0 8px;
  position: sticky; top: calc(var(--at-sticky-top) + 76px); z-index: 10; background: var(--at-bg);
}
.at-sched-filters .at-chips { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.at-sched-filters .at-chips::-webkit-scrollbar { display: none; }
.at-sched-w2g { flex: none; }
.at-sched-list { margin-top: 4px; }
.at-sched-item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.at-sched-item:hover { background: var(--at-hover); }
.at-sched-item .tm { width: 56px; font-size: 1.4rem; font-weight: 500; font-variant-numeric: tabular-nums; flex: none; }
.at-sched-item .tm small { display: block; font-size: 1.1rem; color: var(--at-text-2); font-weight: 400; margin-top: 2px; }
.at-sched-item .at-thumb { width: 104px; aspect-ratio: 2 / 3; flex: none; border-radius: 8px; }
.at-sched-item .at-thumb .poster-bg,
.at-sched-item .at-thumb .pv-img,
.at-sched-item .at-thumb .pv-video { display: none !important; }
.at-sched-item .at-thumb .poster-fit { object-fit: cover; opacity: 1 !important; }
.at-sched-item .sb { flex: 1; min-width: 0; }
.at-sched-item .st { font-size: 1.5rem; font-weight: 500; line-height: 2rem; }
.at-sched-item .sm { font-size: 1.25rem; color: var(--at-text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.at-sched-item .onlist { color: var(--at-cta); display: inline-flex; }
.at-sched-item.aired .tm { color: var(--at-text-2); }
.at-sched-item.delayed { opacity: .62; }
.at-sched-item.delayed:hover { opacity: .9; }
.at-sched-item.delayed .tm,
.at-sched-item.delayed .tm small { color: #ff4d6a; }
.at-sched-item.delayed .st { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: #ff4d6a; }
/* Sharp outline, same on every theme. Volt's black pill skin loses to this. */
html[data-theme] .at-pill-badge.delayed {
  background: transparent;
  color: #ff4d6a;
  border: 1px solid #ff4d6a;
  border-radius: 2px;
  box-shadow: none;
  height: 18px;
  padding: 0 5px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme="light"] .at-sched-item.delayed .tm,
html[data-theme="light"] .at-sched-item.delayed .tm small,
html[data-theme="light"] .at-sched-item.delayed .ep,
html[data-theme="light"] .at-pill-badge.delayed { color: #d21f45; border-color: #d21f45; }
.at-sched-item .state {
  display: inline-flex; align-items: center; gap: 4px; font-size: 1.2rem; font-weight: 500;
  padding: 5px 10px; border-radius: 16px; background: var(--at-chip); flex: none; color: var(--at-text);
}
.at-sched-item .state.soon { background: rgba(255, 0, 0, .14); color: #ff6b6b; }
.at-sched-item .state.play { background: var(--at-text); color: var(--at-bg); }
.at-sched-item .state.remind { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
.at-sched-state-row { display: none; margin-top: 8px; }
.at-sched-state-desk { flex: none; }
.at-clock {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  font-size: 1.3rem; color: var(--at-text-2); padding: 6px 10px; border-radius: 10px; background: var(--at-chip);
}
.at-clock b { color: var(--at-text); font-variant-numeric: tabular-nums; }
.at-clock small { width: 100%; text-align: right; font-size: 1.1rem; opacity: .8; }

/* -------------------------------------------------------------------------
   Community / live chat / shop
   ------------------------------------------------------------------------- */
.at-community { display: flex; gap: 24px; padding: 0 24px 48px; max-width: 1400px; margin: 0 auto; }
.at-community-main { flex: 1; min-width: 0; max-width: 852px; }
.at-community-side { width: 402px; flex: none; }
.at-pins { margin-top: 16px; border: 1px solid var(--at-layer-10); border-radius: 12px; overflow: hidden; background: var(--at-bg-raised, transparent); }
.at-pins-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; font-size: 1.3rem; color: var(--at-text-2); }
.at-pins-head b { color: var(--at-text); font-weight: 500; }
.at-pins-count { margin-left: 2px; opacity: .7; }
.at-pins-list { display: flex; flex-direction: column; }
.at-pin-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: inherit; text-decoration: none; min-width: 0; }
.at-pin-row:hover { background: var(--at-chip); }
.at-pin-ico { flex: none; color: var(--at-text-2); display: flex; }
.at-pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.at-pin-title { font-size: 1.4rem; font-weight: 500; line-height: 1.9rem; }
.at-pin-meta { font-size: 1.2rem; color: var(--at-text-2); line-height: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pin-stats { flex: none; font-size: 1.2rem; color: var(--at-text-2); display: inline-flex; align-items: center; gap: 4px; }
.at-pins-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--at-layer-10); background: transparent; color: var(--at-text-2); font: inherit; font-size: 1.3rem; padding: 10px 14px; cursor: pointer; text-align: left; }
.at-pins-more:hover { color: var(--at-text); background: var(--at-chip); }
.at-post { padding: 16px; border: 1px solid var(--at-layer-10); border-radius: 12px; margin-top: 16px; }
.at-post .p-head { display: flex; align-items: center; gap: 12px; }
.at-post .p-head .av-link { flex: none; line-height: 0; color: inherit; text-decoration: none; overflow: visible; }
.at-post .p-head .nm-link { color: inherit; text-decoration: none; }
.at-post .p-head .av { width: 40px; height: 40px; border-radius: 50%; position: relative; flex: none; overflow: visible; }
/* PFP only — never size .at-deco-img like the photo (frame needs the 124% overlay). */
.at-post .p-head .av > img:not(.at-deco-img) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.at-post .p-head .nm { font-size: 1.4rem; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.at-post .p-head .tm { font-size: 1.2rem; color: var(--at-text-2); }
.at-post .p-head .tm a { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; color: inherit; }
.at-post .p-head .tm a:hover { color: var(--at-text); }
.at-post .p-head .tm .at-icon { width: 14px; height: 14px; display: inline-block; flex: none; }
.at-community-main > .at-post[data-post] .p-title[style*="font-size:2.2rem"] { margin: 16px 0 8px; }
.at-community-main > .at-post[data-post]:only-of-type { border: 0; padding: 0; }
.at-post .p-title { font-size: 1.8rem; line-height: 2.6rem; font-weight: 500; margin: 12px 0 4px; }
.at-post .p-text { font-size: 1.4rem; line-height: 2rem; }
.at-quote-chip, .at-quote-pending {
  display: block; width: 100%; margin: 8px 0; padding: 6px 10px; text-align: left;
  border: 0; border-left: 3px solid var(--at-cta, #3ea6ff); border-radius: 0 8px 8px 0;
  background: var(--at-chip); color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem;
  cursor: pointer; white-space: pre-wrap; word-break: break-word;
}
.at-quote-pending { position: relative; padding-right: 28px; }
.at-quote-chip b, .at-quote-pending b { display: block; color: var(--at-text); font-size: 1.2rem; font-weight: 600; line-height: 1.6rem; }
.at-quote-pending::after { content: "×"; position: absolute; right: 8px; top: 4px; font-size: 1.6rem; color: var(--at-text-3); }
#at-quote-tip {
  position: fixed; z-index: 4000; display: flex; gap: 2px; transform: translate(-50%, -100%);
  padding: 4px; border-radius: 8px; background: var(--at-bg-menu, #212121);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
#at-quote-tip[hidden] { display: none; }
#at-quote-tip button {
  border: 0; background: transparent; color: var(--at-text); font-size: 1.3rem; font-weight: 500;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
#at-quote-tip button:hover { background: var(--at-chip); }
mark.at-quote-hit { background: rgba(62, 166, 255, .45); color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px rgba(62, 166, 255, .35); }
.at-post .p-ref { display: flex; gap: 12px; margin-top: 12px; padding: 8px; border-radius: 8px; background: var(--at-chip); align-items: center; cursor: pointer; }
.at-post .p-ref img { width: 48px; height: 68px; border-radius: 4px; object-fit: cover; }
.at-post .p-ref .t { font-size: 1.4rem; font-weight: 500; }
.at-post .p-ref .m { font-size: 1.2rem; color: var(--at-text-2); }
.at-post .p-img { margin-top: 12px; border-radius: 12px; overflow: hidden; max-height: 420px; }
.at-post .p-img img { width: 100%; height: 100%; object-fit: cover; }
.at-post .p-actions { display: flex; align-items: center; gap: 4px; margin-top: 12px; margin-left: -8px; }
/* Compact shelf stats: icon + count as one flex pair (SVG baseline otherwise sits above the digits) */
.at-post .p-actions > span { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.at-post .p-actions > span .at-icon { display: block; flex: none; }
.at-post .p-actions .cnt { font-size: 1.3rem; color: var(--at-text-2); margin-right: 8px; }
.at-post .p-actions .cnt[data-open-comments] { cursor: pointer; }
/* Home “People are talking about”: one small height. Tier lists, posters, and polls stay on the post page. */
#sh-community .at-shelf-track > .at-post {
  width: 320px; height: 148px; flex: none; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden; margin-top: 0; padding: 14px 16px;
}
#sh-community .at-shelf-track > .at-post .p-title { margin: 10px 0 0; }
#sh-community .at-shelf-track > .at-post .p-ref,
#sh-community .at-shelf-track > .at-post .p-img,
#sh-community .at-shelf-track > .at-post .p-text,
#sh-community .at-shelf-track > .at-post .at-tier,
#sh-community .at-shelf-track > .at-post .at-poll { display: none; }
#sh-community .at-shelf-track > .at-post .p-actions { margin-top: auto; margin-left: 0; }

.at-poll { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.at-poll .po { position: relative; height: 40px; border: 1px solid var(--at-layer-10); border-radius: 8px; overflow: hidden; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-size: 1.4rem; }
.at-poll .po:hover { background: var(--at-hover); }
.at-poll .po .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--at-layer-10); z-index: 0; transition: width .28s ease; }
body.at-reduced-motion .at-poll .po .bar { transition: none; }
@media (prefers-reduced-motion: reduce) { .at-poll .po .bar { transition: none; } }
.at-poll .po span { position: relative; z-index: 1; flex: 1; }
.at-poll .po b { position: relative; z-index: 1; font-weight: 500; }
.at-poll .pm { font-size: 1.2rem; color: var(--at-text-2); }
.at-seasonal { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--at-chip); border: 1px solid var(--at-layer-10); }
.at-seasonal-head { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 1.25rem; font-weight: 600; color: var(--at-text-2); }
.at-seasonal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.at-seasonal-list li { display: flex; align-items: center; gap: 10px; }
.at-seasonal-list .rk { flex: none; width: 28px; font-weight: 800; font-size: 1.25rem; color: var(--at-cta); }
.at-seasonal-list a, .at-seasonal-list .row { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.at-seasonal-list a:hover { color: var(--at-cta); text-decoration: none; }
.at-seasonal-list img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; background: var(--at-layer-10); }
.at-seasonal-list .t { font-size: 1.35rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-tier { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.at-tier .tr { display: flex; gap: 4px; }
.at-tier .tl { width: 48px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.8rem; border-radius: 6px; color: #0f0f0f; flex: none; }
.at-tier .ti { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; background: var(--at-chip); border-radius: 6px; padding: 4px; min-height: 64px; }
.at-tier .ti img { width: 40px; height: 56px; border-radius: 4px; object-fit: cover; }
.at-post-more { display: inline-block; margin-top: 8px; font-size: 1.3rem; font-weight: 500; color: var(--at-cta); }
/* ---- create-post composer (poster search + poll/matchup/seasonal) ---- */
.at-modal.at-compose-modal { max-width: 640px; }
.at-compose-types { display: flex; gap: 8px; padding-bottom: 4px; margin: 0 -4px 4px; }
.at-compose-type { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.3rem; font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; }
.at-compose-type[hidden] { display: none !important; }
.at-compose-type:hover { background: var(--at-chip-hover); }
.at-compose-type.active { background: var(--at-text); color: var(--at-bg); }
.at-compose-type .at-icon { width: 18px; height: 18px; }
.at-compose-block { margin: 4px 0 12px; padding: 14px; border-radius: 12px; background: var(--at-chip); }
.at-compose-block h4 { margin: 0 0 4px; font-size: 1.4rem; font-weight: 600; }
.at-compose-sub { margin: 0 0 12px; font-size: 1.25rem; color: var(--at-text-2); line-height: 1.5; }
.at-compose-cap { color: var(--at-text-2); font-weight: 400; }
.at-compose-note { display: flex; gap: 8px; align-items: center; color: var(--at-text-2); font-size: 1.3rem; margin-top: 4px; }
.at-compose-season { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.at-compose-season .at-select { flex: 1; min-width: 110px; }
.at-compose-season #at-sload { flex: none; }
.at-slist-meta { display: flex; justify-content: flex-end; margin-bottom: 8px; font-size: 1.2rem; color: var(--at-text-2); }
.at-slist { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; min-height: 40px; }
.at-sopt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--at-layer-10); border: 1px solid var(--at-border); }
.at-sopt .rk { flex: none; width: 28px; font-weight: 800; font-size: 1.2rem; color: var(--at-cta); }
.at-sopt img, .at-sopt .ph { width: 42px; height: 58px; object-fit: cover; border-radius: 4px; background: var(--at-chip); flex: none; }
.at-sopt .t { flex: 1; min-width: 0; font-size: 1.3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-sopt .tools { display: flex; gap: 2px; align-items: center; flex: none; }
.at-sopt .tools .at-iconbtn { width: 28px; height: 28px; color: var(--at-text-2); }
.at-sopt .tools .at-iconbtn:hover { color: var(--at-text); background: var(--at-hover); }
.at-compose-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.at-compose-vs .vs { align-self: center; font-weight: 700; font-size: 1.4rem; color: var(--at-text-2); padding-top: 8px; }
.at-compose-pl { width: 100%; justify-content: flex-start; gap: 8px; margin-bottom: 12px; padding-right: 6px; }
.at-compose-pl #at-fpick-label { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.at-compose-pl-trail { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: 4px; }
.at-compose-pl-trail .at-iconbtn {
  width: 28px; height: 28px; color: var(--at-text-2); cursor: pointer;
}
.at-compose-pl-trail .at-iconbtn:hover { color: var(--at-text); background: var(--at-hover); }
.at-compose-pl-trail .at-iconbtn .at-icon { width: 18px; height: 18px; }
.at-compose-pl-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--at-text-2); pointer-events: none;
}
.at-compose-pl-chev .at-icon { width: 18px; height: 18px; }
.at-compose-pool { display: flex; gap: 4px; margin-top: 8px; padding-bottom: 4px; min-height: 56px; }
.at-compose-pool img { width: 40px; height: 56px; border-radius: 4px; object-fit: cover; cursor: grab; flex: none; }
/* Tier list builder: tap a poster, tap a tier (touch), or drag (desktop). Tier names and colours are editable. */
.at-tier .tl.long { width: 76px; font-size: 1.2rem; line-height: 1.4rem; padding: 0 4px; text-align: center; overflow-wrap: anywhere; }
.at-tier button.tl { border: 0; cursor: pointer; font-family: inherit; transition: filter .15s; }
.at-tier button.tl:hover { filter: brightness(1.08); }
.at-compose-block .at-tier .ti img, .at-compose-pool img { cursor: pointer; transition: transform .12s, outline-color .12s; }
.at-compose-block .at-tier .ti img.sel, .at-compose-pool img.sel { outline: 2px solid var(--at-cta); outline-offset: 1px; transform: scale(1.08); }
.at-compose-block.is-armed .at-tier .ti, .at-compose-block.is-armed .at-compose-pool { outline: 1px dashed var(--at-text-3); outline-offset: -1px; cursor: copy; }
.at-compose-pool:empty::before { content: "Search above and your picks land here."; align-self: center; padding: 0 4px; font-size: 1.2rem; color: var(--at-text-3); }
.at-tier-tray { position: sticky; top: -1px; z-index: 3; margin: 8px -6px 0; padding: 4px 6px 6px; background: var(--at-chip); border-radius: 8px; box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .45); }
.at-tier-tray .at-compose-pool { margin-top: 0; }
.at-tier-selbar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.at-tier-selbar[hidden] { display: none; }
.at-tier-selbar .t { flex: 1; min-width: 0; font-size: 1.2rem; color: var(--at-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-compose-block .at-btn.sm { height: 30px; padding: 0 12px; font-size: 1.3rem; line-height: 3rem; }
.at-tier-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.at-tier-presets .lb { font-size: 1.2rem; color: var(--at-text-3); margin-right: 2px; }
.at-tier-presets .at-chip { height: 28px; padding: 0 12px; font-size: 1.2rem; line-height: 2.8rem; }
.at-tier-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: var(--at-layer-5); border: 1px solid var(--at-layer-10); }
.at-tier-editor input { flex: 1 1 100%; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--at-bg); border: 1px solid var(--at-layer-10); color: var(--at-text); font: inherit; font-size: 1.4rem; }
.at-tier-editor .sws { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.at-tier-editor .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.at-tier-editor .sw.on { border-color: var(--at-text); box-shadow: 0 0 0 2px var(--at-bg) inset; }
.at-tier-editor .acts { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; }
.at-tier-editor .acts .at-btn { margin-left: auto; }
.at-tier-add { width: 100%; margin-top: 8px; }
.at-tier-add .n { margin-left: 4px; font-size: 1.2rem; color: var(--at-text-3); }
.at-fpick { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--at-chip); }
.at-fpick #at-fpick-q { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: var(--at-layer-10); color: inherit; font: inherit; }
.at-fpick #at-fpick-list { margin-top: 8px; max-height: 280px; overflow: auto; }
.at-fpick #at-fpick-more { width: 100%; margin-top: 8px; }
.at-fpick #at-fpick-more[hidden] { display: none !important; }
.at-fpick .at-menu-item { width: 100%; }
.at-fpick .at-menu-item .lbl { flex: 1; text-align: left; }
.at-fpick .at-menu-item .m { color: var(--at-text-2); font-size: 1.2rem; }
.at-apick { position: relative; }
.at-apick.has > input { display: none; }
.at-apick-sel { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 6px; border: 1px solid var(--at-border); border-radius: 8px; background: var(--at-layer-10); }
.at-apick-sel[hidden] { display: none !important; }
.at-apick-sel img { width: 32px; height: 46px; object-fit: cover; border-radius: 4px; flex: none; }
.at-apick-sel .t { flex: 1; min-width: 0; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; }
.at-apick-sel .t small { display: block; font-size: 1.2rem; font-weight: 400; color: var(--at-text-2); }
.at-csuggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  max-height: 280px; overflow: auto; padding: 6px 0; border-radius: 12px;
  background: var(--at-bg-menu); box-shadow: var(--at-shadow); border: 1px solid var(--at-layer-10);
}
.at-csuggest[hidden] { display: none !important; }
.at-csuggest-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.at-csuggest-item:hover, .at-csuggest-item:focus { background: var(--at-hover); outline: 0; }
.at-csuggest-item img { width: 28px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; background: var(--at-layer-10); }
.at-csuggest-item .t { flex: 1; min-width: 0; font-size: 1.4rem; font-weight: 600; line-height: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-csuggest-item .t small { display: block; font-size: 1.15rem; font-weight: 400; color: var(--at-text-2); }
.at-csuggest-empty { padding: 12px 16px; color: var(--at-text-2); font-size: 1.3rem; }
.at-compose-expire { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.at-compose-expire .lb { font-size: 1.3rem; color: var(--at-text-2); flex: none; }
.at-popt { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.at-popt input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--at-border);
  border-radius: 8px; background: var(--at-layer-10); color: inherit; font: inherit; font-size: 1.4rem;
}
.at-popt input:focus { outline: 0; border-color: var(--at-cta); }
.at-popt .at-iconbtn { flex: none; }
/* .at-iconbtn { display:inline-flex } beats UA [hidden] — force hide at min 2 options */
.at-popt .at-iconbtn[hidden] { display: none !important; }
.at-compose-multi { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 1.35rem; cursor: pointer; user-select: none; }
.at-poll.is-closed .po { cursor: default; opacity: .92; }
.at-poll .po.disabled { pointer-events: none; }
.at-poll .po.on span { font-weight: 600; }
.at-playlist-card.is-private .pl-thumb { background: var(--at-chip); }
.at-playlist-card.is-private .pl-empty { color: var(--at-text-2); }

@media (max-width: 791px) {
  .at-compose-vs { grid-template-columns: 1fr; }
  .at-compose-vs .vs { padding: 0; text-align: center; }
}

.at-livechat { border: 1px solid var(--at-layer-10); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 560px; background: var(--at-live-chat-bg); }
.at-livechat .lc-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--at-layer-10); font-size: 1.4rem; font-weight: 500; }
.at-livechat .lc-head .online { font-size: 1.2rem; color: var(--at-text-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.at-livechat .lc-head .online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.at-livechat .lc-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.at-lc-msg { display: flex; gap: 12px; padding: 4px 24px; font-size: 1.3rem; line-height: 1.8rem; }
.at-lc-msg:hover { background: var(--at-hover); }
.at-lc-msg img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.at-lc-msg .a { color: var(--at-text-2); font-weight: 500; margin-right: 8px; }
.at-lc-msg .a.mod { color: var(--at-cta); }
.at-lc-msg .a.me { color: #4ade80; }
.at-livechat .lc-foot { padding: 8px 16px 12px; border-top: 1px solid var(--at-layer-10); }
.at-livechat .lc-input { display: flex; align-items: center; gap: 12px; }
.at-livechat .lc-input img { width: 24px; height: 24px; border-radius: 50%; }
.at-livechat .lc-input input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--at-layer-10); outline: 0; padding: 6px 0; font-size: 1.3rem; color: var(--at-text); }
.at-livechat .lc-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 1.2rem; color: var(--at-text-2); }
.at-trend-posts { margin-top: 16px; }
.at-trend-post { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--at-layer-5); cursor: pointer; }
.at-trend-post .n { font-size: 1.4rem; font-weight: 500; color: var(--at-text-2); width: 20px; }
.at-trend-post .b { flex: 1; min-width: 0; }
.at-trend-post .t { font-size: 1.4rem; font-weight: 500; }
.at-trend-post .m { font-size: 1.2rem; color: var(--at-text-2); }

.at-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.at-shop-item { border: 1px solid var(--at-layer-10); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.at-shop-item .prev { width: 96px; height: 96px; border-radius: 50%; position: relative; }
.at-shop-item .prev img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.at-shop-item .prev .at-deco { inset: -5px; border-width: 4px; }
.at-shop-item .nm { font-size: 1.4rem; font-weight: 500; }
.at-shop-item .ct { font-size: 1.2rem; color: var(--at-text-2); }
.at-shop-item .pr { display: inline-flex; align-items: center; gap: 4px; font-size: 1.4rem; font-weight: 500; color: var(--at-mana); }
.at-shop-item .pr .at-icon { width: 16px; height: 16px; }
.at-shop-item .at-btn { width: 100%; height: 32px; line-height: 3.2rem; font-size: 1.3rem; }
.at-shop-item .name-prev { font-size: 1.8rem; font-weight: 700; height: 96px; display: flex; align-items: center; }
.at-mana-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(62, 166, 255, .15)); margin-top: 16px; flex-wrap: wrap; }
.at-mana-card .mv { font-size: 2.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--at-mana); }
.at-mana-card .ml { font-size: 1.3rem; color: var(--at-text-2); }
.at-mana-card .spacer { flex: 1; }
.at-mana-card .today { font-size: 1.3rem; }
.at-mana-card .today .bar { width: 160px; height: 6px; background: var(--at-layer-10); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.at-mana-card .today .bar i { display: block; height: 100%; background: var(--at-mana); }

/* w2g rooms */
.at-room .at-thumb .live-tag { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.at-room .at-thumb .viewers { background: var(--at-badge-bg); color: #fff; }
.at-room .host { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; color: var(--at-text-2); margin-top: 4px; }
.at-room .host img { width: 20px; height: 20px; border-radius: 50%; }

/* -------------------------------------------------------------------------
   Settings
   ------------------------------------------------------------------------- */
.at-settings { display: flex; gap: 24px; padding: 24px; max-width: 1284px; margin: 0 auto; }
.at-settings-nav { width: 240px; flex: none; }
.at-settings-nav h2 { font-size: 1.6rem; font-weight: 500; margin: 8px 12px 16px; }
.at-settings-main { flex: 1; min-width: 0; max-width: 720px; }
.at-settings-main h1 { font-size: 2rem; font-weight: 400; margin: 0 0 4px; }
.at-settings-main .sub { font-size: 1.4rem; color: var(--at-text-2); margin-bottom: 24px; }
.at-settings-main h3 { font-size: 1.6rem; font-weight: 500; margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--at-layer-10); }
.at-setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--at-layer-5); }
.at-setting .sl { flex: 1; min-width: 0; }
.at-setting .sl b { font-weight: 500; display: block; font-size: 1.4rem; }
.at-setting .sl small { color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem; display: block; margin-top: 2px; }
.at-setting .sc { flex: none; display: flex; align-items: center; gap: 8px; }
.at-volt-panel { margin: 8px 0 20px; padding: 16px; border: 1px solid var(--at-layer-10); border-radius: 12px; background: var(--at-bg-raised); }
.at-volt-panel h3 { margin-top: 0; }
.at-volt-note { margin: 0 0 12px; color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem; }
.at-volt-preview { display: flex; gap: 12px; padding: 14px; border-radius: 12px; }
.at-volt-preview .card, .at-volt-preview .side { flex: 1; min-width: 0; padding: 12px; border-radius: 10px; }
.at-volt-preview p { margin: 6px 0 10px; font-size: 1.2rem; opacity: .75; }
.at-volt-preview button { border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 600; }
.at-volt-preview .side { display: flex; flex-direction: column; gap: 6px; font-size: 1.2rem; }
.at-volt-contrast { display: flex; gap: 16px; margin: 10px 0; font-size: 1.2rem; color: var(--at-text-2); }
.at-volt-contrast .low { color: #f87171; }
.at-volt-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.at-volt-presets .at-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sw); display: inline-block; margin-right: 6px; }
.at-volt-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.at-volt-field { display: flex; flex-direction: column; gap: 6px; font-size: 1.2rem; color: var(--at-text-2); }
.at-volt-field input[type="color"] { width: 100%; height: 36px; padding: 0; border: 1px solid var(--at-border); border-radius: 8px; background: transparent; cursor: pointer; }
.at-volt-more { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 12px; font-size: 1.3rem; }
.at-volt-more select, .at-volt-more input[type="range"] { accent-color: var(--at-cta); }
@media (max-width: 720px) { .at-volt-colors { grid-template-columns: 1fr 1fr; } .at-volt-preview { flex-direction: column; } }
.at-setting .sc input[type="text"], .at-setting .sc input[type="email"], .at-setting .sc input[type="number"], .at-setting .sc textarea {
  background: var(--at-bg-input); border: 1px solid var(--at-border); border-radius: 8px; padding: 8px 12px; color: var(--at-text); outline: 0; min-width: 240px;
}
.at-setting .sc input:focus, .at-setting .sc textarea:focus { border-color: var(--at-cta); }
.at-al-who { display: flex; gap: 12px; align-items: center; }
.at-al-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--at-layer-10); flex: none; }
.at-al-actions { flex-wrap: wrap; justify-content: flex-end; }
.at-al-pct input[type="range"] { width: 160px; accent-color: var(--at-cta); }
.at-al-note { margin: 12px 0 0; font-size: 1.3rem; color: var(--at-text-2); }
.at-settings .at-btn:disabled, .at-settings .at-btn[disabled] { opacity: .45; pointer-events: none; }
.at-sync-page { max-width: 880px; margin: 0 auto; padding: 24px; }
.at-sync-page h1 { font-size: 2rem; font-weight: 500; margin: 16px 0 4px; }
.at-sync-page .sub { color: var(--at-text-2); font-size: 1.4rem; margin: 0 0 16px; }
.at-sync-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--at-layer-5); }
.at-sync-row img, .at-sync-ph { width: 48px; height: 68px; object-fit: cover; border-radius: 4px; background: var(--at-layer-10); flex: none; }
.at-sync-row .b { flex: 1; min-width: 0; }
.at-sync-row .t { font-weight: 500; }
.at-sync-row .m, .at-sync-row .when { color: var(--at-text-2); font-size: 1.3rem; }
.at-sync-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.at-switch { width: 36px; height: 14px; border-radius: 7px; background: var(--at-text-3); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.at-switch::after { content: ""; position: absolute; top: -3px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #bdbdbd; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: all .2s; }
.at-switch.on { background: rgba(62, 166, 255, .5); }
.at-switch.on::after { left: 18px; background: var(--at-cta); }
.at-radio-group { display: flex; flex-direction: column; gap: 8px; }
.at-radio-group label { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; cursor: pointer; }
.at-radio-group input { accent-color: var(--at-cta); width: 18px; height: 18px; margin: 0; flex: none; }
.at-radio-stack { gap: 12px; }
.at-radio-stack label { align-items: flex-start; }
.at-radio-stack input { margin-top: 2px; }
.at-radio-stack .at-radio-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.at-radio-stack .at-radio-txt b { font-weight: 500; }
.at-radio-stack .at-radio-txt small { color: var(--at-text-2); font-weight: 400; font-size: 1.25rem; }

/* auth (page shell + modal) */
.at-auth { min-height: calc(100vh - var(--at-masthead-h)); }
.at-modal-scrim.at-auth-scrim .at-modal.at-auth-dialog { max-width: 440px; }
.at-auth-modal { padding: 4px 0 8px; }
.at-auth-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 2rem; letter-spacing: -.04em; margin-bottom: 4px; }
.at-auth-modal h2 { font-size: 2.2rem; font-weight: 400; margin: 8px 0 6px; }
.at-auth-sub { color: var(--at-text-2); font-size: 1.4rem; margin: 0 0 20px; }
.at-auth-check { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); margin: -6px 0 14px; cursor: pointer; }
.at-auth-link { display: inline-block; background: none; border: 0; padding: 0; color: var(--at-cta); font: 500 1.4rem inherit; cursor: pointer; margin-bottom: 8px; }
.at-auth-legal { font-size: 1.2rem; line-height: 1.7rem; color: var(--at-text-2); margin: 0 0 8px; }
.at-auth-legal a { color: var(--at-cta); }
.at-field { position: relative; margin-bottom: 18px; }
.at-field input { width: 100%; height: 52px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--at-border); background: transparent; color: var(--at-text); font-size: 1.5rem; outline: 0; box-sizing: border-box; }
.at-field input:focus { border: 2px solid var(--at-cta); padding: 0 13px; }
.at-field label { position: absolute; left: 12px; top: -8px; padding: 0 4px; background: var(--at-bg-menu); font-size: 1.2rem; color: var(--at-text-2); }
.at-auth-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.at-auth-foot .at-btn.cta { height: 40px; border-radius: 20px; padding: 0 22px; }
.at-auth-foot-stack { flex-direction: column; align-items: stretch; }
.at-auth-foot-stack .at-btn.cta { align-self: flex-end; }
.at-auth-foot-stack .at-btn.text { align-self: center; }
.at-auth-code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
.at-auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--at-text-3); font-size: 1.2rem; }
.at-auth-or::before, .at-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--at-layer-10); }
.at-auth-oauth { display: grid; gap: 8px; }
.at-auth-oauth .at-btn { justify-content: center; height: 40px; }
.at-auth-foot .at-btn.cta.is-busy { opacity: .55; cursor: default; pointer-events: none; }
.at-auth-scrim.at-auth-busy .at-auth-link,
.at-auth-scrim.at-auth-busy .at-auth-foot .at-btn.text,
.at-auth-scrim.at-auth-busy .at-auth-oauth .at-btn:not(.is-busy) { opacity: .45; pointer-events: none; }
.at-auth-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex: none; animation: at-fp-rot .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .at-auth-spin { animation: none; } }
html.at-reduced-motion .at-auth-spin, body.at-reduced-motion .at-auth-spin { animation: none !important; }
/* Panel change (Forgot password, Create account, back to sign in): slide the new step. The card itself does not replay the open animation. */
.at-modal-scrim.at-auth-scrim.open .at-modal.at-auth-swap { animation: none; transition: height .32s var(--at-ease); }
.at-modal.at-auth-swap.at-auth-clip { overflow: hidden; }
.at-auth-dialog.at-auth-fwd > .at-modal-head > span,
.at-auth-dialog.at-auth-fwd > .at-modal-body { animation: at-auth-in-right .32s var(--at-ease) both; }
.at-auth-dialog.at-auth-back > .at-modal-head > span,
.at-auth-dialog.at-auth-back > .at-modal-body { animation: at-auth-in-left .32s var(--at-ease) both; }
@keyframes at-auth-in-right { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes at-auth-in-left { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
   Mobile bottom nav & mobile masthead
   ------------------------------------------------------------------------- */
/* bottom:0 + safe-area padding. Frost lives on ::before, never on this element:
   backdrop-filter on a fixed bar makes iOS scroll the bar up the page. */
#at-bottomnav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2020;
  height: auto; min-height: calc(48px + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--at-bg); border-top: 1px solid var(--at-layer-10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 80px 0 0 var(--at-bg);
}
#at-bottomnav a, #at-bottomnav button {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 48px; font-size: 1rem; line-height: 1.2rem; color: var(--at-text);
}
#at-bottomnav .at-icon { width: 24px; height: 24px; }
#at-bottomnav .create .at-icon { width: 32px; height: 32px; border: 1.5px solid var(--at-text); border-radius: 50%; padding: 4px; }
#at-bottomnav img { width: 24px; height: 24px; border-radius: 50%; }
#at-bottomnav .active { font-weight: 500; }
.at-mobile-only { display: none !important; }
.at-mh-back { display: none; }
.at-search-more { display: none; } /* shown only on mobile search masthead */
.at-player-sticky { position: relative; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1312px) {
  body[data-guide="full"] #at-guide { display: none; }
  body[data-guide="full"] #at-mini-guide { display: block; }
  body[data-guide="full"] #at-page { margin-left: var(--at-mini-guide-w); }
}
@media (max-width: 1016px) {
  #at-watch { flex-direction: column; }
  .at-secondary { width: auto; }
  .at-history { flex-direction: column; }
  .at-history-side { width: auto; position: static; order: -1; }
  .at-community { flex-direction: column; }
  .at-community-side { width: auto; }
  .at-playlist-page { flex-direction: column; }
  .at-pl-side { width: auto; position: static; }
  .at-featured { flex-direction: column; }
  .at-featured .at-thumb { width: 100%; }
  .at-settings { flex-direction: column; }
  .at-settings-nav { width: auto; display: flex; overflow-x: auto; gap: 4px; }
  .at-settings-nav h2 { display: none; }
  .at-settings-nav .at-guide-item { flex: none; }
}
@media (max-width: 791px) {
  :root { --at-masthead-h: 48px; --at-chips-h: 48px; --at-bottomnav-h: 48px; }
  * { -webkit-tap-highlight-color: transparent; }
  body { overflow-y: auto; }

  /* --- masthead: logo left; cast / bell / search / avatar right; slides away on scroll-down --- */
  #at-masthead { padding: 0 4px 0 12px; transition: transform .22s ease; }
  body.at-mh-up #at-masthead { transform: translateY(-100%); }
  body.at-mh-up { --at-sticky-top: 0px; }
  .at-mh-start { min-width: 0; flex: 1; }
  .at-mh-start .at-iconbtn.menu, .at-mh-back { display: none; }
  .at-logo { padding: 12px 0; }
  .at-logo-mark { width: 26px; height: 18px; }
  .at-logo-mark::after { width: 14px; height: 14px; }
  .at-logo-text { font-size: 1.8rem; }
  .at-mh-center { display: none; }
  .at-mh-end { min-width: 0; gap: 0; }
  .at-mh-end .at-btn.w2g { display: none; }
  .at-mh-end .at-btn.outline { width: 40px; padding: 0; border: 0; background: transparent; }
  .at-mh-end .at-btn.outline span { display: none; }
  .at-mobile-only { display: inline-flex !important; }
  .at-mobile-hide { display: none !important; }
  .at-avatar-btn { width: 24px; height: 24px; margin: 0 12px 0 8px; }
  .at-badge-count { top: 6px; right: 6px; }
  /* search page: back arrow + full-width input + ⋮ filters (YouTube) */
  body[data-page="search"] .at-mh-start { flex: none; }
  body[data-page="search"] .at-mh-start .at-logo { display: none; }
  body[data-page="search"] .at-mh-back { display: inline-flex; }
  body[data-page="search"] .at-mh-center { display: flex; flex: 1; margin: 0 4px; min-width: 0; }
  body[data-page="search"] .at-search-box { height: 40px; border: 0; background: var(--at-chip); border-radius: 20px; }
  body[data-page="search"] .at-search-btn, body[data-page="search"] .at-search-random { display: none !important; }
  /* search screen: back + input + clear X + ⋮; hide other masthead end icons */
  body[data-page="search"] .at-mh-end { display: flex !important; min-width: 0; flex: none; gap: 0; }
  body[data-page="search"] .at-mh-end > :not(.at-search-more) { display: none !important; }
  body[data-page="search"] .at-mh-end .at-search-more { display: inline-flex !important; }
  body[data-page="search"] #at-search-input { font-size: 1.6rem; }
  .at-suggest { left: 0; right: 0; width: auto; border-radius: 0 0 12px 12px; }

  /* --- guide hidden, bottom nav on --- */
  #at-guide, #at-mini-guide { display: none !important; }
  body[data-guide="drawer"] #at-guide { display: block !important; width: min(320px, 85vw); }
  #at-page { margin-left: 0 !important; padding-bottom: calc(var(--at-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 8px); }
  #at-bottomnav {
    display: flex; align-items: stretch;
    min-height: calc(var(--at-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #at-bottomnav a, #at-bottomnav button { font-size: 1rem; gap: 3px; min-height: var(--at-bottomnav-h); }
  #at-bottomnav .active span { font-weight: 500; }
  #at-bottomnav .active img { outline: 1.5px solid var(--at-text); outline-offset: 1px; }
  #at-bottomnav .create .at-icon { width: 30px; height: 30px; }

  /* --- chip bar pinned under masthead (or at top when masthead hides) --- */
  .at-chipbar { top: var(--at-sticky-top); padding: 0 12px; height: var(--at-chips-h); }
  .at-chipbar .at-chips { gap: 8px; }
  .at-chipbar .fade, .at-chipbar .arrow { display: none; }
  .at-chip-explore { width: 44px; padding: 0; justify-content: center; }
  .at-chip-explore .at-icon { width: 20px; height: 20px; }

  /* --- home / browse: edge-to-edge cards, app typography --- */
  .at-browse { padding: 0 0 24px; }
  .at-grid { grid-template-columns: 1fr; row-gap: 20px; margin-top: 8px; }
  .at-grid .at-thumb, .at-card:hover .at-thumb { border-radius: 0; }
  .at-grid .at-card-body { padding: 0 12px; margin-top: 10px; }
  .at-grid .at-card-menu { opacity: 1; }
  .at-card-title { font-size: 1.4rem; line-height: 2rem; margin: 0 0 2px; }
  .at-card-meta { font-size: 1.2rem; line-height: 1.8rem; }
  .at-card-avatar { width: 36px; height: 36px; }
  .at-thumb .hover-play { display: none; }
  .at-grid.dense { grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 0 12px; row-gap: 16px; }
  .at-grid.dense .at-thumb { border-radius: 8px; }
  .at-grid.dense .at-card-body { padding: 0; margin-top: 8px; }
  .at-grid.dense .at-card-avatar { display: none; }
  .at-grid.posters { grid-template-columns: repeat(3, 1fr); padding: 0 12px; column-gap: 8px; row-gap: 16px; }
  .at-grid.posters .at-poster-card { width: 100%; min-width: 0; max-width: 100%; }
  .at-grid.posters .pc-img { border-radius: 8px; }
  .at-grid.posters .rank { font-size: 3.2rem; top: 2px; left: 6px; }
  .at-grid.posters .pc-title { font-size: 1.25rem; line-height: 1.7rem; margin-top: 6px; }
  .at-grid.posters .pc-meta { font-size: 1.1rem; line-height: 1.5rem; }
  .at-grid.playlists, .at-grid:has(.at-playlist-card) { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 16px; padding: 0 12px; }
  .at-playlist-card { min-width: 0; width: 100%; }
  .at-playlist-card .pl-thumb { border-radius: 8px; margin-top: 8px; }
  .at-playlist-card .pl-thumb::before { left: 6px; right: 6px; top: -6px; height: 6px; border-radius: 6px 6px 0 0; }
  .at-playlist-card .pl-thumb::after { left: 3px; right: 3px; top: -3px; height: 3px; }
  .at-playlist-card .pl-count { right: 6px; bottom: 6px; padding: 2px 5px; font-size: 1.1rem; gap: 3px; }
  .at-playlist-card .pl-count .at-icon { width: 12px; height: 12px; }
  .at-playlist-card .pl-title { font-size: 1.3rem; line-height: 1.8rem; margin-top: 6px; gap: 4px; }
  .at-playlist-card .pl-meta { font-size: 1.15rem; line-height: 1.6rem; }
  .at-playlist-card .pl-link { font-size: 1.2rem; }
  .at-shelf { margin-top: 20px; padding: 0; }
  .at-shelf-head { padding: 0 12px; margin-bottom: 8px; gap: 8px; }
  .at-shelf-title { font-size: 1.6rem; line-height: 2.2rem; }
  .at-shelf-head { flex-wrap: wrap; }
  .at-shelf-head .at-chips { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; margin-top: 4px; }
  .at-shelf-head .at-chips::-webkit-scrollbar { display: none; }
  .at-shelf-head .at-btn.ghost { height: 32px; padding: 0 10px; font-size: 1.3rem; }
  .at-shelf-arrow { display: none; }
  .at-shelf-track { padding: 0 12px 4px; gap: 8px; scroll-padding-left: 12px; }
  .at-shelf-track .at-card { width: 76vw; }
  .at-shelf-track .at-card .at-thumb { border-radius: 8px; }
  .at-shelf-track .at-card .at-card-body { padding: 0; }
  .at-shelf-track .at-poster-card { width: 38vw; min-width: 125px; max-width: 165px; flex: 0 0 auto; }
  .at-shelf-track .at-poster-card .pc-img { border-radius: 8px; }
  .at-shelf-track .at-poster-card .rank { font-size: 3.6rem; }
  .at-shelf-track .at-poster-card .pc-title { font-size: 1.3rem; line-height: 1.8rem; margin-top: 6px; }
  .at-shelf-track .at-playlist-card { width: 160px; flex: 0 0 160px; }
  .at-shelf-divider { margin: 20px 12px 0; }

  /* spotlight — full-bleed hero like the Anikoto app */
  .at-hero { margin: 0; }
  .at-hero-viewport, .at-hero-track { border-radius: 0; aspect-ratio: 4 / 3; min-height: 0; max-height: 70vh; }
  .at-hero-slide { border-radius: 0; }
  .at-hero-slide img.bg { object-position: center 25%; }
  .at-hero-slide .shade { background: linear-gradient(0deg, var(--at-bg) 0%, rgba(15, 15, 15, .55) 45%, rgba(15, 15, 15, .1) 100%); }
  .at-hero-content { width: 100%; padding: 16px 12px 24px; gap: 6px; }
  .at-hero-kicker { font-size: 1.1rem; }
  .at-hero-logo { max-width: min(280px, 85%); max-height: 72px; }
  .at-hero-title { font-size: 2.2rem; line-height: 2.8rem; }
  .at-hero-meta { font-size: 1.2rem; }
  .at-hero-desc { display: none; }
  .at-hero-nav { display: none; }
  .at-hero-btns { margin-top: 4px; }
  .at-hero-btns .at-btn { flex: 1; height: 40px; border-radius: 20px; }
  .at-hero-dots { left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 2; }

  /* list rows (search / browse list view) → app cards */
  .at-rows { gap: 20px; margin-top: 8px; }
  .at-row { flex-direction: column; gap: 8px; }
  .at-row .at-thumb { width: 100%; max-width: none; border-radius: 0; }
  .at-row .r-body { padding: 0 12px; flex-direction: row; gap: 12px; }
  .at-row .r-title { font-size: 1.4rem; line-height: 2rem; font-weight: 500; }
  .at-row .r-owner, .at-row .r-desc { display: none; }
  .at-row .at-card-menu { opacity: 1; }
  .at-rows.ranked .at-row { padding-left: 0; }
  .at-rows.ranked .at-row .rank { position: static; width: auto; font-size: 1.6rem; padding: 0; }
  .at-compact { gap: 10px; padding: 0 12px; }
  .at-compact .at-thumb { width: 42%; max-width: 168px; border-radius: 8px; }
  .at-compact .c-body { padding: 0; padding-right: 24px; }
  .at-compact .c-title { font-size: 1.3rem; line-height: 1.8rem; }
  .at-compact .at-card-menu { opacity: 1; right: 8px; }

  /* --- generic page chrome --- */
  .at-search-page { padding: 0 0 24px; }
  .at-filterbar { padding: 8px 12px; top: var(--at-sticky-top); }
  .at-filterbar .at-btn span:not(.at-filt-count) { display: none; }
  .at-filterbar .at-btn.has-icon { padding: 0 10px; }
  .at-active-filters { padding: 0 12px; }
  .at-search-meta { padding: 0 12px; margin-top: 10px; font-size: 1.3rem; }
  .at-page-head { padding: 12px 12px 0; gap: 8px; flex-wrap: wrap; }
  .at-page-head h1 { font-size: 2rem; line-height: 2.8rem; }
  .at-page-head .at-icon.big { width: 28px; height: 28px; }
  .at-page-head .at-btn.has-icon span, .at-page-head .at-btn.has-icon { font-size: 1.3rem; }
  .at-tabs { padding: 0 4px; margin-top: 4px; }
  .at-tab { height: 44px; padding: 0 12px; font-size: 1.4rem; }
  .at-chips.at-scroll-x {
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; max-width: 100%; min-width: 0;
    padding: 0 12px; margin-left: -12px; margin-right: -12px;
    -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .at-chips.at-scroll-x::-webkit-scrollbar { display: none; }
  .at-browse > .at-chips.at-scroll-x,
  .at-browse > .at-tabs {
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; max-width: 100%; min-width: 0;
    -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain;
  }
  .at-browse > .at-chips.at-scroll-x { padding: 0 12px; margin-left: 0; margin-right: 0; width: 100%; box-sizing: border-box; }
  .at-empty { padding: 48px 16px; }
  .at-select select { max-width: 150px; }

  /* --- profile (channel) --- */
  .at-channel { padding: 0 0 24px; }
  .at-banner { border-radius: 0; margin-top: 0; aspect-ratio: 3 / 1; }
  .at-ch-head { padding: 12px 12px 0; gap: 12px; }
  .at-ch-avatar { width: 72px; height: 72px; }
  .at-ch-meta h1 { font-size: 2rem; line-height: 2.6rem; }
  .at-ch-stats { font-size: 1.2rem; }
  .at-ch-bio { font-size: 1.3rem; }
  .at-ch-btns { margin-top: 10px; flex-wrap: nowrap; align-items: center; gap: 6px; }
  /* Primary friend action grows; Watch together collapses to icon so the row fits. */
  .at-ch-btns .at-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .at-ch-btns .at-ch-act { gap: 4px; padding: 0 8px; overflow: visible; text-overflow: clip; }
  .at-ch-btns .at-ch-act > .at-icon { display: block; width: 18px; height: 18px; }
  .at-ch-btns .at-ch-act .at-ch-full { display: none; }
  .at-ch-btns .at-ch-act .at-ch-short { display: inline; }
  .at-ch-btns .at-ch-w2g {
    flex: none; width: 36px; padding: 0; gap: 0; justify-content: center;
  }
  .at-ch-btns .at-ch-btn-lbl { display: none; }
  .at-ch-btns .at-iconbtn { flex: none; }
  .at-ch-tabs { margin-top: 8px; }
  .at-ch-section { padding: 0 12px; margin-top: 20px; }
  .at-ch-section h2 { font-size: 1.6rem; line-height: 2.2rem; }
  .at-ch-section .at-grid { margin-left: -12px; margin-right: -12px; }
  .at-ch-section .at-grid.dense,
  .at-ch-section .at-grid.posters,
  .at-ch-section .at-grid.playlists,
  .at-ch-section .at-grid:has(.at-playlist-card) { margin: 0; padding: 0; }
  .at-featured .at-thumb { border-radius: 8px; }

  /* --- watch page: full-screen app watch (no masthead / bottom nav, sticky player, collapse chevron) --- */
  html, body { overflow-x: hidden; }
  /* bottom nav stays visible on every page (watch included) */
  body[data-page="watch"] #at-bottomnav { display: flex; }
  body[data-page="watch"] #at-page { padding-bottom: calc(var(--at-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 16px); overflow-x: clip; max-width: 100%; }
  #at-watch { padding: 0; gap: 0; width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
  .at-primary, .at-secondary { width: 100% !important; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .at-player-sticky { position: sticky; top: var(--at-sticky-top); z-index: 1800; background: #000; width: 100%; transition: top .22s ease; }
  .at-player-wrap { border-radius: 0; max-width: 100%; }
  .at-player-back { position: fixed; left: 4px; top: calc(var(--at-sticky-top) + 4px); z-index: 1802; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .55); }
  .at-player-back .at-icon { width: 26px; height: 26px; }
  /* --- at-ctrlbar on mobile: icon toggles & icon buttons --- */
  .at-ctrlbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; padding: 0 12px; margin-top: 8px; gap: 6px;
    max-width: 100%; box-sizing: border-box; overflow-x: visible;
  }
  .at-ctrlbar .group { display: flex; align-items: center; gap: 6px; flex: none; }
  .at-ctrlbar .lbl,
  .at-ctrlbar .sw { display: none !important; }
  .at-ctrlbar .at-toggle-ico { display: inline-flex; align-items: center; justify-content: center; }

  /* Compact 36px circular button for mobile controls */
  .at-ctrl-btn {
    width: 36px; height: 36px; min-width: 36px; padding: 0 !important;
    border-radius: 50% !important; display: inline-flex !important;
    align-items: center; justify-content: center; position: relative;
    border: 1px solid var(--at-layer-10) !important;
    background: var(--at-chip) !important; color: var(--at-text-2) !important;
    font-size: 0 !important; line-height: 1 !important;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  }
  .at-ctrl-btn .at-icon { width: 18px; height: 18px; color: inherit; }
  .at-ctrl-btn:active { transform: scale(0.92); }

  /* Icon toggle ON state on mobile */
  .at-ctrl-btn.at-toggle.on {
    background: var(--at-text) !important; color: var(--at-bg) !important;
    border-color: var(--at-text) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  }
  .at-ctrl-btn.at-toggle.on::after {
    content: ""; position: absolute; bottom: 3px; left: 50%;
    transform: translateX(-50%); width: 4px; height: 4px;
    border-radius: 50%; background: var(--at-bg);
  }

  /* Action buttons on mobile (Light, Prev, Next) */
  .at-ctrl-btn.at-chip { color: var(--at-text) !important; }
  .at-ctrl-btn.at-chip.active {
    background: var(--at-text) !important; color: var(--at-bg) !important;
    border-color: var(--at-text) !important;
  }
  .at-ctrl-btn.at-chip[disabled] {
    opacity: .35 !important; pointer-events: none;
  }

  /* --- at-servers on mobile: sleek, compact, modern --- */
  .at-servers {
    margin: 8px 12px 0; max-width: calc(100% - 24px); box-sizing: border-box;
    border-radius: 12px;
  }
  .at-srv-head {
    padding: 8px 12px; gap: 8px;
  }
  .at-srv-status { font-size: 1.2rem; }
  .at-srv-hint { display: none; }
  .at-srv-body {
    padding: 10px 12px; gap: 10px;
  }
  .at-srv-row {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .at-srv-row::-webkit-scrollbar { display: none; }
  .at-srv-badge {
    height: 28px; padding: 0 8px; font-size: 1.1rem; min-width: 52px; flex: none;
  }
  .at-srv-list {
    flex-wrap: nowrap; flex: none; gap: 6px;
  }
  .at-srv-pill {
    height: 30px; line-height: 30px; font-size: 1.2rem; padding: 0 11px; flex: none;
  }
  .at-srv-pill-ico .at-icon { width: 11px; height: 11px; }
  .at-nextep { margin: 8px 12px 0; padding: 8px 12px; font-size: 1.3rem; max-width: calc(100% - 24px); box-sizing: border-box; }
  .at-below { padding: 0 12px; margin-top: 8px; overflow-x: clip; max-width: 100%; box-sizing: border-box; }
  .at-wtitle { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }
  .at-wtitle .ep { display: block; font-size: 1.3rem; line-height: 1.8rem; }
  .at-wmeta { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); margin-top: 2px; display: block !important; }
  .at-wmeta b { color: var(--at-text); font-weight: 500; cursor: pointer; }
  .at-wtop { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px; }
  .at-owner .av { width: 36px; height: 36px; }
  .at-owner .nm { font-size: 1.4rem; }
  /* phone only: long studio names ellipsize so Add to list / bell stay visible */
  .at-owner { width: 100%; box-sizing: border-box; }
  .at-owner > div { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .at-owner .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .at-owner .nm .at-icon { display: inline-block; vertical-align: -2px; margin-left: 4px; }
  .at-owner #at-listwrap { flex: none; margin-left: auto; display: inline-flex; }
  .at-owner .sb { overflow: hidden; text-overflow: ellipsis; }
  .at-owner .at-btn { margin-left: auto; height: 32px; line-height: 3.2rem; padding: 0 14px; font-size: 1.3rem; }
  .at-wactions { margin: 0 -12px; padding: 0 12px; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .at-wactions::-webkit-scrollbar { display: none; }
  .at-wactions .at-btn, .at-wactions .at-segment { height: 32px; line-height: 3.2rem; font-size: 1.3rem; flex: none; }
  .at-wactions .at-segment > button { font-size: 1.3rem; padding: 0 12px 0 10px; }
  .at-wactions .at-btn.icon-only { width: 32px; }
  .at-desc { margin-top: 10px; padding: 10px 12px; font-size: 1.3rem; }
  .at-desc .d-meta { grid-template-columns: 1fr; }
  .at-desc .d-poster { width: 80px; }
  .at-sidepanel { margin-top: 10px; padding: 10px 12px; }
  .at-secondary { padding: 0 12px; }
  .at-panel { margin: 12px 0 16px; border-radius: 12px; }
  .at-panel-head { padding: 10px 4px 10px 12px; }
  .at-panel-head h3 { font-size: 1.6rem; line-height: 2.2rem; }
  .at-panel-tools { gap: 6px; padding: 8px; }
  .at-panel-tools .at-input { flex: 1; min-width: 0; }
  .at-panel-tools .at-input input { width: 100%; }
  .at-panel-tools .at-chip.cur { order: 10; width: 100%; justify-content: center; }
  .at-panel-list { max-height: 280px; }
  .at-epgrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; padding: 10px; }
  .at-epgrid a { height: 36px; font-size: 1.2rem; }
  .at-panel-foot { gap: 10px; padding: 8px 10px; font-size: 1.1rem; }
  .at-signin-card { margin: 0 0 16px; padding: 12px; flex-wrap: wrap; }
  .at-signin-card .at-btn { width: 100%; }
  .at-comments { display: none; }
  #at-sheet-body .at-comments { display: block; margin: 0 16px; }
  #at-sheet-body .at-comments-head { gap: 8px; margin-bottom: 12px; align-items: center; }
  #at-sheet-body .at-comments-head h2 { font-size: 1.6rem; line-height: 2.2rem; }
  #at-sheet-body .at-comments-head .at-pill-badge.mana { font-size: 1.1rem; padding: 2px 8px; }
  /* nested reply composer: don't crush tools into the indent gutter */
  #at-sheet-body .at-comment.reply .at-composer.inline,
  #at-sheet-body .at-comment.reply .at-reply-box,
  #at-sheet-body .at-comment.reply .at-cedit { margin-left: -40px; max-width: calc(100% + 40px); }
  /* every composer on phone: tools + Cancel/Comment wrap instead of pushing "Comment" off-screen */
  .at-composer .cf-actions { flex-wrap: wrap; gap: 8px; }
  .at-composer .cf-tools { flex-wrap: wrap; }
  .at-composer .cf-actions > div:last-child { margin-left: auto; }
  .at-comments-teaser { margin: 12px 12px 0; padding: 12px; border-radius: 12px; background: var(--at-chip); cursor: pointer; overflow: visible; }
  .at-comments-teaser .ct-head { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 500; }
  .at-comments-teaser .ct-head small { color: var(--at-text-2); font-weight: 400; }
  .at-comments-teaser .ct-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 1.3rem; color: var(--at-text-2); min-height: 28px; }
  /* 24px PFP — never size .at-deco-img to 24px (that broke the frame overlay) */
  .at-comments-teaser .ct-row .av {
    width: 24px; height: 24px; border-radius: 50%; flex: none; position: relative;
    overflow: visible; background: var(--at-layer-10);
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  }
  .at-comments-teaser .ct-row .av > img:not(.at-deco-img) {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  }
  .at-comments-teaser .ct-row .av .at-deco-img {
    position: absolute; left: -18%; top: -18%; width: 136%; height: 136%; max-width: none;
    object-fit: contain; pointer-events: none; border-radius: 0;
  }
  .at-comments-teaser .ct-row > img { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; background: var(--at-layer-10); }
  .at-comments-teaser .ct-row .av .at-icon { display: block; width: 14px; height: 14px; margin: 0; color: var(--at-text-2); }
  body.at-theater .at-player-wrap { height: auto; aspect-ratio: 16 / 9; max-height: none; }
  /* Bleed once via #at-sidelist — do NOT also apply .at-chips.at-scroll-x negative margins (that was the 12px page overflow). */
  #at-sidelist { margin: 0 -12px; max-width: none; overflow-x: clip; }
  #at-sidelist .at-sidebar-chips,
  #at-sidelist .at-chips.at-scroll-x { margin-left: 0; margin-right: 0; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; }
  #at-sidelist .at-side-list { gap: 12px; }
  #at-sidelist .at-compact { margin: 0; max-width: 100%; box-sizing: border-box; }
  .at-secondary { overflow-x: clip; }
  .at-panel { max-width: 100%; box-sizing: border-box; }
  .at-panel-tools { max-width: 100%; box-sizing: border-box; }

  /* --- playlists / history / schedule / community / shop / settings / friends --- */
  .at-playlist-page { padding: 0 0 24px; }
  .at-pl-side { border-radius: 0; padding: 16px 12px; }
  .at-pl-main { padding: 0 8px; }
  .at-pl-item .at-thumb { width: 128px; }
  .at-history { padding: 0 0 24px; }
  .at-history-main { padding: 0; }
  .at-history-main h1 { font-size: 2rem !important; padding: 12px 12px 0; }
  .at-history-side { padding: 8px 12px 0; }
  .at-history-day { padding: 0 12px; font-size: 1.6rem; }
  .at-history-links { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .at-history-links .at-menu-item { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--at-chip); font-size: 1.3rem; gap: 6px; }
  .at-history-links .at-menu-sep { display: none; }
  .at-schedule { padding: 0 0 24px; }
  .at-sched-head { padding: 12px 12px 0; gap: 10px; }
  .at-sched-head h1 { font-size: 2rem; line-height: 2.6rem; }
  .at-sched-sub { font-size: 1.2rem; }
  .at-clock { width: 100%; justify-content: flex-start; order: 3; margin: 4px 0 0; padding: 8px 10px; }
  .at-clock small { width: auto; text-align: left; margin-left: auto; }
  .at-days { top: var(--at-sticky-top); padding: 8px 12px; overflow-x: auto; gap: 6px; }
  .at-day { flex: none; min-width: 72px; padding: 8px 10px; border-radius: 10px; }
  .at-day .wd { font-size: 1rem; }
  .at-day .dt { font-size: 1.4rem; }
  .at-day .cnt { font-size: 1rem; }
  .at-day .cnt::after { content: ""; }
  .at-sched-filters { top: calc(var(--at-sticky-top) + 68px); padding: 4px 12px 8px; gap: 8px; }
  .at-sched-w2g span { display: none; }
  .at-sched-w2g { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .at-sched-item { padding: 10px 12px; gap: 10px; align-items: flex-start; }
  .at-sched-item .at-thumb { width: 72px; max-width: 72px; aspect-ratio: 2 / 3; }
  .at-sched-item .tm { width: 44px; font-size: 1.2rem; padding-top: 2px; }
  .at-sched-item .st { font-size: 1.35rem; line-height: 1.8rem; }
  .at-sched-item .sm { font-size: 1.2rem; }
  .at-sched-state-desk { display: none; }
  .at-sched-state-row { display: block; }
  .at-modal-scrim.at-auth-scrim { padding: 0; align-items: stretch; }
  .at-modal-scrim.at-auth-scrim .at-modal.at-auth-dialog {
    max-width: none; max-height: none; height: 100%; border-radius: 0; display: flex; flex-direction: column;
  }
  .at-modal-scrim.at-auth-scrim .at-modal-body { flex: 1; overflow: auto; padding: 8px 16px 24px; }
  .at-community { padding: 0 0 24px; }
  .at-pins { border-radius: 0; border-left: 0; border-right: 0; margin-top: 8px; }
  .at-post { border-radius: 0; border-left: 0; border-right: 0; margin-top: 8px; padding: 12px; }
  .at-community-side { padding: 0 12px; }
  .at-livechat { height: 60vh; }
  .at-shop-grid { padding: 0 12px; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .at-shop-item { padding: 12px 8px; }
  .at-mana-card { margin: 12px 12px 0; }
  .at-settings { padding: 0 0 24px; flex-direction: column; }
  .at-settings-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 8px 12px; }
  .at-settings-nav h2, .at-settings-nav .at-menu-sep { display: none; }
  .at-settings-nav .at-menu-item { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--at-chip); font-size: 1.3rem; gap: 6px; }
  .at-settings-nav .at-menu-item.active { background: var(--at-text); color: var(--at-bg); }
  .at-settings-nav .at-menu-item.active .at-icon { color: var(--at-bg); }
  .at-settings-main { padding: 0 12px; }
  .at-setting { flex-direction: column; gap: 8px; align-items: stretch; }
  .at-setting .sc { justify-content: flex-start; flex-wrap: wrap; }
  .at-setting .sc input[type="text"], .at-setting .sc input[type="email"], .at-setting .sc textarea { min-width: 0; width: 100%; }
  .at-friends-page .at-friend-row .av { width: 56px; height: 56px; }
  .at-friend-row { padding: 12px; gap: 12px; }
  .at-friend-row .fx { flex-wrap: wrap; justify-content: flex-end; }
  .at-notif-page .at-notif { padding: 12px; }
  .at-static { padding: 16px 12px; }

  /* --- popups become full-screen / sheets --- */
  .at-popup { width: 100vw; max-width: 100vw; height: calc(100vh - var(--at-masthead-h)); max-height: none; top: var(--at-masthead-h) !important; left: 0 !important; right: 0 !important; border-radius: 0; }
  .at-modal { max-height: 86vh; border-radius: 16px; }
  .at-modal-head { padding: 16px 8px 8px 16px; font-size: 1.8rem; }
  .at-modal-body { padding: 8px 16px 16px; }
  .at-modal-foot { padding: 0 16px 16px; }
  .at-tooltip { display: none !important; }
}
@media (min-width: 792px) {
  .at-comments-teaser { display: none; }
}
@media (hover: none) {
  .at-card-menu, .at-row .at-card-menu, .at-compact .at-card-menu { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Notification rows (popup + notifications page), history rows, alert banner, link lists
   ------------------------------------------------------------------------- */
.at-notif { display: flex; gap: 12px; padding: 12px 8px; align-items: flex-start; position: relative; border-radius: 8px; }
.at-notif:hover { background: var(--at-hover); }
.at-notif .nd { width: 8px; height: 8px; border-radius: 50%; background: var(--at-cta); margin-top: 16px; flex: none; visibility: hidden; }
.at-notif.unread .nd { visibility: visible; }
/* unread = tinted row, bright text, bold name + dot. read = plain row, muted text, dimmer images. */
.at-notif.unread { background: rgba(62, 166, 255, .1); }
.at-notif.unread .nt { color: var(--at-text); }
.at-notif.unread .nt b { font-weight: 700; }
.at-notif:not(.unread) .nt { color: var(--at-text-2); }
.at-notif:not(.unread) .nt b { font-weight: 500; color: var(--at-text-2); }
.at-notif:not(.unread) .av, .at-notif:not(.unread) .th { opacity: .7; }
html[data-theme="light"] .at-notif.unread { background: rgba(6, 95, 212, .08); }
@media (hover: hover) { .at-notif.unread:hover { background: rgba(62, 166, 255, .16); } }
.at-notif .av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--at-chip); }
.at-notif .nb { flex: 1; min-width: 0; font-size: 1.4rem; line-height: 2rem; }
.at-notif .nt b { font-weight: 500; }
.at-notif .nm { display: block; color: var(--at-text-2); font-size: 1.2rem; margin-top: 2px; }
.at-notif .th { width: 86px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; }
.at-notif .nmore { flex: none; }
.at-notif .nf-acts { display: flex; flex-direction: column; gap: 6px; flex: none; align-self: center; }
.at-notif .nf-acts .at-btn { height: 32px; padding: 0 14px; font-size: 1.3rem; line-height: 3.2rem; white-space: nowrap; }
.at-notif-page .at-notif { padding: 16px 8px; }
.at-notif-page .at-notif .av { width: 56px; height: 56px; }
.at-notif-page .at-notif .th { width: 120px; height: 68px; }
.at-notif-day { font-size: 1.3rem; font-weight: 500; color: var(--at-text-2); text-transform: uppercase; letter-spacing: .04em; margin: 24px 8px 4px; }
/* Notification filter chips — compact pills, slide when they don’t fit (was clipping “System”) */
.at-notif-page .at-notif-tabs { gap: 8px; margin: 12px 0 4px; max-width: 100%; min-width: 0; }
.at-notif-page .at-notif-tabs .at-chip { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 1.3rem; gap: 4px; }
.at-notif-page .at-notif-tabs .at-chip b { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px; }
@media (max-width: 791px) {
  .at-notif-page .at-notif-tabs.at-scroll-x { padding: 0 12px; margin-left: 0; margin-right: 0; width: 100%; box-sizing: border-box; }
}

.at-history-row { display: flex; gap: 16px; padding: 8px 0; position: relative; }
.at-history-row .at-thumb { width: 246px; flex: none; }
.at-history-row .hb { flex: 1; min-width: 0; }
.at-history-row .ht { font-size: 1.8rem; line-height: 2.6rem; font-weight: 500; }
.at-history-row .hm { font-size: 1.2rem; color: var(--at-text-2); display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.at-history-row .hm a { color: var(--at-text-2); }
.at-history-row .hd { font-size: 1.2rem; color: var(--at-text-2); margin-top: 8px; }
.at-history-row > .at-iconbtn { opacity: 0; flex: none; }
.at-history-row:hover > .at-iconbtn, .at-history-row > .at-iconbtn:focus { opacity: 1; }
.at-history-links { display: flex; flex-direction: column; }
.at-history-links .at-menu-item { border-radius: 8px; }

.at-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--at-chip); font-size: 1.4rem; }
.at-alert .at-icon { flex: none; }
.at-alert > div { flex: 1; }
.at-alert > div div { color: var(--at-text-2); font-size: 1.3rem; }

.at-select:hover { background: var(--at-chip-hover); }
.at-select select { max-width: 260px; }
.at-settings-nav .at-menu-item.active { background: var(--at-chip); font-weight: 500; }
.at-static { max-width: 760px; margin: 0 auto; padding: 24px; font-size: 1.5rem; line-height: 2.4rem; }
.at-static h1 { font-size: 3.2rem; line-height: 4rem; font-weight: 700; margin: 8px 0 16px; }
.at-static h2 { font-size: 2rem; margin: 32px 0 8px; }
.at-static p, .at-static li { color: var(--at-text-2); }
.at-static a { color: var(--at-cta); }
.at-static .at-field textarea { width: 100%; border-radius: 4px; border: 1px solid var(--at-border); background: transparent; color: var(--at-text); padding: 12px 16px; font: inherit; font-size: 1.4rem; outline: 0; }
@media (max-width: 791px) {
  .at-history-row { flex-direction: column; gap: 8px; padding: 8px 0; }
  .at-history-row .at-thumb { width: 100%; border-radius: 0; }
  .at-history-row .hb { padding: 0 12px; }
  .at-history-row .ht { font-size: 1.4rem; line-height: 2rem; }
  .at-history-row .hd { display: none; }
  .at-history-row > .at-iconbtn { opacity: 1; position: absolute; right: 8px; bottom: 4px; }
  .at-history-row > .at-iconbtn[data-rm] { right: 48px; }
  .at-notif-page .at-notif .th { display: none; }
}

/* Mobile "You" panel (YouTube library tab) */
.at-you { display: none; }
@media (max-width: 791px) {
  .at-you { position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--at-bottomnav-h) + env(safe-area-inset-bottom)); z-index: 2010; background: var(--at-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
  .at-you.open { display: block; }
  .at-you-top { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px 0 12px; position: sticky; top: 0; background: var(--at-bg); z-index: 1; }
  .at-you-top .sp { flex: 1; }
  .at-you-acct { display: flex; align-items: center; gap: 16px; padding: 12px 16px 8px; }
  .at-you-acct img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
  .at-you-acct h1 { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 3rem; }
  .at-you-acct p { margin: 2px 0 0; font-size: 1.2rem; color: var(--at-text-2); }
  .at-you-btns { display: flex; gap: 8px; padding: 8px 16px 12px; }
  .at-you-btns .at-btn { flex: 1; justify-content: center; border-radius: 18px; }
  .at-you-sect { padding: 8px 0 12px; }
  .at-you-sh { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
  .at-you-sh h2 { margin: 0; font-size: 1.8rem; font-weight: 700; }
  .at-you-all { height: 32px; line-height: 30px; padding: 0 14px; border: 1px solid var(--at-layer-10); border-radius: 16px; font-size: 1.4rem; font-weight: 500; }
  .at-you-hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .at-you-hscroll::-webkit-scrollbar { display: none; }
  .at-you-card { flex: none; width: 160px; display: flex; flex-direction: column; gap: 4px; }
  .at-you-card .th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--at-chip); }
  .at-you-card .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .at-you-card .pg { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
  .at-you-card .pg i { display: block; height: 100%; background: var(--at-red, #f03); }
  .at-you-card .cnt { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 1.1rem; font-weight: 500; }
  .at-you-card .cnt .at-icon { width: 14px; height: 14px; }
  .at-you-card .t { font-size: 1.3rem; line-height: 1.8rem; font-weight: 500; }
  .at-you-card .m { font-size: 1.2rem; color: var(--at-text-2); }
  .at-you-menu { border-top: 1px solid var(--at-layer-10); padding: 8px 0; margin-top: 4px; }
  .at-you-title { padding: 8px 16px; font-size: 1.6rem; font-weight: 700; }
  .at-you-item { display: flex; align-items: center; gap: 24px; height: 48px; padding: 0 16px; font-size: 1.4rem; }
  .at-you-item:active { background: var(--at-hover); }
  /* guest panel: sign-in card + locked rows */
  .at-you-acct.guest .gav { width: 72px; height: 72px; border-radius: 50%; background: var(--at-chip); display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .at-you-acct.guest .gav .at-icon { width: 40px; height: 40px; color: var(--at-text-2); }
  .at-you-acct.guest h1 { font-size: 2.2rem; }
  .at-you-acct.guest p { font-size: 1.3rem; line-height: 1.8rem; }
  button.at-you-item { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  button.at-you-item.locked { color: var(--at-text-2); }
  button.at-you-item.locked > span { flex: 1; }
  button.at-you-item.locked > .at-icon:last-child { width: 18px; height: 18px; opacity: .7; }
  .at-you .at-guide-footer { padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
  #at-bottomnav .at-you-tab.you-open img { outline: 1.5px solid var(--at-text); outline-offset: 1px; }
}
/* =========================================================================
   KotoChat — site-wide live chat dock + panel + radio (koto-chat.js)
   Tokens only: every theme (dark / blue / light / volt) restyles it through --at-* variables.
   Drawer (default): full-height right sheet over the masthead. App bar → topic chip row → messages → composer.
   Fullscreen: named topic list on the left, side column (radio / people / events) on the right.
   Phone: same as drawer, topics also in a left sheet, side column as a bottom sheet.
   ========================================================================= */
:root { --kc-rail-w: 260px; --kc-side-w: 340px; --kc-drawer-w: 480px; --kc-accent: var(--at-cta); --kc-ink: #000; --kc-ease: cubic-bezier(.2,.8,.2,1); --kc-surface: var(--at-live-chat-bg); --kc-surface-2: var(--at-bg-raised); --kc-line: var(--at-layer-10); }
html[data-theme="volt"] { --kc-accent: var(--rv-primary, var(--at-cta)); }
html[data-theme="light"] { --kc-ink: #fff; }

@keyframes kc-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--at-live) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
@keyframes kc-spin { to { transform: rotate(360deg); } }
@keyframes kc-marq { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes kc-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes kc-flash { 0% { background: color-mix(in srgb, var(--kc-accent) 28%, transparent); } 100% { background: transparent; } }
@keyframes kc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kc-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes kc-dots { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ---- dock ---- */
.kc-dock { position: fixed; right: 16px; bottom: 16px; z-index: 2015; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(640px, calc(100vw - 24px)); transition: transform .28s var(--kc-ease), opacity .28s; }
.kc-dock[hidden] { display: none; }
.kc-dock.kc-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
body.kc-open .kc-dock { display: none; }
.kc-dock-music { position: relative; display: flex; align-items: center; width: 260px; height: 52px; border-radius: 8px; background: var(--at-bg-raised); color: var(--at-text); box-shadow: var(--at-shadow); overflow: hidden; flex: none; }
.kc-dock-mbar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--at-border); pointer-events: none; }
.kc-dock-mbar i { display: block; height: 100%; width: 0; background: var(--at-text); }
.kc-dock-music.on .kc-dock-mbar i { background: var(--at-red); }
.kc-dock-mhit { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 100%; padding: 6px 0 4px 6px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.kc-dock-music img, .kc-dock-music .kc-dock-note { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex: none; background: var(--at-bg-menu); }
.kc-dock-music .kc-dock-note { display: inline-flex; align-items: center; justify-content: center; color: var(--at-text-2); font-size: 1.4rem; }
.kc-dock-mt { flex: 1; min-width: 0; line-height: 1.5rem; }
.kc-dock-mt b { display: block; font-size: 1.25rem; font-weight: 600; color: var(--at-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dock-mt small { display: block; font-size: 1.1rem; color: var(--at-text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-dock-mgo { width: 36px; height: 36px; margin-right: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--at-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kc-dock-mgo .at-icon { width: 18px; height: 18px; }
.kc-dock-main { display: flex; align-items: center; gap: 8px; width: 280px; flex: none; height: 32px; min-width: 0; padding: 0 10px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--at-bg-menu) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--at-text); box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; font: inherit; text-align: left; }
.kc-dock-main:hover { background: var(--at-bg-menu); }
.kc-dock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--at-live); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-live) 28%, transparent); }
.kc-dock-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.kc-dock-line { flex: 1; min-width: 0; font-size: 1.2rem; line-height: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--at-text-2); }
.kc-dock-line b { font-weight: 600; color: var(--at-text); margin-right: 3px; }
.kc-dock-line.kc-swap { animation: kc-tick .35s var(--kc-ease); }
@keyframes kc-tick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kc-dock-n { font-size: 1.1rem; font-weight: 600; color: var(--at-text-3); flex: none; }
.kc-dock .kc-un { min-width: 16px; height: 16px; padding: 0 4px; font-size: 1rem; }
.kc-un { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--at-live); color: #fff; font-size: 1.1rem; font-weight: 700; flex: none; }
.kc-un.mention { background: var(--kc-accent); color: var(--kc-ink); }
.kc-dock-play { position: relative; width: 32px; height: 32px; padding: 2px; border: 0; border-radius: 50%; background: conic-gradient(var(--at-red) calc(var(--p, 0) * 1%), var(--at-border) 0); box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; flex: none; }
.kc-dock-play img, .kc-dock-play .kc-dock-note { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--at-bg-menu); color: var(--at-text-2); font-size: 1.2rem; }
.kc-dock-note { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--at-text-2); font-size: 1.2rem; }
.kc-dock-playic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s; }
.kc-dock-play:hover .kc-dock-playic, .kc-dock-play.on .kc-dock-playic { opacity: 1; }
.kc-dock-playic .at-icon { width: 14px; height: 14px; }
.kc-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.kc-eq b { width: 3px; background: var(--kc-accent); border-radius: 1px; animation: kc-eq 1s ease-in-out infinite; }
.kc-eq b:nth-child(2) { animation-delay: .2s; } .kc-eq b:nth-child(3) { animation-delay: .4s; }
body:has(#at-pl[data-mode="mini"]) .kc-dock { bottom: calc(16px + 16px + 52px + (min(400px, 46vw) * 9 / 16)); }

/* ---- panel shell ---- */
.kc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--kc-drawer-w); max-width: 100vw; z-index: 2040; display: grid; grid-template-columns: 0 minmax(0, 1fr) 0; background: var(--kc-surface); color: var(--at-text); box-shadow: -24px 0 60px rgba(0,0,0,.45); font-size: 1.4rem; animation: kc-slide .26s var(--kc-ease); overflow: hidden; }
.kc-panel[hidden] { display: none; }
.kc-panel.rail-open { width: calc(var(--kc-drawer-w) + var(--kc-side-w)); grid-template-columns: 0 minmax(0, 1fr) var(--kc-side-w); }
.kc-panel.sp-open { --kc-side-w: 420px; }
.kc-panel.full { left: 0; width: auto; grid-template-columns: var(--kc-rail-w) minmax(0, 1fr) 0; animation: none; box-shadow: none; }
.kc-panel.full.rail-open { grid-template-columns: var(--kc-rail-w) minmax(0, 1fr) var(--kc-side-w); }
.kc-rail { grid-column: 1; } .kc-main { grid-column: 2; } .kc-side { grid-column: 3; }
.kc-panel .kc-rail { display: none; } .kc-panel.full .kc-rail { display: flex; }
.kc-panel .kc-side { display: none; } .kc-panel.rail-open .kc-side { display: flex; }
.kc-panel.full .kc-chips, .kc-panel.full .kc-brand { display: none; }
.kc-scrim { display: none; }
.kc-only-phone { display: none !important; }
body.kc-open { overflow: hidden; }
body.kc-open:not(.kc-full) { overflow: auto; }

/* ---- app bar ---- */
.kc-head { display: flex; align-items: center; gap: 2px; height: 64px; padding: 0 10px 0 16px; flex: none; }
.kc-head .kc-muted { opacity: .45; }
.kc-brand { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--at-live); color: #fff; flex: none; margin-right: 12px; box-shadow: 0 6px 18px color-mix(in srgb, var(--at-live) 40%, transparent); }
.kc-brand .at-icon { width: 20px; height: 20px; }
.kc-head-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.9rem; }
.kc-head-tt b { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-head-d { color: var(--at-text-2); font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.kc-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); flex: none; }
.kc-slow { display: inline-flex; align-items: center; gap: 4px; font-size: 1.15rem; font-weight: 600; color: var(--at-text-2); padding: 0 9px; height: 26px; border-radius: 13px; background: var(--at-chip); margin-right: 4px; }
.kc-head .at-iconbtn { width: 40px; height: 40px; }
.kc-head-rail.on { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 14%, transparent); }

/* ---- topic chips (YouTube chip bar) ---- */
.kc-chips { display: flex; gap: 8px; padding: 2px 16px 12px; overflow-x: auto; scrollbar-width: none; flex: none; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.kc-chips::-webkit-scrollbar { display: none; }
.kc-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.4rem; font-weight: 500; white-space: nowrap; cursor: pointer; flex: none; }
.kc-chip i, .kc-chip .kc-emoji { font-size: 1.2rem; color: var(--at-text-2); }
.kc-chip:hover { background: var(--at-layer-10); }
.kc-chip.on { background: var(--at-text); color: var(--at-bg); } .kc-chip.on i { color: inherit; }
.kc-chip.unread { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-live) 60%, transparent); }
.kc-chip.add { width: 32px; padding: 0; justify-content: center; color: var(--at-text-2); } .kc-chip.add .at-icon { width: 18px; height: 18px; }
.kc-topic-d { padding: 0 16px 10px; font-size: 1.25rem; color: var(--at-text-2); border-bottom: 1px solid var(--kc-line); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-pin, .kc-locked { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 1.3rem; line-height: 1.8rem; border-bottom: 1px solid var(--kc-line); background: color-mix(in srgb, var(--kc-accent) 8%, var(--kc-surface)); flex: none; }
.kc-pin i { color: var(--kc-accent); } .kc-pin span { flex: 1; min-width: 0; } .kc-pin small { color: var(--at-text-2); }
.kc-locked { color: var(--at-text-2); background: var(--at-layer-5, rgba(255,255,255,.04)); }

/* ---- topics rail (fullscreen) ---- */
.kc-rail { position: relative; flex-direction: column; min-height: 0; background: var(--at-bg); border-right: 1px solid var(--kc-line); }
.kc-rail-h { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 12px 0 20px; flex: none; font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; }
.kc-rail-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--at-live); color: #fff; font-size: 1.4rem; flex: none; }
.kc-rail-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px; scrollbar-width: thin; }
.kc-rail-g { padding: 16px 12px 6px; font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--at-text-2); }
.kc-topic { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0; padding: 0 12px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--at-text-2); font: inherit; font-size: 1.45rem; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.kc-topic-pill { display: none; }
.kc-topic-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; font-size: 1.35rem; flex: none; }
.kc-topic-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-topic:hover { background: var(--at-layer-5, rgba(255,255,255,.06)); color: var(--at-text); }
.kc-topic.active { background: var(--at-text); color: var(--at-bg); font-weight: 600; }
.kc-topic.unread { color: var(--at-text); font-weight: 500; }
.kc-topic-lock { font-size: 1rem !important; opacity: .55; }
.kc-topic .kc-un { margin-left: auto; }
.kc-rail-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--kc-line); flex: none; min-height: 64px; }
.kc-rail-me-t { flex: 1; min-width: 0; line-height: 1.7rem; }
.kc-rail-me-t b { display: block; font-size: 1.35rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-rail-me-t small { color: var(--at-text-2); font-size: 1.15rem; }
.kc-rail-login { flex: 1; }

/* ---- main ---- */
.kc-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.kc-top { flex: none; }
.kc-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0 16px; scrollbar-width: thin; scroll-behavior: auto; }
.kc-log.is-swap .kc-m { animation: none; }
.kc-chips { scroll-behavior: auto; }
.kc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 36px 20px 18px; animation: kc-in .3s var(--kc-ease); }
.kc-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--kc-surface-2); color: var(--at-text); font-size: 3rem; margin-bottom: 10px; }
.kc-empty b { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.kc-empty p { margin: 0 0 8px; color: var(--at-text-2); font-size: 1.45rem; line-height: 2.1rem; }
.kc-day { display: flex; justify-content: center; margin: 18px 0 6px; }
.kc-day span { font-size: 1.15rem; font-weight: 600; color: var(--at-text-2); padding: 3px 12px; border-radius: 12px; background: var(--kc-surface-2); }
.kc-m { position: relative; display: flex; gap: 12px; padding: 4px 16px; margin-top: 10px; align-items: flex-start; animation: kc-in .18s var(--kc-ease); }
.kc-swipe-body { display: flex; gap: 12px; flex: 1; min-width: 0; align-items: flex-start; }
.kc-swipe-ic { position: absolute; left: 8px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--at-bg-menu); color: var(--at-text); opacity: var(--swipe, 0); transform: scale(calc(.7 + var(--swipe, 0) * .3)); pointer-events: none; }
.kc-m.kc-swipe-go .kc-swipe-ic { background: var(--kc-accent); color: var(--kc-ink); }
.kc-m:hover { background: var(--at-layer-5, rgba(255,255,255,.035)); }
.kc-m.cont { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }
.kc-m.cont .kc-mb { margin-left: 52px; }
.kc-m.cont .kc-t.hover { position: absolute; left: 14px; top: 5px; width: 44px; text-align: center; font-size: 1rem; opacity: 0; }
.kc-m.cont:hover .kc-t.hover { opacity: 1; }
.kc-m.mentioned { background: color-mix(in srgb, var(--kc-accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--kc-accent); }
.kc-m.announce { background: color-mix(in srgb, var(--at-live) 8%, transparent); box-shadow: inset 3px 0 0 var(--at-live); }
.kc-m.flash { animation: kc-flash 1.2s ease; }
.kc-av { position: relative; display: inline-block; flex: none; border-radius: 50%; overflow: visible; }
button.kc-av, button.kc-uname { line-height: 0; }
button.kc-uname { line-height: inherit; max-width: 100%; }
.kc-ucard { position: fixed; z-index: 2080; width: 280px; max-width: calc(100vw - 16px); background: var(--at-bg-menu); color: var(--at-text); border-radius: 12px; box-shadow: var(--at-shadow); overflow: hidden; font-size: 1.35rem; text-align: left; }
.kc-ucard[hidden] { display: none !important; }
.kc-ucard-bn { height: 84px; background-color: var(--at-bg-menu); background-position: center; background-size: cover; overflow: hidden; }
.kc-ucard-bn.is-plain { background-image: linear-gradient(135deg, color-mix(in srgb, var(--at-cta) 55%, #1a2744), color-mix(in srgb, var(--at-mana) 50%, #1a1428)); }
.kc-ucard-bd { padding: 0 14px 14px; margin-top: -22px; }
.kc-ucard .kc-av { width: 52px !important; height: 52px !important; border: 3px solid var(--at-bg-menu); border-radius: 50%; background: var(--at-bg-menu); }
.kc-ucard-nm { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; font-size: 1.5rem; font-weight: 700; }
.kc-ucard-nm .at-rn { min-width: 0; }
.kc-ucard-h { margin-top: 2px; color: var(--at-text-2); font-size: 1.2rem; }
.kc-ucard-title { margin-top: 6px; }
.kc-ucard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.kc-ucard-stats div { background: var(--at-layer-5, rgba(255,255,255,.06)); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.kc-ucard-stats small { display: block; color: var(--at-text-2); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kc-ucard-stats b { display: block; margin-top: 2px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-ucard-stats .mana { color: var(--at-mana); }
.kc-ucard-here { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--at-text-2); font-size: 1.2rem; }
.kc-ucard-here i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.kc-ucard-bt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kc-ucard-bt .at-btn { flex: 1 1 auto; height: 32px; padding: 0 10px; font-size: 1.25rem; justify-content: center; }
.kc-av > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--kc-surface-2); }
/* Same overlay as profile frames. Global img{max-width:100%} was pinning the frame to the photo and shifting it. */
.kc-av .kc-deco { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; border-radius: 0; object-fit: contain; pointer-events: none; z-index: 2; }
.kc-m > .kc-av { width: 40px !important; height: 40px !important; margin-top: 1px; }
.kc-mb { flex: 1; min-width: 0; line-height: 2.1rem; }
.kc-mh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 1px; font-size: 1.35rem; }
.kc-mh .at-rn, .kc-mh > span:first-child { font-weight: 600; }
.kc-role { font-size: 1rem; } .kc-role.admin { color: #f5c542; } .kc-role.mod { color: var(--kc-accent); }
.kc-badge { width: 16px; height: 16px; object-fit: contain; }
.kc-lvl { font-size: 1rem; font-weight: 700; padding: 0 5px; border-radius: 6px; background: var(--at-chip); color: var(--at-text-2); line-height: 1.6rem; }
.kc-title { display: inline-flex; align-items: center; gap: 3px; font-size: 1.1rem; font-weight: 600; padding: 0 7px; border-radius: 10px; background: var(--at-chip); color: var(--at-text-2); line-height: 1.8rem; }
.kc-title i { font-size: 1rem; }
.kc-title.c-rose { color: #fb7185; } .kc-title.c-gold { color: #fbbf24; } .kc-title.c-cyan { color: #22d3ee; } .kc-title.c-violet { color: #a78bfa; } .kc-title.c-emerald { color: #34d399; } .kc-title.c-red { color: #f87171; } .kc-title.c-blue { color: #60a5fa; } .kc-title.c-pink { color: #f472b6; } .kc-title.c-orange { color: #fb923c; }
.kc-t { font-size: 1.1rem; color: var(--at-text-2); }
.kc-text { word-wrap: break-word; overflow-wrap: anywhere; font-size: 1.45rem; }
.kc-text code, .kc-card code { font-family: ui-monospace, Menlo, monospace; font-size: 1.2rem; padding: 1px 5px; border-radius: 4px; background: var(--at-layer-10); }
.kc-text a { color: var(--kc-accent); }
.kc-edited { color: var(--at-text-2); font-size: 1.1rem; }
.kc-sp { background: var(--at-text); color: transparent; border-radius: 4px; cursor: pointer; padding: 0 3px; transition: color .15s, background .15s; }
.kc-sp.open { background: var(--at-layer-10); color: inherit; }
.kc-mention { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 14%, transparent); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.kc-mention.me { background: var(--kc-accent); color: var(--kc-ink); }
.me-action { color: var(--at-text-2); }
.kc-reply { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; padding: 4px 10px; border-left: 2px solid var(--kc-accent); border-radius: 0 8px 8px 0; background: var(--at-layer-5, rgba(255,255,255,.04)); font-size: 1.2rem; color: var(--at-text-2); cursor: pointer; max-width: 440px; }
.kc-reply b { color: var(--at-text); } .kc-reply span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-reply:hover { background: var(--at-layer-10); }
.kc-reply.me { background: color-mix(in srgb, var(--kc-accent) 18%, transparent); border-left-color: var(--kc-accent); color: var(--at-text); }
.kc-you { display: inline-flex; align-items: center; margin-bottom: 4px; padding: 3px 8px; border-radius: 999px; background: var(--kc-accent); color: var(--kc-ink); font-size: 1.1rem; font-weight: 700; }
.kc-you.live b { animation: kc-tag-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kc-wave {
  0% { transform: rotate(0deg); }
  12% { transform: rotate(28deg); }
  24% { transform: rotate(-22deg); }
  36% { transform: rotate(26deg); }
  48% { transform: rotate(-16deg); }
  62% { transform: rotate(18deg); }
  78% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}
@keyframes kc-tag-in { from { opacity: 0; transform: translateY(12px) scale(.8); } to { opacity: 1; transform: none; } }
.kc-atbar { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 6; display: flex; flex-direction: column; max-height: 260px; overflow: auto; margin: 0; background: var(--at-bg-menu); border: 1px solid var(--at-layer-10); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.kc-atbar[hidden] { display: none; }
.kc-at-tag { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 6px 10px; background: transparent; color: var(--at-text); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.kc-at-tag img, .kc-at-tag > i { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--at-layer-10); font-style: normal; font-size: 1.1rem; }
.kc-at-tag span { display: flex; flex-direction: column; min-width: 0; }
.kc-at-tag small { font-weight: 500; font-size: 1.1rem; color: var(--at-text-2); }
.kc-at-tag.on, .kc-at-tag:hover { background: color-mix(in srgb, var(--kc-accent) 16%, transparent); }

/* Comment / post @ picker. Same job as Anikoto's floating mention window. */
.at-mention { position: fixed; z-index: 100000; width: min(280px, calc(100vw - 16px)); background: var(--at-bg-menu); border: 1px solid var(--at-layer-10); border-radius: 10px; box-shadow: var(--at-shadow); overflow: hidden; }
.at-mention[hidden] { display: none; }
.at-mention-tabs { display: flex; border-bottom: 1px solid var(--at-layer-10); }
.at-mention-tabs button { flex: 1; background: transparent; border: 0; color: var(--at-text-2); padding: 8px; font: inherit; font-weight: 700; font-size: 1.2rem; cursor: pointer; }
.at-mention-tabs button.on { color: var(--at-cta); }
.at-mention-list { max-height: 240px; overflow: auto; }
.at-mention-hit { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--at-layer-5); color: var(--at-text); padding: 8px 10px; cursor: pointer; font: inherit; }
.at-mention-hit.on, .at-mention-hit:hover { background: var(--at-hover); }
.at-mention-hit img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--at-layer-10); }
.at-mention-hit span { display: flex; flex-direction: column; min-width: 0; }
.at-mention-hit small { color: var(--at-text-2); font-size: 1.1rem; }
.at-mention-hit em { margin-left: auto; font-style: normal; font-size: 1.05rem; font-weight: 600; color: var(--at-text-2); }
.at-mention-empty { padding: 10px 12px; color: var(--at-text-2); font-size: 1.2rem; }
.kc-announce { display: inline-flex; align-items: center; gap: 6px; font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--at-live); margin-bottom: 2px; }
.kc-gif, .kc-img img { display: block; max-width: min(100%, 340px); max-height: 260px; border-radius: 12px; margin-top: 6px; background: var(--kc-surface-2); }
.kc-anime { display: flex; gap: 12px; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--kc-surface-2); max-width: 400px; color: inherit; text-decoration: none; }
.kc-anime img { width: 60px; height: 86px; border-radius: 8px; object-fit: cover; flex: none; }
.kc-anime b { display: block; font-size: 1.45rem; line-height: 1.9rem; font-weight: 600; } .kc-anime span { display: block; color: var(--at-text-2); font-size: 1.2rem; } .kc-anime em { display: inline-block; margin-top: 8px; font-style: normal; color: var(--kc-accent); font-size: 1.2rem; font-weight: 600; }
.kc-anime-pick { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 6px; border: 0; border-radius: 10px; background: var(--at-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kc-anime-pick:hover { background: var(--at-hover); }
.kc-anime-pick img { width: 36px; height: 52px; border-radius: 6px; object-fit: cover; flex: none; background: var(--at-bg-menu); }
.kc-anime-pick b { display: block; font-size: 1.3rem; } .kc-anime-pick small { display: block; color: var(--at-text-2); font-size: 1.1rem; }
.kc-anime-pick:disabled { opacity: .5; cursor: default; }
.kc-np { display: flex; gap: 12px; align-items: center; margin-top: 8px; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--kc-accent) 26%, var(--kc-surface-2)), var(--kc-surface-2)); max-width: 400px; }
.kc-np img, .kc-np-ic { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--at-layer-10); font-size: 1.8rem; }
.kc-np small { display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--at-text-2); font-weight: 700; } .kc-np b { display: block; font-size: 1.45rem; font-weight: 600; } .kc-np span { color: var(--at-text-2); font-size: 1.2rem; }
.kc-poll { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--kc-surface-2); max-width: 440px; }
.kc-poll-q { font-weight: 700; margin-bottom: 10px; font-size: 1.45rem; } .kc-poll-q i { color: var(--kc-accent); margin-right: 6px; }
.kc-poll-o { position: relative; display: flex; align-items: center; width: 100%; margin: 6px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--kc-line); background: transparent; color: var(--at-text); font: inherit; font-size: 1.35rem; cursor: pointer; overflow: hidden; text-align: left; }
.kc-poll-o i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--kc-accent) 24%, transparent); }
.kc-poll-o span { position: relative; flex: 1; } .kc-poll-o b { position: relative; font-weight: 700; color: var(--at-text-2); }
.kc-poll-o.mine { border-color: var(--kc-accent); } .kc-poll-o.mine b { color: var(--kc-accent); } .kc-poll-o:disabled { cursor: default; }
.kc-poll-f { margin-top: 8px; font-size: 1.15rem; color: var(--at-text-2); }
.kc-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kc-rx-b { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid transparent; background: var(--kc-surface-2); color: var(--at-text); font: inherit; font-size: 1.25rem; cursor: pointer; transition: transform .12s, border-color .12s; }
.kc-rx-b:hover { transform: translateY(-1px); border-color: var(--at-text-2); }
.kc-rx-b b { font-weight: 600; color: var(--at-text-2); }
.kc-rx-b.mine { border-color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 18%, var(--kc-surface-2)); } .kc-rx-b.mine b { color: var(--kc-accent); }
.kc-acts { position: absolute; right: 16px; top: -14px; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--at-bg-menu, var(--kc-surface-2)); border: 1px solid var(--kc-line); box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 1; }
.kc-m:hover .kc-acts, .kc-m.kc-pick .kc-acts { display: inline-flex; }
.kc-m.kc-pick { background: color-mix(in srgb, var(--at-cta) 14%, transparent); box-shadow: inset 0 0 0 2px var(--at-cta); border-radius: 8px; }
.kc-acts button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--at-text-2); cursor: pointer; font-size: 1.25rem; }
.kc-acts button:hover { background: var(--at-layer-10); color: var(--at-text); }
.kc-m.bot .kc-bot-av { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kc-surface-2); color: var(--kc-accent); flex: none; font-size: 1.6rem; margin-top: 1px; }
.kc-bot-name { font-size: 1.35rem; font-weight: 600; color: var(--at-text); display: flex; gap: 6px; align-items: center; }
.kc-bot-name::after { content: "BOT"; font-size: .95rem; font-weight: 800; letter-spacing: .06em; padding: 0 5px; border-radius: 4px; background: var(--kc-accent); color: var(--kc-ink); line-height: 1.5rem; }
.kc-sys { font-size: 1.2rem; color: var(--at-text-2); padding: 2px 0; } .kc-sys-report, .kc-sys-warn, .kc-sys-removed { color: #f5c542; }
.kc-card { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--kc-surface-2); border-left: 3px solid var(--kc-accent); max-width: 540px; font-size: 1.3rem; line-height: 1.9rem; }
.kc-card-warn, .kc-card-mute { border-left-color: #f5c542; } .kc-card-err, .kc-card-lock, .kc-card-link { border-left-color: var(--at-live); } .kc-card-ok { border-left-color: #34d399; } .kc-card-music { border-left-color: #a78bfa; }
.kc-card-h { font-weight: 700; display: flex; align-items: center; gap: 6px; } .kc-card-h i { color: var(--kc-accent); }
.kc-card-b { margin-top: 4px; } .kc-card-hint { margin-top: 6px; font-size: 1.15rem; color: var(--at-text-2); }
.kc-card-t { margin-top: 6px; border-collapse: collapse; width: 100%; } .kc-card-t td { padding: 2px 8px 2px 0; vertical-align: top; font-size: 1.25rem; } .kc-card-t td:first-child { white-space: nowrap; color: var(--at-text-2); }
.kc-card-img { display: block; max-width: 100%; max-height: 200px; border-radius: 8px; margin-top: 8px; }
.kc-rules { margin: 4px 0 0; padding-left: 18px; } .kc-rules li { margin: 3px 0; }
.kc-dim { color: var(--at-text-2); font-size: 1.25rem; }
.kc-jump { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 16px 0 10px; border-radius: 17px; border: 0; background: var(--at-text); color: var(--at-bg); font: inherit; font-size: 1.3rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.4); z-index: 2; animation: kc-in .2s var(--kc-ease); }
.kc-jump[hidden] { display: none; } .kc-jump .at-icon { width: 18px; height: 18px; }

/* ---- composer ---- */
.kc-compose { position: relative; flex: none; padding: 8px 16px 12px; }
.kc-compose.guest, .kc-compose.blocked { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0 16px 16px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--kc-surface-2); color: var(--at-text-2); font-size: 1.35rem; }
.kc-compose.guest span { flex: 1; } .kc-compose.blocked i { color: var(--at-live); font-size: 1.5rem; }
.kc-replybar, .kc-editbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 0 0 6px; border-radius: 10px; background: var(--kc-surface-2); border-left: 3px solid var(--kc-accent); font-size: 1.25rem; color: var(--at-text-2); min-width: 0; }
.kc-replybar[hidden], .kc-editbar[hidden] { display: none; }
.kc-replybar .at-icon, .kc-replybar > i, .kc-replybar-who { flex: none; white-space: nowrap; }
.kc-replybar b { color: var(--at-text); }
.kc-replybar-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-replybar .at-iconbtn { flex: none; margin-left: 0; }
.kc-editbar button { border: 0; background: none; color: var(--kc-accent); font: inherit; font-size: 1.2rem; font-weight: 600; cursor: pointer; margin-left: auto; }
.kc-box { display: flex; align-items: flex-end; gap: 8px; }
.kc-plus { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--kc-surface-2); color: var(--at-text-2); cursor: pointer; flex: none; transition: background .15s, color .15s, transform .2s var(--kc-ease); }
.kc-plus:hover { background: var(--at-layer-10); color: var(--at-text); transform: rotate(90deg); }
.kc-plus .at-icon { width: 20px; height: 20px; }
.kc-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; background: var(--kc-surface-2); border: 1px solid transparent; border-radius: 23px; padding: 4px 6px 4px 18px; min-height: 46px; transition: border-color .15s, background .15s; }
.kc-field:focus-within { border-color: var(--at-text-2); background: var(--at-bg-input, var(--kc-surface-2)); }
.kc-field textarea, .kc-field input { flex: 1; min-width: 0; display: block; border: 0; background: transparent; color: var(--at-text); font: inherit; font-size: 1.5rem; line-height: 2.2rem; padding: 7px 0; resize: none; outline: 0; max-height: 160px; }
.kc-field textarea::placeholder, .kc-field input::placeholder { color: var(--at-text-2); }
.kc-tools { display: flex; align-items: center; flex: none; padding-bottom: 0; }
.kc-tools .at-iconbtn { width: 36px; height: 36px; color: var(--at-text-2); } .kc-tools .at-iconbtn:hover { color: var(--at-text); }
.kc-gifb { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; border: 1.5px solid currentColor !important; border-radius: 6px !important; width: 30px !important; height: 20px !important; margin: 0 4px 0 0; padding: 0 !important; line-height: 1; align-self: center; }
.kc-send { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--kc-accent); color: var(--kc-ink); cursor: pointer; flex: none; transition: transform .15s var(--kc-ease), background .15s; }
.kc-send:hover:not(:disabled) { transform: scale(1.06); }
.kc-send:disabled { background: var(--kc-surface-2); color: var(--at-text-2); cursor: default; }
.kc-send .at-icon { width: 20px; height: 20px; }
.kc-hint { display: flex; justify-content: flex-end; align-items: center; min-height: 0; padding: 2px 56px 0; font-size: 1.15rem; color: var(--at-text-2); }
.kc-compose > .kc-hint:not(:has(.kc-cnt:not(:empty))) { display: none; }
.kc-compose > .kc-typing { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding-left: 48px; min-height: 1.8rem; font-size: 1.15rem; color: var(--at-text-2); }
.kc-compose > .kc-typing:empty { display: none; }
.kc-typing b { color: var(--at-text); font-weight: 600; }
.kc-typing-dots { display: inline-flex; gap: 3px; } .kc-typing-dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--at-text-2); animation: kc-dots 1.2s infinite ease-in-out; } .kc-typing-dots b:nth-child(2) { animation-delay: .15s; } .kc-typing-dots b:nth-child(3) { animation-delay: .3s; }
.kc-slash { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 6px); max-height: min(420px, 52vh); overflow-y: auto; background: var(--at-bg-menu, var(--kc-surface-2)); border: 1px solid var(--kc-line); border-radius: 14px; box-shadow: 0 -10px 30px rgba(0,0,0,.35); z-index: 3; animation: kc-in .15s var(--kc-ease); }
.kc-slash[hidden] { display: none; }
.kc-slash-i { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; width: 100%; padding: 9px 14px; border: 0; background: transparent; color: var(--at-text); font: inherit; text-align: left; cursor: pointer; align-items: center; }
.kc-slash-i.on, .kc-slash-i:hover { background: var(--at-layer-10); }
.kc-slash-i code { font-size: 1.3rem; color: var(--kc-accent); font-weight: 600; } .kc-slash-i span { color: var(--at-text-2); font-size: 1.2rem; } .kc-slash-i small { grid-column: 1 / 3; color: var(--at-text-2); font-size: 1.15rem; } .kc-slash-s { grid-row: 1 / 3; font-style: normal; font-size: 1rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--at-chip); color: var(--at-text-2); }
.kc-picker { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 6px); height: 340px; display: flex; flex-direction: column; background: var(--at-bg-menu, var(--kc-surface-2)); border: 1px solid var(--kc-line); border-radius: 14px; box-shadow: 0 -10px 30px rgba(0,0,0,.35); z-index: 3; overflow: hidden; animation: kc-in .15s var(--kc-ease); }
.kc-picker[hidden] { display: none; }
.kc-ptabs { display: flex; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--kc-line); flex: none; }
.kc-ptabs > button:not(.at-iconbtn) { height: 30px; padding: 0 14px; border-radius: 15px; border: 0; background: transparent; color: var(--at-text-2); font: inherit; font-size: 1.3rem; font-weight: 600; cursor: pointer; }
.kc-ptabs > button.on { background: var(--at-text); color: var(--at-bg); } .kc-ptabs .sp { flex: 1; }
.kc-pbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.kc-ecats { display: flex; gap: 2px; margin-bottom: 6px; } .kc-ecats button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 1.7rem; cursor: pointer; } .kc-ecats button.on { background: var(--at-layer-10); }
.kc-egrid .lbl { font-size: 1.1rem; font-weight: 700; color: var(--at-text-2); text-transform: uppercase; letter-spacing: .06em; margin: 6px 2px; }
.kc-egrid .g { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; } .kc-egrid .g button { height: 38px; border: 0; border-radius: 8px; background: transparent; font-size: 2.1rem; cursor: pointer; transition: transform .1s; } .kc-egrid .g button:hover { background: var(--at-layer-10); transform: scale(1.15); }
.kc-gsearch { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 36px; border-radius: 18px; background: var(--at-bg-input); border: 1px solid var(--kc-line); margin-bottom: 8px; } .kc-gsearch .at-icon { width: 16px; height: 16px; color: var(--at-text-2); } .kc-gsearch input { flex: 1; border: 0; background: transparent; color: var(--at-text); font: inherit; outline: 0; }
.kc-ggrid { columns: 3; column-gap: 6px; } .kc-ggrid button { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--at-layer-10); cursor: pointer; break-inside: avoid; } .kc-ggrid img { display: block; width: 100%; }
.kc-dim.pw { text-align: center; font-size: 1rem; padding: 6px; }

/* ---- side column ---- */
.kc-side { flex-direction: column; min-height: 0; border-left: 1px solid var(--kc-line); background: var(--at-bg); }
.kc-sheet-grab { display: none; }
.kc-side-tabs { display: flex; align-items: center; height: 64px; padding: 0 12px; flex: none; gap: 6px; }
.kc-side-tabs button:not(.at-iconbtn) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.35rem; font-weight: 500; cursor: pointer; }
.kc-side-tabs button:not(.at-iconbtn) i { color: var(--at-text-2); font-size: 1.15rem; }
.kc-side-tabs button.on { background: var(--at-text); color: var(--at-bg); } .kc-side-tabs button.on i { color: inherit; }
.kc-side-x { display: none; }
.kc-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; scrollbar-width: thin; overflow-anchor: none; }
.kc-side-h { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; } .kc-side-h span { margin-left: auto; font-weight: 500; color: var(--at-text-2); font-size: 1.2rem; } .kc-side-h .at-iconbtn { margin-left: auto; }
.kc-side-sub { margin: 16px 0 6px; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--at-text-2); }
.kc-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; } .kc-person:hover { background: var(--at-layer-5, rgba(255,255,255,.05)); }
.kc-person-t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-listeners { margin-left: auto; font-weight: 500; color: var(--at-text-2); font-size: 1.2rem; display: inline-flex; gap: 5px; align-items: center; }
.kc-panel.sp-open .kc-side, .kc-panel.sp-open .kc-side-body { background: var(--at-bg); color: var(--at-text); }
.kc-panel.sp-open .kc-side-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kc-panel.sp-open .kc-side-tabs { background: var(--at-bg); }
.kc-panel.sp-open .kc-side-tabs button:not(.at-iconbtn):not(.on) { background: transparent; color: var(--at-text-2); }
.kc-pl { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; color: var(--at-text); background: var(--at-bg); }
.kc-pl-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; scrollbar-width: thin; }
.kc-pl-hero { position: relative; overflow: hidden; padding: 72px 24px 8px; background: var(--at-bg); text-align: center; }
.kc-pl-wash, .kc-pl-fade { position: absolute; inset: 0; pointer-events: none; }
.kc-pl-wash { background: var(--kc-art) center 28% / cover no-repeat; filter: blur(42px) saturate(1.45); transform: scale(1.28); opacity: .95; }
.kc-pl-fade { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--at-bg) 20%, transparent) 42%, var(--at-bg) 100%); }
.kc-pl-hero.is-c .kc-pl-wash { opacity: 0; }
.kc-pl-hero.is-c .kc-pl-fade { background: linear-gradient(180deg, var(--kc-c, var(--at-red)) 0%, color-mix(in srgb, var(--kc-c, var(--at-red)) 42%, var(--at-bg)) 46%, var(--at-bg) 100%); }
.kc-pl-back { position: absolute; left: 16px; top: 16px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .kc-pl-back .at-icon { width: 22px; height: 22px; }
.kc-pl-cover { position: relative; z-index: 1; display: block; width: 58%; max-width: 232px; margin: 0 auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.kc-pl-cover.ph { display: flex; align-items: center; justify-content: center; background: var(--at-bg-menu); color: var(--at-text-2); font-size: 4rem; }
.kc-pl-body { position: relative; padding: 16px 16px 12px; }
.kc-pl-desc { margin: 0; color: var(--at-text); font-size: 1.4rem; font-weight: 500; line-height: 2rem; }
.kc-pl-brand { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 1.4rem; } .kc-pl-brand b { font-weight: 700; }
.kc-pl-logo { width: 24px; height: 24px; border-radius: 50%; background: var(--at-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.kc-pl-meta { margin-top: 8px; color: var(--at-text-2); font-size: 1.4rem; font-weight: 500; }
.kc-pl-note { margin: 6px 0 0; color: var(--at-text); font-size: 1.3rem; font-weight: 600; }
.kc-pl-actions { display: flex; align-items: center; gap: 18px; margin: 16px 0 8px; }
.kc-pl-miniart { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; } .kc-pl-miniart.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--at-bg-menu); color: var(--at-text-2); }
.kc-pl-ico { width: 32px; height: 32px; border: 0; background: transparent; color: var(--at-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .kc-pl-ico:hover { color: var(--at-text); } .kc-pl-ico .at-icon { width: 24px; height: 24px; }
.kc-pl-grow { flex: 1; }
.kc-pl-shuffle { width: 36px; height: 36px; border: 0; background: transparent; color: var(--at-red); cursor: pointer; font-size: 1.8rem; padding: 0; }
.kc-pl-play { width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--at-brand-btn); color: var(--at-brand-btn-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .kc-pl-play:hover { transform: scale(1.04); } .kc-pl-play .at-icon { width: 28px; height: 28px; }
.kc-pl-skip { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 14px; }
.kc-pl-votebtn { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--at-brand-btn); color: var(--at-brand-btn-text); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.kc-pl-votebtn.on { background: transparent; color: var(--at-red); box-shadow: inset 0 0 0 1px var(--at-red); }
.kc-pl-skip p { margin: 0; color: var(--at-text-2); font-size: 1.3rem; line-height: 1.8rem; }
.kc-rate { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.kc-rate-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); }
.kc-rate-top b { color: var(--at-text); font-weight: 600; }
.kc-rate-nums { display: flex; gap: 4px; }
.kc-rate-nums button { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--at-chip); color: var(--at-text-2); font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.kc-rate-nums button.on, .kc-rate-nums button:hover { background: var(--at-cta); color: #fff; }
.kc-taste { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.kc-taste-row { display: flex; gap: 10px; align-items: flex-start; }
.kc-taste-row .n { width: 18px; flex: none; color: var(--at-text-3); font-weight: 700; font-size: 1.3rem; line-height: 2rem; }
.kc-taste-row b { display: block; font-size: 1.35rem; font-weight: 600; line-height: 1.8rem; }
.kc-taste-row small { display: block; color: var(--at-text-2); font-size: 1.2rem; line-height: 1.6rem; }
.kc-pl-volpop { position: relative; display: inline-flex; }
.kc-pl-volbox { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 148px; padding: 12px 14px; border-radius: 8px; background: var(--at-bg-menu); box-shadow: var(--at-shadow); z-index: 8; }
.kc-pl-volbox[hidden] { display: none; }
.kc-pl-volbox input { width: 100%; accent-color: var(--at-red); }
.kc-pl-find { position: relative; z-index: 6; margin: 8px 0 4px; }
.kc-pl-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 6px; background: var(--at-bg-input); color: var(--at-text); border: 1px solid var(--at-border); } .kc-pl-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--at-text); font: inherit; font-size: 1.4rem; outline: 0; } .kc-pl-search input::-webkit-search-decoration, .kc-pl-search input::-webkit-search-cancel-button { display: none; }
.kc-pl-list { margin-top: 8px; }
.kc-pl-row { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 8px; border-radius: 4px; } .kc-pl-row:hover { background: var(--at-hover); }
.kc-pl-row img, .kc-pl-row .ph { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--at-bg-menu); color: var(--at-text-2); }
.kc-pl-row div { flex: 1; min-width: 0; } .kc-pl-row b { display: block; font-size: 1.6rem; font-weight: 500; color: var(--at-text); line-height: 2.1rem; } .kc-pl-row.on b { color: var(--at-red); } .kc-pl-row small { display: block; color: var(--at-text-2); font-size: 1.4rem; line-height: 1.8rem; }
.kc-pl-more { border: 0; background: transparent; color: var(--at-text-2); cursor: pointer; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .kc-pl-more:hover { color: var(--at-text); }
.kc-pl-recent { margin: 22px 0 8px; color: var(--at-text); font-size: 1.6rem; font-weight: 700; }
.kc-pl-mini { position: relative; flex: none; margin: 0 8px 8px; background: var(--at-bg-raised); border-radius: 8px; overflow: hidden; box-shadow: var(--at-shadow); }
.kc-pl-minibar { height: 2px; background: var(--at-border); overflow: hidden; } .kc-pl-minibar i { display: block; height: 100%; width: 0; background: var(--at-text); } .kc-pl-minibar i.is-wait { width: 35%; animation: kc-wait 1.1s ease-in-out infinite; }
@keyframes kc-wait { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.kc-pl.on .kc-pl-minibar i { background: var(--at-red); }
.kc-pl-minibody { display: flex; align-items: center; gap: 10px; padding: 8px; } .kc-pl-minibody img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex: none; } .kc-pl-minibody div { flex: 1; min-width: 0; } .kc-pl-minibody b { display: block; font-size: 1.3rem; font-weight: 600; } .kc-pl-minibody small { color: var(--at-text-2); font-size: 1.15rem; }
.kc-pl-minigo { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--at-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kc-pl-lib { margin-top: 12px; border: 0; background: transparent; color: var(--at-text-2); font: inherit; font-weight: 700; cursor: pointer; }
.kc-pl .kc-rd-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; max-height: 280px; overflow-y: auto; background: var(--at-bg-menu); border-radius: 8px; box-shadow: var(--at-shadow); z-index: 6; } .kc-pl .kc-rd-res:empty { display: none; } .kc-pl .kc-rd-res .kc-dim { padding: 12px; } .kc-pl .kc-rd-ri { color: var(--at-text); } .kc-pl .kc-rd-ri small { color: var(--at-text-2); } .kc-pl .kc-rd-ri:hover { background: var(--at-hover); } .kc-radio.off { padding: 16px; color: var(--at-text-2); }
.kc-rd-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--at-bg-input); border: 1px solid var(--kc-line); } .kc-rd-search:focus-within { border-color: var(--at-text-2); } .kc-rd-search .at-icon { width: 16px; height: 16px; color: var(--at-text-2); } .kc-rd-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--at-text); font: inherit; outline: 0; }
.kc-rd-res { margin-top: 6px; }
.kc-rd-ri { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 12px; background: transparent; color: var(--at-text); font: inherit; text-align: left; cursor: pointer; }
.kc-rd-ri:hover { background: var(--at-layer-10); } .kc-rd-ri:disabled, .kc-rd-ri.is-long { opacity: .5; }
.kc-rd-ri img, .kc-rd-ri .ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--at-layer-10); color: var(--at-text-2); }
.kc-rd-ri div { flex: 1; min-width: 0; } .kc-rd-ri b { display: block; font-size: 1.3rem; font-weight: 600; } .kc-rd-ri small { color: var(--at-text-2); font-size: 1.1rem; } .kc-rd-ri > i { color: var(--kc-accent); }
.kc-rd-q { margin-top: 4px; } .kc-rd-qi { display: flex; align-items: center; gap: 10px; padding: 6px 4px; margin: 0 -4px; border-radius: 6px; } .kc-rd-qi:hover { background: var(--kc-hover, rgba(255,255,255,.08)); } .kc-rd-qi img, .kc-rd-qi .ph { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #282828; color: var(--at-text-2); font-size: 1.4rem; } .kc-rd-qi div { flex: 1; min-width: 0; } .kc-rd-qi b { display: block; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; } .kc-rd-qi small { color: var(--at-text-2); font-size: 1.2rem; }
.kc-rd-q.recent { opacity: .65; }
.kc-ev { display: flex; flex-direction: column; margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: var(--kc-surface-2); }
.kc-ev.live { box-shadow: 0 0 0 2px var(--at-live); } .kc-ev.off { opacity: .55; }
.kc-ev-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kc-ev-b { padding: 12px 14px; } .kc-ev-when { font-size: 1.1rem; font-weight: 600; color: var(--at-text-2); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; } .kc-ev-b b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .kc-ev-b p { margin: 4px 0 0; font-size: 1.3rem; color: var(--at-text-2); line-height: 1.9rem; }
.kc-ev-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kc-events .kc-side-h .at-iconbtn, .kc-radio .at-btn.text { margin-top: 6px; }

/* ---- modals ---- */
.kc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.kc-sel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 1.2rem; color: var(--at-text-2); }
.kc-sel select { height: 40px; border-radius: 8px; border: 1px solid var(--kc-line); background: var(--at-bg-input); color: var(--at-text); font: inherit; padding: 0 10px; }
.kc-check { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; margin: 4px 0 8px; }
.kc-rules-l { margin: 0 0 12px; padding-left: 20px; font-size: 1.35rem; line-height: 2rem; } .kc-rules-l li { margin: 6px 0; }

/* ---- Watch2gether room chat (chat.js) ---- */
.wc { position: relative; display: flex; flex-direction: column; height: 560px; min-height: 0; border: 1px solid var(--at-layer-10); border-radius: 12px; overflow: hidden; background: var(--at-live-chat-bg); color: var(--at-text); }
.wc-head { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--at-layer-10); flex: none; font-size: 1.4rem; font-weight: 500; } .wc-head .sp { flex: 1; }
.wc-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--at-text-2); font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.wc-tab .at-icon { width: 14px; height: 14px; color: var(--at-live); }
.wc-tab.on { color: var(--kc-accent); box-shadow: inset 0 -2px 0 var(--kc-accent); }
.wc-live { display: inline-flex; align-items: center; gap: 6px; } .wc-live .at-icon { width: 14px; height: 14px; color: var(--at-live); }
.wc-online { display: inline-flex; align-items: center; gap: 4px; font-size: 1.2rem; color: var(--at-text-2); font-weight: 400; } .wc-online .at-icon { width: 14px; height: 14px; }
.wc-body, .wc-logs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; scrollbar-width: thin; }
.wc-welcome, .wc-sys { display: flex; gap: 6px; align-items: flex-start; padding: 6px 16px; font-size: 1.2rem; color: var(--at-text-2); } .wc-sys { justify-content: center; text-align: center; }
.wc-m { display: flex; gap: 10px; padding: 6px 16px; align-items: flex-start; } .wc-m:hover { background: var(--at-layer-5, rgba(255,255,255,.04)); }
.wc-b { flex: 1; min-width: 0; font-size: 1.3rem; line-height: 1.9rem; word-wrap: break-word; overflow-wrap: anywhere; }
.wc-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-t { font-size: 1.1rem; color: var(--at-text-2); }
.wc-n { font-weight: 700; color: var(--kc-accent); } .wc-n.me { color: var(--kc-accent); }
.wc-mark { font-size: 1rem; } .wc-mark.host { color: #f5c542; } .wc-mark.mod { color: var(--kc-accent); }
.wc-b .kc-title { margin-right: 6px; vertical-align: 1px; }
.wc-x { display: block; margin-top: 2px; color: var(--at-text); }
.wc-gif { display: block; max-width: min(100%, 260px); max-height: 200px; border-radius: 10px; margin-top: 4px; }
.wc-log { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 16px; font-size: 1.25rem; color: var(--at-text-2); border-bottom: 1px solid var(--at-layer-5, rgba(255,255,255,.04)); }
.wc-log-k { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kc-accent); }
.wc-log-x { color: var(--at-text); }
.wc-foot { position: relative; flex: none; padding: 8px 12px 10px; border-top: 1px solid var(--at-layer-10); background: var(--at-bg); }
.wc-foot.guest { text-align: center; font-size: 1.3rem; color: var(--at-text-2); padding: 14px; } .wc-foot.guest a { color: var(--kc-accent); }
.wc .kc-box { display: flex; align-items: center; gap: 8px; }
.wc .kc-field { min-height: 42px; padding: 2px 6px 2px 16px; }
.wc .kc-field input { height: 36px; padding: 0; font-size: 1.4rem; line-height: 36px; }
.wc .kc-send { width: 42px; height: 42px; }
.wc .kc-jump { bottom: 78px; } .wc .kc-picker { height: 260px; } .wc .kc-hint { padding: 2px 42px 0; }
.at-live-card { border-radius: 12px; border: 1px solid var(--at-layer-10); background: var(--at-live-chat-bg); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.at-live-card:hover { border-color: var(--kc-accent); }
.at-live-card-h { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 500; } .at-live-card-h .n { margin-left: auto; font-size: 1.2rem; color: var(--at-text-2); display: inline-flex; align-items: center; gap: 4px; }
.at-live-card-l { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); } .at-live-card-l img { width: 24px; height: 24px; border-radius: 50%; } .at-live-card-l b { color: var(--at-text); font-weight: 500; }
.at-live-card .at-btn { align-self: flex-start; }

@media (max-width: 1100px) { .kc-panel.full.rail-open { grid-template-columns: var(--kc-rail-w) minmax(0, 1fr) 300px; } .kc-panel.full.sp-open.rail-open { grid-template-columns: var(--kc-rail-w) minmax(0, 1fr) min(420px, 92vw); } }
@media (max-width: 791px) {
  .kc-dock { left: 8px; right: 8px; bottom: calc(var(--at-bottomnav-h, 48px) + env(safe-area-inset-bottom, 0px) + 8px); max-width: none; flex-direction: row; align-items: center; gap: 8px; }
  body:has(#at-pl[data-mode="mini"]) .kc-dock { bottom: calc(var(--at-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 24px + (min(216px, 62vw) * 9 / 16)); }
  .kc-dock-main { order: 1; width: auto; flex: 1 1 auto; height: 32px; min-width: 0; }
  .kc-dock-music { display: none !important; }
  .kc-dock-play { order: 2; }
  .kc-dock-n { display: none; }
  .kc-rail, .kc-main, .kc-side { grid-column: auto; }
  .kc-panel, .kc-panel.full { left: 0; width: auto; grid-template-columns: minmax(0, 1fr); animation: none; box-shadow: none; }
  .kc-panel.rail-open, .kc-panel.full.rail-open { grid-template-columns: minmax(0, 1fr); }
  .kc-only-phone { display: inline-flex !important; } .kc-only-desk { display: none !important; }
  .kc-panel.full .kc-chips, .kc-panel.full .kc-brand { display: flex; }
  .kc-head { height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 6px 0 14px; }
  .kc-brand { width: 36px; height: 36px; margin-right: 10px; }
  .kc-head-tt b { font-size: 1.7rem; }
  .kc-chips { padding: 0 14px 10px; }
  /* topics drawer (left sheet, full names) */
  .kc-panel .kc-rail, .kc-panel.full .kc-rail { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); z-index: 4; transform: translateX(-100%); transition: transform .24s var(--kc-ease); box-shadow: 16px 0 50px rgba(0,0,0,.45); border-right: 0; padding-top: env(safe-area-inset-top, 0px); }
  .kc-panel.topics-open .kc-rail { transform: none; }
  .kc-panel.topics-open .kc-scrim, .kc-panel.rail-open .kc-scrim { display: block; position: fixed; inset: 0; z-index: 3; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .kc-rail-me { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* side: bottom sheet */
  .kc-panel .kc-side, .kc-panel.rail-open .kc-side { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: min(80vh, 680px); border-left: 0; border-radius: 22px 22px 0 0; z-index: 4; transform: translateY(110%); transition: transform .26s var(--kc-ease); box-shadow: 0 -16px 50px rgba(0,0,0,.45); background: var(--at-bg-menu, var(--at-bg)); }
  .kc-panel.rail-open .kc-side { transform: none; }
  .kc-panel.sp-open.rail-open .kc-side { top: 0; height: 100%; max-height: none; border-radius: 0; }
  .kc-panel.sp-open.rail-open .kc-side-tabs { padding-top: env(safe-area-inset-top, 0px); height: calc(52px + env(safe-area-inset-top, 0px)); }
  .kc-panel.sp-open .kc-sheet-grab { display: none; }
  .kc-pl-mini { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .kc-sheet-grab { display: flex; justify-content: center; padding: 10px 0 2px; flex: none; cursor: pointer; } .kc-sheet-grab i { width: 40px; height: 4px; border-radius: 2px; background: var(--kc-line); }
  .kc-side-tabs { height: 52px; }
  .kc-side-x { display: inline-flex; margin-left: auto; }
  .kc-side-body { padding: 4px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* messages */
  .kc-m { padding: 4px 12px; gap: 10px; margin-top: 8px; } .kc-m > .kc-av { width: 36px !important; height: 36px !important; } .kc-m.cont .kc-mb { margin-left: 46px; } .kc-m.cont .kc-t.hover { left: 8px; width: 40px; }
  .kc-m:hover { background: transparent; }
  .kc-m:hover .kc-acts { display: none; }
  .kc-m.sel { background: var(--at-layer-5, rgba(255,255,255,.05)); padding-bottom: 46px; }
  .kc-m.sel .kc-acts { display: inline-flex; position: absolute; top: auto; bottom: 6px; left: 56px; right: auto; }
  .kc-m.sel .kc-acts button { width: 38px; height: 38px; font-size: 1.45rem; }
  .kc-empty b { font-size: 2.2rem; }
  /* composer */
  .kc-compose { padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kc-line); }
  .kc-plus, .kc-send { width: 44px; height: 44px; }
  .kc-field { min-height: 44px; padding-left: 16px; border-radius: 22px; }
  .kc-field textarea { font-size: 1.6rem; }
  .kc-hint { padding: 2px 54px 0; }
  .kc-picker, .kc-slash { left: 10px; right: 10px; } .kc-picker { height: 46vh; }
  .wc { height: 72vh; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---- Episode grid: clear states (now playing / watched / not watched / filler / dub) ---- */
.at-epgrid a { gap: 3px; overflow: hidden; }
.at-epgrid a .n { position: relative; z-index: 1; }
.at-epgrid a::after { content: ""; position: absolute; right: 5px; bottom: 5px; top: auto; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--at-text-3); background: transparent; box-shadow: none; box-sizing: border-box; }
.at-epgrid a.watched:not(.active) { color: var(--at-text-2); }
.at-epgrid a.watched:not(.active)::after { background: #3fb950; border-color: #3fb950; }
.at-epgrid a.filler:not(.active)::after { background: #f59e0b; border-color: #f59e0b; top: auto; }
.at-epgrid a.dub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 2px; border-radius: 0; background: #3ea6ff; box-shadow: none; }
.at-epgrid a.filler.dub::before { right: 0; }
.at-epgrid a.active { background: var(--at-cta); color: #0f0f0f; font-weight: 700; box-shadow: 0 0 0 2px var(--at-bg), 0 0 0 4px var(--at-cta); }
html[data-theme="light"] .at-epgrid a.active { color: #fff; }
.at-epgrid a.active .at-icon { width: 14px; height: 14px; color: inherit; fill: currentColor; }
.at-epgrid a.active::after { background: #0f0f0f; border-color: #0f0f0f; }
html[data-theme="light"] .at-epgrid a.active::after { background: #fff; border-color: #fff; }
.at-epgrid a.active.dub::before { background: rgba(0, 0, 0, .4); }
.at-panel-foot .sw.now { background: var(--at-cta); }
.at-panel-foot .sw.seen { background: #3fb950; }
.at-panel-foot .sw.new { background: transparent; border: 1.5px solid var(--at-text-3); box-sizing: border-box; }
.at-panel-foot .sw.dub { width: 12px; height: 3px; border-radius: 2px; }
.at-epgrid { padding-bottom: 14px; }
.at-epgrid a.filler::after { top: auto; }

/* ---- Search suggestions — YouTube style ---- */
.at-suggest { top: 46px; left: 0; right: auto; width: 100%; max-width: 640px; border-radius: 16px; padding: 8px 0; box-shadow: 0 4px 32px rgba(0, 0, 0, .45); max-height: min(72vh, 640px); overflow-y: auto; }
.at-search-box:focus-within ~ .at-suggest, .at-suggest.open { left: 0; }
.at-suggest-item { height: auto; min-height: 40px; padding: 6px 16px; gap: 16px; font-size: 1.6rem; position: relative; }
.at-suggest-item > .at-icon { width: 24px; height: 24px; flex: none; color: var(--at-text); }
.at-suggest-item .t { font-size: 1.6rem; line-height: 2.2rem; font-weight: 700; color: var(--at-text); }
.at-suggest-item .t .pre { font-weight: 400; }
.at-suggest-item.hist .t { font-weight: 400; color: var(--at-cta-visited, #a98fff); }
.at-suggest-item .fill { display: none; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; border-radius: 50%; color: var(--at-text-2); }
.at-suggest-item .fill .at-icon { width: 20px; height: 20px; transform: rotate(45deg); }
.at-suggest-item .fill:hover { background: var(--at-hover); }
.at-suggest-item.ent { min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
.at-suggest-item.ent .t small { font-weight: 400; font-size: 1.2rem; line-height: 1.6rem; color: var(--at-text-2); }
.at-suggest-item.ent img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.at-suggest-item .t { flex: 1; min-width: 0; }
@media (hover: none), (max-width: 791px) { .at-suggest-item .fill { display: inline-flex; } }
@media (max-width: 791px) {
  .at-suggest { position: fixed; top: var(--at-masthead-h); left: 0; right: 0; width: auto; max-width: none; max-height: none; bottom: 0; border-radius: 0; box-shadow: none; background: var(--at-bg); padding: 4px 0 24px; overflow-y: auto; }
  .at-suggest-item { padding: 6px 4px 6px 16px; min-height: 48px; }
  .at-suggest-item .t { font-size: 1.5rem; }
}

/* =========================================================================
   Polish pass: settings nav, Watch2gether, shop, watch lists, notifications, friends, profile search
   ========================================================================= */

/* ---- Settings / history side nav → sticky chip strip (the `.at-menu-item {width:100%}` made every chip full-width, hiding the rest) ---- */
@media (max-width: 1016px) {
  .at-settings, .at-history { flex-direction: column; gap: 0; min-width: 0; width: 100%; max-width: 100%; }
  /* min-width:0 — without it the flex child grows to fit every chip, so it never overflows and fade-r never fires */
  .at-settings-nav { position: sticky; top: var(--at-sticky-top); z-index: 30; display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; background: var(--at-bg); border-bottom: 1px solid var(--at-layer-10); -webkit-overflow-scrolling: touch; box-sizing: border-box; }  /* no scroll-snap: it cancels the hint nudge */
  .at-settings-nav::-webkit-scrollbar { display: none; }
  .at-settings-nav h2, .at-settings-nav .at-menu-sep { display: none; }
  .at-settings-nav .at-menu-item, .at-history-links .at-menu-item { flex: 0 0 auto; width: auto; height: 34px; padding: 0 14px 0 10px; border-radius: 17px; background: var(--at-chip); font-size: 1.3rem; font-weight: 500; gap: 8px; white-space: nowrap; }
  .at-settings-nav .at-menu-item .at-icon { width: 20px; height: 20px; }
  .at-settings-nav .at-menu-item.active { background: var(--at-text); color: var(--at-bg); }
  .at-settings-nav .at-menu-item.active .at-icon { color: var(--at-bg); }
  .at-settings-main { max-width: none; padding: 16px 16px 0; }
  .at-history-links { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; }
}
@media (max-width: 791px) {
  .at-settings-nav { padding: 8px 12px; }
  .at-settings-main { padding: 12px 12px 0; }
  .at-settings-main h1 { font-size: 2.2rem; }
  .at-settings-main h3 { margin-top: 24px; }
  .at-setting .sc > .at-select, .at-setting .sc > .at-btn { align-self: flex-start; }
}

/* ---- Watch2gether list header + room page ---- */
.at-w2g-head { align-items: flex-start; }
.at-w2g-head .tt { flex: 1; min-width: 0; }
.at-w2g-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-w2g-head .at-btn { flex: none; align-self: flex-start; }
.at-w2g-sub { color: var(--at-text-2); font-size: 1.4rem; line-height: 2rem; margin: 2px 0 0; max-width: 640px; }
.at-w2g { padding: 0 0 32px; }
.at-w2g-top { display: flex; align-items: center; gap: 12px; padding: 16px 0 12px; }
.at-w2g-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 2.4rem; line-height: 3.2rem; font-weight: 700; }
.at-w2g-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.at-w2g-main { min-width: 0; }
.at-w2g-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.at-w2g-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.at-w2g-ended { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: #fff; }
.at-w2g-ended h2 { margin: 0; color: #fff; font-size: 2rem; }
.at-w2g-ended p { margin: 0 0 8px; color: rgba(255, 255, 255, .7); font-size: 1.3rem; }
.at-w2g-ctl { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 12px; }
.at-w2g-ctl .views { display: inline-flex; align-items: center; gap: 4px; font-size: 1.3rem; color: var(--at-text-2); }
.at-w2g-ctl .sp { flex: 1; }
.at-w2g-ctl .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.at-w2g-ctl { padding: 10px 12px; border: 1px solid var(--at-layer-10); border-radius: 14px; background: var(--at-live-chat-bg, transparent); }
.at-w2g-ctl .btns .at-btn { background: var(--at-chip); height: 36px; }
.at-w2g-ctl .btns .at-btn.primary { background: var(--at-cta); color: #000; }
.at-w2g-top .at-btn { height: 38px; flex: none; }
.at-w2g-top .at-w2g-invite { min-width: 0; }
.at-w2g-title { margin: 16px 0 8px; font-size: 1.8rem; line-height: 2.6rem; font-weight: 700; }
.at-w2g-anime { display: flex; align-items: center; gap: 12px; }
.at-w2g-anime img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.at-w2g-anime .mt { flex: 1; min-width: 0; }
.at-w2g-anime .t { font-size: 1.5rem; font-weight: 500; }
.at-w2g-anime .s { font-size: 1.2rem; color: var(--at-text-2); }
.at-w2g-people { margin-top: 24px; }
.at-w2g-people h2 { margin: 0 0 12px; font-size: 1.8rem; font-weight: 700; }
.at-w2g-people h2 span { color: var(--at-text-2); font-weight: 400; font-size: 1.4rem; margin-left: 4px; }
.at-w2g-people .row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.at-w2g-people .row::-webkit-scrollbar { display: none; }
.at-w2g-people .pp { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 1.2rem; }
.at-w2g-people .pp b { font-weight: 500; max-width: 100%; }
.at-w2g-people .pp i { font-style: normal; color: var(--at-text-2); font-size: 1.1rem; }
.at-w2g-people .pp i.host { color: var(--at-cta); }
.at-w2g-people .more { width: 48px; height: 48px; border-radius: 50%; background: var(--at-chip); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.at-w2g-host { margin-top: 20px; border: 1px solid var(--at-layer-10); border-radius: 14px; background: var(--at-live-chat-bg, var(--at-bg)); overflow: hidden; }
.at-w2g-host-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--at-layer-10); }
.at-w2g-host-h b { font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--at-text-2); margin-right: auto; }
.at-w2g-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); cursor: pointer; }
.at-w2g-auto input { accent-color: var(--at-cta); width: 16px; height: 16px; }
.at-w2g-epfind { display: flex; width: auto; height: 38px; margin: 12px 16px 0; border-radius: 19px; padding: 0 14px; }
.at-w2g-epfind input { flex: 1; width: auto; font-size: 1.4rem; }
.at-w2g-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 224px; overflow-y: auto; padding: 12px 16px 16px; scrollbar-width: thin; }
.at-w2g-ep { height: 38px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.3rem; font-weight: 600; cursor: pointer; transition: background .12s, transform .12s; }
.at-w2g-ep:hover:not(:disabled) { background: var(--at-chip-hover); transform: translateY(-1px); }
.at-w2g-ep.on { background: var(--at-cta, var(--kc-accent)); color: var(--kc-ink, #000); cursor: default; }
.at-w2g-ep.hi { border-color: var(--at-cta); }
.at-w2g-ep.off { opacity: .4; }
.at-w2g-ep-empty { grid-column: 1 / -1; font-size: 1.3rem; color: var(--at-text-2); padding: 12px 0; }

/* Watch2gether modals (create / invite / settings) */
.at-modal.at-w2g-modal { max-width: 600px; }
.at-w2g-lead { margin: 0 0 14px; color: var(--at-text-2); font-size: 1.35rem; line-height: 2rem; }
.at-w2g-row2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.at-w2g-opt { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--at-layer-5, rgba(255,255,255,.06)); }
.at-w2g-opt .sl { flex: 1; min-width: 0; }
.at-w2g-opt .sl b { display: block; font-size: 1.45rem; font-weight: 600; }
.at-w2g-opt .sl small { display: block; margin-top: 2px; font-size: 1.25rem; line-height: 1.75rem; color: var(--at-text-2); }
.at-w2g-opt .sc { flex: none; display: flex; align-items: center; }
.at-w2g-when { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--at-border); background: var(--at-bg-input, var(--at-chip)); color: var(--at-text); font: inherit; font-size: 1.3rem; color-scheme: dark; }
html[data-theme="light"] .at-w2g-when { color-scheme: light; }
.at-w2g-sec { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--at-layer-5, rgba(255,255,255,.06)); font-size: 1.5rem; font-weight: 700; }
.at-w2g-sec small { font-size: 1.2rem; font-weight: 400; color: var(--at-text-2); }
@media (max-width: 560px) { .at-w2g-opt { flex-wrap: wrap; } .at-w2g-opt .sc { width: 100%; } .at-w2g-row2 { grid-template-columns: 1fr; } }

/* Anime picker (create room) */
.at-ap { position: relative; margin-bottom: 18px; }
.at-ap .at-field { margin-bottom: 0; }
.at-ap-list { position: absolute; left: 0; right: 0; top: 56px; z-index: 5; max-height: 320px; overflow-y: auto; border: 1px solid var(--at-border); border-radius: 12px; background: var(--at-bg-menu); box-shadow: var(--at-shadow); padding: 6px; scrollbar-width: thin; }
.at-ap-list[hidden], .at-ap-chosen[hidden] { display: none; }
.at-ap-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--at-text); text-align: left; cursor: pointer; }
.at-ap-row:hover { background: var(--at-chip-hover); }
.at-ap-row img, .at-ap-chosen img { flex: none; width: 40px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--at-chip); }
.at-ap-row .t, .at-ap-chosen .t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.at-ap-row b, .at-ap-chosen b { font-size: 1.4rem; font-weight: 600; }
.at-ap-row small, .at-ap-chosen small { font-size: 1.2rem; color: var(--at-text-2); }
.at-ap-empty { padding: 18px 8px; text-align: center; font-size: 1.3rem; color: var(--at-text-2); }
.at-ap-chosen { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--at-chip); }
.at-ap-chosen img { width: 48px; height: 68px; }
.at-fp-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--at-text-3); border-top-color: var(--at-cta); animation: at-fp-rot .7s linear infinite; vertical-align: -3px; }
.at-fp-spin[hidden] { display: none; }
@keyframes at-fp-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .at-fp-spin { animation-duration: 2s; } }

/* Friend picker */
.at-fp { display: flex; flex-direction: column; gap: 10px; }
.at-fp-top { display: flex; align-items: center; gap: 10px; }
.at-fp-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--at-border); background: var(--at-bg-input, var(--at-chip)); }
.at-fp-q:focus-within { border-color: var(--at-cta); }
.at-fp-q .at-icon { width: 18px; height: 18px; flex: none; color: var(--at-text-2); }
.at-fp-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--at-text); font: inherit; font-size: 1.4rem; }
.at-fp-n { flex: none; font-size: 1.25rem; color: var(--at-text-2); padding: 0 4px; }
.at-fp-n.on { color: var(--at-cta); font-weight: 600; }
.at-fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.at-fp-chips[hidden] { display: none; }
.at-fp-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 12px; border: 0; border-radius: 14px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.25rem; font-weight: 500; cursor: pointer; }
.at-fp-chip:hover { background: var(--at-chip-hover); }
.at-fp-chip .at-icon { width: 16px; height: 16px; color: var(--at-text-2); }
.at-fp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.at-fp-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: var(--at-chip); color: var(--at-text); text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.at-fp-row:hover { background: var(--at-chip-hover); }
.at-fp-row.on { border-color: var(--at-cta); background: rgba(62, 166, 255, .12); }
.at-fp-row > .kc-av, .at-fp-row > .at-avatar, .at-fp-row > :first-child { flex: none; }
.at-fp-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-fp-row .nm b { font-size: 1.35rem; font-weight: 600; }
.at-fp-row .nm small { font-size: 1.15rem; color: var(--at-text-2); }
.at-fp-row .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--at-text-3); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all .12s; }
.at-fp-row .ck .at-icon { width: 14px; height: 14px; }
.at-fp-row.on .ck { background: var(--at-cta); border-color: var(--at-cta); color: #000; }
.at-fp-empty { grid-column: 1 / -1; padding: 24px 8px; text-align: center; font-size: 1.35rem; color: var(--at-text-2); }
.at-fp-empty a { color: var(--at-cta); font-weight: 600; }
@media (max-width: 560px) { .at-fp-list { grid-template-columns: 1fr; } }
.at-w2g-chat { position: sticky; top: calc(var(--at-masthead-h) + 16px); min-width: 0; }
.at-w2g-chat .wc { height: calc(100vh - var(--at-masthead-h) - 32px); min-height: 460px; max-height: 760px; }
@media (max-width: 1016px) {
  .at-w2g-grid { grid-template-columns: minmax(0, 1fr); }
  .at-w2g-chat { position: static; }
  .at-w2g-chat .wc { height: 560px; min-height: 0; }
}
@media (max-width: 791px) {
  .at-w2g-head { flex-wrap: wrap !important; padding: 12px 12px 0; align-items: flex-start; }
  .at-w2g-head .tt { flex: 1 1 auto; }
  .at-w2g-head .at-icon.big { width: 32px; height: 32px; margin-top: 2px; }
  .at-w2g-head h1 { font-size: 2.2rem; line-height: 3rem; }
  .at-w2g-sub { font-size: 1.3rem; line-height: 1.8rem; }
  .at-w2g-head .at-btn {
    order: 5; flex: 1 1 100%; height: 40px; margin: 12px 0 0; padding: 0 14px; justify-content: center;
  }
  html[data-theme="volt"] .at-w2g-head .at-btn.primary {
    letter-spacing: .04em; font-size: 1.3rem; line-height: 40px; height: 40px;
  }
  .at-browse > .at-tabs { padding: 0 4px; }
  .at-w2g-top { padding: 8px 12px; gap: 8px; }
  .at-w2g-top h1 { font-size: 1.8rem; line-height: 2.4rem; }
  .at-w2g-invite span { display: none; }
  .at-w2g-invite { width: 36px; padding: 0 !important; }
  .at-w2g-player { position: sticky; top: var(--at-sticky-top); z-index: 20; border-radius: 0; }
  .at-w2g-ctl { padding: 0 12px; margin-top: 10px; }
  .at-w2g-ctl .sp { display: none; }
  .at-w2g-ctl .btns { width: 100%; }
  .at-w2g-ctl .btns .at-btn { flex: 1; height: 36px; padding: 0 8px; font-size: 1.3rem; }
  .at-w2g-title { padding: 0 12px; font-size: 1.6rem; line-height: 2.2rem; margin-top: 14px; }
  .at-w2g-anime { padding: 0 12px; }
  .at-w2g-people { padding: 0 12px; margin-top: 20px; }
  .at-w2g-host { margin: 16px 12px 0; }
  .at-w2g-chat { margin-top: 20px; }
  .at-w2g-chat .wc { height: 72vh; max-height: none; border-radius: 0; }
}

/* ---- Mana shop ---- */
.at-shop-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 16px; }
.at-shop-bar .shop-cats { flex: 1 1 240px; min-width: 0; }
.at-shop-item { min-width: 0; }
.at-shop-item .nm, .at-shop-item .ct { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 791px) {
  .at-shop-head { padding: 12px 12px 0; flex-wrap: nowrap !important; }
  .at-shop-head h1 { flex: none; font-size: 2.2rem; line-height: 3rem; }
  .at-shop-head .at-icon.big { width: 28px; height: 28px; }
  .at-shop-head .at-btn { height: 34px; padding: 0 12px 0 10px; font-size: 1.3rem; }
  .at-mana-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .at-mana-card .spacer { display: none; }
  .at-mana-card .mv { font-size: 2.4rem; }
  .at-mana-card .today .bar { width: 100%; }
  .at-mana-card .at-btn { width: 100%; }
  .at-browse > .at-tabs { margin-top: 12px; }
  .at-tab { padding: 0 14px; font-size: 1.4rem; height: 44px; }
  .at-shop-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 12px; margin-top: 12px; }
  .at-shop-bar .shop-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 40px; }
  .at-shop-bar .shop-seg > button { padding: 0 4px; gap: 4px; font-size: 1.2rem; min-width: 0; }
  .at-shop-bar .shop-seg > button .at-icon { width: 16px; height: 16px; flex: none; }
  .at-shop-bar .shop-seg > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Bound the chip row to the viewport — width:auto made it grow with its kids so nothing scrolled. */
  .at-shop-bar .shop-cats {
    flex: none; align-self: stretch; box-sizing: border-box;
    width: calc(100% + 24px); max-width: calc(100% + 24px); min-width: 0;
    margin: 0 -12px; padding: 0 12px 2px;
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .at-shop-bar .shop-cats::-webkit-scrollbar { display: none; }
  .at-shop-bar .shop-cats .at-chip { flex: none; }
  .at-shop-bar .shop-sort { align-self: flex-start; }
  .at-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; margin-top: 12px; }
  .at-shop-item { padding: 12px 8px 10px; gap: 6px; border-radius: 12px; }
  .at-shop-item .prev { width: 76px; height: 76px; }
  .at-shop-item .name-prev { height: 76px; font-size: 1.5rem; text-align: center; line-height: 2rem; }
  .at-shop-item > .at-btn:not(.text) { margin-top: auto; height: 36px; min-height: 36px; flex: none; padding: 0 8px; font-size: 1.2rem; line-height: 36px; white-space: nowrap; }
  .at-shop-item .at-btn.text { min-height: 26px; }
  .at-browse > h3 { padding: 0 12px; }
}

/* ---- Watch lists (playlist page) ---- */
@media (max-width: 1016px) {
  .at-pl-side { position: relative !important; }
  .at-pl-main { position: relative; z-index: 1; }
}
@media (max-width: 791px) {
  /* Playlist page on phones — YouTube mobile playlist: back/top bar, big cover, title, owner, meta, pill "Play" + round button */
  .at-playlist-page { gap: 0; display: block; padding: 0 0 24px; }
  .at-pl-side { width: 100% !important; max-width: 100%; box-sizing: border-box; flex: none; align-self: stretch; height: auto; position: relative !important; top: auto !important; display: flex; flex-direction: column; align-items: stretch; padding: 8px 16px 16px; border-radius: 0; }
  .at-pl-side .bgc { filter: blur(48px) brightness(.45) saturate(1.3); transform: scale(1.6); }
  .at-pl-back { display: flex !important; align-items: center; justify-content: space-between; height: 44px; margin: 0 -8px 4px; }
  .at-pl-main > div:first-child > a.at-iconbtn { display: none; }
  .at-pl-back .at-iconbtn { color: #fff; }
  .at-pl-side .cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; align-self: center; margin-top: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
  .at-pl-side h1 { font-size: 2.6rem; line-height: 3.2rem; margin: 18px 0 8px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .at-pl-side .owner { font-size: 1.4rem; font-weight: 500; }
  .at-pl-side .meta { font-size: 1.25rem; margin: 6px 0 0; color: rgba(255, 255, 255, .75); }
  .at-pl-side .btns { display: flex; align-items: center; margin-top: 16px; gap: 10px; }
  .at-pl-side .btns .at-btn { height: 44px; border-radius: 22px; font-size: 1.5rem; font-weight: 500; }
  .at-pl-side .btns .at-btn.primary { flex: 1; justify-content: center; }
  .at-pl-side .btns .at-btn.glass { flex: none; width: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .at-pl-side .btns .at-btn.glass .lbl { display: none; }
  .at-pl-side > div:not(.bgc):not(.cover):not(.owner):not(.meta):not(.btns):not(.at-pl-back) { margin-top: 12px !important; font-size: 1.2rem !important; }
  .at-pl-main { padding: 0; width: 100%; position: relative; z-index: 1; clear: both; }
  .at-pl-main > div:first-child { padding: 8px 8px; gap: 6px; position: sticky; top: var(--at-sticky-top, var(--at-masthead-h)); z-index: 5; background: var(--at-bg); border-bottom: 1px solid var(--at-layer-10); margin-bottom: 4px !important; min-width: 0; }
  .at-pl-main > div:first-child .at-chips { margin: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .at-pl-main > div:first-child .at-chips::-webkit-scrollbar { display: none; }
  .at-pl-main > div:first-child .at-chip { flex: none; white-space: nowrap; }
  .at-pl-main > div:first-child .at-select { flex: none; }
  .at-pl-main > div:first-child .at-select select { max-width: 110px; font-size: 1.2rem; }
  .at-pl-item { display: grid; grid-template-columns: minmax(130px, 42%) minmax(0, 1fr) 32px; column-gap: 12px; align-items: start; padding: 6px 8px 6px 12px; border-radius: 0; }
  .at-pl-item .idx { display: none; }
  .at-pl-item .at-thumb { width: 100%; border-radius: 8px; }
  .at-pl-item .pb { align-self: start; }
  .at-pl-item .pt { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
  .at-pl-item .pm { font-size: 1.2rem; line-height: 1.6rem; }
  .at-pl-item .at-iconbtn { align-self: start; margin-top: -4px; }
  .at-pl-item .at-iconbtn:only-of-type:last-child { margin-right: -4px; }
  /* Watch lists index on phones */
  .at-browse .at-page-head { padding: 12px 12px 0; gap: 10px; flex-wrap: wrap; }
  .at-browse .at-page-head h1 { font-size: 2.4rem; line-height: 3.2rem; }
  .at-browse .at-page-head .at-btn { height: 34px; font-size: 1.3rem; }
  .at-browse > .at-chips { padding: 0 12px; }
}

/* ---- Notifications: keep the ⋮ button flush right, never overlapping the thumbnail ---- */
.at-notif { gap: 12px; padding: 12px 4px 12px 8px; }
.at-notif .nb { padding-top: 1px; }
.at-notif .th { margin-left: 4px; }
.at-notif .nmore { width: 32px; height: 32px; margin: -2px 0 0; align-self: flex-start; }
.at-popup-tabs { padding-bottom: 12px; }
.at-popup-body { padding-top: 4px; }
@media (max-width: 791px) {
  .at-notif { padding: 12px 4px 12px 12px; gap: 10px; }
  .at-notif .av { width: 44px; height: 44px; }
  .at-notif .th { width: 64px; height: 36px; margin-left: 0; }
}

/* ---- Friends rows ---- */
.at-friend-row .fx .at-btn { text-transform: none; font-family: inherit; }
@media (max-width: 791px) {
  .at-friend-row { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px; }
  .at-friend-row .av { width: 48px !important; height: 48px !important; }
  .at-friend-row .fb { flex: 1 1 0; min-width: 0; }
  .at-friend-row .fn { flex-wrap: wrap; gap: 2px 6px; font-size: 1.5rem; line-height: 2rem; }
  .at-friend-row .fn .at-user-title { font-size: 1rem; height: 18px; padding: 0 6px; }
  .at-friend-row .fn .at-badge-mod { font-size: 1rem; }
  .at-friend-row .fm { font-size: 1.2rem; line-height: 1.7rem; overflow-wrap: anywhere; }
  .at-friend-row .fx { flex: 1 0 calc(100% - 60px); margin-left: 60px; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
  .at-friend-row .fx .at-btn { flex: 1; height: 32px; padding: 0 12px; font-size: 1.3rem; line-height: 3.2rem; min-width: 0; }
  .at-friend-row .fx .at-iconbtn { flex: none; }
  .at-ch-section > h2 .at-btn { height: 32px; font-size: 1.3rem; }
}

/* ---- Profile search ---- */
.at-tab-search { margin-left: auto; width: 48px; padding: 0; justify-content: center; }
.at-tab-search .at-icon { width: 22px; height: 22px; }
.at-ch-searchbox { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; margin-bottom: 16px; border-radius: 22px; background: var(--at-chip); border: 1px solid transparent; }
.at-ch-searchbox:focus-within { border-color: var(--at-cta); background: var(--at-bg-input, var(--at-chip)); }
.at-ch-searchbox > .at-icon { width: 20px; height: 20px; flex: none; color: var(--at-text-2); }
.at-ch-searchbox input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--at-text); font-size: 1.6rem; }
.at-ch-hint { display: flex; align-items: center; gap: 8px; color: var(--at-text-2); font-size: 1.4rem; margin: 8px 0; }
.at-ch-hint .at-icon { flex: none; width: 18px; height: 18px; color: var(--at-text-2); }
/* About → Details rows: icon + text on one baseline */
.at-ch-details-h { font-size: 1.4rem; font-weight: 500; margin: 24px 0 12px; color: var(--at-text); }
.at-ch-details { display: flex; flex-direction: column; gap: 12px; }
.at-ch-detail { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; line-height: 2rem; color: var(--at-text-2); min-height: 24px; }
.at-ch-detail .at-icon { width: 20px; height: 20px; flex: none; color: var(--at-text-2); }
.at-ch-detail span { min-width: 0; }
.at-ch-sub { font-size: 1.6rem; font-weight: 700; margin: 20px 0 12px; }
.at-ch-sub span { color: var(--at-text-2); font-weight: 400; font-size: 1.3rem; margin-left: 4px; }

/* ---- Dropdowns (custom select menu) ---- */
.at-select, .at-select select { cursor: pointer; }
.at-select select { text-overflow: ellipsis; }
.at-sub-filter select { max-width: 260px; }
@media (max-width: 791px) {
  .at-page-head > .at-sub-filter { order: 5; flex: 1 1 100%; height: 36px; }
  .at-sub-filter select { width: 100%; max-width: none; }
}

/* ---- PJAX progress bar (anitube-Work) ---- */
#at-pjax-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--at-red, #f00); z-index: 10000; pointer-events: none; opacity: 0; }
#at-pjax-bar.on { opacity: 1; width: 80%; transition: width 8s cubic-bezier(.1,.7,.2,1); }
#at-pjax-bar.done { opacity: 0; width: 100%; transition: width .15s ease-out, opacity .25s .1s; }

/* ---- persistent player / miniplayer (anitube-Work) ---- */
#at-pl { position: absolute; z-index: 5; background: #000; overflow: hidden; }
#at-pl[hidden] { display: none; }
#at-pl .at-pl-video { position: absolute; inset: 0; }
#at-pl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
#at-pl .at-pl-bar { display: none; }
body.at-lights-off #at-pl[data-mode="dock"],
body.at-lights-off #at-pl[data-mode="transit"] { z-index: 2061 !important; }
#at-pl[data-mode="transit"] { pointer-events: none; }
#at-pl[data-mode="mini"] {
  position: fixed; right: 16px; bottom: 16px; left: auto; top: auto; width: 400px; max-width: 46vw; z-index: 1900;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); border: 1px solid var(--at-border, rgba(255,255,255,.12));
  display: flex; flex-direction: column; background: var(--at-surface, #1a1a1a);
}
#at-pl[data-mode="mini"] .at-pl-video { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
#at-pl[data-mode="mini"] .at-pl-bar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; min-height: 48px; color: var(--at-text, #fff); }
#at-pl .at-pl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
#at-pl .at-pl-title b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#at-pl .at-pl-title small { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#at-pl .at-pl-btn { background: none; border: 0; color: inherit; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
#at-pl .at-pl-btn:hover { background: var(--at-hover, rgba(255,255,255,.1)); }
#at-pl .at-pl-btn[hidden] { display: none; }
/* Chapters (parent-side panel over the player; built from intro/outro skip times) */
#at-pl .at-pl-chbtn { position: absolute; top: 10px; left: 10px; z-index: 4; width: 38px; height: 38px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; background: rgba(24, 22, 26, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .5; transition: opacity .15s, background .15s; }
#at-pl .at-pl-chbtn:hover, #at-pl .at-pl-chbtn[aria-expanded="true"], #at-pl .at-pl-chbtn:focus-visible { opacity: 1; background: rgba(24, 22, 26, .85); }
#at-pl .at-pl-chbtn[hidden], #at-pl .at-pl-chap[hidden] { display: none; }
#at-pl .at-pl-chap { position: absolute; top: 56px; left: 10px; z-index: 4; width: min(420px, calc(100% - 20px)); max-height: calc(100% - 66px); display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; color: #fff; background: linear-gradient(135deg, rgba(34, 40, 44, .94), rgba(40, 32, 38, .94)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
#at-pl .at-pl-chap .hd { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
#at-pl .at-pl-chap .hd svg { opacity: .65; flex: none; }
#at-pl .at-pl-chap .hd b { flex: 1; font-size: 1.7rem; font-weight: 500; }
#at-pl .at-pl-chap .hd span { max-width: 40%; font-size: 1.4rem; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#at-pl .at-pl-chap .ls { overflow-y: auto; padding: 2px 0 4px; }
#at-pl .at-pl-chap .row { display: block; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
#at-pl .at-pl-chap .row:first-child { border-top: 0; }
#at-pl .at-pl-chap .row:hover, #at-pl .at-pl-chap .row:focus-visible { background: rgba(255, 255, 255, .07); }
#at-pl .at-pl-chap .row.on { background: rgba(255, 255, 255, .12); }
#at-pl .at-pl-chap .row b { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
#at-pl .at-pl-chap .row span { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#at-pl .at-pl-chap .row i { font-style: normal; font-size: 1.3rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .13); }
#at-pl .at-pl-chap .row em { font-style: normal; font-size: 1.35rem; color: rgba(255, 255, 255, .6); }
#at-pl[data-mode="mini"] .at-pl-chbtn, #at-pl[data-mode="mini"] .at-pl-chap { display: none; }
@media (max-width: 791px) {
  #at-pl .at-pl-chbtn { width: 34px; height: 34px; top: 8px; left: 8px; }
  #at-pl .at-pl-chap { top: 48px; left: 8px; width: calc(100% - 16px); max-height: calc(100% - 56px); }
  #at-pl .at-pl-chap .hd { padding: 10px 12px; } #at-pl .at-pl-chap .row { padding: 9px 12px; }
}
@media (max-width: 791px) {
  #at-pl[data-mode="mini"] {
    left: 8px; right: 8px; max-width: none; width: auto; flex-direction: row; align-items: stretch;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
  }
  #at-pl[data-mode="mini"] .at-pl-video { width: 128px; flex: none; }
  #at-pl[data-mode="mini"] .at-pl-bar { flex: 1; min-width: 0; padding-left: 10px; }
  #at-pl[data-mode="mini"] .at-pl-btn[data-pl="menu"] { display: none; }
  body.at-has-mini { padding-bottom: 84px; }
}

/* comment reactions + mentions */
.at-comment .cm-reactions .rx { font: inherit; font-size: 1.2rem; padding: 2px 8px; border-radius: 12px; background: var(--at-chip); border: 1px solid transparent; color: var(--at-text); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.at-comment .cm-reactions .rx.mine { border-color: var(--at-cta); background: color-mix(in srgb, var(--at-cta) 16%, transparent); }
.at-comment .cm-text a.tag-name { color: var(--at-cta); text-decoration: none; }
.at-deco-img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; pointer-events: none; object-fit: contain; }
.at-shop-item .prev .at-deco-img { left: -8%; top: -8%; width: 116%; height: 116%; }
.at-shop-item .refund { font-size: 1.2rem; height: 28px; color: var(--at-text-2); }

/* inline GIFs / images in comments and posts */
.cm-gif-wrap { display: block; margin: 6px 0; }
.cm-embed-gif { max-width: min(100%, 320px); max-height: 240px; border-radius: 8px; display: block; background: var(--at-chip); }
.p-text .cm-embed-gif { max-width: min(100%, 480px); max-height: 360px; }
/* GIF picker popover */
.at-gifp { width: 320px; max-width: 100%; padding: 8px; }
.at-gifp-q { width: 100%; height: 36px; border-radius: 18px; border: 1px solid var(--at-border); background: var(--at-bg-input, transparent); color: var(--at-text); padding: 0 14px; font: inherit; font-size: 1.4rem; outline: 0; }
.at-gifp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.at-gifp-grid p { grid-column: 1 / -1; color: var(--at-text-2); font-size: 1.3rem; text-align: center; padding: 24px 0; margin: 0; }
.at-gifp-grid button { padding: 0; border: 0; background: var(--at-chip); border-radius: 6px; overflow: hidden; cursor: pointer; display: block; width: 100%; height: auto; align-self: start; }
.at-gifp-grid button img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block; }
.at-gifp-foot { font-size: 1.1rem; color: var(--at-text-3); text-align: right; margin-top: 6px; }
/* inside a bottom sheet or the in-sheet menu card: fill the width, let the card scroll instead of the grid */
.at-sheet .at-gifp, .at-sheet-menu .at-gifp { width: 100%; }
.at-sheet-menu .at-gifp-grid { max-height: none; overflow: visible; }
.at-sheet-menu .at-emop { max-height: none; }


/* ---- YouTube-style loading skeleton (AT.skeleton in at-boot.js) ---- */
.at-sk-wrap { padding: 24px; width: 100%; box-sizing: border-box; }
.at-sk { background: linear-gradient(90deg, var(--at-bg-raised, #272727) 25%, rgba(255,255,255,.09) 50%, var(--at-bg-raised, #272727) 75%); background-size: 200% 100%; animation: at-sk-shimmer 1.4s linear infinite; border-radius: 10px; }
[data-theme="light"] .at-sk { background: linear-gradient(90deg, #ececec 25%, #f6f6f6 50%, #ececec 75%); background-size: 200% 100%; }
@keyframes at-sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.at-sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px 16px; }
.at-sk-card { display: flex; flex-direction: column; gap: 12px; }
.at-sk-thumb { aspect-ratio: 16 / 9; border-radius: 12px; }
.at-sk-row { display: flex; gap: 12px; }
.at-sk-av { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.at-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.at-sk-l1 { height: 14px; width: 90%; }
.at-sk-l2 { height: 12px; width: 60%; }
.at-sk-player { aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; margin-bottom: 14px; }
.at-sk-title { height: 22px; width: 55%; margin: 0 0 14px; }
.at-sk-box { height: 90px; width: 100%; margin-top: 16px; }
.at-sk-rowitem { display: flex; gap: 12px; margin-bottom: 14px; }
.at-sk-rthumb { width: 168px; aspect-ratio: 16 / 9; flex: none; border-radius: 10px; }
@media (max-width: 700px) { .at-sk-wrap { padding: 12px; } .at-sk-grid { grid-template-columns: 1fr; } }
/* Compact cards: tall poster skeletons (boot + browse loading), 2-col on phone.
   Class may live on html (early) and/or body (store). */
html.at-compact-cards .at-sk-grid, body.at-compact-cards .at-sk-grid,
html.at-compact-cards .at-grid:has(> .at-sk-card), body.at-compact-cards .at-grid:has(> .at-sk-card) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 28px 16px;
}
html.at-compact-cards .at-sk-thumb, body.at-compact-cards .at-sk-thumb { aspect-ratio: 2 / 3; border-radius: 16px; }
html.at-compact-cards .at-sk-card, body.at-compact-cards .at-sk-card { gap: 8px; }
html.at-compact-cards .at-sk-av, body.at-compact-cards .at-sk-av { display: none; }
html.at-compact-cards .at-sk-row, body.at-compact-cards .at-sk-row { gap: 0; }
html.at-compact-cards .at-sk-l1, body.at-compact-cards .at-sk-l1 { height: 12px; width: 92%; }
html.at-compact-cards .at-sk-l2, body.at-compact-cards .at-sk-l2 { height: 10px; width: 55%; }
@media (max-width: 791px) {
  html.at-compact-cards .at-sk-grid, body.at-compact-cards .at-sk-grid,
  html.at-compact-cards .at-grid:has(> .at-sk-card), body.at-compact-cards .at-grid:has(> .at-sk-card) {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 16px;
  }
  html.at-compact-cards .at-sk-thumb, body.at-compact-cards .at-sk-thumb { border-radius: 14px; }
  html.at-compact-cards .at-sk-wrap, body.at-compact-cards .at-sk-wrap { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .at-sk { animation: none; } }

/* ===== phone fixes: ctrl-bar hide, rating box, miniplayer, description sheet, search overlay ===== */
.at-thumb .progress i { transition: width .35s ease; }
#at-pl .at-pl-ov { display: none; }
@media (max-width: 791px) {
  /* .at-ctrl-btn sets display:inline-flex !important; the hide utility must beat it (Expand/theater is desktop-only) */
  .at-ctrl-btn.at-mobile-hide, .at-ctrlbar .at-mobile-hide { display: none !important; }

  /* rating box: stack the question over a full-width, evenly spaced 10-star row */
  .at-desc .d-rate { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; cursor: default; }
  .at-desc .d-rate > span:not(.at-stars) { display: none; }
  .at-desc .d-rate .at-stars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; width: 100%; }
  .at-desc .d-rate .at-stars button { width: 100%; height: 32px; padding: 0; }
  .at-desc .d-rate .at-stars button .at-icon { width: 20px; height: 20px; }

  /* miniplayer on phones: just the video, draggable, tap to expand (no title bar) */
  #at-pl[data-mode="mini"] {
    left: auto; right: 12px; top: auto; width: 216px; max-width: 62vw; display: block; flex-direction: column;
    bottom: calc(var(--at-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
    border-radius: 10px; border: 0; box-shadow: 0 6px 22px rgba(0, 0, 0, .55); touch-action: none; background: #000;
  }
  #at-pl[data-mode="mini"] .at-pl-video { width: 100%; flex: none; }
  #at-pl[data-mode="mini"] .at-pl-bar { display: none; }
  #at-pl[data-mode="mini"] .at-pl-ov { display: block; position: absolute; inset: 0; z-index: 3; touch-action: none; cursor: grab; }
  #at-pl[data-mode="mini"].dragging { box-shadow: 0 10px 30px rgba(0, 0, 0, .65); opacity: .96; z-index: 3602; }
  #at-pl[data-mode="mini"].over-dismiss { opacity: .88; transform: scale(.92); transform-origin: center bottom; }
  #at-pl[data-mode="mini"].snap { transition: left .25s cubic-bezier(.2, .8, .2, 1), top .25s cubic-bezier(.2, .8, .2, 1); }
  #at-pl .at-pl-ovbtn { position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .55); cursor: pointer; padding: 0; }
  #at-pl .at-pl-ovbtn svg { width: 18px; height: 18px; }
  #at-pl .at-pl-ovbtn.x { top: 4px; right: 4px; }
  #at-pl .at-pl-ovbtn.pp { left: 4px; bottom: 4px; }
  #at-pl .at-pl-ovbtn[hidden] { display: none; }
  body.at-has-mini { padding-bottom: 0; }

  /* YouTube-style dismiss strip: appears while dragging the phone miniplayer; drop on it to close. */
  #at-pl-dismiss {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3601;
    height: calc(var(--at-bottomnav-h, 48px) + env(safe-area-inset-bottom, 0px) + 72px);
    padding: 12px 20px calc(var(--at-bottomnav-h, 48px) + env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
    opacity: 0; transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
  }
  #at-pl-dismiss[hidden] { display: none !important; }
  #at-pl-dismiss.on { opacity: 1; transform: none; }
  #at-pl-dismiss .at-pl-dismiss-bar {
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 88px; padding: 10px 18px 8px; border-radius: 16px;
    background: rgba(40, 40, 40, .92); color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  #at-pl-dismiss .at-pl-dismiss-x {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); color: #fff;
    transition: background .15s ease, transform .15s ease, color .15s ease;
  }
  #at-pl-dismiss .at-pl-dismiss-x svg { width: 22px; height: 22px; }
  #at-pl-dismiss .at-pl-dismiss-lbl { font-size: 1.2rem; font-weight: 500; letter-spacing: .02em; opacity: .85; }
  #at-pl-dismiss.armed .at-pl-dismiss-bar {
    background: rgba(220, 38, 38, .95); transform: scale(1.06);
    box-shadow: 0 6px 22px rgba(220, 38, 38, .45);
  }
  #at-pl-dismiss.armed .at-pl-dismiss-x { background: rgba(255, 255, 255, .22); transform: scale(1.08); }
  @media (prefers-reduced-motion: reduce) {
    #at-pl-dismiss, #at-pl-dismiss .at-pl-dismiss-bar, #at-pl-dismiss .at-pl-dismiss-x, #at-pl[data-mode="mini"].over-dismiss { transition: none; }
  }

  /* description bottom sheet (YouTube app) */
  .at-dsheet { padding: 4px 16px 24px; font-size: 1.4rem; line-height: 2rem; }
  .at-dsheet .ds-title { font-size: 1.8rem; line-height: 2.4rem; font-weight: 600; margin: 4px 0 16px; }
  .at-dsheet .ds-title small { display: block; font-size: 1.3rem; font-weight: 400; color: var(--at-text-2); }
  .at-dsheet .ds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .at-dsheet .ds-stats div { background: var(--at-chip); border-radius: 12px; padding: 12px 6px; text-align: center; }
  .at-dsheet .ds-stats b { display: block; font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; }
  .at-dsheet .ds-stats span { font-size: 1.2rem; color: var(--at-text-2); }
  .at-dsheet .ds-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .at-dsheet .ds-tags .tag { background: var(--at-chip); color: var(--at-cta); border-radius: 8px; padding: 4px 10px; font-size: 1.3rem; }
  .at-dsheet .ds-body { background: var(--at-chip); border-radius: 12px; padding: 14px; white-space: pre-line; overflow: hidden; }
  .at-dsheet .ds-body .d-poster { float: right; width: 84px; margin: 0 0 8px 12px; border-radius: 8px; }
  .at-dsheet .at-desc { background: transparent; padding: 0; margin-top: 8px; cursor: default; }
  .at-dsheet .at-desc .d-meta { border-top: 0; margin-top: 0; padding-top: 0; }
  .at-dsheet .at-desc .d-expanded { display: block !important; }

  /* search overlay (opens over any page; no navigation to /search) */
  #at-msearch { position: fixed; inset: 0; z-index: 3600; background: var(--at-bg); display: none; flex-direction: column; }
  #at-msearch.open { display: flex; }
  #at-msearch .ms-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 4px; border-bottom: 1px solid var(--at-layer-10); padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
  #at-msearch form { flex: 1; display: flex; align-items: center; background: var(--at-chip); border-radius: 20px; height: 40px; padding: 0 4px 0 14px; min-width: 0; }
  #at-msearch input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--at-text); font-size: 1.6rem; -webkit-appearance: none; appearance: none; }
  #at-msearch .ms-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #at-msearch .at-suggest-item { height: 48px; padding: 6px 12px; }
  #at-msearch .ms-clear { display: none; }
  #at-msearch.has-text .ms-clear { display: inline-flex; }
  body.at-msearch-open { overflow: hidden; }
}

/* Phone: .at-player-sticky is position:sticky;z-index:1800 with a black background and the slot inside it is black too.
   The real player (#at-pl, fixed) sat at z-index 5 => hidden BEHIND the black sticky box until a re-layout. Lift it above. */
@media (max-width: 791px) {
  #at-pl[data-mode="dock"] { z-index: 1801; }
}

/* settings: photo crop (banner and avatar) + import rows */
.at-modal.at-bcrop-modal { max-width: 720px; border-radius: 18px; }
.at-bcrop-modal .at-modal-head { align-items: flex-start; padding: 20px 12px 0 24px; }
.at-bcrop-modal .at-modal-head > span { display: block; line-height: 1.2; }
.at-bcrop-modal .at-modal-head small { display: block; margin-top: 4px; font-size: 1.3rem; font-weight: 400; line-height: 1.4; color: var(--at-text-2); }
.at-bcrop-modal .at-modal-body { padding: 14px 24px 4px; }
.at-bcrop-modal .at-modal-foot { align-items: center; padding: 12px 24px 20px; }
.at-cp-stage { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 14px; background: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.at-bcrop-view { position: relative; flex: none; overflow: hidden; border-radius: 8px; background: #111; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.at-bcrop-view.drag { cursor: grabbing; }
.at-bcrop-view img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.at-bcrop-view img.at-bcrop-blur { filter: blur(10px) brightness(.5); }
.at-bcrop-view img.at-bcrop-sharp { z-index: 1; }
.at-bcrop-box { position: absolute; z-index: 2; border: 2px solid rgba(255, 255, 255, .88); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 14px rgba(0, 0, 0, .45); cursor: move; touch-action: none; }
.at-bcrop-box.round { border-radius: 50%; }
.at-bcrop-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  background:
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 0 66.666% / 100% 1px no-repeat; }
.at-bcrop-view.drag .at-bcrop-grid { opacity: 1; }
/* Corner brackets: 30px hit area, a thick L drawn at the frame corner. */
.at-bcrop-box i { position: absolute; width: 30px; height: 30px; }
.at-bcrop-box i::before { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.at-bcrop-box i[data-h="nw"] { left: -15px; top: -15px; cursor: nwse-resize; }
.at-bcrop-box i[data-h="nw"]::before { left: 12px; top: 12px; border-top-width: 3px; border-left-width: 3px; }
.at-bcrop-box i[data-h="ne"] { right: -15px; top: -15px; cursor: nesw-resize; }
.at-bcrop-box i[data-h="ne"]::before { right: 12px; top: 12px; border-top-width: 3px; border-right-width: 3px; }
.at-bcrop-box i[data-h="sw"] { left: -15px; bottom: -15px; cursor: nesw-resize; }
.at-bcrop-box i[data-h="sw"]::before { left: 12px; bottom: 12px; border-bottom-width: 3px; border-left-width: 3px; }
.at-bcrop-box i[data-h="se"] { right: -15px; bottom: -15px; cursor: nwse-resize; }
.at-bcrop-box i[data-h="se"]::before { right: 12px; bottom: 12px; border-bottom-width: 3px; border-right-width: 3px; }
.at-cp-bar { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--at-text-2); }
.at-cp-bar .at-iconbtn { width: 32px; height: 32px; }
.at-cp-bar .at-iconbtn .at-icon { width: 20px; height: 20px; }
.at-cp-bar input[type="range"] { --p: 0%; flex: 1; min-width: 0; height: 4px; margin: 0 6px; border-radius: 2px; cursor: pointer; -webkit-appearance: none; appearance: none; outline: 0;
  background: linear-gradient(to right, var(--at-cta) var(--p), var(--at-layer-10) var(--p)); }
.at-cp-bar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--at-cta); box-shadow: 0 0 0 4px rgba(255, 255, 255, .0), 0 1px 4px rgba(0, 0, 0, .5); transition: box-shadow .15s ease; }
.at-cp-bar input[type="range"]:hover::-webkit-slider-thumb, .at-cp-bar input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--at-layer-10), 0 1px 4px rgba(0, 0, 0, .5); }
.at-cp-bar input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--at-cta); }
.at-cp-reset { height: 32px; padding: 0 12px; font-size: 1.3rem; line-height: 3.2rem; }
.at-cp-prev { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--at-bg-raised); border: 1px solid var(--at-border); }
.at-cp-prev canvas { display: block; flex: none; width: 132px; height: 44px; border-radius: 8px; background: #111; }
.at-cp-prev canvas.round { width: 44px; height: 44px; border-radius: 50%; }
.at-cp-pt { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.at-cp-pt b { font-size: 1.4rem; font-weight: 600; }
.at-cp-pt small { font-size: 1.2rem; color: var(--at-text-2); }
.at-cp-chip { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--at-border); font-size: 1.2rem; font-weight: 500; color: var(--at-text-2); }
@media (max-width: 791px) {
  .at-bcrop-modal .at-modal-body { padding: 12px 16px 4px; }
  .at-bcrop-modal .at-modal-head { padding: 18px 8px 0 16px; }
  .at-bcrop-modal .at-modal-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .at-cp-stage { padding: 8px; }
  .at-cp-prev canvas { width: 96px; height: 32px; }
  .at-cp-prev canvas.round { width: 40px; height: 40px; }
}
.at-import-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.at-import-row input { height: 36px; min-width: 0; flex: 1 1 160px; border-radius: 18px; border: 1px solid var(--at-border); background: transparent; color: var(--at-text); padding: 0 14px; font: inherit; font-size: 1.4rem; outline: 0; }
.at-import-row input:focus { border-color: var(--at-cta); }
/* account-level UI prefs */
/* Compact cards = tall poster cards (same AniTube card, 2:3 thumb; no studio avatar).
   Anime cards only — never W2G rooms (.at-room) or Continue watching (.at-cw). */
body.at-compact-cards .at-shelf-track .at-card:not(.at-room):not(.at-cw) { width: 170px; flex: 0 0 170px; }
body.at-compact-cards .at-grid:has(> .at-card:not(.at-room):not(.at-cw)):not(:has(> .at-cw)) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); column-gap: 16px; row-gap: 28px; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb { aspect-ratio: 2 / 3; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb .poster-bg { display: none; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb .poster-fit { object-fit: cover; opacity: 1 !important; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb .pv-img { display: none !important; }
/* Under poster: title + one short line (type / episode). No studio, score, views, or time. */
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb .tl { flex-wrap: wrap; max-width: calc(100% - 16px); }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-avatar { display: none; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-body { position: relative; margin-top: 8px; gap: 0; padding-right: 20px; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-menu { position: absolute; right: -2px; top: -2px; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-title { font-size: 1.4rem; line-height: 1.9rem; margin: 0 0 2px; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta { font-size: 1.2rem; line-height: 1.7rem; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta .row:first-child { display: none; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta .row:last-child { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta .row:last-child .sep,
body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta .row:last-child .sep ~ span { display: none; }
@media (max-width: 791px) {
  body.at-compact-cards .at-shelf-track .at-card:not(.at-room):not(.at-cw) { width: 38vw; min-width: 125px; max-width: 165px; flex: 0 0 auto; }
  body.at-compact-cards .at-shelf-track .at-card:not(.at-room):not(.at-cw) .at-card-body { padding: 0; }
  body.at-compact-cards .at-grid:has(> .at-card:not(.at-room):not(.at-cw)):not(:has(> .at-cw)) { grid-template-columns: repeat(2, 1fr); column-gap: 8px; row-gap: 16px; padding: 0 12px; }
  body.at-compact-cards .at-grid:has(> .at-card:not(.at-room):not(.at-cw)):not(:has(> .at-cw)) .at-thumb { border-radius: 14px; }
  body.at-compact-cards .at-grid:has(> .at-card:not(.at-room):not(.at-cw)):not(:has(> .at-cw)) .at-card-body { padding: 0; margin-top: 6px; }
  body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-title { font-size: 1.25rem; line-height: 1.7rem; }
  body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-card-meta { font-size: 1.1rem; line-height: 1.5rem; }
  body.at-compact-cards .at-card:not(.at-room):not(.at-cw) .at-thumb .tl .at-pill-badge { font-size: 1rem; }
}
/* Softer corners + hover pop: home shelves, home chip feed, browse/search grids,
   Compact cards, Top anime posters. List rows (.at-rows) are not included.
   Overrides the default hover that squares thumbs off. Preview delay unchanged. */
#sh-continue .at-card:not(.at-room) .at-thumb,
#sh-continue .at-card:not(.at-room):hover .at-thumb,
#sh-latest .at-card:not(.at-room) .at-thumb,
#sh-latest .at-card:not(.at-room):hover .at-thumb,
#sh-tables .at-card:not(.at-room) .at-thumb,
#sh-tables .at-card:not(.at-room):hover .at-thumb,
#sh-upcoming .at-card:not(.at-room) .at-thumb,
#sh-upcoming .at-card:not(.at-room):hover .at-thumb,
#at-home-feed .at-card:not(.at-room) .at-thumb,
#at-home-feed .at-card:not(.at-room):hover .at-thumb,
.at-browse .at-grid > .at-card:not(.at-room) .at-thumb,
.at-browse .at-grid > .at-card:not(.at-room):hover .at-thumb,
#at-search-results.at-grid .at-card:not(.at-room) .at-thumb,
#at-search-results.at-grid .at-card:not(.at-room):hover .at-thumb,
body.at-compact-cards .at-card:not(.at-room) .at-thumb,
body.at-compact-cards .at-card:not(.at-room):hover .at-thumb,
.at-poster-card .pc-img { border-radius: 16px; }
body.at-compact-cards .at-card:not(.at-room)::before { border-radius: 22px; inset: -10px -10px -8px; }
/* List view must stay landscape rows even when Compact cards is on */
body.at-compact-cards .at-rows .at-thumb { aspect-ratio: 16 / 9; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.at-reduced-motion) #sh-continue .at-card:not(.at-room),
  body:not(.at-reduced-motion) #sh-latest .at-card:not(.at-room),
  body:not(.at-reduced-motion) #sh-tables .at-card:not(.at-room),
  body:not(.at-reduced-motion) #sh-upcoming .at-card:not(.at-room),
  body:not(.at-reduced-motion) #at-home-feed .at-card:not(.at-room),
  body:not(.at-reduced-motion) .at-browse .at-grid > .at-card:not(.at-room),
  body:not(.at-reduced-motion) #at-search-results.at-grid .at-card:not(.at-room),
  body:not(.at-reduced-motion).at-compact-cards .at-card:not(.at-room),
  body:not(.at-reduced-motion) .at-poster-card {
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
  body:not(.at-reduced-motion) #sh-continue .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) #sh-latest .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) #sh-tables .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) #sh-upcoming .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) #at-home-feed .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) .at-browse .at-grid > .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) #at-search-results.at-grid .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion).at-compact-cards .at-card:not(.at-room):hover,
  body:not(.at-reduced-motion) .at-poster-card:hover {
    transform: scale(1.045);
    z-index: 5;
  }
  /* room for the pop so it isn't clipped */
  body:not(.at-reduced-motion) #sh-continue .at-shelf-track,
  body:not(.at-reduced-motion) #sh-tables .at-shelf-track,
  body:not(.at-reduced-motion) #sh-upcoming .at-shelf-track,
  body:not(.at-reduced-motion) #sh-top .at-shelf-track,
  body:not(.at-reduced-motion).at-compact-cards .at-shelf-track:has(> .at-card:not(.at-room)) {
    padding: 12px; margin: -12px; scroll-padding-left: 12px;
  }
  body:not(.at-reduced-motion) #at-home-feed,
  body:not(.at-reduced-motion) .at-browse .at-grid:has(> .at-card),
  body:not(.at-reduced-motion) #at-search-results.at-grid {
    padding: 12px 4px; margin: -4px -4px 0;
  }
}
@media (max-width: 791px) {
  #sh-continue .at-card:not(.at-room) .at-thumb,
  #sh-continue .at-card:not(.at-room):hover .at-thumb,
  #sh-latest .at-card:not(.at-room) .at-thumb,
  #sh-latest .at-card:not(.at-room):hover .at-thumb,
  #sh-tables .at-card:not(.at-room) .at-thumb,
  #sh-tables .at-card:not(.at-room):hover .at-thumb,
  #sh-upcoming .at-card:not(.at-room) .at-thumb,
  #sh-upcoming .at-card:not(.at-room):hover .at-thumb,
  #at-home-feed .at-card:not(.at-room) .at-thumb,
  #at-home-feed .at-card:not(.at-room):hover .at-thumb,
  body.at-compact-cards .at-card:not(.at-room) .at-thumb,
  body.at-compact-cards .at-card:not(.at-room):hover .at-thumb,
  .at-poster-card .pc-img { border-radius: 14px; }
  body.at-compact-cards .at-card:not(.at-room)::before { inset: 0 0 -10px 0; border-radius: 0 0 16px 16px; }
}
html.at-reduced-motion *, html.at-reduced-motion *::before, html.at-reduced-motion *::after,
body.at-reduced-motion *, body.at-reduced-motion *::before, body.at-reduced-motion *::after { animation-duration: .001s !important; transition-duration: .001s !important; }

/* ---------- Pickers opened from a modal (GIF / emoji in the post composer) stack above the modal scrim ---------- */
.at-menu.at-over-header { z-index: 2500; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* account menu: above the header, scrolls when taller than the screen */
.at-menu.at-over-popup { z-index: 3100; } /* above bell notifications popup (3000) so ⋮ Hide / Accept aren't invisible */
.at-menu.at-over-sheet { z-index: 3700; } /* above Comments sheet (3600) so Sort / ⋮ aren't invisible behind it */
.at-menu.at-over-modal { z-index: 3900; }
.at-sheet-scrim.at-over-modal { z-index: 3901; }
.at-sheet.at-over-modal { z-index: 3902; }

/* ---------- Anikoto markdown inside comments / posts ---------- */
.p-text, .cm-text, .at-md-preview { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.at-post { overflow-x: clip; }
.p-text a, .cm-text a, .at-md-preview a { color: var(--at-link, #3ea6ff); word-break: break-word; }
.p-text strong, .cm-text strong { font-weight: 600; }
.cm-md-h { font-weight: 600; line-height: 1.3; margin: 10px 0 4px; }
h1.cm-md-h { font-size: 2rem; } h2.cm-md-h { font-size: 1.8rem; } h3.cm-md-h { font-size: 1.6rem; }
.cm-md-ul { margin: 6px 0; padding-left: 22px; list-style: disc; }
.cm-md-ul li { margin: 2px 0; }
.cm-md-hr { display: block; border: 0; height: 1px; margin: 14px 0; max-width: 100%; background: var(--at-layer-20, rgba(255,255,255,.18)); }
.p-text blockquote, .cm-text blockquote, .at-md-preview blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--at-layer-20, rgba(255,255,255,.2)); background: var(--at-chip); border-radius: 0 8px 8px 0; color: var(--at-text-2); }
/* Inline ||spoiler|| — soft ink blot (NOT var(--at-text): that is #f1f1f1 on dark → solid white bricks) */
.cm-spoil {
  background: color-mix(in srgb, var(--at-text) 28%, transparent);
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cm-spoil:hover { background: color-mix(in srgb, var(--at-text) 40%, transparent); }
.cm-spoil.open { background: color-mix(in srgb, var(--at-text) 10%, transparent); color: inherit; user-select: auto; }
.at-clamp-3 .cm-md-h, .at-clamp-3 .cm-md-ul, .at-clamp-3 blockquote { display: inline; margin: 0; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; }

/* ---------- Composer editor: formatting bar + preview ---------- */
.at-editor { border: 1px solid var(--at-border); border-radius: 8px; overflow: hidden; background: transparent; }
.at-editor:focus-within { border-color: var(--at-text-2); }
.at-editor textarea { width: 100%; display: block; border: 0; background: transparent; color: var(--at-text); padding: 12px 16px; font: inherit; font-size: 1.4rem; line-height: 2rem; outline: 0; resize: vertical; min-height: 120px; }
.at-fmt-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--at-border); background: var(--at-chip); flex-wrap: wrap; }
.at-fmt-bar > button { height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--at-text); font: inherit; font-size: 1.4rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.at-fmt-bar > button:hover, .at-fmt-bar > button.on { background: var(--at-layer-10); }
.at-fmt-bar .at-iconbtn { width: 32px; height: 32px; }
.at-fmt-bar .at-icon.xs, .at-fmt-bar .at-iconbtn .at-icon { width: 18px; height: 18px; }
.at-fmt-sep { width: 1px; height: 20px; background: var(--at-border); margin: 0 4px; }
.at-fmt-prev { font-size: 1.3rem !important; font-weight: 500; padding: 0 12px !important; }
.at-fmt-prev.on { background: var(--at-text) !important; color: var(--at-bg) !important; }
.at-md-preview { padding: 12px 16px; min-height: 120px; font-size: 1.4rem; line-height: 2rem; word-break: break-word; }
.at-md-preview .cm-embed-gif { max-width: min(100%, 320px); border-radius: 8px; }
.at-fmt-hint { font-size: 1.2rem; }
.cf .at-fmt-bar { border: 0; background: transparent; padding: 0; }
/* comment composers: compact tool bar (override the 36px .cf-tools .at-iconbtn) */
.at-composer .cf-tools .at-cfmt {
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
}
.at-composer .cf-tools .at-cfmt > button,
.at-composer .cf-tools .at-cfmt .at-iconbtn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 1.2rem;
  color: var(--at-text-2);
}
.at-composer .cf-tools .at-cfmt > button:hover,
.at-composer .cf-tools .at-cfmt > button.on,
.at-composer .cf-tools .at-cfmt .at-iconbtn:hover { color: var(--at-text); background: var(--at-layer-10); }
.at-composer .cf-tools .at-cfmt .at-icon,
.at-composer .cf-tools .at-cfmt .at-iconbtn .at-icon,
.at-composer .cf-tools .at-cfmt .at-icon.xs { width: 16px; height: 16px; }
.at-composer .cf-tools .at-cfmt .at-fmt-sep { height: 16px; margin: 0 2px; }
.at-composer .cf-tools .at-cfmt .at-fmt-prev-ic.on { background: var(--at-layer-10); color: var(--at-text); }
.cf .at-md-preview { min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--at-layer-10); }

/* ---------- Emoji picker ---------- */
.at-emop { padding: 4px 8px 8px; max-height: 320px; overflow-y: auto; }
#at-sheet-body .at-emop { max-height: none; padding: 0 8px 16px; }
.at-emop-g { font-size: 1.2rem; color: var(--at-text-2); padding: 8px 4px 4px; position: sticky; top: 0; background: var(--at-bg-menu); }
#at-sheet-body .at-emop-g { background: var(--at-bg-sheet, var(--at-bg-menu)); }
.at-emop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.at-emop-grid button { height: 36px; border: 0; background: transparent; font-size: 2rem; line-height: 1; border-radius: 6px; cursor: pointer; padding: 0; }
.at-emop-grid button:hover { background: var(--at-layer-10); }

/* ---------- Community search ---------- */
.at-pq { display: flex; align-items: center; gap: 10px; height: 44px; margin-top: 12px; padding: 0 8px 0 14px; border-radius: 22px; border: 1px solid var(--at-border); background: var(--at-chip); color: var(--at-text-2); transition: border-color .15s, background .15s; }
.at-pq:focus-within { border-color: #1c62b9; background: var(--at-bg); color: var(--at-text); }
.at-pq > .at-icon { width: 20px; height: 20px; flex: none; }
.at-pq input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--at-text); font: inherit; font-size: 1.5rem; outline: 0; }
.at-pq input::-webkit-search-cancel-button { display: none; }
.at-pq .at-iconbtn { width: 32px; height: 32px; }
.at-pq-meta { font-size: 1.3rem; color: var(--at-text-2); margin: 10px 0 -4px; }

/* ---------- Single post page ---------- */
.at-community.is-post { max-width: 900px; }
.at-community.is-post .at-community-main { max-width: none; }
.at-post-back { margin-top: 16px; padding-left: 0; }
.at-community.is-post .at-post[data-post] { border: 0; padding: 0; margin-top: 8px; }
.at-community.is-post .at-post .p-title { font-size: 2.2rem; line-height: 3rem; font-weight: 600; margin: 16px 0 8px; }
.at-community.is-post .at-post .p-text { font-size: 1.5rem; line-height: 2.3rem; }
.at-community.is-post .at-post .p-img { max-height: 560px; }
.at-community.is-post .at-post .p-actions { padding: 8px 0; margin-top: 12px; border-top: 1px solid var(--at-layer-10); border-bottom: 1px solid var(--at-layer-10); margin-left: 0; }
.at-community.is-post .at-comments { margin-top: 24px; }
.at-comments-gate { padding: 8px 0 24px; }
.at-comments-gate-hint { margin: 10px 0 0; font-size: 1.2rem; color: var(--at-text-2); }
.at-community.is-post .at-comments-teaser { display: none; }

/* ---------- Posts by @user (community?tab=mine&user=) ---------- */
.at-upost-head { display: flex; align-items: center; gap: 14px; margin: 20px 0 4px; }
.at-upost-head .av { position: relative; overflow: visible; flex: none; }
/* PFP only — don't squash .at-deco-img into the 48px circle. */
.at-upost-head .av > img:not(.at-deco-img) { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.at-upost-head h1 { font-size: 2rem; font-weight: 600; margin: 0; }
.at-upost-head .m { font-size: 1.3rem; color: var(--at-text-2); }
.at-upost-head .m a { color: var(--at-link, #3ea6ff); }

@media (max-width: 791px) {
  .at-community.is-post .at-post-back { margin: 8px 4px 0; }
  .at-community.is-post .at-post[data-post] { padding: 12px; }
  .at-community.is-post .at-post .p-title { font-size: 1.9rem; line-height: 2.6rem; }
  /* comments move into the bottom sheet (same as the watch page) — show the teaser instead */
  .at-community.is-post .at-comments { display: none; }
  .at-community.is-post .at-comments-teaser { display: block; }
  .at-pq { margin: 12px 12px 0; height: 40px; }
  .at-pq-meta { margin: 10px 12px -4px; }
  .at-upost-head { margin: 16px 12px 4px; }
  .at-editor textarea { min-height: 160px; font-size: 1.6rem; }
  .at-fmt-bar > button { height: 36px; min-width: 36px; }
  /* comment composer stays compact — don't inherit the post-editor 36px bump */
  .at-composer .cf-tools .at-cfmt > button,
  .at-composer .cf-tools .at-cfmt .at-iconbtn { width: 28px; height: 28px; min-width: 28px; }
}

/* ---------- Request anime + Contact (wide static pages) ---------- */
.at-static.wide { max-width: 1100px; }
.at-static.wide h1 { margin: 0; }
.at-static.wide p.sub, .at-static.wide p { margin: 4px 0 0; }
.at-req-head { padding-top: 8px; align-items: flex-start; }
.at-req-head .at-icon.big { margin-top: 8px; color: var(--at-text-2); }
.at-req-head .sub { font-size: 1.4rem; line-height: 2rem; max-width: 640px; }
.at-req-form { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 24px 0 8px; padding: 16px; border-radius: 12px; background: var(--at-chip); }
.at-req-form .at-field { margin: 0; }
.at-req-form .at-field.grow { flex: 1; min-width: 240px; }
.at-req-form .at-field label { background: var(--at-chip); }
.at-req-form .at-field input { height: 44px; background: var(--at-bg); }
.at-req-form .at-field label b { color: var(--at-text); }
.at-req-src { height: 44px; border-radius: 22px; flex: none; }
.at-req-form .at-btn { height: 44px; border-radius: 22px; flex: none; }
.at-req-tips { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 1.3rem; color: var(--at-text-2); margin: 8px 0 0; }
.at-req-tips span { display: inline-flex; align-items: center; gap: 6px; }
.at-req-list-head { display: flex; align-items: center; gap: 16px; margin: 28px 0 12px; flex-wrap: wrap; }
.at-req-list-head h2 { margin: 0; font-size: 2rem; display: inline-flex; align-items: baseline; gap: 8px; flex: none; }
.at-req-list-head h2 .n { font-size: 1.4rem; color: var(--at-text-2); font-weight: 400; }
.at-req-list-head .at-chips { flex: 1; min-width: 0; }
.at-rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.at-rq-card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.at-rq-card .rq-poster { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--at-bg-raised); display: flex; align-items: center; justify-content: center; color: var(--at-text-3); }
.at-rq-card .rq-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
a.at-rq-card:hover .rq-poster img { transform: scale(1.03); }
.at-rq-card .rq-st { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 4px; font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; background: rgba(0,0,0,.75); color: #fff; }
.at-rq-card .rq-st.ok { background: #2ba640; } .at-rq-card .rq-st.info { background: #3ea6ff; color: #0f0f0f; } .at-rq-card .rq-st.bad { background: #c00; }
.at-rq-card .rq-t { font-size: 1.4rem; line-height: 2rem; font-weight: 500; margin-top: 8px; color: var(--at-text); }
.at-rq-card .rq-m { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.at-rq-card .rq-m .dot { color: var(--at-text-3); }
.at-rq-card .rq-m .src { font-weight: 600; padding: 0 5px; border-radius: 3px; background: var(--at-chip); font-size: 1.05rem; }
.at-rq-card .rq-m .src.mal { color: #2e51a2; background: rgba(46,81,162,.18); } .at-rq-card .rq-m .src.anilist { color: #3db4f2; background: rgba(61,180,242,.15); }
.at-contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 24px; }
.at-contact-form { padding: 20px; border-radius: 12px; background: var(--at-chip); }
.at-contact-form .at-field label { background: var(--at-chip); }
.at-contact-form .at-field input, .at-contact-form .at-field textarea { background: var(--at-bg); border-radius: 8px; }
.at-contact-form .at-field textarea { resize: vertical; min-height: 140px; }
.at-contact-form .at-field textarea + label { top: -8px; }
.at-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-contact-topic { position: static !important; height: 44px; width: 100%; background: var(--at-bg); border: 1px solid var(--at-border); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; }
.at-contact-topic select { flex: 1; background: transparent; color: var(--at-text); border: 0; font: inherit; font-size: 1.4rem; outline: 0; height: 100%; }
.at-contact-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.at-contact-foot small { flex: 1; color: var(--at-text-2); font-size: 1.2rem; display: inline-flex; align-items: center; gap: 6px; }
.at-contact-side { display: flex; flex-direction: column; gap: 10px; }
.at-contact-card { display: flex; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--at-layer-10); font-size: 1.3rem; line-height: 1.8rem; }
.at-contact-card > .at-icon { flex: none; color: var(--at-text-2); }
.at-contact-card b { display: block; color: var(--at-text); font-size: 1.4rem; }
.at-contact-card small { color: var(--at-text-2); font-size: 1.3rem; }

/* ---------- Inventory groups ---------- */
.at-inv-group { margin-top: 24px; }
.at-inv-h { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 500; margin: 0 0 8px; }
.at-inv-h .n { color: var(--at-text-2); font-weight: 400; font-size: 1.4rem; }
.at-inv-h .at-icon { color: var(--at-text-2); }
.at-inv-empty { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--at-border); color: var(--at-text-2); font-size: 1.3rem; }
.at-inv-empty > .at-icon { flex: none; width: 28px; height: 28px; color: var(--at-text-3); }
.at-inv-empty > div { flex: 1; min-width: 0; }
.at-inv-empty b { display: block; color: var(--at-text); font-size: 1.4rem; }
.at-inv-empty .at-btn { flex: none; }

@media (max-width: 791px) {
  .at-static.wide { padding: 8px 12px 24px; }
  .at-req-head { gap: 12px; }
  .at-req-head .at-icon.big { width: 32px; height: 32px; margin-top: 4px; }
  .at-static.wide h1 { font-size: 2.4rem; line-height: 3.2rem; }
  .at-req-form { padding: 12px; gap: 10px; margin-top: 16px; }
  .at-req-src { width: 100%; }
  .at-req-src > button { flex: 1; }
  .at-req-form .at-field.grow { flex: 1 1 100%; min-width: 0; }
  .at-req-form .at-btn { width: 100%; justify-content: center; }
  .at-req-tips { flex-direction: column; gap: 6px; }
  .at-req-list-head { margin-top: 20px; gap: 8px; }
  .at-req-list-head .at-chips { flex: 1 1 100%; }
  .at-rq-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
  .at-rq-card .rq-t { font-size: 1.3rem; line-height: 1.8rem; }
  .at-contact { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .at-contact-form { padding: 14px 12px; }
  .at-contact-row { grid-template-columns: 1fr; gap: 0; }
  .at-contact-foot .at-btn { width: 100%; justify-content: center; }
  .at-inv-group { margin: 20px 12px 0; }
  .at-inv-group .at-shop-grid { padding: 0; }
  .at-inv-empty { flex-wrap: wrap; padding: 12px; }
  .at-inv-empty > div { flex: 1 1 calc(100% - 44px); }
  .at-inv-empty .at-btn { margin-left: 42px; }
}
@media (max-width: 420px) { .at-rq-grid { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================================================
   Polish pass: episodes panel, servers, list button, notification tabs, share, shortcuts, fullscreen
   ===================================================================================================== */

/* ---------- Episodes panel ---------- */
.at-panel { border-radius: 16px; border: 1px solid var(--at-layer-10); background: var(--at-bg); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.at-panel-head { padding: 14px 10px 14px 18px; background: linear-gradient(180deg, var(--at-layer-5), transparent), var(--at-bg-raised); align-items: center; }
.at-panel-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1.9rem; letter-spacing: -.01em; }
.at-panel-head .ph-count { font-size: 1.2rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--at-chip); color: var(--at-text-2); }
.at-panel-head .ph-sub { margin-top: 4px; gap: 6px; }
.at-panel-head .ph-bar { height: 4px; border-radius: 2px; background: var(--at-layer-10); margin-top: 10px; overflow: hidden; }
.at-panel-head .ph-bar i { display: block; height: 100%; border-radius: 2px; background: #3fb950; transition: width .4s ease; }
.at-panel-tools { padding: 10px 14px; gap: 8px; border-top: 1px solid var(--at-layer-10); }
.at-panel-tools .at-input { flex: 1 1 110px; min-width: 96px; height: 34px; border-radius: 10px; }
.at-panel-tools .at-input input { width: 100%; min-width: 0; }
.at-panel-tools .at-segment.sm { border-radius: 10px; height: 34px; }
.at-panel-tools .at-select { height: 34px; border-radius: 10px; }
.at-panel-tools .at-chip.cur { height: 34px; border-radius: 10px; padding: 0 12px; margin-left: auto; }
.at-panel-list { background: var(--at-bg); scrollbar-width: thin; }
.at-epgrid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; padding: 14px; }
.at-epgrid a { height: 46px; border-radius: 12px; font-size: 1.4rem; background: var(--at-chip); border: 1px solid transparent; transition: background .15s, transform .15s, border-color .15s; }
.at-epgrid a:hover { background: var(--at-chip-hover); transform: translateY(-1px); border-color: var(--at-layer-15, var(--at-layer-10)); }
.at-epgrid a.watched:not(.active) { background: rgba(63,185,80,.10); color: var(--at-text); border-color: rgba(63,185,80,.25); }
.at-epgrid a.active { box-shadow: 0 0 0 2px var(--at-bg), 0 0 0 4px var(--at-cta), 0 4px 14px rgba(62,166,255,.35); transform: none; }
.at-epgrid a::after { right: 6px; bottom: 6px; }
.at-ep { margin: 2px 8px; padding: 6px 8px 6px 0; border-radius: 12px; position: relative; }
.at-ep.active { background: var(--at-chip); }
.at-ep.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--at-cta); }
.at-ep .th { border-radius: 10px; }
.at-panel-foot { padding: 10px 14px; gap: 6px 14px; background: var(--at-bg-raised); border-top: 1px solid var(--at-layer-10); }
.at-panel-foot .lg { font-size: 1.15rem; }
.at-panel-foot .at-iconbtn { margin-left: auto; }


/* ---------- Add to list button ---------- */
.at-listsplit { display: inline-flex; align-items: stretch; }
.at-listsplit .at-listbtn { border-radius: 18px 0 0 18px; padding-right: 14px; max-width: 170px; }
.at-listsplit .at-listbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-listsplit .at-listbtn .at-icon { color: #3fb950; }
.at-listsplit .at-alertbtn { border-radius: 0 18px 18px 0; padding: 0 10px; border-left: 1px solid var(--at-layer-10); gap: 2px; }
.at-listbtn { transition: background .2s, color .2s; }
.at-listbtn.on { animation: at-pop .25s ease; }
@keyframes at-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- Notification popup tabs ---------- */
.at-popup-tabs { flex: none; align-items: center; padding: 12px 16px; margin: 0; min-height: 58px; box-sizing: border-box; border-bottom: 1px solid var(--at-layer-10); }
.at-popup-tabs .at-chip { flex: none; height: 34px; padding: 0 16px; line-height: 34px; margin: 0; }
.at-popup-head { flex: none; }
.at-popup-body { padding-top: 6px; min-height: 0; }

/* ---------- Footer share card ---------- */
.at-sharecard { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 28px auto 12px; padding: 14px 16px; border-radius: 16px; background: var(--at-bg-raised); border: 1px solid var(--at-layer-10); }
.at-sharecard .sc-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff4e45, #ff0033); color: #fff; }
.at-sharecard .sc-ic .at-icon { width: 22px; height: 22px; }
.at-sharecard .sc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 1.3rem; color: var(--at-text-2); }
.at-sharecard .sc-tx b { font-size: 1.5rem; color: var(--at-text); font-weight: 600; }
.at-sharecard .at-btn { flex: none; height: 36px; border-radius: 18px; }
@media (max-width: 520px) { .at-sharecard { margin: 20px 12px 8px; padding: 12px; gap: 10px; } .at-sharecard .sc-ic { width: 38px; height: 38px; } .at-sharecard .at-btn span, .at-sharecard .at-btn { padding: 0 14px; } }

/* ---------- Share dialog ---------- */
.at-share { padding: 4px 20px 22px; }
.at-share-grid { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 8px 0 20px; }
.at-share-net { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.2rem; color: var(--at-text); background: none; border: 0; cursor: pointer; text-decoration: none; }
.at-share-net .ic { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c, var(--at-chip)); color: #fff; transition: transform .15s, box-shadow .15s; }
.at-share-net .ic .at-icon { width: 26px; height: 26px; }
.at-share-net:hover .ic { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.at-share-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--at-chip); border: 1px solid var(--at-layer-10); }
.at-share-link .u { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--at-text-2); font-size: 1.3rem; }
.at-share-link .u > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-share-link .at-btn { height: 36px; border-radius: 18px; }

/* ---------- Keyboard shortcuts ---------- */
.at-keys { display: grid; gap: 18px; }
.at-keys-g h4 { margin: 0 0 6px; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; color: var(--at-text-2); }
.at-keys-r { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--at-layer-10); font-size: 1.4rem; }
.at-keys-r .k { flex: none; min-width: 150px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.at-keys-r .k i { font-style: normal; font-size: 1.1rem; color: var(--at-text-3); margin: 0 2px; }
.at-keys-r .d { color: var(--at-text-2); }
.at-keys kbd { min-width: 26px; padding: 3px 8px; border-radius: 6px; background: var(--at-chip); border: 1px solid var(--at-layer-10); border-bottom-width: 2px; font: 600 1.2rem/1.4 inherit; text-align: center; }
.at-keys-note { margin: 0; font-size: 1.2rem; color: var(--at-text-3); }
@media (max-width: 520px) { .at-keys-r { flex-direction: column; align-items: flex-start; gap: 4px; } .at-keys-r .k { min-width: 0; } }

/* ---------- Player fullscreen (host box is what goes fullscreen, so auto-next keeps it) ---------- */
#at-pl.is-fs, #at-pl:fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; background: #000; z-index: 9999; }
#at-pl.is-fs .at-pl-video, #at-pl:fullscreen .at-pl-video { width: 100%; height: 100%; }
#at-pl.is-fs .at-pl-bar, #at-pl.is-fs .at-pl-ov, #at-pl:fullscreen .at-pl-bar, #at-pl:fullscreen .at-pl-ov { display: none !important; }

/* --- round 4 fixes --- */
body:has(#at-pl.is-fs) .at-player-back,
body.at-no-mini .at-player-back { display: none !important; }
#at-msearch form { padding: 0 4px 0 12px; gap: 8px; }
#at-msearch .ms-ico { display: inline-flex; flex: none; color: var(--at-text-2); }
#at-msearch .ms-ico .at-icon { width: 20px; height: 20px; }
#at-msearch .ms-list { width: 100%; box-sizing: border-box; overflow-x: hidden; }
#at-msearch .at-suggest-item { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 48px; padding: 6px 12px 6px 16px; gap: 14px; overflow: hidden; color: var(--at-text); text-decoration: none; }
#at-msearch .at-suggest-item.ent img { margin-left: auto; flex: none; }
#at-msearch .at-suggest-item .fill { margin-right: 0; }
.at-mycomments { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.at-mycomments .mc-item { background: var(--at-chip); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.at-mycomments .mc-on { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; color: var(--at-text-2); margin-bottom: 8px; }
.at-mycomments .mc-on a { color: var(--at-cta); font-weight: 500; }
.at-mycomments .at-comments { display: block !important; margin: 0; padding: 0; }

/* history mobile: keep chips slideable; stop search from expanding the page */
@media (max-width: 791px) {
  .at-history, .at-history-main, .at-history-side { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .at-history-side .at-ch-searchbox {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  .at-history-side .at-ch-searchbox input {
    min-width: 0; width: 100%;
    -webkit-appearance: none; appearance: none;
  }
  .at-history-side .at-ch-searchbox input::-webkit-search-decoration,
  .at-history-side .at-ch-searchbox input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; display: none;
  }
  .at-history-links {
    max-width: 100%; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .at-history-links::-webkit-scrollbar { display: none; }
}

/* slideable chip rows: edge fade via .fade-r / .fade-l (history.js, settings.js) */
@media (max-width: 1016px) {
  .at-history-links.fade-r, .at-settings-nav.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .at-history-links.fade-l, .at-settings-nav.fade-l { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
  .at-history-links.fade-l.fade-r, .at-settings-nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); }
}

/* lazy (server-paged) replies: "Show more replies" */
.at-comment .cm-more-replies { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin: 8px 0 0; border-radius: 16px; background: var(--at-chip); color: #3ea6ff; font-size: 1.3rem; font-weight: 500; }
.at-comment .cm-more-replies:hover { background: var(--at-hover); }
.at-comment .cm-more-replies[disabled], .at-comment .cm-replies-toggle[disabled] { opacity: .6; }

/* ---- Friends: find box, people list, blocked notice ---- */
.at-find-box { position: relative; margin: 20px 0 8px; width: 100%; max-width: none; }
.at-find-box .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; color: var(--at-text-2); pointer-events: none; }
.at-find-box input { width: 100%; height: 48px; box-sizing: border-box; border-radius: 24px; border: 1px solid var(--at-layer-10); background: var(--at-chip); color: var(--at-text); padding: 0 48px; font-size: 1.6rem; outline: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s; }
.at-find-box input::-webkit-search-cancel-button { display: none; }
.at-find-box input::placeholder { color: var(--at-text-3); }
.at-find-box input:focus { border-color: #3ea6ff; background: transparent; }
.at-find-box .clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--at-text-2); }
.at-find-box .clr[hidden] { display: none; }
.at-find-box .clr:hover { background: var(--at-hover); }
.at-find-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 16px; color: var(--at-text-2); font-size: 1.4rem; }
.at-find-hint svg { width: 48px; height: 48px; opacity: .5; margin-bottom: 6px; }
.at-find-hint b { color: var(--at-text); font-size: 1.8rem; font-weight: 500; }
.at-find-h { font-size: 1.4rem; color: var(--at-text-2); font-weight: 500; margin: 16px 0 4px; }
.at-people-list { width: 100%; max-width: none; }
.at-people-list .at-friend-row { padding: 12px 8px; border-radius: 12px; }
.at-people-list .at-friend-row:hover { background: var(--at-hover); }
.at-notice { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 8px; padding: 14px 16px; width: 100%; max-width: none; box-sizing: border-box; border-radius: 12px; background: var(--at-chip); color: var(--at-text); font-size: 1.4rem; line-height: 2rem; }
.at-notice > svg, .at-notice > .at-ico { flex: none; margin-top: 2px; color: var(--at-cta); }
.at-notice.at-notice-ban { background: rgba(255, 70, 70, .14); border: 1px solid rgba(255, 90, 90, .5); }
.at-notice.at-notice-ban b, .at-notice.at-notice-ban span, .at-notice.at-notice-ban > svg, .at-notice.at-notice-ban > .at-ico,
html[data-theme="volt"] .at-notice.at-notice-ban b, html[data-theme="volt"] .at-notice.at-notice-ban span, html[data-theme="volt"] .at-notice.at-notice-ban > svg { color: #ff6b6b; }
html[data-theme="volt"] .at-notice.at-notice-ban::before { background: #ff6b6b; }
.at-notice b { display: block; font-weight: 500; font-size: 1.5rem; }
.at-notice span { display: block; color: var(--at-text-2); }
@media (max-width: 791px) {
  .at-find-box { width: auto; margin: 16px 12px 8px; }
  #at-find-res { margin: 0 12px; }
  #at-find-res .at-people-list .at-friend-row { padding: 12px 0; }
  #at-find-res .at-friend-row .fm { overflow-wrap: break-word; word-break: normal; }
  /* Button goes under the name, same idea as Friends. Friends rules stay untouched. */
  #at-find-res .at-friend-row .fx { flex: 1 0 calc(100% - 60px); max-width: calc(100% - 60px); margin-left: 60px; }
  .at-notice { margin: 12px; }
}

/* blocked author stub (comments + posts) */
.at-comment.cm-blocked { padding-top: 6px; padding-bottom: 6px; }
.cm-blocked-row { display: flex; align-items: center; gap: 8px; color: var(--at-text-2); font-size: 1.3rem; min-height: 32px; }
.cm-blocked-row svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.cm-blocked-row a { color: var(--at-cta); margin-left: 4px; }
.at-post.at-post-blocked { padding: 12px 16px; }

/* ---- card previews (at-preview.js): episode frame overlay + YouTube-style muted preview video ---- */
.at-thumb .poster-bg, .at-thumb .poster-fit { z-index: 0; }
.at-thumb .tl, .at-thumb .dur, .at-thumb .progress, .at-thumb .hover-play { z-index: 2; }
/*
  Tab-switch flash was: new card mounts → sharp letterboxed .poster-fit shows → .pv-img fades in.
  While a frame overlay exists, hide .poster-fit (blurred .poster-bg still paints). No opacity fade.
*/
.at-thumb:has(> img.pv-img) .poster-fit { opacity: 0; }
/* must stay absolute — an in-flow .pv-img/.pv-video shows up as a tiny top-left crop inside overflow:hidden */
.at-thumb .pv-img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover; z-index: 1; opacity: 0; pointer-events: none; border: 0;
}
.at-thumb .pv-img.is-on { opacity: 1; }
.at-thumb .pv-img[hidden] { display: none !important; opacity: 0 !important; }
.at-thumb .pv-video {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover; background: #000; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 1; border: 0;
}
.at-thumb.pv-on .pv-video { opacity: 1; }
.at-thumb.pv-on .hover-play { display: none; }
.at-thumb.pv-on .progress, .at-thumb.pv-on .dur { opacity: 0; }
.at-thumb .pv-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3; }
.at-thumb.pv-on .pv-ui { opacity: 1; }
.at-thumb .pv-mute { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.at-thumb .pv-mute:hover { background: rgba(0, 0, 0, .8); }
.at-thumb .pv-mute svg { width: 22px; height: 22px; fill: currentColor; }
.at-thumb .pv-mute .on { display: none; }
.at-thumb.pv-unmuted .pv-mute .on { display: block; }
.at-thumb.pv-unmuted .pv-mute .off { display: none; }
.at-thumb .pv-tag { position: absolute; left: 8px; bottom: 10px; max-width: calc(100% - 16px); padding: 2px 6px; border-radius: 4px; background: var(--at-badge-bg); color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-thumb .pv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
.at-thumb .pv-bar i { display: block; height: 100%; background: var(--at-red); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s linear; }
/* ambient mode: soft tint behind the whole card while its preview plays (colour sampled in at-preview.js) */
.at-card::before { content: ""; position: absolute; inset: -8px -8px -4px; border-radius: 12px; background: var(--at-amb, transparent); opacity: 0; transition: opacity .5s ease, background-color .8s ease; pointer-events: none; z-index: -1; }
.at-card { isolation: isolate; }
.at-card.pv-amb::before { opacity: 1; }
/* phone (YouTube app): edge-to-edge strip under the square video, rounded bottom corners, a little padding under the text */
@media (max-width: 791px) { .at-card::before { inset: 0 0 -10px 0; border-radius: 0 0 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .at-card::before { transition: none; } }
#at-pv-park { position: fixed !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -1 !important; }
@media (prefers-reduced-motion: reduce) { .at-thumb .pv-video, .at-thumb .pv-ui, .at-thumb .pv-img { transition: none; } }

/* ---------- Settings > Playback > Player configuration (account-level AniTube player config, live preview) ---------- */
.at-modal.at-pc-modal { max-width: 980px; }
.at-pc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.at-pc-preview { position: sticky; top: 0; }
.at-pc-vid { --bar: 1; --barbg: 0; --barblur: 0px; --mbg: .72; --mblur: 24px; --tipbg: 1; --btnbg: 0; --nbg: .75; --dim: 0; --r: 0px; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 12px; font-family: Inter, system-ui, sans-serif; color: #fff; }
.at-pc-frame { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, #6d8bd6 0, #2b3d6e 40%, #121a33 100%); transition: transform .2s; }
.at-pc-frame[data-aspect="fit"] { inset: 10% 0; } .at-pc-frame[data-aspect="stretch"], .at-pc-frame[data-aspect="fill"], .at-pc-frame[data-aspect="zoom"] { inset: 0; }
.at-pc-dim { position: absolute; inset: 0; background: rgba(0,0,0,var(--dim)); pointer-events: none; }
.at-pc-cap { position: absolute; left: 6%; right: 6%; bottom: 9%; text-align: var(--al, center); transform: translate(var(--x, 0), calc(var(--y, 0) + var(--lift, 0px))); opacity: var(--all, 1); background: var(--box, transparent); max-width: var(--mw, 100%); margin: 0 auto; pointer-events: none; }
.at-pc-cap span { display: inline-block; padding: 1px 6px; font-family: var(--f, sans-serif); font-size: calc(clamp(10px, 2.6cqw, 22px) * var(--fs, 1.05)); font-weight: var(--w, 700); font-style: var(--i, normal); text-transform: var(--u, none); color: var(--col, #fff); opacity: var(--op, 1); letter-spacing: var(--ls, 0); word-spacing: var(--ws, 0); line-height: var(--lh, 1.35); text-shadow: var(--sh); background: var(--lbg, transparent); text-decoration: var(--deco, none); -webkit-text-stroke: var(--stk, 0) var(--stc, #000); paint-order: stroke fill; }
.at-pc-vid { container-type: inline-size; }
.at-pc-notif { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r); background: rgba(0,0,0,var(--nbg)); font-size: 11px; font-weight: 500; }
.at-pc-notif[data-pos="bottom"] { top: auto; bottom: 30%; }
.at-pc-menu { position: absolute; right: 8px; bottom: 44px; width: 150px; padding: 6px; border-radius: var(--r); background: rgba(0,0,0,var(--mbg)); -webkit-backdrop-filter: blur(var(--mblur)) saturate(1.4); backdrop-filter: blur(var(--mblur)) saturate(1.4); font-size: 10px; }
.at-pc-menu div { display: flex; justify-content: space-between; padding: 5px 6px; border-radius: var(--r); } .at-pc-menu div:first-child { background: rgba(255,255,255,.1); } .at-pc-menu span + span { color: rgba(255,255,255,.65); }
.at-pc-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 8px 4px; zoom: var(--bar); background: linear-gradient(to top, rgba(0,0,0,var(--barbg)), rgba(0,0,0,0)); -webkit-backdrop-filter: blur(var(--barblur)); backdrop-filter: blur(var(--barblur)); }
.at-pc-seek { position: relative; margin: 6px 0; }
.at-pc-tip { position: absolute; left: 5%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 6px; border-radius: var(--r); font-size: 9px; font-weight: 500; background: rgba(0,0,0,var(--tipbg)); white-space: nowrap; pointer-events: none; }
.at-pc-rail { height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); } .at-pc-rail i { display: block; width: 5%; height: 100%; background: #f03; border-radius: inherit; }
.at-pc-btns { display: flex; align-items: center; gap: 2px; font-size: 11px; } .at-pc-btns b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border-radius: 8px; background: rgba(0,0,0,var(--btnbg)); font-weight: 500; } .at-pc-btns em { font-style: normal; font-size: 10px; margin-left: 4px; font-variant-numeric: tabular-nums; } .at-pc-btns .sp { flex: 1; }
.at-pc-hint { margin-top: 8px; font-size: 1.2rem; color: var(--at-text-2); }
.at-pc-form { max-height: 62vh; overflow: auto; padding-right: 4px; }
.at-pc-group { border-bottom: 1px solid var(--at-layer-5); } .at-pc-group summary { cursor: pointer; padding: 12px 0; font-weight: 500; font-size: 1.4rem; list-style: none; display: flex; justify-content: space-between; } .at-pc-group summary::after { content: "⌄"; color: var(--at-text-2); } .at-pc-group[open] summary::after { content: "⌃"; }
.at-pc-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 1.3rem; } .at-pc-lbl { flex: 1; min-width: 0; } .at-pc-ctl { display: flex; align-items: center; gap: 8px; flex: none; max-width: 60%; }
button.at-pc-preset { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; margin: 0; }
button.at-pc-preset:hover { background: var(--at-layer-3, rgba(255,255,255,.04)); }
button.at-pc-preset .at-pc-val { color: var(--at-cta); }
button.at-pc-preset.on .at-pc-val { font-weight: 600; }
.at-pc-ctl input[type=range] { width: 140px; accent-color: var(--at-cta); } .at-pc-val { min-width: 46px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--at-text-2); }
.at-pc-sw { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 200px; } .at-pc-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--at-layer-5); cursor: pointer; padding: 0; } .at-pc-dot.sel { border-color: var(--at-text); box-shadow: 0 0 0 2px var(--at-layer-5); }
@media (max-width: 860px) { .at-pc { grid-template-columns: 1fr; } .at-pc-preview { position: static; } .at-pc-form { max-height: none; } .at-pc-ctl input[type=range] { width: 110px; } }
.at-pc-share { display: flex; align-items: center; gap: 4px; padding: 6px 0 8px; border-bottom: 1px solid var(--at-layer-5); font-size: 1.3rem; } .at-pc-share > span { flex: 1; color: var(--at-text-2); }
.at-pc-tawrap { padding: 8px 0; border-bottom: 1px solid var(--at-layer-5); } .at-pc-tawrap > div { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.at-pc-talbl { font-size: 1.3rem; font-weight: 500; margin-bottom: 6px; }
.at-pc-ta { width: 100%; resize: vertical; font: 1.2rem/1.4 ui-monospace, Menlo, monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--at-layer-5); background: var(--at-layer-2, transparent); color: var(--at-text); }

/* ---------- Leaderboard (/leaderboard) ---------- */
.at-lb { max-width: 820px; margin: 0 auto; padding: 0 24px 48px; }
.at-lb .at-page-head { justify-content: center; }
.at-lb .at-tabs { justify-content: center; }
.at-lb-head .at-icon.big { color: var(--at-mana); }
.at-lb-bar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 4px; }
.at-lb-cats { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 2px; }
.at-segment-cats { height: 40px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 20px; }
.at-segment-cats::-webkit-scrollbar { display: none; }
.at-segment-cats > button { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 1.25rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; border-radius: 17px; }
.at-segment-cats > button + button { border-left: 0; }
.at-segment-cats > button .at-icon { width: 16px; height: 16px; color: inherit; }
.at-lb-cap { margin: 14px 0 0; font-size: 1.3rem; line-height: 1.8rem; color: var(--at-text-2); text-align: center; }

/* Podium — visual order 2 · 1 · 3 */
.at-lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 20px 0 12px; }
/* Near-black cards — medal tint is a whisper so FX stay the highlight */
.at-lb-pod {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 12px 18px; border-radius: 16px; background: #0f0f0f;
  text-align: center; color: inherit; text-decoration: none; min-width: 0;
  overflow: hidden; transition: background .15s, transform .15s;
}
.at-lb-pod:hover { background: #161616; }
/* No outer neon bloom — FX + medal carry rank color; hairline only so cards don’t look framed */
.at-lb-pod.gold {
  padding-top: 40px; padding-bottom: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, #f5b301 8%, #0a0a0a), #0a0a0a 70%);
  box-shadow: inset 0 0 0 1px rgba(245, 179, 1, .18);
}
.at-lb-pod.silver {
  background: linear-gradient(180deg, color-mix(in srgb, #b0b7c3 6%, #0a0a0a), #0a0a0a 70%);
  box-shadow: inset 0 0 0 1px rgba(176, 183, 195, .14);
}
.at-lb-pod.bronze {
  background: linear-gradient(180deg, color-mix(in srgb, #c77d44 6%, #0a0a0a), #0a0a0a 70%);
  box-shadow: inset 0 0 0 1px rgba(199, 125, 68, .16);
}
.at-lb-pod.gold:hover { background: linear-gradient(180deg, color-mix(in srgb, #f5b301 11%, #121212), #121212 70%); }
.at-lb-pod.silver:hover { background: linear-gradient(180deg, color-mix(in srgb, #b0b7c3 9%, #121212), #121212 70%); }
.at-lb-pod.bronze:hover { background: linear-gradient(180deg, color-mix(in srgb, #c77d44 9%, #121212), #121212 70%); }
/* FX only — no dark scrim (that was killing brightness) */
.at-lb-pod-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
}
/* Reduce mode / OS reduce — no animated podium FX (don't load / show) */
body.at-reduced-motion .at-lb-pod-fx { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .at-lb-pod-fx { display: none !important; }
}
/* #1 neon/sparks — full brightness, top of canvas */
.at-lb-pod.gold .at-lb-pod-fx img {
  position: absolute; left: 50%; top: 0; width: 140%; height: auto; min-height: 95%; max-width: none;
  transform: translateX(-50%); object-fit: cover; object-position: top center;
  opacity: 1; mix-blend-mode: normal; pointer-events: none;
}
/* #2 silver ink */
.at-lb-pod.silver .at-lb-pod-fx img {
  position: absolute; left: 50%; top: 0; width: 140%; height: auto; min-height: 90%; max-width: none;
  transform: translateX(-50%); object-fit: cover; object-position: top center;
  opacity: 1; mix-blend-mode: normal; pointer-events: none;
}
/* #3 petals — mid-fill, brighter than before (was .5 + soft-light + scrim) */
.at-lb-pod.bronze .at-lb-pod-fx img {
  position: absolute; left: 50%; top: 38%; width: 150%; height: 150%; max-width: none;
  transform: translate(-50%, -50%); object-fit: cover; object-position: center;
  opacity: .85; mix-blend-mode: soft-light; pointer-events: none;
}
.at-lb-pod.gold > .medal,
.at-lb-pod.silver > .medal,
.at-lb-pod.bronze > .medal { z-index: 2; }
.at-lb-pod.gold > .av,
.at-lb-pod.silver > .av,
.at-lb-pod.bronze > .av { z-index: 1; }
/* Keep medal glow on podium; soft “you” cue without blue ring fighting tier glow */
.at-lb-pod.me { outline: none; }
.at-lb-pod .medal { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; color: #111; background: #f5b301; }
.at-lb-pod.silver .medal { background: #b0b7c3; }
.at-lb-pod.bronze .medal { background: #c77d44; }
.at-lb-pod .pn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-size: 1.5rem; font-weight: 600; line-height: 2rem; }
.at-lb-pod .pn .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-lb-pod .pr { font-size: 1.2rem; color: var(--at-text-2); }
.at-lb-pod .ps { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.at-lb-pod.gold .ps, .at-lb-pod.gold .ps .at-icon { color: #f5b301; }
.at-lb-pod.silver .ps, .at-lb-pod.silver .ps .at-icon { color: #b0b7c3; }
.at-lb-pod.bronze .ps, .at-lb-pod.bronze .ps .at-icon { color: #c77d44; }
.at-lb-pod .ps small { font-size: 1.1rem; font-weight: 400; color: var(--at-text-2); margin-left: 2px; }

/* Ranked list 4+ */
.at-lb-list { margin: 4px 0 0; }
.at-lb-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.at-lb-row:hover { background: var(--at-chip); }
/* YouTube-style self row: soft wash only — no CTA outline */
.at-lb-row.me { background: var(--at-chip); }
.at-lb-row.me:hover { background: var(--at-chip-hover); }
.at-lb-row .rk { width: 28px; flex: none; text-align: center; font-size: 1.5rem; font-weight: 600; color: var(--at-text-2); font-variant-numeric: tabular-nums; }
.at-lb-row .who, .at-lb-you .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-lb-row .wn, .at-lb-you .wn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 1.5rem; font-weight: 500; line-height: 2.1rem; }
.at-lb-row .wn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.at-lb-row small, .at-lb-you small { font-size: 1.2rem; color: var(--at-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-lb-row .sc, .at-lb-you .sc { display: inline-flex; align-items: center; gap: 4px; font-size: 1.5rem; font-weight: 600; color: var(--at-mana); font-variant-numeric: tabular-nums; flex: none; }
.at-lb-you { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--at-chip); }
.at-lb-you small { white-space: normal; }
.at-lb-sk { height: 64px; border-radius: 12px; margin: 8px 0; }

/* Top comments — comment anatomy, not a dense scoreboard */
.at-lb-clist { margin: 12px 0 0; display: flex; flex-direction: column; gap: 0; }
.at-lb-cm { display: flex; align-items: flex-start; gap: 12px; padding: 16px 8px; border-bottom: 1px solid var(--at-layer-10); }
.at-lb-cm:last-child { border-bottom: 0; }
.at-lb-cm .rk { width: 28px; flex: none; text-align: center; font-size: 1.4rem; font-weight: 600; color: var(--at-text-2); font-variant-numeric: tabular-nums; padding-top: 8px; }
.at-lb-cm .av-link { flex: none; line-height: 0; }
.at-lb-cm .cb { flex: 1; min-width: 0; }
.at-lb-cm .ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.at-lb-cm .cu { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-size: 1.3rem; font-weight: 500; }
.at-lb-cm .dot { color: var(--at-text-2); font-size: 1.2rem; }
.at-lb-cm .ct { font-size: 1.2rem; color: var(--at-text-2); }
.at-lb-cm .ctx { margin: 0; font-size: 1.4rem; line-height: 2rem; color: var(--at-text); word-break: break-word; cursor: pointer; }
.at-lb-cm .cf { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.at-lb-votes { display: inline-flex; align-items: center; height: 32px; border-radius: 16px; background: var(--at-chip); overflow: hidden; }
.at-lb-cm .lk, .at-lb-cm .dk { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; font-size: 1.3rem; font-weight: 500; color: var(--at-text); }
.at-lb-cm .dk { border-left: 1px solid var(--at-layer-10); color: var(--at-text-2); }
.at-lb-cm .lk .at-icon, .at-lb-cm .dk .at-icon { width: 16px; height: 16px; }
.at-lb-replies { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 16px; background: var(--at-chip); font-size: 1.25rem; font-weight: 500; color: var(--at-text-2); }
.at-lb-replies .at-icon { width: 14px; height: 14px; }
.at-lb-cm .cw { display: inline-flex; align-items: center; gap: 6px; max-width: min(100%, 360px); font-size: 1.2rem; color: var(--at-text-2); text-decoration: none; margin-left: auto; }
.at-lb-cm .cw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-lb-cm .cw:hover { color: var(--at-cta); }

/* Top-3 podium: neutral chip + list + one-time snackbar */
.at-pod-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: 1.1rem; font-weight: 700; line-height: 1; color: #111; background: #f5b301; }
.at-pod-n.rank-2 { background: #b0b7c3; }
.at-pod-n.rank-3 { background: #c77d44; }
.at-ch-pod-row { display: flex; margin: 4px 0 0; }
.at-pod-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 6px; border: 0; border-radius: 14px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.25rem; font-weight: 500; cursor: pointer; transition: background .15s; }
.at-pod-chip:hover { background: var(--at-chip-hover); }
.at-pod-chip .more { color: var(--at-text-2); font-weight: 500; }
.at-pod-list { display: flex; flex-direction: column; }
.at-pod-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 4px; color: inherit; text-decoration: none; border-radius: 10px; }
.at-pod-row:hover { background: var(--at-chip); }
.at-pod-row .at-pod-n { width: 24px; height: 24px; font-size: 1.3rem; }
.at-pod-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-pod-row .tx b { font-size: 1.5rem; font-weight: 500; }
.at-pod-row .tx small { font-size: 1.2rem; color: var(--at-text-2); }
.at-pod-row > .at-icon { color: var(--at-text-2); }

/* Celebration card: medal-lit plaque drops in over the profile, confetti bursts from the avatar */
.at-pod-toast { --pc: #f5b301; --pc2: #ffe08a; position: fixed; left: 24px; bottom: 24px; z-index: 4000; display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(440px, calc(100vw - 24px)); padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--at-tooltip-bg, #212121); color: #fff; box-shadow: 0 4px 32px rgba(0, 0, 0, .5), 0 0 40px color-mix(in srgb, var(--pc) 22%, transparent); overflow: hidden; animation: atPodDrop .6s cubic-bezier(.2, 1.3, .3, 1) both, atPodOut .35s ease-in 6.4s forwards; }
.at-pod-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc); }
.at-pod-toast.rank-2 { --pc: #b0b7c3; --pc2: #eef1f6; }
.at-pod-toast.rank-3 { --pc: #c77d44; --pc2: #f0b98a; }
.at-pod-toast::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-100%); animation: atBannerSweep 1.1s ease-out .55s 1 forwards; }
.at-pod-toast .at-pod-n { position: relative; width: 44px; height: 44px; font-size: 2.2rem; font-weight: 800; background: radial-gradient(circle at 30% 25%, var(--pc2), var(--pc) 65%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 35%, transparent), 0 0 24px color-mix(in srgb, var(--pc) 70%, transparent); animation: atPodMedal .9s cubic-bezier(.2, 1.4, .3, 1) .15s both; }
.at-pod-toast .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-pod-toast .tx em { font-style: normal; font-size: 1.1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pc2); }
.at-pod-toast .tx b { font-size: 1.6rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pod-toast .tx small { font-size: 1.2rem; color: rgba(255, 255, 255, .65); }
.at-pod-toast .act { border: 0; background: #fff; color: #0f0f0f; font: inherit; font-size: 1.4rem; font-weight: 500; height: 36px; padding: 0 16px; border-radius: 18px; cursor: pointer; }
.at-pod-toast .act:hover { background: #e6e6e6; }
@keyframes atPodDrop { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes atPodOut { to { opacity: 0; transform: translateY(12px); } }
@keyframes atPodMedal { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.at-pod-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3999; pointer-events: none; }
.at-ch-avatar.podium-ring::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; border: 3px solid var(--pc, #f5b301); box-shadow: 0 0 22px var(--pc, #f5b301); animation: atPodRing 1.6s ease-out 2 both; }
@keyframes atPodRing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* Banner sheen (subtle, once) */
.at-banner.podium-flash { position: relative; overflow: hidden; }
.at-banner.podium-flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); animation: atBannerSweep 1.4s ease-out 1 forwards; }
@keyframes atBannerSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (max-width: 791px) {
  .at-pod-toast { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(var(--at-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .at-pod-toast, .at-pod-toast .at-pod-n { animation: none; }
  .at-pod-toast::after, .at-ch-avatar.podium-ring::before { display: none; }
  .at-banner.podium-flash::after { animation: none; display: none; }
}

@media (max-width: 791px) {
  .at-lb { padding: 0 12px 32px; }
  .at-lb-podium { gap: 8px; margin-top: 14px; }
  .at-lb-pod { padding: 22px 6px 14px; border-radius: 12px; }
  .at-lb-pod.gold { padding-top: 30px; }
  .at-lb-pod .pn { font-size: 1.3rem; }
  .at-lb-pod .ps { font-size: 1.4rem; flex-wrap: wrap; justify-content: center; }
  .at-lb-pod .ps small { display: none; }
  .at-lb-row { gap: 10px; padding: 8px 4px; }
  .at-lb-cm { padding: 14px 4px; gap: 10px; }
  .at-lb-cm .rk { width: 22px; }
  .at-lb-you { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
   YouTube frosted chrome (same tokens as yt #frosted-glass — no extra DOM)
   - PC (≥792px): masthead + chipbar → tint + blur(48px). Mobile header stays solid.
   - Mobile: edge-to-edge bottom nav → same frost.
   Off when: Reduced motion (html/body.at-reduced-motion — html is set before first paint),
   OS prefers-reduced-motion, or no backdrop-filter support → solid bars / edge-to-edge nav.
   ------------------------------------------------------------------------- */
:root {
  --at-frost: rgba(15, 15, 15, .8);   /* yt frosted-glass-desktop dark */
  --at-frost-mobile: rgba(15, 15, 15, .7);
  --at-dock-edge: rgba(255, 255, 255, .1);
  --at-dock-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
html[data-theme="blue"] {
  --at-frost: rgba(11, 18, 32, .8);
  --at-frost-mobile: rgba(11, 18, 32, .72);
  --at-dock-edge: rgba(140, 170, 255, .12);
  --at-dock-shadow: 0 6px 24px rgba(2, 6, 18, .5);
}
html[data-theme="light"] {
  --at-frost: rgba(255, 255, 255, .9);
  --at-frost-mobile: rgba(255, 255, 255, .9);
  --at-dock-edge: rgba(0, 0, 0, .08);
  --at-dock-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}
/* Desktop frost: one continuous masthead(+chips) layer — two stacked frosts drew a hard seam
   between header and tabs (YouTube doesn’t). When chips are present, extend the frost and paint
   a solid guide-width cover so the sidebar isn’t frosted under the chip row. */
@media (min-width: 792px) and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.at-reduced-motion) body:not(.at-reduced-motion)::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--at-masthead-h);
      z-index: 2018;
      pointer-events: none;
      background: var(--at-frost);
      -webkit-backdrop-filter: blur(48px);
      backdrop-filter: blur(48px);
    }
    /* ONE layer (no seam between header and chips), clipped to an "L": full width for the masthead,
       then only the content column for the chip row — the sidebar underneath stays visible/clickable. */
    html:not(.at-reduced-motion) body:not(.at-reduced-motion):has(.at-chipbar)::before {
      height: calc(var(--at-masthead-h) + var(--at-chips-h));
      --at-frost-gx: 0px;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--at-frost-gx) 100%, var(--at-frost-gx) var(--at-masthead-h), 0 var(--at-masthead-h));
      clip-path: polygon(0 0, 100% 0, 100% 100%, var(--at-frost-gx) 100%, var(--at-frost-gx) var(--at-masthead-h), 0 var(--at-masthead-h));
    }
    html:not(.at-reduced-motion) body[data-guide="full"]:not(.at-reduced-motion):has(.at-chipbar)::before { --at-frost-gx: var(--at-guide-w); }
    html:not(.at-reduced-motion) body[data-guide="mini"]:not(.at-reduced-motion):has(.at-chipbar)::before { --at-frost-gx: var(--at-mini-guide-w); }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-masthead,
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) .at-chipbar {
      background: transparent;
    }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) .at-chipbar {
      z-index: 2019; /* above frost, below masthead */
    }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) .at-chipbar .fade { display: none; } /* flat dark box over the frosted header */
  }
}
/* Phone bottom bar: same frost as before, painted on ::before so the bar itself stays position:fixed.
   The layer hangs below the icons to cover the home indicator, so a poster row cannot sit under the bar. */
@media (max-width: 791px) and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-bottomnav {
      background: transparent; box-shadow: none; border-top-color: transparent;
    }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-bottomnav::before {
      content: ""; position: absolute; z-index: 0; pointer-events: none;
      left: 0; right: 0; top: 0; bottom: -120px;
      background: var(--at-frost-mobile);
      border-top: 1px solid var(--at-layer-10);
      -webkit-backdrop-filter: blur(48px);
      backdrop-filter: blur(48px);
    }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion):has(#at-you.open) #at-bottomnav {
      background: var(--at-bg); border-top-color: var(--at-layer-10);
    }
    html:not(.at-reduced-motion) body:not(.at-reduced-motion):has(#at-you.open) #at-bottomnav::before { display: none; }
  }
}

/* Seasons sequence — mobile: align with the side list's 12px gutters, keep it a quiet one-line label */
@media (max-width: 791px) {
  .at-side-seq { margin: 8px 0 2px; padding: 0 12px; font-size: 1.3rem; color: var(--at-text-2); justify-content: flex-start; gap: 8px; }
  .at-side-seq span { font-size: 1.2rem; padding: 1px 8px; border-radius: 10px; background: var(--at-chip); color: var(--at-text); }
  .at-compact.has-idx { padding: 4px 12px 4px 4px; border-radius: 0; gap: 8px; }
  .at-compact .c-idx { width: 20px; }
  .at-compact.is-now { background: var(--at-layer-10, rgba(255,255,255,.1)); }
  .at-compact .at-thumb { width: 150px; }
  .at-side-sk .at-sk-rthumb { width: 150px; }
  .at-compact .c-now { font-size: 1rem; padding: 2px 5px; }
}

/* Seasons "Now watching": softer row highlight (strip stays at the bottom of the thumbnail) */
.at-compact.is-now { background: rgba(255, 255, 255, .06); }
html[data-theme="light"] .at-compact.is-now { background: rgba(0, 0, 0, .05); }
@media (max-width: 791px) {
  .at-compact.is-now { background: rgba(255, 255, 255, .06); }
  html[data-theme="light"] .at-compact.is-now { background: rgba(0, 0, 0, .05); }
}

/* Seasons header: label left, "3 / 5" pill pushed to the right edge (matches the list's 12px gutters on mobile) */
.at-side-seq { justify-content: space-between; }
.at-side-seq span { margin-left: auto; padding: 2px 10px; border-radius: 12px; background: var(--at-chip); color: var(--at-text); font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 791px) {
  .at-side-seq { justify-content: space-between; padding: 0 12px; margin: 10px 0 4px; font-size: 1.5rem; font-weight: 500; color: var(--at-text); }
  .at-side-seq span { margin-left: auto; padding: 2px 10px; }
}

/* =========================================================================
   Motion layer — one set of tokens, subtle + consistent (buttons, chips, tabs, toggles, menus, modals, sidebar).
   Only transform / opacity / colors animate (GPU-cheap). Reduced motion: the global
   body.at-reduced-motion rule (durations -> .001s) plus the media query below switch all of it off.
   ========================================================================= */
:root {
  --at-ease: cubic-bezier(.2, .8, .2, 1);          /* decelerate: things settle into place */
  --at-ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* tiny overshoot for toggles */
  --at-t-fast: .12s;
  --at-t: .18s;
  --at-t-slow: .26s;
}

/* Hover / color fades instead of instant swaps */
.at-btn, .at-chip, .at-iconbtn, .at-segment > button, .at-menu-item, .at-guide-item, .at-tab, .at-toggle, .at-pill-badge {
  transition: background-color var(--at-t) var(--at-ease), color var(--at-t) var(--at-ease), border-color var(--at-t) var(--at-ease),
              opacity var(--at-t) var(--at-ease), filter var(--at-t) var(--at-ease), transform var(--at-t-fast) var(--at-ease), box-shadow var(--at-t) var(--at-ease);
}

.at-guide-item .at-icon, .at-menu-item .at-icon, .at-iconbtn .at-icon, .at-btn .at-icon { transition: transform var(--at-t) var(--at-ease), color var(--at-t) var(--at-ease); }

/* Press feedback (tactile, not bouncy) */
.at-btn:active:not([disabled]), .at-chip:active, .at-segment > button:active { transform: scale(.96); }
.at-iconbtn:active { transform: scale(.9); }
.at-guide-item:active, .at-menu-item:active { transform: scale(.985); }
@media (hover: hover) {
  .at-iconbtn:hover .at-icon { transform: scale(1.06); }
  .at-guide-item:hover .at-icon { transform: scale(1.08); }
  .at-btn.primary:hover, .at-btn.cta:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
}

/* Chip selection: soft color cross-fade + a tiny settle when it becomes active */
.at-chip.active, .at-chip[aria-pressed="true"] { animation: at-sel .22s var(--at-ease); }
@keyframes at-sel { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* Tabs: underline grows from the center */
.at-tab.active::after { transform-origin: 50% 50%; animation: at-underline .24s var(--at-ease); }
@keyframes at-underline { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }

/* Sidebar active item: highlight eases in */
.at-guide-item.active { animation: at-sel-soft .22s var(--at-ease); }
@keyframes at-sel-soft { from { background-color: transparent; } }

/* Toggle switches: thumb glides (transform), track fades, press stretches the thumb like a native switch */
.at-switch, .at-toggle .sw { transition: background-color var(--at-t) var(--at-ease); }
.at-switch::after, .at-toggle .sw::after {
  transition: left var(--at-t-slow) var(--at-ease-spring), background-color var(--at-t) var(--at-ease), box-shadow var(--at-t) var(--at-ease), width var(--at-t-fast) var(--at-ease);
}
.at-switch:active::after, .at-toggle:active .sw::after { width: 24px; }
.at-switch.on:active::after { left: 14px; }
.at-toggle.on:active .sw::after { left: 6px; }
.at-switch.on::after, .at-toggle.on .sw::after { box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 6px rgba(62, 166, 255, .12); }

/* Menus / popovers: fade + small scale from top, popups rise */
.at-menu.open, .at-suggest.open { animation: at-pop-in var(--at-t) var(--at-ease); transform-origin: top right; }
@keyframes at-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.at-popup.open { animation: at-pop-in var(--at-t) var(--at-ease); }

/* Modals: dim fades, card rises */
.at-modal-scrim.open { animation: at-fade-in var(--at-t) ease-out; }
.at-modal-scrim.open .at-modal { animation: at-modal-in var(--at-t-slow) var(--at-ease); }
@keyframes at-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes at-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.at-sheet-scrim.open, .at-lights-scrim.open { animation: at-fade-in var(--at-t) ease-out; }

/* Sheets use the same curve */

/* Reduced motion: no keyframes, no press/hover movement */
@media (prefers-reduced-motion: reduce) {
  .at-chip.active, .at-chip[aria-pressed="true"], .at-tab.active::after, .at-guide-item.active,
  .at-menu.open, .at-suggest.open, .at-popup.open, .at-modal-scrim.open, .at-modal-scrim.open .at-modal,
  .at-sheet-scrim.open, .at-lights-scrim.open, .at-sheet.open, .at-sheet.closing, .at-sheet-menu.open .at-sheet-menu-panel,
  .at-auth-dialog.at-auth-fwd > .at-modal-head > span, .at-auth-dialog.at-auth-fwd > .at-modal-body,
  .at-auth-dialog.at-auth-back > .at-modal-head > span, .at-auth-dialog.at-auth-back > .at-modal-body { animation: none !important; }
  .at-modal.at-auth-swap { transition: none !important; }
  .at-sheet.open, .at-sheet-menu.open .at-sheet-menu-panel { transform: none; }
  .at-sheet.closing { transform: translateY(100%); }
  .at-btn:active, .at-chip:active, .at-iconbtn:active, .at-segment > button:active, .at-guide-item:active, .at-menu-item:active { transform: none !important; }
}
body.at-reduced-motion .at-chip.active, body.at-reduced-motion .at-chip[aria-pressed="true"], body.at-reduced-motion .at-tab.active::after,
body.at-reduced-motion .at-guide-item.active, body.at-reduced-motion .at-menu.open, body.at-reduced-motion .at-suggest.open,
body.at-reduced-motion .at-popup.open, body.at-reduced-motion .at-modal-scrim.open, body.at-reduced-motion .at-modal-scrim.open .at-modal,
body.at-reduced-motion .at-sheet-scrim.open, body.at-reduced-motion .at-lights-scrim.open,
body.at-reduced-motion .at-sheet.open, body.at-reduced-motion .at-sheet.closing,
body.at-reduced-motion .at-sheet-menu.open .at-sheet-menu-panel,
html.at-reduced-motion .at-auth-dialog.at-auth-fwd > .at-modal-head > span, html.at-reduced-motion .at-auth-dialog.at-auth-fwd > .at-modal-body,
html.at-reduced-motion .at-auth-dialog.at-auth-back > .at-modal-head > span, html.at-reduced-motion .at-auth-dialog.at-auth-back > .at-modal-body,
body.at-reduced-motion .at-auth-dialog.at-auth-fwd > .at-modal-head > span, body.at-reduced-motion .at-auth-dialog.at-auth-fwd > .at-modal-body,
body.at-reduced-motion .at-auth-dialog.at-auth-back > .at-modal-head > span, body.at-reduced-motion .at-auth-dialog.at-auth-back > .at-modal-body { animation: none !important; }
html.at-reduced-motion .at-modal.at-auth-swap, body.at-reduced-motion .at-modal.at-auth-swap { transition: none !important; }
body.at-reduced-motion .at-sheet.open, body.at-reduced-motion .at-sheet-menu.open .at-sheet-menu-panel { transform: none; }
body.at-reduced-motion .at-sheet.closing { transform: translateY(100%); }
body.at-reduced-motion .at-btn:active, body.at-reduced-motion .at-chip:active, body.at-reduced-motion .at-iconbtn:active,
body.at-reduced-motion .at-segment > button:active, body.at-reduced-motion .at-guide-item:active, body.at-reduced-motion .at-menu-item:active { transform: none !important; }

/* YouTube-mobile like / dislike — bounce the thumb icon only (not the whole segment pill). */
#at-vote > button, .at-iconbtn[data-pvote] { position: relative; overflow: visible; }
#at-vote > button:active { transform: none; } /* keep press-scale on other segments; vote pill stays still */
.at-vote-pop > .at-icon { animation: at-vote-bounce .48s cubic-bezier(.34, 1.55, .64, 1); transform-origin: 50% 70%; will-change: transform; display: block; }
#at-vote > button.at-vote-pop[data-act="dislike"] > .at-icon,
.at-iconbtn.at-vote-pop[data-pvote="-1"] > .at-icon { animation-name: at-vote-bounce-down; }
@keyframes at-vote-bounce {
  0% { transform: scale(1) rotate(0deg); }
  28% { transform: scale(1.42) rotate(-14deg); }
  55% { transform: scale(0.88) rotate(8deg); }
  78% { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes at-vote-bounce-down {
  0% { transform: scale(1) rotate(0deg); }
  28% { transform: scale(1.42) rotate(14deg); }
  55% { transform: scale(0.88) rotate(-8deg); }
  78% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.at-vote-burst::before, .at-vote-burst::after {
  content: ""; position: absolute; left: 18px; top: 10px; width: 5px; height: 5px; border-radius: 50%;
  pointer-events: none; z-index: 2; animation: at-vote-burst .55s ease-out forwards;
}
.at-vote-burst::before {
  box-shadow:
    14px -16px 0 #ff5252, -16px -12px 0 #ff9800, 18px 6px 0 #ffeb3b, -12px 14px 0 #69f0ae,
    4px -20px 0 #40c4ff, -18px 4px 0 #e040fb, 20px -8px 0 #ff4081, 2px 18px 0 #7c4dff,
    22px 10px 0 #ff80ab, -20px -18px 0 #84ffff;
}
.at-vote-burst::after {
  width: 3px; height: 9px; border-radius: 1px; left: 20px; top: 8px; animation-duration: .48s;
  box-shadow:
    12px -10px 0 #ff8a80, -14px -16px 0 #80d8ff, 16px 12px 0 #b9f6ca, -10px 10px 0 #ffe57f,
    8px 16px 0 #cea7ff, -6px -20px 0 #ffd180;
}
@keyframes at-vote-burst {
  0% { opacity: 1; transform: scale(.25); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
  .at-vote-pop > .at-icon { animation: none !important; }
  .at-vote-burst::before, .at-vote-burst::after { display: none !important; }
}
body.at-reduced-motion .at-vote-pop > .at-icon { animation: none !important; }
body.at-reduced-motion .at-vote-burst::before, body.at-reduced-motion .at-vote-burst::after { display: none !important; }

/* Episode grid status: ✓ watched, F filler, thin bar partial, accent tile playing. No corner status dots. */
.at-epgrid a::after { display: none !important; }
.at-epgrid a.filler:not(.active) { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); }
.at-epgrid a.filler.watched:not(.active) { background: rgba(63, 185, 80, .10); border-color: rgba(245, 158, 11, .35); }
.at-epgrid a.dub::before { top: 0; bottom: auto; }
.at-epgrid a .fl {
  position: absolute; top: 3px; right: 4px; z-index: 1; pointer-events: none;
  font-size: 0.9rem; font-weight: 700; line-height: 1; letter-spacing: 0;
  color: #f59e0b; opacity: .95;
}
.at-epgrid a .ck { position: absolute; right: 4px; bottom: 3px; display: inline-flex; color: #3fb950; line-height: 0; pointer-events: none; }
.at-epgrid a .ck .at-icon { width: 12px; height: 12px; }
.at-epgrid a .gp { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--at-cta); border-radius: 0 2px 2px 0; pointer-events: none; }
.at-panel-foot .lg-ck { color: var(--at-text-2); }
.at-panel-foot .lg-ck .at-icon { width: 14px; height: 14px; color: #3fb950; }
.at-panel-foot .lg-fl .fl {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 4px; font-size: 0.95rem;
  background: rgba(245, 158, 11, .18); color: #f59e0b;
}

/* =========================================================================
   Profile level + rank sheet (YouTube-flat white LV / XP — Volt paints --rk)
   ========================================================================= */
.at-lv { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 46px; height: 53px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); transition: transform .15s; z-index: 3; }
.at-lv:hover { transform: translateX(-50%) scale(1.06); }
.at-lv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.at-lv polygon { fill: #121212; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.at-lv .lv { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; }
.at-lv .lv small { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.at-lv .lv b { font-size: 1.7rem; font-weight: 800; margin-top: 1px; }
.at-xp { display: block; width: 100%; max-width: 360px; margin: 10px 0 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.at-xp .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.at-xp .rk { color: #fff; }
.at-xp .v { color: var(--at-text-2); font-weight: 500; letter-spacing: 0; text-transform: none; }
.at-xp .v b { color: var(--at-text); font-weight: 600; }
.at-xp .bar { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--at-layer-10); overflow: hidden; }
.at-xp .bar i { display: block; height: 100%; border-radius: 3px; background: #fff; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.at-xp:hover .bar i { filter: brightness(1.08); }
@media (max-width: 791px) {
  .at-ch-avatar { margin-bottom: 30px; }
  .at-lv { width: 36px; height: 41px; bottom: -26px; } /* sits just under the dp (~15px overlap with the ring) so the photo stays mostly clear */
  .at-lv .lv small { font-size: .65rem; }
  .at-lv .lv b { font-size: 1.3rem; }
  .at-xp { max-width: none; }
}

.at-rkh { padding: 0 0 4px; }
.at-rkh .t { font-size: 2.4rem; font-weight: 700; line-height: 3.2rem; color: var(--at-text); }
.at-rkh .s { font-size: 1.4rem; line-height: 2rem; color: var(--at-text-2); margin-top: 2px; }
.at-rkh .bar { height: 4px; border-radius: 2px; background: var(--at-layer-10); overflow: hidden; margin: 14px 0 8px; }
.at-rkh .bar i { display: block; height: 100%; background: var(--at-text); border-radius: 2px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.at-rkh .c { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); }
.at-rk-h { font-size: 1.4rem; margin: 20px 0 4px; font-weight: 500; color: var(--at-text); }
.at-rkl { list-style: none; margin: 0 -8px; padding: 0; }
.at-rkl li { display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px; border-radius: 8px; }
.at-rkl .ck { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--at-text); }
.at-rkl .ck .at-icon { width: 24px; height: 24px; }
.at-rkl .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-rkl .tx b { font-size: 1.4rem; font-weight: 400; line-height: 2rem; color: var(--at-text); }
.at-rkl .tx small { font-size: 1.2rem; line-height: 1.8rem; color: var(--at-text-2); }
.at-rkl .mn { flex: none; font-size: 1.3rem; color: var(--at-text-2); }
.at-rkl li.cur { background: var(--at-layer-10); }
.at-rkl li.cur .tx b { font-weight: 600; }
.at-rkl li.lock .tx b { color: var(--at-text-2); }
.at-rkl li.lock .tx small, .at-rkl li.lock .mn { color: var(--at-text-3); }
.at-rkl.compact li { min-height: 40px; padding: 4px 8px; }
.at-rkl.earn li { min-height: 40px; padding: 4px 8px; }

/* ---------- Mana Shop polish: cards, purchase counts, YouTube-style preview / confirm modal ---------- */
.at-shop-item { position: relative; height: 100%; gap: 6px; padding: 14px 12px 12px; transition: border-color .15s, background .15s, transform .15s; }
.at-shop-item > .at-btn:not(.text) { margin-top: auto; flex: none; height: 36px; }
.at-shop-item:hover { border-color: var(--at-layer-20, rgba(255,255,255,.2)); background: var(--at-chip); }
.at-shop-item.owned { border-color: rgba(74, 222, 128, .35); }
.at-sh-stage { display: flex; justify-content: center; align-items: center; width: 100%; padding: 14px 0 8px; border-radius: 10px; cursor: pointer;
  background: var(--at-chip); }
.at-sh-av { position: relative; display: block; width: 100%; height: 100%; }
.at-sh-av .at-av-clip { position: absolute; inset: 8.5%; border-radius: 50%; overflow: hidden; background: var(--at-bg-raised); }
.at-sh-av .at-av-clip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.at-shop-item .prev .at-sh-av .at-deco-img, .at-sh-av .at-deco-img { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: contain; pointer-events: none; z-index: 2; }
.at-shop-item .prev { width: 104px; height: 104px; border-radius: 0; }
.at-shop-item .prev img { border-radius: 0; }
.at-shop-item .prev .at-av-clip img { border-radius: 50%; }
.at-shop-item .prev.title-prev { width: 100%; height: 104px; display: flex; align-items: center; justify-content: center; }
.at-shop-item .prev.title-prev .at-user-title { font-size: 1.4rem; height: 28px; padding: 0 12px; }
.at-sh-buyers { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 1.1rem; font-weight: 600; color: var(--at-text-2); background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); }
.at-sh-buyers .at-icon { width: 13px; height: 13px; }
.at-sh-ribbon { position: absolute; top: 10px; right: 10px; z-index: 3; height: 22px; line-height: 22px; padding: 0 9px; border-radius: 11px; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; background: var(--at-mana); color: #0f0f0f; }
.at-shop-item .pr.owned { color: #4ade80; }
.at-shop-item .at-btn.text[data-preview] { height: 28px; font-size: 1.2rem; }
@media (max-width: 720px) { .at-shop-item .prev { width: 88px; height: 88px; } .at-shop-item .prev.title-prev { height: 88px; } }

.at-modal:has(.at-sm) { max-width: 760px; border-radius: 18px; }
.at-sm { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 28px; align-items: start; padding-top: 4px; }
.at-sm-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 300px; padding: 28px 16px 20px; border-radius: 16px; overflow: hidden;
  background: var(--at-chip); border: 1px solid var(--at-layer-10); }
.at-sm-stage .at-sh-ribbon { top: 12px; right: 12px; }
.at-sm-av { display: block; width: 190px; height: 190px; }
.at-sm-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 1.8rem; font-weight: 700; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.at-sm-info { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.at-sm-kind { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 1.2rem; font-weight: 600; color: var(--at-text-2); padding: 3px 10px 3px 8px; border-radius: 12px; background: var(--at-chip); }
.at-sm-kind .at-icon { width: 14px; height: 14px; }
.at-sm-t { margin: 0; font-size: 2.4rem; line-height: 3rem; font-weight: 700; overflow-wrap: anywhere; }
.at-sm-d { margin: 0; color: var(--at-text-2); font-size: 1.4rem; line-height: 2rem; }
.at-sm-rows { margin-top: 6px; border: 1px solid var(--at-layer-10); border-radius: 14px; padding: 6px 16px; background: var(--at-chip); }
.at-sm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1.4rem; }
.at-sm-row .at-icon { width: 20px; height: 20px; color: var(--at-text-2); flex: none; }
.at-sm-row .l { flex: 1; color: var(--at-text-2); }
.at-sm-row .v { font-weight: 600; }
.at-sm-row .v.mana { color: var(--at-mana); }
.at-sm-row .v.good { color: #4ade80; }
.at-sm-row .v.bad { color: #f87171; }
.at-sm-sep { height: 1px; background: var(--at-layer-10); margin: 2px 0; }
.at-modal-foot .at-btn.cta[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
  .at-sm { grid-template-columns: 1fr; gap: 16px; }
  .at-sm-stage { min-height: 0; padding: 20px 12px 16px; }
  .at-sm-av { width: 150px; height: 150px; }
  .at-sm-t { font-size: 2rem; line-height: 2.6rem; }
}

.at-shop-top { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.at-shop-sw { position: relative; flex: none; }
.at-shop-sbtn { position: relative; }
.at-shop-sbtn.has-q::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--at-cta); }
.at-shop-sw.open { display: flex; align-items: center; gap: 4px; }
.at-shop-pill { display: flex; align-items: center; gap: 8px; width: 280px; height: 36px; padding: 0 6px 0 12px; border-radius: 18px; background: var(--at-chip); color: var(--at-text-2); box-shadow: inset 0 0 0 1px var(--at-cta); animation: at-fade-in var(--at-t) ease-out; }
.at-shop-pill > .at-icon { width: 20px; height: 20px; flex: none; }
.at-shop-pill input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--at-text); font-size: 1.4rem; }
.at-shop-sdone { height: 32px; padding: 0 10px; font-size: 1.3rem; }
.at-sm-stage .at-sm-name .at-user-title { font-size: 1.3rem; height: 24px; }
@media (max-width: 720px) {
  .at-shop-bar .at-shop-top { width: 100%; min-width: 0; gap: 8px; }
  .at-shop-bar .at-shop-top .shop-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 0; width: auto; min-width: 0; max-width: none; overflow: hidden; }
  .at-shop-bar .at-shop-top .shop-seg > button { min-width: 0; justify-content: center; }
  .at-shop-bar .at-shop-top .shop-seg > button + button { padding: 0 4px; }
  .at-shop-bar .at-shop-top .at-shop-sw { flex: none; }
  /* Search open: tabs collapse to icons so the field can grow */
  .at-shop-top.searching { gap: 6px; }
  .at-shop-top.searching .shop-seg { flex: none; width: auto; grid-template-columns: repeat(2, 36px); height: 36px; }
  .at-shop-top.searching .shop-seg > button { padding: 0; gap: 0; }
  .at-shop-top.searching .shop-seg > button + button { padding: 0; border-left: 0; }
  .at-shop-top.searching .shop-seg > button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .at-shop-top.searching .shop-seg > button .at-icon { width: 20px; height: 20px; }
  .at-shop-top.searching .at-shop-sw { flex: 1 1 0; min-width: 0; }
  .at-shop-top.searching .at-shop-pill { flex: 1; width: auto; min-width: 0; }
  .at-shop-top.searching .at-shop-sdone { padding: 0 8px; flex: none; }
}

.at-shop-cap { margin: 8px 12px 0; font-size: 1.2rem; color: var(--at-text-2); }

.at-shop-bar .shop-cats .at-chip .n { opacity: .65; font-weight: 500; margin-left: 2px; }

/* =========================================================================
   THEME: Volt — Re:ANIME-inspired HUD language (pure black, chamfers, hatch,
   skewed seams, glass menus) with our own accent: electric cyan (not their lime).
   Scoped to html[data-theme="volt"]; appended at EOF. Never touches dark/blue/light.
   ========================================================================= */
html[data-theme="volt"] {
  color-scheme: dark;
  /* Own accent — cyan arc, not Re:ANIME lime (oklch ~130). */
  --rv-primary: #22d3ee;
  --rv-primary: oklch(78% .155 210);
  --rv-primary-fg: #021018;
  --rv-primary-10: color-mix(in oklch, var(--rv-primary) 10%, transparent);
  --rv-primary-14: color-mix(in oklch, var(--rv-primary) 14%, transparent);
  --rv-primary-28: color-mix(in oklch, var(--rv-primary) 28%, transparent);
  --rv-primary-40: color-mix(in oklch, var(--rv-primary) 40%, transparent);
  --rv-primary-55: color-mix(in oklch, var(--rv-primary) 55%, transparent);
  --rv-glow: 0 0 30px color-mix(in oklch, var(--rv-primary) 50%, transparent);
  --rv-gold: #fbbf24;
  --rv-card: #0d0e15;
  --rv-card-2: #0a0b10;
  --rv-line: rgba(255, 255, 255, .06);
  --rv-line-2: rgba(255, 255, 255, .1);
  --rv-hatch: repeating-linear-gradient(-82deg, rgba(255, 255, 255, .008) 0 1px, transparent 1px 26px);
  --rv-hatch-2: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px);
  --rv-dots: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  --rv-ruler: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 7px);
  --rv-chamfer-4: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  --rv-chamfer-6: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --rv-chamfer-8: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --rv-chamfer-10: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --rv-chamfer-12: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --rv-para: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --rv-ease: cubic-bezier(.16, 1, .3, 1);

  --at-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --at-bg: #000000;
  --at-frost: rgba(0, 0, 0, .8);
  --at-frost-mobile: rgba(0, 0, 0, .7);
  --at-bg-raised: #0a0a0a;
  --at-bg-menu: #0a0a0a;
  --at-bg-input: #111111;
  --at-bg-search-btn: #0a0a0a;
  --at-text: #ffffff;
  --at-text-2: #a1a1aa;
  --at-text-3: #6b7280;
  --at-chip: rgba(255, 255, 255, .06);
  --at-chip-hover: rgba(255, 255, 255, .1);
  --at-layer-10: rgba(255, 255, 255, .1);
  --at-layer-5: rgba(255, 255, 255, .05);
  --at-hover: rgba(255, 255, 255, .06);
  --at-border: rgba(255, 255, 255, .1);
  --at-cta: var(--rv-primary);
  --at-brand-btn: var(--rv-primary);
  --at-brand-btn-text: var(--rv-primary-fg);
  --at-scrim: rgba(6, 7, 10, .9);
  --at-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9), inset 0 1px rgba(255, 255, 255, .04);
  --at-badge-bg: rgba(0, 0, 0, .8);
  --at-progress-bg: rgba(255, 255, 255, .3);
  --at-tooltip-bg: #141414;
  --at-live-chat-bg: #0a0a0a;
  --at-mana: var(--rv-gold);
  --at-red: var(--rv-primary);
}
html[data-theme="volt"] body { font-family: var(--at-font); -webkit-font-smoothing: antialiased; }
html[data-theme="volt"][data-volt-glass="1"] .at-menu,
html[data-theme="volt"][data-volt-glass="1"] .at-sheet,
html[data-theme="volt"][data-volt-glass="1"] #at-guide,
html[data-theme="volt"][data-volt-glass="1"] .at-suggest {
  background: color-mix(in srgb, var(--at-bg-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
html[data-theme="volt"] ::selection { background: var(--rv-primary); color: #000; }
html[data-theme="volt"] { scrollbar-width: thin; scrollbar-color: var(--rv-primary) transparent; }
html[data-theme="volt"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="volt"] ::-webkit-scrollbar-thumb { background: var(--rv-primary); border-radius: 4px; }
html[data-theme="volt"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--rv-primary) 70%, transparent); }
html[data-theme="volt"] #at-guide:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }

/* ---- Masthead / search ---------------------------------------------------- */
html[data-theme="volt"] #at-masthead {
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%);
  border-bottom: 1px solid var(--rv-line);
}
html[data-theme="volt"] .at-logo-mark {
  background: var(--rv-primary); border-radius: 0; transform: skewX(-12deg);
  clip-path: var(--rv-chamfer-4);
}
html[data-theme="volt"] .at-logo-mark::after { transform: translate(-50%, -50%) skewX(12deg); }
html[data-theme="volt"] .at-logo-text { font-weight: 900; font-style: italic; letter-spacing: -.05em; padding-left: 6px; }
html[data-theme="volt"] .at-logo-text sup { color: var(--rv-primary); font-weight: 800; font-style: normal; letter-spacing: .1em; }
html[data-theme="blue"] .at-logo-mark { background: var(--at-cta); }
html[data-theme="volt"] .at-search-box {
  border: 1px solid rgba(255, 255, 255, .2); border-right: 0; border-radius: 12px 0 0 12px; background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color .3s, background .3s;
}
html[data-theme="volt"] .at-search-box:hover { border-color: rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .6); }
html[data-theme="volt"] .at-search-box:focus-within { border-color: var(--rv-primary-55); background: rgba(0, 0, 0, .7); }
html[data-theme="volt"] .at-search-box input::placeholder { color: #9ca3af; }
html[data-theme="volt"] .at-search-btn { border: 1px solid rgba(255, 255, 255, .2); border-left: 0; border-radius: 0 12px 12px 0; background: rgba(0, 0, 0, .4); transition: background .3s, color .3s; }
html[data-theme="volt"] .at-search-btn:hover { background: var(--rv-primary-10); color: var(--rv-primary); }
html[data-theme="volt"] .at-search-box:focus-within + .at-search-btn { border-color: var(--rv-primary-55); }
html[data-theme="volt"] .at-search-random { border-radius: 8px; background: transparent; color: #9ca3af; }
html[data-theme="volt"] .at-search-random:hover { background: var(--rv-primary-10); color: var(--rv-primary); }
/* Mobile msearch: style the form pill, not the bare input (avoids double box) */
html[data-theme="volt"] #at-msearch form {
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
}
html[data-theme="volt"] #at-msearch input { background: transparent; border: 0; border-radius: 0; }
html[data-theme="volt"] #at-msearch input:focus { border: 0; outline: 0; }
html[data-theme="volt"] .at-suggest { background: rgba(8, 8, 10, .92); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); border: 1px solid var(--rv-line-2); border-radius: 0; clip-path: var(--rv-chamfer-12); box-shadow: none; }
html[data-theme="volt"] .at-suggest-item:hover, html[data-theme="volt"] .at-suggest-item.active { background: var(--rv-primary-10); }
html[data-theme="volt"] .at-suggest-item.more { color: var(--rv-primary); font-weight: 700; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }

/* Mobile search results: solid chrome so sticky chips don’t ghost under translucent masthead */
@media (max-width: 791px) {
  html[data-theme="volt"] body[data-page="search"] #at-masthead {
    background: #050609;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme="volt"] body[data-page="search"] .at-filterbar {
    background: var(--at-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 2015;
  }
  /* Undo desktop search-box chrome (border-right:0 + radius) — restore mobile pill */
  html[data-theme="volt"] body[data-page="search"] .at-search-box {
    border: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme="volt"] body[data-page="search"] .at-search-box:hover,
  html[data-theme="volt"] body[data-page="search"] .at-search-box:focus-within {
    border-color: transparent;
    background: rgba(255, 255, 255, .12);
  }
  html[data-theme="volt"] .at-suggest {
    clip-path: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ---- Icon buttons / avatar / badge count ---------------------------------- */
html[data-theme="volt"] .at-iconbtn { color: #9ca3af; border-radius: 50%; transition: color .3s, background .3s; }
html[data-theme="volt"] .at-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
html[data-theme="volt"] .at-mh-end .at-iconbtn:hover { background: var(--rv-primary-10); color: var(--rv-primary); }
html[data-theme="volt"] .at-avatar-btn { box-shadow: 0 0 0 2px #0c0d12, 0 0 0 3px rgba(255, 255, 255, .12); }
html[data-theme="volt"] .at-badge-count {
  border-radius: 0; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  background: var(--rv-primary); color: var(--rv-primary-fg); font-weight: 800; font-size: .9rem; border: 0; min-width: 15px; height: 15px; line-height: 15px;
}

/* ---- Buttons -------------------------------------------------------------- */
html[data-theme="volt"] .at-btn {
  border-radius: 0; clip-path: var(--rv-chamfer-6); font-weight: 600;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  transition: background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s, opacity .3s;
}
html[data-theme="volt"] .at-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
html[data-theme="volt"] .at-btn.primary, html[data-theme="volt"] .at-btn.cta {
  background: var(--rv-primary); color: var(--rv-primary-fg); border-color: transparent;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 1.25rem;
}
html[data-theme="volt"] .at-btn.primary:hover, html[data-theme="volt"] .at-btn.cta:hover {
  background: color-mix(in oklch, var(--rv-primary) 90%, transparent); opacity: 1; box-shadow: var(--rv-glow);
}
html[data-theme="volt"] .at-btn.primary .at-icon, html[data-theme="volt"] .at-btn.cta .at-icon { color: inherit; }
html[data-theme="volt"] .at-btn.ghost, html[data-theme="volt"] .at-btn.text, html[data-theme="volt"] .at-btn.text-cta { background: transparent; border-color: transparent; clip-path: none; }
html[data-theme="volt"] .at-btn.ghost:hover, html[data-theme="volt"] .at-btn.text:hover { background: rgba(255, 255, 255, .06); border-color: transparent; }
html[data-theme="volt"] .at-btn.text-cta { color: var(--rv-primary); }
html[data-theme="volt"] .at-btn.text-cta:hover { background: var(--rv-primary-10); }
html[data-theme="volt"] .at-btn.outline { background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .2); }
html[data-theme="volt"] .at-btn.outline:hover { background: rgba(0, 0, 0, .8); border-color: var(--rv-primary-55); }
html[data-theme="volt"] .at-btn.lg { border-radius: 0; font-size: 1.4rem; }
html[data-theme="volt"] .at-btn.lg.primary, html[data-theme="volt"] .at-btn.lg.cta { font-size: 1.3rem; letter-spacing: .12em; }
html[data-theme="volt"] .at-btn.icon-only { clip-path: none; border-radius: 8px; }
html[data-theme="volt"] .at-btn[disabled] { opacity: .4; box-shadow: none; }
html[data-theme="volt"] .at-modal-foot .at-btn.cta:hover { opacity: 1; }
html[data-theme="volt"] .at-composer .cf-actions .at-btn.cta[disabled],
html[data-theme="volt"] .at-composer .cf-actions .at-btn.cta[disabled]:hover { background: rgba(255, 255, 255, .08); color: #5e626b; }

/* hero buttons: Re:ANIME parallelogram (skew -12deg) with un-skewed label */
html[data-theme="volt"] .at-hero-btns { gap: 12px; }
html[data-theme="volt"] .at-hero-btns .at-btn {
  position: relative; isolation: isolate; border-radius: 0; clip-path: none; border: 0; overflow: visible;
  background: transparent !important; color: #fff; padding: 0 32px; height: 48px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .3s, filter .3s; box-shadow: none !important;
}
html[data-theme="volt"] .at-hero-btns .at-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg);
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .2); transition: background .3s, border-color .3s, box-shadow .3s;
}
html[data-theme="volt"] .at-hero-btns .at-btn.primary { color: var(--rv-primary-fg); }
html[data-theme="volt"] .at-hero-btns .at-btn.primary::before { background: var(--rv-primary); border-color: transparent; }
html[data-theme="volt"] .at-hero-btns .at-btn:hover { transform: scale(1.05); }
html[data-theme="volt"] .at-hero-btns .at-btn.primary:hover::before { background: color-mix(in oklch, var(--rv-primary) 90%, transparent); box-shadow: var(--rv-glow); }
html[data-theme="volt"] .at-hero-btns .at-btn.glass:hover::before { background: rgba(0, 0, 0, .8); border-color: var(--rv-primary-55); }
html[data-theme="volt"] .at-hero-btns .at-btn .at-icon { width: 20px; height: 20px; }

/* ---- Chips / segments / pills ------------------------------------------- */
html[data-theme="volt"] .at-chip {
  border-radius: 0; clip-path: var(--rv-chamfer-6); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600; transition: background .2s, color .2s, border-color .2s;
}
html[data-theme="volt"] .at-chip:hover { background: rgba(255, 255, 255, .1); color: #fff; }
html[data-theme="volt"] .at-chip.active, html[data-theme="volt"] .at-chip[aria-pressed="true"] {
  background: var(--rv-primary); color: var(--rv-primary-fg); border-color: transparent; font-weight: 800;
}
html[data-theme="volt"] .at-chip.outline { background: transparent; border-color: rgba(255, 255, 255, .14); }
html[data-theme="volt"] .at-shelf-head .at-chip, html[data-theme="volt"] .at-panel-tools .at-chip { clip-path: none; border-radius: 4px; }
html[data-theme="volt"] .at-segment { border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); padding: 2px; height: 36px; gap: 2px; }
html[data-theme="volt"] .at-segment > button { border-radius: 4px; color: #9ca3af; font-weight: 800; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="volt"] .at-segment > button + button { border-left: 0; }
html[data-theme="volt"] .at-segment > button:hover { background: rgba(255, 255, 255, .06); color: #d1d5db; }
html[data-theme="volt"] .at-segment > button.active { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-theme="volt"] .at-segment.sm { height: 32px; }
html[data-theme="volt"] .at-segment-cats { height: 40px; }
html[data-theme="volt"] .at-segment-cats > button { text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 700; }
html[data-theme="volt"] .at-pill-badge { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .8); color: #fff; font-size: 1.05rem; font-weight: 600; }
html[data-theme="volt"] .at-pill-badge.sub { color: #7dd3fc; }
html[data-theme="volt"] .at-pill-badge.dub { color: #fcd34d; }
html[data-theme="volt"] .at-pill-badge.mana { color: var(--rv-gold); }
html[data-theme="volt"] .at-pill-badge.airing { color: var(--rv-primary); border-color: var(--rv-primary-28); }
html[data-theme="volt"] .at-pill-badge.new {
  border-radius: 0; clip-path: var(--rv-chamfer-4); background: var(--rv-primary); color: var(--rv-primary-fg); border: 0;
  font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
html[data-theme="volt"] .at-pill-badge.live { background: #ef4444; color: #1a0606; border: 0; border-radius: 0; clip-path: var(--rv-chamfer-4); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="volt"] .at-pill-badge.adult { background: #ef4444; color: #1a0606; border: 0; }
html[data-theme="volt"] .at-thumb .tl .at-pill-badge { background: rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .1); }
html[data-theme="volt"] .at-thumb .dur, html[data-theme="volt"] .at-thumb .pv-tag, html[data-theme="volt"] .at-ep .th .dur { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .8); }
html[data-theme="volt"] .at-tooltip { background: #141414; border: 1px solid var(--rv-line-2); border-radius: 6px; }

/* ---- Guide / mini guide --------------------------------------------------- */
html[data-theme="volt"] #at-guide, html[data-theme="volt"] #at-mini-guide { background: #000; border-right: 1px solid var(--rv-line); }
html[data-theme="volt"] .at-guide-section { border-bottom: 0; position: relative; }
html[data-theme="volt"] .at-guide-section + .at-guide-section::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background-image: var(--rv-ruler); }
html[data-theme="volt"] .at-guide-title { font-size: 1.1rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #6f7683; }
html[data-theme="volt"] .at-guide-item { position: relative; isolation: isolate; border-radius: 0; color: #c3c8d1; font-weight: 500; transition: color .15s; }
html[data-theme="volt"] .at-guide-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rv-primary-14); clip-path: var(--rv-para); opacity: 0; transition: opacity .15s; }
html[data-theme="volt"] .at-guide-item:hover { background: transparent; color: #fff; }
html[data-theme="volt"] .at-guide-item:hover::before { opacity: 1; }
html[data-theme="volt"] .at-guide-item.active { background: transparent; color: var(--rv-primary); font-weight: 700; }
html[data-theme="volt"] .at-guide-item.active::before { opacity: 1; background-color: var(--rv-primary-10); background-image: repeating-linear-gradient(135deg, color-mix(in oklch, var(--rv-primary) 4%, transparent) 0 1px, transparent 1px 11px); }
html[data-theme="volt"] .at-guide-item.active::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 2px; background: var(--rv-primary); }
html[data-theme="volt"] .at-guide-item .at-icon { color: inherit; }
html[data-theme="volt"] .at-mini-item { position: relative; border-radius: 12px; color: #9ca3af; }
html[data-theme="volt"] .at-mini-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-theme="volt"] .at-mini-item.active { color: #fff; background: rgba(255, 255, 255, .1); }
html[data-theme="volt"] .at-mini-item.active::before { content: ""; position: absolute; left: -4px; top: 50%; width: 3px; height: 18px; transform: translateY(-50%) skewY(-18deg); background: var(--rv-primary); }
html[data-theme="volt"] .at-guide-footer a:hover { color: var(--rv-primary); }

/* ---- Menus / popups / sheets / modals / toasts --------------------------- */
html[data-theme="volt"] .at-menu, html[data-theme="volt"] .at-popup {
  background: var(--rv-hatch-2), rgba(8, 8, 10, .88);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border: 1px solid var(--rv-line-2); border-radius: 0; clip-path: var(--rv-chamfer-12);
  box-shadow: none; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .75));
}
html[data-theme="volt"] .at-menu-item { position: relative; isolation: isolate; color: #c3c8d1; font-weight: 500; transition: color .15s; }
html[data-theme="volt"] .at-menu-item::before { content: ""; position: absolute; inset: 2px 6px; z-index: -1; background: var(--rv-primary-14); clip-path: var(--rv-para); opacity: 0; transition: opacity .15s; }
html[data-theme="volt"] .at-menu-item:hover { background: transparent; color: #fff; }
html[data-theme="volt"] .at-menu-item:hover::before { opacity: 1; }
html[data-theme="volt"] .at-menu-item.active, html[data-theme="volt"] .at-menu-item.checked { background: transparent; color: var(--rv-primary); }
html[data-theme="volt"] .at-menu-item.active::before { opacity: 1; background: var(--rv-primary-10); }
html[data-theme="volt"] .at-menu-item.active::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; background: var(--rv-primary); }
html[data-theme="volt"] .at-menu-item .at-icon { color: inherit; }
html[data-theme="volt"] .at-menu-item .check { color: var(--rv-primary); }
html[data-theme="volt"] .at-menu-sep { background: none; background-image: var(--rv-ruler); margin: 8px 12px; }
html[data-theme="volt"] .at-menu-title { position: relative; padding-left: 22px; font-size: 1rem; font-weight: 800; letter-spacing: .18em; color: #6f7683; }
html[data-theme="volt"] .at-menu-title::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 11px; background: var(--rv-primary); transform: translateY(-50%) skew(-18deg); }
html[data-theme="volt"] .at-menu-head .link { color: var(--rv-primary); font-weight: 600; }
html[data-theme="volt"] .at-menu-mana { border-radius: 0; clip-path: var(--rv-chamfer-6); background: rgba(255, 255, 255, .05); border: 1px solid var(--rv-line); }
html[data-theme="volt"] .at-popup-head { border-bottom: 1px solid var(--rv-line); font-weight: 700; }
html[data-theme="volt"] .at-sheet, html[data-theme="volt"] .at-sheet-menu-panel {
  background: rgba(5, 6, 10, .96); -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%);
  border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
}
html[data-theme="volt"] .at-sheet-handle { background: rgba(255, 255, 255, .2); }
html[data-theme="volt"] .at-sheet-head, html[data-theme="volt"] .at-sheet-menu-head { font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-modal {
  position: relative; background: #000; border: 1px solid var(--rv-line); border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9), inset 0 1px rgba(255, 255, 255, .04);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1.6px), repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 24px);
  background-size: 22px 22px, auto;
}
html[data-theme="volt"] .at-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rv-primary-55) 20%, var(--rv-primary) 50%, var(--rv-primary-55) 80%, transparent);
}
html[data-theme="volt"] .at-modal-head { position: relative; padding-left: 36px; border-bottom: 1px solid var(--rv-line); font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-modal-head::before { content: ""; position: absolute; left: 20px; top: 50%; width: 5px; height: 14px; margin-top: -3px; background: var(--rv-primary); transform: translateY(-50%) skew(-18deg); }
html[data-theme="volt"] .at-modal-scrim.at-auth-scrim .at-modal.at-auth-dialog { border-radius: 0; }
html[data-theme="volt"] .at-toast { background: #0a0a0a; color: #fff; border: 1px solid var(--rv-line-2); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
html[data-theme="volt"] .at-toast button { color: var(--rv-primary); font-weight: 700; }

/* ---- Cards / thumbs / posters / rows --------------------------------------- */
html[data-theme="volt"] .at-card { transition: transform .2s var(--rv-ease); }
html[data-theme="volt"] .at-card:hover { transform: translateY(-4px); }
html[data-theme="volt"] .at-thumb { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: var(--rv-card); box-shadow: inset 0 1px rgba(255, 255, 255, .1); transition: border-color .22s, box-shadow .22s; }
html[data-theme="volt"] .at-card:hover .at-thumb { border-radius: 12px; border-color: var(--rv-primary-40); box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 16px 36px -6px rgba(0, 0, 0, .75), 0 0 20px var(--rv-primary-14); }
html[data-theme="volt"] .at-thumb .progress, html[data-theme="volt"] .at-ep .th .progress, html[data-theme="volt"] .at-player-bar, html[data-theme="volt"] .at-thumb .pv-bar { background: rgba(255, 255, 255, .25); }
html[data-theme="volt"] .at-thumb .progress i, html[data-theme="volt"] .at-ep .th .progress i, html[data-theme="volt"] .at-player-bar i, html[data-theme="volt"] .at-thumb .pv-bar i { background: var(--rv-primary); }
html[data-theme="volt"] .at-thumb .hover-play { background: rgba(0, 0, 0, .35); }
html[data-theme="volt"] .at-thumb .hover-play .at-icon { color: var(--rv-primary); filter: drop-shadow(0 0 12px var(--rv-primary-55)); }
html[data-theme="volt"] .at-card-title { font-weight: 700; letter-spacing: -.01em; }
html[data-theme="volt"] .at-card-meta { color: #9ca3af; }
html[data-theme="volt"] .at-card-menu { border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; }
html[data-theme="volt"] .at-card-menu:hover { background: rgba(0, 0, 0, .9); }
html[data-theme="volt"] .at-poster-card .pc-img { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px rgba(255, 255, 255, .1); transition: transform .2s var(--rv-ease), border-color .22s, box-shadow .22s; }
html[data-theme="volt"] .at-poster-card:hover .pc-img { transform: translateY(-4px); border-color: var(--rv-primary-40); box-shadow: 0 16px 36px -6px rgba(0, 0, 0, .75), 0 0 20px var(--rv-primary-14); }
html[data-theme="volt"] .at-poster-card:hover .pc-img img { opacity: 1; }
html[data-theme="volt"] .at-poster-card .rank { color: var(--rv-primary); text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 18px var(--rv-primary-40); font-weight: 900; font-style: italic; }
html[data-theme="volt"] .at-poster-card .pc-title { font-weight: 700; }
html[data-theme="volt"] .at-row .at-thumb, html[data-theme="volt"] .at-compact .at-thumb { border-radius: 10px; }
html[data-theme="volt"] .at-row:hover, html[data-theme="volt"] .at-compact:hover { transform: none; }
html[data-theme="volt"] .at-compact.is-now { background: var(--rv-primary-10); }

/* ---- Shelf heads (segmented skewed lime underline, Re:ANIME posts-head) --- */
html[data-theme="volt"] .at-shelf-head { position: relative; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
html[data-theme="volt"] .at-shelf-head::after {
  content: ""; position: absolute; left: 2px; bottom: -1px; width: 72px; height: 2px; transform: skew(-8deg); pointer-events: none;
  background: linear-gradient(90deg, var(--rv-primary) 0 34px, transparent 34px 41px, var(--rv-primary-55) 41px 49px, transparent 49px 56px, var(--rv-primary-28) 56px 62px, transparent 62px);
}
html[data-theme="volt"] .at-shelf-title { font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-shelf-title small { color: #6b7280; font-weight: 600; }
html[data-theme="volt"] .at-shelf-head .at-icon.brand { color: var(--rv-primary); }
html[data-theme="volt"] .at-shelf-head .at-btn.ghost { color: #6b7280; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[data-theme="volt"] .at-shelf-head .at-btn.ghost:hover { color: var(--rv-primary); background: transparent; }
html[data-theme="volt"] .at-shelf-divider { background-image: var(--rv-ruler); background-color: transparent; }
html[data-theme="volt"] .at-shelf-arrow { background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; box-shadow: none; width: 36px; height: 36px; transition: border-color .2s, background .2s; }
html[data-theme="volt"] .at-shelf-arrow:hover { background: rgba(0, 0, 0, .9); border-color: rgba(255, 255, 255, .4); }
html[data-theme="volt"] .at-page-head h1 { font-weight: 900; letter-spacing: -.02em; }
html[data-theme="volt"] .at-page-head .at-icon.big { color: var(--rv-primary); }

/* ---- Hero ----------------------------------------------------------------- */
html[data-theme="volt"] .at-hero-viewport, html[data-theme="volt"] .at-hero-track { border-radius: 12px; border: 1px solid var(--rv-line); background: #000; }
html[data-theme="volt"] .at-hero-slide .shade { background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .05) 72%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 55%); }
html[data-theme="volt"] .at-hero-kicker { color: var(--rv-primary); font-weight: 800; letter-spacing: .16em; font-size: 1.15rem; }
html[data-theme="volt"] .at-hero-kicker::before { content: ""; width: 5px; height: 11px; background: var(--rv-primary); transform: skew(-18deg); margin-right: 4px; }
html[data-theme="volt"] .at-hero-title { font-weight: 900; letter-spacing: -.03em; font-size: 4rem; line-height: 4.4rem; }
html[data-theme="volt"] .at-hero-meta .at-pill-badge { background: rgba(0, 0, 0, .6); color: var(--rv-primary); border: 0; border-radius: 4px; height: 26px; padding: 0 10px; font-weight: 700; font-size: 1.3rem; }
html[data-theme="volt"] .at-hero-desc { color: rgba(255, 255, 255, .85); font-weight: 500; }
html[data-theme="volt"] .at-hero-nav .at-shelf-arrow { width: 44px; height: 44px; border-radius: 8px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme="volt"] .at-hero-nav .at-shelf-arrow:hover { background: rgba(0, 0, 0, .8); }
html[data-theme="volt"] .at-hero-dots i { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .3); width: 8px; transition: width .3s, background-color .3s; }
html[data-theme="volt"] .at-hero-dots i:hover { background: rgba(255, 255, 255, .5); }
html[data-theme="volt"] .at-hero-dots i.on { width: 32px; background: var(--rv-primary); }
@media (max-width: 791px) {
  html[data-theme="volt"] .at-hero-slide .shade { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .1) 100%); }
  html[data-theme="volt"] .at-hero-title { font-size: 2.6rem; line-height: 3rem; }
  html[data-theme="volt"] .at-hero-btns .at-btn { height: 42px; padding: 0 20px; font-size: 1.15rem; letter-spacing: .1em; }
}

/* ---- Tabs ----------------------------------------------------------------- */
html[data-theme="volt"] .at-tabs { border-bottom: 1px solid rgba(255, 255, 255, .07); }
html[data-theme="volt"] .at-tab { color: #6b7280; font-weight: 800; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
html[data-theme="volt"] .at-tab:hover { color: #fff; }
html[data-theme="volt"] .at-tab.active { color: var(--rv-primary); }
html[data-theme="volt"] .at-tab.active::after { height: 3px; left: 14px; right: 14px; background: var(--rv-primary); transform: skew(-18deg); }
html[data-theme="volt"] .at-tab .count { color: inherit; opacity: .6; }

/* ---- Panels (HUD panel: hatch, gradient, corner brackets, vents) ---------- */
html[data-theme="volt"] .at-panel {
  position: relative; border: 1px solid rgba(255, 255, 255, .055); border-radius: 12px;
  background: var(--rv-hatch), linear-gradient(160deg, #101118, #0b0c11 42%, #07080c);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
}
html[data-theme="volt"] .at-panel::before, html[data-theme="volt"] .at-panel::after { content: ""; position: absolute; width: 14px; height: 14px; z-index: 5; pointer-events: none; border: 0 solid rgba(255, 255, 255, .14); }
html[data-theme="volt"] .at-panel::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
html[data-theme="volt"] .at-panel::after { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
/* Phone comment chip is a faint wash. These panels are solid cards, so the comment was sitting on the episodes border. */
html[data-theme="volt"] .at-comments-teaser {
  margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, .055);
  background: var(--rv-hatch), linear-gradient(160deg, #101118, #0b0c11 42%, #07080c);
}
html[data-theme="kai"] .at-comments-teaser,
html[data-theme="classic"] .at-comments-teaser { margin-bottom: 12px; border: 1px solid var(--at-layer-10); background: var(--at-bg-raised); }
html[data-theme="volt"] .at-panel-head { background: transparent; border-bottom: 1px solid var(--rv-line); }
html[data-theme="volt"] .at-panel-head h3 { font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-panel-head .ph-count { border-radius: 0; clip-path: var(--rv-chamfer-4); background: rgba(255, 255, 255, .06); font-weight: 800; }
html[data-theme="volt"] .at-panel-head .ph-bar { background: rgba(255, 255, 255, .08); }
html[data-theme="volt"] .at-panel-head .ph-bar i { background: var(--rv-primary); }
html[data-theme="volt"] .at-panel-tools, html[data-theme="volt"] .at-panel-foot { background: rgba(0, 0, 0, .25); border-top: 1px solid var(--rv-line); }
html[data-theme="volt"] .at-panel-list { background: transparent; }
html[data-theme="volt"] .at-ep:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="volt"] .at-ep.active { background: var(--rv-primary-10); }
html[data-theme="volt"] .at-ep.active::before { background: var(--rv-primary); border-radius: 0; transform: skewY(-18deg); top: 12px; bottom: 12px; }
html[data-theme="volt"] .at-ep .et { font-weight: 600; }
html[data-theme="volt"] .at-epgrid a { border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-weight: 700; }
html[data-theme="volt"] .at-epgrid a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
html[data-theme="volt"] .at-epgrid a.active { background: var(--rv-primary); color: var(--rv-primary-fg); border-color: transparent; box-shadow: 0 0 20px var(--rv-primary-40); }
html[data-theme="volt"] .at-epgrid a.active::after { background: var(--rv-primary-fg); border-color: var(--rv-primary-fg); }
html[data-theme="volt"] .at-epgrid a.watched:not(.active) { background: var(--rv-primary-10); border-color: var(--rv-primary-28); }
html[data-theme="volt"] .at-epgrid a.watched:not(.active)::after, html[data-theme="volt"] .at-epgrid a .ck, html[data-theme="volt"] .at-panel-foot .sw.seen, html[data-theme="volt"] .at-panel-foot .lg-ck .at-icon { color: var(--rv-primary); background-color: var(--rv-primary); border-color: var(--rv-primary); }
html[data-theme="volt"] .at-epgrid a .ck { background: none; }
html[data-theme="volt"] .at-panel-foot .lg-ck .at-icon { background: none; }
html[data-theme="volt"] .at-epgrid a .gp { background: var(--rv-primary); }
html[data-theme="volt"] .at-epgrid a.dub::before, html[data-theme="volt"] .at-panel-foot .sw.dub { background: #7dd3fc; }

/* ---- Inputs / fields / selects / switches --------------------------------- */
html[data-theme="volt"] .at-input, html[data-theme="volt"] .at-select { border-radius: 5px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .2s; }
html[data-theme="volt"] .at-input:hover, html[data-theme="volt"] .at-select:hover { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .18); }
html[data-theme="volt"] .at-input:focus-within, html[data-theme="volt"] .at-select:focus-within { border-color: var(--rv-primary); }
html[data-theme="volt"] .at-select select option { color: #fff; background: #0a0a0a; }
html[data-theme="volt"] .at-field input { background: #111; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; font-weight: 500; }
html[data-theme="volt"] .at-field input:focus { border: 1px solid var(--rv-primary); padding: 0 14px; box-shadow: 0 0 0 3px var(--rv-primary-14); }
html[data-theme="volt"] .at-field input::placeholder { color: #6b7280; }
html[data-theme="volt"] .at-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #111 inset; caret-color: #fff; }
html[data-theme="volt"] .at-field label { background: #000; color: #9ca3af; font-weight: 600; letter-spacing: .04em; }
html[data-theme="volt"] .at-composer textarea:focus { border-bottom: 2px solid var(--rv-primary); }
html[data-theme="volt"] .at-switch { background: rgba(255, 255, 255, .15); }
html[data-theme="volt"] .at-switch::after { background: #9ca3af; }
html[data-theme="volt"] .at-switch.on { background: var(--rv-primary-40); }
html[data-theme="volt"] .at-switch.on::after { background: var(--rv-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 6px var(--rv-primary-14); }
html[data-theme="volt"] .at-shop-pill { border-radius: 8px; background: #111; box-shadow: inset 0 0 0 1px var(--rv-primary-55); }

/* ---- Notices / alerts / signin / stats / mana ------------------------------ */
html[data-theme="volt"] .at-notice, html[data-theme="volt"] .at-alert {
  position: relative; isolation: isolate; border-radius: 0; clip-path: var(--rv-chamfer-10); overflow: hidden;
  background: #000; border: 1px solid var(--rv-primary-28); color: #c7ccd4;
}
html[data-theme="volt"] .at-notice::before, html[data-theme="volt"] .at-alert::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; z-index: 1; background: linear-gradient(180deg, var(--rv-primary), var(--rv-primary-28)); }
html[data-theme="volt"] .at-notice::after, html[data-theme="volt"] .at-alert::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--rv-hatch-2), var(--rv-dots); background-size: auto, 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
}
html[data-theme="volt"] .at-notice > svg, html[data-theme="volt"] .at-notice > .at-ico, html[data-theme="volt"] .at-alert .at-icon { color: var(--rv-primary); }
html[data-theme="volt"] .at-notice b { color: var(--rv-primary); font-size: 1.15rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
html[data-theme="volt"] .at-signin-card, html[data-theme="volt"] .at-stat {
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .055);
  background: var(--rv-hatch), linear-gradient(160deg, #101118, #0b0c11 42%, #07080c); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
}
html[data-theme="volt"] .at-signin-card .ic { border-radius: 0; clip-path: var(--rv-chamfer-6); background: var(--rv-primary-10); border: 1px solid var(--rv-primary-28); }
html[data-theme="volt"] .at-stat .v { font-weight: 900; letter-spacing: -.02em; }
html[data-theme="volt"] .at-stat .l { font-size: 1.1rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6f7683; }
html[data-theme="volt"] .at-mana-card { position: relative; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(135deg, #23242c, #14151a); overflow: hidden; }
html[data-theme="volt"] .at-mana-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--rv-gold) 50%, transparent 100%); }
html[data-theme="volt"] .at-mana-card .mv { color: var(--rv-gold); font-weight: 900; }
html[data-theme="volt"] .at-mana-card .mv .at-icon { filter: drop-shadow(0 0 4px rgba(251, 191, 36, .6)); }
html[data-theme="volt"] .at-mana-card .today .bar { background: rgba(255, 255, 255, .08); }
html[data-theme="volt"] .at-mana-card .today .bar i { background: var(--rv-gold); }
html[data-theme="volt"] .at-empty h2 { font-weight: 800; }

/* ---- Community posts / comments ------------------------------------------- */
html[data-theme="volt"] .at-post { background: var(--rv-card); border: 1px solid var(--rv-line); border-radius: 12px; transition: transform .3s var(--rv-ease), border-color .3s, box-shadow .3s; }
html[data-theme="volt"] .at-post:hover { transform: translateX(4px); border-color: var(--rv-primary-40); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
/* Open post reads as the page, not a second card. Feed cards stay raised. */
html[data-theme="volt"] .at-community.is-post .at-post[data-post],
html[data-theme="volt"] .at-community.is-post .at-post[data-post]:hover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html[data-theme="volt"] .at-post .p-title { font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-post .p-ref { background: var(--rv-card-2); border: 1px solid var(--rv-line); }
html[data-theme="volt"] .at-post .p-actions .cnt { color: #9ca3af; font-weight: 600; }
/* comments / thread rails: inherit shared (dark) styles — no Volt restyle */

/* ---- Profile level / XP rank colors (Volt only; dark/blue/light stay white) ---- */
html[data-theme="volt"] .rk-basic { --rk: #22d3ee; --rk-2: #0891b2; }
html[data-theme="volt"] .rk-bronze { --rk: #ea580c; --rk-2: #c2410c; }
html[data-theme="volt"] .rk-silver { --rk: #06b6d4; --rk-2: #0e7490; }
html[data-theme="volt"] .rk-gold { --rk: #eab308; --rk-2: #ca8a04; }
html[data-theme="volt"] .rk-platinum { --rk: #14b8a6; --rk-2: #0f766e; }
html[data-theme="volt"] .rk-emerald { --rk: #10b981; --rk-2: #059669; }
html[data-theme="volt"] .rk-ruby { --rk: #ef4444; --rk-2: #dc2626; }
html[data-theme="volt"] .rk-radiant { --rk: #fbbf24; --rk-2: #f59e0b; }
html[data-theme="volt"] .t-d { --rk: #22d3ee; --rk-2: #0891b2; }
html[data-theme="volt"] .t-c { --rk: #06b6d4; --rk-2: #0e7490; }
html[data-theme="volt"] .t-b { --rk: #eab308; --rk-2: #ca8a04; }
html[data-theme="volt"] .t-a { --rk: #14b8a6; --rk-2: #0f766e; }
html[data-theme="volt"] .t-a.u2 { --rk: #10b981; --rk-2: #059669; }
html[data-theme="volt"] .t-a.u3 { --rk: #ef4444; --rk-2: #dc2626; }
html[data-theme="volt"] .t-a.u4 { --rk: #fbbf24; --rk-2: #f59e0b; }
html[data-theme="volt"] .at-lv polygon,
html[data-theme="volt"] .at-mh-lv polygon { fill: #0c0d12; stroke: var(--rk, var(--rv-primary)); }
html[data-theme="volt"] .at-lv,
html[data-theme="volt"] .at-mh-lv { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px color-mix(in srgb, var(--rk, var(--rv-primary)) 40%, transparent)); }
html[data-theme="volt"] .at-lv .lv small,
html[data-theme="volt"] .at-mh-lv .lv small { color: var(--rk, var(--rv-primary)); }
html[data-theme="volt"] .at-xp .rk { color: var(--rk, var(--rv-primary)); }
html[data-theme="volt"] .at-xp .bar { background: rgba(255, 255, 255, .08); }
html[data-theme="volt"] .at-xp .bar i { background: linear-gradient(90deg, var(--rk-2, var(--rv-primary)), var(--rk, var(--rv-primary))); box-shadow: 0 0 8px color-mix(in srgb, var(--rk, var(--rv-primary)) 55%, transparent); }
html[data-theme="volt"] .at-rkh .bar i { background: linear-gradient(90deg, var(--rk-2, var(--rv-primary)), var(--rk, var(--rv-primary))); box-shadow: 0 0 8px color-mix(in srgb, var(--rk, var(--rv-primary)) 40%, transparent); }

/* ---- Mana shop (Re:ANIME shop-card glass + glow) --------------------------- */
html[data-theme="volt"] .at-shop-item {
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(12, 13, 18, .85);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 12px 28px -4px rgba(0, 0, 0, .6);
  transition: transform .22s var(--rv-ease), border-color .22s, box-shadow .22s;
}
html[data-theme="volt"] .at-shop-item:hover { transform: translateY(-4px); background: rgba(12, 13, 18, .85); border-color: var(--rv-primary-40); box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 16px 36px -6px rgba(0, 0, 0, .75), 0 0 20px var(--rv-primary-14); }
html[data-theme="volt"] .at-shop-item.owned { border-color: var(--rv-primary-28); }
html[data-theme="volt"] .at-sh-stage, html[data-theme="volt"] .at-sm-stage {
  border-radius: 10px; border: 1px solid var(--rv-line);
  background: linear-gradient(170deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 35%, transparent 60%), linear-gradient(180deg, rgba(18, 20, 28, .88), rgba(8, 9, 13, .96));
}
html[data-theme="volt"] .at-shop-item .nm { font-weight: 800; letter-spacing: -.01em; }
html[data-theme="volt"] .at-shop-item .pr { color: var(--rv-gold); font-weight: 800; }
html[data-theme="volt"] .at-shop-item .pr .at-icon { filter: drop-shadow(0 0 3px rgba(251, 191, 36, .6)); }
html[data-theme="volt"] .at-shop-item .pr.owned { color: var(--rv-primary); }
html[data-theme="volt"] .at-sh-buyers, html[data-theme="volt"] .at-sh-ribbon { border-radius: 999px; background: rgba(10, 12, 17, .7); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-weight: 700; }
html[data-theme="volt"] .at-sh-ribbon { background: var(--rv-primary); color: var(--rv-primary-fg); border: 0; border-radius: 0; clip-path: var(--rv-chamfer-4); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="volt"] .at-shop-item .at-btn.text { clip-path: none; }
html[data-theme="volt"] .at-sm-rows { border-top: 1px dashed var(--rv-line-2); }

/* ---- Skeletons / misc ------------------------------------------------------ */
html[data-theme="volt"] .at-sk { background: linear-gradient(90deg, #0d0e15 25%, #1a1b22 50%, #0d0e15 75%); background-size: 200% 100%; }
html[data-theme="volt"] .at-chipbar .fade { background: linear-gradient(90deg, transparent, #000 60%); }
html[data-theme="volt"] .at-filterbar, html[data-theme="volt"] .at-shop-bar { background: rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 791px) {
  /* Sticky + backdrop-filter ghosts masthead search over chips on WebKit */
  html[data-theme="volt"] .at-filterbar, html[data-theme="volt"] .at-shop-bar {
    background: var(--at-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
html[data-theme="volt"] .at-search-meta b { color: var(--rv-primary); font-weight: 700; }
html[data-theme="volt"] .at-guide-item .dot { background: var(--rv-primary); box-shadow: 0 0 6px var(--rv-primary); }
html[data-theme="volt"] .at-guide-item .live-dot { background: #ef4444; box-shadow: 0 0 0 2px #000, 0 0 8px #ef4444; }
html[data-theme="volt"] .at-panel-head .airing { color: var(--rv-primary); }
html[data-theme="volt"] .at-shop-sbtn.has-q::after { background: var(--rv-primary); box-shadow: 0 0 6px var(--rv-primary); }
html[data-theme="volt"] .at-ctrl-btn.at-chip.active { background: var(--rv-primary) !important; color: var(--rv-primary-fg) !important; border-color: transparent !important; }
html[data-theme="volt"] .at-ctrl-btn.at-toggle.on::after { background: var(--rv-primary-fg); }
html[data-theme="volt"] .at-auth-brand .at-logo-text { font-style: italic; }
html[data-theme="volt"] .at-auth-link, html[data-theme="volt"] .at-auth-legal a { color: var(--rv-primary); font-weight: 600; }
html[data-theme="volt"] .at-tier .tl { clip-path: var(--rv-chamfer-4); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="volt"] .at-card:hover, html[data-theme="volt"] .at-post:hover, html[data-theme="volt"] .at-shop-item:hover, html[data-theme="volt"] .at-hero-btns .at-btn:hover, html[data-theme="volt"] .at-poster-card:hover .pc-img { transform: none; }
}
html[data-theme="volt"] body.at-reduced-motion .at-card:hover, html[data-theme="volt"] body.at-reduced-motion .at-post:hover, html[data-theme="volt"] body.at-reduced-motion .at-shop-item:hover, html[data-theme="volt"] body.at-reduced-motion .at-hero-btns .at-btn:hover { transform: none; }
html[data-theme="volt"] body.at-reduced-motion #at-masthead, html[data-theme="volt"] body.at-reduced-motion .at-menu, html[data-theme="volt"] body.at-reduced-motion .at-popup, html[data-theme="volt"] body.at-reduced-motion .at-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #050609; }

/* ---- Ranked names (Re:ANIME RankedName + tier-trophy glow; mana-tiered) ---- */
html[data-theme="volt"] .at-rn {
  position: relative; display: inline-block; max-width: 100%; vertical-align: bottom;
  --rn-shine: .3; --rn-speed: 10s; --rn-glow: 30%; --rn-color: #22d3ee; --rn-delay: 0ms;
}
html[data-theme="volt"] .at-rn-t {
  display: block; overflow: hidden; text-overflow: ellipsis;
  background-color: var(--rn-color);
  background-image: linear-gradient(105deg, #fff0 34%, rgb(255 255 255 / var(--rn-shine)) 47% 53%, #fff0 66%);
  background-repeat: no-repeat; background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--rn-color);
  animation: at-rn-sheen var(--rn-speed) cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: var(--rn-delay);
}
html[data-theme="volt"] .at-rn::before {
  content: attr(data-name); position: absolute; inset: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--rn-color);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rn-color) var(--rn-glow), transparent));
  pointer-events: none; -webkit-user-select: none; user-select: none;
  animation: at-rn-breathe 11s ease-in-out infinite; animation-delay: var(--rn-delay);
}
html[data-theme="volt"] .at-rn-bronze { --rn-shine: .42; --rn-speed: 9s; --rn-glow: 38%; }
html[data-theme="volt"] .at-rn-silver { --rn-shine: .55; --rn-speed: 8s; --rn-glow: 48%; }
html[data-theme="volt"] .at-rn-gold,
html[data-theme="volt"] .at-rn-platinum,
html[data-theme="volt"] .at-rn-emerald,
html[data-theme="volt"] .at-rn-ruby,
html[data-theme="volt"] .at-rn-diamond { --rn-shine: .68; --rn-speed: 7s; --rn-glow: 58%; }
html[data-theme="volt"] .at-rn-gold .at-rn-t,
html[data-theme="volt"] .at-rn-platinum .at-rn-t,
html[data-theme="volt"] .at-rn-emerald .at-rn-t,
html[data-theme="volt"] .at-rn-ruby .at-rn-t,
html[data-theme="volt"] .at-rn-diamond .at-rn-t {
  background-image: linear-gradient(105deg, #fff0 28%, rgb(255 255 255 / var(--rn-shine)) 44% 50%, #00000057 62%, #0000 72%);
}
html[data-theme="volt"] .at-rn-ruby,
html[data-theme="volt"] .at-rn-diamond { --rn-shine: .8; --rn-speed: 6s; --rn-glow: 66%; }
html[data-theme="volt"] .at-rn-radiant { --rn-glow: 70%; }
html[data-theme="volt"] .at-rn-radiant .at-rn-t {
  background-image: linear-gradient(100deg, #fbbf24, #f472b6, #38bdf8, #a3e635, #fbbf24);
  background-repeat: repeat; background-size: 300% 100%; color: #fbbf24;
  animation: at-rn-drift 16s linear infinite;
}
html[data-theme="volt"] .at-rn-radiant::before { animation-duration: 9s; }
/* Profile h1 only: trophy pan from --rn-color (not leaderboard — overflow+filter made dark name boxes) */
html[data-theme="volt"] .at-ch-meta h1 .at-rn-t {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rn-color) 50%, transparent)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  background-color: var(--rn-color);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rn-color) 55%, #000) 0%,
    var(--rn-color) 18%,
    #fff 36%,
    var(--rn-color) 52%,
    color-mix(in srgb, var(--rn-color) 55%, #000) 68%,
    var(--rn-color) 84%,
    #fff 100%
  );
  background-size: 200% 100%;
  animation: at-rn-trophy-pan 8s ease-in-out infinite alternate;
  animation-delay: var(--rn-delay);
}
html[data-theme="volt"] .at-ch-meta h1 .at-rn-basic .at-rn-t,
html[data-theme="volt"] .at-ch-meta h1 .at-rn-bronze .at-rn-t,
html[data-theme="volt"] .at-ch-meta h1 .at-rn-silver .at-rn-t { animation-duration: 12s; }
html[data-theme="volt"] .at-ch-meta h1 .at-rn-gold .at-rn-t { animation-duration: 10s; }
html[data-theme="volt"] .at-ch-meta h1 .at-rn-platinum .at-rn-t,
html[data-theme="volt"] .at-ch-meta h1 .at-rn-emerald .at-rn-t,
html[data-theme="volt"] .at-ch-meta h1 .at-rn-ruby .at-rn-t { animation-duration: 8s; }
html[data-theme="volt"] .at-ch-meta h1 .at-rn-diamond .at-rn-t,
html[data-theme="volt"] .at-ch-meta h1 .at-rn-radiant .at-rn-t { animation-duration: 5s; }
/* Leaderboard: sheen only — no ::before plate, no filter box, don't clip glow into a rect */
html[data-theme="volt"] .at-lb .at-rn::before { content: none; display: none; }
html[data-theme="volt"] .at-lb .at-rn-t {
  display: inline-block;
  max-width: 100%;
  filter: none;
  animation: at-rn-sheen var(--rn-speed) cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: var(--rn-delay);
}
html[data-theme="volt"] .at-lb-pod .pn .nm,
html[data-theme="volt"] .at-lb-row .wn .nm,
html[data-theme="volt"] .at-lb-cm .cu .nm {
  overflow: visible;
  text-overflow: clip;
  background: none;
}
html[data-theme="volt"] .kc-mh .at-rn,
html[data-theme="volt"] .wc-n .at-rn { font-weight: 700; }
@keyframes at-rn-sheen { 0% { background-position: 120% 0; } 45%, to { background-position: -120% 0; } }
@keyframes at-rn-drift { 0% { background-position: 0% 0; } to { background-position: -300% 0; } }
@keyframes at-rn-breathe { 0%, to { opacity: .35; } 50% { opacity: 1; } }
@keyframes at-rn-trophy-pan { 0% { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="volt"] .at-rn-t,
  html[data-theme="volt"] .at-rn::before { animation: none !important; }
  html[data-theme="volt"] .at-rn::before { opacity: .6; }
}
html[data-theme="volt"] body.at-reduced-motion .at-rn-t,
html[data-theme="volt"] body.at-reduced-motion .at-rn::before { animation: none !important; }
html[data-theme="volt"] body.at-reduced-motion .at-rn::before { opacity: .6; }
/* Chat paints a name per message and per person online. The sheen plus the
   drop-shadow ::before run forever, so a full people list drops scroll FPS.
   Tier color stays. Profile and the rest of the site keep the motion. */
html[data-theme="volt"] .kc-panel .at-rn::before,
html[data-theme="volt"] .wc .at-rn::before {
  content: none;
  animation: none;
  filter: none;
}
html[data-theme="volt"] .kc-panel .at-rn-t,
html[data-theme="volt"] .wc .at-rn-t {
  animation: none !important;
  background-image: none;
  filter: none;
  -webkit-text-fill-color: var(--rn-color);
  color: var(--rn-color);
}
html[data-theme="volt"] .kc-panel .at-rn-t[style*="linear-gradient"],
html[data-theme="volt"] .wc .at-rn-t[style*="linear-gradient"] {
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.at-skip-lead { color: var(--at-text-2); margin: 0 0 14px; line-height: 1.45; }
.at-skip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.at-skip-field { display: flex; flex-direction: column; gap: 4px; font-size: 1.2rem; color: var(--at-text-2); }
.at-skip-field input { width: 100%; background: var(--at-bg-input); border: 1px solid var(--at-border); border-radius: 8px; padding: 8px 12px; color: var(--at-text); font: inherit; font-variant-numeric: tabular-nums; }
.at-skip-pick { width: 100%; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.at-skip-pick .at-icon { width: 18px; height: 18px; }
.at-skip-note { margin: 10px 0 0; color: var(--at-text-2); font-size: 1.2rem; }

/* =========================================================================
   THEME: Coral (slate navy surfaces, big soft 1.2rem
   corners, white pill search, coral accent + green second accent, Poppins).
   Stored id stays "kai". Scoped to html[data-theme="kai"]; appended at EOF. Never touches dark/blue/light/volt.
   ========================================================================= */
html[data-theme="kai"] {
  color-scheme: dark;
  --at-frost: rgba(12, 17, 22, .8);
  --at-frost-mobile: rgba(12, 17, 22, .7);
  --kai-primary: #e45f3a;
  --kai-primary-hover: #e87758;
  --kai-primary-deep: #b83c19;
  --kai-primary-fg: #ffffff;
  --kai-primary-10: rgba(228, 95, 58, .1);
  --kai-primary-20: rgba(228, 95, 58, .2);
  --kai-primary-35: rgba(228, 95, 58, .35);
  --kai-green: #36cb68;
  --kai-green-10: rgba(54, 203, 104, .1);
  --kai-green-20: rgba(54, 203, 104, .2);
  --kai-gold: #ffc720;
  --kai-bg: #0c1116;
  --kai-section: #11161b;
  --kai-raised: #181d22;
  --kai-raised-2: #1c2228;
  --kai-input: #20272e;
  --kai-line: rgba(255, 255, 255, .1);
  --kai-line-2: rgba(255, 255, 255, .2);
  --kai-dim: rgba(255, 255, 255, .5);
  --kai-dim-2: rgba(255, 255, 255, .3);
  --kai-r-lg: 19px;
  --kai-r: 10px;
  --kai-r-sm: 8px;
  --kai-ease: cubic-bezier(.2, .8, .2, 1);

  --at-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --at-bg: var(--kai-bg);
  --at-bg-raised: var(--kai-section);
  --at-bg-menu: var(--kai-raised);
  --at-bg-input: var(--kai-input);
  --at-bg-search-btn: #ffffff;
  --at-text: #ffffff;
  --at-text-2: var(--kai-dim);
  --at-text-3: var(--kai-dim-2);
  --at-chip: var(--kai-raised);
  --at-chip-hover: var(--kai-raised-2);
  --at-layer-10: rgba(255, 255, 255, .1);
  --at-layer-5: rgba(255, 255, 255, .05);
  --at-hover: rgba(255, 255, 255, .06);
  --at-border: var(--kai-line);
  --at-cta: var(--kai-primary);
  --at-brand-btn: var(--kai-primary);
  --at-brand-btn-text: var(--kai-primary-fg);
  --at-scrim: rgba(0, 0, 0, .7);
  --at-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7);
  --at-badge-bg: rgba(12, 17, 22, .85);
  --at-progress-bg: rgba(255, 255, 255, .3);
  --at-tooltip-bg: var(--kai-raised-2);
  --at-live-chat-bg: var(--kai-section);
  --at-mana: var(--kai-gold);
  --at-red: var(--kai-primary);
  --kc-accent: var(--kai-primary);
}
html[data-theme="kai"] body { font-family: var(--at-font); font-weight: 400; -webkit-font-smoothing: antialiased; }
html[data-theme="kai"] ::selection { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] { scrollbar-width: thin; scrollbar-color: var(--kai-primary) var(--kai-raised); }
html[data-theme="kai"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="kai"] ::-webkit-scrollbar-track { background: var(--kai-raised); border-radius: var(--kai-r-lg); }
html[data-theme="kai"] ::-webkit-scrollbar-thumb { background: linear-gradient(var(--kai-primary-hover) 0%, var(--kai-primary) 100%); border-radius: var(--kai-r-lg); }
html[data-theme="kai"] #at-guide:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
/* Text links inside copy go green on hover; buttons/cards keep their own hover rules below. */
html[data-theme="kai"] .p-text a:hover, html[data-theme="kai"] .cm-text a:hover, html[data-theme="kai"] .at-static a:hover, html[data-theme="kai"] .at-desc a:hover { color: var(--kai-green); }

/* ---- Masthead / search ---------------------------------------------------- */
html[data-theme="kai"] #at-masthead {
  background: rgba(12, 17, 22, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
html[data-theme="kai"] body[data-page="home"] #at-masthead { background: rgba(0, 0, 0, .55); border-bottom-color: transparent; }
html[data-theme="kai"] .at-logo-mark { background: var(--kai-primary); border-radius: 7px; }
html[data-theme="kai"] .at-logo-text { font-weight: 700; font-style: italic; letter-spacing: -.04em; padding-left: 4px; }
html[data-theme="kai"] .at-logo-text sup { color: var(--kai-green); font-weight: 600; font-style: normal; }
html[data-theme="kai"] .at-search-box {
  background: #fff; border: 0; border-radius: 40px 0 0 40px; color: #0c1116;
  transition: box-shadow .2s;
}
html[data-theme="kai"] .at-search-box:focus-within { box-shadow: 0 0 0 3px var(--kai-primary-35); }
html[data-theme="kai"] .at-search-box input { color: #0c1116; font-weight: 400; }
html[data-theme="kai"] .at-search-box input::placeholder { color: rgba(12, 17, 22, .5); }
html[data-theme="kai"] .at-search-leading, html[data-theme="kai"] .at-search-box .at-iconbtn { color: #0c1116; }
html[data-theme="kai"] .at-search-box .at-iconbtn:hover { background: rgba(12, 17, 22, .08); color: #0c1116; }
html[data-theme="kai"] .at-search-box input:-webkit-autofill { -webkit-text-fill-color: #0c1116; -webkit-box-shadow: 0 0 0 1000px #fff inset; }
html[data-theme="kai"] .at-search-btn { background: #fff; border: 0; border-radius: 0 40px 40px 0; color: #0c1116; width: 56px; }
html[data-theme="kai"] .at-search-btn:hover { background: #fff; color: var(--kai-primary); }
html[data-theme="kai"] .at-search-box:focus-within + .at-search-btn { box-shadow: 0 0 0 3px var(--kai-primary-35); }
html[data-theme="kai"] .at-search-random { background: var(--kai-raised); color: #fff; }
html[data-theme="kai"] .at-search-random:hover { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] #at-msearch form { background: #fff; border: 0; border-radius: 40px; }
html[data-theme="kai"] #at-msearch input { background: transparent; border: 0; border-radius: 0; color: #0c1116; }
html[data-theme="kai"] #at-msearch input::placeholder { color: rgba(12, 17, 22, .5); }
html[data-theme="kai"] #at-msearch input:focus { border: 0; outline: 0; }
html[data-theme="kai"] #at-msearch .ms-ico, html[data-theme="kai"] #at-msearch .at-iconbtn { color: #0c1116; }
html[data-theme="kai"] .at-suggest { background: var(--kai-raised); border: 0; border-radius: var(--kai-r-lg); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); overflow: hidden; }
html[data-theme="kai"] .at-suggest-item:hover, html[data-theme="kai"] .at-suggest-item.active { background: rgba(255, 255, 255, .06); }
html[data-theme="kai"] .at-suggest-item.more { color: var(--kai-green); font-weight: 500; }
@media (max-width: 791px) {
  html[data-theme="kai"] body[data-page="search"] #at-masthead { background: var(--kai-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="kai"] body[data-page="search"] .at-filterbar { background: var(--at-bg); -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 2015; }
  html[data-theme="kai"] body[data-page="search"] .at-search-box { border: 0; border-radius: 40px; }
  html[data-theme="kai"] body[data-page="home"] #at-masthead { background: rgba(12, 17, 22, .82); }
}

/* ---- Icon buttons / avatar / badge count ---------------------------------- */
html[data-theme="kai"] .at-iconbtn { color: #fff; border-radius: 50%; transition: color .2s, background .2s; }
html[data-theme="kai"] .at-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html[data-theme="kai"] .at-mh-end .at-iconbtn:hover { background: var(--kai-raised); }
html[data-theme="kai"] .at-avatar-btn > img:not(.at-deco-img), html[data-theme="kai"] .at-avatar-btn .av > img:not(.at-deco-img), html[data-theme="kai"] .at-avatar-btn { box-shadow: 0 0 0 2px var(--kai-primary-35); }
html[data-theme="kai"] .at-badge-count { background: var(--kai-primary); color: #fff; border: 2px solid var(--kai-bg); font-weight: 600; }

/* ---- Buttons -------------------------------------------------------------- */
html[data-theme="kai"] .at-btn {
  border-radius: var(--kai-r-sm); font-weight: 500; background: var(--kai-raised); color: #fff; border: 0;
  transition: background .3s, color .3s, opacity .3s, transform .2s;
}
html[data-theme="kai"] .at-btn:hover { background: var(--kai-raised-2); color: #fff; }
html[data-theme="kai"] .at-sched-item .state.play { background: var(--kai-primary); color: #fff; border-radius: 999px; }
html[data-theme="kai"] .at-sched-item .state.play .at-icon { color: #fff; }
html[data-theme="kai"] .at-btn.primary, html[data-theme="kai"] .at-btn.cta {
  background: var(--kai-primary); color: var(--kai-primary-fg); text-transform: uppercase; letter-spacing: .02em; font-weight: 500;
}
html[data-theme="kai"] .at-btn.primary:hover, html[data-theme="kai"] .at-btn.cta:hover { background: var(--kai-primary-deep); opacity: 1; }
html[data-theme="kai"] .at-btn.primary .at-icon, html[data-theme="kai"] .at-btn.cta .at-icon { color: inherit; }
html[data-theme="kai"] .at-btn.ghost, html[data-theme="kai"] .at-btn.text, html[data-theme="kai"] .at-btn.text-cta { background: transparent; }
html[data-theme="kai"] .at-btn.ghost:hover, html[data-theme="kai"] .at-btn.text:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-theme="kai"] .at-btn.text-cta { color: var(--kai-primary); }
html[data-theme="kai"] .at-btn.text-cta:hover { background: var(--kai-primary-10); color: var(--kai-primary); }
html[data-theme="kai"] .at-btn.outline { background: transparent; border: 1px solid var(--kai-line-2); }
html[data-theme="kai"] .at-btn.outline:hover { background: rgba(255, 255, 255, .06); border-color: #fff; }
html[data-theme="kai"] .at-btn.lg { border-radius: var(--kai-r); font-size: 1.4rem; }
html[data-theme="kai"] .at-btn.icon-only { border-radius: 50%; }
html[data-theme="kai"] .at-btn[disabled] { opacity: .5; }
html[data-theme="kai"] .at-modal-foot .at-btn.cta:hover { opacity: 1; }
html[data-theme="kai"] .at-composer .cf-actions .at-btn.cta[disabled],
html[data-theme="kai"] .at-composer .cf-actions .at-btn.cta[disabled]:hover { background: var(--kai-raised); color: var(--kai-dim-2); }
html[data-theme="kai"] .at-hero-btns { gap: 12px; }
html[data-theme="kai"] .at-hero-btns .at-btn { border-radius: var(--kai-r-sm); height: 46px; padding: 0 26px; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; box-shadow: none; }
html[data-theme="kai"] .at-hero-btns .at-btn.primary { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-hero-btns .at-btn.primary:hover { background: var(--kai-primary-deep); }
html[data-theme="kai"] .at-hero-btns .at-btn.glass { background: rgba(255, 255, 255, .12); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="kai"] .at-hero-btns .at-btn.glass:hover { background: rgba(255, 255, 255, .2); }

/* ---- Chips / segments / pills ------------------------------------------- */
html[data-theme="kai"] .at-chip { border-radius: 999px; background: var(--kai-raised); color: #fff; border: 0; font-weight: 400; transition: background .2s, color .2s; }
html[data-theme="kai"] .at-chip:hover { background: var(--kai-raised-2); color: #fff; }
html[data-theme="kai"] .at-chip.active, html[data-theme="kai"] .at-chip[aria-pressed="true"] { background: var(--kai-primary); color: #fff; font-weight: 500; }
html[data-theme="kai"] .at-chip.outline { background: transparent; border: 1px solid var(--kai-line-2); }
html[data-theme="kai"] .at-segment { border-radius: 999px; background: var(--kai-raised); border: 0; padding: 3px; gap: 2px; height: 36px; }
html[data-theme="kai"] .at-segment > button { border-radius: 999px; color: var(--kai-dim); font-weight: 500; }
html[data-theme="kai"] .at-segment > button + button { border-left: 0; }
html[data-theme="kai"] .at-segment > button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-theme="kai"] .at-segment > button.active { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-segment.sm { height: 32px; }
html[data-theme="kai"] .at-pill-badge { border-radius: 6px; border: 0; background: var(--kai-raised); color: #fff; font-weight: 500; font-size: 1.1rem; }
html[data-theme="kai"] .at-pill-badge.sub { background: var(--kai-primary-20); color: var(--kai-primary); }
html[data-theme="kai"] .at-pill-badge.dub { background: var(--kai-green-20); color: var(--kai-green); }
html[data-theme="kai"] .at-pill-badge.mana { color: var(--kai-gold); }
html[data-theme="kai"] .at-pill-badge.airing { color: var(--kai-green); background: var(--kai-green-10); }
html[data-theme="kai"] .at-pill-badge.new { background: var(--kai-green); color: #04140a; }
html[data-theme="kai"] .at-pill-badge.live { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-pill-badge.adult { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-thumb .tl .at-pill-badge { background: rgba(12, 17, 22, .85); }
html[data-theme="kai"] .at-thumb .dur, html[data-theme="kai"] .at-thumb .pv-tag, html[data-theme="kai"] .at-ep .th .dur { border-radius: 6px; background: rgba(12, 17, 22, .85); }
html[data-theme="kai"] .at-tooltip { background: var(--kai-raised-2); border-radius: var(--kai-r-sm); }

/* ---- Guide / mini guide --------------------------------------------------- */
html[data-theme="kai"] #at-guide, html[data-theme="kai"] #at-mini-guide { background: var(--kai-bg); border-right: 0; }
html[data-theme="kai"] .at-guide-section { border-bottom: 1px solid rgba(255, 255, 255, .05); }
html[data-theme="kai"] .at-guide-title { color: var(--kai-dim); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; }
html[data-theme="kai"] .at-guide-item { border-radius: var(--kai-r); color: var(--kai-dim); font-weight: 400; transition: color .2s, background .2s; }
html[data-theme="kai"] .at-guide-item:hover { background: var(--kai-section); color: #fff; }
html[data-theme="kai"] .at-guide-item.active { background: var(--kai-primary); color: #fff; font-weight: 500; }
html[data-theme="kai"] .at-guide-item .at-icon { color: inherit; }
html[data-theme="kai"] .at-mini-item { border-radius: var(--kai-r); color: var(--kai-dim); }
html[data-theme="kai"] .at-mini-item:hover { background: var(--kai-section); color: #fff; }
html[data-theme="kai"] .at-mini-item.active { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-guide-footer a:hover { color: var(--kai-green); }
html[data-theme="kai"] .at-guide-item .dot { background: var(--kai-green); }
html[data-theme="kai"] .at-guide-item .live-dot { background: var(--kai-primary); box-shadow: 0 0 0 2px var(--kai-bg); }

/* ---- Bottom nav (phone) --------------------------------------------------- */
html[data-theme="kai"] #at-bottomnav { background: var(--kai-bg); border-top: 0; }
html[data-theme="kai"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-bottomnav { background: transparent; }
html[data-theme="kai"] #at-bottomnav::before { background: var(--at-frost-mobile); border-top: 0; -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); }
html[data-theme="kai"] #at-bottomnav a, html[data-theme="kai"] #at-bottomnav button { color: var(--kai-dim); }
html[data-theme="kai"] #at-bottomnav .active { color: var(--kai-primary); }
html[data-theme="kai"] #at-bottomnav .create .at-icon { border-color: var(--kai-primary); color: var(--kai-primary); }

/* ---- Menus / popups / sheets / modals / toasts --------------------------- */
html[data-theme="kai"] .at-menu, html[data-theme="kai"] .at-popup { background: var(--kai-raised); border: 0; border-radius: var(--kai-r-lg); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .75); }
html[data-theme="kai"] .at-menu { overflow: visible; }
html[data-theme="kai"] .at-popup { overflow: hidden; }
html[data-theme="kai"] .at-menu-item { border-radius: var(--kai-r-sm); color: #fff; font-weight: 400; margin: 0 8px; width: calc(100% - 16px); transition: background .15s, color .15s; }
html[data-theme="kai"] .at-menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-theme="kai"] .at-menu-item.active, html[data-theme="kai"] .at-menu-item.checked { background: var(--kai-primary-10); color: var(--kai-primary); }
html[data-theme="kai"] .at-menu-item .at-icon { color: inherit; }
html[data-theme="kai"] .at-menu-item .check { color: var(--kai-primary); }
html[data-theme="kai"] .at-menu-sep { background: rgba(255, 255, 255, .06); margin: 8px 16px; }
html[data-theme="kai"] .at-menu-title { color: var(--kai-dim); font-weight: 500; }
html[data-theme="kai"] .at-menu-head .link { color: var(--kai-green); font-weight: 500; }
html[data-theme="kai"] .at-menu-mana { border-radius: var(--kai-r); background: var(--kai-section); border: 0; }
html[data-theme="kai"] .at-popup-head { border-bottom: 1px solid rgba(255, 255, 255, .06); font-weight: 500; }
html[data-theme="kai"] .at-sheet, html[data-theme="kai"] .at-sheet-menu-panel { background: var(--kai-raised); border-top: 0; border-radius: var(--kai-r-lg) var(--kai-r-lg) 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, .55); }
html[data-theme="kai"] .at-sheet-handle { background: rgba(255, 255, 255, .25); }
html[data-theme="kai"] .at-sheet-head, html[data-theme="kai"] .at-sheet-menu-head { font-weight: 500; }
html[data-theme="kai"] .at-modal { background: var(--kai-section); border: 0; border-radius: var(--kai-r-lg); box-shadow: 0 30px 70px -10px rgba(0, 0, 0, .8); }
html[data-theme="kai"] .at-modal-head { border-bottom: 0; font-weight: 500; font-size: 1.8rem; }
html[data-theme="kai"] .at-modal-foot { border-top: 0; }
html[data-theme="kai"] .at-modal-scrim { background: rgba(0, 0, 0, .7); }
html[data-theme="kai"] .at-toast { background: var(--kai-raised-2); color: #fff; border: 0; border-radius: var(--kai-r); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
html[data-theme="kai"] .at-toast button { color: var(--kai-green); font-weight: 500; }

/* ---- Cards / thumbs / posters / rows --------------------------------------- */
html[data-theme="kai"] .at-card { transition: none; }
html[data-theme="kai"] .at-card:hover { transform: none; }
html[data-theme="kai"] .at-thumb { border-radius: var(--kai-r); background: var(--kai-section); border: 0; box-shadow: none; }
html[data-theme="kai"] .at-poster-card .pc-img img { transition: opacity .25s, filter .25s; }
html[data-theme="kai"] .at-card:hover .at-thumb { border-radius: var(--kai-r); box-shadow: none; }
/* Dim the poster only when the card has no episode frame. A hover opacity on every thumb img was painting the cover back over the preview. */
html[data-theme="kai"] .at-card:hover .at-thumb:not(:has(> img.pv-img)) > img.poster-fit,
html[data-theme="kai"] .at-poster-card:hover .pc-img > img { opacity: .5; filter: blur(1px); }
html[data-theme="kai"] .at-thumb .progress, html[data-theme="kai"] .at-ep .th .progress, html[data-theme="kai"] .at-player-bar, html[data-theme="kai"] .at-thumb .pv-bar { background: rgba(255, 255, 255, .25); }
html[data-theme="kai"] .at-thumb .progress i, html[data-theme="kai"] .at-ep .th .progress i, html[data-theme="kai"] .at-player-bar i, html[data-theme="kai"] .at-thumb .pv-bar i { background: var(--kai-primary); }
html[data-theme="kai"] .at-thumb .hover-play { background: transparent; }
html[data-theme="kai"] .at-thumb .hover-play .at-icon { color: #fff; }
html[data-theme="kai"] .at-card-title { font-weight: 500; color: var(--kai-dim); transition: color .2s; }
html[data-theme="kai"] .at-card:hover .at-card-title, html[data-theme="kai"] .at-poster-card:hover .pc-title { color: #fff; }
html[data-theme="kai"] .at-card-meta { color: var(--kai-dim); font-weight: 300; }
html[data-theme="kai"] .at-card-menu { border-radius: 50%; background: rgba(12, 17, 22, .8); color: #fff; }
html[data-theme="kai"] .at-poster-card .pc-img { border-radius: var(--kai-r); border: 0; box-shadow: none; background: var(--kai-section); transition: none; }
html[data-theme="kai"] .at-poster-card:hover .pc-img { transform: none; box-shadow: none; }
html[data-theme="kai"] .at-poster-card .rank {
  left: 10px; top: 10px; font-size: 1.3rem; font-weight: 500; line-height: 1; color: #fff; opacity: 1; text-shadow: none;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(12, 17, 22, .75); transition: background .2s, border-color .2s;
}
html[data-theme="kai"] .at-poster-card:hover .rank { background: var(--kai-primary); border-color: var(--kai-primary); }
html[data-theme="kai"] .at-poster-card .pc-title { font-weight: 500; color: var(--kai-dim); transition: color .2s; }
html[data-theme="kai"] .at-row, html[data-theme="kai"] .at-compact { border-radius: var(--kai-r); transition: background .2s; }
html[data-theme="kai"] .at-row:hover, html[data-theme="kai"] .at-compact:hover { transform: none; background: var(--kai-section); }
html[data-theme="kai"] .at-row .at-thumb, html[data-theme="kai"] .at-compact .at-thumb { border-radius: var(--kai-r); }
html[data-theme="kai"] .at-compact.is-now { background: var(--kai-primary-10); }

/* ---- Shelf heads ---------------------------------------------------------- */
html[data-theme="kai"] .at-shelf-head { border-bottom: 0; margin-bottom: 14px; }
html[data-theme="kai"] .at-shelf-title { font-weight: 500; font-size: 2rem; letter-spacing: 0; }
html[data-theme="kai"] .at-shelf-title small { color: var(--kai-dim); font-weight: 400; }
html[data-theme="kai"] .at-shelf-head .at-icon.brand { color: var(--kai-primary); }
html[data-theme="kai"] .at-shelf-head .at-btn.ghost { color: #fff; font-weight: 400; }
html[data-theme="kai"] .at-shelf-head .at-btn.ghost:hover { color: var(--kai-green); background: transparent; }
html[data-theme="kai"] .at-shelf-divider { background: rgba(255, 255, 255, .05); }
html[data-theme="kai"] .at-shelf-arrow { background: var(--kai-raised); border: 0; color: #fff; box-shadow: none; width: 36px; height: 36px; border-radius: 50%; transition: background .2s, color .2s; }
html[data-theme="kai"] .at-shelf-arrow:hover { background: var(--kai-primary); color: #fff; }
html[data-theme="kai"] .at-page-head h1 { font-weight: 600; font-style: italic; letter-spacing: -.01em; }
html[data-theme="kai"] .at-page-head .at-icon.big { color: var(--kai-primary); }

/* ---- Hero ----------------------------------------------------------------- */
html[data-theme="kai"] .at-hero-viewport, html[data-theme="kai"] .at-hero-track { border-radius: var(--kai-r-lg); border: 0; background: var(--kai-bg); }
html[data-theme="kai"] .at-hero-slide .shade { background: linear-gradient(90deg, #0c1116 18%, rgba(12, 17, 22, .8) 52%, rgba(12, 17, 22, .4) 72%, rgba(12, 17, 22, 0) 100%), linear-gradient(0deg, #0c1116 0%, rgba(12, 17, 22, .4) 32%, transparent 60%); }
html[data-theme="kai"] .at-hero-kicker { color: var(--kai-primary); font-weight: 500; letter-spacing: .06em; font-size: 1.2rem; }
html[data-theme="kai"] .at-hero-title { font-weight: 700; font-style: italic; letter-spacing: -.02em; }
html[data-theme="kai"] .at-hero-meta .at-pill-badge { background: rgba(12, 17, 22, .7); color: #fff; height: 26px; padding: 0 10px; font-weight: 400; font-size: 1.2rem; }
html[data-theme="kai"] .at-hero-desc { color: var(--kai-dim); font-weight: 300; }
html[data-theme="kai"] .at-hero-nav .at-shelf-arrow { width: 44px; height: 44px; background: rgba(12, 17, 22, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme="kai"] .at-hero-dots i { height: 6px; width: 6px; border-radius: 999px; background: rgba(255, 255, 255, .3); transition: width .3s, background-color .3s; }
html[data-theme="kai"] .at-hero-dots i.on { width: 24px; background: var(--kai-primary); }
@media (max-width: 791px) {
  html[data-theme="kai"] .at-hero-slide .shade { background: linear-gradient(0deg, #0c1116 0%, rgba(12, 17, 22, .6) 45%, rgba(12, 17, 22, .1) 100%); }
  html[data-theme="kai"] .at-hero-btns .at-btn { height: 42px; padding: 0 18px; font-size: 1.3rem; }
}

/* ---- Tabs ----------------------------------------------------------------- */
html[data-theme="kai"] .at-tabs { border-bottom: 0; gap: 6px; }
html[data-theme="kai"] .at-tab { color: var(--kai-dim); font-weight: 400; border-radius: 999px; height: 40px; padding: 0 18px; transition: color .2s, background .2s; }
html[data-theme="kai"] .at-tab:hover { color: #fff; background: var(--kai-section); }
html[data-theme="kai"] .at-tab.active { color: #fff; background: var(--kai-primary); font-weight: 500; }
html[data-theme="kai"] .at-tab.active::after { display: none; }
html[data-theme="kai"] .at-tab .count { color: inherit; opacity: .75; }

/* ---- Panels / episodes ----------------------------------------------------- */
html[data-theme="kai"] .at-panel { border: 0; border-radius: var(--kai-r-lg); background: var(--kai-section); box-shadow: none; }
html[data-theme="kai"] .at-panel-head { background: transparent; border-bottom: 0; }
html[data-theme="kai"] .at-panel-head h3 { font-weight: 500; }
html[data-theme="kai"] .at-panel-head .ph-count { border-radius: 999px; background: var(--kai-raised); font-weight: 500; }
html[data-theme="kai"] .at-panel-head .ph-bar { background: rgba(255, 255, 255, .08); }
html[data-theme="kai"] .at-panel-head .ph-bar i { background: var(--kai-green); }
html[data-theme="kai"] .at-panel-head .airing { color: var(--kai-green); }
html[data-theme="kai"] .at-panel-tools, html[data-theme="kai"] .at-panel-foot { background: var(--kai-raised); border-top: 0; }
html[data-theme="kai"] .at-panel-list { background: transparent; }
html[data-theme="kai"] .at-ep { border-radius: var(--kai-r-sm); }
html[data-theme="kai"] .at-ep:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="kai"] .at-ep.active { background: var(--kai-primary-10); }
html[data-theme="kai"] .at-ep.active::before { background: var(--kai-primary); border-radius: 2px; }
html[data-theme="kai"] .at-ep .et { font-weight: 400; }
html[data-theme="kai"] .at-epgrid a { border-radius: var(--kai-r-sm); background: var(--kai-raised); border: 0; font-weight: 400; }
html[data-theme="kai"] .at-epgrid a:hover { background: var(--kai-raised-2); color: #fff; }
html[data-theme="kai"] .at-epgrid a.active { background: var(--kai-primary); color: #fff; box-shadow: none; }
html[data-theme="kai"] .at-epgrid a.active::after { background: #fff; border-color: #fff; }
html[data-theme="kai"] .at-epgrid a.watched:not(.active) { background: var(--kai-green-10); color: var(--kai-green); }
html[data-theme="kai"] .at-epgrid a.watched:not(.active)::after, html[data-theme="kai"] .at-epgrid a .ck, html[data-theme="kai"] .at-panel-foot .sw.seen, html[data-theme="kai"] .at-panel-foot .lg-ck .at-icon { color: var(--kai-green); background-color: var(--kai-green); border-color: var(--kai-green); }
html[data-theme="kai"] .at-epgrid a .ck, html[data-theme="kai"] .at-panel-foot .lg-ck .at-icon { background: none; }
html[data-theme="kai"] .at-epgrid a .gp { background: var(--kai-primary); }
html[data-theme="kai"] .at-epgrid a.dub::before, html[data-theme="kai"] .at-panel-foot .sw.dub { background: var(--kai-green); }
html[data-theme="kai"] .at-ctrl-btn.at-chip.active { background: var(--kai-primary) !important; color: #fff !important; }
html[data-theme="kai"] .at-ctrl-btn.at-toggle.on::after { background: #fff; }

/* ---- Inputs / fields / selects / switches --------------------------------- */
html[data-theme="kai"] .at-input, html[data-theme="kai"] .at-select { border-radius: var(--kai-r-sm); background: var(--kai-input); border: 0; }
html[data-theme="kai"] .at-input:hover, html[data-theme="kai"] .at-select:hover { background: var(--kai-raised-2); }
html[data-theme="kai"] .at-input:focus-within, html[data-theme="kai"] .at-select:focus-within { box-shadow: 0 0 0 2px var(--kai-primary-35); }
html[data-theme="kai"] .at-select select option { color: #fff; background: var(--kai-input); }
html[data-theme="kai"] .at-field input, html[data-theme="kai"] .at-field textarea { background: var(--kai-input); border: 1px solid transparent; border-radius: var(--kai-r-sm); font-weight: 400; }
html[data-theme="kai"] .at-field input:focus, html[data-theme="kai"] .at-field textarea:focus { border: 1px solid var(--kai-primary); padding: 0 14px; box-shadow: 0 0 0 3px var(--kai-primary-20); }
html[data-theme="kai"] .at-field textarea:focus { padding: 14px; }
html[data-theme="kai"] .at-field input::placeholder { color: var(--kai-dim-2); }
html[data-theme="kai"] .at-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px var(--kai-input) inset; caret-color: #fff; }
html[data-theme="kai"] .at-field label { background: var(--kai-bg); color: var(--kai-dim); font-weight: 400; }
html[data-theme="kai"] .at-modal .at-field label, html[data-theme="kai"] .at-panel .at-field label, html[data-theme="kai"] .at-post .at-field label, html[data-theme="kai"] .at-signin-card .at-field label { background: var(--kai-section); }
html[data-theme="kai"] .at-composer textarea:focus { border-bottom: 2px solid var(--kai-primary); }
html[data-theme="kai"] .at-switch { background: rgba(255, 255, 255, .2); }
html[data-theme="kai"] .at-switch::after { background: #fff; }
html[data-theme="kai"] .at-switch.on { background: var(--kai-primary-35); }
html[data-theme="kai"] .at-switch.on::after { background: var(--kai-primary); }
html[data-theme="kai"] .at-shop-pill { border-radius: var(--kai-r-sm); background: var(--kai-input); box-shadow: none; }

/* ---- Notices / alerts / signin / stats / mana ------------------------------ */
html[data-theme="kai"] .at-notice, html[data-theme="kai"] .at-alert { border-radius: var(--kai-r); background: var(--kai-section); border: 0; color: #fff; }
html[data-theme="kai"] .at-notice > svg, html[data-theme="kai"] .at-notice > .at-ico, html[data-theme="kai"] .at-alert .at-icon { color: var(--kai-primary); }
html[data-theme="kai"] .at-notice b { color: #fff; font-weight: 500; }
html[data-theme="kai"] .at-signin-card, html[data-theme="kai"] .at-stat { border-radius: var(--kai-r-lg); border: 0; background: var(--kai-section); box-shadow: none; }
html[data-theme="kai"] .at-signin-card .ic { border-radius: 50%; background: var(--kai-primary-10); color: var(--kai-primary); border: 0; }
html[data-theme="kai"] .at-stat .v { font-weight: 600; }
html[data-theme="kai"] .at-stat .l { color: var(--kai-dim); font-weight: 400; }
html[data-theme="kai"] .at-mana-card { border-radius: var(--kai-r-lg); border: 0; background: var(--kai-section); }
html[data-theme="kai"] .at-mana-card .mv { color: var(--kai-gold); font-weight: 600; }
html[data-theme="kai"] .at-mana-card .today .bar { background: rgba(255, 255, 255, .08); }
html[data-theme="kai"] .at-mana-card .today .bar i { background: var(--kai-gold); }
html[data-theme="kai"] .at-empty h2 { font-weight: 500; }
html[data-theme="kai"] .at-search-meta b { color: var(--kai-primary); font-weight: 500; }
html[data-theme="kai"] .at-auth-brand .at-logo-text { font-style: italic; }
html[data-theme="kai"] .at-auth-link, html[data-theme="kai"] .at-auth-legal a { color: var(--kai-green); font-weight: 500; }

/* ---- Community posts / comments ------------------------------------------- */
html[data-theme="kai"] .at-post { background: var(--kai-section); border: 0; border-radius: var(--kai-r-lg); transition: background .2s; }
html[data-theme="kai"] .at-post:hover { transform: none; background: #131920; box-shadow: none; }
/* Open post reads as the page, not a second card. Feed cards stay raised. */
html[data-theme="kai"] .at-community.is-post .at-post[data-post],
html[data-theme="kai"] .at-community.is-post .at-post[data-post]:hover {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="kai"] .at-post .p-title { font-weight: 500; }
html[data-theme="kai"] .at-post .p-ref { background: var(--kai-raised); border: 0; border-radius: var(--kai-r); }
html[data-theme="kai"] .at-post .p-actions .cnt { color: var(--kai-dim); font-weight: 400; }
html[data-theme="kai"] .at-poll .po { border: 0; background: var(--kai-raised); border-radius: var(--kai-r-sm); }
html[data-theme="kai"] .at-poll .po .bar { background: var(--kai-primary-20); }
html[data-theme="kai"] .at-poll .po.on { box-shadow: inset 0 0 0 1px var(--kai-primary); }
html[data-theme="kai"] .at-comment { --rail: rgba(255, 255, 255, .12); }
html[data-theme="kai"] .at-composer { background: var(--kai-section); border-radius: var(--kai-r); }

/* ---- Mana shop -------------------------------------------------------------- */
html[data-theme="kai"] .at-shop-item { border-radius: var(--kai-r-lg); border: 0; background: var(--kai-section); box-shadow: none; transition: background .2s; }
html[data-theme="kai"] .at-shop-item:hover { transform: none; background: var(--kai-raised); box-shadow: none; }
html[data-theme="kai"] .at-shop-item.owned { box-shadow: inset 0 0 0 1px var(--kai-green-20); }
html[data-theme="kai"] .at-sh-stage, html[data-theme="kai"] .at-sm-stage { border-radius: var(--kai-r); border: 0; background: var(--kai-raised); }
html[data-theme="kai"] .at-shop-item .nm { font-weight: 500; }
html[data-theme="kai"] .at-shop-item .pr { color: var(--kai-gold); font-weight: 600; }
html[data-theme="kai"] .at-shop-item .pr.owned { color: var(--kai-green); }
html[data-theme="kai"] .at-sh-buyers { border-radius: 999px; background: rgba(12, 17, 22, .8); border: 0; color: #fff; font-weight: 500; }
html[data-theme="kai"] .at-sh-ribbon { background: var(--kai-primary); color: #fff; border: 0; border-radius: 6px; font-weight: 500; }
html[data-theme="kai"] .at-sm-rows { border-top: 1px dashed var(--kai-line); }
html[data-theme="kai"] .at-shop-sbtn.has-q::after { background: var(--kai-primary); }

/* ---- Skeletons / bars / misc ------------------------------------------------ */
html[data-theme="kai"] .at-sk { background: linear-gradient(90deg, #11161b 25%, #1c2228 50%, #11161b 75%); background-size: 200% 100%; }
html[data-theme="kai"] .at-chipbar .fade { background: linear-gradient(90deg, transparent, var(--kai-bg) 60%); }
html[data-theme="kai"] .at-filterbar, html[data-theme="kai"] .at-shop-bar { background: rgba(12, 17, 22, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 791px) {
  html[data-theme="kai"] .at-filterbar, html[data-theme="kai"] .at-shop-bar { background: var(--at-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html[data-theme="kai"] .at-xp .bar i, html[data-theme="kai"] .at-rkh .bar i { background: var(--kai-primary); }
html[data-theme="kai"] .at-lv polygon, html[data-theme="kai"] .at-mh-lv polygon { fill: var(--kai-raised); stroke: var(--kai-primary); }
html[data-theme="kai"] .at-lv .lv small, html[data-theme="kai"] .at-mh-lv .lv small { color: var(--kai-primary); }
html[data-theme="kai"] .at-tier .tl { border-radius: var(--kai-r-sm); }
html[data-theme="kai"] .at-notif.unread { background: var(--kai-primary-10); }
html[data-theme="kai"] .at-live-card { background: var(--kai-section); border: 0; border-radius: var(--kai-r-lg); }
html[data-theme="kai"] .at-trend-post .n { color: var(--kai-primary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="kai"] .at-poster-card .pc-img img { transition: none; }
}
html[data-theme="kai"] body.at-reduced-motion .at-card:hover .at-thumb:not(:has(> img.pv-img)) > img.poster-fit,
html[data-theme="kai"] body.at-reduced-motion .at-poster-card:hover .pc-img > img { filter: none; opacity: 1; }
html[data-theme="kai"] body.at-reduced-motion #at-masthead, html[data-theme="kai"] body.at-reduced-motion #at-bottomnav, html[data-theme="kai"] body.at-reduced-motion .at-filterbar { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--kai-bg); }

/* =========================================================================
   THEME: Classic (the original Anikoto look — navy #0b1622 page, solid #142030
   header, steel-blue text #a0b1c5, sky-blue accent #26a3d6, 5px corners,
   Nunito body + Bebas Neue display titles, Bootstrap-style sub/dub tags).
   Stored id "classic". Scoped to html[data-theme="classic"]. Never touches dark/blue/light/volt/kai.
   ========================================================================= */
html[data-theme="classic"] {
  color-scheme: dark;
  --at-frost: rgba(20, 32, 48, .92);
  --at-frost-mobile: rgba(20, 32, 48, .92);
  --cl-primary: #26a3d6;
  --cl-primary-hover: #3caedc;
  --cl-primary-link: #54b8e1;
  --cl-primary-deep: #1e82ab;
  --cl-primary-10: rgba(38, 163, 214, .1);
  --cl-primary-20: rgba(38, 163, 214, .2);
  --cl-primary-50: rgba(38, 163, 214, .5);
  --cl-sub: #0084b9;
  --cl-dub: #b1495c;
  --cl-total: #2a3f5c;
  --cl-green: #28a745;
  --cl-gold: #ffc107;
  --cl-red: #dc3545;
  --cl-bg: #0b1622;
  --cl-header: #142030;
  --cl-menu: #111b29;
  --cl-input: #101925;
  --cl-raised: #172537;
  --cl-raised-2: #1f3149;
  --cl-dropdown: #19273b;
  --cl-secondary: #20334d;
  --cl-light: #3e526c;
  --cl-light-hover: #48607e;
  --cl-line: #1c2c42;
  --cl-text: #a0b1c5;
  --cl-text-2: #8097b2;
  --cl-text-3: #515f75;
  --cl-r: 5px;
  --cl-r-lg: 10px;
  --cl-r-md: 8px;
  --cl-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;

  --at-font: "Nunito", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-bg: var(--cl-bg);
  --at-bg-raised: var(--cl-header);
  --at-bg-menu: var(--cl-menu);
  --at-bg-input: var(--cl-input);
  --at-bg-search-btn: var(--cl-input);
  --at-text: #ffffff;
  --at-text-2: var(--cl-text);
  --at-text-3: var(--cl-text-3);
  --at-chip: var(--cl-raised);
  --at-chip-hover: var(--cl-raised-2);
  --at-layer-10: rgba(160, 177, 197, .16);
  --at-layer-5: rgba(160, 177, 197, .08);
  --at-hover: rgba(160, 177, 197, .08);
  --at-border: var(--cl-line);
  --at-cta: var(--cl-primary);
  --at-brand-btn: var(--cl-primary);
  --at-brand-btn-text: #ffffff;
  --at-scrim: rgba(5, 10, 16, .75);
  --at-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --at-badge-bg: rgba(11, 22, 34, .85);
  --at-progress-bg: rgba(160, 177, 197, .3);
  --at-tooltip-bg: var(--cl-dropdown);
  --at-live-chat-bg: var(--cl-menu);
  --at-mana: var(--cl-gold);
  --at-red: var(--cl-red);
  --at-link: var(--cl-primary-link);
  --kc-accent: var(--cl-primary);
}
html[data-theme="classic"] body { font-family: var(--at-font); color: var(--cl-text); font-weight: 400; -webkit-font-smoothing: antialiased; }
html[data-theme="classic"] ::selection { background: var(--cl-primary); color: #fff; }
html[data-theme="classic"] { scrollbar-width: thin; scrollbar-color: var(--cl-text-3) var(--cl-header); }
html[data-theme="classic"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="classic"] ::-webkit-scrollbar-track { background: var(--cl-header); }
html[data-theme="classic"] ::-webkit-scrollbar-thumb { background: var(--cl-text-3); }
html[data-theme="classic"] ::-webkit-scrollbar-thumb:hover { background: var(--cl-text-2); }
html[data-theme="classic"] #at-guide:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
html[data-theme="classic"] h1, html[data-theme="classic"] h2, html[data-theme="classic"] h3 { color: #fff; }
html[data-theme="classic"] .p-text a, html[data-theme="classic"] .cm-text a, html[data-theme="classic"] .at-static a, html[data-theme="classic"] .at-desc a { color: var(--cl-primary); }
html[data-theme="classic"] .p-text a:hover, html[data-theme="classic"] .cm-text a:hover, html[data-theme="classic"] .at-static a:hover, html[data-theme="classic"] .at-desc a:hover { color: var(--cl-primary-link); }

/* ---- Masthead / search (solid #142030 bar, #101925 pill search, no blur) -- */
html[data-theme="classic"] #at-masthead { background: var(--cl-header); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="classic"] .at-logo-mark { background: var(--cl-primary); border-radius: 6px; }
html[data-theme="classic"] .at-logo-text { color: #fff; font-weight: 800; letter-spacing: -.02em; }
html[data-theme="classic"] .at-logo-text sup { color: var(--cl-primary); font-weight: 700; }
html[data-theme="classic"] .at-search-box { background: var(--cl-input); border: 0; border-radius: var(--cl-r-md) 0 0 var(--cl-r-md); color: var(--cl-text); }
html[data-theme="classic"] .at-search-box:focus-within { box-shadow: 0 0 0 2px var(--cl-primary-50); }
html[data-theme="classic"] .at-search-box input { color: var(--cl-text); font-weight: 500; }
html[data-theme="classic"] .at-search-box input::placeholder { color: var(--cl-text-3); }
html[data-theme="classic"] .at-search-leading, html[data-theme="classic"] .at-search-box .at-iconbtn { color: var(--cl-text-3); }
html[data-theme="classic"] .at-search-box .at-iconbtn:hover { color: var(--cl-text); background: transparent; }
html[data-theme="classic"] .at-search-box input:-webkit-autofill { -webkit-text-fill-color: var(--cl-text); -webkit-box-shadow: 0 0 0 1000px var(--cl-input) inset; }
html[data-theme="classic"] .at-search-btn { background: var(--cl-input); border: 0; border-radius: 0 var(--cl-r-md) var(--cl-r-md) 0; color: var(--cl-text-3); }
html[data-theme="classic"] .at-search-btn:hover { background: var(--cl-input); color: var(--cl-text); }
html[data-theme="classic"] .at-search-box:focus-within + .at-search-btn { box-shadow: 0 0 0 2px var(--cl-primary-50); }
html[data-theme="classic"] .at-search-random { background: var(--cl-secondary); color: var(--cl-text); border-radius: var(--cl-r-md); }
html[data-theme="classic"] .at-search-random:hover { background: var(--cl-primary); color: #fff; }
html[data-theme="classic"] #at-msearch form { background: var(--cl-input); border: 0; border-radius: var(--cl-r-md); }
html[data-theme="classic"] #at-msearch input { background: transparent; border: 0; border-radius: 0; color: var(--cl-text); }
html[data-theme="classic"] #at-msearch input::placeholder { color: var(--cl-text-3); }
html[data-theme="classic"] #at-msearch input:focus { border: 0; outline: 0; }
html[data-theme="classic"] #at-msearch .ms-ico, html[data-theme="classic"] #at-msearch .at-iconbtn { color: var(--cl-text-3); }
html[data-theme="classic"] .at-suggest { background: var(--cl-menu); border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); overflow: hidden; }
html[data-theme="classic"] .at-suggest-item:nth-child(2n+1) { background: var(--cl-header); }
html[data-theme="classic"] .at-suggest-item:hover, html[data-theme="classic"] .at-suggest-item.active { background: var(--cl-raised-2); }
html[data-theme="classic"] .at-suggest-item:hover .t, html[data-theme="classic"] .at-suggest-item.active .t { color: var(--cl-primary); }
html[data-theme="classic"] .at-suggest-item.more { color: var(--cl-primary); font-weight: 600; }
@media (max-width: 791px) {
  html[data-theme="classic"] body[data-page="search"] #at-masthead { background: var(--cl-header); }
  html[data-theme="classic"] body[data-page="search"] .at-filterbar { background: var(--cl-bg); -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 2015; }
  html[data-theme="classic"] body[data-page="search"] .at-search-box { border: 0; border-radius: var(--cl-r-md); }
}

/* ---- Icon buttons / avatar / badge count ---------------------------------- */
html[data-theme="classic"] .at-iconbtn { color: var(--cl-text); border-radius: 50%; transition: color .2s, background .2s; }
html[data-theme="classic"] .at-iconbtn:hover { color: var(--cl-primary); background: transparent; }
html[data-theme="classic"] .at-mh-end .at-iconbtn:hover { background: var(--cl-menu); color: var(--cl-primary); }
html[data-theme="classic"] .at-avatar-btn > img:not(.at-deco-img), html[data-theme="classic"] .at-avatar-btn .av > img:not(.at-deco-img), html[data-theme="classic"] .at-avatar-btn { box-shadow: 0 0 0 2px var(--cl-text-2); }
html[data-theme="classic"] .at-badge-count { background: var(--cl-red); color: #fff; border: 2px solid var(--cl-header); font-weight: 700; }

/* ---- Buttons (Bootstrap-style: primary sky, secondary navy, 5px) ---------- */
html[data-theme="classic"] .at-btn {
  border-radius: var(--cl-r); font-weight: 600; background: var(--cl-secondary); color: #fff; border: 0;
  transition: background .2s, color .2s, opacity .2s;
}
html[data-theme="classic"] .at-btn:hover { background: #284061; color: #fff; }
html[data-theme="classic"] .at-btn.primary, html[data-theme="classic"] .at-btn.cta { background: var(--cl-primary); color: #fff; font-weight: 700; }
html[data-theme="classic"] .at-btn.primary:hover, html[data-theme="classic"] .at-btn.cta:hover { background: var(--cl-primary-hover); opacity: 1; }
html[data-theme="classic"] .at-btn.primary .at-icon, html[data-theme="classic"] .at-btn.cta .at-icon { color: inherit; }
html[data-theme="classic"] .at-btn.ghost, html[data-theme="classic"] .at-btn.text, html[data-theme="classic"] .at-btn.text-cta { background: transparent; color: var(--cl-text); }
html[data-theme="classic"] .at-btn.ghost:hover, html[data-theme="classic"] .at-btn.text:hover { background: var(--cl-raised); color: #fff; }
html[data-theme="classic"] .at-btn.text-cta { color: var(--cl-primary); }
html[data-theme="classic"] .at-btn.text-cta:hover { background: var(--cl-primary-10); color: var(--cl-primary-link); }
html[data-theme="classic"] .at-btn.outline { background: transparent; border: 1px solid var(--cl-light); color: var(--cl-text); }
html[data-theme="classic"] .at-btn.outline:hover { background: var(--cl-light); border-color: var(--cl-light); color: #fff; }
html[data-theme="classic"] .at-btn.lg { border-radius: var(--cl-r-md); font-size: 1.4rem; }
html[data-theme="classic"] .at-btn.icon-only { border-radius: var(--cl-r); }
html[data-theme="classic"] .at-btn[disabled] { opacity: .65; }
html[data-theme="classic"] .at-modal-foot .at-btn.cta:hover { opacity: 1; }
html[data-theme="classic"] .at-composer .cf-actions .at-btn.cta[disabled],
html[data-theme="classic"] .at-composer .cf-actions .at-btn.cta[disabled]:hover { background: var(--cl-secondary); color: var(--cl-text-3); }
html[data-theme="classic"] .at-hero-btns { gap: 15px; }
html[data-theme="classic"] .at-hero-btns .at-btn { border-radius: var(--cl-r-md); height: 48px; padding: 0 28px; font-size: 1.6rem; font-weight: 800; text-transform: uppercase; box-shadow: none; }
html[data-theme="classic"] .at-hero-btns .at-btn.primary { background: var(--cl-primary); color: #f8f8f8; }
html[data-theme="classic"] .at-hero-btns .at-btn.primary:hover { background: var(--cl-primary-hover); color: #fff; }
html[data-theme="classic"] .at-hero-btns .at-btn.glass { background: var(--cl-secondary); color: #fff; border: 0; }
html[data-theme="classic"] .at-hero-btns .at-btn.glass:hover { background: #284061; color: #fff; }
html[data-theme="classic"] .at-hero-btns .at-btn.glass .at-icon { color: #fff; }

/* ---- Chips / segments / pills (sub #0084b9, dub #b1495c) ------------------ */
html[data-theme="classic"] .at-chip { border-radius: var(--cl-r); background: var(--cl-raised); color: var(--cl-text); border: 0; font-weight: 600; transition: background .2s, color .2s; }
html[data-theme="classic"] .at-chip:hover { background: var(--cl-raised-2); color: #fff; }
html[data-theme="classic"] .at-chip.active, html[data-theme="classic"] .at-chip[aria-pressed="true"] { background: var(--cl-primary); color: #fff; }
html[data-theme="classic"] .at-chip.outline { background: transparent; border: 1px solid var(--cl-light); }
html[data-theme="classic"] .at-segment { border-radius: var(--cl-r); background: var(--cl-raised); border: 0; height: 36px; }
html[data-theme="classic"] .at-segment > button { border-radius: 0; color: var(--cl-text-2); font-weight: 600; }
html[data-theme="classic"] .at-segment > button + button { border-left: 1px solid var(--cl-line); }
html[data-theme="classic"] .at-segment > button:hover { background: var(--cl-raised-2); color: #fff; }
html[data-theme="classic"] .at-segment > button.active { background: var(--cl-primary); color: #fff; }
html[data-theme="classic"] .at-segment.sm { height: 32px; }
html[data-theme="classic"] .at-pill-badge { border-radius: 3px; border: 0; background: var(--cl-total); color: rgba(255, 255, 255, .8); font-weight: 700; font-size: 1.1rem; }
html[data-theme="classic"] .at-pill-badge.sub { background: var(--cl-sub); color: rgba(255, 255, 255, .9); }
html[data-theme="classic"] .at-pill-badge.dub { background: var(--cl-dub); color: rgba(255, 255, 255, .9); }
html[data-theme="classic"] .at-pill-badge.mana { color: var(--cl-gold); background: var(--cl-raised); }
html[data-theme="classic"] .at-pill-badge.airing { color: #fff; background: var(--cl-green); }
html[data-theme="classic"] .at-pill-badge.new { background: var(--cl-gold); color: #0b1622; }
html[data-theme="classic"] .at-pill-badge.live { background: var(--cl-red); color: #fff; }
html[data-theme="classic"] .at-pill-badge.adult { background: var(--cl-red); color: #fff; }
html[data-theme="classic"] .at-thumb .tl .at-pill-badge { background: rgba(11, 22, 34, .9); }
html[data-theme="classic"] .at-thumb .dur, html[data-theme="classic"] .at-thumb .pv-tag, html[data-theme="classic"] .at-ep .th .dur { border-radius: 3px; background: var(--cl-text); color: var(--cl-bg); font-weight: 700; }
html[data-theme="classic"] .at-tooltip { background: var(--cl-dropdown); color: var(--cl-text); border-radius: var(--cl-r); }

/* ---- Guide / mini guide --------------------------------------------------- */
html[data-theme="classic"] #at-guide, html[data-theme="classic"] #at-mini-guide { background: var(--cl-bg); border-right: 0; }
html[data-theme="classic"] .at-guide-section { border-bottom: 1px solid var(--cl-line); }
html[data-theme="classic"] .at-guide-title { color: var(--cl-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.1rem; }
html[data-theme="classic"] .at-guide-item { border-radius: var(--cl-r); color: var(--cl-text-2); font-weight: 600; transition: color .2s, background .2s; }
html[data-theme="classic"] .at-guide-item:hover { background: var(--cl-header); color: var(--cl-text); }
html[data-theme="classic"] .at-guide-item.active { background: var(--cl-header); color: var(--cl-primary-link); font-weight: 700; }
html[data-theme="classic"] .at-guide-item .at-icon { color: inherit; }
html[data-theme="classic"] .at-mini-item { border-radius: var(--cl-r); color: var(--cl-text-2); }
html[data-theme="classic"] .at-mini-item:hover { background: var(--cl-header); color: var(--cl-text); }
html[data-theme="classic"] .at-mini-item.active { background: var(--cl-header); color: var(--cl-primary-link); }
html[data-theme="classic"] .at-guide-footer a:hover { color: var(--cl-primary); }
html[data-theme="classic"] .at-guide-item .dot { background: var(--cl-primary); }
html[data-theme="classic"] .at-guide-item .live-dot { background: var(--cl-red); box-shadow: 0 0 0 2px var(--cl-bg); }

/* ---- Bottom nav (phone) --------------------------------------------------- */
html[data-theme="classic"] #at-bottomnav,
html[data-theme="classic"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-bottomnav {
  background: var(--cl-header); border-top: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="classic"] #at-bottomnav::before { content: none; display: none; }
html[data-theme="classic"] #at-bottomnav a, html[data-theme="classic"] #at-bottomnav button { color: var(--cl-text-2); }
html[data-theme="classic"] #at-bottomnav .active { color: var(--cl-primary); }
html[data-theme="classic"] #at-bottomnav .create .at-icon { border-color: var(--cl-primary); color: var(--cl-primary); }

/* ---- Menus / popups / sheets / modals / toasts (#19273b dropdowns) -------- */
html[data-theme="classic"] .at-menu, html[data-theme="classic"] .at-popup { background: var(--cl-dropdown); border: 1px solid var(--cl-raised); border-radius: var(--cl-r-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html[data-theme="classic"] .at-menu { overflow: visible; }
html[data-theme="classic"] .at-popup { overflow: hidden; }
html[data-theme="classic"] .at-menu-item { border-radius: 0; color: #90a4bb; font-weight: 400; transition: background .15s, color .15s; }
html[data-theme="classic"] .at-menu-item:hover { background: var(--cl-raised-2); color: #a3b4c7; }
html[data-theme="classic"] .at-menu-item.active, html[data-theme="classic"] .at-menu-item.checked { background: var(--cl-secondary); color: var(--cl-primary-link); }
html[data-theme="classic"] .at-menu-item .at-icon { color: inherit; }
html[data-theme="classic"] .at-menu-item .check { color: var(--cl-primary-link); }
html[data-theme="classic"] .at-menu-sep { background: var(--cl-raised); margin: 6px 0; }
html[data-theme="classic"] .at-menu-title { color: var(--cl-text-3); font-weight: 600; }
html[data-theme="classic"] .at-menu-head { background: var(--cl-header); }
html[data-theme="classic"] .at-menu-head .name { color: #fff; }
html[data-theme="classic"] .at-menu-head .link { color: var(--cl-primary); font-weight: 600; }
html[data-theme="classic"] .at-menu-mana { border-radius: var(--cl-r); background: var(--cl-input); border: 0; }
html[data-theme="classic"] .at-popup-head { border-bottom: 1px solid var(--cl-raised); font-weight: 700; color: #fff; }
html[data-theme="classic"] .at-sheet, html[data-theme="classic"] .at-sheet-menu-panel { background: var(--cl-menu); border-top: 0; border-radius: var(--cl-r-lg) var(--cl-r-lg) 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
html[data-theme="classic"] .at-sheet-handle { background: var(--cl-light); }
html[data-theme="classic"] .at-sheet-head, html[data-theme="classic"] .at-sheet-menu-head { font-weight: 700; color: #fff; }
html[data-theme="classic"] .at-modal { background: var(--cl-menu); border: 0; border-radius: 9px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
html[data-theme="classic"] .at-modal-head { border-bottom: 0; font-weight: 700; color: #fff; }
html[data-theme="classic"] .at-modal-foot { border-top: 0; }
html[data-theme="classic"] .at-modal-scrim { background: rgba(5, 10, 16, .75); }
html[data-theme="classic"] .at-toast { background: var(--cl-raised); color: #fff; border: 1px solid var(--cl-raised-2); border-radius: var(--cl-r); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html[data-theme="classic"] .at-toast button { color: var(--cl-primary-link); font-weight: 700; }

/* ---- Cards / thumbs / posters / rows --------------------------------------- */
html[data-theme="classic"] .at-card { transition: none; }
html[data-theme="classic"] .at-card:hover { transform: none; }
html[data-theme="classic"] .at-thumb { border-radius: var(--cl-r); background: var(--cl-header); border: 0; box-shadow: none; }
html[data-theme="classic"] .at-card:hover .at-thumb { border-radius: var(--cl-r); box-shadow: none; }
html[data-theme="classic"] .at-poster-card .pc-img img { transition: opacity .2s; }
html[data-theme="classic"] .at-card:hover .at-thumb:not(:has(> img.pv-img)) > img.poster-fit,
html[data-theme="classic"] .at-poster-card:hover .pc-img > img { opacity: .6; }
html[data-theme="classic"] .at-thumb .progress, html[data-theme="classic"] .at-ep .th .progress, html[data-theme="classic"] .at-player-bar, html[data-theme="classic"] .at-thumb .pv-bar { background: rgba(160, 177, 197, .3); }
html[data-theme="classic"] .at-thumb .progress i, html[data-theme="classic"] .at-ep .th .progress i, html[data-theme="classic"] .at-player-bar i, html[data-theme="classic"] .at-thumb .pv-bar i { background: var(--cl-primary); }
html[data-theme="classic"] .at-thumb .hover-play { background: transparent; }
html[data-theme="classic"] .at-thumb .hover-play .at-icon { color: #fff; }
html[data-theme="classic"] .at-card-title { font-weight: 600; color: var(--cl-text); transition: color .2s; }
html[data-theme="classic"] .at-card:hover .at-card-title, html[data-theme="classic"] .at-poster-card:hover .pc-title { color: var(--cl-primary-link); }
html[data-theme="classic"] .at-card-meta { color: var(--cl-text-3); font-weight: 500; }
html[data-theme="classic"] .at-card-menu { border-radius: 50%; background: rgba(11, 22, 34, .85); color: #fff; }
html[data-theme="classic"] .at-poster-card .pc-img { border-radius: var(--cl-r); border: 0; box-shadow: none; background: var(--cl-header); transition: none; }
html[data-theme="classic"] .at-poster-card:hover .pc-img { transform: none; box-shadow: none; }
html[data-theme="classic"] .at-poster-card .rank {
  left: 0; top: 0; font-family: var(--cl-display); font-size: 1.8rem; font-weight: 400; letter-spacing: .02em; line-height: 1; color: #fff; opacity: 1; text-shadow: none;
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cl-r) 0 var(--cl-r) 0;
  border: 0; background: rgba(11, 22, 34, .9); transition: background .2s;
}
html[data-theme="classic"] .at-poster-card:hover .rank { background: var(--cl-primary); }
html[data-theme="classic"] .at-poster-card .pc-title { font-weight: 600; color: var(--cl-text); transition: color .2s; }
html[data-theme="classic"] .at-row, html[data-theme="classic"] .at-compact { border-radius: var(--cl-r); transition: background .2s; }
html[data-theme="classic"] .at-row:hover, html[data-theme="classic"] .at-compact:hover { transform: none; background: var(--cl-header); }
html[data-theme="classic"] .at-row .at-thumb, html[data-theme="classic"] .at-compact .at-thumb { border-radius: var(--cl-r); }
html[data-theme="classic"] .at-compact.is-now { background: var(--cl-primary-10); }

/* ---- Shelf heads (Bebas Neue display titles) ------------------------------ */
html[data-theme="classic"] .at-shelf-head { border-bottom: 0; margin-bottom: 12px; }
html[data-theme="classic"] .at-shelf-title { font-family: var(--cl-display); font-weight: 400; font-size: 2.6rem; letter-spacing: .03em; color: #ddd; }
html[data-theme="classic"] .at-shelf-title small { font-family: var(--at-font); color: var(--cl-text-3); font-weight: 600; letter-spacing: 0; }
html[data-theme="classic"] .at-shelf-head .at-icon.brand { color: var(--cl-primary); }
html[data-theme="classic"] .at-shelf-head .at-btn.ghost { color: var(--cl-text); font-weight: 600; }
html[data-theme="classic"] .at-shelf-head .at-btn.ghost:hover { color: var(--cl-primary-link); background: transparent; }
html[data-theme="classic"] .at-shelf-divider { background: var(--cl-line); }
html[data-theme="classic"] .at-shelf-arrow { background: var(--cl-secondary); border: 0; color: #fff; box-shadow: none; width: 36px; height: 36px; border-radius: var(--cl-r); transition: background .2s; }
html[data-theme="classic"] .at-shelf-arrow:hover { background: var(--cl-primary); color: #fff; }
html[data-theme="classic"] .at-page-head h1 { font-family: var(--cl-display); font-weight: 400; letter-spacing: .03em; font-size: 3.2rem; }
html[data-theme="classic"] .at-page-head .at-icon.big { color: var(--cl-primary); }

/* ---- Hero (uppercase 800 title, sky Watch now, navy list button) ---- */
html[data-theme="classic"] .at-hero-viewport, html[data-theme="classic"] .at-hero-track { border-radius: var(--cl-r-lg); border: 0; background: var(--cl-bg); }
html[data-theme="classic"] .at-hero-slide .shade { background: linear-gradient(90deg, #0b1622 12%, rgba(11, 22, 34, .85) 45%, rgba(11, 22, 34, .35) 70%, rgba(11, 22, 34, 0) 100%), linear-gradient(0deg, #0b1622 0%, rgba(11, 22, 34, .5) 30%, transparent 60%); }
html[data-theme="classic"] .at-hero-kicker { color: var(--cl-primary); font-weight: 700; letter-spacing: .04em; font-size: 1.2rem; text-transform: uppercase; }
html[data-theme="classic"] .at-hero-title { font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: #fff; }
html[data-theme="classic"] .at-hero-meta .at-pill-badge { height: 24px; padding: 0 8px; font-size: 1.2rem; }
html[data-theme="classic"] .at-hero-desc { color: var(--cl-text-2); font-weight: 400; }
html[data-theme="classic"] .at-hero-nav .at-shelf-arrow { width: 44px; height: 44px; background: rgba(20, 32, 48, .8); border-radius: var(--cl-r); }
html[data-theme="classic"] .at-hero-dots i { height: 8px; width: 8px; border-radius: 50%; background: rgba(160, 177, 197, .5); transition: background-color .3s; }
html[data-theme="classic"] .at-hero-dots i.on { width: 8px; background: var(--cl-primary); }
@media (max-width: 791px) {
  html[data-theme="classic"] .at-hero-slide .shade { background: linear-gradient(0deg, #0b1622 0%, rgba(11, 22, 34, .6) 45%, rgba(11, 22, 34, .1) 100%); }
  html[data-theme="classic"] .at-hero-btns .at-btn { height: 42px; padding: 0 22px; font-size: 1.4rem; }
}

/* ---- Tabs (nav-pills: active sky pill) ------------------------------------ */
html[data-theme="classic"] .at-tabs { border-bottom: 0; gap: 4px; }
html[data-theme="classic"] .at-tab { color: var(--cl-text-2); font-weight: 600; border-radius: var(--cl-r); height: 38px; padding: 0 16px; transition: color .2s, background .2s; }
html[data-theme="classic"] .at-tab:hover { color: var(--cl-text); background: var(--cl-header); }
html[data-theme="classic"] .at-tab.active { color: #fff; background: var(--cl-primary); font-weight: 700; }
html[data-theme="classic"] .at-tab.active::after { display: none; }
html[data-theme="classic"] .at-tab .count { color: inherit; opacity: .75; }

/* ---- Panels / episodes ----------------------------------------------------- */
html[data-theme="classic"] .at-panel { border: 0; border-radius: var(--cl-r); background: var(--cl-menu); box-shadow: none; }
html[data-theme="classic"] .at-panel-head { background: var(--cl-header); border-bottom: 0; }
html[data-theme="classic"] .at-panel-head h3 { font-weight: 700; color: #fff; }
html[data-theme="classic"] .at-panel-head .ph-count { border-radius: var(--cl-r); background: var(--cl-secondary); font-weight: 700; }
html[data-theme="classic"] .at-panel-head .ph-bar { background: var(--cl-secondary); }
html[data-theme="classic"] .at-panel-head .ph-bar i { background: var(--cl-primary); }
html[data-theme="classic"] .at-panel-head .airing { color: var(--cl-green); }
html[data-theme="classic"] .at-panel-tools, html[data-theme="classic"] .at-panel-foot { background: var(--cl-header); border-top: 0; }
html[data-theme="classic"] .at-panel-list { background: transparent; }
html[data-theme="classic"] .at-ep { border-radius: var(--cl-r); }
html[data-theme="classic"] .at-ep:hover { background: var(--cl-header); }
html[data-theme="classic"] .at-ep.active { background: var(--cl-primary-10); }
html[data-theme="classic"] .at-ep.active::before { background: var(--cl-primary); border-radius: 1px; }
html[data-theme="classic"] .at-ep .et { font-weight: 600; }
html[data-theme="classic"] .at-epgrid a { border-radius: 3px; background: var(--cl-secondary); border: 0; font-weight: 600; color: var(--cl-text); }
html[data-theme="classic"] .at-epgrid a:hover { background: #284061; color: #fff; }
html[data-theme="classic"] .at-epgrid a.active { background: var(--cl-primary); color: #fff; box-shadow: none; }
html[data-theme="classic"] .at-epgrid a.active::after { background: #fff; border-color: #fff; }
html[data-theme="classic"] .at-epgrid a.watched:not(.active) { background: var(--cl-raised); color: var(--cl-text-3); }
html[data-theme="classic"] .at-epgrid a.watched:not(.active)::after, html[data-theme="classic"] .at-epgrid a .ck, html[data-theme="classic"] .at-panel-foot .sw.seen, html[data-theme="classic"] .at-panel-foot .lg-ck .at-icon { color: var(--cl-primary); background-color: var(--cl-primary); border-color: var(--cl-primary); }
html[data-theme="classic"] .at-epgrid a .ck, html[data-theme="classic"] .at-panel-foot .lg-ck .at-icon { background: none; }
html[data-theme="classic"] .at-epgrid a .gp { background: var(--cl-primary); }
html[data-theme="classic"] .at-epgrid a.dub::before, html[data-theme="classic"] .at-panel-foot .sw.dub { background: var(--cl-dub); }
html[data-theme="classic"] .at-ctrl-btn.at-chip.active { background: var(--cl-primary) !important; color: #fff !important; }
html[data-theme="classic"] .at-ctrl-btn.at-toggle.on::after { background: #fff; }

/* ---- Inputs / fields / selects / switches (form-control #172537 / #20334d) - */
html[data-theme="classic"] .at-input, html[data-theme="classic"] .at-select { border-radius: var(--cl-r); background: var(--cl-raised); border: 1px solid var(--cl-secondary); color: var(--cl-text); }
html[data-theme="classic"] .at-input:hover, html[data-theme="classic"] .at-select:hover { background: #1a2a3e; }
html[data-theme="classic"] .at-input:focus-within, html[data-theme="classic"] .at-select:focus-within { background: #1a2a3e; border-color: #2f4b71; box-shadow: none; }
html[data-theme="classic"] .at-select select option { color: var(--cl-text); background: var(--cl-raised); }
html[data-theme="classic"] .at-field input, html[data-theme="classic"] .at-field textarea { background: var(--cl-raised); border: 1px solid var(--cl-secondary); border-radius: var(--cl-r); font-weight: 500; color: var(--cl-text); }
html[data-theme="classic"] .at-field input:focus, html[data-theme="classic"] .at-field textarea:focus { background: #1a2a3e; border: 1px solid #2f4b71; padding: 0 14px; box-shadow: none; }
html[data-theme="classic"] .at-field textarea:focus { padding: 14px; }
html[data-theme="classic"] .at-field input::placeholder { color: var(--cl-text-3); }
html[data-theme="classic"] .at-field input:-webkit-autofill { -webkit-text-fill-color: var(--cl-text); -webkit-box-shadow: 0 0 0 1000px var(--cl-raised) inset; caret-color: var(--cl-text); }
html[data-theme="classic"] .at-field label { background: var(--cl-bg); color: var(--cl-text-2); font-weight: 600; }
html[data-theme="classic"] .at-modal .at-field label, html[data-theme="classic"] .at-panel .at-field label, html[data-theme="classic"] .at-post .at-field label, html[data-theme="classic"] .at-signin-card .at-field label { background: var(--cl-menu); }
html[data-theme="classic"] .at-composer textarea:focus { border-bottom: 2px solid var(--cl-primary); }
html[data-theme="classic"] .at-switch { background: var(--cl-light); }
html[data-theme="classic"] .at-switch::after { background: #fff; }
html[data-theme="classic"] .at-switch.on { background: var(--cl-primary); }
html[data-theme="classic"] .at-switch.on::after { background: #fff; }
html[data-theme="classic"] .at-shop-pill { border-radius: var(--cl-r); background: var(--cl-raised); box-shadow: none; }

/* ---- Notices / alerts / signin / stats / mana ------------------------------ */
html[data-theme="classic"] .at-notice, html[data-theme="classic"] .at-alert { border-radius: var(--cl-r); background: var(--cl-header); border: 0; color: var(--cl-text); }
html[data-theme="classic"] .at-notice > svg, html[data-theme="classic"] .at-notice > .at-ico, html[data-theme="classic"] .at-alert .at-icon { color: var(--cl-primary); }
html[data-theme="classic"] .at-notice b { color: #fff; font-weight: 700; }
html[data-theme="classic"] .at-signin-card, html[data-theme="classic"] .at-stat { border-radius: var(--cl-r); border: 0; background: var(--cl-header); box-shadow: none; }
html[data-theme="classic"] .at-signin-card .ic { border-radius: 50%; background: var(--cl-primary-10); color: var(--cl-primary); border: 0; }
html[data-theme="classic"] .at-stat .v { font-weight: 700; color: #fff; }
html[data-theme="classic"] .at-stat .l { color: var(--cl-text-2); font-weight: 600; }
html[data-theme="classic"] .at-mana-card { border-radius: var(--cl-r); border: 0; background: var(--cl-header); }
html[data-theme="classic"] .at-mana-card .mv { color: var(--cl-gold); font-weight: 700; }
html[data-theme="classic"] .at-mana-card .today .bar { background: var(--cl-secondary); }
html[data-theme="classic"] .at-mana-card .today .bar i { background: var(--cl-gold); }
html[data-theme="classic"] .at-empty h2 { font-weight: 700; }
html[data-theme="classic"] .at-search-meta b { color: var(--cl-primary); font-weight: 700; }
html[data-theme="classic"] .at-auth-link, html[data-theme="classic"] .at-auth-legal a { color: var(--cl-primary); font-weight: 600; }

/* ---- Community posts / comments ------------------------------------------- */
html[data-theme="classic"] .at-post { background: var(--cl-menu); border: 0; border-radius: var(--cl-r); transition: background .2s; }
html[data-theme="classic"] .at-post:hover { transform: none; background: var(--cl-header); box-shadow: none; }
html[data-theme="classic"] .at-community.is-post .at-post[data-post],
html[data-theme="classic"] .at-community.is-post .at-post[data-post]:hover { background: transparent; border-radius: 0; box-shadow: none; }
html[data-theme="classic"] .at-post .p-title { font-weight: 700; color: var(--cl-text); }
html[data-theme="classic"] .at-post:hover .p-title { color: var(--cl-primary); }
html[data-theme="classic"] .at-post .p-ref { background: var(--cl-raised); border: 0; border-radius: var(--cl-r); }
html[data-theme="classic"] .at-post .p-actions .cnt { color: var(--cl-text-3); font-weight: 600; }
html[data-theme="classic"] .at-poll .po { border: 0; background: var(--cl-raised); border-radius: var(--cl-r); }
html[data-theme="classic"] .at-poll .po .bar { background: var(--cl-primary-20); }
html[data-theme="classic"] .at-poll .po.on { box-shadow: inset 0 0 0 1px var(--cl-primary); }
html[data-theme="classic"] .at-comment { --rail: var(--cl-secondary); }
html[data-theme="classic"] .at-composer { background: var(--cl-menu); border-radius: var(--cl-r); }

/* ---- Mana shop -------------------------------------------------------------- */
html[data-theme="classic"] .at-shop-item { border-radius: var(--cl-r); border: 0; background: var(--cl-menu); box-shadow: none; transition: background .2s; }
html[data-theme="classic"] .at-shop-item:hover { transform: none; background: var(--cl-header); box-shadow: none; }
html[data-theme="classic"] .at-shop-item.owned { box-shadow: inset 0 0 0 1px rgba(40, 167, 69, .5); }
html[data-theme="classic"] .at-sh-stage, html[data-theme="classic"] .at-sm-stage { border-radius: var(--cl-r); border: 0; background: var(--cl-raised); }
html[data-theme="classic"] .at-shop-item .nm { font-weight: 700; }
html[data-theme="classic"] .at-shop-item .pr { color: var(--cl-gold); font-weight: 700; }
html[data-theme="classic"] .at-shop-item .pr.owned { color: var(--cl-green); }
html[data-theme="classic"] .at-sh-buyers { border-radius: 3px; background: rgba(11, 22, 34, .85); border: 0; color: #fff; font-weight: 700; }
html[data-theme="classic"] .at-sh-ribbon { background: var(--cl-primary); color: #fff; border: 0; border-radius: 3px; font-weight: 700; }
html[data-theme="classic"] .at-sm-rows { border-top: 1px dashed var(--cl-line); }
html[data-theme="classic"] .at-shop-sbtn.has-q::after { background: var(--cl-primary); }

/* ---- Skeletons / bars / misc ------------------------------------------------ */
html[data-theme="classic"] .at-sk { background: linear-gradient(90deg, #142030 25%, #1f3149 50%, #142030 75%); background-size: 200% 100%; }
html[data-theme="classic"] .at-chipbar .fade { background: linear-gradient(90deg, transparent, var(--cl-bg) 60%); }
html[data-theme="classic"] .at-filterbar, html[data-theme="classic"] .at-shop-bar { background: var(--cl-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="classic"] .at-xp .bar i, html[data-theme="classic"] .at-rkh .bar i { background: var(--cl-primary); }
html[data-theme="classic"] .at-lv polygon, html[data-theme="classic"] .at-mh-lv polygon { fill: var(--cl-header); stroke: var(--cl-primary); }
html[data-theme="classic"] .at-lv .lv small, html[data-theme="classic"] .at-mh-lv .lv small { color: var(--cl-primary); }
html[data-theme="classic"] .at-tier .tl { border-radius: var(--cl-r); }
html[data-theme="classic"] .at-notif.unread { background: var(--cl-primary-10); }
html[data-theme="classic"] .at-live-card { background: var(--cl-menu); border: 0; border-radius: var(--cl-r); }
html[data-theme="classic"] .at-trend-post .n { color: var(--cl-primary); font-weight: 700; }
html[data-theme="classic"] .at-banner { border-radius: var(--cl-r); }
html[data-theme="classic"] .at-ch-meta h1 { color: #fff; }
html[data-theme="classic"] .at-ch-links a { color: var(--cl-primary); }
html[data-theme="classic"] .at-ob-foot .at-btn.primary { border-radius: var(--cl-r-md); }
html[data-theme="classic"] body.at-reduced-motion .at-card:hover .at-thumb:not(:has(> img.pv-img)) > img.poster-fit,
html[data-theme="classic"] body.at-reduced-motion .at-poster-card:hover .pc-img > img { opacity: 1; }

/* Classic keeps a solid header on every width, like the original site. The shared desktop frost
   (body::before, blur 48px) is painted behind the bar and never shows through. */
@media (min-width: 792px) {
  html[data-theme="classic"]:not(.at-reduced-motion) body:not(.at-reduced-motion)::before { display: none; }
  html[data-theme="classic"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-masthead { background: var(--cl-header); }
  html[data-theme="classic"]:not(.at-reduced-motion) body:not(.at-reduced-motion) .at-chipbar { background: var(--cl-bg); }
}

/* Equipped avatar frame — every theme. Photo rules must not crop or resize .at-deco-img. */
.at-composer .av,
.at-friend-row .av,
.at-menu-head .av,
.at-guide-item .av,
.at-avatar-btn,
.at-avatar-btn .av,
.wc-box .av,
.at-rv-row .av,
.at-ch-avatar,
.at-ch-head,
.at-comment .av,
.at-post .p-head .av,
.at-upost-head .av {
  overflow: visible;
}
.at-composer .av > .at-deco-img,
.at-friend-row .av > .at-deco-img,
.at-menu-head .av > .at-deco-img,
.at-guide-item .av > .at-deco-img,
.at-avatar-btn .at-deco-img,
.wc-box .av > .at-deco-img,
.at-rv-row .av > .at-deco-img,
.at-comment .av > .at-deco-img,
.at-post .p-head .av > .at-deco-img,
.at-upost-head .av > .at-deco-img,
.at-ch-avatar > .at-deco-img {
  position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none;
  border-radius: 0; object-fit: contain; pointer-events: none; z-index: 2;
}

/* Volt/Coral masthead backgrounds sit above the shared YouTube frost (body::before, blur 48px)
   and hide it. Desktop: clear the bar so that layer shows. Mobile header stays solid, same as YouTube. */
@media (min-width: 792px) and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-theme="volt"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-masthead,
    html[data-theme="kai"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-masthead {
      background: transparent;
      border-bottom-color: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* -------------------------------------------------------------------------
   New-account walkthrough (#at-onboarding). Two steps: Look, You. Shown once when
   /api/me settings.onboarded = 0. Sits under the modal scrim (3800) so the photo
   crop opens above it. Every dialog color is a theme token, so Volt / Coral / Light all fit.
   ------------------------------------------------------------------------- */
.at-ob-scrim { position: fixed; inset: 0; z-index: 3750; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--at-scrim); }
.at-ob-scrim.open { display: flex; animation: at-fade-in var(--at-t) ease-out; }
.at-ob { width: 100%; max-width: 780px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--at-bg-menu); color: var(--at-text); border-radius: 20px; box-shadow: var(--at-shadow); overflow: hidden; }
.at-ob-scrim.open .at-ob { animation: at-modal-in var(--at-t-slow) var(--at-ease); }
.at-ob-top { display: flex; align-items: center; gap: 12px; padding: 14px 12px 0 24px; }
.at-ob-prog { display: flex; gap: 4px; width: 64px; }
.at-ob-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--at-layer-10); transition: background var(--at-t); }
.at-ob-prog i.on { background: var(--at-cta); }
.at-ob-stepno { font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--at-text-2); }
.at-ob-top .at-btn { margin-left: auto; color: var(--at-text-2); }
.at-ob-body { padding: 18px 24px 8px; overflow-y: auto; }
.at-ob-hero h2 { margin: 0 0 6px; font-size: 2.8rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.at-ob-hero p { margin: 0 0 20px; max-width: 520px; font-size: 1.5rem; line-height: 1.5; color: var(--at-text-2); }
.at-ob-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.at-ob-list { display: flex; flex-direction: column; gap: 6px; }
.at-ob-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--at-t), border-color var(--at-t); }
.at-ob-opt:hover { background: var(--at-hover); }
.at-ob-opt.on { border-color: var(--at-cta); background: var(--at-hover); }
.at-ob-opt:focus-visible { outline: 2px solid var(--at-cta); outline-offset: 1px; }
.at-ob-opt .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.at-ob-opt .tx b { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; font-weight: 600; }
.at-ob-opt .tx small { font-size: 1.2rem; color: var(--at-text-2); line-height: 1.35; }
.at-ob-opt .rec { padding: 2px 7px; border-radius: 999px; background: var(--at-cta); color: var(--at-bg); font-size: 1rem; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.at-ob-opt .rd { flex: none; position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--at-layer-10); transition: border-color var(--at-t); }
.at-ob-opt .rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--at-cta); transform: scale(0); transition: transform var(--at-t); }
.at-ob-opt.on .rd { border-color: var(--at-cta); }
.at-ob-opt.on .rd::after { transform: scale(1); }
/* Round swatch: page / card / accent of each look. Fixed colors so it never changes with the active theme. */
.at-ob-opt .sw { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; box-shadow: 0 0 0 1px var(--at-layer-10) inset; }
.at-ob-opt .sw i { display: block; }
.at-ob-opt .sw i:first-child { grid-row: 1 / 3; }
.sw-volt i:nth-child(1) { background: #000; } .sw-volt i:nth-child(2) { background: #0d0e15; } .sw-volt i:nth-child(3) { background: #19d3e6; }
.sw-kai i:nth-child(1) { background: #0c1116; } .sw-kai i:nth-child(2) { background: #181d22; } .sw-kai i:nth-child(3) { background: #e45f3a; }
.sw-classic i:nth-child(1) { background: #0b1622; } .sw-classic i:nth-child(2) { background: #142030; } .sw-classic i:nth-child(3) { background: #26a3d6; }
.sw-dark i:nth-child(1) { background: #0f0f0f; } .sw-dark i:nth-child(2) { background: #282828; } .sw-dark i:nth-child(3) { background: #3ea6ff; }
.sw-blue i:nth-child(1) { background: #0b1220; } .sw-blue i:nth-child(2) { background: #1a2540; } .sw-blue i:nth-child(3) { background: #7fa8ff; }
.sw-light i:nth-child(1) { background: #fff; } .sw-light i:nth-child(2) { background: #f2f2f2; } .sw-light i:nth-child(3) { background: #065fd4; }
.sw-device i:nth-child(1) { background: linear-gradient(135deg, #0f0f0f 50%, #fff 50%); } .sw-device i:nth-child(2) { background: #282828; } .sw-device i:nth-child(3) { background: #f2f2f2; }
/* Site mock. Fixed palettes per look. Device shows dark and light split by a diagonal. */
.at-ob-pv { --pv-bg: #000; --pv-card: #0d0e15; --pv-line: rgba(255, 255, 255, .1); --pv-text: #f1f5f9; --pv-mute: rgba(255, 255, 255, .16); --pv-acc: #19d3e6; --pv-logo: #19d3e6;
  position: relative; min-height: 270px; border-radius: 16px; overflow: hidden; background: var(--pv-bg); border: 1px solid var(--at-border); transition: background .2s ease; }
.at-ob-pv[data-pv="kai"] { --pv-bg: #0c1116; --pv-card: #181d22; --pv-text: #eef1f4; --pv-acc: #e45f3a; --pv-logo: #e45f3a; }
.at-ob-pv[data-pv="classic"] { --pv-bg: #0b1622; --pv-card: #142030; --pv-line: #1c2c42; --pv-text: #a0b1c5; --pv-mute: rgba(160, 177, 197, .2); --pv-acc: #26a3d6; --pv-logo: #26a3d6; }
.at-ob-pv[data-pv="dark"], .at-ob-pv[data-pv="device"] { --pv-bg: #0f0f0f; --pv-card: #272727; --pv-text: #f1f1f1; --pv-acc: #f1f1f1; --pv-logo: #ff3d3d; }
.at-ob-pv[data-pv="blue"] { --pv-bg: #0b1220; --pv-card: #1a2540; --pv-line: rgba(140, 170, 255, .18); --pv-text: #e8edf8; --pv-mute: rgba(140, 170, 255, .2); --pv-acc: #7fa8ff; --pv-logo: #7fa8ff; }
.at-ob-pv[data-pv="light"] { --pv-bg: #fff; --pv-card: #f2f2f2; --pv-line: rgba(0, 0, 0, .1); --pv-text: #0f0f0f; --pv-mute: rgba(0, 0, 0, .12); --pv-acc: #0f0f0f; --pv-logo: #ff0000; }
.pv-in { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--pv-bg); color: var(--pv-text); transition: background .2s ease; }
.pv-in.alt { display: none; --pv-bg: #fff; --pv-card: #f2f2f2; --pv-line: rgba(0, 0, 0, .1); --pv-text: #0f0f0f; --pv-mute: rgba(0, 0, 0, .12); --pv-acc: #0f0f0f; --pv-logo: #ff0000; clip-path: polygon(58% 0, 100% 0, 100% 100%, 36% 100%); }
.at-ob-pv[data-pv="device"] .pv-in.alt { display: flex; }
.pv-top { display: flex; align-items: center; gap: 8px; height: 22px; flex: none; }
.pv-logo { width: 16px; height: 11px; border-radius: 3px; background: var(--pv-logo); position: relative; }
.pv-logo::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  background: url("../img/koto-flower.svg") center / contain no-repeat;
}
.pv-name { width: 38px; height: 7px; border-radius: 4px; background: var(--pv-text); opacity: .85; }
.pv-search { flex: 1; height: 18px; margin: 0 6px; border-radius: 9px; background: var(--pv-card); border: 1px solid var(--pv-line); }
.pv-av { width: 18px; height: 18px; border-radius: 50%; background: var(--pv-acc); }
.pv-hero { flex: 1.15; min-height: 0; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; border-radius: 12px; background: var(--pv-card); background: linear-gradient(135deg, var(--pv-card), color-mix(in srgb, var(--pv-acc) 30%, var(--pv-card))); border: 1px solid var(--pv-line); }
.pv-hero b { display: block; width: 64%; height: 9px; border-radius: 5px; background: var(--pv-text); }
.pv-hero b + b { width: 42%; height: 6px; opacity: .45; }
.pv-btn { width: 60px; height: 20px; margin-top: 4px; border-radius: 10px; background: var(--pv-acc); }
.pv-row { flex: .8; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-card { display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 9px; background: var(--pv-card); border: 1px solid var(--pv-line); }
.pv-card i { flex: 1; border-radius: 5px; background: var(--pv-mute); }
.pv-card b { display: block; width: 70%; height: 5px; border-radius: 3px; background: var(--pv-text); opacity: .6; }
/* Step 2: a profile card that fills in as they go. */
.at-ob-card { margin-bottom: 18px; border-radius: 16px; overflow: hidden; background: var(--at-bg-raised); border: 1px solid var(--at-border); }
.at-ob-cbanner { position: relative; aspect-ratio: 4.6 / 1; background: linear-gradient(120deg, var(--at-layer-10), transparent 70%), var(--at-bg-raised); }
.at-ob-cbanner img, .at-ob-cbanner-empty { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-ob-cbanner .at-btn { position: absolute; right: 12px; bottom: 12px; height: 32px; padding: 0 14px 0 10px; line-height: 3.2rem; font-size: 1.3rem; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.at-ob-cbanner .at-btn:hover { background: rgba(0, 0, 0, .72); }
.at-ob-cme { display: flex; align-items: flex-start; gap: 14px; padding: 0 16px 16px; }
.at-ob-cav { position: relative; flex: none; margin-top: -40px; border-radius: 50%; box-shadow: 0 0 0 4px var(--at-bg-raised); }
.at-ob-cav .av { overflow: visible !important; }
.at-ob-cav .av > img:not(.at-deco-img) { border-radius: 50%; object-fit: cover; }
.at-ob-ctx { display: flex; flex-direction: column; min-width: 0; margin-top: 10px; }
.at-ob-ctx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.at-ob-ctx span { font-size: 1.3rem; color: var(--at-text-2); }
.at-ob-cme .at-btn { margin: 10px 0 0 auto; }
.at-ob .at-field { max-width: none; margin: 0 0 8px; }
html[data-theme] .at-ob .at-field label { background: var(--at-bg-menu); }
.at-ob-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--at-border); }
.at-ob-hint { margin-right: auto; font-size: 1.3rem; color: var(--at-text-2); }
.at-ob-foot .at-btn.primary { height: 40px; padding: 0 22px; }
.at-ob-foot .at-btn.primary[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 791px) {
  .at-ob-scrim { padding: 0; align-items: flex-end; }
  .at-ob { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .at-ob-top { padding: 14px 8px 0 16px; }
  .at-ob-body { padding: 16px 16px 6px; }
  .at-ob-hero h2 { font-size: 2.4rem; }
  .at-ob-hero p { margin-bottom: 16px; font-size: 1.4rem; }
  .at-ob-grid { grid-template-columns: 1fr; gap: 14px; }
  .at-ob-pv { min-height: 170px; }
  .pv-in { padding: 10px; gap: 8px; }
  .at-ob-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .at-ob-hint { display: none; }
  .at-ob-foot .at-btn.primary { margin-left: auto; }
  .at-ob-cbanner { aspect-ratio: 3 / 1; }
}
.at-ban-res { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; margin-top: 12px; }
.at-ban-hit { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center; width: 100%; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.at-ban-hit img { width: 128px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--at-bg-raised); }
.at-ban-hit:hover { background: var(--at-layer-10); }
.at-ban-hit span { font-size: 1.4rem; font-weight: 600; }
.at-ban-empty { margin: 8px 0 0; color: var(--at-text-2); font-size: 1.3rem; }
.at-turnstile { display: flex; justify-content: center; min-height: 0; margin: 0 0 12px; }
.at-turnstile:not([hidden]) { min-height: 65px; }
.at-turnstile[hidden] { display: none; }
/* WINTER START — profile snow. Delete this block when winter is over. */
.at-winter { position: fixed; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }
/* WINTER END */

/* =========================================================================
   WINTER THEME START — "Winter" (stored id "winter"). Midnight blue, aurora glow, ice-blue + mint accents,
   frosted glass, soft parallax snowfall. Scoped to html[data-theme="winter"]. Never touches the other themes.
   Remove this whole block (to WINTER THEME END), the swatch/preview lines marked WINTER THEME, and the
   "winter" entries in ApiController / settings.js / ui.js / store.js / anitube.ctp / error.ctp when winter is over.
   ========================================================================= */
html[data-theme="winter"] {
  color-scheme: dark;
  --wt-bg: #060a14;
  --wt-card: #0d1630;
  --wt-card-2: #131f40;
  --wt-menu: #101a38;
  --wt-input: #0a1228;
  --wt-line: rgba(150, 195, 255, .14);
  --wt-line-2: rgba(150, 195, 255, .28);
  --wt-ice: #8bd8ff;
  --wt-ice-2: #6ee7d8;
  --wt-violet: #a99bff;
  --wt-text-2: #9fb3d1;
  --wt-text-3: #62779a;
  --wt-grad: linear-gradient(135deg, #8bd8ff 0%, #6ee7d8 100%);
  --wt-glow: 0 10px 34px -10px rgba(139, 216, 255, .55);
  --wt-r: 12px;
  --wt-r-lg: 18px;
  --wt-ease: cubic-bezier(.2, .8, .2, 1);
  --at-frost: rgba(7, 11, 22, .72);
  --at-frost-mobile: rgba(7, 11, 22, .82);
  --at-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-bg: var(--wt-bg);
  --at-bg-raised: var(--wt-card);
  --at-bg-menu: var(--wt-menu);
  --at-bg-input: var(--wt-input);
  --at-bg-search-btn: var(--wt-card-2);
  --at-text: #eef5ff;
  --at-text-2: var(--wt-text-2);
  --at-text-3: var(--wt-text-3);
  --at-chip: rgba(150, 195, 255, .09);
  --at-chip-hover: rgba(150, 195, 255, .17);
  --at-layer-10: rgba(150, 195, 255, .16);
  --at-layer-5: rgba(150, 195, 255, .08);
  --at-hover: rgba(150, 195, 255, .09);
  --at-border: var(--wt-line);
  --at-cta: var(--wt-ice);
  --at-brand-btn: var(--wt-ice);
  --at-brand-btn-text: #04121f;
  --at-scrim: rgba(3, 6, 14, .74);
  --at-shadow: 0 24px 60px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(150, 195, 255, .08);
  --at-badge-bg: rgba(6, 10, 20, .82);
  --at-progress-bg: rgba(170, 205, 255, .32);
  --at-tooltip-bg: #1a2850;
  --at-live-chat-bg: #0a1122;
  --at-mana: #ffd978;
  --at-red: #ff6b8b;
  --at-link: var(--wt-ice);
  --kc-accent: var(--wt-ice);
  --kc-ink: #04121f;
  /* Aurora lives on the root. background-attachment:fixed on body forced a full repaint on every scroll. */
  background:
    radial-gradient(1000px 560px at 8% -6%, rgba(110, 231, 216, .14), transparent 62%),
    radial-gradient(900px 540px at 94% 2%, rgba(150, 140, 255, .18), transparent 64%),
    radial-gradient(1200px 680px at 50% 108%, rgba(56, 160, 255, .13), transparent 62%),
    linear-gradient(180deg, #070c1a 0%, #060a14 100%);
}
html[data-theme="winter"] body {
  font-family: var(--at-font); -webkit-font-smoothing: antialiased; color: var(--at-text);
  background: transparent;
}
html[data-theme="winter"] ::selection { background: rgba(139, 216, 255, .35); color: #fff; }
html[data-theme="winter"] { scrollbar-width: thin; scrollbar-color: #2b4372 transparent; }
html[data-theme="winter"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="winter"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="winter"] ::-webkit-scrollbar-thumb { background: linear-gradient(#3a5a96, #2b4372); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html[data-theme="winter"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#5b86d1, #3a5a96); background-clip: padding-box; }
html[data-theme="winter"] #at-guide:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
html[data-theme="winter"] h1, html[data-theme="winter"] h2, html[data-theme="winter"] h3 { color: #fff; letter-spacing: -.01em; }
html[data-theme="winter"] a { transition: color .2s; }
html[data-theme="winter"] .p-text a, html[data-theme="winter"] .cm-text a, html[data-theme="winter"] .at-static a, html[data-theme="winter"] .at-desc a { color: var(--wt-ice); }
html[data-theme="winter"] .p-text a:hover, html[data-theme="winter"] .cm-text a:hover, html[data-theme="winter"] .at-static a:hover, html[data-theme="winter"] .at-desc a:hover { color: var(--wt-ice-2); }

/* ---- Falling snow: two fixed layers, GPU-moved, different speeds (parallax). On every page, including the watch page. Off only with reduced motion. ---- */
/* background-position, not transform: a transformed fixed layer makes Safari pull #at-bottomnav off the screen. */
html[data-theme="winter"]::before, html[data-theme="winter"]::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
html[data-theme="winter"]::before {
  opacity: .55;
  background-size: 512px 512px;
  background-image:
    radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent), radial-gradient(2px 2px at 120px 200px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 210px 90px, #dff2ff, transparent), radial-gradient(2.4px 2.4px at 300px 330px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 400px 160px, #fff, transparent), radial-gradient(1.8px 1.8px at 470px 420px, #e8f6ff, transparent),
    radial-gradient(1.1px 1.1px at 70px 380px, #fff, transparent), radial-gradient(2px 2px at 250px 470px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 360px 20px, #dff2ff, transparent), radial-gradient(1.6px 1.6px at 160px 300px, #fff, transparent);
  animation: wt-snow-a 26s linear infinite;
}
html[data-theme="winter"]::after {
  opacity: .7;
  background-size: 768px 768px;
  background-image:
    radial-gradient(3px 3px at 100px 120px, rgba(255, 255, 255, .95), transparent), radial-gradient(2.4px 2.4px at 350px 60px, #fff, transparent),
    radial-gradient(3.4px 3.4px at 600px 240px, rgba(255, 255, 255, .9), transparent), radial-gradient(2.6px 2.6px at 200px 420px, #fff, transparent),
    radial-gradient(3px 3px at 480px 520px, rgba(235, 247, 255, .95), transparent), radial-gradient(2.2px 2.2px at 700px 680px, #fff, transparent),
    radial-gradient(2.8px 2.8px at 60px 640px, rgba(255, 255, 255, .9), transparent), radial-gradient(3.2px 3.2px at 380px 740px, #fff, transparent),
    radial-gradient(2px 2px at 640px 430px, #fff, transparent);
  animation: wt-snow-b 22s linear infinite;
}
@keyframes wt-snow-a { to { background-position: 0 512px; } }
@keyframes wt-snow-b { to { background-position: 0 768px; } }
/* Desktop: move the flakes on the compositor. background-position repaints two full-screen layers every frame. */
@media (min-width: 792px) and (prefers-reduced-motion: no-preference) {
  html[data-theme="winter"]:not(.at-reduced-motion)::before,
  html[data-theme="winter"]:not(.at-reduced-motion)::after { bottom: auto; }
  html[data-theme="winter"]:not(.at-reduced-motion)::before {
    top: -512px; height: calc(100vh + 512px); animation: wt-snow-ta 26s linear infinite;
  }
  html[data-theme="winter"]:not(.at-reduced-motion)::after {
    top: -768px; height: calc(100vh + 768px); animation: wt-snow-tb 22s linear infinite;
  }
}
@keyframes wt-snow-ta { to { transform: translate3d(0, 512px, 0); } }
@keyframes wt-snow-tb { to { transform: translate3d(0, 768px, 0); } }
html[data-theme="winter"].at-reduced-motion::before, html[data-theme="winter"].at-reduced-motion::after { display: none; }
@media (prefers-reduced-motion: reduce) { html[data-theme="winter"]::before, html[data-theme="winter"]::after { display: none; } }

/* ---- Masthead / search: frosted glass --------------------------------------- */
html[data-theme="winter"] #at-masthead {
  background: rgba(7, 11, 22, .72); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--wt-line); box-shadow: 0 1px 0 rgba(139, 216, 255, .05), 0 12px 30px -18px rgba(0, 0, 0, .8);
}
/* Desktop: one frost for the header and the chip row (the shared body::before, blur 48px, winter tint).
   A second blur on the bar itself was a different strength and a seam, and it stacked two full-width filters. */
@media (min-width: 792px) and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-theme="winter"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-masthead {
      background: transparent; border-bottom-color: transparent; box-shadow: none;
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
  }
}
html[data-theme="winter"] .at-logo-mark { background: var(--wt-grad); border-radius: 9px; box-shadow: var(--wt-glow); }
html[data-theme="winter"] .at-logo-text { font-weight: 800; letter-spacing: -.03em; }
html[data-theme="winter"] .at-logo-text sup { color: var(--wt-ice-2); font-weight: 700; }
html[data-theme="winter"] .at-search-box { background: rgba(10, 18, 40, .8); border: 1px solid var(--wt-line); border-right: 0; border-radius: 40px 0 0 40px; color: var(--at-text); transition: border-color .2s, box-shadow .2s; }
html[data-theme="winter"] .at-search-box:focus-within { border-color: rgba(139, 216, 255, .6); box-shadow: 0 0 0 3px rgba(139, 216, 255, .16); }
html[data-theme="winter"] .at-search-box input { color: var(--at-text); font-weight: 500; }
html[data-theme="winter"] .at-search-box input::placeholder { color: var(--wt-text-3); }
html[data-theme="winter"] .at-search-leading, html[data-theme="winter"] .at-search-box .at-iconbtn { color: var(--wt-text-2); }
html[data-theme="winter"] .at-search-box input:-webkit-autofill { -webkit-text-fill-color: var(--at-text); -webkit-box-shadow: 0 0 0 1000px #0a1228 inset; }
html[data-theme="winter"] .at-search-btn { background: rgba(19, 31, 64, .9); border: 1px solid var(--wt-line); border-left: 1px solid var(--wt-line); border-radius: 0 40px 40px 0; color: var(--wt-ice); transition: background .2s, color .2s; }
html[data-theme="winter"] .at-search-btn:hover { background: var(--wt-grad); color: #04121f; }
html[data-theme="winter"] .at-search-random { background: var(--at-chip); color: var(--at-text); border: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-search-random:hover { background: var(--wt-grad); color: #04121f; }
html[data-theme="winter"] #at-msearch form { background: rgba(10, 18, 40, .9); border: 1px solid var(--wt-line); border-radius: 40px; }
html[data-theme="winter"] #at-msearch input { background: transparent; border: 0; color: var(--at-text); }
html[data-theme="winter"] .at-suggest { background: rgba(14, 22, 46, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--wt-line); border-radius: var(--wt-r-lg); box-shadow: var(--at-shadow); overflow: hidden; }
html[data-theme="winter"] .at-suggest-item:hover, html[data-theme="winter"] .at-suggest-item.active { background: rgba(139, 216, 255, .1); }
html[data-theme="winter"] .at-suggest-item.more { color: var(--wt-ice); font-weight: 600; }
html[data-theme="winter"] .at-iconbtn { transition: color .2s, background .2s, transform .2s; }
html[data-theme="winter"] .at-iconbtn:hover { background: rgba(139, 216, 255, .12); color: var(--wt-ice); }
html[data-theme="winter"] .at-avatar-btn, html[data-theme="winter"] .at-avatar-btn > img:not(.at-deco-img) { box-shadow: 0 0 0 2px rgba(139, 216, 255, .55), 0 0 18px -2px rgba(139, 216, 255, .5); }
html[data-theme="winter"] .at-badge-count { background: linear-gradient(135deg, #ff7aa0, #ff5c7f); color: #fff; border: 2px solid #0a1122; font-weight: 700; }

/* ---- Buttons / chips / tabs ------------------------------------------------- */
html[data-theme="winter"] .at-btn { border-radius: 999px; background: rgba(150, 195, 255, .1); color: var(--at-text); border: 1px solid var(--wt-line); font-weight: 600; transition: background .2s, border-color .2s, transform .2s var(--wt-ease), box-shadow .2s; }
html[data-theme="winter"] .at-btn:hover { background: rgba(150, 195, 255, .18); border-color: var(--wt-line-2); }
html[data-theme="winter"] .at-btn.primary, html[data-theme="winter"] .at-btn.cta { background: var(--wt-grad); color: #04121f; border-color: transparent; font-weight: 800; box-shadow: var(--wt-glow); }
html[data-theme="winter"] .at-btn.primary:hover, html[data-theme="winter"] .at-btn.cta:hover { background: var(--wt-grad); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 38px -10px rgba(139, 216, 255, .7); opacity: 1; }
html[data-theme="winter"] .at-btn.primary .at-icon, html[data-theme="winter"] .at-btn.cta .at-icon { color: inherit; }
html[data-theme="winter"] .at-btn.ghost, html[data-theme="winter"] .at-btn.text, html[data-theme="winter"] .at-btn.text-cta { background: transparent; border-color: transparent; color: var(--wt-text-2); }
html[data-theme="winter"] .at-btn.ghost:hover, html[data-theme="winter"] .at-btn.text:hover { background: rgba(150, 195, 255, .12); color: #fff; }
html[data-theme="winter"] .at-btn.text-cta { color: var(--wt-ice); }
html[data-theme="winter"] .at-btn.text-cta:hover { background: rgba(139, 216, 255, .12); color: var(--wt-ice-2); }
html[data-theme="winter"] .at-btn.outline { background: transparent; border-color: var(--wt-line-2); }
html[data-theme="winter"] .at-btn[disabled] { opacity: .45; box-shadow: none; transform: none; }
html[data-theme="winter"] .at-chip { border-radius: 999px; background: rgba(150, 195, 255, .08); color: var(--wt-text-2); border: 1px solid var(--wt-line); font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
html[data-theme="winter"] .at-chip:hover { background: rgba(150, 195, 255, .16); color: #fff; }
html[data-theme="winter"] .at-chip.active, html[data-theme="winter"] .at-chip[aria-pressed="true"] { background: var(--wt-grad); color: #04121f; border-color: transparent; box-shadow: var(--wt-glow); font-weight: 700; }
/* Sticky bars: a night-blue fill. A second copy of the aurora with background-attachment:fixed repainted on scroll. */
html[data-theme="winter"] .at-filterbar,
html[data-theme="winter"] .at-days,
html[data-theme="winter"] .at-sched-filters {
  background: #0b1428;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="winter"] .at-day {
  background: rgba(150, 195, 255, .1);
  border: 1px solid var(--wt-line);
  color: var(--wt-text-2);
}
html[data-theme="winter"] .at-day:hover { background: rgba(150, 195, 255, .18); color: #fff; }
html[data-theme="winter"] .at-day.active {
  background: var(--wt-grad);
  color: #04121f;
  border-color: transparent;
  box-shadow: var(--wt-glow);
}
html[data-theme="winter"] .at-segment { border-radius: 999px; background: rgba(150, 195, 255, .08); border: 1px solid var(--wt-line); overflow: hidden; }
html[data-theme="winter"] .at-segment > button { color: var(--wt-text-2); font-weight: 600; }
html[data-theme="winter"] .at-segment > button:hover { background: rgba(150, 195, 255, .12); color: #fff; }
html[data-theme="winter"] .at-segment > button.active { background: var(--wt-grad); color: #04121f; }
html[data-theme="winter"] .at-tabs { border-bottom: 1px solid var(--wt-line); gap: 4px; }
html[data-theme="winter"] .at-tab { color: var(--wt-text-2); font-weight: 600; border-radius: 999px 999px 0 0; transition: color .2s, background .2s; }
html[data-theme="winter"] .at-tab:hover { color: #fff; background: rgba(150, 195, 255, .08); }
html[data-theme="winter"] .at-tab.active { color: var(--wt-ice); background: rgba(139, 216, 255, .08); }
html[data-theme="winter"] .at-tab.active::after { background: var(--wt-grad); height: 3px; border-radius: 3px 3px 0 0; box-shadow: 0 0 14px rgba(139, 216, 255, .7); }
html[data-theme="winter"] .at-pill-badge { border-radius: 999px; font-weight: 700; }
html[data-theme="winter"] .at-pill-badge.mana { color: #ffd978; background: rgba(255, 217, 120, .1); }
html[data-theme="winter"] .at-thumb .tl .at-pill-badge { background: rgba(6, 10, 20, .8); }
html[data-theme="winter"] .at-thumb .dur, html[data-theme="winter"] .at-thumb .pv-tag, html[data-theme="winter"] .at-ep .th .dur { border-radius: 6px; background: rgba(6, 10, 20, .82); color: #eaf4ff; font-weight: 700; }
html[data-theme="winter"] .at-tooltip { background: #1a2850; color: #eaf4ff; border: 1px solid var(--wt-line); border-radius: 10px; }

/* ---- Guide / bottom nav ------------------------------------------------------ */
html[data-theme="winter"] #at-guide, html[data-theme="winter"] #at-mini-guide { background: transparent; border-right: 0; }
html[data-theme="winter"] .at-guide-section { border-bottom: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-guide-title { color: var(--wt-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; }
html[data-theme="winter"] .at-guide-item, html[data-theme="winter"] .at-mini-item { border-radius: 12px; color: var(--wt-text-2); font-weight: 600; transition: color .2s, background .2s; }
html[data-theme="winter"] .at-guide-item:hover, html[data-theme="winter"] .at-mini-item:hover { background: rgba(150, 195, 255, .09); color: #fff; }
html[data-theme="winter"] .at-guide-item.active, html[data-theme="winter"] .at-mini-item.active { background: linear-gradient(90deg, rgba(139, 216, 255, .18), rgba(139, 216, 255, .04)); color: var(--wt-ice); font-weight: 700; box-shadow: inset 3px 0 0 var(--wt-ice); }
html[data-theme="winter"] .at-guide-item .at-icon { color: inherit; }
html[data-theme="winter"] .at-guide-item .dot { background: var(--wt-ice-2); }
html[data-theme="winter"] #at-bottomnav { background: var(--wt-bg); border-top: 1px solid var(--wt-line); }
/* Same frost as Coral: blur stays on ::before, never on the fixed bar. The shadow fills the strip Safari opens under the bar. */
html[data-theme="winter"]:not(.at-reduced-motion) body:not(.at-reduced-motion) #at-bottomnav {
  background: transparent; border-top-color: transparent;
  box-shadow: 0 140px 0 0 #070c18;
}
html[data-theme="winter"] #at-bottomnav::before { background: var(--at-frost-mobile); border-top: 1px solid var(--wt-line); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); }
/* Phone account sheet / You panel: blur on a fixed bar makes iOS pull the header and tab bar off the screen. Same solid fallback the other themes use while that menu is open. */
@media (max-width: 791px) {
  html[data-theme="winter"]:has(#at-you.open) #at-masthead,
  html[data-theme="winter"]:has(.at-sheet.open) #at-masthead,
  html[data-theme="winter"]:has(.at-sheet-scrim.open) #at-masthead {
    background: #070c18;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-theme="winter"]:not(.at-reduced-motion) body:not(.at-reduced-motion):has(#at-you.open) #at-bottomnav,
  html[data-theme="winter"]:not(.at-reduced-motion) body:not(.at-reduced-motion):has(.at-sheet.open) #at-bottomnav,
  html[data-theme="winter"]:not(.at-reduced-motion) body:not(.at-reduced-motion):has(.at-sheet-scrim.open) #at-bottomnav {
    background: #070c18; border-top-color: var(--wt-line);
  }
  html[data-theme="winter"]:has(#at-you.open) #at-bottomnav::before,
  html[data-theme="winter"]:has(.at-sheet.open) #at-bottomnav::before,
  html[data-theme="winter"]:has(.at-sheet-scrim.open) #at-bottomnav::before { display: none; }
}
html[data-theme="winter"] #at-bottomnav a, html[data-theme="winter"] #at-bottomnav button { color: var(--wt-text-2); }
html[data-theme="winter"] #at-bottomnav .active { color: var(--wt-ice); }
html[data-theme="winter"] #at-bottomnav .create .at-icon { border-color: var(--wt-ice); color: var(--wt-ice); box-shadow: 0 0 18px -4px rgba(139, 216, 255, .6); }

/* ---- Menus / popups / sheets / modals ---------------------------------------- */
html[data-theme="winter"] .at-menu, html[data-theme="winter"] .at-popup { background: rgba(16, 26, 56, .97); border: 1px solid var(--wt-line-2); border-radius: var(--wt-r-lg); box-shadow: var(--at-shadow), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="winter"] .at-menu { overflow: visible; }
html[data-theme="winter"] .at-menu-item { color: #c3d4ee; transition: background .15s, color .15s; }
html[data-theme="winter"] .at-menu-item:hover { background: rgba(139, 216, 255, .12); color: #fff; }
html[data-theme="winter"] .at-menu-item.active, html[data-theme="winter"] .at-menu-item.checked { background: rgba(139, 216, 255, .14); color: var(--wt-ice); }
html[data-theme="winter"] .at-menu-item .check { color: var(--wt-ice); }
html[data-theme="winter"] .at-menu-sep { background: var(--wt-line); }
html[data-theme="winter"] .at-menu-title { color: var(--wt-text-3); }
html[data-theme="winter"] .at-menu-head { background: linear-gradient(135deg, rgba(139, 216, 255, .12), rgba(169, 155, 255, .1)); }
html[data-theme="winter"] .at-menu-head .link { color: var(--wt-ice); }
html[data-theme="winter"] .at-menu-mana { border-radius: 12px; background: rgba(255, 217, 120, .08); border: 1px solid rgba(255, 217, 120, .2); }
html[data-theme="winter"] .at-popup-head { border-bottom: 1px solid var(--wt-line); font-weight: 700; color: #fff; }
html[data-theme="winter"] .at-sheet, html[data-theme="winter"] .at-sheet-menu-panel { background: rgba(13, 22, 48, .98); border-top: 1px solid var(--wt-line-2); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .7); }
html[data-theme="winter"] .at-sheet-handle { background: #36508a; }
html[data-theme="winter"] .at-modal { background: rgba(14, 23, 50, .98); border: 1px solid var(--wt-line-2); border-radius: 22px; box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(139, 216, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="winter"] .at-modal-head { border-bottom: 1px solid var(--wt-line); font-weight: 800; color: #fff; }
html[data-theme="winter"] .at-modal-foot { border-top: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-modal-scrim { background: rgba(3, 6, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- Cards / shelves / hero ---------------------------------------------------- */
html[data-theme="winter"] .at-card .at-thumb { border-radius: 14px; border: 1px solid var(--wt-line); transition: box-shadow .3s var(--wt-ease), transform .3s var(--wt-ease), border-color .3s; }
html[data-theme="winter"] .at-card:hover .at-thumb { border-color: rgba(139, 216, 255, .55); box-shadow: 0 16px 40px -12px rgba(139, 216, 255, .42), 0 0 0 1px rgba(139, 216, 255, .25); border-radius: 14px; }
html[data-theme="winter"] .at-poster-card .pc-img { border-radius: 14px; border: 1px solid var(--wt-line); background: var(--wt-card); transition: transform .3s var(--wt-ease), box-shadow .3s var(--wt-ease), border-color .3s; }
html[data-theme="winter"] .at-poster-card:hover .pc-img { transform: translateY(-4px); border-color: rgba(139, 216, 255, .55); box-shadow: 0 18px 44px -14px rgba(139, 216, 255, .45); }
html[data-theme="winter"] .at-card-title, html[data-theme="winter"] .at-poster-card .pc-title { font-weight: 700; color: #e8f1ff; transition: color .2s; }
html[data-theme="winter"] .at-card:hover .at-card-title, html[data-theme="winter"] .at-poster-card:hover .pc-title { color: var(--wt-ice); }
html[data-theme="winter"] .at-card-meta { color: var(--wt-text-3); font-weight: 500; }
html[data-theme="winter"] .at-card-menu { background: rgba(6, 10, 20, .82); color: #fff; }
html[data-theme="winter"] .at-poster-card .rank { background: linear-gradient(135deg, rgba(139, 216, 255, .22), rgba(110, 231, 216, .12)); color: var(--wt-ice); border: 1px solid var(--wt-line-2); }
html[data-theme="winter"] .at-poster-card:hover .rank { background: var(--wt-grad); color: #04121f; }
html[data-theme="winter"] .at-row, html[data-theme="winter"] .at-compact { border-radius: 14px; transition: background .2s; }
html[data-theme="winter"] .at-row:hover, html[data-theme="winter"] .at-compact:hover { background: rgba(150, 195, 255, .08); }
html[data-theme="winter"] .at-compact.is-now { background: rgba(139, 216, 255, .12); }
html[data-theme="winter"] .at-shelf-title { font-weight: 800; letter-spacing: -.02em; color: #fff; }
html[data-theme="winter"] .at-shelf-title small { color: var(--wt-text-3); font-weight: 600; }
html[data-theme="winter"] .at-shelf-head .at-icon.brand { color: var(--wt-ice); filter: drop-shadow(0 0 8px rgba(139, 216, 255, .6)); }
html[data-theme="winter"] .at-shelf-head .at-btn.ghost { color: var(--wt-ice); }
html[data-theme="winter"] .at-shelf-arrow { background: rgba(13, 22, 48, .9); border: 1px solid var(--wt-line-2); color: #fff; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .7); transition: background .2s, color .2s, transform .2s; }
html[data-theme="winter"] .at-shelf-arrow:hover { background: var(--wt-grad); color: #04121f; border-color: transparent; }
html[data-theme="winter"] .at-page-head h1 { font-weight: 800; letter-spacing: -.03em; }
html[data-theme="winter"] .at-page-head .at-icon.big { color: var(--wt-ice); filter: drop-shadow(0 0 10px rgba(139, 216, 255, .55)); }
html[data-theme="winter"] .at-hero-viewport, html[data-theme="winter"] .at-hero-track { border-radius: 22px; border: 1px solid var(--wt-line); background: var(--wt-bg); }
html[data-theme="winter"] .at-hero-viewport { box-shadow: 0 30px 80px -30px rgba(56, 160, 255, .35), 0 0 0 1px rgba(139, 216, 255, .06); }
html[data-theme="winter"] .at-hero-slide .shade { background: linear-gradient(90deg, rgba(6, 10, 20, .96) 6%, rgba(6, 10, 20, .72) 40%, rgba(6, 10, 20, .08) 78%), linear-gradient(0deg, #060a14 0%, rgba(6, 10, 20, .5) 30%, transparent 62%), radial-gradient(700px 360px at 80% 0%, rgba(139, 150, 255, .18), transparent 70%); }
html[data-theme="winter"] .at-hero-kicker { color: var(--wt-ice-2); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html[data-theme="winter"] .at-hero-title { font-weight: 800; letter-spacing: -.03em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6), 0 0 40px rgba(139, 216, 255, .18); }
html[data-theme="winter"] .at-hero-desc { color: #b8c9e6; }
html[data-theme="winter"] .at-hero-btns .at-btn { height: 48px; padding: 0 28px; font-size: 1.5rem; font-weight: 800; }
html[data-theme="winter"] .at-hero-btns .at-btn.glass { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
html[data-theme="winter"] .at-hero-btns .at-btn.glass:hover { background: rgba(255, 255, 255, .2); }
html[data-theme="winter"] .at-hero-nav .at-shelf-arrow { background: rgba(7, 11, 22, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme="winter"] .at-hero-dots i { height: 6px; width: 6px; border-radius: 6px; background: rgba(190, 215, 255, .4); transition: width .3s var(--wt-ease), background-color .3s; }
html[data-theme="winter"] .at-hero-dots i.on { width: 26px; background: var(--wt-grad); box-shadow: 0 0 14px rgba(139, 216, 255, .7); }
@media (max-width: 791px) {
  html[data-theme="winter"] .at-hero-viewport, html[data-theme="winter"] .at-hero-track { border-radius: 16px; }
  html[data-theme="winter"] .at-hero-slide .shade { background: linear-gradient(0deg, #060a14 0%, rgba(6, 10, 20, .65) 45%, rgba(6, 10, 20, .1) 100%); }
  html[data-theme="winter"] .at-hero-btns .at-btn { height: 42px; padding: 0 22px; font-size: 1.4rem; }
}

/* ---- Panels / episodes / forms / switches / notices / community ----------------- */
html[data-theme="winter"] .at-comments-teaser { margin-bottom: 12px; border: 1px solid var(--wt-line); background: var(--wt-card); }
html[data-theme="winter"] .at-panel { border: 1px solid var(--wt-line); border-radius: var(--wt-r-lg); background: rgba(13, 22, 48, .92); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
html[data-theme="winter"] .at-panel-head { background: linear-gradient(135deg, rgba(139, 216, 255, .1), rgba(169, 155, 255, .07)); border-bottom: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-panel-head h3 { font-weight: 800; }
html[data-theme="winter"] .at-panel-head .ph-bar { background: rgba(150, 195, 255, .14); border-radius: 4px; }
html[data-theme="winter"] .at-panel-head .ph-bar i { background: var(--wt-grad); border-radius: 4px; }
html[data-theme="winter"] .at-panel-tools, html[data-theme="winter"] .at-panel-foot { background: rgba(10, 18, 40, .6); border-top: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-ep { border-radius: 12px; transition: background .2s; }
html[data-theme="winter"] .at-ep:hover { background: rgba(150, 195, 255, .08); }
html[data-theme="winter"] .at-ep.active { background: rgba(139, 216, 255, .13); }
html[data-theme="winter"] .at-ep.active::before { background: var(--wt-grad); border-radius: 2px; box-shadow: 0 0 12px rgba(139, 216, 255, .7); }
html[data-theme="winter"] .at-epgrid a { border-radius: 10px; background: rgba(150, 195, 255, .08); border: 1px solid var(--wt-line); color: var(--at-text); font-weight: 700; transition: background .2s, transform .2s var(--wt-ease), border-color .2s; }
html[data-theme="winter"] .at-epgrid a:hover { background: rgba(150, 195, 255, .17); transform: translateY(-1px); border-color: var(--wt-line-2); }
html[data-theme="winter"] .at-epgrid a.active { background: var(--wt-grad); color: #04121f; border-color: transparent; box-shadow: var(--wt-glow); }
html[data-theme="winter"] .at-epgrid a.watched:not(.active) { color: var(--wt-text-3); }
html[data-theme="winter"] .at-input, html[data-theme="winter"] .at-select { border-radius: 12px; background: rgba(10, 18, 40, .8); border: 1px solid var(--wt-line); color: var(--at-text); }
html[data-theme="winter"] .at-input:focus-within, html[data-theme="winter"] .at-select:focus-within { border-color: rgba(139, 216, 255, .6); box-shadow: 0 0 0 3px rgba(139, 216, 255, .15); }
html[data-theme="winter"] .at-select select option { color: var(--at-text); background: #0d1630; }
html[data-theme="winter"] .at-field input, html[data-theme="winter"] .at-field textarea { background: rgba(10, 18, 40, .85); border: 1px solid var(--wt-line); border-radius: 12px; color: var(--at-text); font-weight: 500; }
html[data-theme="winter"] .at-field input:focus, html[data-theme="winter"] .at-field textarea:focus { border-color: rgba(139, 216, 255, .65); box-shadow: 0 0 0 3px rgba(139, 216, 255, .15); }
html[data-theme="winter"] .at-field input::placeholder { color: var(--wt-text-3); }
html[data-theme="winter"] .at-field input:-webkit-autofill { -webkit-text-fill-color: var(--at-text); -webkit-box-shadow: 0 0 0 1000px #0a1228 inset; caret-color: var(--at-text); }
html[data-theme="winter"] .at-field label { background: #090f20; color: var(--wt-text-2); font-weight: 600; }
html[data-theme="winter"] .at-modal .at-field label, html[data-theme="winter"] .at-panel .at-field label, html[data-theme="winter"] .at-post .at-field label, html[data-theme="winter"] .at-signin-card .at-field label { background: #0e1732; }
html[data-theme="winter"] .at-composer textarea:focus { border-bottom: 2px solid var(--wt-ice); }
html[data-theme="winter"] .at-switch { background: #2a3d68; }
html[data-theme="winter"] .at-switch::after { background: #fff; }
html[data-theme="winter"] .at-switch.on { background: var(--wt-grad); box-shadow: 0 0 16px -2px rgba(139, 216, 255, .6); }
html[data-theme="winter"] .at-notice:not(.at-notice-ban), html[data-theme="winter"] .at-alert { border-radius: 14px; background: linear-gradient(135deg, rgba(139, 216, 255, .1), rgba(169, 155, 255, .07)); border: 1px solid var(--wt-line); color: var(--at-text); }
html[data-theme="winter"] .at-notice:not(.at-notice-ban) > svg, html[data-theme="winter"] .at-notice:not(.at-notice-ban) > .at-ico, html[data-theme="winter"] .at-alert .at-icon { color: var(--wt-ice); }
html[data-theme="winter"] .at-signin-card, html[data-theme="winter"] .at-stat, html[data-theme="winter"] .at-mana-card { border-radius: 16px; border: 1px solid var(--wt-line); background: rgba(13, 22, 48, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
html[data-theme="winter"] .at-mana-card .mv { color: #ffd978; }
html[data-theme="winter"] .at-mana-card .today .bar i { background: linear-gradient(90deg, #ffd978, #ffb86b); }
html[data-theme="winter"] .at-search-meta b { color: var(--wt-ice); }
html[data-theme="winter"] .at-post { background: rgba(13, 22, 48, .88); border: 1px solid var(--wt-line); border-radius: 16px; transition: background .2s, border-color .2s, transform .25s var(--wt-ease); }
html[data-theme="winter"] .at-post:hover { background: rgba(19, 31, 64, .92); border-color: var(--wt-line-2); }
html[data-theme="winter"] .at-community.is-post .at-post[data-post], html[data-theme="winter"] .at-community.is-post .at-post[data-post]:hover { background: transparent; border-color: transparent; }
html[data-theme="winter"] .at-post:hover .p-title { color: var(--wt-ice); }
html[data-theme="winter"] .at-setting { border-bottom: 1px solid var(--wt-line); }
html[data-theme="winter"] .at-settings-nav .at-menu-item.active { background: rgba(139, 216, 255, .14); color: var(--wt-ice); }

/* ---- Polish: watch page, chat, comments, toasts, focus, guide ---- */
/* Keyboard focus ring for buttons/links. Never on typing fields — that drew a square
   ice box inside the rounded search/chat inputs (outline ignores border-radius). */
html[data-theme="winter"] :focus-visible { outline: 2px solid var(--wt-ice); outline-offset: 2px; }
html[data-theme="winter"] :is(input, textarea, select, [contenteditable="true"]):focus-visible { outline: none; }
html[data-theme="winter"] .at-player-wrap { border-radius: 18px; border: 1px solid var(--wt-line-2); box-shadow: 0 30px 80px -30px rgba(56, 160, 255, .45), 0 0 0 1px rgba(139, 216, 255, .06); }
html[data-theme="winter"] #at-guide, html[data-theme="winter"] #at-mini-guide { background: #0c152c; }
html[data-theme="winter"] .at-toast { background: rgba(16, 26, 56, .96); border: 1px solid var(--wt-line-2); border-radius: 14px; color: #eef5ff; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75), 0 0 40px -16px rgba(139, 216, 255, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="winter"] .at-toast button { color: var(--wt-ice); font-weight: 700; }
html[data-theme="winter"] .at-comment { --rail: rgba(139, 216, 255, .26); }
html[data-theme="winter"] .at-composer textarea, html[data-theme="winter"] .at-composer input { color: var(--at-text); }
html[data-theme="winter"] .kc-panel { background: linear-gradient(180deg, #0b1328 0%, #080e1e 100%); border-left: 1px solid var(--wt-line-2); box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .8), -1px 0 0 rgba(139, 216, 255, .08); }
html[data-theme="winter"] .kc-head { border-bottom: 1px solid var(--wt-line); }
html[data-theme="winter"] .kc-m.mentioned { background: linear-gradient(90deg, rgba(139, 216, 255, .13), rgba(139, 216, 255, .03)); }
html[data-theme="winter"] .kc-you { background: var(--wt-grad); color: #04121f; }
html[data-theme="winter"] .kc-send:not(:disabled) { background: var(--wt-grad); color: #04121f; box-shadow: var(--wt-glow); }
html[data-theme="winter"] .kc-dock .kc-cap, html[data-theme="winter"] .kc-dock-cap { background: rgba(14, 22, 46, .9); border: 1px solid var(--wt-line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--at-shadow); }

/* ---- New-account walkthrough: swatch + site mock for the Winter option ---- */
.sw-winter i:nth-child(1) { background: #060a14; } .sw-winter i:nth-child(2) { background: #131f40; } .sw-winter i:nth-child(3) { background: linear-gradient(135deg, #8bd8ff, #6ee7d8); }
.at-ob-pv[data-pv="winter"] { --pv-bg: #060a14; --pv-card: #0d1630; --pv-line: rgba(150, 195, 255, .16); --pv-text: #eef5ff; --pv-mute: rgba(150, 195, 255, .2); --pv-acc: #8bd8ff; --pv-logo: #8bd8ff; }

/* ---- Snowflake toggle in the top bar (shown in every theme so winter can be turned back on) ---- */
.at-snow-btn svg { width: 24px; height: 24px; display: block; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.at-snow-btn:hover svg { transform: rotate(60deg); }
.at-snow-btn.on { color: #8bd8ff; filter: drop-shadow(0 0 8px rgba(139, 216, 255, .6)); }
.at-snow-btn:not(.on) { opacity: .75; }
.at-snow-btn:not(.on):hover { opacity: 1; }

/* ---- Reduced motion (Settings → Appearance): no snow (above), no frosted glass, no fixed background, no hover glow ---- */
html[data-theme="winter"] body.at-reduced-motion #at-masthead { background: #070c18; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion #at-bottomnav { background: #070c18; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion #at-guide, html[data-theme="winter"] body.at-reduced-motion #at-mini-guide { background: #080d1b; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion .at-suggest, html[data-theme="winter"] body.at-reduced-motion .at-toast { background: #0e1630; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion .at-modal-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion .kc-dock .kc-cap, html[data-theme="winter"] body.at-reduced-motion .kc-dock-cap, html[data-theme="winter"] body.at-reduced-motion .at-card-menu, html[data-theme="winter"] body.at-reduced-motion .at-thumb .tl .at-pill-badge,
html[data-theme="winter"] body.at-reduced-motion .at-poster-card .rank, html[data-theme="winter"] body.at-reduced-motion .at-hero-nav .at-shelf-arrow, html[data-theme="winter"] body.at-reduced-motion .at-hero-btns .at-btn.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="winter"] body.at-reduced-motion .at-card:hover .at-thumb, html[data-theme="winter"] body.at-reduced-motion .at-poster-card:hover .pc-img { box-shadow: none; transform: none; }
/* WINTER THEME END */

/* Phone: the desktop episodes header centers the list/grid buttons on the stats line.
   Heavier theme type then runs "100% watched" under those buttons, and the comment chip sits on the card. */
@media (max-width: 791px) {
  .at-comments-teaser { margin-bottom: 12px; }
  .at-panel-head { align-items: flex-start; padding: 12px 8px 12px 12px; }
  .at-panel-head .ph-body { min-width: 0; }
  .at-panel-head .ph-sub { flex-wrap: wrap; row-gap: 2px; }
  .at-panel-head .ph-style,
  .at-panel-head > .at-iconbtn { margin-top: 2px; flex: none; }
}

/* Watch2gether invite cards (at-realtime.js) */
#at-invite-stack { position: fixed; left: 16px; bottom: 16px; z-index: 3900; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.at-invite { position: relative; display: flex; gap: 12px; padding: 14px 34px 14px 14px; border: 1px solid var(--at-border); border-radius: 14px; background: var(--at-bg-menu); box-shadow: var(--at-shadow); pointer-events: auto; animation: at-inv-in .2s ease-out; font-size: 1.35rem; line-height: 1.9rem; }
.at-invite .av { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--at-chip); }
.at-invite .tx { min-width: 0; flex: 1; }
.at-invite .tx small { display: block; color: var(--at-text-2); font-size: 1.2rem; }
.at-invite .bt { display: flex; gap: 8px; margin-top: 10px; }
.at-invite .bt .at-btn { height: 34px; padding: 0 16px; }
.at-invite .x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--at-text-2); font-size: 2rem; line-height: 1; cursor: pointer; }
.at-invite .x:hover { background: var(--at-chip); color: var(--at-text); }
@keyframes at-inv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 791px) { #at-invite-stack { left: 8px; right: 8px; width: auto; bottom: calc(var(--at-bottomnav-h, 48px) + 64px + env(safe-area-inset-bottom, 0px)); } }

/* Watch2gether chat: reply / react / edit / delete / mentions */
.wc-m { position: relative; }
.wc-m.ping { background: rgba(62, 166, 255, .10); box-shadow: inset 3px 0 0 var(--at-cta); }
.wc-m.flash { background: rgba(255, 213, 79, .16); }
.wc-ed { font-size: 1.05rem; color: var(--at-text-2); font-style: italic; }
.wc-reply { display: block; max-width: 100%; margin: 2px 0 3px; padding: 3px 8px; border: 0; border-left: 3px solid var(--kc-accent); border-radius: 4px; background: var(--at-layer-10); color: var(--at-text-2); font: inherit; font-size: 1.2rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wc-reply b { color: var(--at-text); font-weight: 600; margin-right: 4px; }
.wc-at { color: var(--kc-accent); font-weight: 600; }
.wc-at.me { background: rgba(62, 166, 255, .22); border-radius: 4px; padding: 0 3px; }
.wc-acts { position: absolute; right: 10px; top: -14px; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--at-bg-menu, var(--kc-surface-2)); border: 1px solid var(--at-layer-10); box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 2; }
.wc-m:hover .wc-acts, .wc-m:focus-within .wc-acts { display: inline-flex; }
.wc-acts button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--at-text-2); cursor: pointer; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; }
.wc-acts button:hover { background: var(--at-layer-10); color: var(--at-text); }
.wc-acts .at-icon { width: 16px; height: 16px; }
@media (hover: none) { .wc-m .wc-acts { display: inline-flex; position: static; margin-top: 4px; border: 0; box-shadow: none; padding: 0; background: transparent; } .wc-m { flex-wrap: wrap; } }
.wc-rxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wc-rx { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--at-layer-10); border-radius: 12px; background: var(--at-chip); color: var(--at-text); font: inherit; font-size: 1.25rem; cursor: pointer; }
.wc-rx b { font-size: 1.1rem; font-weight: 600; color: var(--at-text-2); }
.wc-rx.on { border-color: var(--at-cta); background: rgba(62, 166, 255, .16); }
.wc-rx.on b { color: var(--at-cta); }
.wc-rxpick { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; padding: 4px; width: max-content; max-width: 100%; border: 1px solid var(--at-layer-10); border-radius: 12px; background: var(--at-bg-menu); }
.wc-rxpick button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 1.7rem; cursor: pointer; }
.wc-rxpick button:hover { background: var(--at-layer-10); }
.wc-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 10px; border-radius: 10px; background: var(--at-layer-10); border-left: 3px solid var(--kc-accent); font-size: 1.2rem; color: var(--at-text-2); }
.wc-bar[hidden] { display: none; }
.wc-bar b { color: var(--at-text); }
.wc-bar .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-bar button { margin-left: auto; border: 0; background: transparent; color: var(--kc-accent); font: inherit; font-weight: 600; cursor: pointer; }
.wc-bar .at-icon { width: 14px; height: 14px; }
.wc-atbar { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--at-layer-10); border-radius: 12px; background: var(--at-bg-menu); box-shadow: 0 -8px 24px rgba(0,0,0,.35); z-index: 4; }
.wc-atbar[hidden] { display: none; }
.wc-at-i { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--at-text); font: inherit; text-align: left; cursor: pointer; }
.wc-at-i.on, .wc-at-i:hover { background: var(--at-layer-10); }
.wc-at-i img { width: 24px; height: 24px; border-radius: 50%; }
.wc-at-i small { color: var(--at-text-2); }

.at-w2g-people a.pp { color: inherit; text-decoration: none; }
.at-w2g-none { font-size: 1.3rem; color: var(--at-text-2); padding: 8px 0; }

/* "Synced to host" badge: on the player box (parent page), not inside the iframe, so fullscreen hides it. */
.at-w2g-sync { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.at-w2g-sync .at-icon { width: 16px; height: 16px; }
.at-w2g-sync.host { border-color: var(--at-cta); }
@media (max-width: 791px) { .at-w2g-sync { left: 8px; top: 8px; height: 24px; font-size: 1.1rem; } }

.at-fp-row.off { opacity: .55; cursor: not-allowed; }
.at-fp-row .tg { flex: none; font-style: normal; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--at-layer-10); color: var(--at-text-2); }
.at-fp-row .tg.declined { background: rgba(255, 82, 82, .16); color: #ff6b6b; }
.at-fp-row .tg.accepted { background: rgba(62, 200, 120, .16); color: #3ec878; }

/* Fullscreen is on the player box (survives episode changes); the page badge is hidden there. */
.at-w2g-player:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; }
.at-w2g-player:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; }
.at-w2g-player:fullscreen .at-w2g-sync, .at-w2g-player:-webkit-full-screen .at-w2g-sync { display: none; }