/* Шрифты подключаются в index.html через <link rel="preconnect"> + stylesheet —
   render-blocking @import отсюда убран (CSS-import блокировал первую отрисовку). */

@media (max-width: 700px) {
  .publisher-team-create-fields,
  .publisher-team-member-form,
  .publisher-moderation-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .publisher-team-member-form button {
    width: 100%;
  }

  .publisher-moderation-card > img {
    width: 64px !important;
    height: 96px !important;
  }

}

:root {
  /* Premium Minimalist Dark Base Palette (Cool Obsidian) */
  --bg-primary: #0a0a0e;
  --bg-secondary: #101016;
  --bg-tertiary: #17171f;
  --bg-elevated: #1e1e29;
  --bg-overlay: rgba(8, 8, 12, 0.82);

  /* Lolithea Bespoke Accents — violet brand with indigo/fuchsia harmony */
  --accent-color: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(139, 92, 246, 0.12);
  --accent-glow: rgba(139, 92, 246, 0.18);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --brand-gradient: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 45%, #ec4899 100%);

  /* Legacy accent aliases (referenced by component inline styles) */
  --accent-purple: #8b5cf6;
  --accent-purple-glow: rgba(139, 92, 246, 0.18);
  --accent-orange: #f59e0b;
  --accent-orange-glow: rgba(245, 158, 11, 0.12);
  --accent-pink: #ec4899;
  --accent-green: #34d399;
  --accent-red: #f43f5e;
  --accent-blue: #38bdf8;

  /* --text-muted поднят с #6b7081: контраст на #0a0a0e был ~4.1:1 (ниже WCAG AA),
     а muted используется на самых мелких кеглях 10-12px. */
  --text-primary: #f5f5f8;
  --text-secondary: #a6abbd;
  --text-muted: #7a8095;

  --border-color: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(139, 92, 246, 0.55);

  /* Формальная шкала поверхностей (слои «глубины» поверх фона) — вместо
     разрозненных rgba(255,255,255,0.01…0.08) по всему файлу. */
  --surface-1: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.07);
  --surface-hover: rgba(255, 255, 255, 0.10);

  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-title: 'Outfit', sans-serif;

  --transition-fast: 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  /* Единый ритм микропереходов (новые токены; старые transition-* остаются алиасами). */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  /* Двухслойная тень (key + ambient) вместо одной «размазанной». */
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 10px 34px rgba(139, 92, 246, 0.28);
  /* Hover главной CTA: раньше .detail-read-btn ссылался на несуществующий токен. */
  --accent-purple-hover: #7c4ff0;
  /* Единое фокус-кольцо для инпутов (вместо 4 скопированных box-shadow). */
  --ring: 0 0 0 4px var(--accent-soft);

  /* Шкала z-index — вместо магических 850/900/1000/1100/1200/10000. */
  --z-sidebar: 900;
  --z-nav: 1000;
  --z-modal: 1100;
  --z-modal-2: 1200;
  --z-toast: 1300;

  --card-padding: 20px;
}

/* Theme Accent Overrides.
   Каждая тема переопределяет ПОЛНЫЙ набор производных акцентов (strong/soft/glow/
   gradient + legacy-алиасы --accent-purple*), иначе градиентные CTA, активный пункт
   сайдбара и ~100 инлайн-обращений в JSX оставались фиолетовыми при любой теме.
   --brand-gradient сознательно НЕ переопределяется: логотип — постоянный бренд-цвет. */
:root.theme-purple {
  --accent-color: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(139, 92, 246, 0.12);
  --accent-glow: rgba(139, 92, 246, 0.18);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --accent-purple: #8b5cf6;
  --accent-purple-glow: rgba(139, 92, 246, 0.18);
  --accent-purple-hover: #7c4ff0;
  --shadow-accent: 0 10px 34px rgba(139, 92, 246, 0.28);
}

:root.theme-yellow {
  --accent-color: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --accent-glow: rgba(245, 158, 11, 0.18);
  --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  --accent-purple: #f59e0b;
  --accent-purple-glow: rgba(245, 158, 11, 0.18);
  --accent-purple-hover: #d97706;
  --shadow-accent: 0 10px 34px rgba(245, 158, 11, 0.28);
  --border-focus: rgba(245, 158, 11, 0.55);
}

:root.theme-green {
  --accent-color: #10b981;
  --accent-rgb: 16, 185, 129;
  --accent-strong: #34d399;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --accent-glow: rgba(16, 185, 129, 0.18);
  --accent-gradient: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  --accent-purple: #10b981;
  --accent-purple-glow: rgba(16, 185, 129, 0.18);
  --accent-purple-hover: #059669;
  --shadow-accent: 0 10px 34px rgba(16, 185, 129, 0.28);
  --border-focus: rgba(16, 185, 129, 0.55);
}

:root.theme-blue {
  --accent-color: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-glow: rgba(59, 130, 246, 0.18);
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --accent-purple: #3b82f6;
  --accent-purple-glow: rgba(59, 130, 246, 0.18);
  --accent-purple-hover: #2563eb;
  --shadow-accent: 0 10px 34px rgba(59, 130, 246, 0.28);
  --border-focus: rgba(59, 130, 246, 0.55);
}

:root.theme-red {
  --accent-color: #ef4444;
  --accent-rgb: 239, 68, 68;
  --accent-strong: #f87171;
  --accent-soft: rgba(239, 68, 68, 0.12);
  --accent-glow: rgba(239, 68, 68, 0.18);
  --accent-gradient: linear-gradient(135deg, #ef4444 0%, #e11d48 100%);
  --accent-purple: #ef4444;
  --accent-purple-glow: rgba(239, 68, 68, 0.18);
  --accent-purple-hover: #dc2626;
  --shadow-accent: 0 10px 34px rgba(239, 68, 68, 0.28);
  --border-focus: rgba(239, 68, 68, 0.55);
}

/* Background Theme Overrides.
   Каждый скин задаёт согласованную «лестницу» поверхностей (primary -> elevated)
   со своим цветовым подтоном; сами фоновые градиенты — в html.bg-* body (конец файла). */
:root.bg-flat-dark {
  --bg-primary: #08080a;
  --bg-secondary: #101013;
  --bg-tertiary: #16161a;
  --bg-elevated: #1c1c21;
  --bg-overlay: rgba(13, 13, 16, 0.82);
}

:root.bg-cyber-grid {
  --bg-primary: #060608;
  --bg-secondary: #0c0c0f;
  --bg-tertiary: #121216;
  --bg-elevated: #1a1a20;
  --bg-overlay: rgba(10, 10, 14, 0.82);
}

/* Cyber Grid: точечная матрица поверх линий сетки (линии — на body). */
:root.bg-cyber-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(125, 211, 252, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 0;
  pointer-events: none;
}

:root.bg-space-nebula {
  --bg-primary: #050508;
  --bg-secondary: #0b0b0e;
  --bg-tertiary: #101015;
  --bg-elevated: #18181f;
  --bg-overlay: rgba(9, 9, 14, 0.82);
}

:root.bg-aurora-glow {
  --bg-primary: #040606;
  --bg-secondary: #080c0c;
  --bg-tertiary: #0c1212;
  --bg-elevated: #141c1c;
  --bg-overlay: rgba(6, 11, 10, 0.82);
}

:root.bg-sunset-gradient {
  --bg-primary: #080506;
  --bg-secondary: #0f0a0c;
  --bg-tertiary: #161012;
  --bg-elevated: #1e171a;
  --bg-overlay: rgba(13, 8, 10, 0.82);
}

:root.bg-sakura-night {
  --bg-primary: #0a0608;
  --bg-secondary: #120a0f;
  --bg-tertiary: #1a1016;
  --bg-elevated: #221620;
  --bg-overlay: rgba(16, 9, 13, 0.82);
}

:root.bg-deep-ocean {
  --bg-primary: #04070c;
  --bg-secondary: #081019;
  --bg-tertiary: #0d1722;
  --bg-elevated: #131f2e;
  --bg-overlay: rgba(7, 14, 21, 0.82);
}

:root.bg-golden-hour {
  --bg-primary: #0a0805;
  --bg-secondary: #14100a;
  --bg-tertiary: #1c1710;
  --bg-elevated: #251e15;
  --bg-overlay: rgba(17, 13, 8, 0.82);
}

:root.bg-midnight-amethyst {
  --bg-primary: #0a0712;
  --bg-secondary: #120d1d;
  --bg-tertiary: #191327;
  --bg-elevated: #211a33;
  --bg-overlay: rgba(15, 11, 25, 0.82);
}

:root.bg-starfield {
  --bg-primary: #050507;
  --bg-secondary: #0b0b10;
  --bg-tertiary: #111118;
  --bg-elevated: #181822;
  --bg-overlay: rgba(9, 9, 13, 0.82);
}

/* Starfield: два слоя «звёзд» разного размера и плотности (статичные — дешёвые). */
:root.bg-starfield::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.35) 0.8px, transparent 1.2px),
    radial-gradient(rgba(165, 180, 252, 0.22) 0.6px, transparent 1px);
  background-size: 190px 190px, 110px 110px;
  background-position: 0 0, 55px 75px;
  z-index: 0;
  pointer-events: none;
}

/* Background Aurora Blobs for dynamic fluid gradient effects */
.aurora-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.05;
  transition: background var(--transition-normal), opacity var(--transition-normal);
  width: 700px;
  height: 700px;
  animation: floatAnimation 25s infinite ease-in-out alternate;
}

/* Мобильные: blur(120px) + mix-blend-mode — дорогой repaint при скролле.
   Эффект на маленьком экране почти не виден, выключаем целиком. */
@media (max-width: 768px) {
  .aurora-blob {
    display: none;
  }
}

.blob-1 {
  top: -150px;
  left: -150px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
  animation-duration: 20s;
}

.blob-2 {
  bottom: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  animation-duration: 25s;
  animation-delay: -5s;
}

.blob-3 {
  top: 35%;
  left: 55%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07) 0%, transparent 75%);
  animation-duration: 30s;
  animation-delay: -10s;
}

/* Adjust colors of blobs for specific background themes */
:root.bg-space-nebula .blob-2 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.12) 0%, transparent 70%); /* Pink glow in space */
}

:root.bg-aurora-glow .blob-1 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%); /* Green glow */
}
:root.bg-aurora-glow .blob-2 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%); /* Cyan glow */
}

:root.bg-sunset-gradient .blob-1 {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.15) 0%, transparent 70%); /* Rose glow */
}
:root.bg-sunset-gradient .blob-2 {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%); /* Amber glow */
}

:root.bg-sakura-night .blob-1 {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.14) 0%, transparent 70%); /* Pink glow */
}
:root.bg-sakura-night .blob-2 {
  background: radial-gradient(circle, rgba(190, 24, 93, 0.10) 0%, transparent 70%); /* Deep rose */
}

:root.bg-deep-ocean .blob-1 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 70%); /* Cyan glow */
}
:root.bg-deep-ocean .blob-2 {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%); /* Blue depth */
}

:root.bg-golden-hour .blob-1 {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.13) 0%, transparent 70%); /* Amber glow */
}
:root.bg-golden-hour .blob-2 {
  background: radial-gradient(circle, rgba(234, 88, 12, 0.10) 0%, transparent 70%); /* Warm orange */
}

:root.bg-midnight-amethyst .blob-1 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 70%); /* Violet glow */
}
:root.bg-midnight-amethyst .blob-2 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%); /* Indigo depth */
}

:root.bg-starfield .blob-1 {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.08) 0%, transparent 70%); /* Faint blue */
}
:root.bg-starfield .blob-2 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.07) 0%, transparent 70%); /* Faint violet */
}

@keyframes floatAnimation {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(60px, 30px) scale(1.08);
  }
  100% {
    transform: translate(-30px, 60px) scale(0.95);
  }
}

/* Server-rendered discovery content, replaced by React after hydration */
.seo-prerender {
  min-height: 100vh;
  padding: 0 5vw 64px;
  background: #0b0b0d;
  color: #f5f5f7;
  font-family: Inter, system-ui, sans-serif;
}

.seo-prerender a {
  color: inherit;
  text-decoration: none;
}

.seo-prerender-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  border-bottom: 1px solid #26262b;
  color: #a8a8b3;
  font-size: 14px;
}

.seo-prerender-nav a:hover,
.seo-prerender-footer a:hover,
.seo-prerender-links a:hover {
  color: #9c6cff;
}

.seo-prerender-brand {
  margin-right: auto;
  color: #fff !important;
  font-size: 22px;
  font-weight: 800;
}

.seo-prerender-header {
  max-width: 920px;
  padding: 58px 0 34px;
}

.seo-prerender-header > span {
  color: #9c6cff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.seo-prerender-header h1 {
  max-width: 850px;
  margin: 10px 0 14px;
  color: #fff;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
}

.seo-prerender-header p {
  max-width: 780px;
  margin: 0;
  color: #b7b7c2;
  line-height: 1.7;
}

.seo-prerender-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 28px;
  color: #d2d2da;
  font-size: 14px;
}

.seo-prerender-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 24px 18px;
  max-width: 1280px;
}

.seo-prerender-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #18181c;
  object-fit: cover;
}

.seo-prerender-card span {
  display: block;
  overflow: hidden;
  color: #f1f1f4;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.seo-prerender-card small {
  display: block;
  margin-top: 5px;
  color: #777783;
  font-size: 11px;
}

.seo-prerender-detail {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 720px);
  gap: 34px;
  max-width: 1040px;
}

.seo-prerender-detail > img {
  width: 100%;
  border-radius: 6px;
}

.seo-prerender-detail p,
.seo-prerender-copy p {
  color: #b7b7c2;
  line-height: 1.75;
}

.seo-prerender-detail dl {
  margin: 24px 0;
}

.seo-prerender-detail dl div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #242429;
}

.seo-prerender-detail dt {
  color: #777783;
}

.seo-prerender-detail dd {
  margin: 0;
}

.seo-prerender-tags {
  color: #9c6cff !important;
}

.seo-prerender-chapters,
.seo-prerender-copy {
  max-width: 820px;
  margin-top: 42px;
}

.seo-prerender-chapters h2,
.seo-prerender-copy h2 {
  color: #fff;
  font-size: 21px;
  letter-spacing: 0;
}

.seo-prerender-chapters ul {
  columns: 2;
  padding-left: 20px;
  color: #b7b7c2;
}

.seo-prerender-copy section {
  padding: 18px 0;
  border-bottom: 1px solid #242429;
}

.seo-prerender-avatar {
  width: 110px;
  height: 110px;
  margin-bottom: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.seo-prerender-footer {
  display: flex;
  gap: 22px;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid #242429;
  color: #777783;
  font-size: 13px;
}

@media (max-width: 700px) {
  .seo-prerender {
    padding: 0 18px 48px;
  }

  .seo-prerender-nav {
    gap: 14px;
    overflow-x: auto;
  }

  .seo-prerender-nav a:not(.seo-prerender-brand) {
    white-space: nowrap;
  }

  .seo-prerender-header {
    padding: 38px 0 26px;
  }

  .seo-prerender-header h1 {
    font-size: 34px;
  }

  .seo-prerender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .seo-prerender-detail {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
  }

  .seo-prerender-detail dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .seo-prerender-chapters ul {
    columns: 1;
  }
}

/* Search discovery pages */
.catalog-intro {
  max-width: 860px;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.catalog-seo-navigation,
.footer-discovery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.catalog-seo-navigation {
  margin: 18px 0 4px;
}

.catalog-seo-navigation a,
.footer-discovery-links a {
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.catalog-seo-navigation a:hover,
.footer-discovery-links a:hover {
  color: var(--accent-color);
}

.footer-discovery-links {
  justify-content: center;
  margin-top: 10px;
}

.info-page {
  min-height: 65vh;
  padding-top: 30px;
  padding-bottom: 70px;
}

.info-page-header {
  max-width: 820px;
  padding: 42px 0 30px;
  border-bottom: 1px solid var(--border-color);
}

.info-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.info-page-kicker svg {
  width: 16px;
  height: 16px;
}

.info-page-header h1 {
  margin: 12px 0;
  color: var(--text-primary);
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: 0;
}

.info-page-header p,
.info-page-sections p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.75;
}

.info-page-sections {
  display: grid;
  max-width: 820px;
  gap: 0;
}

.info-page-sections section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border-color);
}

.info-page-sections h2 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 19px;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .catalog-intro {
    font-size: 13px;
  }

  .catalog-seo-navigation {
    gap: 10px 14px;
  }

  .info-page {
    padding-top: 20px;
  }

  .info-page-header {
    padding: 30px 0 24px;
  }
}

/* Reset & Base Elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(900px 520px at -5% 4%, rgba(99, 102, 241, 0.07), transparent 55%);
  background-attachment: fixed;
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Premium Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.55);
  background-clip: padding-box;
}

/* Firefox: стандартные свойства (webkit-псевдоэлементы там не работают). */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

/* .custom-scrollbar используется в JSX (Creator/MangaDetail/SenkuroImportPanel),
   но раньше нигде не был определён — контейнеры показывали дефолтный скроллбар.
   Темизируем его и в Firefox, и в WebKit. */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.55);
  background-clip: padding-box;
}

/* Typography elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

input, textarea, select {
  background: none;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  width: 100%;
}

/* A11y: видимый фокус с клавиатуры (мышиные клики не показывают рамку). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  /* !important — чтобы перебить точечные правила .class:focus { outline: none }.
     border-radius не задаём: outline следует форме самого контрола (в т.ч. pill).
     --accent-color (а не легаси --accent-purple) — кольцо следует выбранной теме. */
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;
}

/* A11y: уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Base Glassmorphism utility classes */
.glass {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.glass-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.glass-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Layout Structures */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.app-layout-wrapper {
  display: flex;
  margin-top: 56px; /* Offset header height */
  min-height: calc(100vh - 56px);
  width: 100%;
}

.sidebar-container {
  width: 240px;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  z-index: 900;
  transition: width var(--transition-normal);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}

.sidebar-container.collapsed {
  width: 72px;
}

/* Custom thin scrollbar visible only on hover */
.sidebar-container::-webkit-scrollbar {
  width: 4px;
}

.sidebar-container::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-container::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.sidebar-container:hover::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
}

.main-content {
  flex: 1;
  margin-left: 240px;
  transition: margin-left var(--transition-normal);
  padding: 32px 40px;
  min-width: 0;
  position: relative;
  z-index: 10;
}

/* Фокус ставится программно при SPA-навигации (tabIndex=-1) — кольцо не нужно. */
.main-content:focus,
.main-content:focus-visible {
  outline: none;
}

/* Skip-link «Перейти к содержимому»: виден только при фокусе с клавиатуры. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 1);
  color: #fff;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.main-content.sidebar-collapsed {
  margin-left: 72px;
}

.sidebar-mobile-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-container {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }
  .sidebar-container.open {
    transform: translateX(0);
    width: 240px;
  }
  .sidebar-mobile-backdrop {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 850; /* behind sidebar (900) but above content */
    animation: fadeIn var(--transition-fast) ease-out;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 16px;
  }
  .app-layout-wrapper {
    margin-top: 56px;
  }
}

.max-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.manga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 28px;
  width: 100%;
}

@media (max-width: 640px) {
  .max-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .manga-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
}

/* Navbar - YouTube style Top Header */
.navbar-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  /* var(--bg-overlay) вместо захардкоженного rgba(16,16,22,.8): каждый bg-скин
     задаёт свой подтон оверлея, и шапка тонируется под выбранный фон
     (раньше холодно-серая полоса выбивалась на тёплых/цветных скинах). */
  background-color: var(--bg-overlay) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-strong) !important;
  z-index: 1000;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: var(--text-primary);
  margin-right: 16px;
  transition: background-color var(--transition-fast);
}

.sidebar-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.logo-badge {
  display: flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent-gradient);
  box-shadow: var(--shadow-accent);
}

.logo-icon {
  width: 17px;
  height: 17px;
  color: #ffffff;
}

.logo-text {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.logo-span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}

/* Sidebar items list */
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  transition: padding var(--transition-normal);
}

.sidebar-container.collapsed .sidebar-links {
  padding: 0 4px;
}

.sidebar-link-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #a1a1a8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), padding var(--transition-normal), flex-direction var(--transition-normal);
}

.sidebar-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar-link-icon {
  transition: transform var(--transition-fast);
}

.sidebar-link-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sidebar-link-btn:hover .sidebar-link-icon {
  transform: scale(1.08);
}

.sidebar-link-btn.active {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  position: relative;
}

.sidebar-link-btn.active .sidebar-link-icon {
  color: var(--accent-strong);
}

.sidebar-container:not(.collapsed) .sidebar-link-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--accent-gradient);
  border-radius: 99px;
}

.sidebar-link-text {
  white-space: nowrap;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-fast);
}

.sidebar-container.collapsed .sidebar-link-btn {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
  border-radius: 10px;
}

.sidebar-container.collapsed .sidebar-link-text {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
}

/* Бейдж-счётчик у пункта «Библиотека» удалён: в навигации он читался как
   уведомление; общее количество теперь показывается на самой странице. */

.sidebar-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 12px 0;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 28px;
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* История чтения в сайдбаре */
.sidebar-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.sidebar-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}

.sidebar-history-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-history-cover {
  flex-shrink: 0;
  width: 30px;
  height: 42px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.08));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.sidebar-history-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-history-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.sidebar-history-manga {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-history-chapter {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-history-empty {
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.nav-button {
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.nav-button.active {
  background-color: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-purple);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

@media (max-width: 768px) {
  .logo-text {
    display: none;
  }
}

/* Дропдаун уведомлений стилизован инлайном (width:320px, right:0) и на узких
   экранах вылезал за левый край вьюпорта — фиксируем поверх инлайна */
@media (max-width: 480px) {
  .notifications-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 60px !important;
    width: auto !important;
    max-height: calc(100dvh - 72px) !important;
  }
}

@media (max-width: 640px) {
  .navbar-header {
    padding: 0 12px;
  }
  .nav-button span:not(.nav-badge) {
    display: none;
  }
  .nav-button {
    padding: 8px 10px;
  }
}

/* Navbar Search Widget - Modern Minimalist Pill */
.search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0 16px;
  height: 40px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-wrapper:hover {
  background-color: var(--surface-3);
  border-color: var(--border-strong);
}

/* Единое кольцо фокуса рисует ТОЛЬКО обёртка — нативно через :focus-within
   (клавиатура/мышь) и по legacy JS-классу .focused. */
.search-form:focus-within .search-input-wrapper,
.search-input-wrapper.focused {
  background-color: var(--surface-3);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-input {
  font-size: 13px;
  color: var(--text-primary);
  width: 100%;
  height: 100%;
  background: transparent;
  padding-right: 28px;
}

.search-input::placeholder {
  color: var(--text-secondary);
}

/* ТОЧЕЧНЫЙ ФИКС ДВОЙНОЙ РАМКИ (шапка). Прецедент: .catalog-mobile-search /
   .chapter-list-search. Глушим глобальный input:focus-visible (!important)
   ТОЛЬКО на этом инпуте — видимый фокус даёт pill-обёртка выше через :focus-within.
   Спецификатор .search-input-wrapper .search-input:focus-visible (0,2,1) > (0,1,1). */
.search-input-wrapper .search-input:focus,
.search-input-wrapper .search-input:focus-visible {
  outline: none !important;
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  position: absolute;
  right: 6px;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.search-form:focus-within .search-btn {
  color: var(--text-secondary);
}

.search-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* Кнопка-иконка поиска для мобильных: <640px строка поиска скрыта,
   и без неё глобальный поиск на телефоне был недоступен вовсе. */
.mobile-search-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-search-btn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .search-form {
    display: none;
  }

  .mobile-search-btn {
    display: flex;
  }
}

/* Поиск на странице каталога: классы использовались в JSX, но не были
   определены — поле рендерилось «голым» (иконка 24px + input без рамки). */
.catalog-mobile-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  padding: 0 16px;
  height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.catalog-mobile-search:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

/* Кольцо фокуса показывает pill-обёртка (:focus-within выше) — глобальный
   :focus-visible-outline на внутреннем инпуте давал вторую, прямоугольную рамку. */
.catalog-mobile-search .search-input:focus,
.catalog-mobile-search .search-input:focus-visible {
  outline: none !important;
}

.catalog-mobile-search .search-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.catalog-mobile-search .search-input {
  padding-right: 0;
}

@media (max-width: 640px) {
  .catalog-mobile-search {
    min-width: 0;
    width: 100%;
  }
}

/* User profile badge in Navbar */

/* Музыкальный плеер удалён с сайта (10.06.2026) — его стили вычищены. */

/* HeroBanner - Wide Cinema Look */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  height: 440px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  .hero-banner {
    height: 320px;
  }
}

.hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Elegant shadow overlay to merge banner with layout */
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-primary) 0%, rgba(8, 8, 10, 0.35) 60%, transparent 100%),
              linear-gradient(to right, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.76) 38%, rgba(8, 8, 10, 0.38) 72%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: min(calc(75% + 80px), 1120px);
  padding: 40px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .hero-content {
    width: min(calc(84% + 64px), 100%);
    padding: 32px;
  }
}

@media (max-width: 640px) {
  .hero-banner {
    height: 400px;
  }

  .hero-banner::after {
    background:
      linear-gradient(to top, rgba(8, 8, 10, 0.98) 0%, rgba(8, 8, 10, 0.7) 64%, rgba(8, 8, 10, 0.28) 100%),
      linear-gradient(to right, rgba(8, 8, 10, 0.58) 0%, rgba(8, 8, 10, 0.18) 100%);
  }

  .hero-content {
    width: 100%;
    padding: 24px;
  }
}

/* Premium Accent Button Class */

/* Slide Indicator dots in HeroBanner */

.indicator-dot {
  width: 16px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator-dot.active {
  width: 32px;
  background: var(--accent-gradient);
}

/* MangaCard - High End Scale & Overlay */
.manga-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-normal);
}

.card-cover-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card-cover-link {
  display: block;
  width: 100%;
  height: 100%;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

.card-img.loaded {
  opacity: 1;
}

.card-cover-unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    var(--bg-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card-cover-unavailable svg {
  width: 30px;
  height: 30px;
  color: var(--accent-color);
  opacity: 0.8;
}

/* Shimmer-скелет, пока обложка грузится через прокси */
.card-img-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--bg-secondary) 28%, var(--bg-elevated) 50%, var(--bg-secondary) 72%);
  background-size: 200% 100%;
  animation: cardShimmer 1.4s ease-in-out infinite;
}

@keyframes cardShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Универсальный скелетон-блок: тот же шиммер, но обычный блочный элемент
   (card-img-skeleton — absolute и вне обёртки схлопывается в ноль) */
.skeleton-block {
  background: linear-gradient(100deg, var(--bg-secondary) 28%, var(--bg-elevated) 50%, var(--bg-secondary) 72%);
  background-size: 200% 100%;
  animation: cardShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Скелетон стартовой загрузки страницы */
.page-skeleton {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.page-skeleton-hero {
  height: 440px;
  width: 100%;
}

@media (max-width: 768px) {
  .page-skeleton-hero {
    height: 320px;
  }
}

.page-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.page-skeleton-card {
  aspect-ratio: 2 / 3;
}

/* Скелетон строки списка глав на странице тайтла */
.chapter-row-skeleton {
  height: 52px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
}

/* Фоллбэк-лоадер (Suspense lazy-страниц и второстепенные экраны):
   классы использовались в JSX, но правил для них не существовало */
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50vh;
}

.premium-loader {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb), 0.15);
  border-top-color: var(--accent-purple);
  animation: loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Кнопка очистки в поисковых полях каталога/библиотеки */
.search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.search-clear-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.manga-card:hover,
.manga-card:focus-within {
  transform: translateY(-4px);
}

.manga-card:hover .card-img,
.manga-card:focus-within .card-img {
  transform: scale(1.04);
}

.manga-card:hover .card-cover-container,
.manga-card:focus-within .card-cover-container {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}

/* type-badge — используется в HeroBanner */
.type-badge {
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

/* Рейтинг / «НОВОЕ» — glass-чип поверх обложки */
.card-rating-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.card-rating-chip svg {
  color: #fbbf24;
}

.card-rating-chip.is-new {
  color: var(--accent-strong);
  letter-spacing: 0.05em;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Прогресс чтения — всегда виден по нижней кромке обложки */
.card-cover-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 9;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4);
}

.card-cover-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
  border-radius: 0 2px 0 0;
  transition: width var(--transition-normal);
}

/* Bookmark btn inside card */
.bookmark-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 10, 14, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bookmark-btn:hover {
  color: #ef4444;
  transform: scale(1.15);
}

.bookmark-btn.active {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Cover hover darken so the Read button reads clearly */
.card-cover-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 12, 0.58) 0%, rgba(8, 8, 12, 0.14) 30%, rgba(8, 8, 12, 0) 52%);
  transition: background var(--transition-normal);
}

.manga-card:hover .card-cover-shade,
.manga-card:focus-within .card-cover-shade {
  background: linear-gradient(to top, rgba(8, 8, 12, 0.82) 0%, rgba(8, 8, 12, 0.5) 38%, rgba(8, 8, 12, 0.2) 100%);
}

/* Hover-reveal centered Read action */
.card-hover-actions {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.manga-card:hover .card-hover-actions,
.manga-card:focus-within .card-hover-actions {
  opacity: 1;
}

/* Тач-устройства: hover не существует — кнопка «Читать/Продолжить» была невидима.
   Показываем её всегда, прижатой к нижней кромке обложки, компактнее. */
@media (hover: none) {
  .card-hover-actions {
    opacity: 1;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    background: linear-gradient(to top, rgba(8, 8, 12, 0.55) 0%, transparent 40%);
  }

  .card-read-btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  /* Тап-таргеты: 30px слишком мало для пальца рядом со ссылкой карточки */
  .bookmark-btn {
    width: 40px;
    height: 40px;
  }
}

.card-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-accent);
  transform: translateY(8px);
  transition: filter var(--transition-fast), transform var(--transition-normal);
}

.manga-card:hover .card-read-btn,
.manga-card:focus-within .card-read-btn {
  transform: translateY(0);
}

.card-read-btn:hover {
  filter: brightness(1.08);
}

/* Card details underneath — clean stacked typography */
.card-info {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.card-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
}

.card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.card-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.card-status.ongoing {
  color: #34d399;
}

.card-title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2); /* резерв под 2 строки — ровная базовая линия в сетке */
  transition: color var(--transition-fast);
}

.card-title a {
  color: inherit;
}

.manga-card:hover .card-title,
.manga-card:focus-within .card-title {
  color: var(--accent-strong);
}

.card-publisher {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.card-stat-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-dot {
  opacity: 0.45;
}

/* Card reading progress bar system */

/* Resume Reading widget styling */
.resume-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background:
    linear-gradient(100deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.015) 35%, transparent 68%),
    var(--bg-secondary);
  margin-bottom: 32px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.resume-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-gradient);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.48);
}

.resume-card-left {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.resume-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.resume-card-copy {
  min-width: 0;
}

.resume-card-title {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
}

.resume-card-reading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.resume-card-subtitle {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 750;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-card-chapter {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.resume-card-link-btn {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb), 0.09);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-strong);
  white-space: nowrap;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.resume-card-link-btn:hover {
  background: var(--accent-gradient);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .resume-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .resume-card-left {
    align-items: flex-start;
  }

  .resume-card-reading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .resume-card-subtitle {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.4;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .resume-card-link-btn {
    width: 100%;
  }
}

/* Genres Horizontal Selection list */
.quick-genres {
  margin-bottom: 32px;
}

/* Персональный блок «Рекомендуем вам» на главной (сетка карточек как «Популярно сейчас»). */
.personal-recs {
  margin-bottom: 32px;
}

/* Лента «Недавно читали» — горизонтальный ряд компактных плиток-резюме (кросс-девайс). */
.resume-rail-section {
  margin-bottom: 32px;
}
.resume-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.resume-rail::-webkit-scrollbar {
  display: none;
}
.resume-tile {
  flex: 0 0 auto;
  width: 232px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.resume-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.resume-tile-cover {
  width: 42px;
  height: 58px;
  flex: 0 0 42px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
}
.resume-tile-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.resume-tile-title {
  font-size: 13px;
  font-weight: 750;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-tile-chapter {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.home-section-title-icon {
  width: 20px;
  height: 20px;
}

.home-section-title {
  font-size: 20px;
  font-weight: 800;
}

.genre-pill-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  padding: 4px 0 12px;
  scrollbar-width: none; /* Hide for Firefox */
  -ms-overflow-style: none; /* Hide for IE/Edge */
}

.genre-pill-wrapper::-webkit-scrollbar {
  display: none; /* Hide for Chrome, Safari, Opera */
}

.genre-pill {
  scroll-snap-align: start;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.genre-pill:hover {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-strong);
}

.genre-pill:active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #ffffff;
}

/* Two Columns Homepage list styling */
.home-columns {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 48px;
}

.main-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.column-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-purple);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.column-link:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  transform: translateX(2px);
}

.column-link svg {
  width: 15px;
  height: 15px;
}

.recent-chapters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.recent-chapter-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.recent-chapter-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(var(--accent-rgb), 0.15);
  transform: translateX(4px);
}

.recent-chapter-item:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.recent-chapter-cover {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.recent-chapter-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* min-width:0 — flex-айтем по умолчанию не уже своего контента: длинное название главы
     раздвигало строку и ломало вёрстку «Недавно читали». Даёт text-overflow внутри работать. */
  min-width: 0;
}

.recent-chapter-manga-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-chapter-title {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}

.recent-chapter-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}

/* Catalog View Layout */
.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 20px;
}

.catalog-title {
  font-size: 28px;
  font-weight: 800;
}

.catalog-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.catalog-filters {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filter-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filter-select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  min-width: 150px;
  transition: all var(--transition-fast);
}

.filter-select:hover {
  border-color: var(--border-strong);
}

.filter-select:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Library Page View */
.library-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.library-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: rgba(255, 255, 255, 0.02);
  padding: 8px 16px;
  width: 260px;
}

.library-search-input {
  font-size: 12px;
}

.library-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.library-tabs::-webkit-scrollbar {
  display: none;
}

.library-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.library-tab-btn:hover {
  color: var(--text-primary);
}

.library-tab-btn.active {
  background: transparent;
  color: var(--accent-purple);
  border-bottom-color: var(--accent-purple);
}

.library-tab-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.library-tab-btn.active .library-tab-count {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-purple);
}

/* Empty Library State styling */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

.empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.empty-text {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 320px;
  margin-bottom: 24px;
}

.empty-btn {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  box-shadow: var(--shadow-accent);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--accent-rgb), 0.4);
}

/* Profile View & Store layout */
.profile-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

/* Profile neon level borders */

/* Creator Store system */

/* Detail View Layout Page */

.detail-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 6px;
}

/* Detail page category selects and buttons */

/* Chapters layout list */
.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 6px;
}

.chapter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chapter-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.chapter-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.chapter-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* Comments Section inputs and typography */

.comment-textarea {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 13px;
  color: var(--text-primary);
  resize: vertical;
  min-height: 80px;
}

.comment-textarea:focus {
  border-color: var(--accent-purple);
}

.comment-submit-btn {
  align-self: flex-end;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  box-shadow: var(--shadow-accent);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.comment-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--accent-rgb), 0.4);
}

.comment-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Comments Section — layout, header, list & cards */
.comments-container {
  padding: 20px;
  margin-top: 8px;
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.comments-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-title-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-purple);
  flex-shrink: 0;
}

.comments-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.comments-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Pill-кнопки сортировки (вместо нативного select с системным дропдауном). */
.comments-sort-btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comments-sort-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
}

.comments-sort-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-purple);
}

/* New comment form */
.comment-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.comment-textarea-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.comment-textarea-wrapper .comment-textarea {
  width: 100%;
  min-height: 70px;
  margin: 0;
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* Comments list */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.comment-date {
  font-size: 11px;
  color: var(--text-muted);
}

.comment-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Спойлер-теги ||текст|| в комментах/отзывах: заблюрено до клика. */
.spoiler-text {
  background: rgba(155, 102, 255, 0.16);
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.15s ease, background 0.15s ease;
}
.spoiler-text:hover { background: rgba(155, 102, 255, 0.26); }

/* @-упоминание в тексте коммента/отзыва. */
.mention-text { color: var(--accent-purple); font-weight: 700; }
.spoiler-text.revealed {
  filter: none;
  background: rgba(155, 102, 255, 0.1);
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

/* Треды комментариев: ответы с отступом и левой линией. */
.comment-replies {
  margin: 10px 0 0 26px;
  padding-left: 12px;
  border-left: 2px solid rgba(155, 102, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comment-reply .comment-user-name { font-size: 13px; }
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.comment-reply-btn:hover { color: var(--accent-purple); background: rgba(155, 102, 255, 0.1); }
.comment-reply-form { margin-top: 8px; }
.comment-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.comment-icon-btn:hover { color: var(--accent-purple); background: rgba(155, 102, 255, 0.1); }
.comment-icon-danger:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.comment-reply-cancel {
  margin-right: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}

.comment-likes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.comment-likes-btn:hover {
  border-color: var(--accent-purple);
  color: var(--text-primary);
}

.comment-likes-btn.active {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}

/* Дизлайк: активное состояние — красное; hover тоже в красную сторону. */
.comment-likes-btn.dislike:hover:not(:disabled) {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.comment-likes-btn.dislike.active {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

/* Свой комментарий оценивать нельзя. */
.comment-likes-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.comment-likes-btn:disabled:hover {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.comment-likes-icon {
  width: 14px;
  height: 14px;
}

/* Звуковые реакции (⚡💥🎉) удалены: выглядели как непонятные кнопки и не несли
   функции — классы .comment-audio-reactions/.audio-reaction-btn вычищены. */

/* Empty state */
.empty-comments-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}

.empty-comments-icon {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  opacity: 0.6;
}

.empty-comments-text {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Compact embedding of the comments section inside a review card */
.review-comments-embed .comments-container {
  padding: 0;
  margin-top: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.review-comments-embed .comments-container:hover {
  border: none;
  box-shadow: none;
}

.review-comments-embed .comments-title {
  font-size: 13px;
}

/* ==========================================================================
   Phase 4 - Immersive Glassmorphic Reader Mode
   ========================================================================== */

/* Reader Theme Variables & Configurations */
.theme-reader-dark {
  --reader-bg: #08080a;
  --reader-text: #f8fafc;
  --reader-muted-text: #94a3b8;
  --reader-panel-bg: rgba(16, 16, 20, 0.85);
  --reader-panel-bg-solid: #101013;
  --reader-border: rgba(255, 255, 255, 0.06);
  --reader-accent-glow: rgba(255, 255, 255, 0.02);
  --reader-btn-active: var(--accent-purple);
  --reader-btn-active-text: #ffffff;
  --reader-input-bg: rgba(0, 0, 0, 0.2);
  --reader-shadow-color: rgba(0, 0, 0, 0.5);
}

.theme-reader-black {
  --reader-bg: #000000;
  --reader-text: #f8fafc;
  --reader-muted-text: #64748b;
  --reader-panel-bg: rgba(10, 10, 12, 0.85);
  --reader-panel-bg-solid: #0a0a0c;
  --reader-border: rgba(255, 255, 255, 0.05);
  --reader-accent-glow: rgba(255, 255, 255, 0.02);
  --reader-btn-active: #ffffff;
  --reader-btn-active-text: #000000;
  --reader-input-bg: rgba(255, 255, 255, 0.03);
  --reader-shadow-color: rgba(0, 0, 0, 0.8);
}

.theme-reader-grey {
  --reader-bg: #121214;
  --reader-text: #f8fafc;
  --reader-muted-text: #8a99ad;
  --reader-panel-bg: rgba(20, 20, 24, 0.85);
  --reader-panel-bg-solid: #141417;
  --reader-border: rgba(255, 255, 255, 0.05);
  --reader-accent-glow: rgba(255, 255, 255, 0.02);
  --reader-btn-active: var(--accent-color);
  --reader-btn-active-text: #ffffff;
  --reader-input-bg: rgba(0, 0, 0, 0.15);
  --reader-shadow-color: rgba(0, 0, 0, 0.4);
}

.theme-reader-sepia {
  --reader-bg: #f5edd6;
  --reader-text: #3c2f1f;
  --reader-muted-text: #867460;
  --reader-panel-bg: rgba(232, 221, 198, 0.85);
  --reader-panel-bg-solid: #e8ddc6;
  --reader-border: rgba(60, 47, 31, 0.1);
  --reader-accent-glow: rgba(180, 83, 9, 0.02);
  --reader-btn-active: #b45309;
  --reader-btn-active-text: #ffffff;
  --reader-input-bg: rgba(60, 47, 31, 0.05);
  --reader-shadow-color: rgba(60, 47, 31, 0.1);
}

/* Base Reader Container */
.reader-container {
  display: flex;
  flex-direction: column;
  background-color: var(--reader-bg);
  color: var(--reader-text);
  min-height: 100vh;
  position: relative;
  /* Читалка — полноэкранный режим. Поднимаем весь её stacking context выше
     глобального navbar (z-index: 1000), иначе reader-header и его выпадающие
     панели остаются под navbar даже со своими внутренними z-index. */
  z-index: 1100;
  isolation: isolate;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Glassmorphic Top Controls Bar */
.reader-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  max-width: 1100px;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--reader-border);
  border-radius: 99px;
  box-shadow: 0 10px 32px var(--reader-shadow-color);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s ease, 
              border-color 0.3s ease;
}

.reader-header.hidden {
  transform: translate(-50%, -100px);
  opacity: 0;
  pointer-events: none;
}

.reader-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 20px;
  gap: 12px;
}

/* Back Button styling */
.reader-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--reader-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--reader-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reader-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--reader-btn-active);
  transform: translateX(-2px);
}

/* Chapter Selector */
.chapter-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 320px;
}

.chapter-select-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--reader-muted-text);
  white-space: nowrap;
  /* min-width: 0 + обрезка: длинный заголовок манги может сжиматься, а не
     выталкивать пикер глав в нулевую ширину (схлопывание кнопки). */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: none; /* Hide on small screens, style label */
}

@media (min-width: 768px) {
  .chapter-select-label {
    display: inline-block;
  }
}

/* Кастомный пикер глав (нативный select заменён: системный дропдаун не
   стилизовался под темы ридера и давал двойную обводку с глобальным
   focus-кольцом — теперь обводка одна, глобальная). */
.chapter-picker {
  position: relative;
  flex: 1;
  /* Гарантированная минимальная ширина: пикер никогда не схлопывается под
     длинным заголовком манги (с коротким — растёт по flex и показывает больше). */
  min-width: 120px;
}

.chapter-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--reader-input-bg);
  border: 1px solid var(--reader-border);
  color: var(--reader-text);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chapter-picker-btn:hover {
  border-color: var(--reader-btn-active);
}

.chapter-picker-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-list-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 240px;
  background: var(--reader-panel-bg-solid);
  border: 1px solid var(--reader-border);
  border-radius: 12px;
  box-shadow: 0 15px 30px var(--reader-shadow-color);
  z-index: 210;
  overflow: hidden;
  animation: settingsPanelFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter-list-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--reader-input-bg);
  border: none;
  border-bottom: 1px solid var(--reader-border);
  color: var(--reader-text);
  font-size: 12.5px;
}

/* Глобальное фокус-кольцо здесь ломается об overflow панели (видна только его
   нижняя грань «полоской» поверх списка) — глушим селектором с :focus-visible
   (иначе глобальный input:focus-visible выигрывает по специфичности) и
   показываем фокус подчёркиванием поля. */
.chapter-list-search:focus,
.chapter-list-search:focus-visible {
  outline: none !important;
  border-bottom-color: var(--reader-btn-active);
}

.chapter-list-search::placeholder {
  color: var(--reader-muted-text);
}

.chapter-list-scroll {
  max-height: 50vh;
  overflow-y: auto;
}

.chapter-list-scroll::-webkit-scrollbar {
  width: 8px;
}

.chapter-list-scroll::-webkit-scrollbar-thumb {
  background: var(--reader-border);
  border-radius: 99px;
}

.chapter-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--reader-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}

.chapter-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.chapter-list-item.active {
  color: var(--reader-btn-active);
  border-left-color: var(--reader-btn-active);
  background: rgba(255, 255, 255, 0.04);
}

.chapter-list-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--reader-muted-text);
}

/* Main Controls area */
.reader-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Mode Switches & Settings Toggle buttons */
.settings-toggle-btn, 
.reader-mode-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--reader-border);
  color: var(--reader-text);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-toggle-btn:hover, 
.reader-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--reader-btn-active);
  box-shadow: 0 0 10px var(--reader-accent-glow);
}

/* Floating Settings Dropdown Panel */
.settings-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 280px;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--reader-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 15px 35px var(--reader-shadow-color);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: settingsPanelFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes settingsPanelFadeIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-section-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
  color: var(--reader-text);
  border-bottom: 1px solid var(--reader-border);
  padding-bottom: 8px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--reader-muted-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Control Grids inside Settings */
.theme-grid, 
.width-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--reader-input-bg);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--reader-border);
}

.width-grid {
  grid-template-columns: repeat(3, 1fr);
}

.theme-btn, 
.width-btn {
  background: transparent;
  border: none;
  color: var(--reader-text);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  text-align: center;
}

.theme-btn:hover, 
.width-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.theme-btn.active, 
.width-btn.active {
  background: var(--reader-btn-active);
  color: var(--reader-btn-active-text);
  box-shadow: 0 2px 8px var(--reader-accent-glow);
}

/* Image Filter Effects */
.filter-none { filter: none; }
.filter-invert { filter: invert(0.92) hue-rotate(180deg); }
.filter-sepia { filter: sepia(0.4) contrast(0.92) brightness(0.95); }
.filter-warm { filter: sepia(0.12) saturate(1.05) contrast(0.96) brightness(0.98); }

/* Main Reading Content Layout */
.reader-main {
  margin: 0 auto;
  width: 100%;
  padding: 100px 16px 60px 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reader-main.narrow { max-width: 680px; }
.reader-main.medium { max-width: 880px; }
.reader-main.wide { max-width: 1140px; }

/* Tip Banner */
.zen-tip {
  text-align: center;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--reader-muted-text);
  opacity: 0.65;
  user-select: none;
  letter-spacing: 0.3px;
  animation: pulseOpacity 3s infinite ease-in-out;
}

@keyframes pulseOpacity {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

@keyframes skeleton-shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Webtoon scroll layout */
.webtoon-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.webtoon-page-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  /* Лёгкая виртуализация: браузер пропускает рендер/лейаут невидимых страниц.
     contain-intrinsic-size задаёт плейсхолдер-высоту, чтобы скролл не прыгал. */
  content-visibility: auto;
  contain-intrinsic-size: auto 70vh;
  min-height: 70vh;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.8s infinite linear;
}

.webtoon-page-img {
  /* width (а не max-width): страница заполняет выбранную ширину читалки.
     Раньше картинка уже контейнера не растягивалась, и «Средняя»/«Широкая»
     не отличались — разницу по бокам заполнял мигающий skeleton-градиент. */
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ФИКС «мигающих белых полос»: skeleton-градиент обёртки должен жить только
   до загрузки страницы. Раньше он анимировался вечно и просвечивал по бокам,
   когда картинка уже контейнера (особенно на ширине «Широкая»). Класс
   .img-loaded ставит onLoad картинки (Reader.jsx) на обёртку. */
.webtoon-page-wrapper.img-loaded,
.page-by-page-wrapper.img-loaded,
.double-page-wrapper.img-loaded {
  background: none;
  animation: none;
  min-height: 0;
}

/* Развороту возвращаем его тёмную подложку после загрузки */
.double-page-wrapper.img-loaded {
  background: rgba(0, 0, 0, 0.15);
}

/* Страница не загрузилась: скелетон останавливаем, показываем оверлей с retry */
.webtoon-page-wrapper.img-error,
.page-by-page-wrapper.img-error,
.double-page-wrapper.img-error {
  background: rgba(255, 255, 255, 0.02);
  animation: none;
}

.page-error-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--reader-muted-text, var(--text-muted));
  font-size: 14px;
  text-align: center;
  padding: 16px;
}

.page-error-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  background: var(--reader-panel-bg, rgba(20, 20, 26, 0.9));
  border: 1px solid var(--reader-border, var(--border-color));
  color: var(--reader-text, var(--text-primary));
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-error-retry-btn:hover {
  border-color: var(--reader-btn-active, var(--accent-purple));
  color: var(--reader-btn-active, var(--accent-purple));
}

/* Баннер «Это последняя глава» — конец тайтла больше не молчаливый no-op */
.reader-end-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 270;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 99px;
  background: var(--reader-panel-bg-solid, #101013);
  border: 1px solid var(--reader-border, var(--border-color));
  color: var(--reader-text, var(--text-primary));
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.reader-end-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--reader-muted-text, var(--text-muted));
}

.reader-end-banner-close:hover {
  color: var(--reader-text, var(--text-primary));
  background: rgba(255, 255, 255, 0.08);
}

/* Page by Page mode Layouts */
.page-by-page-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.page-by-page-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  min-height: 80vh;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.8s infinite linear;
  border-radius: 6px;
}

.page-by-page-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: filter 0.3s ease;
}

/* Click navigation zones on image */
.click-zone-left, 
.click-zone-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  z-index: 10;
}

.click-zone-left { left: 0; cursor: w-resize; }
.click-zone-right { right: 0; cursor: e-resize; }

/* Double page book spread mode */
.double-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  cursor: pointer;
}

.double-page-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  border: 1px solid var(--reader-border);
  min-height: 80vh;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.8s infinite linear;
}

/* Page mode navigation controls */
.page-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.page-pagination.reader-controls-hidden {
  transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
}

.page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--reader-border);
  color: var(--reader-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--reader-btn-active);
}

.page-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--reader-muted-text);
}

/* Footer Chapter Switcher */
.reader-footer-jumper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--reader-border);
  border-radius: 18px;
  box-shadow: 0 8px 24px var(--reader-shadow-color);
  margin-top: 32px;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.reader-footer-jumper.reader-controls-hidden {
  transform: translateY(40px);
  opacity: 0;
  pointer-events: none;
}

.chapter-jumper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--reader-border);
  color: var(--reader-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chapter-jumper-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--reader-btn-active);
  box-shadow: 0 0 10px var(--reader-accent-glow);
}

.chapter-jumper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jumper-title {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: var(--reader-text);
}

/* Floating Webtoon Auto-Scroll HUD widget */
/* Тонкий индикатор прогресса главы: остаётся видимым даже в Дзен-режиме */
.reader-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 260;
  pointer-events: none;
  background: var(--reader-btn-active);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Счётчик «страница / всего» для вертикального режима; в Дзене скрывается */
.reader-progress-pill {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 105;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--reader-panel-bg);
  border: 1px solid var(--reader-border);
  color: var(--reader-muted-text);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

.reader-progress-pill.reader-controls-hidden {
  opacity: 0;
}

@media (max-width: 640px) {
  .reader-progress-pill {
    bottom: 16px;
    left: 12px;
    font-size: 11px;
    padding: 4px 10px;
  }
}

.autoscroll-hud {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 105;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--reader-border);
  border-radius: 99px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px var(--reader-shadow-color);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.reader-header.hidden ~ .autoscroll-hud {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

.autoscroll-btn {
  background: var(--reader-btn-active);
  color: var(--reader-btn-active-text);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px var(--reader-accent-glow);
}

.autoscroll-btn:hover {
  transform: scale(1.08);
}

.autoscroll-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--reader-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: none;
}

@media (min-width: 576px) {
  .autoscroll-label { display: block; }
}

.autoscroll-speed-wrap {
  display: flex;
  background: var(--reader-input-bg);
  border-radius: 99px;
  padding: 2px;
  border: 1px solid var(--reader-border);
}

.autoscroll-speed-btn {
  background: transparent;
  border: none;
  color: var(--reader-text);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.autoscroll-speed-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--reader-btn-active);
}

.double-page-toggle-btn {
  width: 100%;
  text-transform: none;
  padding: 8px;
  font-size: 11px;
  margin-top: 4px;
}

.end-chapter-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  opacity: 0.25;
  font-size: 14px;
  font-weight: 700;
  border-style: dashed !important;
  /* В плейсхолдере нет <img> → img-loaded не появится; глушим шиммер явно */
  animation: none;
  background: rgba(0, 0, 0, 0.15);
}

/* Error, loading, and fail states styling */
.reader-error-container, 
.reader-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  gap: 16px;
  padding: 40px;
  text-align: center;
}

.reader-error-container h2, 
.reader-loading-container .loader-text {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.reader-loading-container .loader-text {
  color: var(--text-secondary);
  animation: pulseOpacity 2s infinite ease-in-out;
}

.reader-fail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.reader-fail-content {
  text-align: center;
  max-width: 460px;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--reader-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px var(--reader-shadow-color);
}

.reader-fail-content h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--reader-text);
}

.reader-fail-content p {
  color: var(--reader-muted-text);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.reader-fail-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.reader-fail-btn-back, 
.reader-fail-btn-reload {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s ease;
  outline: none;
}

.reader-fail-btn-back {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--reader-border);
  color: var(--reader-text);
}

.reader-fail-btn-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.reader-fail-btn-reload {
  background: var(--reader-btn-active);
  border: none;
  color: var(--reader-btn-active-text);
  box-shadow: 0 4px 12px var(--reader-accent-glow);
}

.reader-fail-btn-reload:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--reader-accent-glow);
}

/* Mobile responsive layout overrides */
@media (max-width: 768px) {
  .reader-header {
    top: 8px;
    border-radius: 20px;
    width: 95%;
  }

  .reader-header-content {
    padding: 6px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .reader-back-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .chapter-select-wrap {
    max-width: none;
    flex: 1 1 100%;
    order: 3; /* Push chapter dropdown to its own line on mobile */
  }

  .chapter-dropdown {
    padding: 6px 12px;
    font-size: 12px;
  }

  .reader-controls {
    margin-left: auto;
  }

  .reader-main {
    padding-top: 130px; /* Make space for stacked header */
  }
}

/* ==========================================================================
   Leaderboard Page Styling
   ========================================================================== */

/* Leaderboard Page Styling */

/* Leaderboard Pedestal Styling */
/* ===== Рейтинг читателей: подиум + список + личная позиция (lb-*) ===== */
.lb-wrap { position: relative; max-width: 760px; margin: 0 auto; }
/* Мягкое фоновое свечение под рейтингом — добавляет глубины и «воздуха» (десктоп) */
.lb-wrap::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -110px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 440px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07), transparent 70%);
}
.lb-wrap > * { position: relative; z-index: 1; }

/* Вкладки-метрики */
.lb-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 auto; }
.lb-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--border-color);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.lb-tab svg { width: 14px; height: 14px; }
.lb-tab:hover { color: var(--text-primary); border-color: var(--border-strong); }
.lb-tab.is-active { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent-purple); }
.lb-tab:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }

.lb-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  margin: 30px auto 0;
}
/* DOM-порядок 1-2-3 → визуальный 2-1-3 (центр приподнят) */
.lb-card--1 { order: 2; }
.lb-card--2 { order: 1; }
.lb-card--3 { order: 3; }
.lb-card {
  position: relative;
  flex: 1 1 0;
  max-width: 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 12px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.lb-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.lb-card:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 3px; }
.lb-card--1 {
  max-width: 244px;
  padding-top: 38px;
  transform: translateY(-20px);
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(150deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.04) 52%, var(--bg-secondary));
  box-shadow: 0 18px 48px rgba(251, 191, 36, 0.2), 0 0 36px rgba(251, 191, 36, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lb-card--1:hover { transform: translateY(-25px); }
.lb-card--2 { border-color: rgba(203, 213, 225, 0.42); background: linear-gradient(150deg, rgba(203, 213, 225, 0.13), rgba(203, 213, 225, 0.03) 52%, var(--bg-secondary)); }
.lb-card--3 { border-color: rgba(217, 119, 6, 0.46); background: linear-gradient(150deg, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.03) 52%, var(--bg-secondary)); }
/* Золотой ореол вокруг аватара чемпиона (НЕ трогаем avatar-frame — это купленная рамка) */
.lb-card--1 .lb-av { box-shadow: 0 0 22px rgba(251, 191, 36, 0.4); }

.lb-medal {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; color: #1a1300;
  border: 2px solid var(--bg-secondary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.lb-medal--2 { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.lb-medal--3 { color: #fff; background: linear-gradient(135deg, #fdba74, #c2660a); }
/* Корона = знак чемпиона (заменяет цифру «1» — без дублирования) */
.lb-crown {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-6deg);
  width: 36px; height: 36px; color: #fbbf24; fill: #fbbf24; z-index: 4;
  filter: drop-shadow(0 0 11px rgba(251, 191, 36, 0.9)); pointer-events: none;
}

.lb-av {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; margin-top: 6px;
}
.lb-card--1 .lb-av { width: 82px; height: 82px; }
.lb-av img { width: 100%; height: 100%; object-fit: cover; }

.lb-name { margin-top: 10px; max-width: 100%; font-weight: 800; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card--1 .lb-name { color: #fde68a; font-size: 15px; }
.lb-lvl { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.lb-xp { margin-top: 12px; font-weight: 900; font-size: 18px; color: var(--text-primary); line-height: 1; }
.lb-card--1 .lb-xp { font-size: 23px; }
.lb-xp i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent-purple); margin-left: 3px; }
.lb-chips { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lb-chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
  color: var(--text-secondary); background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 999px; padding: 2px 8px;
}
.lb-chip svg { width: 10px; height: 10px; opacity: 0.9; }

/* Личная позиция + цель «до места выше» */
.lb-you-bar {
  display: flex; align-items: center; gap: 12px; margin: 22px auto 0; padding: 12px 16px;
  border-radius: var(--radius-md); border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.03));
  cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lb-you-bar:hover { border-color: var(--accent-purple); }
.lb-you-bar:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.lb-you-av { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; }
.lb-you-av img { width: 100%; height: 100%; object-fit: cover; }
.lb-you-main { flex: 1; min-width: 0; }
.lb-you-rank { font-weight: 800; font-size: 14px; color: var(--text-primary); }
.lb-you-rank b { color: var(--accent-purple); }
.lb-goal { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--accent-purple); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you-xp { flex-shrink: 0; text-align: right; font-weight: 800; font-size: 15px; color: var(--text-primary); }
.lb-you-xp i { font-style: normal; margin-left: 2px; font-size: 9px; font-weight: 700; color: var(--accent-purple); }

/* Список «Остальные места» */
.lb-list { margin: 24px auto 0; display: flex; flex-direction: column; gap: 7px; }
.lb-list-title { margin: 0 0 4px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.lb-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.lb-row:hover { transform: translateX(2px); border-color: var(--border-strong); background: var(--surface-2); box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.12); }
.lb-row:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.lb-row--me { border-color: var(--accent-purple); background: rgba(var(--accent-rgb), 0.06); }
.lb-rank { width: 30px; flex-shrink: 0; text-align: center; font-weight: 800; font-size: 14px; color: var(--text-muted); }
.lb-row-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; }
.lb-row-av img { width: 100%; height: 100%; object-fit: cover; }
/* Перф: в плотном списке вращение conic-рамок не видно, но жрёт CPU — гасим (на подиуме оставляем) */
.lb-row [class*="avatar-frame-"] { animation: none !important; }
.lb-row-main { flex: 1; min-width: 0; }
.lb-row-name { font-weight: 700; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row--me .lb-row-name { color: var(--accent-purple); }
.lb-you { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 800; color: #fff; background: var(--accent-purple); vertical-align: middle; }
.lb-row-sub { margin-top: 1px; display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.lb-row-sub b { color: var(--text-secondary); font-weight: 700; }
.lb-row-xp { flex-shrink: 0; text-align: right; font-weight: 800; font-size: 14px; color: var(--text-primary); }
.lb-row-xp i { font-style: normal; margin-left: 2px; font-size: 9px; font-weight: 700; color: var(--accent-purple); }

/* Блок «Как подняться» */
.lb-howto {
  margin: 28px auto 0; padding: 16px 18px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.lb-howto-title { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.lb-howto-items { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-howto-item {
  flex: 1 1 160px; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
a.lb-howto-item:hover { border-color: var(--accent-purple); transform: translateY(-2px); }
.lb-howto-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-purple); }
.lb-howto-item b { color: var(--text-primary); font-weight: 800; }

@media (max-width: 560px) {
  .lb-wrap::before { display: none; }
  .lb-podium { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-top: 26px; }
  .lb-card { order: 0 !important; max-width: none; padding: 22px 8px 14px; }
  .lb-card--1 { grid-column: 1 / -1; transform: none; padding-top: 32px; }
  .lb-card--1:hover { transform: translateY(-3px); }
  .lb-av { width: 56px; height: 56px; }
  .lb-card--1 .lb-av { width: 66px; height: 66px; }
  .lb-name { font-size: 12.5px; }
  .lb-card--1 .lb-name { font-size: 14px; }
  .lb-xp { font-size: 16px; }
  .lb-card--1 .lb-xp { font-size: 19px; }
  .lb-chips { gap: 4px; margin-top: 7px; } /* НЕ прячем — делаем компактными */
  .lb-chip { font-size: 9px; padding: 1px 6px; }
  .lb-chip svg { width: 9px; height: 9px; }
  .lb-tab { padding: 7px 12px; font-size: 12px; }
  .lb-howto-item { flex-basis: 100%; }
  .lb-row-sub { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-card:hover, .lb-card--1:hover, .lb-row:hover, a.lb-howto-item:hover { transform: none; }
}

/* Creator Studio Layout */

/* Command Palette floating modal */
.command-palette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(8, 8, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding-top: 15vh;
  animation: fadeIn 0.2s ease-out;
}

.command-palette-modal {
  width: 90%;
  max-width: 640px;
  height: fit-content;
  max-height: 480px;
  border-radius: var(--radius-lg);
  background-color: var(--bg-secondary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ИНПУТ-БАР ПАЛИТРЫ. Кольцо фокуса рисует САМ бар через :focus-within —
   то же скруглённое кольцо 3px, что у pill (единый язык фокуса). */
.spotlight-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-1);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.spotlight-search-bar:focus-within {
  background: var(--surface-2);
  border-bottom-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ТОЧЕЧНЫЙ ФИКС ДВОЙНОЙ РАМКИ (палитра). Усиленная специфичность (0,3,1) > (0,1,1)
   глобального input:focus-visible — фикс надёжен НЕЗАВИСИМО от порядка строк. */
.command-palette-modal .spotlight-search-bar .spotlight-search-input:focus,
.command-palette-modal .spotlight-search-bar .spotlight-search-input:focus-visible {
  outline: none !important;
}

.spotlight-search-input::placeholder {
  color: var(--text-secondary);
}

/* Иконка поиска: спокойна в покое, теме-зависимо подсвечивается на фокусе бара. */
.spotlight-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.spotlight-search-bar:focus-within .spotlight-search-icon {
  color: var(--accent-strong);
}

/* Кнопка закрытия (X): спокойный нейтральный стиль, ровный hover. */
.spotlight-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.spotlight-close-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* kbd-подсказки футера: единый аккуратный стиль вместо инлайн-плашек. */
.spotlight-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Auth Modal overlay & animation */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(8, 8, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease-out;
}

.auth-modal-content {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toast System.
   Снизу-справа (стандарт контент-платформ) — раньше позиция была захардкожена
   под ширину сайдбара (left: 264px/96px/24px), хрупкая связка из трёх мест. */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  min-width: 288px;
  max-width: 400px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Семантические цвета из токенов — последний крупный реликт YouTube-палитры убран. */
.toast-item.success {
  border-left-color: var(--accent-green);
}

.toast-item.error {
  border-left-color: var(--accent-red);
}

.toast-item.warning {
  border-left-color: var(--accent-orange);
}

@keyframes slideInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    align-items: center;
  }
  
  .toast-item {
    min-width: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}

/* Offline Banner Floating container */
.offline-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.15), var(--shadow-md);
  color: #f87171;
  font-size: 13px;
  font-weight: 500;
  animation: slideInRight 0.3s ease-out;
}

.offline-icon {
  color: #ef4444;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .offline-banner {
    left: 24px;
    right: 24px;
    bottom: 16px;
    justify-content: center;
    animation: slideInUpFar 0.3s ease-out;
  }
}

@keyframes slideInUpFar {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* ==========================================================================
   RECOVERED PAGE STYLES (MangaDetail, Creator, Catalog Sidebar, HeroBanner, Footer)
   ========================================================================== */

.catalog-layout {
  display: block;
  width: 100%;
}

.catalog-filters-bar {
  /* Sticky: после «Загрузить еще» пользователь в сотнях карточек —
     фильтры и сортировка остаются под рукой без скролла к верху. */
  position: sticky;
  top: 64px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 14px 20px;
  /* Тот же оверлей, что у шапки — sticky-панель тонируется под выбранный bg-скин. */
  background-color: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.catalog-dropdown {
  position: relative;
  min-width: 150px;
}

.catalog-dropdown.wide {
  min-width: 190px;
}

.catalog-dropdown-trigger {
  width: 100%;
  min-height: 38px;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px 8px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.catalog-dropdown-trigger:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: var(--surface-3);
}

.catalog-dropdown.open .catalog-dropdown-trigger {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: var(--surface-3);
  box-shadow: var(--ring);
}

.catalog-dropdown-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.catalog-dropdown.open .catalog-dropdown-chevron {
  color: var(--accent-strong);
  transform: rotate(180deg);
}

.catalog-dropdown-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 100;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.25);
  animation: catalogDropdownIn var(--duration-fast) var(--ease-out);
}

@keyframes catalogDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.catalog-dropdown-option {
  width: 100%;
  min-height: 36px;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.catalog-dropdown-option:hover,
.catalog-dropdown-option:focus-visible {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.catalog-dropdown-option.selected {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.catalog-dropdown-option svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.filter-reset-btn-horizontal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.filter-reset-btn-horizontal:hover {
  color: var(--accent-purple);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}

.genre-chips-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  padding: 4px 0 12px 0;
  margin-bottom: 24px;
  scrollbar-width: none;
}

.genre-chips-scroll::-webkit-scrollbar {
  display: none;
}

.genre-chip-btn {
  flex-shrink: 0;
  scroll-snap-align: start;
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.genre-chip-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.08);
}

.genre-chip-btn.active {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  font-weight: 700;
}

.sort-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.sort-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.sort-btn.active {
  background-color: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-purple);
  font-weight: 700;
}

/* MangaDetail Page Styles */

/* Кнопка «назад» — используется на страницах паблишера и инфо-страницах
   (на странице тайтла убрана как дубль навигации сайдбара). */
.detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--transition-fast);
  margin-bottom: 24px;
}

.detail-back-btn:hover {
  color: var(--accent-strong);
}

/* Redesigned Minimalist Manga Details Page */

/* Blurred cover backdrop removed — clean gradient band instead */

.detail-page-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  margin-top: 8px;
  align-items: start;
  position: relative;
  z-index: 10;
  width: 100%;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.detail-cover-offset {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  background-color: var(--bg-secondary);
  transition: transform 0.3s ease;
}

.detail-cover-offset:hover {
  transform: translateY(-4px);
}

.detail-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.detail-sidebar-actions .library-category-dropdown,
.detail-sidebar-actions .favorite-btn,
.detail-sidebar-actions .detail-read-btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.detail-admin-actions {
  padding: 12px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.04);
}

.detail-admin-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-admin-label svg {
  width: 14px;
  height: 14px;
}



.detail-admin-button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.detail-admin-edit-btn,
.detail-admin-delete-btn {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.detail-admin-edit-btn {
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.detail-admin-delete-btn {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.07);
}

.detail-admin-edit-btn svg,
.detail-admin-delete-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.detail-admin-delete-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

.library-category-dropdown {
  position: relative;
  width: 100%;
}

.library-category-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.library-category-trigger > svg:first-child {
  width: 17px;
  height: 17px;
  color: #c4a7ff;
}

.library-category-trigger span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.library-category-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.library-category-dropdown.open .library-category-chevron {
  transform: rotate(180deg);
  color: #ffffff;
}

.library-category-trigger:hover,
.library-category-trigger:focus-visible,
.library-category-dropdown.open .library-category-trigger {
  border-color: rgba(var(--accent-rgb), 0.8);
  background: var(--accent-soft);
  color: #ffffff;
}

.library-category-trigger:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.45);
  outline-offset: 2px;
}

.library-category-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* var(--bg-elevated) вместо хардкода #18181b — меню следует выбранному bg-скину. */
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  animation: library-menu-in 130ms ease-out;
}

.library-category-option {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.library-category-option > svg:first-child {
  width: 16px;
  height: 16px;
  color: #a1a1aa;
}

.library-category-option:hover,
.library-category-option:focus-visible {
  outline: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.library-category-option.selected {
  color: #ffffff;
  background: rgba(var(--accent-rgb), 0.18);
}

.library-category-option.selected > svg:first-child,
.library-category-check {
  color: #b794ff;
}

.library-category-check {
  width: 16px;
  height: 16px;
}

.library-category-divider {
  height: 1px;
  margin: 5px 6px;
  background: var(--border-color);
}

.library-category-option.remove {
  color: #f87171;
}

.library-category-option.remove > svg:first-child {
  color: #f87171;
}

.library-category-option.remove:hover,
.library-category-option.remove:focus-visible {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.11);
}

@keyframes library-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.library-card-entry {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.library-card-remove {
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.045);
  color: #f87171;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.library-card-remove svg {
  width: 15px;
  height: 15px;
}

.library-card-remove:hover,
.library-card-remove:focus-visible {
  outline: none;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.favorite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.04);
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  transition: all var(--transition-fast);
}

.favorite-btn svg {
  flex-shrink: 0;
  display: block;
  color: #f9a8d4;
}

.favorite-btn span {
  line-height: 1;
}

.favorite-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.8);
  background-color: var(--accent-soft);
  color: #ffffff;
}

.favorite-btn.active {
  border-color: rgba(236, 72, 153, 0.6);
  background-color: rgba(236, 72, 153, 0.14);
  color: #f9a8d4;
}

.favorite-btn.active:hover {
  background-color: rgba(236, 72, 153, 0.22);
  color: #fbcfe8;
}

.detail-main-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

.detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-badge {
  border-radius: 4px;
  background-color: var(--accent-purple);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-badge.status {
  background-color: #10b981;
}

.detail-badge.status.completed {
  background-color: #2563eb;
}

.detail-main-title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
}

.detail-title-text {
  background: linear-gradient(135deg, #ffffff 55%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep the last word and the toggle together so the arrow never drops alone */
.detail-title-lastword {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .detail-main-title {
    font-size: 30px;
  }
}

.detail-altnames-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  -webkit-text-fill-color: currentColor;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Расширенная зона тапа 44x44 без изменения визуала */
.detail-altnames-toggle::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.detail-altnames-toggle:hover {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-strong);
}

.detail-altnames-toggle svg {
  transition: transform var(--transition-fast);
}

.detail-altnames-toggle.open svg {
  transform: rotate(180deg);
}

.detail-altnames-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.detail-altnames-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.detail-altnames-panel p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Icon-led quick stats: rating / views / translation status */
.detail-quickstats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-qs-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  cursor: default;
}

.detail-qs-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.detail-qs-rating svg {
  color: #fbbf24;
}

.detail-qs-status {
  color: var(--accent-strong);
}

.detail-qs-status svg {
  color: var(--accent-strong);
}

.detail-qs-status.ongoing {
  color: #34d399;
}

.detail-qs-status.ongoing svg {
  color: #34d399;
}

/* Interactive rating stars (big, label-free) */
.detail-vote {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.detail-vote-star {
  padding: 2px;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.detail-vote-star:hover {
  transform: scale(1.18);
}

.detail-vote-msg {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #34d399;
}

/* Genre tags — readable contrast */
.detail-genres {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  /* Текст-заглушка и кнопка «Предложить жанры» стояли по верхнему краю
     и выглядели разнокалиберно — выравниваем по центру строки. */
  align-items: center;
  gap: 12px 8px;
}

.detail-genre-tag {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.detail-genre-tag:hover {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-strong);
}

.detail-source-metadata {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}

.detail-source-metadata > div {
  min-width: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.detail-source-metadata dt {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-source-metadata dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.detail-source-metadata a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7dd3fc;
}

.detail-source-metadata a svg {
  width: 12px;
  height: 12px;
}

.publisher-inline-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.5);
  text-underline-offset: 3px;
  cursor: pointer;
}

.publisher-inline-link:hover {
  color: var(--accent-color);
  text-decoration-color: currentColor;
}

.publisher-page {
  max-width: 1150px;
}

.publisher-profile-header {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 22px;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--border-color);
}

.publisher-profile-avatar {
  width: 144px;
  height: 144px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-focus);
  background: var(--bg-tertiary);
}

.publisher-profile-copy {
  min-width: 0;
}

.publisher-profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.publisher-profile-kicker svg {
  width: 15px;
  height: 15px;
}

.publisher-profile-copy h1 {
  margin: 8px 0 10px;
  font-family: var(--font-title);
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: 0;
}

.publisher-profile-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.publisher-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}

.publisher-profile-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.publisher-profile-stats svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}

.publisher-creator {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.publisher-creator img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-focus);
}

.publisher-creator span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.publisher-creator small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.publisher-creator strong {
  margin-top: 2px;
  color: var(--text-primary);
  font-size: 13px;
}

.publisher-titles-section {
  padding: 34px 0 46px;
}

.publisher-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.publisher-section-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.publisher-section-heading h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  letter-spacing: 0;
}

.publisher-section-heading strong {
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
}

.publisher-empty-state {
  padding: 48px 18px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}

.detail-admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.detail-admin-modal {
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  /* var(--bg-elevated) вместо нейтрального #171717 — в тон холодной палитре. */
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.detail-admin-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.detail-admin-modal-header span {
  display: block;
  margin-bottom: 4px;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-admin-modal-header h2 {
  margin: 0;
  font-size: 19px;
}

.detail-admin-close-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

.detail-admin-close-btn svg {
  width: 17px;
  height: 17px;
}

.detail-admin-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px;
}

.detail-admin-form label {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.detail-admin-form input,
.detail-admin-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
  line-height: 1.55;
}

.detail-admin-form textarea {
  resize: vertical;
  min-height: 170px;
}

.detail-admin-form input:focus,
.detail-admin-form textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.65);
  outline: none;
}



.detail-admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.detail-admin-form-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 6px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 800;
}

.detail-admin-form-actions .detail-admin-save-btn {
  color: #fff;
  background: var(--accent-purple);
}

.detail-admin-save-btn svg {
  width: 15px;
  height: 15px;
}

.detail-admin-form-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.detail-read-btn {
  background: var(--accent-purple);
  color: #fff;
  border: none;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.detail-read-btn:hover {
  transform: translateY(-1px);
  background-color: var(--accent-purple-hover, var(--accent-purple));
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}

.detail-description-box {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.detail-description-toggle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  transition: color var(--transition-fast);
}

.detail-description-toggle:hover {
  color: var(--accent-strong);
}

.chapters-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.chapters-sort-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.chapters-sort-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.1);
}

.chapter-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.chapter-row-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.chapter-row-card.read {
  opacity: 0.5;
}

.chapter-row-card.read:hover {
  opacity: 0.8;
}

.chapter-row-card .chapter-link-title {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast);
}

.chapter-row-card:hover .chapter-link-title {
  color: var(--accent-strong);
}

.chapter-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.chapter-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.chapter-go-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.chapter-row-card:hover .chapter-go-icon {
  color: var(--accent-strong);
  transform: translateX(2px);
}

.chapter-read-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.15);
}

.detail-recommendations-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 32px;
  margin-top: 16px;
}

.detail-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  width: 100%;
}

.recommendation-grid-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.recommendation-grid-card:hover {
  transform: translateY(-2px);
}

.recommendation-cover {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-secondary);
}

.recommendation-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommendation-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recommendation-title {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recommendation-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px) {
  .detail-page-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 0;
  }
  .detail-sidebar {
    align-items: center;
    max-width: 280px;
    margin: 0 auto;
  }
  .detail-main-content {
    align-items: stretch;
  }
  .detail-main-title {
    font-size: 26px;
    text-align: center;
  }
  .detail-badge-row {
    justify-content: center;
  }
  .detail-source-metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .detail-source-metadata {
    grid-template-columns: 1fr;
  }
  .detail-admin-form-actions {
    flex-direction: column-reverse;
  }
  .detail-admin-form-actions button {
    width: 100%;
  }
}

.detail-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 700;
  margin-top: 32px;
}

.detail-tab-btn {
  border-bottom: 2px solid transparent;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.detail-tab-btn:hover {
  color: var(--text-primary);
}

.detail-tab-btn.active {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.tab-content-wrapper {
  min-height: 200px;
  margin-top: 16px;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.01);
  padding: 16px 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chapter-item:hover {
  border-color: rgba(var(--accent-rgb), 0.2);
  background-color: rgba(255, 255, 255, 0.03);
}

.chapter-left-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chapter-link-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.chapter-item:hover .chapter-link-title {
  color: var(--accent-purple);
}

.chapter-item.read .chapter-link-title {
  color: var(--text-secondary);
}

.chapter-date-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Creator Page Styles */

.creator-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
}

.creator-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-title-icon {
  width: 28px;
  height: 28px;
  color: var(--accent-purple);
}

.creator-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.creator-layout {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.creator-instructions-panel {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.01);
  padding: 20px;
  height: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.instructions-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
}

.instructions-title-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-purple);
}

.creator-form-panel {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.02);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 900px) {
  .creator-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .creator-instructions-panel,
  .creator-form-panel {
    width: 100%;
    min-width: 0 !important;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.03);
  padding: 10px 16px;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.form-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.form-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.03);
  padding: 12px;
  font-size: 14px;
  resize: none;
  transition: all var(--transition-fast);
}

.form-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.form-select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--bg-secondary);
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.form-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.publish-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* radius-md вместо чужеродных 4px-углов рядом с мягкими карточками. */
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: white;
  transition: all var(--transition-fast);
  margin-top: 16px;
}

.publish-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
  filter: brightness(1.06);
}

.publish-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.success-screen {
  border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background-color: rgba(6, 78, 59, 0.05);
  padding: 32px;
  text-align: center;
  max-width: 512px;
  margin-left: auto;
  margin-right: auto;
}

.success-icon-wrapper {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 64px;
  width: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.success-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-top: 24px;
}

.success-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.success-btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-purple);
  padding: 12px 24px;
  font-weight: 600;
  color: white;
  transition: all var(--transition-fast);
}

/* Раньше hover ставил тот же цвет (no-op) — теперь реальное затемнение + подъём. */
.success-btn-primary:hover {
  background-color: var(--accent-purple-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.success-btn-secondary {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 12px 24px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.success-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Footer Styles */

.footer {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 32px 0;
  margin-top: 48px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-logo {
  font-family: var(--font-title);
  font-weight: 700;
}

.footer-logo-highlight {
  color: var(--accent-purple);
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-link:hover {
  color: var(--accent-purple);
}

.footer-signature {
  /* opacity:0.6 на --text-muted давал ~2.5:1 (WCAG fail). Берём --text-secondary
     без прозрачности → ~8.6:1 на тёмном фоне футера. */
  color: var(--text-secondary);
}



/* HeroBanner Styles */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fbbf24;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

.hero-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: white;
  /* Длинные неразрывные названия (оригинальные тайтлы без пробелов) не должны вылезать
     за пределы героя на узких экранах — переносим по любому месту как крайний случай. */
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 42px;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 50px;
  }
}

.hero-description {
  flex-shrink: 0;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 820px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-facts svg {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
}

@media (min-width: 768px) {
  .hero-description {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(22px, 6.6vw, 26px);
    line-height: 1.08;
  }

  .hero-description {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.45;
  }

  .hero-facts {
    display: none;
  }

  .badge-row {
    gap: 8px;
    margin-bottom: 9px;
    font-size: 10px;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 18px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    padding: 10px 16px;
    font-size: 13px;
  }

  .arrow-nav {
    top: 16px;
    right: 16px;
    bottom: auto;
  }

  .arrow-btn {
    width: 36px;
    height: 36px;
  }

  .genre-pill-wrapper,
  .genre-chips-scroll {
    padding-right: 36px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }

  .main-column-header {
    gap: 8px;
  }

  .main-column-header .home-section-title {
    font-size: 18px;
    white-space: nowrap;
  }

  .column-link {
    flex-shrink: 0;
    padding-inline: 6px;
    font-size: 11.5px;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  padding: 12px 24px;
  font-weight: 600;
  color: white;
  transition: all var(--transition-fast);
}

/* Живой hover вместо едва заметного opacity: 0.95 — подъём + фирменная тень. */
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
  filter: brightness(1.06);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background-color: var(--surface-2);
  padding: 12px 24px;
  font-weight: 600;
  color: white;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background-color: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.arrow-nav {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  gap: 8px;
}

.arrow-btn {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  transition: all var(--transition-fast);
}

.arrow-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.indicator-dots {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 20;
  display: flex;
  gap: 6px;
}

@media (min-width: 768px) {
  .indicator-dots {
    left: 48px;
  }
}

/* Сама кнопка — 24×24 px (минимум WCAG 2.5.8 / Lighthouse target-size: axe меряет
   bounding box элемента, а не псевдо-зону тапа). Видимая точка рисуется ::before. */
.dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all var(--transition-normal);
}

.dot.active::before {
  width: 24px;
  background-color: var(--accent-purple);
}

/* ==========================================================================
   Profile Gaming Dashboard Redesign
   ========================================================================== */

.profile-dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 1024px) {
  .profile-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

/* Neon Banner Card */
.profile-dashboard-banner-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.profile-dashboard-banner {
  height: 156px;
  position: relative;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(var(--accent-rgb), 0.05) 100%);
  transition: all 0.4s ease;
}

/* Blur overlay for high-end neon splash */
.profile-dashboard-banner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(var(--accent-rgb), 0.4) 0%, transparent 60%);
  filter: blur(28px);
  opacity: 0.45;
  z-index: 0;
}

.profile-dashboard-banner-identity {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.profile-dashboard-banner-identity span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.58;
}

.profile-dashboard-banner-identity strong {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.profile-header-info-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 0 24px 24px 24px;
  margin-top: -45px; /* Pull profile avatar up onto the banner */
  position: relative;
  z-index: 10;
}

@media (max-width: 640px) {
  .profile-dashboard-banner {
    height: 132px;
  }

  .profile-dashboard-banner-identity {
    top: 16px;
    right: 16px;
  }

  .profile-dashboard-banner-identity strong {
    font-size: 12px;
  }

  .profile-header-info-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -55px;
    padding: 0 16px 20px 16px;
  }
}

.profile-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* grid-элемент имеет min-width:auto → без этого колонка раздувается под непереносимый
     контент (длинный тайтл в «Продолжить чтение» с white-space:nowrap) и появляется
     горизонтальная прокрутка на мобиле. min-width:0 даёт колонке сжиматься, а ellipsis
     внутри карточки — наконец срабатывать. */
  min-width: 0;
}

.profile-main-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Tab button improvements */
.profile-tab-header {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-tab-header::-webkit-scrollbar {
  display: none;
}

.profile-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.profile-tab-btn:hover {
  color: var(--text-primary);
}

.profile-tab-btn.active {
  border-bottom-color: var(--accent-purple);
  color: var(--accent-purple);
}

/* Мобайл: лента из 4 длинных вкладок не помещалась в строку и уходила в скрытую
   горизонтальную прокрутку (scrollbar-width:none) → казалось, что панель «не
   подстраивается под экран». На узком экране раскладываем её сегментированной
   сеткой 2×2 (иконка сверху, подпись переносится) — все вкладки видны, скролла нет. */
@media (max-width: 640px) {
  .profile-tab-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-bottom: none;
    overflow-x: visible;
  }

  .profile-tab-btn {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    min-height: 56px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
  }

  .profile-tab-btn.active {
    border-color: var(--accent-purple);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-purple);
  }
}

/* Stats panel items */
.profile-stat-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--card-padding);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  transition: all var(--transition-fast);
}

.profile-stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(var(--accent-rgb), 0.02);
}

/* ============================================================
   Reader Profile Card (rp-*) — единый «соц-профиль с обложкой».
   Используется в шапке своего профиля (Profile.jsx), в модалке
   рейтинга (Leaderboard.jsx) и на публичной странице /u/[id].
   ============================================================ */
.rp-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

/* Обложка-cover: фоном служит экипированный баннер (profile-banner-*). */
.rp-cover {
  position: relative;
  height: 168px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(var(--accent-rgb), 0.05) 100%);
}

/* Затемнение снизу обложки — чтобы аватар и текст читались поверх любого баннера. */
.rp-cover-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--bg-secondary) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
  pointer-events: none;
}

/* Шапка: аватар внахлёст на обложку + блок идентичности. */
.rp-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 0 28px 22px 28px;
  margin-top: -64px;
}

.rp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.rp-avatar {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 4px solid var(--bg-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-identity {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
}

.rp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rp-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-title);
  letter-spacing: -0.02em;
  margin: 0;
  word-break: break-word;
}

.rp-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.rp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-purple);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.rp-chip-streak {
  color: #ff7a00;
  background: rgba(255, 122, 0, 0.08);
  border-color: rgba(255, 122, 0, 0.25);
}

.rp-meta {
  font-size: 13px;
  color: var(--text-muted);
}

/* Полоса уровня/XP. */
.rp-level {
  max-width: 420px;
}

.rp-level-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.rp-level-head .lv {
  color: var(--accent-purple);
}

.rp-level-head .xp {
  color: var(--text-muted);
}

.rp-level-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.rp-level-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-purple), rgba(var(--accent-rgb), 0.55));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Полоса статистики (плитка). */
.rp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-top: 1px solid var(--border-color);
}

.rp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  background: var(--bg-secondary);
  text-align: center;
  /* часть карточек теперь <button> — сбрасываем дефолты кнопки */
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
}
.rp-stat.is-clickable {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.rp-stat.is-clickable:hover { background: var(--surface-2); transform: translateY(-1px); }

/* Модалки профиля (история чтения / мои обзоры) */
@keyframes rpModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rpModalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.rp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: rpModalFade 0.15s ease;
}
.rp-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: rpModalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}
.rp-modal-head h3 { font-size: 16px; font-weight: 800; color: var(--text-primary); margin: 0; }
.rp-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; }
.rp-modal-close:hover { color: var(--text-primary); }
.rp-modal-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 28px 0; }
.rp-modal-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rp-modal-item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.rp-modal-item:hover { background: var(--surface-2); border-color: var(--border-color); }
.rp-modal-item-title { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-modal-item-sub { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-modal-item-date { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.rp-stat svg {
  width: 18px;
  height: 18px;
  color: var(--accent-purple);
  margin-bottom: 2px;
}

.rp-stat-val {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.rp-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .rp-cover {
    height: 132px;
  }
  .rp-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -72px;
    padding: 0 16px 18px 16px;
    gap: 12px;
  }
  .rp-name-row,
  .rp-badges {
    justify-content: center;
  }
  .rp-level {
    margin: 0 auto;
    width: 100%;
  }
  .rp-level-head {
    justify-content: center;
    gap: 10px;
  }
  .rp-stats {
    /* 3 кликабельные карточки — держим их в ОДНОМ ряду (как на десктопе), иначе при
       repeat(2,1fr) третья осиротевает с пустой ячейкой справа (кривая вёрстка на мобиле). */
    grid-template-columns: repeat(3, 1fr);
  }
  .rp-stat {
    padding: 14px 6px; /* уже паддинги — чтобы 3 карточки чисто влезли на узких экранах */
  }
  .rp-stat-label {
    letter-spacing: 0.02em;
  }
}

/* ===== Десктоп-редизайн профиля — собранный вид без растянутости/пустот ===== */
/* Адаптивная сетка магазина: 4-в-ряд на широких, 3 на ноуте, 1 на мобиле (auto-fit) */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 20px; }

/* Статус-блок в обложке (уровень + XP + монеты) — рендерится всегда, виден только на десктопе */
.rp-cover-status { display: none; }
.rp-cs-coins svg { width: 14px; height: 14px; }

@media (min-width: 1025px) {
  /* Потолок ширины: cover и дашборд по центру, не растянуты на 1440px+ */
  .rp-card { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .profile-dashboard-layout { max-width: 1240px; margin-left: auto; margin-right: auto; }

  /* Обложка выше + функциональный статус справа; декоративный тег баннера и дубль-уровень прячем */
  .rp-cover { height: 200px; }
  .profile-dashboard-banner-identity { display: none; }
  .rp-identity > .rp-level { display: none; }
  .rp-cover-status {
    display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
    position: absolute; top: 26px; right: 30px; z-index: 4; text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  }
  .rp-cs-lvl { font-family: var(--font-title); font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; }
  .rp-cs-bar { width: 210px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
  .rp-cs-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-purple), rgba(var(--accent-rgb), 0.55)); }
  .rp-cs-xp { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
  .rp-cs-coins { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: #fde68a; }

  /* Стат-карточки: из тонкой плитки в объёмную тройку с воздухом и hover */
  .rp-stats { gap: 12px; background: transparent; border-top: none; padding: 20px 22px 24px; }
  .rp-stat { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); padding: 22px 14px; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .rp-stat-val { font-size: 23px; }
  .rp-stat.is-clickable:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), 0.32); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 16px rgba(var(--accent-rgb), 0.1); }
  .rp-stat.is-clickable:hover svg { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5)); }
}

/* Фокус-видимость + reduced-motion для интерактивов профиля */
.rp-stat:focus-visible, .profile-tab-btn:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rp-stat.is-clickable:hover { transform: none; }
}

/* Premium Animated Avatar Frames definitions */
[class^="avatar-frame-"] {
  transition: all 0.3s ease;
}

/* Универсальный аватар с рамкой (компонент Avatar) — кольцо + обрезка картинки.
   box-sizing: border-box, чтобы 3px-рамка не раздувала заданный размер (важно для
   стабильной вёрстки в комментариях/хедере). */
.avatar-fr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--bg-tertiary);
  vertical-align: middle;
}

.avatar-frame-none {
  border: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* ─── Премиум-рамки: яркая «комета»/луч, бегущая по тёмному кольцу ───
   Плавный градиент при вращении почти не читается (каждый угол одинаков),
   поэтому кольцо = ТУСКЛАЯ база (--c-dim) + ДВЕ ярких кометы с бело-горячим
   ядром (--c-beam→--c-hot) на 45° и 225°. Кометы бегут по кругу (frSpin крутит
   угол conic-градиента), свечение пульсирует (frPulse, 8→38px) — оба эффекта
   видны даже на 28px-аватаре в комментах. Кольцо живёт в border-box, фото — на
   padding-box поверх, поэтому анимация НЕ красит само изображение. */
@property --fr-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes frSpin { to { --fr-angle: 360deg; } }
@keyframes frPulse {
  0%, 100% { box-shadow: 0 0 8px var(--glow-a, rgba(255,255,255,.4)), 0 0 15px var(--glow-a, rgba(255,255,255,.3)); }
  50%      { box-shadow: 0 0 20px var(--glow-b, rgba(255,255,255,.85)), 0 0 38px var(--glow-b, rgba(255,255,255,.5)); }
}
@keyframes frThrob {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 10px var(--glow-a), 0 0 18px var(--glow-a); }
  50%      { transform: scale(1.05); box-shadow: 0 0 24px var(--glow-b), 0 0 42px var(--glow-b); }
}

/* Общий рисунок «двойной кометы» для кольцевых рамок (цвета — в --c-* ниже) */
.avatar-frame-golden,
.avatar-frame-cyber_yellow,
.avatar-frame-emerald,
.avatar-frame-scarlet,
.avatar-frame-amethyst,
.avatar-frame-frost,
.avatar-frame-sakura {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
    conic-gradient(from var(--fr-angle, 0deg),
      var(--c-dim) 0deg, var(--c-beam) 28deg, var(--c-hot) 44deg, var(--c-beam) 60deg,
      var(--c-dim) 96deg, var(--c-dim) 180deg,
      var(--c-beam) 208deg, var(--c-hot) 224deg, var(--c-beam) 240deg,
      var(--c-dim) 276deg, var(--c-dim) 360deg) border-box !important;
  box-shadow: 0 0 14px var(--glow-a, rgba(255,255,255,.4)) !important;
  animation: frSpin 2s linear infinite, frPulse 1.6s ease-in-out infinite;
}

.avatar-frame-golden {
  --c-dim:#6b4e10; --c-beam:#fbbf24; --c-hot:#fffbe6;
  --glow-a:rgba(251,191,36,.5); --glow-b:rgba(251,191,36,.95);
}
.avatar-frame-cyber_yellow {
  border-radius: 12px !important; /* квадратная кибер-рамка */
  --c-dim:#5f5208; --c-beam:#facc15; --c-hot:#fdffd0;
  --glow-a:rgba(250,204,21,.45); --glow-b:rgba(250,204,21,.9);
}
.avatar-frame-emerald {
  --c-dim:#064e3b; --c-beam:#10d98a; --c-hot:#d1fae5;
  --glow-a:rgba(16,217,138,.5); --glow-b:rgba(16,217,138,.95);
}
.avatar-frame-scarlet {
  --c-dim:#7f1d1d; --c-beam:#ef4444; --c-hot:#ffe4e6;
  --glow-a:rgba(239,68,68,.5); --glow-b:rgba(239,68,68,.95);
  animation: frSpin 1.5s linear infinite, frThrob 0.85s ease-in-out infinite;
}

/* Радужная Волна — полный спектр, резкие границы хорошо видно при вращении */
.avatar-frame-rainbow {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
    conic-gradient(from var(--fr-angle, 0deg),
      #ff0040, #ff8a00, #ffe000, #38ff5e, #00e5ff, #6a5cff, #ff35d6, #ff0040) border-box !important;
  box-shadow: 0 0 18px rgba(255,255,255,.25) !important;
  animation: frSpin 2.6s linear infinite, frRainbowGlow 1.8s ease-in-out infinite;
}
@keyframes frRainbowGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,.2); }
  50%      { box-shadow: 0 0 28px rgba(255,255,255,.55); }
}

/* Кибер-Глитч — резкий хроматический сдвиг + дрожание (усилено) */
.avatar-frame-glitch {
  border: 3px solid #06b6d4 !important;
  animation: glitchFrame 0.7s steps(2, end) infinite;
}
@keyframes glitchFrame {
  0%, 100% { box-shadow: -4px 3px rgba(239,68,68,.85), 4px -3px rgba(59,130,246,.85); border-color:#06b6d4; transform: translate(0,0) scale(1); }
  20%      { box-shadow: 3px -4px rgba(239,68,68,.85), -3px 4px rgba(59,130,246,.85); border-color:#a855f7; transform: translate(-2px,1px) scale(1.02); }
  40%      { box-shadow: -4px -3px rgba(16,185,129,.85), 4px 3px rgba(245,158,11,.85); border-color:#ec4899; transform: translate(2px,-1px) scale(0.99); }
  60%      { box-shadow: 4px 4px rgba(239,68,68,.85), -4px -4px rgba(59,130,246,.85); border-color:#3b82f6; transform: translate(-1px,-2px) scale(1.01); }
  80%      { box-shadow: -3px 4px rgba(245,158,11,.85), 3px -4px rgba(16,185,129,.85); border-color:#facc15; transform: translate(1px,2px) scale(1); }
}

/* Цвета кольцевых рамок v2 (геометрия «двойной кометы» — в общем правиле выше) */
.avatar-frame-amethyst {
  --c-dim:#4c1d95; --c-beam:#a855f7; --c-hot:#f3e8ff;
  --glow-a:rgba(168,85,247,.5); --glow-b:rgba(168,85,247,.95);
}
.avatar-frame-frost {
  --c-dim:#1e3a5f; --c-beam:#38bdf8; --c-hot:#ffffff;
  --glow-a:rgba(56,189,248,.5); --glow-b:rgba(125,211,252,.95);
}
.avatar-frame-sakura {
  --c-dim:#831843; --c-beam:#f472b6; --c-hot:#fff0f6;
  --glow-a:rgba(244,114,182,.5); --glow-b:rgba(244,114,182,.95);
}

/* Адское Пламя — резкое мерцание огня + дрожание + пульс жара */
.avatar-frame-inferno {
  border: 3px solid #f97316 !important;
  animation: frInferno 0.45s steps(2, end) infinite, frInfernoGlow 1s ease-in-out infinite;
}
@keyframes frInferno {
  0%   { border-color:#f97316; transform: scale(1) translateY(0); }
  25%  { border-color:#fbbf24; transform: scale(1.02) translateY(-0.5px); }
  50%  { border-color:#ef4444; transform: scale(0.99) translateY(0.5px); }
  75%  { border-color:#fb923c; transform: scale(1.015) translateY(0); }
  100% { border-color:#f97316; transform: scale(1) translateY(0); }
}
@keyframes frInfernoGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(249,115,22,.6), 0 0 22px rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 24px rgba(251,146,60,.9), 0 0 42px rgba(239,68,68,.6); }
}

/* Космическая Туманность — многоцветное вращение + дышащее свечение */
.avatar-frame-nebula {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
    conic-gradient(from var(--fr-angle, 0deg),
      #1e1b4b, #7c3aed, #ec4899, #f0abfc, #3b82f6, #06b6d4, #1e1b4b) border-box !important;
  box-shadow: 0 0 16px rgba(124,58,237,.4) !important;
  animation: frSpin 3.2s linear infinite, frNebulaGlow 2.2s ease-in-out infinite;
}
@keyframes frNebulaGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(124,58,237,.45), 0 0 26px rgba(37,99,235,.25); }
  50%      { box-shadow: 0 0 30px rgba(236,72,153,.6), 0 0 48px rgba(124,58,237,.4); }
}

/* Сингулярность — тёмное кольцо с яркой магентовой дугой (топ-тир) */
.avatar-frame-void {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
    conic-gradient(from var(--fr-angle, 0deg),
      #0a0a0f 0deg, #0a0a0f 205deg, #7a1d8f 248deg, #c026d3 278deg,
      #f5d0fe 298deg, #c026d3 320deg, #7a1d8f 345deg, #0a0a0f 360deg) border-box !important;
  animation: frSpin 2.2s linear infinite, frVoidPulse 1.8s ease-in-out infinite;
}
@keyframes frVoidPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(192,38,211,.45), inset 0 0 8px rgba(10,10,15,.9); }
  50%      { box-shadow: 0 0 34px rgba(240,171,252,.8), inset 0 0 8px rgba(10,10,15,.9); }
}

/* prefers-reduced-motion: гасим движение, оставляя статичный цветной ободок+глоу */
@media (prefers-reduced-motion: reduce) {
  .avatar-frame-golden, .avatar-frame-cyber_yellow, .avatar-frame-emerald,
  .avatar-frame-scarlet, .avatar-frame-rainbow, .avatar-frame-glitch,
  .avatar-frame-amethyst, .avatar-frame-inferno, .avatar-frame-frost,
  .avatar-frame-sakura, .avatar-frame-nebula, .avatar-frame-void {
    animation: none !important;
  }
}

/* ==========================================================================
   Customizable Global Background Skins
   ========================================================================== */

html.bg-flat-dark body {
  /* #0b0b0e в тон обсидиановой шкале (раньше реликтовый YouTube-#0f0f0f,
     расходившийся с --bg-primary этого же скина). */
  background-color: #0b0b0e;
  background-image: none !important;
}

/* Кибер-сетка: линии + лёгкое неоновое свечение сверху (точки — в ::before). */
html.bg-cyber-grid body {
  background-color: #05050a;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(56, 189, 248, 0.07) 0%, transparent 60%),
    linear-gradient(rgba(125, 211, 252, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.022) 1px, transparent 1px) !important;
  background-size: 100% 100%, 30px 30px, 30px 30px !important;
  background-attachment: fixed !important;
}

/* Космическое сияние: три туманности — фиолетовая, голубая и розовая. */
html.bg-space-nebula body {
  background-color: #020205;
  background-image:
    radial-gradient(ellipse 60% 50% at 18% 25%, rgba(127, 0, 255, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 82% 70%, rgba(0, 195, 255, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 60% 15%, rgba(236, 72, 153, 0.06) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Полярный туман: дуга сияния сверху (изумруд -> циан) + отсвет снизу. */
html.bg-aurora-glow body {
  background-color: #030706;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -15%, rgba(16, 185, 129, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 75% -5%, rgba(6, 182, 212, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(52, 211, 153, 0.06) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
}

/* Закатный багрянец: малиновое зарево по углам + тёплый янтарный отсвет. */
html.bg-sunset-gradient body {
  background-color: #090305;
  background-image:
    radial-gradient(ellipse 65% 50% at 88% 8%, rgba(239, 68, 68, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(219, 39, 119, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 60% 100%, rgba(245, 158, 11, 0.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Ночная сакура: розовое свечение лепестков в тёмной сливовой ночи. */
html.bg-sakura-night body {
  background-color: #070408;
  background-image:
    radial-gradient(ellipse 55% 45% at 80% 12%, rgba(244, 114, 182, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 12% 85%, rgba(190, 24, 93, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 40% 35%, rgba(251, 207, 232, 0.04) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Глубины океана: толща воды — синь сверху, бирюзовое свечение со дна. */
html.bg-deep-ocean body {
  background-color: #030609;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 115%, rgba(13, 148, 136, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 80% -10%, rgba(37, 99, 235, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 15% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Золотой час: тёплое янтарное солнце у горизонта. */
html.bg-golden-hour body {
  background-color: #080604;
  background-image:
    radial-gradient(ellipse 60% 45% at 85% 90%, rgba(245, 158, 11, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 10%, rgba(217, 119, 6, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 105%, rgba(251, 191, 36, 0.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Полночный аметист: глубокий фиолет в тон бренда — премиальный скин. */
html.bg-midnight-amethyst body {
  background-color: #070510;
  background-image:
    radial-gradient(ellipse 60% 50% at 25% 18%, rgba(139, 92, 246, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 80% 80%, rgba(99, 102, 241, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 55% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Звёздная пыль: почти чёрное небо с холодной туманностью (звёзды — в ::before). */
html.bg-starfield body {
  background-color: #030305;
  background-image:
    radial-gradient(ellipse 70% 50% at 70% 20%, rgba(96, 165, 250, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   Customizable Profile Banners
   ========================================================================== */

.profile-banner-surface {
  --banner-accent: 255, 59, 48;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.profile-banner-surface::before,
.profile-banner-surface::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.profile-banner-surface::before {
  inset: 0;
  z-index: 1;
}

.profile-banner-surface::after {
  z-index: 2;
}

.profile-banner-classic {
  --banner-accent: 255, 59, 48;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 92, 80, 0.48) 0%, transparent 26%),
    linear-gradient(112deg, #37070c 0%, #160408 52%, #08070b 100%) !important;
}

.profile-banner-classic::before {
  background:
    linear-gradient(118deg, transparent 0 35%, rgba(255, 255, 255, 0.08) 35.2% 35.8%, transparent 36% 43%, rgba(255, 59, 48, 0.2) 43.2% 44%, transparent 44.2%),
    repeating-linear-gradient(118deg, transparent 0 16px, rgba(255, 255, 255, 0.018) 17px 18px);
}

.profile-banner-classic::after {
  top: -52%;
  left: 7%;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 125, 115, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 59, 48, 0.14), inset 0 0 28px rgba(255, 59, 48, 0.1);
}

.profile-banner-golden_banner {
  --banner-accent: 251, 191, 36;
  background:
    radial-gradient(circle at 22% 42%, rgba(255, 224, 138, 0.72) 0%, rgba(225, 154, 24, 0.2) 18%, transparent 38%),
    linear-gradient(120deg, #3a2205 0%, #171006 55%, #080706 100%) !important;
}

.profile-banner-golden_banner::before {
  inset: -80% 30% -80% -28%;
  background: repeating-conic-gradient(from 220deg at 50% 50%, rgba(255, 233, 168, 0.12) 0 4deg, transparent 4deg 14deg);
  transform: rotate(-6deg);
  opacity: 0.8;
}

.profile-banner-golden_banner::after {
  inset: 10% 4%;
  border: 1px solid rgba(255, 224, 138, 0.18);
  border-left-color: transparent;
  border-right-color: transparent;
  transform: skewX(-18deg);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.profile-banner-cyber_banner {
  --banner-accent: 34, 211, 238;
  background:
    radial-gradient(ellipse at 18% 60%, rgba(0, 238, 255, 0.3) 0%, transparent 35%),
    radial-gradient(ellipse at 82% 28%, rgba(139, 92, 246, 0.22) 0%, transparent 34%),
    linear-gradient(115deg, #041519 0%, #080713 58%, #030306 100%) !important;
}

.profile-banner-cyber_banner::before {
  inset: 48% -12% -52%;
  background:
    linear-gradient(rgba(34, 211, 238, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.14) 1px, transparent 1px);
  background-size: 22px 14px;
  transform: perspective(180px) rotateX(58deg) scale(1.3);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.profile-banner-cyber_banner::after {
  top: 18%;
  right: 8%;
  width: 22%;
  height: 38%;
  border-top: 1px solid rgba(34, 211, 238, 0.5);
  border-right: 1px solid rgba(34, 211, 238, 0.5);
  box-shadow: 9px -9px 0 -8px rgba(168, 85, 247, 0.8);
}

.profile-banner-space_banner {
  --banner-accent: 129, 140, 248;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(147, 51, 234, 0.5) 0%, transparent 34%),
    radial-gradient(ellipse at 72% 72%, rgba(6, 182, 212, 0.3) 0%, transparent 34%),
    radial-gradient(ellipse at 55% 12%, rgba(236, 72, 153, 0.18) 0%, transparent 28%),
    #03030a !important;
}

.profile-banner-space_banner::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.5px) 4px 7px / 37px 31px,
    radial-gradient(circle, rgba(165, 180, 252, 0.7) 0 0.7px, transparent 1.2px) 13px 2px / 23px 19px,
    radial-gradient(circle, rgba(103, 232, 249, 0.55) 0 0.6px, transparent 1px) 0 0 / 17px 29px;
  opacity: 0.7;
}

.profile-banner-space_banner::after {
  top: 14%;
  right: 12%;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #a5b4fc 24%, #4338ca 65%, transparent 68%);
  box-shadow: 0 0 24px rgba(129, 140, 248, 0.45);
  opacity: 0.8;
}

.profile-banner-sunset_banner {
  --banner-accent: 251, 113, 133;
  background:
    linear-gradient(180deg, rgba(60, 20, 88, 0.12) 0 46%, rgba(7, 5, 20, 0.74) 47% 100%),
    linear-gradient(122deg, #3b1767 0%, #c02662 48%, #f59e0b 100%) !important;
}

.profile-banner-sunset_banner::before {
  left: 12%;
  bottom: 27%;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff3b0, #fb7185 72%);
  box-shadow: 0 0 34px rgba(251, 113, 133, 0.58);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%, 0 55%, 100% 55%, 100% 64%, 0 64%, 0 74%, 100% 74%, 100% 100%, 0 100%);
}

.profile-banner-sunset_banner::after {
  inset: 52% -10% -35%;
  background:
    linear-gradient(rgba(244, 114, 182, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 114, 182, 0.16) 1px, transparent 1px);
  background-size: 28px 13px;
  transform: perspective(170px) rotateX(57deg) scale(1.25);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.profile-banner-sakura_banner {
  --banner-accent: 244, 114, 182;
  background:
    radial-gradient(circle at 20% 35%, rgba(255, 241, 242, 0.86) 0 7%, rgba(251, 207, 232, 0.2) 7.5% 17%, transparent 31%),
    linear-gradient(120deg, #40152f 0%, #201128 52%, #0b0b18 100%) !important;
}

.profile-banner-sakura_banner::before {
  inset: -12% -8% -16% 42%;
  background:
    linear-gradient(158deg, transparent 0 43%, rgba(81, 35, 54, 0.9) 43.5% 46%, transparent 46.5%),
    linear-gradient(202deg, transparent 0 52%, rgba(81, 35, 54, 0.8) 52.5% 55%, transparent 55.5%),
    radial-gradient(ellipse at 22% 36%, #f9a8d4 0 3%, transparent 3.5%),
    radial-gradient(ellipse at 46% 20%, #fbcfe8 0 2.5%, transparent 3%),
    radial-gradient(ellipse at 70% 48%, #f472b6 0 3%, transparent 3.5%),
    radial-gradient(ellipse at 38% 70%, #f9a8d4 0 2.5%, transparent 3%);
  transform: rotate(-5deg);
}

.profile-banner-sakura_banner::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 23%, rgba(251, 207, 232, 0.8) 0 1.5%, transparent 1.8%),
    radial-gradient(ellipse at 52% 72%, rgba(244, 114, 182, 0.72) 0 1.3%, transparent 1.6%),
    radial-gradient(ellipse at 78% 28%, rgba(251, 207, 232, 0.72) 0 1.2%, transparent 1.5%),
    radial-gradient(ellipse at 88% 78%, rgba(244, 114, 182, 0.62) 0 1.4%, transparent 1.7%);
}

.profile-banner-glitch_banner {
  --banner-accent: 34, 211, 238;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(34, 211, 238, 0.16) 12% 13%, transparent 13% 72%, rgba(244, 63, 94, 0.16) 72% 74%, transparent 74%),
    linear-gradient(132deg, #071a22 0%, #17112d 48%, #260816 100%) !important;
}

.profile-banner-glitch_banner::before {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(34, 211, 238, 0.48) 9% 25%, transparent 25% 64%, rgba(244, 63, 94, 0.44) 64% 86%, transparent 86%) 0 19% / 100% 3px no-repeat,
    linear-gradient(90deg, rgba(244, 63, 94, 0.34) 0 18%, transparent 18% 46%, rgba(34, 211, 238, 0.35) 46% 61%, transparent 61%) 0 68% / 100% 5px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.025) 4px 5px);
  animation: profileBannerGlitchShift 3.6s steps(2, end) infinite;
}

.profile-banner-glitch_banner::after {
  top: 15%;
  left: 9%;
  width: 42%;
  height: 58%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid rgba(34, 211, 238, 0.62);
  box-shadow: 7px 5px 0 -3px rgba(244, 63, 94, 0.42);
  transform: skewX(-8deg);
}

@keyframes profileBannerGlitchShift {
  0%, 88%, 100% { transform: translate(0); opacity: 0.82; }
  90% { transform: translate(5px, -2px); opacity: 1; }
  93% { transform: translate(-4px, 1px); opacity: 0.72; }
  96% { transform: translate(2px); opacity: 0.94; }
}

.profile-banner-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}

.profile-banner-product {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-banner-product:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.profile-banner-product.is-equipped {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 18px 38px rgba(var(--accent-rgb), 0.09);
}

.profile-banner-product-active {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.72);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.profile-banner-product-active svg {
  width: 11px;
  height: 11px;
  color: #a78bfa;
}

.profile-banner-preview {
  height: 118px;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-banner-preview-tag {
  position: absolute;
  top: 15px;
  left: 16px;
  z-index: 4;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.profile-banner-preview-avatar {
  position: absolute;
  bottom: -18px;
  left: 18px;
  z-index: 5;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.88);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.36), 0 0 18px rgba(var(--banner-accent), 0.24);
  backdrop-filter: blur(8px);
}

.profile-banner-preview-avatar svg {
  width: 22px;
  height: 22px;
}

.profile-banner-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px 16px 16px;
}

.profile-banner-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-banner-product-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.profile-banner-product h4 {
  color: var(--text-primary);
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.profile-banner-product-price {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.07);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
}

.profile-banner-product-price.is-unlocked {
  border-color: var(--border-color);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
}

.profile-banner-product-price svg {
  width: 12px;
  height: 12px;
}

.profile-banner-product-body > p {
  min-height: 38px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.profile-banner-product-action {
  margin-top: auto;
  padding-top: 14px;
}

.profile-banner-button {
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 800;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.profile-banner-button svg {
  width: 13px;
  height: 13px;
}

.profile-banner-button.is-current {
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent-purple);
}

.profile-banner-button.is-select {
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--accent-purple);
}

.profile-banner-button.is-select:hover {
  border-color: var(--accent-purple);
  background: rgba(var(--accent-rgb), 0.16);
}

.profile-banner-button.is-buy {
  border: 1px solid rgba(251, 191, 36, 0.38);
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}

.profile-banner-button.is-buy:hover:not(:disabled) {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
}

.profile-banner-button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

@media (max-width: 640px) {
  .profile-banner-shop-grid {
    grid-template-columns: 1fr;
  }

  .profile-banner-preview {
    height: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-banner-glitch_banner::before {
    animation: none;
  }

  .profile-banner-product {
    transition: none;
  }
}

/* ==========================================================================
   Phase 3 - Premium Hologram Console Design Additions
   ========================================================================== */

/* Gradient typography */
.home-section-title, 
.catalog-title, 
.detail-main-title {
  background: linear-gradient(135deg, #ffffff 50%, var(--accent-color) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* Section Title Highlight bars */
.home-section-title-wrap {
  position: relative;
  margin-bottom: 24px !important;
}

.home-section-title-wrap::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  border-radius: 99px;
}

.catalog-header {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.catalog-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  border-radius: 99px;
}

.detail-header-info {
  position: relative;
}

.detail-header-info::after {
  content: none;
}


/* Missing Hero image styles */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.55) contrast(1.1);
  transition: transform 8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.hero-banner:hover .hero-img {
  transform: scale(1.04);
}

/* Уважаем prefers-reduced-motion: гасим 8s Ken-Burns зум и hover-трансформ. */
@media (prefers-reduced-motion: reduce) {
  .hero-img {
    transition: none;
  }
  .hero-banner:hover .hero-img {
    transform: none;
  }
}

/* ==========================================================================
   Rating System — Conditional Display Styles
   ========================================================================== */

/* MangaCard rating line */

/* MangaDetail — preliminary rating for admins */

@keyframes preliminaryPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* MangaDetail — forming rating for regular users */

@media (max-width: 700px) {
  .publisher-profile-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0 28px;
  }

  .publisher-profile-avatar {
    width: 88px;
    height: 88px;
  }

  .publisher-profile-copy h1 {
    margin-top: 6px;
    font-size: 26px;
  }

  .publisher-profile-copy p {
    font-size: 13px;
  }

  .publisher-profile-stats {
    gap: 12px;
    margin-top: 14px;
  }
}

/* ==========================================================================
   Review Cards — обзоры на странице тайтла (ReviewCard.jsx).
   Компонент переведён с 47 инлайн-объектов на классы: появились hover-состояния,
   связь с токенами и темами. Тональность задаёт --rev-accent (зелёный/красный).
   ========================================================================== */

.review-card {
  --rev-accent: var(--accent-green);
  --rev-accent-soft: rgba(52, 211, 153, 0.12);
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.review-card.negative {
  --rev-accent: var(--accent-red);
  --rev-accent-soft: rgba(244, 63, 94, 0.12);
}

.review-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--rev-accent-soft);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Бейдж статик-номера автора (#N) в обзорах и комментариях; золотой для топ-10. */
.author-reg-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  vertical-align: middle;
  white-space: nowrap;
}

.author-reg-badge.gold {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.review-date {
  font-size: 11px;
  color: var(--text-muted);
}

.review-sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--rev-accent);
  background: var(--rev-accent-soft);
  white-space: nowrap;
}

.review-sentiment-badge svg {
  width: 13px;
  height: 13px;
}

.review-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-helpful-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.review-helpful-label {
  font-size: 12px;
  color: var(--text-muted);
}

.review-reactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.review-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.review-reaction-btn svg {
  width: 14px;
  height: 14px;
}

/* hover только у интерактивной кнопки (button); статичный чип своего отзыва — span. */
button.review-reaction-btn {
  cursor: pointer;
}

button.review-reaction-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.review-reaction-btn.active {
  border-color: var(--accent-purple);
  background: var(--accent-purple);
  color: #ffffff;
}

.review-reaction-count {
  opacity: 0.75;
}

.review-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.review-stats strong {
  color: var(--text-secondary);
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.review-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.review-action-btn svg {
  width: 14px;
  height: 14px;
}

.review-action-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.review-action-btn.active {
  color: var(--accent-purple);
}

.review-action-btn.danger {
  color: var(--accent-red);
}

.review-action-btn.danger:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #fb7185;
}

/* --- Режим редактирования собственного обзора --- */

.review-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.review-edit-row-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Pill-выбор (тональность Да/Нет, Разрешить/Запретить). Цвет active задаётся
   через --pill-accent (по умолчанию — акцент темы). */
.review-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.review-pill-btn svg {
  width: 14px;
  height: 14px;
}

.review-pill-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.review-pill-btn.active {
  border-color: var(--pill-accent, var(--accent-purple));
  background: var(--pill-accent, var(--accent-purple));
  color: #ffffff;
}

.review-edit-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 13px;
  resize: none;
  line-height: 1.55;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.review-edit-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

.review-char-count {
  font-size: 11px;
  text-align: right;
  color: var(--text-muted);
}

.review-char-count.limit {
  color: var(--accent-red);
}

.review-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.review-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.review-btn-cancel:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.review-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.review-btn-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
  filter: brightness(1.06);
}

.review-btn-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.review-btn-cancel svg,
.review-btn-save svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Admin Panel — сводка сайта, подвкладки и баланс (AdminSiteStats.jsx,
   AdminBalancePanel.jsx, вкладка «Админ-панель» в Creator.jsx).
   ========================================================================== */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.admin-stats-card {
  padding: 16px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-stats-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.admin-stats-icon.alert {
  color: var(--accent-orange);
}

.admin-stats-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-title);
  line-height: 1;
}

.admin-stats-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Админ: использование Supabase Storage ──────────────────────── */
.admin-stats-wrap { display: flex; flex-direction: column; gap: 14px; }

.admin-storage {
  padding: 16px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-storage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.admin-storage-head svg { width: 16px; height: 16px; }
.admin-storage-loading { font-size: 13px; color: var(--text-muted); }

.admin-storage-figures { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin-storage-used {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-title);
  line-height: 1;
  color: var(--text-primary);
}
.admin-storage-sub { font-size: 12px; color: var(--text-secondary); }

.admin-storage-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.admin-storage-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  transition: width var(--transition-normal);
}
.admin-storage-bar-fill.over { background: var(--accent-red); }

.admin-storage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-storage-over { color: var(--accent-red); font-weight: 700; }
.admin-storage-limit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-storage-limit input {
  width: 72px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
}
.admin-storage-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.admin-storage-note code {
  font-size: 10.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-2);
}
.admin-storage-b2 {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-storage-b2-main { font-size: 13px; color: var(--text-secondary); }
.admin-storage-b2-main strong { color: var(--text-primary); }
.admin-storage-b2-sub { font-size: 12px; color: var(--text-muted); }

.admin-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-subnav-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-subnav-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
}

.admin-subnav-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-purple);
}

.admin-balance-panel {
  padding: 20px;
  border-radius: var(--radius-lg);
}

.admin-balance-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-balance-head-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-strong);
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-balance-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.admin-balance-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

.admin-balance-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-balance-search-field {
  flex: 1;
  min-width: 220px;
}

.admin-balance-search-btn {
  padding: 0 22px;
  font-size: 13px;
}

.admin-balance-spin {
  width: 16px;
  height: 16px;
  animation: adminBalanceSpin 0.8s linear infinite;
}

@keyframes adminBalanceSpin {
  to { transform: rotate(360deg); }
}

.admin-balance-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  padding: 8px 2px;
}

.admin-balance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-balance-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.admin-balance-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}

.admin-balance-userinfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.admin-balance-username {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-balance-you {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.admin-balance-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-balance-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-strong);
  white-space: nowrap;
}

.admin-balance-value svg {
  width: 14px;
  height: 14px;
}

.admin-balance-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-balance-amount {
  width: 92px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-balance-amount:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

.admin-balance-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-balance-op svg {
  width: 16px;
  height: 16px;
}

.admin-balance-op.add {
  color: var(--accent-green);
}

.admin-balance-op.add:hover:not(:disabled) {
  border-color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
}

.admin-balance-op.sub {
  color: var(--accent-red);
}

.admin-balance-op.sub:hover:not(:disabled) {
  border-color: var(--accent-red);
  background: rgba(244, 63, 94, 0.12);
}

/* Бан/разбан: бан — приглушённый красный с отступом от монетных кнопок,
   разбан — зелёный «вернуть доступ». */
.admin-balance-op.ban,
.admin-balance-op.unban {
  margin-left: 6px;
}

.admin-balance-op.ban {
  color: var(--text-muted);
}

.admin-balance-op.ban:hover:not(:disabled) {
  color: var(--accent-red);
  border-color: var(--accent-red);
  background: rgba(244, 63, 94, 0.12);
}

.admin-balance-op.unban {
  color: var(--accent-green);
}

.admin-balance-op.unban:hover:not(:disabled) {
  border-color: var(--accent-green);
  background: rgba(52, 211, 153, 0.12);
}

.admin-balance-banned {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fb7185;
  background: rgba(244, 63, 94, 0.12);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

/* Чип «бот» — нейтральный: служебный аккаунт без номера регистрации. */
.admin-balance-bot {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.admin-balance-op:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Кнопка бана/разбана в строке пользователя — текст + иконка (понятнее голой иконки). */
.admin-ban-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; margin-left: 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-color);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition-fast);
}
.admin-ban-btn svg { width: 15px; height: 15px; }
.admin-ban-btn.ban:hover:not(:disabled) { color: var(--accent-red); border-color: var(--accent-red); background: rgba(244, 63, 94, 0.12); }
.admin-ban-btn.unban { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.4); }
.admin-ban-btn.unban:hover:not(:disabled) { background: rgba(52, 211, 153, 0.12); }
.admin-ban-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Модалка бана: причина + срок. */
.admin-ban-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.admin-ban-modal {
  width: 100%; max-width: 420px; padding: 20px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 10px;
}
.admin-ban-modal-head { display: flex; align-items: center; gap: 8px; }
.admin-ban-modal-head h3 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.admin-ban-modal-head svg { width: 18px; height: 18px; color: var(--accent-red); }
.admin-ban-modal-user { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.admin-ban-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-top: 4px; }
.admin-ban-field-hint { font-weight: 400; color: var(--text-muted); }
.admin-ban-reason, .admin-ban-preset {
  width: 100%; padding: 9px 10px; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25); color: var(--text-primary);
  font-size: 14px; font-family: inherit; resize: vertical;
}
.admin-ban-reason:focus, .admin-ban-preset:focus { border-color: var(--border-focus); box-shadow: var(--ring); outline: none; }
.admin-ban-preset { cursor: pointer; }
.admin-ban-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.admin-ban-confirm {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--accent-red);
  background: var(--accent-red); color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: all var(--transition-fast);
}
.admin-ban-confirm:hover:not(:disabled) { filter: brightness(1.08); }
.admin-ban-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* Кнопка роли модератора: серый «назначить», фиолетовый — «активна / снять». */
.admin-balance-op.mod { color: var(--text-muted); margin-left: 6px; }
.admin-balance-op.mod:hover:not(:disabled),
.admin-balance-op.mod-on {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.12);
}
.admin-balance-op.mod-on { margin-left: 6px; }

@media (max-width: 600px) {
  .admin-balance-row {
    align-items: flex-start;
  }

  .admin-balance-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Админ-панель «Метки»: CRUD каталога site_genres ──────────────── */
.genre-admin-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.genre-admin-add-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.genre-admin-add-fields .search-input { flex: 1; min-width: 160px; }
.genre-admin-hint { font-size: 12px; }
.genre-admin-hint.error { color: var(--accent-red, #ef4444); }

.genre-admin-row { align-items: flex-start; gap: 12px; }
.genre-admin-order { display: flex; flex-direction: column; gap: 4px; }
.genre-admin-order button {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-color); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.genre-admin-order button:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.genre-admin-order button:disabled { opacity: 0.4; cursor: default; }
.genre-admin-order button svg { width: 14px; height: 14px; }

.genre-admin-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.genre-admin-field-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.genre-admin-name { flex: 1; min-width: 140px; }
.genre-admin-slug {
  font-size: 12px; padding: 2px 6px; border-radius: var(--radius-sm, 6px);
  background: var(--surface-2); color: var(--text-muted); white-space: nowrap;
}
.genre-admin-votes { font-size: 12px; color: var(--accent-purple); white-space: nowrap; }
.genre-admin-desc { width: 100%; }
.genre-admin-actions { display: flex; gap: 6px; }

/* ==========================================================================
   Жанры-голосование (а-ля теги Steam) — страница тайтла (MangaDetail.jsx).
   ========================================================================== */

/* Чипы топ-меток на странице тайтла — pill в одну строку (как были). */
.genre-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  transition: all var(--transition-fast);
}

/* Выбираемые метки в панели — строки вертикального списка. */
.genre-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.genre-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genre-option-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.genre-option-check {
  color: var(--accent-strong);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.genre-chip:hover,
.genre-chip:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-primary);
}

.genre-chip-votes {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  line-height: 1.4;
}

/* Тултип с описанием жанра: hover на десктопе, focus (тап) на таче. */
.genre-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 50;
}

.genre-tooltip strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 4px;
}

.genre-tooltip em {
  display: block;
  font-style: normal;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.genre-chip:hover .genre-tooltip,
.genre-chip:focus-visible .genre-tooltip,
.genre-option:hover .genre-tooltip,
.genre-option:focus-visible .genre-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.genre-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.genre-vote-btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  background: transparent;
  color: var(--accent-purple);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.genre-vote-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-style: solid;
}

/* Панель выбора жанров */
.genre-vote-panel {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
}

.genre-vote-panel-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Сводка текущего топ-10 жанров по голосам (read-only, выше поиска). */
.genre-vote-top {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-2);
}

.genre-vote-top-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.genre-vote-top-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.genre-vote-top-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.genre-vote-top-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
}

/* Выбираемые метки — вертикальный прокручиваемый список (а не «вразброс»). */
.genre-vote-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.genre-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
}

.genre-option.selected {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-purple);
}

.genre-vote-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.genre-vote-save {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent-gradient);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.genre-vote-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.genre-vote-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.genre-vote-cancel {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.genre-vote-cancel:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Поиск жанра в панели голосования */
.genre-search-input {
  width: 100%;
  max-width: 320px;
  height: 36px;
  padding: 0 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.genre-search-input:focus,
.genre-search-input:focus-visible {
  outline: none !important;
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

.genre-search-input::placeholder {
  color: var(--text-muted);
}

/* ── Crawler: кликабельные метрики + drill-down лента ─────────────── */
.crawler-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.crawler-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
}
button.crawler-metric { cursor: default; }
.crawler-metric:disabled { cursor: default; opacity: 1; }

.crawler-metric-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.crawler-metric-value {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.crawler-metric.is-clickable:not(:disabled) {
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.crawler-metric.is-clickable:not(:disabled):hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.crawler-metric.is-clickable:focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.crawler-metric-chevron {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  opacity: 0.55;
}
.crawler-metric.is-clickable:not(:disabled):hover .crawler-metric-chevron { opacity: 1; }
.crawler-metric:disabled .crawler-metric-chevron { display: none; }

.crawler-metric.is-active {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}
.crawler-metric.is-active .crawler-metric-chevron {
  transform: rotate(225deg);
  border-color: var(--accent-color);
  opacity: 1;
}

.crawler-feed-drawer {
  margin-top: 2px;
  border: 1px solid var(--accent-color);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  animation: crawlerFeedIn var(--transition-fast);
}
@keyframes crawlerFeedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.crawler-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--accent-soft);
}
.crawler-feed-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.crawler-feed-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--transition-fast);
}
.crawler-feed-close:hover { color: var(--text-primary); }

.crawler-feed-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crawler-feed-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.45;
}
.crawler-feed-row:nth-child(odd) { background: var(--surface-1); }

.crawler-feed-time {
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.crawler-feed-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.crawler-feed-name {
  color: var(--text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.crawler-feed-meta {
  color: var(--text-secondary);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.crawler-feed-pos { color: var(--accent-green); font-weight: 700; }
.crawler-feed-err { color: #f87171; }
.crawler-feed-phase {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.crawler-feed-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}
.crawler-feed-trunc {
  padding: 6px 12px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 520px) {
  .crawler-feed-row { grid-template-columns: 38px minmax(0, 1fr); }
  .crawler-feed-phase { margin-left: 0; }
}

/* === Альтернативные источники глав (карточка манги) === */
.chapter-source-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.chapter-source-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.chapter-source-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.chapter-source-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.chapter-source-btn.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--text-primary);
}

.alt-source-panel {
  padding: 12px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.04);
  margin-bottom: 14px;
}

.alt-source-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.alt-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 10px;
}

.alt-source-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.alt-source-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.07);
  cursor: pointer;
}

.alt-source-remove-btn:disabled { cursor: wait; opacity: 0.6; }

.alt-source-add-row {
  display: flex;
  gap: 8px;
}

.alt-source-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 12px;
}

.alt-source-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
}

.alt-source-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.alt-source-add-btn:disabled { cursor: not-allowed; opacity: 0.55; }

.alt-source-status {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.alt-source-status.error { color: #f87171; }
.alt-source-status.success { color: #34d399; }

.alt-source-spin { animation: spin 1s linear infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

/* ============================================================
   UI-полировка (24.06.2026): микро-взаимодействия, недостающие
   стили, консистентность. Только аддитивно — бренд/цвета не меняем.
   ============================================================ */

/* Каталог: кнопка «Загрузить ещё» (у класса не было ни одного правила → выглядела сломанной) */
.catalog-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 28px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.catalog-load-more-btn:hover { background: var(--surface-3); border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-2px); }
.catalog-load-more-btn:active { transform: translateY(0) scale(0.98); }
.catalog-load-more-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.catalog-load-more-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Универсальный мини-спиннер для кнопок */
.btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent-strong);
  animation: loaderSpin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Каталог: затемнение сетки при перезагрузке фильтров (вместо инлайн-стиля) */
.manga-grid { transition: opacity var(--transition-fast); }
.manga-grid.is-loading { opacity: 0.6; }

/* Press-feedback (нажатие) у контролов читалки/карточек — раньше был только hover */
.settings-toggle-btn:active,
.reader-mode-btn:active { transform: scale(0.93); }
.page-nav-btn:active { transform: scale(0.96); }
.chapter-jumper-btn:active:not(:disabled) { transform: scale(0.97); }
.reader-back-btn:active { transform: translateX(-2px) scale(0.96); }
.autoscroll-btn:active { transform: scale(0.96); }
.bookmark-btn:active { transform: scale(0.92); }

/* Дропдаун уведомлений: плавный вход в едином с остальными оверлеями языке движения */
.notifications-dropdown { transform-origin: top right; animation: settingsPanelFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
/* Hover у строк уведомлений (эталон — .rp-modal-item) */
.notif-item { transition: background var(--transition-fast); }
.notif-item:hover { background: var(--surface-2); }

/* Единый крупный радиус у auth-модалки (как у палитры/rp-modal) */
.auth-modal-content { border-radius: var(--radius-lg); }

/* Лидерборд: видимый фокус и hover у кнопки-крестика модалки осмотра профиля */
.rp-cover-close { transition: background var(--transition-fast); }
.rp-cover-close:hover { background: rgba(0, 0, 0, 0.65) !important; }
.rp-cover-close:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* Лидерборд: видимый фокус у карточек пьедестала (div role=button tabIndex=0) */
.pedestal-item:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 3px; border-radius: var(--radius-md); }

/* Страница тайтла: вынос инлайнов в классы (вид 1:1) */
.chapters-header-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.detail-rejection-note { padding: 12px 14px; border: 1px solid rgba(239, 68, 68, 0.22); background: rgba(239, 68, 68, 0.08); color: #fca5a5; border-radius: var(--radius-sm); font-size: 12px; }

/* Профиль: единый заголовок секции + под-табы магазина (вместо тройного копипаста) */
.profile-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin: 0; }
.profile-subtab { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; background: transparent; color: var(--text-secondary); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); }
.profile-subtab:hover { color: var(--text-primary); }
.profile-subtab.active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-purple); border-color: var(--accent-purple); }

/* ── Админ: кликабельные карточки сводки + раскрывающиеся списки ───────── */
button.admin-stats-card {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

.admin-stats-card.clickable {
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-stats-card.clickable:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.admin-stats-card.active {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
}

.admin-detail-panel {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-detail-head > svg {
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
  flex-shrink: 0;
}

.admin-detail-title {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.admin-detail-close {
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
}

.admin-detail-close:hover { color: var(--text-primary); }
.admin-detail-close svg { width: 16px; height: 16px; }

.admin-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 2px;
}

.admin-detail-empty {
  margin: 0;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-detail-more {
  align-self: center;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-detail-more:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Список тайтлов */
.admin-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-title-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.admin-title-thumb {
  width: 34px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
  display: block;
}

.admin-title-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.admin-title-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-title-meta {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-title-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}

.admin-title-badge.pending { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.admin-title-badge.rejected { color: #f87171; background: rgba(248, 113, 113, 0.12); }

.admin-title-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Список отзывов/комментариев */
.admin-feedback-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-feedback-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.admin-feedback-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-feedback-user {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-feedback-date {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-feedback-manga {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-purple);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}