@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg: #0A0A0C;
  --bg-alt: #0f0f12;
  --card: #141416;
  --card-hover: #1a1a1e;
  --border: #232328;
  --border-soft: rgba(255,255,255,.06);

  --red: #E63946;
  --red-soft: rgba(230,57,70,.35);
  --gold: #F5C518;
  --gold-soft: rgba(245,197,24,.35);
  --ice: #4CC9F0;
  --mint: #06D6A0;

  --text: #F2F1EF;
  --text-dim: #A7A6AD;
  --text-faint: #6C6C74;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-glow-red: 0 0 30px rgba(230,57,70,.25);
  --shadow-glow-gold: 0 0 30px rgba(245,197,24,.25);
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(700px 400px at 8% -5%, rgba(230,57,70,.10), transparent 60%),
    radial-gradient(600px 380px at 100% 0%, rgba(245,197,24,.07), transparent 55%);
  background-repeat: no-repeat;
}
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; }
::selection{ background: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: #2a2a2f; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--red); }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; margin: 0; }
.eyebrow{
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; color: var(--red); display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background: var(--red); box-shadow: 0 0 8px var(--red); }

.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 700px){ .wrap{ padding: 0 16px; } }

.btn{
  font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor:pointer;
  border-radius: 999px; padding: 13px 26px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s, background .25s;
}
.btn:hover{ transform: translateY(-2px); border-color:#333; }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(135deg, var(--red), #c22733); border-color: transparent; color:#fff;
  box-shadow: 0 6px 24px rgba(230,57,70,.35);
}
.btn-primary:hover{ box-shadow: 0 8px 30px rgba(230,57,70,.55); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold), #c99c0c); border-color: transparent; color:#1a1200;
  box-shadow: 0 6px 24px rgba(245,197,24,.3);
}
.btn-ghost{ background: transparent; }
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 18px; font-size: 13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.tag{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.04em; padding: 5px 11px;
  border-radius: 999px; border:1px solid var(--border); color: var(--text-dim); background: rgba(255,255,255,.02);
}
.tag-ongoing{ color: var(--mint); border-color: rgba(6,214,160,.35); background: rgba(6,214,160,.08); }
.tag-released{ color: var(--ice); border-color: rgba(76,201,240,.3); background: rgba(76,201,240,.06); }
.tag-anons{ color: var(--gold); border-color: rgba(245,197,24,.3); background: rgba(245,197,24,.06); }

/* ==========================================================================
   GLASS CARD
   ========================================================================== */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--card);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position: sticky; top:0; z-index: 200;
  background: rgba(10,10,12,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner{ display:flex; align-items:center; gap:28px; padding: 14px 28px; max-width:1320px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:900; font-size: 20px; letter-spacing:.01em; }
.logo-mark{
  width: 30px; height:30px; border-radius: 9px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold), var(--red)); color:#0A0A0C; font-weight:900; font-size:16px;
  box-shadow: 0 0 18px rgba(230,57,70,.5);
}
.logo span{ background: linear-gradient(90deg, var(--gold), var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.nav-links{ display:flex; align-items:center; gap:4px; flex:1; }
.nav-links a{
  position:relative; padding: 9px 14px; border-radius: 10px; font-weight:600; font-size:14px; color: var(--text-dim);
  transition: color .2s, background .2s;
}
.nav-links a:hover{ color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a.active{ color: var(--text); }
.nav-links a.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background: var(--red); box-shadow: 0 0 8px var(--red);
}

.nav-search{ position: relative; width: 230px; }
.nav-search input{
  width:100%; background: rgba(255,255,255,.04); border:1px solid var(--border); color: var(--text);
  padding: 10px 14px 10px 36px; border-radius: 999px; font-size: 13px; outline:none;
  transition: border-color .2s, background .2s, width .2s;
}
.nav-search input:focus{ border-color: var(--red); background: rgba(255,255,255,.06); }
.nav-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.5; width:15px; height:15px; }
.search-drop{
  position:absolute; top: calc(100% + 10px); left:0; right:0; max-height: 420px; overflow-y:auto;
  border-radius: var(--radius-sm); padding: 8px; display:none; z-index: 50;
}
.search-drop.open{ display:block; animation: fadeDown .18s var(--ease); }
.search-drop a{ display:flex; gap:10px; padding:8px; border-radius:8px; align-items:center; }
.search-drop a:hover{ background: rgba(255,255,255,.05); }
.search-drop img{ width:34px; height:48px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.search-drop .sd-title{ font-size:13px; font-weight:700; }
.search-drop .sd-meta{ font-size:11px; color: var(--text-faint); }
.search-empty{ padding: 14px; text-align:center; color: var(--text-faint); font-size:13px; }

.nav-right{ display:flex; align-items:center; gap:12px; }
.coins-pill{
  display:flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight:700; font-size:13px;
  padding: 8px 14px; border-radius:999px; border:1px solid var(--gold-soft); color: var(--gold); background: rgba(245,197,24,.06);
}
.nav-avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; border:2px solid var(--border); }
.nav-avatar img{ width:100%; height:100%; object-fit:cover; }
.burger{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:transparent; align-items:center; justify-content:center; cursor:pointer; }
.burger span, .burger span::before, .burger span::after{
  content:''; display:block; width:18px; height:2px; background: var(--text); position:relative; transition: all .25s var(--ease);
}
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.burger.open span{ background: transparent; }
.burger.open span::before{ transform: rotate(45deg); top:0; }
.burger.open span::after{ transform: rotate(-45deg); top:0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position: relative; padding: 96px 0 70px; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height: 500px;
  background: radial-gradient(ellipse at 30% 0%, rgba(230,57,70,.22), transparent 60%);
  filter: blur(10px); pointer-events:none;
}
.hero-inner{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
.hero h1{ font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; margin: 14px 0 20px; }
.hero h1 em{ font-style:normal; background: linear-gradient(100deg, var(--gold), var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ color: var(--text-dim); font-size: 16px; max-width: 480px; margin-bottom: 30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:30px; margin-top: 44px; }
.hero-stats div b{ font-family: var(--font-display); font-size:26px; display:block; }
.hero-stats div span{ font-size:12px; color: var(--text-faint); }

.hero-stack{ position:relative; height: 420px; }
.hero-card{
  position:absolute; width: 190px; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border-soft);
  box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: floaty 6s ease-in-out infinite;
}
.hero-card img{ width:100%; aspect-ratio: 2/3; object-fit:cover; }
.hero-card:nth-child(1){ top:0; left: 10%; z-index:3; transform: rotate(-6deg); }
.hero-card:nth-child(2){ top: 60px; left: 40%; z-index:2; transform: rotate(4deg); animation-delay: -2s; }
.hero-card:nth-child(3){ top: 130px; left: 68%; z-index:1; transform: rotate(-3deg); animation-delay: -4s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0) rotate(var(--r,0)); } 50%{ transform: translateY(-14px); } }

@media(max-width: 940px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-stack{ display:none; }
}

/* ==========================================================================
   SECTIONS / GRID
   ========================================================================== */
.section{ padding: 60px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 26px; gap: 16px; flex-wrap:wrap; }
.section-head h2{ font-size: 28px; }
.section-head a{ font-size: 13px; color: var(--text-dim); font-weight:700; display:flex; align-items:center; gap:6px; }
.section-head a:hover{ color: var(--red); }

.row-scroll{ display:flex; gap:18px; overflow-x:auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.row-scroll::-webkit-scrollbar{ height:8px; }
.row-scroll .a-card{ flex: 0 0 180px; scroll-snap-align:start; }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 20px; }
@media(max-width:560px){ .grid{ grid-template-columns: repeat(2,1fr); gap:12px; } .row-scroll .a-card{ flex-basis:150px; } }

/* ==========================================================================
   ANIME CARD (signature: power-flash sweep on hover)
   ========================================================================== */
.a-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border-soft);
  background: var(--card); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  isolation:isolate;
}
.a-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-glow-red); border-color: rgba(230,57,70,.4); }
.a-poster{ position:relative; aspect-ratio: 2/3; overflow:hidden; background:#0d0d0f; }
.a-poster img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.a-card:hover .a-poster img{ transform: scale(1.08); }
.a-poster::after{
  content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.85) 100%);
}
.a-poster::before{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width: 40%; z-index:2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events:none;
}
.a-card:hover .a-poster::before{ left: 130%; }
.a-rating{
  position:absolute; top:10px; right:10px; z-index:3; font-family: var(--font-mono); font-weight:700; font-size:12px;
  background: rgba(10,10,12,.75); border:1px solid var(--gold-soft); color: var(--gold); padding:4px 8px; border-radius:8px;
}
.a-status-badge{ position:absolute; top:10px; left:10px; z-index:3; }
.a-info{ padding: 13px 14px 15px; }
.a-info h3{ font-family: var(--font-body); font-weight:700; font-size: 14px; line-height:1.3; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: 36px; }
.a-meta{ display:flex; gap:8px; align-items:center; font-size:11.5px; color: var(--text-faint); flex-wrap:wrap; }
.a-meta .dot{ width:3px; height:3px; border-radius:50%; background: var(--text-faint); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top:1px solid var(--border-soft); margin-top: 80px; padding: 56px 0 30px; background: var(--bg-alt); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-dim); margin-bottom:16px; }
.footer li{ margin-bottom:10px; }
.footer a{ color: var(--text-faint); font-size:13.5px; transition: color .2s; }
.footer a:hover{ color: var(--red); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition: border-color .2s, color .2s, transform .2s;
}
.footer-social a:hover{ border-color: var(--red); color: var(--red); transform: translateY(-3px); }
.footer-bottom{ margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border-soft); display:flex; justify-content:space-between; color: var(--text-faint); font-size:12.5px; flex-wrap:wrap; gap:10px; }
@media(max-width:820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
@media(max-width: 940px){
  .nav-links, .nav-search{ display:none; }
  .burger{ display:flex; order:5; }
  .nav-inner{ flex-wrap:wrap; }
  .mobile-panel{
    width:100%; max-height:0; overflow:hidden; transition: max-height .35s var(--ease);
    order: 10;
  }
  .mobile-panel.open{ max-height: 520px; }
  .mobile-panel-inner{ padding: 16px 0 8px; display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--border-soft); margin-top:12px;}
  .mobile-panel a{ padding: 12px 6px; font-weight:700; font-size:15px; color: var(--text-dim); border-radius:10px; }
  .mobile-panel a.active{ color: var(--red); }
  .mobile-search{ margin: 10px 0; position:relative; }
  .mobile-search input{ width:100%; background: rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:12px; font-size:14px; }
}

/* ==========================================================================
   FLASH MESSAGES / TOASTS
   ========================================================================== */
.flash-stack{ position: fixed; top: 90px; right: 22px; z-index: 999; display:flex; flex-direction:column; gap:10px; max-width: 340px; }
.flash{
  padding: 14px 16px; border-radius: 12px; font-size:13.5px; font-weight:600; border:1px solid var(--border-soft);
  background: rgba(20,20,22,.95); backdrop-filter: blur(10px); animation: slideIn .3s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.flash-success{ border-left: 3px solid var(--mint); }
.flash-error{ border-left: 3px solid var(--red); }
@keyframes slideIn{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform:none;} }
@keyframes fadeDown{ from{ opacity:0; transform: translateY(-8px);} to{opacity:1; transform:none;} }

/* ==========================================================================
   FORMS
   ========================================================================== */
.auth-shell{ min-height: calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding: 60px 20px; }
.auth-card{ width: 100%; max-width: 420px; padding: 40px 36px; text-align:center; }
.auth-card .logo{ justify-content:center; margin-bottom: 8px; }
.auth-card h1{ font-size: 22px; margin: 6px 0 4px; }
.auth-card p.sub{ color: var(--text-faint); font-size:13.5px; margin-bottom: 26px; }
.field{ text-align:left; margin-bottom: 16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color: var(--text-dim); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background: rgba(255,255,255,.04); border:1px solid var(--border); color: var(--text);
  padding: 12px 14px; border-radius: 11px; font-size: 14px; outline:none; font-family: inherit;
  transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--red); background: rgba(255,255,255,.06); }
.field textarea{ resize: vertical; min-height: 90px; }
.auth-foot{ margin-top: 20px; font-size: 13px; color: var(--text-faint); }
.auth-foot a{ color: var(--red); font-weight:700; }

/* ==========================================================================
   CATALOG / FILTERS
   ========================================================================== */
.catalog-layout{ display:grid; grid-template-columns: 250px 1fr; gap: 30px; align-items:start; }
.filters{ position: sticky; top: 92px; padding: 22px; }
.filters h3{ font-size:14px; margin-bottom:16px; }
.filter-group{ margin-bottom: 20px; }
.filter-group label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); display:block; margin-bottom:8px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:12px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); color: var(--text-dim); cursor:pointer; transition: all .18s; background:transparent; }
.chip:hover{ border-color: var(--red); color:var(--text); }
.chip.active{ background: var(--red); border-color: var(--red); color:#fff; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top: 36px; }
.pagination button{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background: var(--card); color:var(--text-dim); cursor:pointer;
}
.pagination button.active{ background: var(--red); border-color:var(--red); color:#fff; }
.pagination button:disabled{ opacity:.3; cursor:not-allowed; }
.loader-row{ text-align:center; padding: 50px; color: var(--text-faint); }
@media(max-width:860px){ .catalog-layout{ grid-template-columns: 1fr; } .filters{ position:static; } }

/* ==========================================================================
   ANIME DETAIL PAGE
   ========================================================================== */
.a-hero{ position:relative; padding: 50px 0 0; }
.a-hero-bg{
  position:absolute; inset: 0; height: 480px; z-index:-1; overflow:hidden;
}
.a-hero-bg img{ width:100%; height:100%; object-fit:cover; filter: blur(2px) brightness(.35) saturate(1.2); transform: scale(1.1); }
.a-hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,12,.3), var(--bg) 92%); }

.a-detail-grid{ display:grid; grid-template-columns: 280px 1fr; gap: 40px; }
.a-detail-poster{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); box-shadow: 0 30px 70px rgba(0,0,0,.6); position: sticky; top: 100px; }
.a-detail-poster img{ aspect-ratio: 2/3; object-fit:cover; }
.a-title-orig{ color: var(--text-faint); font-size:14px; margin-top:4px; }
.a-detail-title{ font-size: clamp(26px, 3.6vw, 40px); margin: 10px 0 14px; }
.a-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 18px; }
.a-ratings{ display:flex; gap: 22px; margin: 22px 0; }
.a-rating-box{ text-align:center; }
.a-rating-box b{ display:block; font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.a-rating-box span{ font-size:11px; color: var(--text-faint); text-transform:uppercase; }
.a-desc{ color: var(--text-dim); line-height: 1.75; max-width: 780px; margin-bottom: 26px; }
.a-genres{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 26px; }

.status-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 34px; }
.status-btn{
  padding: 12px 20px; border-radius: 12px; border:1px solid var(--border); background: var(--card); color: var(--text-dim);
  font-weight:700; font-size: 13px; cursor:pointer; transition: all .2s var(--ease); display:flex; align-items:center; gap:8px;
}
.status-btn:hover{ border-color: #444; color: var(--text); }
.status-btn.active{ color:#fff; border-color: transparent; }
.status-btn[data-status="watching"].active{ background: linear-gradient(135deg, var(--ice), #2a8fc4); }
.status-btn[data-status="completed"].active{ background: linear-gradient(135deg, var(--mint), #04a37e); }
.status-btn[data-status="planned"].active{ background: linear-gradient(135deg, var(--gold), #c99c0c); color:#1a1200; }
.status-btn[data-status="dropped"].active{ background: linear-gradient(135deg, var(--red), #a3222c); }

.player-wrap{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; margin: 10px 0 40px; aspect-ratio: 16/9;
  border: 1px solid var(--border-soft); box-shadow: 0 0 0 1px rgba(230,57,70,.08), 0 25px 80px rgba(230,57,70,.18);
}
.player-wrap iframe, .player-wrap .player-fallback{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player-fallback{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background: radial-gradient(circle at 50% 30%, #1c1c22, #0b0b0d); color: var(--text-faint); text-align:center; padding: 20px;}
.player-loader{ width:56px; height:56px; border-radius:14px; background: linear-gradient(135deg, var(--gold), var(--red)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:900; color:#0A0A0C; font-size:24px; animation: pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ box-shadow: 0 0 20px rgba(230,57,70,.4);} 50%{ box-shadow: 0 0 46px rgba(230,57,70,.8);} }

.screens-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; margin-bottom: 40px; }
.screens-row img{ width: 240px; height:135px; object-fit:cover; border-radius: 12px; flex-shrink:0; border:1px solid var(--border-soft); }

.comments-section h2{ margin-bottom: 20px; font-size:22px; }
.comment-form{ display:flex; gap:14px; margin-bottom: 30px; }
.comment-form textarea{ flex:1; }
.comment{ display:flex; gap:14px; padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.c-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; border: 2px solid var(--border); }
.c-avatar img{ width:100%; height:100%; object-fit:cover; }
.c-body{ flex:1; }
.c-name{ font-weight:800; font-size:14px; margin-right:8px; }
.c-time{ font-size:11.5px; color: var(--text-faint); }
.c-text{ margin-top:6px; color: var(--text-dim); font-size:14px; line-height:1.6; }

@media(max-width: 860px){
  .a-detail-grid{ grid-template-columns:1fr; }
  .a-detail-poster{ position:static; max-width: 220px; margin: 0 auto 20px; }
}

/* ==========================================================================
   ONGOING PAGE
   ========================================================================== */
.week-strip{ display:grid; grid-template-columns: repeat(7,1fr); gap: 12px; margin-bottom: 46px; }
.week-day{ padding: 16px 12px; text-align:center; border-radius: var(--radius-md); }
.week-day.today{ border-color: var(--red); box-shadow: var(--shadow-glow-red); }
.week-day h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin-bottom:12px; }
.week-day .wd-item{ font-size: 12px; padding: 6px 4px; border-radius:8px; margin-bottom:6px; background: rgba(255,255,255,.03); text-align:left; }
.week-day .wd-empty{ color: var(--text-faint); font-size:11px; padding-top: 10px; }
@media(max-width: 860px){ .week-strip{ grid-template-columns: repeat(4,1fr); } }

.ongoing-card{ display:flex; gap: 16px; padding: 16px; align-items:center; }
.ongoing-card img{ width: 70px; height:98px; object-fit:cover; border-radius: 10px; flex-shrink:0; }
.ongoing-card .oc-title{ font-weight:700; font-size: 14.5px; margin-bottom:6px; }
.countdown{ font-family: var(--font-mono); font-weight:700; color: var(--red); font-size: 16px; letter-spacing:.02em; }
.countdown span{ display:inline-block; min-width: 22px; text-align:center; }
.ongoing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:760px){ .ongoing-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-banner{ height: 240px; border-radius: var(--radius-lg); overflow:hidden; position:relative; margin-bottom: -70px; border:1px solid var(--border-soft); }
.profile-banner img{ width:100%; height:100%; object-fit:cover; }
.profile-head{ display:flex; align-items:flex-end; gap: 22px; padding: 0 30px; position:relative; z-index:2; }
.profile-avatar{ width: 130px; height:130px; border-radius: 26px; overflow:hidden; flex-shrink:0; background: var(--card); }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-name{ padding-bottom: 14px; }
.profile-name h1{ font-size: 26px; display:flex; align-items:center; gap:10px; }
.profile-name .role-badge{ font-size:11px; padding:3px 10px; border-radius:999px; background: rgba(230,57,70,.15); color: var(--red); border:1px solid rgba(230,57,70,.3); }
.profile-coins{ margin-left:auto; padding-bottom:14px; }

.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 40px 0; }
.stat-box{ padding: 20px; text-align:center; }
.stat-box b{ font-family: var(--font-display); font-size: 28px; display:block; }
.stat-box span{ font-size:12px; color: var(--text-faint); }

.list-tabs{ display:flex; gap:8px; margin: 30px 0 18px; flex-wrap:wrap; }
.list-tab{ padding:9px 18px; border-radius:999px; border:1px solid var(--border); font-size:13px; font-weight:700; color: var(--text-dim); cursor:pointer; }
.list-tab.active{ background: var(--red); border-color: var(--red); color:#fff; }
.list-panel{ display:none; }
.list-panel.active{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 16px; }
.empty-state{ padding: 50px 20px; text-align:center; color: var(--text-faint); }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; }
.shop-card{ padding: 26px; text-align:center; position:relative; overflow:hidden; }
.shop-icon{ width: 64px; height:64px; border-radius:18px; margin: 0 auto 18px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.shop-card h3{ font-size: 16px; margin-bottom:8px; }
.shop-card p{ color: var(--text-faint); font-size: 13px; margin-bottom: 20px; min-height:34px; }
.shop-price{ font-family: var(--font-mono); font-weight:700; color: var(--gold); font-size: 18px; margin-bottom: 18px; }
.frame-preview{ width: 84px; height: 84px; border-radius:50%; margin: 0 auto 18px; background: var(--card); }
.color-swatches{ display:flex; gap:8px; justify-content:center; margin-bottom: 18px; flex-wrap:wrap; }
.swatch{ width:30px; height:30px; border-radius:50%; cursor:pointer; border: 2px solid transparent; transition: transform .15s; }
.swatch:hover{ transform: scale(1.15); }
.swatch.selected{ border-color: #fff; }

/* ==========================================================================
   SETTINGS
   ========================================================================== */
.settings-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 30px; }
.settings-nav{ padding: 14px; height: fit-content; }
.settings-nav a{ display:block; padding: 12px 14px; border-radius:10px; font-weight:700; font-size:14px; color: var(--text-dim); margin-bottom:4px; }
.settings-nav a.active, .settings-nav a:hover{ background: rgba(230,57,70,.1); color: var(--red); }
.settings-panel{ padding: 30px; }
.frame-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 18px; margin-top: 14px; }
.frame-option{ text-align:center; padding: 16px; border-radius:16px; border:1px solid var(--border); cursor:pointer; }
.frame-option.selected{ border-color: var(--red); background: rgba(230,57,70,.06); }
.frame-option .fo-circle{ width:60px; height:60px; border-radius:50%; margin:0 auto 10px; background: var(--card); }
@media(max-width:820px){ .settings-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-bottom: 40px; }
.admin-stat{ padding: 22px; text-align:center; }
.admin-stat b{ font-family: var(--font-display); font-size: 30px; display:block; color: var(--red); }
table.admin-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
table.admin-table th{ text-align:left; padding: 10px 12px; color: var(--text-faint); font-size:11.5px; text-transform:uppercase; border-bottom: 1px solid var(--border); }
table.admin-table td{ padding: 12px; border-bottom: 1px solid var(--border-soft); }

/* ==========================================================================
   FRAME (applied to user avatars where user has one selected)
   ========================================================================== */
.framed{ border-radius: 50%; }

/* ==========================================================================
   MISC PAGES
   ========================================================================== */
.static-page{ padding: 60px 0 100px; max-width: 780px; margin: 0 auto; }
.static-page h1{ font-size: 34px; margin-bottom: 20px; }
.static-page h2{ font-size: 20px; margin: 34px 0 12px; }
.static-page p{ color: var(--text-dim); margin-bottom: 14px; line-height:1.8; }
.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin: 30px 0 40px; }
@media(max-width:600px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } }

.error-shell{ min-height: 60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: 16px; }
.error-shell .code{ font-family: var(--font-display); font-size: 100px; font-weight:900; background: linear-gradient(90deg, var(--gold), var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */
@media (max-width: 768px) {
  /* Навбар */
  .nav-inner { flex-wrap: wrap; padding: 10px 16px; }
  .nav-links, .nav-search { display: none; }
  .burger { display: flex; }
  .mobile-panel { display: block; }

  /* Hero */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stack { display: none; }

  /* Страница аниме */
  .a-detail-grid { grid-template-columns: 1fr; }
  .a-detail-poster { position: static; max-width: 220px; margin: 0 auto 20px; }

  /* Профиль */
  .profile-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-avatar { width: 100px; height: 100px; margin-top: -40px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .list-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .list-panel { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Магазин */
  .shop-grid { grid-template-columns: 1fr; }

  /* Настройки */
  .settings-layout { grid-template-columns: 1fr; }

  /* Онгоинги */
  .ongoing-grid { grid-template-columns: 1fr; }
  .week-strip { grid-template-columns: repeat(4, 1fr); }

  /* Футер */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Плеер */
  .player-wrap { border-radius: 12px; }
}

/* Баннер профиля на мобильных */
@media (max-width: 768px) {
  .profile-banner { height: 140px; }
}

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */

/* Баннер профиля */
@media (max-width: 768px) {
  .profile-banner {
    height: 130px;
    margin-bottom: -50px;
    border-radius: 16px;
  }
  .profile-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    padding: 0 20px;
    flex-wrap: wrap;
  }
  .profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    margin-bottom: -20px;
  }
  .profile-name {
    padding-bottom: 10px;
    flex: 1;
  }
  .profile-name h1 {
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  .profile-name div {
    font-size: 11px;
    margin-top: 4px;
  }
  .profile-coins {
    margin-left: auto;
    padding-bottom: 10px;
  }
  .profile-coins .coins-pill {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  /* Кнопки действий */
  .profile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
  }
  .profile-actions .btn {
    width: 100%;
  }
  
  /* Статистика */
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 20px 0;
  }
  .stat-box {
    padding: 14px;
  }
  .stat-box b {
    font-size: 24px;
  }
  .stat-box span {
    font-size: 12px;
  }
  
  /* Списки */
  .list-tabs {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 8px;
    margin: 20px 0 12px;
    scrollbar-width: none;
  }
  .list-tabs::-webkit-scrollbar {
    display: none;
  }
  .list-tab {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 12px;
  }
  .list-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  /* Футер */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .footer {
    padding: 30px 0 20px;
  }
  .footer h4 {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .footer li {
    margin-bottom: 8px;
  }
  .footer a {
    font-size: 12px;
  }
  .footer-social {
    gap: 6px;
    margin-top: 10px;
  }
  .footer-social a {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .footer-bottom {
    margin-top: 20px;
    padding-top: 12px;
    font-size: 11px;
    text-align: center;
  }
  
  /* Общие контейнеры */
  .wrap {
    padding: 0 16px;
  }
  .section {
    padding: 30px 0;
  }
  .section-head h2 {
    font-size: 20px;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .profile-avatar {
    width: 80px;
    height: 80px;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .list-panel {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================== НАВБАР И МОБИЛЬНОЕ МЕНЮ ===================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,10,12,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  max-width: 1320px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
}
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--red));
  color: #0A0A0C;
  font-weight: 900;
  font-size: 16px;
}
.logo span {
  background: linear-gradient(90deg, var(--gold), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-links a {
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dim);
  transition: .2s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: rgba(255,255,255,.04);
}
.nav-search {
  position: relative;
  width: 230px;
}
.nav-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.nav-search input:focus {
  border-color: var(--red);
}
.nav-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
  width: 15px;
  height: 15px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.coins-pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  background: rgba(245,197,24,.06);
}
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Бургер */
.burger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span,
.burger span::before,
.burger span::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: .2s;
}
.burger span::before {
  position: absolute;
  top: -6px;
}
.burger span::after {
  position: absolute;
  top: 6px;
}
.burger.open span {
  background: transparent;
}
.burger.open span::before {
  transform: rotate(45deg);
  top: 0;
}
.burger.open span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Мобильная панель */
.mobile-panel {
  display: none;
  width: 100%;
  overflow: hidden;
}
.mobile-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border-soft);
}
.mobile-panel-inner a {
  padding: 12px 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dim);
  border-radius: 10px;
}
.mobile-panel-inner a.active {
  color: var(--red);
}
.mobile-panel-inner .mobile-search {
  margin-bottom: 8px;
  position: relative;
}
.mobile-search input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
}

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */
@media (max-width: 940px) {
  .nav-links, .nav-search { display: none; }
  .burger { display: flex; }
  .nav-inner { flex-wrap: wrap; padding: 10px 16px; }
  .nav-right { gap: 8px; }
  .mobile-panel { display: block; }
}
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stack { display: none; }
  .a-detail-grid { grid-template-columns: 1fr; }
  .a-detail-poster { position: static; max-width: 220px; margin: 0 auto 20px; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 16px; }
  .profile-avatar { width: 90px; height: 90px; margin-top: -40px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
  .stat-box { padding: 14px; }
  .list-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .list-panel { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .ongoing-grid { grid-template-columns: 1fr; }
  .week-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer { padding: 30px 0 20px; }
  .wrap { padding: 0 16px; }
  .section { padding: 30px 0; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .profile-avatar { width: 80px; height: 80px; }
  .list-panel { grid-template-columns: 1fr; }
  .coins-pill { font-size: 11px; padding: 6px 10px; }
  .nav-avatar { width: 30px; height: 30px; }
}

/* Превью рамки в магазине */
.frame-preview {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: var(--card);
    border: 2px solid var(--border);
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===================== ПРИОРИТЕТНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */
@media (max-width: 768px) {
  /* Навбар - фиксируем */
  .nav-inner { flex-wrap: wrap !important; padding: 10px 16px !important; gap: 12px !important; }
  .nav-links, .nav-search { display: none !important; }
  .burger { display: flex !important; }
  .mobile-panel { display: block !important; }

  /* Hero */
  .hero-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .hero h1 { font-size: 30px !important; }
  .hero-stack { display: none !important; }
  .hero-stats { flex-wrap: wrap !important; gap: 12px !important; }

  /* Карточки */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .row-scroll { gap: 10px !important; }
  .row-scroll .a-card { flex-basis: 140px !important; }

  /* Каталог */
  .catalog-layout { grid-template-columns: 1fr !important; }
  .filters { position: static !important; padding: 12px !important; }

  /* Страница аниме */
  .a-detail-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .a-detail-poster { position: static !important; max-width: 200px !important; margin: 0 auto !important; }
  .a-detail-title { font-size: 22px !important; }
  .a-ratings { flex-wrap: wrap !important; gap: 10px !important; }
  .status-btns { flex-wrap: wrap !important; }

  /* Профиль */
  .profile-banner { height: 110px !important; margin-bottom: -40px !important; }
  .profile-head { flex-wrap: wrap !important; padding: 0 16px !important; gap: 12px !important; }
  .profile-avatar { width: 80px !important; height: 80px !important; border-radius: 20px !important; margin-top: -20px !important; }
  .profile-name h1 { font-size: 18px !important; }
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat-box { padding: 12px !important; }
  .list-panel { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Магазин */
  .shop-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Настройки */
  .settings-layout { grid-template-columns: 1fr !important; }

  /* Онгоинги */
  .week-strip { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .ongoing-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Футер */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .footer { padding: 24px 0 16px !important; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr !important; }
  .list-panel { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .stat-row { grid-template-columns: 1fr !important; }
}

/* ===================== МОБИЛЬНЫЙ ПРОФИЛЬ (ЖЁСТКО) ===================== */
@media (max-width: 768px) {
  /* Баннер */
  .profile-banner {
    height: 110px !important;
    margin-bottom: -50px !important;
    border-radius: 12px !important;
  }
  /* Аватар */
  .profile-avatar {
    width: 85px !important;
    height: 85px !important;
    border-radius: 22px !important;
    margin-bottom: -15px !important;
  }
  /* Имя и инфо */
  .profile-name {
    padding-bottom: 5px !important;
    margin-left: 12px !important;
  }
  .profile-name h1 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  .profile-name div {
    font-size: 10px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }
  /* Монеты */
  .profile-coins {
    margin-left: auto !important;
    padding-bottom: 5px !important;
  }
  .profile-coins .coins-pill {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  /* Статистика */
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 15px 0 !important;
  }
  .stat-box {
    padding: 10px !important;
  }
  .stat-box b {
    font-size: 20px !important;
  }
  .stat-box span {
    font-size: 11px !important;
  }
  /* Кнопки */
  .profile-actions {
    flex-direction: column !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }
  .profile-actions .btn {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px !important;
  }
  /* Списки */
  .list-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
  }
  .list-tab {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .list-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .profile-avatar {
    width: 70px !important;
    height: 70px !important;
  }
  .profile-name h1 {
    font-size: 16px !important;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===================== МОБИЛЬНЫЕ ОНГОИНГИ (ЖЁСТКО) ===================== */
@media (max-width: 768px) {
  .ongoing-title {
    font-size: 24px !important;
    margin-bottom: 15px !important;
  }
  /* Расписание недели */
  .week-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  .week-day {
    padding: 10px 8px !important;
    border-radius: 10px !important;
  }
  .week-day h4 {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .week-day .wd-item {
    font-size: 10px !important;
    padding: 4px !important;
    margin-bottom: 4px !important;
  }
  .week-day .wd-empty {
    font-size: 10px !important;
    padding-top: 4px !important;
  }
  /* Список онгоингов */
  .section-head h2 {
    font-size: 18px !important;
  }
  .ongoing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ongoing-card {
    padding: 10px !important;
  }
  .ongoing-card img {
    width: 60px !important;
    height: 84px !important;
  }
  .ongoing-card .oc-title {
    font-size: 13px !important;
  }
  .countdown {
    font-size: 14px !important;
  }
}

/* Очень маленькие */
@media (max-width: 480px) {
  .ongoing-grid {
    grid-template-columns: 1fr !important;
  }
  .week-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===================== НОВЫЕ СТИЛИ ПРОФИЛЯ ===================== */
.profile-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
  flex-wrap: wrap;
}
.profile-actions .btn {
  flex: 1;
  justify-content: center;
}

/* Адаптация профиля */
@media (max-width: 768px) {
  .profile-banner {
    height: 120px;
    margin-bottom: -50px;
    border-radius: 12px;
  }
  .profile-head {
    gap: 14px;
    align-items: flex-end;
    padding: 0 16px;
  }
  .profile-avatar {
    width: 85px;
    height: 85px;
    border-radius: 20px;
    margin-bottom: -15px;
  }
  .profile-name h1 {
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .profile-name div {
    font-size: 11px;
    margin-top: 2px;
  }
  .profile-coins .coins-pill {
    font-size: 12px;
    padding: 6px 10px;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
  }
  .stat-box {
    padding: 10px;
  }
  .stat-box b {
    font-size: 20px;
  }
  .list-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 6px;
  }
  .list-tab {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 12px;
  }
  .list-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ===================== НОВЫЕ СТИЛИ ОНГОИНГОВ ===================== */
.ongoing-title {
  font-size: 42px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, var(--red), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ongoing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.ongoing-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.ongoing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-red);
}
.oc-poster {
  flex-shrink: 0;
  width: 90px;
  height: 126px;
  border-radius: 10px;
  overflow: hidden;
}
.oc-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.oc-info {
  flex: 1;
}
.oc-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.oc-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.oc-episode {
  font-size: 12px;
  color: var(--text-faint);
}
.countdown {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
}

/* Адаптация онгоингов */
@media (max-width: 768px) {
  .ongoing-title {
    font-size: 28px;
  }
  .ongoing-grid {
    grid-template-columns: 1fr;
  }
  .ongoing-card {
    padding: 12px;
  }
}

/* ===================== МОБИЛЬНЫЙ ПРОФИЛЬ (ФИНАЛ) ===================== */
@media (max-width: 768px) {
  /* Статистика - 2 колонки вместо 4 */
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-box {
    padding: 8px !important;
  }
  .stat-box b {
    font-size: 18px !important;
  }
  .stat-box span {
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  
  /* Монеты - уменьшаем */
  .profile-coins {
    padding-bottom: 5px !important;
  }
  .profile-coins .coins-pill {
    font-size: 10px !important;
    padding: 4px 6px !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Табы - горизонтальная прокрутка */
  .list-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }
  .list-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .list-tab {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    flex-shrink: 0 !important;
  }
}

/* Очень маленькие */
@media (max-width: 480px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .profile-avatar {
    width: 65px !important;
    height: 65px !important;
  }
  .profile-name h1 {
    font-size: 15px !important;
  }
  .profile-coins .coins-pill {
    font-size: 9px !important;
  }
}

/* ===================== ПРОФИЛЬ (ДОРАБОТКА) ===================== */
@media (max-width: 768px) {
  /* Баннер и аватар */
  .profile-banner {
    height: 100px !important;
    margin-bottom: -50px !important;
  }
  .profile-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    margin-bottom: -12px !important;
  }

  /* Блок с именем и кнопками */
  .profile-name h1 {
    font-size: 17px !important;
  }
  .profile-name div {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  /* Кнопки действий */
  .profile-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 12px 0 !important;
  }
  .profile-actions .btn {
    width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* Монеты */
  .profile-coins .coins-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Статистика */
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 12px 0 !important;
  }
  .stat-box {
    padding: 10px !important;
  }
  .stat-box b {
    font-size: 18px !important;
  }
}

/* ===================== ПРОФИЛЬ (АДАПТАЦИЯ МОБИЛЬНАЯ) ===================== */
@media (max-width: 768px) {
  .profile-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 12px !important;
    padding: 0 20px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 24px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    border: 3px solid var(--border) !important;
  }
  .profile-name {
    flex: 1 !important;
    padding-bottom: 10px !important;
    margin-left: 0 !important;
  }
  .profile-name h1 {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .profile-name div {
    font-size: 11px !important;
    margin-top: 4px !important;
  }
  .profile-coins {
    padding-bottom: 10px !important;
  }
  .profile-coins .coins-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .profile-avatar {
    width: 65px !important;
    height: 65px !important;
  }
  .profile-name h1 {
    font-size: 17px !important;
  }
}

/* ===================== ПРОФИЛЬ (ФИНАЛЬНАЯ МОБИЛЬНАЯ ВЕРСИЯ) ===================== */
@media (max-width: 768px) {
  .profile-banner {
    height: 100px !important;
    margin-bottom: -45px !important;
    border-radius: 16px !important;
  }
  .profile-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;
    padding: 0 20px !important;
    position: relative !important;
  }
  .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 24px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 3px solid var(--border) !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }
  .profile-name {
    flex: 1 !important;
    padding-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .profile-name h1 {
    font-size: 18px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .profile-name div {
    font-size: 11px !important;
  }
  .profile-coins {
    padding-bottom: 8px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .profile-coins .coins-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 480px) {
  .profile-avatar {
    width: 65px !important;
    height: 65px !important;
  }
  .profile-name h1 {
    font-size: 16px !important;
  }
}

/* ===================== ПРОФИЛЬ - АВАТАР И РАМКИ ===================== */
.profile-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  position: relative !important;
}
.profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Если рамка-картинка (frame_image), то img внутри будет с padding */
.profile-avatar[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
}
.profile-avatar[style*="background-image"] img {
  border-radius: 50% !important;
  width: calc(100% - 16px) !important; /* 8px padding с каждой стороны */
  height: calc(100% - 16px) !important;
  margin: 8px !important;
}

/* ===================== КАРТОЧКИ АНИМЕ (МОБИЛЬНЫЕ, ЖЁСТКО) ===================== */
@media (max-width: 768px) {
  .grid, .row-scroll, .list-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .a-card {
    border-radius: 12px !important;
  }
  .a-poster img {
    height: 180px !important;
    object-fit: cover !important;
  }
  .a-info h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .a-rating {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
}

@media (max-width: 480px) {
  .grid, .row-scroll, .list-panel {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .a-poster img {
    height: 150px !important;
  }
  .a-info h3 {
    font-size: 12px !important;
  }
}

/* ===================== ПРОФИЛЬ (ИДЕАЛЬНЫЙ МОБИЛЬНЫЙ) ===================== */
@media (max-width: 768px) {
  .profile-banner {
    height: 110px !important;
    margin-bottom: -50px !important;
    border-radius: 16px !important;
  }
  .profile-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 12px !important;
    padding: 0 20px !important;
    margin-bottom: 15px !important;
  }
  .profile-avatar {
    width: 75px !important;
    height: 75px !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: hidden !important;
    border: 2px solid var(--border) !important;
  }
  .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }
  .profile-info {
    flex: 1 !important;
    padding-bottom: 8px !important;
  }
  .profile-info h1 {
    font-size: 18px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .profile-coins {
    margin-top: 4px !important;
  }
  .profile-coins .coins-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .profile-actions {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 15px !important;
  }
  .profile-actions .btn {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px !important;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 15px 0 !important;
  }
  .stat-box {
    padding: 12px !important;
  }
  .stat-box b {
    font-size: 20px !important;
  }
  .stat-box span {
    font-size: 11px !important;
  }
  .list-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
  }
  .list-tabs::-webkit-scrollbar { display: none !important; }
  .list-tab {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    flex-shrink: 0 !important;
  }
  .list-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .list-panel .row-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .profile-avatar {
    width: 65px !important;
    height: 65px !important;
  }
  .profile-info h1 {
    font-size: 16px !important;
  }
}

/* ===================== ГЛАВНАЯ: ГОРИЗОНТАЛЬНАЯ ЛЕНТА ===================== */
.row-scroll {
  display: flex !important;
  overflow-x: auto !important;
  gap: 16px !important;
  padding-bottom: 10px !important;
  scroll-snap-type: x proximity !important;
}
.row-scroll .a-card {
  flex: 0 0 170px !important; /* Нормальный размер карточки */
  scroll-snap-align: start !important;
}
.row-scroll::-webkit-scrollbar {
  height: 6px !important;
}

@media (max-width: 768px) {
  .row-scroll {
    gap: 12px !important;
  }
  .row-scroll .a-card {
    flex-basis: 150px !important; /* Чуть меньше на телефоне, но всё ещё читаемо */
  }
}

/* ===================== ГОРИЗОНТАЛЬНЫЕ ЛЕНТЫ (ВЕЗДЕ) ===================== */
.row-scroll {
  display: flex !important;
  overflow-x: auto !important;
  gap: 16px !important;
  padding-bottom: 10px !important;
  scrollbar-width: thin !important;
}
.row-scroll .a-card {
  flex: 0 0 170px !important;
  min-width: 170px !important;
  scroll-snap-align: start !important;
}
.row-scroll .a-poster {
  height: 230px !important;
  aspect-ratio: auto !important;
}
.row-scroll .a-info {
  padding: 10px !important;
}
.row-scroll .a-info h3 {
  font-size: 13px !important;
  min-height: 32px !important;
}

/* Уменьшаем высоту карточек в сетке на мобильных */
@media (max-width: 768px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .a-poster {
    height: 200px !important;
  }
  .a-card {
    margin-bottom: 0 !important;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .row-scroll .a-card {
    flex-basis: 140px !important;
    min-width: 140px !important;
  }
  .a-poster {
    height: 180px !important;
  }
}

/* ===================== ИСПРАВЛЕНИЕ ПРОПОРЦИЙ ПОСТЕРОВ ===================== */
.a-poster {
  aspect-ratio: 2/3 !important;
  height: auto !important;
  overflow: hidden !important;
  background: #0d0d0f !important;
}
.a-poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.row-scroll .a-poster {
  height: auto !important;
  aspect-ratio: 2/3 !important;
}

/* Скрываем кнопку доната в навбаре на мобильных (оставляем только в бургере) */
@media (max-width: 768px) {
  .nav-right .btn-gold {
    display: none !important;
  }
}

/* Улучшенная обёртка плеера */
.player-wrap {
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 60px rgba(0,0,0,0.8) !important;
    position: relative !important;
    aspect-ratio: 16/9 !important;
}
.player-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}
.player-loader-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle at 50% 30%, #1c1c22, #0b0b0d) !important;
    z-index: 10 !important;
    transition: opacity 0.3s !important;
}
.player-loader-overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}
.player-loader {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: var(--gold) !important;
    text-shadow: 0 0 20px rgba(245,197,24,0.5) !important;
}

/* ============================================================
   PROFILE PREMIUM V2
   ============================================================ */

@keyframes pfx-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes pfx-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes pfx-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes pfx-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pfx-orbit{ to{transform:rotate(360deg)} }
@keyframes pfx-halo{ 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:.9; transform:scale(1.06)} }
@keyframes pfx-live{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.85)} 70%{box-shadow:0 0 0 16px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} }
@keyframes pfx-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes pfx-reveal-up{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }
@keyframes pfx-glow-pulse{ 0%,100%{filter:drop-shadow(0 0 12px var(--rank-color))} 50%{filter:drop-shadow(0 0 26px var(--rank-color))} }

.pfx{ position: relative; padding: 22px 0 90px; }

/* -------- фон страницы: плавающие пятна -------- */
.pfx-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .38;
}
.pfx-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.pfx-blob-1{ background: radial-gradient(circle, #E63946, transparent 60%); top: -10%; left: -15%; animation: pfx-drift-1 24s ease-in-out infinite; }
.pfx-blob-2{ background: radial-gradient(circle, #4CC9F0, transparent 60%); top: 40%; right: -20%; animation: pfx-drift-2 28s ease-in-out infinite; }
.pfx-blob-3{ background: radial-gradient(circle, #a855f7, transparent 60%); bottom: -20%; left: 30%; animation: pfx-drift-3 32s ease-in-out infinite; }
.pfx .wrap{ position: relative; z-index: 2; }

/* ================= HERO ================= */
.pfx-hero{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.9));
  margin-bottom: 28px;
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
}

.pfx-hero-bg{
  position: absolute; inset: 0; z-index: 0;
  will-change: transform;
}
.pfx-hero-bg > img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.15) brightness(.75) contrast(1.05);
  transform: scale(1.06);
}
.pfx-hero-bg::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.25) 0%, rgba(10,10,12,.65) 45%, rgba(10,10,12,.99) 100%);
}

.pfx-aurora{
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
}
.pfx-aurora span{
  position: absolute; width: 55%; height: 55%; border-radius: 50%;
  animation: pfx-drift-1 18s ease-in-out infinite;
}
.pfx-aurora span:nth-child(1){ background: radial-gradient(circle, #E63946, transparent 65%); top: 0; left: 0; }
.pfx-aurora span:nth-child(2){ background: radial-gradient(circle, #4CC9F0, transparent 65%); top: 30%; right: 5%; animation-delay: -6s; }
.pfx-aurora span:nth-child(3){ background: radial-gradient(circle, #a855f7, transparent 65%); bottom: 0; left: 30%; animation-delay: -12s; }
.pfx-aurora span:nth-child(4){ background: radial-gradient(circle, #F5C518, transparent 65%); bottom: 10%; right: 25%; animation-delay: -4s; opacity: .7; }

.pfx-stars{
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 75%, #fff, transparent);
  background-size: 400px 400px;
  animation: pfx-star 90s linear infinite;
}
.pfx-vignette{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.6) 100%);
}

.pfx-hero-grid{
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  padding: 60px 40px 30px;
  align-items: center;
}

/* ======= аватар ======= */
.pfx-avatar-col{ align-self: end; }
.pfx-avatar-stage{
  position: relative; width: 170px; height: 170px;
}
.pfx-avatar-halo{
  position: absolute; inset: -22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.55), transparent 62%);
  filter: blur(22px);
  animation: pfx-halo 4s ease-in-out infinite;
  pointer-events: none;
}
.pfx-avatar-halo-2{
  inset: -10px;
  background: radial-gradient(circle, rgba(76,201,240,.35), transparent 62%);
  animation-delay: -2s;
}
.pfx-avatar{
  position: absolute; inset: 12px; border-radius: 50%; overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1), 0 20px 60px rgba(0,0,0,.7), inset 0 0 40px rgba(230,57,70,.15);
  z-index: 3;
}
.pfx-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pfx-avatar-ring{
  position: absolute; inset: 0; border-radius: 50%; z-index: 4; pointer-events: none;
}
.pfx-avatar-orbit{
  position: absolute; inset: -10px; border-radius: 50%;
  animation: pfx-orbit 22s linear infinite;
  pointer-events: none;
}
.pfx-orb{
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 16px currentColor, 0 0 4px #fff inset;
}
.pfx-orb-1{ top: 2px; left: 50%; margin-left: -5px; background: #E63946; color: #E63946; }
.pfx-orb-2{ top: 50%; right: 2px; margin-top: -5px; background: #4CC9F0; color: #4CC9F0; animation: pfx-halo 3s infinite; }
.pfx-orb-3{ bottom: 2px; left: 50%; margin-left: -5px; background: #F5C518; color: #F5C518; }
.pfx-orb-4{ top: 50%; left: 2px; margin-top: -5px; background: #a855f7; color: #a855f7; animation: pfx-halo 3.6s infinite; }
.pfx-avatar-level{
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 100px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.2px;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 10px 30px rgba(230,57,70,.6), 0 0 0 3px rgba(10,10,12,.9);
  z-index: 5;
}
.pfx-avatar-level span{ opacity: .8; font-size: 8.5px; }
.pfx-avatar-level b{ font-size: 13px; }

/* ======= info ======= */
.pfx-info-col{ min-width: 0; padding-bottom: 8px; }

.pfx-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pfx-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.pfx-tag-admin{
  background: linear-gradient(135deg, rgba(230,57,70,.25), rgba(255,107,53,.15));
  border-color: rgba(230,57,70,.5); color: #fff;
  box-shadow: 0 4px 20px rgba(230,57,70,.3);
}
.pfx-tag-fire{
  background: linear-gradient(135deg, rgba(245,197,24,.22), rgba(230,57,70,.16));
  border-color: rgba(245,197,24,.5); color: #F5C518;
}
.pfx-rank{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 100px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.6px;
  color: var(--rank-color, #F5C518);
  background: color-mix(in srgb, var(--rank-color, #F5C518) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color, #F5C518) 45%, transparent);
  animation: pfx-glow-pulse 3.5s ease-in-out infinite;
}
.pfx-rank::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 12px currentColor;
}

.pfx-name{
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.05; letter-spacing: -1.5px;
  margin: 6px 0 14px;
  color: #fff;
}
.pfx-name-shine{
  display: inline-block;
  background: linear-gradient(110deg, #ffffff 20%, #ffe4e4 40%, #ffb8b8 50%, #ffe4e4 60%, #ffffff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pfx-shine 6s linear infinite;
}
.pfx-name[style*="color"] .pfx-name-shine{
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

.pfx-meta{
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 13px; color: var(--text-dim); margin-bottom: 18px;
}
.pfx-meta-item{ display: inline-flex; align-items: center; gap: 6px; }
.pfx-meta-item i{ font-style: normal; font-size: 14px; }
.pfx-meta-item b{ color: #fff; font-weight: 800; }
.pfx-meta-item em{ font-style: normal; color: var(--text-faint); font-size: 11px; }

/* dna taste */
.pfx-genre-dna{
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  max-width: 480px;
}
.pfx-dna-label{
  font-size: 10px; font-weight: 800; letter-spacing: 1.8px;
  color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px;
}
.pfx-dna-bar{ display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 10px; font-size: 11.5px; }
.pfx-dna-name{ color: var(--text-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfx-dna-track{
  height: 6px; border-radius: 100px; background: rgba(255,255,255,.05); overflow: hidden;
}
.pfx-dna-fill{
  height: 100%; width: var(--pct);
  background: linear-gradient(90deg, #E63946, #ff6b35, #F5C518);
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(230,57,70,.5);
  transition: width .8s var(--ease);
}
.pfx-dna-count{ color: #fff; font-weight: 800; text-align: right; font-size: 11px; }

/* ======= xp ring ======= */
.pfx-xp-col{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: 8px;
}
.pfx-xp-ring{
  position: relative; width: 140px; height: 140px;
}
.pfx-xp-svg{ width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pfx-xp-track{ fill: none; stroke: rgba(255,255,255,.06); stroke-width: 8; }
.pfx-xp-fill{
  fill: none; stroke: url(#pfx-grad) ;
  stroke: #E63946;
  stroke-width: 8; stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(230,57,70,.85));
  transition: stroke-dashoffset 1.2s var(--ease);
}
.pfx-xp-core{
  position: absolute; inset: 24px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(230,57,70,.25), rgba(10,10,12,.9));
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 40px rgba(230,57,70,.2);
}
.pfx-xp-label{
  font-size: 9.5px; letter-spacing: 2px; font-weight: 800;
  color: var(--text-faint);
}
.pfx-xp-num{
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  color: #fff; line-height: 1; margin-top: 2px;
}
.pfx-xp-num small{ font-size: 12px; color: var(--text-faint); margin-left: 2px; }
.pfx-xp-hint{
  font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-faint);
  text-transform: uppercase; font-weight: 700;
}

/* ======= actions ======= */
.pfx-actions{
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px;
  padding: 26px 40px 32px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.pfx-action{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff; text-decoration: none;
  font-family: inherit; cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.pfx-action::before{
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transition: left .55s;
}
.pfx-action:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.pfx-action:hover::before{ left: 100%; }
.pfx-action-gold{
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(230,57,70,.12));
  border-color: rgba(245,197,24,.45);
}
.pfx-action-gold:hover{ box-shadow: 0 14px 40px rgba(245,197,24,.25); }
.pfx-action-ico{
  font-size: 22px; flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.pfx-action-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pfx-action-body b{ font-size: 13.5px; font-weight: 800; color: #fff; }
.pfx-action-body small{ font-size: 11px; color: var(--text-faint); font-weight: 600; }
.pfx-action-arrow{ color: var(--text-faint); font-weight: 800; transition: transform .25s; }
.pfx-action:hover .pfx-action-arrow{ transform: translateX(3px); color: #fff; }

/* ================= BENTO ================= */
.pfx-bento{
  display: grid; gap: 14px; margin-bottom: 28px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "watch done plan drop"
    "heat  heat rank rank";
}
.pfx-cell{
  position: relative;
  padding: 22px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.pfx-cell::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.pfx-cell:hover::before{ opacity: 1; }
.pfx-cell:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.16); }

.pfx-cell-watch{ grid-area: watch; }
.pfx-cell-done { grid-area: done;  }
.pfx-cell-plan { grid-area: plan;  }
.pfx-cell-drop { grid-area: drop;  }
.pfx-cell-heat { grid-area: heat;  }
.pfx-cell-rank { grid-area: rank;  }

.pfx-cell-watch:hover{ box-shadow: 0 20px 50px rgba(230,57,70,.28); border-color: rgba(230,57,70,.5); }
.pfx-cell-done:hover { box-shadow: 0 20px 50px rgba(6,214,160,.28); border-color: rgba(6,214,160,.5); }
.pfx-cell-plan:hover { box-shadow: 0 20px 50px rgba(76,201,240,.28); border-color: rgba(76,201,240,.5); }
.pfx-cell-drop:hover { box-shadow: 0 20px 50px rgba(168,85,247,.28); border-color: rgba(168,85,247,.5); }

.pfx-cell-ico{ font-size: 26px; margin-bottom: 10px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.pfx-cell-num{
  font-family: var(--font-display); font-size: 38px; line-height: 1; font-weight: 800;
  background: linear-gradient(180deg, #fff, #b8b8c8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pfx-cell-label{
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-dim); font-weight: 800; margin-top: 8px;
}
.pfx-cell-hint{ font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* heat cell */
.pfx-cell-heat{
  padding: 22px 24px;
}
.pfx-heat-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.pfx-heat-title{ font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.pfx-heat-sub{ font-size: 11px; color: var(--text-faint); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.pfx-heatmap{
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.pfx-hm{
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: rgba(255,255,255,.045);
  transition: transform .15s, box-shadow .15s;
}
.pfx-hm:hover{ transform: scale(1.4); box-shadow: 0 0 12px rgba(255,255,255,.3); z-index: 2; }
.pfx-hm.lvl-0{ background: rgba(255,255,255,.05); }
.pfx-hm.lvl-1{ background: rgba(230,57,70,.35); }
.pfx-hm.lvl-2{ background: rgba(230,57,70,.6); box-shadow: 0 0 6px rgba(230,57,70,.3); }
.pfx-hm.lvl-3{ background: linear-gradient(135deg, #E63946, #ff6b35); box-shadow: 0 0 10px rgba(230,57,70,.5); }
.pfx-hm.lvl-4{ background: linear-gradient(135deg, #F5C518, #ff8a3d); box-shadow: 0 0 14px rgba(245,197,24,.7); }
.pfx-hm.lvl-f{ background: rgba(255,255,255,.02); opacity: .3; }
.pfx-heat-legend{
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 10.5px; color: var(--text-faint); font-weight: 700;
}
.pfx-heat-legend .pfx-hm{ width: 12px; height: 12px; aspect-ratio: auto; }
.pfx-heat-legend span:first-child{ margin-right: 4px; }
.pfx-heat-legend span:last-child{ margin-left: 4px; }

/* rank cell */
.pfx-cell-rank{
  display: flex; align-items: center; gap: 22px; padding: 22px 28px;
}
.pfx-rank-ring{
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background:
    conic-gradient(from 220deg, var(--rank-color, #F5C518), color-mix(in srgb, var(--rank-color, #F5C518) 30%, transparent) 65%, transparent 75%);
  padding: 5px;
  box-shadow: 0 0 40px color-mix(in srgb, var(--rank-color, #F5C518) 40%, transparent);
  flex-shrink: 0;
}
.pfx-rank-core{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1a1e, #0a0a0c);
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .5px; color: var(--rank-color, #F5C518);
  text-align: center; line-height: 1;
  padding: 4px;
}
.pfx-rank-meta{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pfx-rank-meta b{
  font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 800;
}
.pfx-rank-meta span{ font-size: 12px; color: var(--text-faint); font-weight: 700; letter-spacing: 1px; }

/* ================= BLOCKS ================= */
.pfx-block{ margin-bottom: 28px; }
.pfx-block-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.pfx-block-head h2{
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; gap: 10px; letter-spacing: -.5px;
}
.pfx-block-ico{ font-size: 22px; }
.pfx-block-count{
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-faint); padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}

/* achievements */
.pfx-achievements{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.pfx-ach{
  position: relative; padding: 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,197,24,.08), rgba(230,57,70,.04));
  border: 1px solid rgba(245,197,24,.18);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  overflow: hidden;
  animation: pfx-reveal-up .5s var(--ease) both;
  animation-delay: calc(var(--i) * 60ms);
}
.pfx-ach-shine{
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s;
}
.pfx-ach:hover{
  transform: translateY(-4px);
  border-color: rgba(245,197,24,.55);
  box-shadow: 0 20px 50px rgba(245,197,24,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.pfx-ach:hover .pfx-ach-shine{ transform: translateX(100%); }
.pfx-ach-ico{
  display: block; font-size: 30px; margin-bottom: 10px;
  filter: drop-shadow(0 6px 20px rgba(245,197,24,.5));
}
.pfx-ach-title{ display: block; font-weight: 800; font-size: 14px; color: #fff; }
.pfx-ach-desc{ display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* tabs */
.pfx-tabs{
  position: relative; display: flex; gap: 6px; padding: 6px;
  border-radius: 16px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
}
.pfx-tabs::-webkit-scrollbar{ display: none; }
.pfx-tab{
  position: relative; z-index: 2; flex: 1; min-width: 130px;
  padding: 12px 14px; border: 0; background: transparent; border-radius: 11px;
  color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: color .2s;
}
.pfx-tab i{
  font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--text-faint); font-weight: 800;
}
.pfx-tab:hover{ color: #fff; }
.pfx-tab.active{ color: #fff; }
.pfx-tab.active i{ background: rgba(0,0,0,.35); color: #fff; }
.pfx-tab-ind{
  position: absolute; top: 6px; left: 6px; height: calc(100% - 12px); border-radius: 11px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  box-shadow: 0 8px 26px rgba(230,57,70,.45), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .35s var(--ease), width .35s var(--ease);
  z-index: 1; width: 0;
}

/* panels / grid */
.pfx-panel{ display: none; animation: pfx-reveal-up .35s ease; }
.pfx-panel.active{ display: block; }
.pfx-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.pfx-card{
  transition: transform .3s var(--ease), box-shadow .3s;
  transform-style: preserve-3d;
  will-change: transform;
}
.pfx-card-shine{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: overlay;
  border-radius: inherit;
  transition: background .2s;
}
.pfx-card-live{
  position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%; background: #E63946; z-index: 3;
  animation: pfx-live 1.8s infinite;
  box-shadow: 0 0 0 2px rgba(10,10,12,.8);
}
.pfx-card-score{
  font-size: 11.5px; color: var(--text-faint); margin-top: 4px;
}
.pfx-card-score b{ color: #F5C518; font-weight: 800; }

/* empty */
.pfx-empty{
  padding: 70px 20px; text-align: center; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px dashed rgba(255,255,255,.1);
}
.pfx-empty-ico{
  font-size: 64px; margin-bottom: 16px;
  filter: drop-shadow(0 10px 40px rgba(230,57,70,.4));
}
.pfx-empty-title{
  font-size: 16px; font-weight: 700; color: var(--text-dim); margin-bottom: 22px;
}

/* timeline */
.pfx-timeline{
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 22px; padding: 20px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.07);
}
.pfx-tl-item{
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 12px 12px 26px;
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: background .2s, transform .2s;
}
.pfx-tl-item:hover{ background: rgba(255,255,255,.04); transform: translateX(3px); }
.pfx-tl-dot{
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
}
.pfx-tl-watching{ background: #E63946; box-shadow: 0 0 14px rgba(230,57,70,.85); }
.pfx-tl-completed{ background: #06D6A0; box-shadow: 0 0 14px rgba(6,214,160,.85); }
.pfx-tl-planned{ background: #4CC9F0; box-shadow: 0 0 14px rgba(76,201,240,.85); }
.pfx-tl-dropped{ background: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,.85); }
.pfx-tl-line{
  position: absolute; left: 15px; top: 0; bottom: 0;
  width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}
.pfx-tl-item:first-child .pfx-tl-line{ top: 50%; }
.pfx-tl-item:last-child .pfx-tl-line{ bottom: 50%; }
.pfx-tl-text{
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pfx-tl-text b{ color: #fff; font-weight: 700; }
.pfx-tl-time{
  font-size: 11px; color: var(--text-faint); font-family: var(--font-mono);
  flex-shrink: 0;
}
.pfx-tl-poster{
  width: 34px; height: 48px; border-radius: 6px; object-fit: cover;
  flex-shrink: 0; background: var(--card);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

/* reveal */
.pfx-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pfx-reveal.pfx-in{ opacity: 1; transform: none; }

/* mobile */
@media (max-width: 960px){
  .pfx-hero-grid{ grid-template-columns: auto 1fr; padding: 50px 26px 24px; }
  .pfx-xp-col{ grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
  .pfx-xp-ring{ width: 92px; height: 92px; }
  .pfx-xp-num{ font-size: 22px; }
  .pfx-actions{ grid-template-columns: 1fr 1fr; padding: 20px 26px 26px; }
  .pfx-actions .pfx-action:first-child{ grid-column: 1 / -1; }
  .pfx-bento{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "watch done"
      "plan  drop"
      "heat  heat"
      "rank  rank";
  }
}
@media (max-width: 640px){
  .pfx-hero-grid{ padding: 42px 18px 20px; gap: 18px; }
  .pfx-avatar-stage{ width: 120px; height: 120px; }
  .pfx-name{ font-size: 26px; letter-spacing: -.8px; }
  .pfx-meta{ gap: 12px; font-size: 12px; }
  .pfx-genre-dna{ padding: 12px; }
  .pfx-dna-bar{ grid-template-columns: 82px 1fr 24px; font-size: 11px; }
  .pfx-actions{ padding: 16px 18px 20px; grid-template-columns: 1fr; }
  .pfx-bento{ grid-template-columns: 1fr; grid-template-areas: "watch" "done" "plan" "drop" "heat" "rank"; gap: 10px; }
  .pfx-cell{ padding: 18px; }
  .pfx-cell-num{ font-size: 30px; }
  .pfx-cell-heat{ padding: 18px; }
  .pfx-heatmap{ gap: 3px; }
  .pfx-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pfx-achievements{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .pfx-ach{ padding: 14px; }
  .pfx-ach-ico{ font-size: 24px; margin-bottom: 6px; }
  .pfx-rank-ring{ width: 72px; height: 72px; }
  .pfx-rank-core{ font-size: 11px; }
  .pfx-rank-meta b{ font-size: 18px; }
}


/* ============================================================
   ANIMART PREMIUM (v2, в стиле профиля)
   ============================================================ */

@keyframes sfx-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes sfx-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes sfx-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes sfx-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes sfx-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes sfx-orbit-1{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes sfx-orbit-2{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes sfx-reveal-up{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }
@keyframes sfx-vip-pulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.75; transform:scale(1.06); } }
@keyframes sfx-glow-pulse{ 0%,100%{ filter:drop-shadow(0 0 8px rgba(245,197,24,.5)); } 50%{ filter:drop-shadow(0 0 22px rgba(245,197,24,.85)); } }

.sfx{ position: relative; padding: 22px 0 90px; }

.sfx-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .32;
}
.sfx-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.sfx-blob-1{ background: radial-gradient(circle, #F5C518, transparent 60%); top: -10%; left: -15%; animation: sfx-drift-1 26s ease-in-out infinite; }
.sfx-blob-2{ background: radial-gradient(circle, #E63946, transparent 60%); top: 40%; right: -20%; animation: sfx-drift-2 30s ease-in-out infinite; }
.sfx-blob-3{ background: radial-gradient(circle, #4CC9F0, transparent 60%); bottom: -20%; left: 30%; animation: sfx-drift-3 34s ease-in-out infinite; }
.sfx .wrap{ position: relative; z-index: 2; }

/* ================= HERO ================= */
.sfx-hero{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.9));
  margin-bottom: 32px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
}
.sfx-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.sfx-aurora{
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
}
.sfx-aurora span{
  position: absolute; width: 55%; height: 55%; border-radius: 50%;
  animation: sfx-drift-1 18s ease-in-out infinite;
}
.sfx-aurora span:nth-child(1){ background: radial-gradient(circle, #F5C518, transparent 65%); top: 0; left: 0; }
.sfx-aurora span:nth-child(2){ background: radial-gradient(circle, #E63946, transparent 65%); top: 30%; right: 5%; animation-delay: -6s; }
.sfx-aurora span:nth-child(3){ background: radial-gradient(circle, #4CC9F0, transparent 65%); bottom: 0; left: 30%; animation-delay: -12s; }
.sfx-aurora span:nth-child(4){ background: radial-gradient(circle, #a855f7, transparent 65%); bottom: 10%; right: 25%; animation-delay: -4s; opacity: .7; }

.sfx-stars{
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 75%, #fff, transparent);
  background-size: 400px 400px;
  animation: sfx-star 90s linear infinite;
}
.sfx-vignette{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.6) 100%);
}

.sfx-hero-content{
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  padding: 46px 44px;
}
.sfx-hero-left{ min-width: 0; }

.sfx-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.3);
  color: #F5C518;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  margin-bottom: 18px;
}
.sfx-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #F5C518; box-shadow: 0 0 12px #F5C518;
  animation: sfx-vip-pulse 1.8s infinite;
}

.sfx-title{
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.02; letter-spacing: -1.8px;
  margin: 0 0 16px;
}
.sfx-title-shine{
  display: inline-block;
  background: linear-gradient(110deg, #ffffff 20%, #fff4c4 40%, #F5C518 50%, #fff4c4 60%, #ffffff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sfx-shine 6s linear infinite;
  filter: drop-shadow(0 4px 30px rgba(245,197,24,.25));
}
.sfx-subtitle{
  font-size: 15px; line-height: 1.6; color: var(--text-dim);
  max-width: 520px; margin: 0 0 22px;
}

.sfx-balance{
  display: inline-flex; align-items: center; gap: 16px;
  padding: 16px 24px 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245,197,24,.14), rgba(230,57,70,.08));
  border: 1px solid rgba(245,197,24,.4);
  box-shadow: 0 20px 60px rgba(245,197,24,.15), inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}
.sfx-balance::before{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sfx-shine 5s ease-in-out infinite;
}
.sfx-balance-ico{
  font-size: 34px;
  filter: drop-shadow(0 4px 14px rgba(245,197,24,.6));
}
.sfx-balance-body{ display: flex; flex-direction: column; gap: 0; }
.sfx-balance-label{
  font-size: 10.5px; letter-spacing: 1.8px;
  color: rgba(245,197,24,.75); font-weight: 800; text-transform: uppercase;
}
.sfx-balance-num{
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800; line-height: 1.05;
  color: #fff; letter-spacing: -.5px;
}
.sfx-balance-ac{
  font-size: 12px; color: #F5C518; font-weight: 800;
  margin-left: 6px; letter-spacing: 1.6px;
}
.sfx-login-cta{ font-size: 15px; padding: 14px 26px; }

/* правая часть — орб */
.sfx-hero-right{
  display: flex; align-items: center; justify-content: center;
}
.sfx-hero-orb{
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.sfx-orb-ring{
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(245,197,24,.25);
}
.sfx-orb-ring-1{ inset: 0; animation: sfx-orbit-1 22s linear infinite; }
.sfx-orb-ring-1::before{
  content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #F5C518; box-shadow: 0 0 16px #F5C518;
}
.sfx-orb-ring-2{ inset: 22px; border-color: rgba(230,57,70,.3); animation: sfx-orbit-2 18s linear infinite; }
.sfx-orb-ring-2::before{
  content: ''; position: absolute; bottom: -4px; left: 50%; margin-left: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #E63946; box-shadow: 0 0 14px #E63946;
}
.sfx-orb-ring-3{ inset: 44px; border-color: rgba(76,201,240,.3); animation: sfx-orbit-1 26s linear infinite; }
.sfx-orb-ring-3::before{
  content: ''; position: absolute; top: 50%; right: -4px; margin-top: -4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #4CC9F0; box-shadow: 0 0 12px #4CC9F0;
}
.sfx-orb-core{
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  background: radial-gradient(circle at 40% 30%, rgba(245,197,24,.35), rgba(10,10,12,.95));
  box-shadow: 0 0 60px rgba(245,197,24,.5), inset 0 0 40px rgba(245,197,24,.15);
  border: 1px solid rgba(245,197,24,.4);
  animation: sfx-glow-pulse 4s ease-in-out infinite;
}

/* ================= BLOCKS ================= */
.sfx-block{ margin-bottom: 34px; }
.sfx-block-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.sfx-block-head h2{
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  display: flex; align-items: center; gap: 10px; letter-spacing: -.5px;
  margin: 0 0 4px;
}
.sfx-block-ico{ font-size: 24px; }
.sfx-block-sub{
  font-size: 13px; color: var(--text-faint); margin: 0;
}
.sfx-block-count{
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-faint); padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}

/* ================= GRID ================= */
.sfx-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* ================= CARD ================= */
.sfx-card{
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.sfx-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.sfx-card::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.sfx-card:hover::before{ opacity: 1; }

.sfx-card-vip{
  background: linear-gradient(180deg, rgba(245,197,24,.08), rgba(245,197,24,.01));
  border-color: rgba(245,197,24,.3);
}
.sfx-card-vip:hover{
  border-color: rgba(245,197,24,.6);
  box-shadow: 0 30px 70px rgba(245,197,24,.25);
}
.sfx-vip-glow{
  position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(circle, rgba(245,197,24,.35), transparent 55%);
  animation: sfx-vip-pulse 4s ease-in-out infinite;
  z-index: 0;
}
.sfx-card-vip > *:not(.sfx-vip-glow){ position: relative; z-index: 1; }

.sfx-card.sfx-owned{
  border-color: rgba(6,214,160,.35);
  background: linear-gradient(180deg, rgba(6,214,160,.06), rgba(6,214,160,.01));
}
.sfx-card.sfx-owned:hover{ border-color: rgba(6,214,160,.6); }

.sfx-card-badge{
  position: absolute; top: 14px; right: 14px;
  padding: 4px 11px; border-radius: 100px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.4px;
  z-index: 4;
}
.sfx-badge-vip{
  background: linear-gradient(135deg, #F5C518, #ffb800);
  color: #1a1200;
  box-shadow: 0 6px 20px rgba(245,197,24,.5);
}
.sfx-badge-owned{
  background: rgba(6,214,160,.2);
  border: 1px solid rgba(6,214,160,.55);
  color: #06D6A0;
}

/* preview */
.sfx-card-preview{
  position: relative;
  padding: 34px 20px 24px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.04), transparent 70%);
}
.sfx-preview-avatar{
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #3a3a48, #1a1a1e 70%),
    var(--card);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 2px 10px rgba(255,255,255,.06);
  position: relative;
}
.sfx-preview-avatar::after{
  content: '👤';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; opacity: .12;
  pointer-events: none;
}
.sfx-preview-shadow{
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* body */
.sfx-card-body{
  padding: 0 20px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.sfx-card-name{
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; color: #fff;
  margin: 0 0 6px; letter-spacing: -.3px;
}
.sfx-card-desc{
  font-size: 12.5px; line-height: 1.5; color: var(--text-faint);
  margin: 0 0 16px; min-height: 38px;
}
.sfx-author{ color: var(--text-dim); font-weight: 700; }

.sfx-card-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto;
}
.sfx-price{
  display: inline-flex; align-items: baseline; gap: 4px;
}
.sfx-price-num{
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; color: #F5C518;
  letter-spacing: -.5px;
  filter: drop-shadow(0 2px 8px rgba(245,197,24,.35));
}
.sfx-price-ac{
  font-size: 10.5px; color: rgba(245,197,24,.65); font-weight: 800; letter-spacing: 1.4px;
}
.sfx-form{ margin: 0; }
.sfx-buy-btn{
  padding: 9px 18px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
  white-space: nowrap;
}

/* empty in grid */
.sfx-empty-inline{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
  border-radius: 22px;
  border: 1px dashed rgba(255,255,255,.1);
  background: rgba(255,255,255,.015);
  text-align: center;
  grid-column: 1 / -1;
}
.sfx-empty-inline-ico{ font-size: 40px; margin-bottom: 10px; opacity: .7; }
.sfx-empty-inline-text{ font-size: 13px; color: var(--text-faint); font-weight: 700; }

/* ================= ЦВЕТ НИКА ================= */
.sfx-color-card{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.sfx-color-preview{
  padding: 46px 40px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(230,57,70,.15), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(76,201,240,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position: relative;
  overflow: hidden;
}
.sfx-color-preview::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 25%, #fff, transparent),
    radial-gradient(1px 1px at 40% 85%, #fff, transparent);
  background-size: 300px 300px;
  opacity: .35;
  animation: sfx-star 120s linear infinite;
}
.sfx-color-label{
  font-size: 10.5px; letter-spacing: 2px; font-weight: 800;
  color: var(--text-faint); text-transform: uppercase;
}
.sfx-color-name{
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; letter-spacing: -1px;
  transition: color .3s;
  filter: drop-shadow(0 4px 20px currentColor);
  line-height: 1.05;
}
.sfx-color-sub{ font-size: 12.5px; color: var(--text-faint); }

.sfx-color-body{
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 20px;
  border-left: 1px solid rgba(255,255,255,.06);
}
.sfx-color-price-row{
  display: flex; align-items: baseline; gap: 12px;
}
.sfx-color-hint{ font-size: 12px; color: var(--text-faint); font-weight: 700; }

.sfx-swatches{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.sfx-swatch{
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  background: var(--c);
  cursor: pointer; padding: 0;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 40%, transparent);
}
.sfx-swatch:hover{ transform: scale(1.12); }
.sfx-swatch.selected{
  transform: scale(1.15);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 8px 30px color-mix(in srgb, var(--c) 60%, transparent);
}
.sfx-swatch.selected::after{
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.sfx-color-form{ display: flex; flex-direction: column; gap: 16px; }
.sfx-color-buy{ padding: 14px 22px !important; font-size: 14px !important; }

/* reveal */
.sfx-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.sfx-reveal.sfx-in{ opacity: 1; transform: none; }

/* mobile */
@media (max-width: 900px){
  .sfx-hero-content{ grid-template-columns: 1fr; padding: 36px 26px; gap: 24px; text-align: left; }
  .sfx-hero-right{ display: none; }
  .sfx-color-card{ grid-template-columns: 1fr; }
  .sfx-color-body{ border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
}
@media (max-width: 640px){
  .sfx{ padding: 14px 0 70px; }
  .sfx-hero-content{ padding: 28px 18px; }
  .sfx-balance{ padding: 14px 18px 14px 14px; gap: 12px; }
  .sfx-balance-ico{ font-size: 26px; }
  .sfx-balance-num{ font-size: 26px; }
  .sfx-grid{ grid-template-columns: 1fr; gap: 14px; }
  .sfx-card-preview{ padding: 26px 16px 18px; }
  .sfx-preview-avatar{ width: 92px; height: 92px; }
  .sfx-color-preview{ padding: 32px 22px; }
  .sfx-color-body{ padding: 26px 22px; }
  .sfx-swatch{ width: 36px; height: 36px; }
}


/* ============================================================
   ABOUT PREMIUM V2
   ============================================================ */

@keyframes afx-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes afx-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes afx-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes afx-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes afx-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes afx-reveal-up{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }
@keyframes afx-orbit{ to{transform:rotate(360deg)} }
@keyframes afx-halo{ 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:.95; transform:scale(1.06)} }
@keyframes afx-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.4)} }

.afx{ position: relative; padding: 22px 0 90px; }

.afx-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .34;
}
.afx-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.afx-blob-1{ background: radial-gradient(circle, #E63946, transparent 60%); top: -10%; left: -15%; animation: afx-drift-1 24s ease-in-out infinite; }
.afx-blob-2{ background: radial-gradient(circle, #ffb84d, transparent 60%); top: 40%; right: -20%; animation: afx-drift-2 28s ease-in-out infinite; }
.afx-blob-3{ background: radial-gradient(circle, #4CC9F0, transparent 60%); bottom: -20%; left: 30%; animation: afx-drift-3 32s ease-in-out infinite; }
.afx .wrap{ position: relative; z-index: 2; }

/* ============ HERO ============ */
.afx-hero{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.9));
  margin-bottom: 34px;
  padding: 0;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
}
.afx-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.afx-aurora{
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
}
.afx-aurora span{
  position: absolute; width: 55%; height: 55%; border-radius: 50%;
  animation: afx-drift-1 18s ease-in-out infinite;
}
.afx-aurora span:nth-child(1){ background: radial-gradient(circle, #E63946, transparent 65%); top: 0; left: 0; }
.afx-aurora span:nth-child(2){ background: radial-gradient(circle, #ffb84d, transparent 65%); top: 30%; right: 5%; animation-delay: -6s; }
.afx-aurora span:nth-child(3){ background: radial-gradient(circle, #4CC9F0, transparent 65%); bottom: 0; left: 30%; animation-delay: -12s; }
.afx-aurora span:nth-child(4){ background: radial-gradient(circle, #a855f7, transparent 65%); bottom: 10%; right: 25%; animation-delay: -4s; opacity: .7; }

.afx-stars{
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 75%, #fff, transparent);
  background-size: 400px 400px;
  animation: afx-star 90s linear infinite;
}
.afx-vignette{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.65) 100%);
}

.afx-hero-inner{
  position: relative; z-index: 5;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 78px 32px 40px;
}
.afx-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(230,57,70,.12);
  border: 1px solid rgba(230,57,70,.35);
  color: #ffb84d;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
  margin-bottom: 26px;
  text-transform: uppercase;
}
.afx-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 12px #E63946;
  animation: afx-pulse 1.8s infinite;
}
.afx-eyebrow-plain{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.1);
  color: var(--text-faint);
}
.afx-eyebrow-plain::before{ display: none; }

.afx-title{
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -1.8px;
  margin: 0 0 22px;
  color: #fff;
}
.afx-title em{
  font-style: normal;
  background: linear-gradient(100deg, #E63946, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.35));
}
.afx-lead{
  font-size: 17px; line-height: 1.65;
  color: var(--text-dim);
  max-width: 640px; margin: 0 auto 30px;
}
.afx-cta-row{
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.afx-cta-row-center{ justify-content: center; }
.afx-cta-primary{ padding: 14px 28px !important; font-size: 15px !important; }
.afx-cta-ghost{ padding: 14px 28px !important; font-size: 15px !important; }

/* ============ METRICS BENTO ============ */
.afx-metrics{
  position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 0 32px 34px;
  margin-top: 30px;
}
.afx-metric{
  position: relative;
  padding: 24px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.afx-metric:hover{ transform: translateY(-4px); }
.afx-metric::before{
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .6;
}
.afx-metric-anime{ color: #E63946; }
.afx-metric-user{ color: #4CC9F0; }
.afx-metric-comment{ color: #06D6A0; }
.afx-metric-coins{ color: #F5C518; }
.afx-metric-anime:hover{ border-color: rgba(230,57,70,.5); box-shadow: 0 20px 50px rgba(230,57,70,.22); }
.afx-metric-user:hover{ border-color: rgba(76,201,240,.5); box-shadow: 0 20px 50px rgba(76,201,240,.22); }
.afx-metric-comment:hover{ border-color: rgba(6,214,160,.5); box-shadow: 0 20px 50px rgba(6,214,160,.22); }
.afx-metric-coins:hover{ border-color: rgba(245,197,24,.5); box-shadow: 0 20px 50px rgba(245,197,24,.22); }

.afx-metric-ico{
  font-size: 26px; margin-bottom: 10px;
  filter: drop-shadow(0 4px 14px currentColor);
}
.afx-metric-num{
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  background: linear-gradient(180deg, #fff, #b8b8c8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.05; letter-spacing: -.5px;
}
.afx-metric-label{
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 800; margin-top: 8px;
}
.afx-metric-glow{
  position: absolute; inset: -40%; opacity: 0; pointer-events: none;
  transition: opacity .3s;
  background: radial-gradient(circle, currentColor, transparent 60%);
  z-index: -1;
}
.afx-metric:hover .afx-metric-glow{ opacity: .18; }

/* ============ BLOCK ============ */
.afx-block{ margin-bottom: 40px; }
.afx-block-head{ margin-bottom: 26px; }
.afx-block-head-center{ text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.afx-h2{
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 38px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.8px;
  color: #fff; margin: 8px 0 12px;
}
.afx-h2 em{
  font-style: normal;
  background: linear-gradient(100deg, #E63946, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afx-sub{
  font-size: 15px; line-height: 1.6;
  color: var(--text-dim); margin: 0;
}

/* ============ FEATURES ============ # */
.afx-features{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.afx-feature{
  position: relative;
  padding: 28px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
  animation: afx-reveal-up .55s var(--ease) both;
  animation-delay: calc(var(--i) * 60ms);
}
.afx-feature:hover{
  border-color: rgba(230,57,70,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.afx-feature-shine{
  position: absolute; inset: 0; pointer-events: none;
  transition: background .25s;
}
.afx-feature-ico{
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(230,57,70,.15), rgba(255,184,77,.1));
  border: 1px solid rgba(230,57,70,.25);
  box-shadow: 0 8px 24px rgba(230,57,70,.2);
}
.afx-feature-title{
  font-size: 17.5px; font-weight: 800; color: #fff;
  margin: 0 0 10px; letter-spacing: -.3px;
}
.afx-feature-text{
  font-size: 14px; line-height: 1.65; color: var(--text-dim); margin: 0;
}

/* ============ TEAM ============ # */
.afx-team{
  display: flex; justify-content: center;
}
.afx-member{
  position: relative;
  max-width: 720px; width: 100%;
  display: grid; grid-template-columns: auto 1fr; gap: 32px;
  padding: 34px 36px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(230,57,70,.08), rgba(245,197,24,.03));
  border: 1px solid rgba(230,57,70,.28);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.afx-member-glow{
  position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(230,57,70,.35), transparent 55%);
  animation: afx-halo 5s ease-in-out infinite;
  z-index: 0;
}
.afx-member > *:not(.afx-member-glow){ position: relative; z-index: 1; }

.afx-member-avatar{
  position: relative;
  width: 150px; height: 150px; flex-shrink: 0;
}
.afx-member-halo{
  position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.55), transparent 62%);
  filter: blur(22px);
  animation: afx-halo 4s ease-in-out infinite;
  pointer-events: none;
}
.afx-member-orbit{
  position: absolute; inset: -8px; border-radius: 50%;
  animation: afx-orbit 20s linear infinite;
  pointer-events: none;
}
.afx-member-orb{
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 14px currentColor, 0 0 4px #fff inset;
}
.afx-member-orb-1{ top: 2px; left: 50%; margin-left: -4.5px; background: #E63946; color: #E63946; }
.afx-member-orb-2{ top: 50%; right: 2px; margin-top: -4.5px; background: #F5C518; color: #F5C518; }
.afx-member-orb-3{ bottom: 2px; left: 50%; margin-left: -4.5px; background: #4CC9F0; color: #4CC9F0; }

.afx-member-img{
  position: absolute; inset: 10px; border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #2a2a34, #0f0f18);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(230,57,70,.15);
  display: flex; align-items: center; justify-content: center;
}
.afx-member-img img{
  width: 100%; height: 100%; object-fit: cover;
}
.afx-member-fallback{
  font-size: 60px;
  filter: drop-shadow(0 8px 30px rgba(230,57,70,.6));
}

.afx-member-body{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.afx-member-tags{ display: flex; gap: 8px; margin-bottom: 4px; }
.afx-member-badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 100px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.4px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.afx-member-badge-admin{
  background: linear-gradient(135deg, #E63946, #ff6b35);
  border-color: rgba(230,57,70,.55);
  box-shadow: 0 6px 20px rgba(230,57,70,.4);
}
.afx-member-name{
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -.8px; color: #fff;
  margin: 6px 0 4px;
  background: linear-gradient(100deg, #fff, #ffd8c6, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afx-member-role{
  font-size: 13px; color: #ffb84d; font-weight: 700; margin: 0 0 12px;
  letter-spacing: .3px;
}
.afx-member-quote{
  font-size: 14px; line-height: 1.65; color: var(--text-dim);
  padding-left: 14px; border-left: 2px solid rgba(230,57,70,.4);
  margin: 0 0 16px; font-style: italic;
}
.afx-member-stats{
  display: flex; gap: 26px;
}
.afx-member-stats > div{
  display: flex; flex-direction: column; gap: 2px;
}
.afx-member-stats b{
  font-family: var(--font-display);
  font-size: 20px; color: #fff; font-weight: 800;
}
.afx-member-stats span{
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}

/* ============ ROADMAP ============ # */
.afx-roadmap{
  position: relative;
  max-width: 760px; margin: 0 auto;
  padding-left: 40px;
}
.afx-roadmap::before{
  content: ''; position: absolute;
  left: 15px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #E63946, rgba(230,57,70,.25) 40%, rgba(230,57,70,.05));
}
.afx-rm-item{
  position: relative;
  padding-bottom: 26px;
}
.afx-rm-item:last-child{ padding-bottom: 0; }
.afx-rm-dot{
  position: absolute; left: -33px; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a12;
  border: 2px solid #E63946;
  box-shadow: 0 0 14px rgba(230,57,70,.6);
  font-size: 11px; color: #fff; font-weight: 900;
  z-index: 1;
}
.afx-rm-done .afx-rm-dot{
  background: linear-gradient(135deg, #E63946, #ff6b35);
  box-shadow: 0 0 20px rgba(230,57,70,.85), inset 0 1px 0 rgba(255,255,255,.3);
}
.afx-rm-active .afx-rm-dot{
  background: radial-gradient(circle, #F5C518, #ffb84d);
  border-color: #F5C518;
  box-shadow: 0 0 22px rgba(245,197,24,.85);
  animation: afx-halo 2s ease-in-out infinite;
  color: #1a1200;
}
.afx-rm-plan .afx-rm-dot{
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.afx-rm-body{ padding-top: 2px; }
.afx-rm-title{
  font-size: 15.5px; font-weight: 800; color: #fff;
  margin-bottom: 6px; letter-spacing: -.2px;
}
.afx-rm-plan .afx-rm-title{ color: var(--text-dim); }
.afx-rm-desc{
  font-size: 13px; line-height: 1.6; color: var(--text-faint);
}

/* ============ FAQ ============ # */
.afx-faq{
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.afx-faq-item{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.afx-faq-item:hover{ border-color: rgba(255,255,255,.14); }
.afx-faq-item[open]{
  border-color: rgba(230,57,70,.35);
  box-shadow: 0 14px 40px rgba(230,57,70,.12);
}
.afx-faq-item summary{
  padding: 18px 22px;
  font-size: 14.5px; font-weight: 700; color: #fff;
  cursor: pointer; list-style: none;
  position: relative; padding-right: 52px;
  transition: color .2s;
}
.afx-faq-item summary::-webkit-details-marker{ display: none; }
.afx-faq-item summary::after{
  content: '+';
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 300; color: #E63946;
  transition: transform .3s var(--ease);
}
.afx-faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.afx-faq-body{
  padding: 0 22px 20px;
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
}
.afx-faq-body a{ color: #ffb84d; font-weight: 700; }

/* ============ CTA ============ # */
.afx-cta{
  position: relative;
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230,57,70,.14), rgba(255,184,77,.06));
  border: 1px solid rgba(230,57,70,.28);
  box-shadow: 0 40px 100px rgba(230,57,70,.12);
  isolation: isolate;
}
.afx-cta-glow{
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(230,57,70,.3), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: afx-halo 5s ease-in-out infinite;
}
.afx-cta-inner{ position: relative; z-index: 1; }
.afx-cta-title{
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800; letter-spacing: -.6px;
  color: #fff; margin: 0 0 12px;
}
.afx-cta-sub{
  font-size: 15.5px; color: var(--text-dim); max-width: 520px;
  margin: 0 auto 28px; line-height: 1.6;
}

/* reveal */
.afx-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.afx-reveal.afx-in{ opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ # */
@media (max-width: 900px){
  .afx-hero-inner{ padding: 60px 24px 30px; }
  .afx-metrics{ grid-template-columns: repeat(2, 1fr); padding: 0 22px 26px; }
  .afx-member{ grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 26px; }
  .afx-member-avatar{ margin: 0 auto; }
  .afx-member-tags{ justify-content: center; }
  .afx-member-quote{ text-align: left; }
  .afx-member-stats{ justify-content: center; }
}
@media (max-width: 640px){
  .afx{ padding: 14px 0 70px; }
  .afx-hero{ border-radius: 22px; }
  .afx-hero-inner{ padding: 48px 18px 20px; }
  .afx-title{ font-size: 32px; letter-spacing: -1px; }
  .afx-lead{ font-size: 15px; }
  .afx-metrics{ grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px 20px; }
  .afx-metric{ padding: 18px 12px; }
  .afx-metric-ico{ font-size: 22px; margin-bottom: 6px; }
  .afx-metric-num{ font-size: 22px; }
  .afx-metric-label{ font-size: 10px; letter-spacing: 1px; }
  .afx-features{ grid-template-columns: 1fr; gap: 12px; }
  .afx-feature{ padding: 22px 20px; }
  .afx-feature-ico{ width: 46px; height: 46px; font-size: 22px; margin-bottom: 14px; }
  .afx-member{ padding: 22px; border-radius: 22px; }
  .afx-member-avatar{ width: 120px; height: 120px; }
  .afx-member-name{ font-size: 26px; }
  .afx-member-stats{ gap: 16px; }
  .afx-member-stats b{ font-size: 17px; }
  .afx-roadmap{ padding-left: 30px; }
  .afx-roadmap::before{ left: 11px; }
  .afx-rm-dot{ left: -27px; width: 16px; height: 16px; font-size: 9px; }
  .afx-faq-item summary{ padding: 15px 18px; font-size: 13.5px; padding-right: 44px; }
  .afx-faq-item summary::after{ right: 18px; }
  .afx-faq-body{ padding: 0 18px 16px; }
  .afx-cta{ padding: 40px 22px; border-radius: 22px; }
}


/* ============ ABOUT · member extensions ============ */
.afx-member-avatar{
  position: relative;
  display: block;
  width: 150px; height: 150px; flex-shrink: 0;
  cursor: pointer;
  transition: transform .3s var(--ease);
}
.afx-member-avatar:hover{ transform: scale(1.03); }
.afx-member-avatar:hover .afx-member-halo{ opacity: 1; transform: scale(1.15); }

.afx-member-lvl{
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 100px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 1.4px;
  box-shadow: 0 10px 30px rgba(230,57,70,.6), 0 0 0 3px rgba(10,10,12,.9);
  z-index: 5; white-space: nowrap;
}
.afx-member-badge-fire{
  background: linear-gradient(135deg, rgba(245,197,24,.25), rgba(230,57,70,.18));
  border-color: rgba(245,197,24,.55);
  color: #F5C518;
}
.afx-member-links{
  margin-top: 16px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.afx-member-link{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(230,57,70,.1);
  border: 1px solid rgba(230,57,70,.35);
  color: #ffb84d; font-weight: 700; font-size: 12.5px;
  text-decoration: none; letter-spacing: .3px;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.afx-member-link:hover{
  background: rgba(230,57,70,.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(230,57,70,.3);
}

/* убираем большой fallback-эмодзи, если img не загрузился */
.afx-member-fallback{ display: none !important; }

@media (max-width: 640px){
  .afx-member-lvl{ font-size: 9px; padding: 3px 10px; }
  .afx-member-stats{ gap: 14px; flex-wrap: wrap; }
}


/* ============================================================
   CONTACTS PREMIUM V2
   ============================================================ */

@keyframes cfx-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes cfx-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes cfx-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes cfx-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes cfx-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.4)} }
@keyframes cfx-halo{ 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:.95; transform:scale(1.06)} }
@keyframes cfx-reveal-up{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)} }

.cfx{ position: relative; padding: 22px 0 90px; }

.cfx-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .32;
}
.cfx-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.cfx-blob-1{ background: radial-gradient(circle, #4CC9F0, transparent 60%); top: -10%; left: -15%; animation: cfx-drift-1 26s ease-in-out infinite; }
.cfx-blob-2{ background: radial-gradient(circle, #E63946, transparent 60%); top: 40%; right: -20%; animation: cfx-drift-2 30s ease-in-out infinite; }
.cfx-blob-3{ background: radial-gradient(circle, #a855f7, transparent 60%); bottom: -20%; left: 30%; animation: cfx-drift-3 34s ease-in-out infinite; }
.cfx .wrap{ position: relative; z-index: 2; }

/* ============ HERO ============ */
.cfx-hero{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.9));
  margin-bottom: 34px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
}
.cfx-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.cfx-aurora{
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
}
.cfx-aurora span{
  position: absolute; width: 55%; height: 55%; border-radius: 50%;
  animation: cfx-drift-1 18s ease-in-out infinite;
}
.cfx-aurora span:nth-child(1){ background: radial-gradient(circle, #4CC9F0, transparent 65%); top: 0; left: 0; }
.cfx-aurora span:nth-child(2){ background: radial-gradient(circle, #E63946, transparent 65%); top: 30%; right: 5%; animation-delay: -6s; }
.cfx-aurora span:nth-child(3){ background: radial-gradient(circle, #a855f7, transparent 65%); bottom: 0; left: 30%; animation-delay: -12s; }
.cfx-aurora span:nth-child(4){ background: radial-gradient(circle, #F5C518, transparent 65%); bottom: 10%; right: 25%; animation-delay: -4s; opacity: .7; }

.cfx-stars{
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 75%, #fff, transparent);
  background-size: 400px 400px;
  animation: cfx-star 90s linear infinite;
}
.cfx-vignette{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.65) 100%);
}

.cfx-hero-inner{
  position: relative; z-index: 5;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 70px 32px 60px;
}
.cfx-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(76,201,240,.12);
  border: 1px solid rgba(76,201,240,.35);
  color: #4CC9F0;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.cfx-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #4CC9F0;
  box-shadow: 0 0 12px #4CC9F0;
  animation: cfx-pulse 1.8s infinite;
}
.cfx-eyebrow-plain{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.1);
  color: var(--text-faint);
}

.cfx-title{
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1.6px;
  margin: 0 0 20px;
  color: #fff;
}
.cfx-title em{
  font-style: normal;
  background: linear-gradient(100deg, #4CC9F0, #E63946, #F5C518);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(76,201,240,.35));
}
.cfx-lead{
  font-size: 16.5px; line-height: 1.65;
  color: var(--text-dim);
  max-width: 600px; margin: 0 auto 26px;
}
.cfx-badges{
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.cfx-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
  font-size: 12px; font-weight: 700;
}

/* ============ BLOCK ============ */
.cfx-block{ margin-bottom: 40px; }
.cfx-block-head{ margin-bottom: 24px; }
.cfx-block-head-center{ text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.cfx-h2{
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 34px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.7px;
  color: #fff; margin: 8px 0 10px;
}
.cfx-sub{
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-dim); margin: 0;
}

/* ============ CONTACT GRID ============ */
.cfx-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.cfx-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .3s, box-shadow .3s;
  will-change: transform;
}
.cfx-card:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cfx-card-shine{
  position: absolute; inset: 0; pointer-events: none;
  transition: background .25s;
  z-index: 3;
}
.cfx-card > *:not(.cfx-card-shine){ position: relative; z-index: 1; }

.cfx-card-ico{
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: transform .35s var(--ease);
}
.cfx-card-ico svg{ width: 26px; height: 26px; }
.cfx-card:hover .cfx-card-ico{ transform: scale(1.08) rotate(-3deg); }

.cfx-card-email .cfx-card-ico{
  background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(255,184,77,.1));
  border: 1px solid rgba(230,57,70,.3);
  color: #ffb84d;
  box-shadow: 0 8px 24px rgba(230,57,70,.25);
}
.cfx-card-tg .cfx-card-ico{
  background: linear-gradient(135deg, #229ED9, #1b80b0);
  border: 1px solid rgba(34,158,217,.5);
  color: #fff;
  box-shadow: 0 8px 24px rgba(34,158,217,.4);
}
.cfx-card-yt .cfx-card-ico{
  background: linear-gradient(135deg, #FF0033, #c9002a);
  border: 1px solid rgba(255,0,51,.5);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,0,51,.4);
}
.cfx-card-tt .cfx-card-ico{
  background: linear-gradient(135deg, #25F4EE, #FE2C55, #8a2be2);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: 0 8px 24px rgba(254,44,85,.4);
}

.cfx-card-body{ flex: 1; }
.cfx-card-label{
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 800;
  margin-bottom: 6px;
}
.cfx-card-title{
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: #fff;
  margin: 0 0 12px; letter-spacing: -.3px;
  word-break: break-word;
}
.cfx-card-text{
  font-size: 13.5px; line-height: 1.6; color: var(--text-dim);
  margin: 0 0 20px;
}

.cfx-card-actions{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}

.cfx-btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  border: 1px solid transparent;
  text-decoration: none; color: inherit;
  cursor: pointer; font-family: inherit;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s;
  white-space: nowrap;
}
.cfx-btn-primary{
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff;
  box-shadow: 0 8px 24px rgba(230,57,70,.4);
}
.cfx-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(230,57,70,.55);
}
.cfx-btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.cfx-btn-ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.cfx-copied{
  background: linear-gradient(135deg, #06D6A0, #04a97d) !important;
  box-shadow: 0 8px 24px rgba(6,214,160,.4) !important;
}

/* ============ SUPPORT ============ */
.cfx-support{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230,57,70,.14), rgba(245,197,24,.06));
  border: 1px solid rgba(230,57,70,.28);
  box-shadow: 0 30px 80px rgba(230,57,70,.12);
  isolation: isolate;
}
.cfx-support-bg{
  position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(circle at 15% 30%, rgba(230,57,70,.4), transparent 55%),
              radial-gradient(circle at 85% 70%, rgba(245,197,24,.3), transparent 55%);
  filter: blur(50px);
  animation: cfx-halo 6s ease-in-out infinite;
  z-index: 0;
}
.cfx-support-inner{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.6fr auto; gap: 32px;
  align-items: center;
  padding: 40px 40px;
}
.cfx-support-left{ display: flex; gap: 22px; align-items: flex-start; }
.cfx-support-ico{
  font-size: 52px; line-height: 1;
  filter: drop-shadow(0 8px 30px rgba(230,57,70,.6));
  animation: cfx-halo 3s ease-in-out infinite;
}
.cfx-support-title{
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; color: #fff;
  margin: 0 0 10px; letter-spacing: -.5px;
}
.cfx-support-text{
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim);
  margin: 0 0 14px; max-width: 560px;
}
.cfx-support-meta{
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint); font-weight: 700;
}
.cfx-support-right{ display: flex; justify-content: flex-end; }
.cfx-donate-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 16px 40px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .25s var(--ease), box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.cfx-donate-btn::before{
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: cfx-drift-1 3s linear infinite;
  animation: none;
}
.cfx-donate-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 50px rgba(230,57,70,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.cfx-donate-btn:hover::before{ left: 100%; transition: left .8s; }
.cfx-donate-btn svg{ transition: transform .2s; }
.cfx-donate-btn:hover svg{ transform: translateX(3px); }

/* ============ FAQ ============ */
.cfx-faq{
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.cfx-faq-item{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.cfx-faq-item:hover{ border-color: rgba(255,255,255,.14); }
.cfx-faq-item[open]{
  border-color: rgba(76,201,240,.35);
  box-shadow: 0 14px 40px rgba(76,201,240,.1);
}
.cfx-faq-item summary{
  padding: 18px 22px;
  font-size: 14.5px; font-weight: 700; color: #fff;
  cursor: pointer; list-style: none;
  position: relative; padding-right: 52px;
  transition: color .2s;
}
.cfx-faq-item summary::-webkit-details-marker{ display: none; }
.cfx-faq-item summary::after{
  content: '+';
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 300; color: #4CC9F0;
  transition: transform .3s var(--ease);
}
.cfx-faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.cfx-faq-body{
  padding: 0 22px 20px;
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
}
.cfx-faq-body a{ color: #4CC9F0; font-weight: 700; }

/* ============ CTA ============ */
.cfx-cta{
  position: relative;
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(76,201,240,.12), rgba(230,57,70,.1));
  border: 1px solid rgba(76,201,240,.28);
  box-shadow: 0 40px 100px rgba(76,201,240,.12);
  isolation: isolate;
}
.cfx-cta-glow{
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(76,201,240,.3), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: cfx-halo 5s ease-in-out infinite;
}
.cfx-cta-inner{ position: relative; z-index: 1; }
.cfx-cta-title{
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800; letter-spacing: -.6px;
  color: #fff; margin: 0 0 12px;
}
.cfx-cta-sub{
  font-size: 15.5px; color: var(--text-dim); max-width: 520px;
  margin: 0 auto 28px; line-height: 1.6;
}
.cfx-cta-row{
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cfx-cta-primary, .cfx-cta-ghost{
  padding: 14px 26px !important;
  font-size: 14.5px !important;
  border-radius: 100px !important;
}

/* reveal */
.cfx-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cfx-reveal.cfx-in{ opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .cfx-support-inner{ grid-template-columns: 1fr; padding: 32px 28px; gap: 22px; }
  .cfx-support-right{ justify-content: flex-start; }
  .cfx-support-left{ gap: 16px; }
  .cfx-support-ico{ font-size: 42px; }
}
@media (max-width: 640px){
  .cfx{ padding: 14px 0 70px; }
  .cfx-hero{ border-radius: 22px; }
  .cfx-hero-inner{ padding: 52px 20px 40px; }
  .cfx-title{ font-size: 30px; letter-spacing: -1px; }
  .cfx-lead{ font-size: 14.5px; }
  .cfx-badges{ gap: 6px; }
  .cfx-badge{ font-size: 11px; padding: 6px 11px; }
  .cfx-grid{ grid-template-columns: 1fr; gap: 14px; }
  .cfx-card{ padding: 22px 20px; }
  .cfx-card-ico{ width: 50px; height: 50px; margin-bottom: 16px; }
  .cfx-card-ico svg{ width: 22px; height: 22px; }
  .cfx-card-title{ font-size: 15px; }
  .cfx-card-text{ font-size: 12.5px; margin-bottom: 16px; }
  .cfx-btn{ padding: 9px 14px; font-size: 12.5px; }
  .cfx-support-inner{ padding: 26px 22px; }
  .cfx-support-title{ font-size: 22px; }
  .cfx-support-text{ font-size: 13.5px; }
  .cfx-donate-btn{ padding: 15px 22px; font-size: 14px; }
  .cfx-faq-item summary{ padding: 15px 18px; font-size: 13.5px; padding-right: 44px; }
  .cfx-faq-item summary::after{ right: 18px; }
  .cfx-faq-body{ padding: 0 18px 16px; }
  .cfx-cta{ padding: 40px 22px; border-radius: 22px; }
}


/* ============================================================
   CATALOG PREMIUM V2 — override поверх inline .anp-* стилей
   ============================================================ */

@keyframes catg-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes catg-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes catg-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes catg-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes catg-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }
@keyframes catg-card-in{ from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes catg-shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes catg-badge-live{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.8)} 70%{box-shadow:0 0 0 10px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} }

/* ============ HERO ============ */
.anp-catalog-hero{
  position: relative;
  padding: 82px 0 66px !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.05);
  isolation: isolate;
}
.anp-cat-bg{
  position: absolute; inset: 0; z-index: 0;
  background: none !important;
}
.anp-cat-gradient{
  position: absolute; inset: -20%; z-index: 1;
  background:
    radial-gradient(circle at 20% 20%, rgba(230,57,70,.35), transparent 55%),
    radial-gradient(circle at 78% 65%, rgba(76,201,240,.22), transparent 55%),
    radial-gradient(circle at 45% 90%, rgba(168,85,247,.22), transparent 55%),
    radial-gradient(circle at 88% 15%, rgba(245,197,24,.15), transparent 55%) !important;
  filter: blur(70px);
  opacity: .85;
  animation: catg-drift-1 26s ease-in-out infinite;
  mix-blend-mode: screen;
}
.anp-catalog-hero::before{
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 75%, #fff, transparent);
  background-size: 400px 400px;
  opacity: .55;
  animation: catg-star 90s linear infinite;
}
.anp-catalog-hero::after{
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,10,12,.4) 70%, rgba(10,10,12,.75) 100%);
}
.anp-cat-hero-inner{ position: relative; z-index: 4; }

.anp-cat-eyebrow{
  padding: 8px 18px !important;
  background: rgba(230,57,70,.12) !important;
  border-color: rgba(230,57,70,.35) !important;
  box-shadow: 0 0 30px rgba(230,57,70,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.anp-cat-h1{
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5.5vw, 56px) !important;
  letter-spacing: -1.8px !important;
  line-height: 1.05 !important;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.25));
}
.anp-cat-h1 em{
  background: linear-gradient(110deg, #E63946 0%, #ff8c42 50%, #ffb84d 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  position: relative;
}

/* Поиск — стекло */
.anp-cat-search{ max-width: 620px; }
.anp-cat-search input{
  padding: 20px 64px 20px 58px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  font-size: 15.5px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s, box-shadow .3s, background .3s !important;
}
.anp-cat-search input:focus{
  border-color: rgba(230,57,70,.6) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 4px rgba(230,57,70,.15), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.anp-search-icon{ color: #E63946 !important; }

/* ============ LAYOUT ============ */
.anp-cat-section{
  padding: 42px 0 90px !important;
  position: relative;
}

/* ============ ФИЛЬТРЫ ============ */
.anp-filters{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  padding: 26px 22px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
}
.anp-filters-head h3{
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  letter-spacing: -.3px;
}
.anp-filters-head{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}
.anp-filter-label{
  color: #E63946 !important;
  font-size: 10.5px !important;
  letter-spacing: 1.8px !important;
}
.anp-filter-group{ margin-bottom: 24px !important; }

/* Поля */
.anp-field{
  padding: 12px 16px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  transition: border-color .2s, background .2s !important;
}
.anp-field:focus{
  border-color: rgba(230,57,70,.55) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}

/* Чипы жанров */
.anp-chip-list{ max-height: 220px !important; gap: 6px !important; }
.anp-chip-list .chip{
  padding: 7px 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 100px !important;
  font-size: 11.5px !important;
  transition: all .25s var(--ease) !important;
}
.anp-chip-list .chip:hover{
  background: rgba(230,57,70,.14) !important;
  border-color: rgba(230,57,70,.4) !important;
  transform: translateY(-1px);
}
.anp-chip-list .chip.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  border-color: rgba(230,57,70,.6) !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.4), inset 0 1px 0 rgba(255,255,255,.15);
}

/* Рейтинг-чипы */
.anp-rating-chip{
  padding: 9px 6px !important;
  border-radius: 10px !important;
  transition: all .22s !important;
}
.anp-rating-chip.active{
  background: linear-gradient(135deg, #F5C518, #ffb84d) !important;
  box-shadow: 0 8px 22px rgba(245,197,24,.4), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Сортировка */
.anp-sort-opt{
  padding: 12px 14px !important;
  border-radius: 11px !important;
  transition: all .22s !important;
}
.anp-sort-opt.active{
  background: linear-gradient(135deg, rgba(230,57,70,.2), rgba(230,57,70,.05)) !important;
  border-color: rgba(230,57,70,.55) !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ============ ТУЛБАР ============ */
.anp-cat-toolbar{
  padding: 16px 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}
.anp-results-count{
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  letter-spacing: -.2px;
}
.anp-results-count b{
  font-size: 20px !important;
  background: linear-gradient(135deg, #E63946, #ff8c42);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(230,57,70,.4));
}

.anp-view-toggle{
  padding: 5px !important;
  background: rgba(0,0,0,.4) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.anp-view-btn{
  padding: 9px 14px !important;
  border-radius: 9px !important;
  transition: all .25s var(--ease) !important;
}
.anp-view-btn.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ============ СЕТКА / КАРТОЧКИ ============ */
.anp-catalog-grid{
  gap: 20px !important;
  perspective: 1200px;
}
.anp-catalog-grid.list-view{ gap: 14px !important; }

.anp-cat-card{
  position: relative;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.22,.9,.32,1) !important;
  transform-style: preserve-3d;
  will-change: transform;
  animation: catg-card-in .55s var(--ease) both;
}
.anp-cat-card:hover{
  border-color: rgba(230,57,70,.5) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(230,57,70,.25) !important;
}
.anp-cat-card::before{
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 50%);
  opacity: 0; transition: opacity .3s;
  border-radius: inherit;
}
.anp-cat-card:hover::before{ opacity: 1; }
.anp-cat-card::after{
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: left .8s;
  pointer-events: none;
  z-index: 4;
}
.anp-cat-card:hover::after{ left: 100%; }

.anp-cat-poster{ border-radius: 0 !important; }
.anp-cat-rating{
  padding: 6px 12px !important;
  font-size: 12px !important;
  background: rgba(0,0,0,.7) !important;
  border: 1px solid rgba(245,197,24,.45) !important;
  color: #F5C518 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 20px rgba(245,197,24,.25);
  font-family: var(--font-display);
  letter-spacing: -.2px;
}
.anp-cat-badge{
  padding: 5px 11px !important;
  font-size: 9.5px !important;
  letter-spacing: 1.2px !important;
  border-radius: 100px !important;
}
.anp-cat-badge.ongoing{
  animation: catg-badge-live 2s infinite;
}
.anp-cat-badge.new{
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

.anp-cat-info{
  padding: 14px 15px 16px !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.2));
}
.anp-cat-title{
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.15px;
  transition: color .25s !important;
}
.anp-cat-card:hover .anp-cat-title{ color: #ffb0b0 !important; }
.anp-cat-meta{
  font-size: 11px !important;
  letter-spacing: .2px;
}
.anp-cat-meta-dot{ background: #E63946 !important; box-shadow: 0 0 6px rgba(230,57,70,.6); }

/* List view */
.anp-catalog-grid.list-view .anp-cat-card{
  padding: 14px 18px 14px 14px !important;
  border-radius: 16px !important;
}
.anp-catalog-grid.list-view .anp-cat-poster{
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.anp-catalog-grid.list-view .anp-cat-title{ font-size: 15.5px !important; }
.anp-catalog-grid.list-view .anp-cat-card::after{ display: none; }

/* Пагинация */
.anp-pagination{ margin-top: 52px !important; gap: 8px !important; }
.anp-pagination button{
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: all .25s var(--ease) !important;
}
.anp-pagination button:hover:not(:disabled){
  background: rgba(230,57,70,.2) !important;
  border-color: rgba(230,57,70,.5) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(230,57,70,.25);
}
.anp-pagination button.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 10px 26px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .anp-catalog-hero{ padding: 56px 0 42px !important; }
  .anp-filters{ border-radius: 18px !important; padding: 20px !important; }
  .anp-cat-toolbar{ padding: 12px 16px !important; }
  .anp-catalog-grid{ gap: 14px !important; }
}
@media (max-width: 500px){
  .anp-catalog-hero{ padding: 44px 0 34px !important; }
  .anp-cat-h1{ font-size: 28px !important; }
  .anp-cat-search input{ padding: 16px 52px 16px 48px !important; font-size: 14px !important; }
  .anp-catalog-grid{ gap: 10px !important; }
  .anp-cat-info{ padding: 11px 12px 13px !important; }
  .anp-pagination button{ min-width: 38px !important; height: 38px !important; }
}


/* ============================================================
   ANIME PAGE PREMIUM V3 — чистый override без псевдоэлементов
   ============================================================ */

@keyframes anp3-poster-glow{
  0%,100%{ box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(230,57,70,.35), 0 0 40px rgba(230,57,70,.25); }
  50%    { box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(230,57,70,.65), 0 0 70px rgba(230,57,70,.45); }
}
@keyframes anp3-live{
  0%{ box-shadow: 0 0 0 0 rgba(230,57,70,.85); }
  70%{ box-shadow: 0 0 0 12px rgba(230,57,70,0); }
  100%{ box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}

/* ============ HERO — простой многослойный gradient ============ */
.anp-hero{
  padding: 46px 0 40px !important;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(230,57,70,.16), transparent 60%),
    radial-gradient(800px 500px at 85% 70%, rgba(76,201,240,.10), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(168,85,247,.10), transparent 60%) !important;
}

/* Фон hero (постер) — оставляем как есть, только усиливаем затемнение */
.anp-hero-overlay{
  background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.82) 60%, rgba(10,10,12,.98) 100%) !important;
}

/* ============ ПОСТЕР ============ */
.a-detail-poster{
  border-radius: 22px !important;
  animation: anp3-poster-glow 5s ease-in-out infinite !important;
  transition: transform .4s var(--ease, cubic-bezier(.22,.9,.32,1)) !important;
}
.a-detail-poster:hover{
  transform: translateY(-6px) scale(1.02) !important;
}

/* ============ ЗАГОЛОВОК ============ */
.a-detail-title{
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4.5vw, 50px) !important;
  letter-spacing: -1.6px !important;
  line-height: 1.06 !important;
  filter: drop-shadow(0 4px 26px rgba(230,57,70,.3));
}
.a-title-orig{
  color: rgba(200,200,220,.6) !important;
  font-size: 13.5px !important;
}

/* ============ BADGES ============ */
.a-badges .tag{
  padding: 6px 14px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.tag-ongoing{
  background: linear-gradient(135deg, rgba(230,57,70,.25), rgba(255,107,53,.15)) !important;
  border-color: rgba(230,57,70,.55) !important;
  color: #ff8c94 !important;
  animation: anp3-live 2s infinite;
}
.tag-released{
  background: rgba(6,214,160,.12) !important;
  border-color: rgba(6,214,160,.4) !important;
  color: #06D6A0 !important;
}
.tag-anons{
  background: rgba(76,201,240,.12) !important;
  border-color: rgba(76,201,240,.4) !important;
  color: #4CC9F0 !important;
}

/* ============ РЕЙТИНГИ ============ */
.a-ratings{ gap: 12px !important; }
.a-rating-box{
  padding: 14px 20px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s !important;
  position: relative !important;
  overflow: hidden !important;
}
.a-rating-box::before{
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,57,70,.7), transparent);
}
.a-rating-box b{
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  letter-spacing: -.5px !important;
  color: #ffb84d !important;
  text-shadow: 0 0 22px rgba(245,197,24,.45), 0 2px 8px rgba(0,0,0,.5) !important;
}
.a-rating-box:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(230,57,70,.45) !important;
  box-shadow: 0 16px 40px rgba(230,57,70,.22) !important;
}

/* ============ ОПИСАНИЕ ============ */
.anp-desc-text{
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #c8c8d8 !important;
}
.anp-desc-toggle{
  color: #E63946 !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
}

/* ============ ЖАНРЫ ============ */
.a-genres .tag{
  background: rgba(230,57,70,.08) !important;
  border: 1px solid rgba(230,57,70,.25) !important;
  color: #ff8c94 !important;
  padding: 7px 15px !important;
  font-weight: 700 !important;
  transition: transform .2s, background .2s, border-color .2s !important;
}
.a-genres .tag:hover{
  background: rgba(230,57,70,.25) !important;
  border-color: rgba(230,57,70,.6) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.3) !important;
}

/* ============ КНОПКИ СТАТУСА ============ */
.status-btns{ gap: 10px !important; }
.status-btn{
  padding: 13px 22px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .25s, box-shadow .25s !important;
}
.status-btn:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(230,57,70,.5) !important;
  box-shadow: 0 14px 40px rgba(230,57,70,.22) !important;
}
.status-btn.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  border-color: rgba(230,57,70,.7) !important;
  box-shadow: 0 14px 40px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ============ СЕЗОНЫ ============ */
.anp-seasons-head h3{
  font-family: var(--font-display) !important;
  letter-spacing: -.3px;
}
.anp-season-btn{
  padding: 14px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .25s, box-shadow .25s !important;
}
.anp-season-btn:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(230,57,70,.45) !important;
  box-shadow: 0 14px 36px rgba(230,57,70,.2) !important;
}
.anp-season-current{
  background: linear-gradient(135deg, rgba(230,57,70,.2), rgba(255,107,53,.1)) !important;
  border-color: rgba(230,57,70,.6) !important;
  box-shadow: 0 14px 40px rgba(230,57,70,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.anp-season-label{ font-size: 10.5px !important; letter-spacing: 1.4px !important; }
.anp-season-title{ font-weight: 800 !important; }

/* ============ PLAYER ============ */
#anp-wrap{
  margin-top: 26px;
  border-radius: 24px !important;
  padding: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.anp-top-bar{
  padding: 16px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.anp-section-title{ font-family: var(--font-display) !important; }

#anp-video-container{
  border-radius: 20px !important;
  overflow: visible !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.7),
    0 0 0 1px rgba(230,57,70,.2),
    0 0 60px rgba(230,57,70,.15) !important;
}

/* Прогресс-бар */
#anp-progress{
  background: linear-gradient(90deg, #E63946, #ff6b35) !important;
  box-shadow: 0 0 12px rgba(230,57,70,.85);
}
#anp-thumb{
  background: #fff !important;
  box-shadow: 0 0 12px rgba(230,57,70,.9), 0 0 0 3px rgba(230,57,70,.5) !important;
}

/* Кнопки управления */
.anp-ctrl:hover, .anp-ctrl-btn:hover, .anp-ctrl-icon:hover{
  color: #ff6b35 !important;
  transform: scale(1.12) !important;
  transition: transform .2s, color .2s;
}

/* ============ САЙДБАР ============ */
.anp-side{
  padding: 20px 18px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Источники */
.player-tab{
  padding: 9px 14px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  transition: transform .2s, border-color .2s, background .2s !important;
}
.player-tab:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(230,57,70,.45) !important;
}
.player-tab.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  border-color: rgba(230,57,70,.7) !important;
  box-shadow: 0 10px 26px rgba(230,57,70,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* Озвучки */
.voice-btn{
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s !important;
}
.voice-btn:hover{
  transform: translateX(3px) !important;
  border-color: rgba(230,57,70,.45) !important;
  background: linear-gradient(180deg, rgba(230,57,70,.08), rgba(230,57,70,.02)) !important;
}
.voice-btn.active{
  background: linear-gradient(135deg, rgba(230,57,70,.22), rgba(255,107,53,.08)) !important;
  border-color: rgba(230,57,70,.6) !important;
  box-shadow: 0 12px 30px rgba(230,57,70,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.voice-name{ font-weight: 800 !important; }
.voice-quality{
  background: linear-gradient(135deg, rgba(245,197,24,.22), rgba(245,197,24,.08)) !important;
  color: #F5C518 !important;
  border: 1px solid rgba(245,197,24,.4) !important;
  font-weight: 900 !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
}

/* Эпизоды (dropdown) */
#anp-ep-toggle{
  padding: 14px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: transform .2s, border-color .2s, box-shadow .2s !important;
}
#anp-ep-toggle:hover{
  transform: translateY(-2px);
  border-color: rgba(230,57,70,.55) !important;
  box-shadow: 0 14px 36px rgba(230,57,70,.25);
}
#anp-ep-badge{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 4px 16px rgba(230,57,70,.5);
}
.anp-ep-item{
  padding: 11px 6px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  font-weight: 800 !important;
  transition: transform .2s, border-color .2s, background .2s !important;
}
.anp-ep-item:hover{
  background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(230,57,70,.06)) !important;
  border-color: rgba(230,57,70,.6) !important;
  transform: translateY(-3px) scale(1.04) !important;
}
.anp-ep-item.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Качества */
#anp-qualities button{
  border-radius: 100px !important;
  padding: 9px 16px !important;
  font-weight: 800 !important;
  transition: transform .2s, border-color .2s !important;
}
#anp-qualities button:hover{
  transform: translateY(-2px);
  border-color: rgba(245,197,24,.5) !important;
}
#anp-qualities button.active{
  background: linear-gradient(135deg, #F5C518, #ffb84d) !important;
  border-color: rgba(245,197,24,.7) !important;
  color: #1a1200 !important;
  box-shadow: 0 12px 30px rgba(245,197,24,.4) !important;
}

/* ============ АДАПТИВ ============ */
@media (max-width: 900px){
  .anp-hero{ padding: 20px 0 22px !important; }
  #anp-wrap{ padding: 14px !important; border-radius: 18px !important; }
  .anp-top-bar{ padding: 12px 14px !important; }
  .a-detail-title{ font-size: 28px !important; }
  .a-rating-box{ padding: 11px 14px !important; }
  .a-rating-box b{ font-size: 20px !important; }
  .status-btn{ padding: 11px 16px !important; font-size: 12.5px !important; }
}
@media (max-width: 500px){
  #anp-wrap{ padding: 10px !important; }
  .anp-side{ padding: 14px !important; border-radius: 16px !important; }
  .a-rating-box{ padding: 9px 12px !important; }
  .a-rating-box b{ font-size: 18px !important; }
  .status-btn{ padding: 10px 14px !important; font-size: 12px !important; }
}


/* ============================================================
   ONGOING PREMIUM V2 — override
   ============================================================ */

@keyframes ong2-live{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.85)} 70%{box-shadow:0 0 0 14px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} }
@keyframes ong2-dot-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }
@keyframes ong2-hero-drift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,-2%,0) scale(1.1)} }
@keyframes ong2-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes ong2-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ong2-card-in{ from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)} }

/* ============ HERO ============ */
.ong-hero{
  margin: 24px 0 42px !important;
  padding: 46px 40px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(230,57,70,.25), transparent 60%),
    radial-gradient(800px 500px at 85% 80%, rgba(255,184,77,.10), transparent 60%),
    linear-gradient(180deg, #12121a 0%, #0a0a12 100%) !important;
  border: 1px solid rgba(230,57,70,.25) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(230,57,70,.1), inset 0 1px 0 rgba(255,255,255,.05) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.ong-hero::before{
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, #E63946, transparent);
  opacity: .7;
}
.ong-hero::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 30%, #fff, transparent),
    radial-gradient(1px 1px at 35% 75%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 65% 25%, #fff, transparent),
    radial-gradient(1px 1px at 85% 55%, #fff, transparent),
    radial-gradient(1px 1px at 45% 90%, #fff, transparent);
  background-size: 400px 400px;
  opacity: .35;
  animation: ong2-star 100s linear infinite;
}

.ong-hero-inner{ position: relative; z-index: 1; }

.ong-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(230,57,70,.12);
  border: 1px solid rgba(230,57,70,.35);
  color: #ffb84d;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  margin-bottom: 18px;
}
.ong-eyebrow::before{
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 12px #E63946;
  animation: ong2-dot-pulse 1.8s infinite;
}

.ong-hero h1{
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  letter-spacing: -1.8px !important;
  line-height: 1.02 !important;
  margin-bottom: 14px !important;
}
.ong-hero h1 span{
  background: linear-gradient(110deg, #E63946 0%, #ff8c42 50%, #ffb84d 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.4));
}
.ong-hero p{
  font-size: 15px !important;
  color: rgba(200,200,220,.75) !important;
}

.ong-hero-stats{ gap: 14px !important; }
.ong-hero-stats > div{
  padding: 18px 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  min-width: 110px !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s;
}
.ong-hero-stats > div::before{
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .5;
}
.ong-hero-stats > div:nth-child(1){ color: #E63946; }
.ong-hero-stats > div:nth-child(2){ color: #F5C518; }
.ong-hero-stats > div:nth-child(3){ color: #4CC9F0; }
.ong-hero-stats > div:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.ong-hero-stats b{
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  letter-spacing: -.8px;
  background: linear-gradient(180deg, #fff, currentColor);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 12px currentColor);
}
.ong-hero-stats span{
  font-size: 10.5px !important;
  letter-spacing: 1.4px !important;
  color: var(--text-faint) !important;
}

/* ============ SECTIONS ============ */
.ong-section{ margin-bottom: 46px !important; }
.ong-section-head h2{
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  letter-spacing: -.6px;
}
.ong-link{
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(230,57,70,.1);
  border: 1px solid rgba(230,57,70,.3);
  color: #ffb84d !important;
  font-weight: 800 !important;
  text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s;
}
.ong-link:hover{
  background: rgba(230,57,70,.22);
  border-color: rgba(230,57,70,.6);
  transform: translateY(-2px);
  opacity: 1 !important;
}

/* ============ TOP CARDS ============ */
.ong-row{ gap: 18px !important; }
.ong-card{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s !important;
  animation: ong2-card-in .5s ease both;
}
.ong-card::before{
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: left .8s;
  pointer-events: none; z-index: 3;
}
.ong-card:hover::before{ left: 100%; }
.ong-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(230,57,70,.55) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(230,57,70,.3) !important;
}
.ong-card-poster img{
  transition: transform .6s cubic-bezier(.4,0,.2,1) !important;
}
.ong-card:hover .ong-card-poster img{ transform: scale(1.08) !important; }

.ong-card-rating{
  padding: 6px 11px !important;
  font-size: 11.5px !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(245,197,24,.5) !important;
  color: #F5C518 !important;
  font-family: var(--font-display);
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 20px rgba(245,197,24,.22);
  border-radius: 100px !important;
}
.ong-card-day{
  padding: 5px 11px !important;
  border-radius: 100px !important;
  font-size: 9.5px !important;
  letter-spacing: 1.4px !important;
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 6px 20px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
  animation: ong2-live 2.2s infinite;
}
.ong-card-title{
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px;
  min-height: 36px !important;
}

.ong-progress-bar{
  height: 5px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 100px !important;
}
.ong-progress-fill{
  background: linear-gradient(90deg, #E63946, #ff6b35, #ffb84d) !important;
  box-shadow: 0 0 10px rgba(230,57,70,.6) !important;
  border-radius: 100px !important;
}
.ong-progress-text{
  font-size: 11px !important;
  color: var(--text-faint) !important;
}

/* ============ TABS (дни недели) ============ */
.ong-tabs{
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  margin-bottom: 26px !important;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.ong-tabs::-webkit-scrollbar{ display: none; }
.ong-tab{
  flex: 1 !important;
  min-width: 100px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 11px !important;
  color: var(--text-dim) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: color .2s, background .25s, box-shadow .25s, transform .2s !important;
  letter-spacing: .2px;
}
.ong-tab:hover{
  color: #fff !important;
  background: rgba(255,255,255,.04) !important;
}
.ong-tab.active{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(230,57,70,.45), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.ong-tab-count{
  font-style: normal !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.1) !important;
  color: var(--text-faint) !important;
  font-weight: 900 !important;
  transition: background .25s, color .25s;
}
.ong-tab.active .ong-tab-count{
  background: rgba(0,0,0,.35) !important;
  color: #fff !important;
}

/* ============ DAY PANELS ============ */
.ong-day{ display: none; }
.ong-day.active{ display: block; animation: ong2-card-in .45s ease; }

.ong-grid{ gap: 14px !important; }

/* Карточка тайтла в расписании */
.ong-day-card{
  position: relative;
  padding: 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s, background .3s !important;
  overflow: hidden;
  animation: ong2-card-in .45s ease both;
}
.ong-day-card::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #E63946, #ff6b35);
  transform: scaleY(0); transform-origin: top;
  transition: transform .35s var(--ease, cubic-bezier(.22,.9,.32,1));
}
.ong-day-card:hover{
  transform: translateX(4px) !important;
  border-color: rgba(230,57,70,.5) !important;
  background: linear-gradient(180deg, rgba(230,57,70,.08), rgba(230,57,70,.02)) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(230,57,70,.2) !important;
}
.ong-day-card:hover::before{ transform: scaleY(1); }

.ong-day-time{
  flex-shrink: 0;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.5px;
  min-width: 58px !important;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(230,57,70,.22), rgba(230,57,70,.06));
  border: 1px solid rgba(230,57,70,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.ong-day-poster{
  width: 56px !important;
  height: 80px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0;
  background: #000;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.ong-day-poster img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.ong-day-card:hover .ong-day-poster img{ transform: scale(1.08); }

.ong-day-info{ flex: 1; min-width: 0; }
.ong-day-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
  letter-spacing: -.2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}
.ong-day-card:hover .ong-day-title{ color: #ffb0b0 !important; }
.ong-day-ep{
  font-size: 11.5px !important;
  color: var(--text-faint) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}

.ong-empty{
  padding: 60px 20px !important;
  text-align: center !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
  border: 1px dashed rgba(255,255,255,.1) !important;
  color: var(--text-faint) !important;
  font-size: 14px !important;
  font-weight: 700;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .ong-hero{ padding: 32px 22px !important; border-radius: 20px !important; }
  .ong-hero-inner{ gap: 20px !important; }
  .ong-hero-stats{ gap: 10px !important; }
  .ong-hero-stats > div{ padding: 14px 18px !important; min-width: 88px !important; }
  .ong-hero-stats b{ font-size: 26px !important; }
  .ong-row{ gap: 14px !important; }
  .ong-day-time{ font-size: 15px !important; min-width: 50px !important; padding: 6px 8px; }
  .ong-day-poster{ width: 48px !important; height: 68px !important; }
}
@media (max-width: 640px){
  .ong-hero{ padding: 26px 18px !important; margin: 16px 0 30px !important; }
  .ong-hero h1{ font-size: 30px !important; letter-spacing: -1px !important; }
  .ong-hero p{ font-size: 13.5px !important; }
  .ong-hero-stats{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
    gap: 8px !important;
  }
  .ong-hero-stats > div{ padding: 12px 8px !important; min-width: 0 !important; }
  .ong-hero-stats b{ font-size: 22px !important; }
  .ong-hero-stats span{ font-size: 9px !important; letter-spacing: 1px !important; }
  .ong-tabs{ gap: 4px !important; padding: 4px !important; }
  .ong-tab{ min-width: 78px !important; padding: 10px 10px !important; font-size: 12px !important; gap: 6px !important; }
  .ong-tab-count{ font-size: 10px !important; padding: 1px 6px !important; }
  .ong-day-card{ padding: 10px !important; gap: 10px !important; }
  .ong-day-time{ min-width: 44px !important; font-size: 13.5px !important; padding: 5px 6px; }
  .ong-day-poster{ width: 42px !important; height: 60px !important; }
  .ong-day-title{ font-size: 12.5px !important; }
  .ong-day-ep{ font-size: 10.5px !important; }
}


/* ============================================================
   HOME PREMIUM V2 — override
   ============================================================ */

@keyframes hm2-live{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.85)} 70%{box-shadow:0 0 0 14px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} }
@keyframes hm2-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }
@keyframes hm2-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes hm2-card-in{ from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes hm2-progress{ from{width:0} to{width:100%} }
@keyframes hm2-slide-glow{ 0%,100%{box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(230,57,70,.3), 0 0 60px rgba(230,57,70,.2);} 50%{box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(230,57,70,.6), 0 0 90px rgba(230,57,70,.45);} }

/* ============ HERO ============ */
.anp-home-hero{
  position: relative !important;
  padding: 72px 0 84px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}
.anp-hero-bg-blur img{
  filter: blur(90px) brightness(.35) saturate(1.6) !important;
  transform: scale(1.25) !important;
}
.anp-hero-gradient{
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(230,57,70,.22), transparent 60%),
    radial-gradient(800px 600px at 85% 75%, rgba(76,201,240,.12), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(168,85,247,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,.78) 0%, rgba(10,10,12,.97) 70%, #0a0a0c 100%) !important;
}

.anp-hero-grid{ gap: 56px !important; }

/* Eyebrow */
.anp-hero-eyebrow{
  padding: 9px 18px !important;
  background: rgba(230,57,70,.12) !important;
  border-color: rgba(230,57,70,.35) !important;
  color: #ffb84d !important;
  border-radius: 100px !important;
  font-size: 10.5px !important;
  letter-spacing: 2px !important;
  box-shadow: 0 0 30px rgba(230,57,70,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.anp-dot-pulse{
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 14px #E63946, 0 0 4px #fff inset !important;
  animation: hm2-pulse 1.8s infinite !important;
}

/* Заголовок */
.anp-hero-h1{
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5.5vw, 62px) !important;
  letter-spacing: -2px !important;
  line-height: 1.02 !important;
  margin-bottom: 20px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,.6) !important;
}
.anp-hero-h1 em{
  background: linear-gradient(110deg, #E63946 0%, #ff8c42 50%, #ffb84d 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.45));
}
.anp-hero-sub{
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(200,200,220,.78) !important;
  margin-bottom: 34px !important;
}

/* Кнопки */
.anp-btn-primary{
  padding: 17px 34px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 14px 40px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), box-shadow .3s !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.anp-btn-primary:hover{
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 22px 56px rgba(230,57,70,.65), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.anp-btn-ghost{
  padding: 17px 34px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), background .3s, border-color .3s, box-shadow .3s !important;
  font-weight: 800 !important;
}
.anp-btn-ghost:hover{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(230,57,70,.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4) !important;
}

/* Stats плашка */
.anp-hero-stats{
  padding: 22px 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(16px);
}
.anp-stat-item b{
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  letter-spacing: -.8px;
  background: linear-gradient(180deg, #fff, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 12px rgba(245,197,24,.3));
}
.anp-stat-item span{
  color: var(--text-faint) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
}
.anp-stat-divider{
  background: linear-gradient(180deg, transparent, rgba(230,57,70,.5), transparent) !important;
  width: 1px !important;
  height: 40px !important;
}

/* ============ HERO SLIDESHOW ============ */
.anp-hero-slideshow-wrap{ position: relative !important; }

.hero-slideshow{
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  animation: hm2-slide-glow 6s ease-in-out infinite;
}
.hero-frame{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transform: scale(1.04) !important;
  transition: opacity .8s var(--ease, cubic-bezier(.22,.9,.32,1)), transform 1.2s var(--ease, cubic-bezier(.22,.9,.32,1)) !important;
  text-decoration: none !important;
  display: block !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.hero-frame.active{
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2 !important;
}
.hero-frame img,
.hero-frame video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.hero-grain{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 50% 80%, transparent 30%, rgba(0,0,0,.55) 100%) !important;
  z-index: 3 !important;
}
.hero-frame-info{
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 22px 24px !important;
  z-index: 4 !important;
  background: linear-gradient(180deg, transparent, rgba(10,10,12,.85)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 14px !important;
}
.hero-frame-info-left{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.hero-frame-badge{
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  background: rgba(230,57,70,.15) !important;
  border: 1px solid rgba(230,57,70,.4) !important;
  color: #ff8c94 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.6px !important;
  align-self: flex-start !important;
  text-transform: uppercase;
}
.hero-frame-title{
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.6px !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.8) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-frame-genres{
  font-size: 12px !important;
  color: rgba(200,200,220,.7) !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}
.hero-frame-rating{
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(245,197,24,.55) !important;
  color: #F5C518 !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 24px rgba(245,197,24,.25) !important;
  backdrop-filter: blur(12px) !important;
}

/* Прогресс-бар слайдшоу */
.hero-progress-wrap{
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 3px !important;
  background: rgba(255,255,255,.1) !important;
  z-index: 6 !important;
}
.hero-progress-bar{
  height: 100% !important;
  background: linear-gradient(90deg, #E63946, #ff6b35, #ffb84d) !important;
  box-shadow: 0 0 12px rgba(230,57,70,.85) !important;
  width: 0 !important;
}
.hero-frame.active .hero-progress-bar{
  animation: hm2-progress 6s linear forwards !important;
}

/* Dots */
.hero-dots{
  position: absolute !important;
  bottom: 18px !important;
  right: 22px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 7 !important;
}
.hero-dot{
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  cursor: pointer !important;
  transition: all .25s var(--ease, cubic-bezier(.22,.9,.32,1)) !important;
  border: 0 !important;
  padding: 0 !important;
}
.hero-dot:hover{ transform: scale(1.3); background: rgba(255,255,255,.65) !important; }
.hero-dot.active{
  width: 26px !important;
  border-radius: 100px !important;
  background: linear-gradient(90deg, #E63946, #ff6b35) !important;
  box-shadow: 0 0 12px rgba(230,57,70,.8) !important;
}

/* ============ СЕКЦИИ ============ */
.anp-section{ padding: 62px 0 !important; }
.anp-section-alt{
  background: linear-gradient(180deg, transparent, rgba(230,57,70,.025), transparent) !important;
}
.anp-section-head{ margin-bottom: 30px !important; }
.anp-section-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: rgba(230,57,70,.1) !important;
  border: 1px solid rgba(230,57,70,.3) !important;
  color: #ffb84d !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
}
.anp-section-title{
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3.5vw, 34px) !important;
  letter-spacing: -1px !important;
}
.anp-section-link{
  padding: 9px 18px !important;
  border-radius: 100px !important;
  background: rgba(230,57,70,.1) !important;
  border: 1px solid rgba(230,57,70,.3) !important;
  color: #ffb84d !important;
  font-weight: 800 !important;
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), background .25s, border-color .25s, box-shadow .25s !important;
}
.anp-section-link:hover{
  background: rgba(230,57,70,.22) !important;
  border-color: rgba(230,57,70,.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(230,57,70,.3) !important;
}

/* ============ ANIME CARD (trending/latest) ============ */
.anp-card-row{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 18px !important;
  perspective: 1200px;
}
.anp-anime-card{
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform .35s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .35s, box-shadow .35s !important;
  transform-style: preserve-3d;
  will-change: transform;
  animation: hm2-card-in .55s var(--ease, cubic-bezier(.22,.9,.32,1)) both;
}
.anp-anime-card::before{
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  pointer-events: none !important; z-index: 5 !important;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 55%) !important;
  opacity: 0 !important; transition: opacity .35s !important;
  border-radius: inherit !important;
}
.anp-anime-card:hover::before{ opacity: 1 !important; }
.anp-anime-card::after{
  content: '' !important;
  position: absolute !important; top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  transition: left .8s !important;
  pointer-events: none !important; z-index: 4 !important;
}
.anp-anime-card:hover::after{ left: 100% !important; }
.anp-anime-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(230,57,70,.55) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(230,57,70,.25) !important;
}
.anp-card-poster img{
  transition: transform .6s cubic-bezier(.4,0,.2,1) !important;
}
.anp-anime-card:hover .anp-card-poster img{ transform: scale(1.08) !important; }

.anp-card-rating{
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  border-radius: 100px !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(245,197,24,.5) !important;
  color: #F5C518 !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 20px rgba(245,197,24,.22) !important;
  backdrop-filter: blur(10px) !important;
}
.anp-card-badge{
  padding: 5px 11px !important;
  border-radius: 100px !important;
  font-size: 9.5px !important;
  letter-spacing: 1.4px !important;
  font-weight: 900 !important;
}
.anp-badge-ongoing{
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  box-shadow: 0 6px 20px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
  animation: hm2-live 2.2s infinite !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.anp-badge-ongoing .anp-dot-pulse{
  width: 5px !important; height: 5px !important;
  box-shadow: 0 0 8px #fff !important;
}
.anp-badge-new{
  background: linear-gradient(135deg, #06D6A0, #04a97d) !important;
  box-shadow: 0 6px 20px rgba(6,214,160,.5), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.anp-card-title{
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
  transition: color .25s !important;
}
.anp-anime-card:hover .anp-card-title{ color: #ffb0b0 !important; }
.anp-card-meta{
  font-size: 11px !important;
  color: var(--text-faint) !important;
}
.anp-meta-dot{
  background: #E63946 !important;
  box-shadow: 0 0 6px rgba(230,57,70,.6) !important;
}
.anp-card-overlay{
  background: linear-gradient(to top, rgba(10,10,12,.85) 0%, transparent 50%) !important;
}

/* ============ ONGOING CARD ============ */
.anp-ongoing-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}
.anp-ongoing-card{
  position: relative !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden !important;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, background .3s, box-shadow .3s !important;
  animation: hm2-card-in .45s ease both;
}
.anp-ongoing-card::before{
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, #E63946, #ff6b35) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform .35s var(--ease, cubic-bezier(.22,.9,.32,1)) !important;
}
.anp-ongoing-card:hover{
  transform: translateX(4px) !important;
  border-color: rgba(230,57,70,.5) !important;
  background: linear-gradient(180deg, rgba(230,57,70,.08), rgba(230,57,70,.02)) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(230,57,70,.2) !important;
}
.anp-ongoing-card:hover::before{ transform: scaleY(1) !important; }

.anp-ongoing-poster{
  width: 60px !important;
  height: 86px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #000 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.5) !important;
}
.anp-ongoing-poster img{
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s !important;
}
.anp-ongoing-card:hover .anp-ongoing-poster img{ transform: scale(1.08) !important; }

.anp-ongoing-info{ flex: 1 !important; min-width: 0 !important; }
.anp-ongoing-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  letter-spacing: -.2px !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color .25s !important;
}
.anp-ongoing-card:hover .anp-ongoing-title{ color: #ffb0b0 !important; }
.anp-ongoing-meta{
  display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
  font-size: 11.5px !important;
}
.anp-ongoing-ep{
  padding: 3px 9px !important;
  border-radius: 100px !important;
  background: rgba(230,57,70,.15) !important;
  border: 1px solid rgba(230,57,70,.35) !important;
  color: #ff8c94 !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
}
.anp-ongoing-day{
  padding: 3px 9px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--text-faint) !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .anp-hero-grid{ grid-template-columns: 1fr !important; gap: 40px !important; }
  .anp-hero-slideshow-wrap{ justify-content: center !important; }
  .hero-slideshow{ max-width: 100% !important; }
}
@media (max-width: 900px){
  .anp-home-hero{ padding: 50px 0 60px !important; }
  .anp-hero-h1{ font-size: 42px !important; letter-spacing: -1.4px !important; }
  .anp-hero-sub{ font-size: 15px !important; }
  .anp-hero-stats{ padding: 18px 22px !important; gap: 18px !important; }
  .anp-stat-item b{ font-size: 22px !important; }
  .anp-card-row{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; }
  .anp-ongoing-grid{ grid-template-columns: 1fr !important; }
  .hero-frame-title{ font-size: 18px !important; }
}
@media (max-width: 640px){
  .anp-home-hero{ padding: 36px 0 44px !important; }
  .anp-hero-h1{ font-size: 30px !important; letter-spacing: -1px !important; }
  .anp-hero-sub{ font-size: 13.5px !important; margin-bottom: 22px !important; }
  .anp-hero-cta{ gap: 10px !important; margin-bottom: 26px !important; }
  .anp-btn-primary, .anp-btn-ghost{ padding: 14px 22px !important; font-size: 13.5px !important; }
  .anp-hero-stats{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 14px 12px !important;
    max-width: 100% !important;
  }
  .anp-stat-divider{ display: none !important; }
  .anp-stat-item b{ font-size: 20px !important; }
  .anp-stat-item span{ font-size: 9.5px !important; letter-spacing: 1px !important; }
  .anp-section{ padding: 40px 0 !important; }
  .anp-section-head{ margin-bottom: 20px !important; }
  .anp-section-title{ font-size: 22px !important; }
  .anp-card-row{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .anp-card-title{ font-size: 12px !important; }
  .anp-card-meta{ font-size: 10px !important; }
  .anp-ongoing-card{ padding: 12px !important; gap: 12px !important; }
  .anp-ongoing-poster{ width: 50px !important; height: 72px !important; }
  .anp-ongoing-title{ font-size: 12.5px !important; }
  .hero-frame-info{ padding: 16px 18px !important; }
  .hero-frame-title{ font-size: 16px !important; }
  .hero-frame-rating{ padding: 6px 10px !important; font-size: 13px !important; }
  .hero-dots{ bottom: 12px !important; right: 14px !important; }
}


/* ============================================================
   AUTH PREMIUM V2 (login / register / reset)
   ============================================================ */

@keyframes afm-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes afm-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes afm-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes afm-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes afm-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }
@keyframes afm-orbit{ to{transform:rotate(360deg)} }
@keyframes afm-shine{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.afm{
  position: relative;
  min-height: calc(100vh - 80px);
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.afm-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .35;
}
.afm-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.afm-blob-1{ background: radial-gradient(circle, #E63946, transparent 60%); top: -10%; left: -15%; animation: afm-drift-1 26s ease-in-out infinite; }
.afm-blob-2{ background: radial-gradient(circle, #F5C518, transparent 60%); top: 40%; right: -20%; animation: afm-drift-2 30s ease-in-out infinite; }
.afm-blob-3{ background: radial-gradient(circle, #a855f7, transparent 60%); bottom: -20%; left: 30%; animation: afm-drift-3 34s ease-in-out infinite; }

.afm-shell{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.92));
  box-shadow:
    0 50px 120px rgba(0,0,0,.7),
    0 0 0 1px rgba(230,57,70,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  isolation: isolate;
}

/* ============ ASIDE (декор) ============ */
.afm-aside{
  position: relative;
  padding: 44px 40px;
  overflow: hidden;
  background:
    radial-gradient(500px 400px at 30% 10%, rgba(230,57,70,.22), transparent 65%),
    radial-gradient(400px 400px at 90% 90%, rgba(168,85,247,.14), transparent 65%),
    linear-gradient(180deg, #14141a 0%, #0a0a12 100%);
  isolation: isolate;
}
.afm-aside::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 25%, #fff, transparent),
    radial-gradient(1px 1px at 35% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 65% 35%, #fff, transparent),
    radial-gradient(1px 1px at 85% 55%, #fff, transparent),
    radial-gradient(1px 1px at 45% 90%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent);
  background-size: 400px 400px;
  opacity: .5;
  animation: afm-star 90s linear infinite;
  z-index: 0;
}
.afm-aside-inner{
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column;
  height: 100%;
  gap: 26px;
}

.afm-logo{
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  align-self: flex-start;
}
.afm-logo-mark{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  box-shadow: 0 10px 30px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.afm-logo-text{
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px; letter-spacing: -.6px; color: #fff;
}
.afm-logo-text span{
  background: linear-gradient(135deg, #E63946, #ff8c42);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.afm-aside-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.05;
  letter-spacing: -1.4px;
  font-weight: 900;
  color: #fff;
  margin: 6px 0 0;
}
.afm-aside-title em{
  font-style: normal;
  background: linear-gradient(110deg, #E63946 0%, #ff8c42 50%, #ffb84d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.35));
}
.afm-aside-text{
  font-size: 14.5px; line-height: 1.7;
  color: rgba(200,200,220,.72);
  margin: 0;
  max-width: 380px;
}

.afm-aside-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.afm-aside-stats > div{
  padding: 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.09);
  text-align: center;
  backdrop-filter: blur(10px);
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .25s;
}
.afm-aside-stats > div:hover{
  transform: translateY(-3px);
  border-color: rgba(230,57,70,.4);
}
.afm-aside-stats b{
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  background: linear-gradient(180deg, #fff, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afm-aside-stats span{
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
}

.afm-aside-quote{
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid #E63946;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  font-style: italic;
  max-width: 400px;
}
.afm-aside-author{
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #ffb84d;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .5px;
}

.afm-aside-orbs{
  position: absolute;
  top: 50%; right: -80px;
  width: 220px; height: 220px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.afm-aside-orbs span{
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(230,57,70,.25);
}
.afm-aside-orbs span:nth-child(1){ inset: 0; animation: afm-orbit 22s linear infinite; }
.afm-aside-orbs span:nth-child(1)::before{
  content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 16px #E63946;
}
.afm-aside-orbs span:nth-child(2){ inset: 30px; border-color: rgba(245,197,24,.3); animation: afm-orbit 30s linear infinite reverse; }
.afm-aside-orbs span:nth-child(2)::before{
  content: ''; position: absolute; bottom: -3px; right: 20%;
  width: 6px; height: 6px; border-radius: 50%;
  background: #F5C518; box-shadow: 0 0 12px #F5C518;
}
.afm-aside-orbs span:nth-child(3){ inset: 60px; border-color: rgba(76,201,240,.3); animation: afm-orbit 26s linear infinite; }

/* ============ MAIN (form) ============ */
.afm-main{
  padding: 44px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.afm-form-wrap{
  width: 100%;
  max-width: 400px;
}

.afm-mobile-logo{
  display: none;
  margin-bottom: 22px;
  justify-content: center;
}

.afm-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(230,57,70,.12);
  border: 1px solid rgba(230,57,70,.35);
  color: #ffb84d;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.afm-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 12px #E63946;
  animation: afm-pulse 1.8s infinite;
}
.afm-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 10px;
}
.afm-title em{
  font-style: normal;
  background: linear-gradient(110deg, #E63946, #ff8c42, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afm-sub{
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-faint);
  margin: 0 0 26px;
}

/* Форма */
.afm-form{ display: flex; flex-direction: column; gap: 16px; }

.afm-field{ display: flex; flex-direction: column; gap: 7px; }
.afm-label{
  font-size: 11px; letter-spacing: 1.4px;
  color: var(--text-faint);
  font-weight: 800;
  text-transform: uppercase;
}

.afm-input-wrap{
  position: relative;
  display: flex; align-items: center;
}
.afm-input-ico{
  position: absolute;
  left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-faint);
  pointer-events: none;
  transition: color .2s;
}
.afm-input-ico svg{ width: 100%; height: 100%; }

.afm-input-wrap input{
  width: 100%;
  padding: 15px 48px 15px 46px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.afm-input-wrap input::placeholder{
  color: rgba(255,255,255,.32);
  font-weight: 500;
}
.afm-input-wrap input:focus{
  border-color: rgba(230,57,70,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(230,57,70,.14);
}
.afm-input-wrap:focus-within .afm-input-ico{
  color: #E63946;
  filter: drop-shadow(0 0 8px rgba(230,57,70,.6));
}

.afm-pass-toggle{
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.afm-pass-toggle:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
}
.afm-pass-toggle svg{ width: 18px; height: 18px; }

/* Row: remember + forgot */
.afm-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 6px;
  flex-wrap: wrap;
}
.afm-check{
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  user-select: none;
}
.afm-check-block{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.afm-check input{
  position: absolute;
  opacity: 0; pointer-events: none;
}
.afm-check-box{
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
  position: relative;
  transition: all .2s;
}
.afm-check input:checked + .afm-check-box{
  background: linear-gradient(135deg, #E63946, #ff6b35);
  border-color: rgba(230,57,70,.7);
  box-shadow: 0 4px 14px rgba(230,57,70,.5);
}
.afm-check input:checked + .afm-check-box::after{
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.afm-check-text a{
  color: #ffb84d;
  font-weight: 700;
  text-decoration: none;
}
.afm-check-text a:hover{ text-decoration: underline; }

.afm-link{
  color: #ffb84d;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.afm-link:hover{ opacity: .8; text-decoration: underline; }

/* Кнопка отправки */
.afm-btn{
  margin-top: 6px;
  padding: 16px 24px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 16px 40px rgba(230,57,70,.45),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), box-shadow .25s;
}
.afm-btn::before{
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .7s;
}
.afm-btn:hover::before{ left: 100%; }
.afm-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(230,57,70,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.afm-btn:active{ transform: translateY(0); }
.afm-btn svg{ transition: transform .2s; }
.afm-btn:hover svg{ transform: translateX(3px); }

/* Footer */
.afm-foot{
  text-align: center;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.afm-foot a{
  color: #ffb84d;
  font-weight: 800;
  text-decoration: none;
  transition: opacity .2s;
}
.afm-foot a:hover{ opacity: .8; }

.afm-terms{
  text-align: center;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-faint);
}
.afm-terms a{ color: var(--text-dim); text-decoration: underline; }
.afm-terms a:hover{ color: #ffb84d; }

/* Token-блок (reset password) */
.afm-token{
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(6,214,160,.1), rgba(6,214,160,.02));
  border: 1px solid rgba(6,214,160,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.afm-token-label{
  font-size: 11px; letter-spacing: 1.4px;
  color: #06D6A0;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.afm-token-value{
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: #fff;
  word-break: break-all;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  user-select: all;
}
.afm-token-hint{
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(200,200,220,.55);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .afm{ padding: 20px 14px; min-height: auto; }
  .afm-shell{ grid-template-columns: 1fr; max-width: 460px; border-radius: 22px; }
  .afm-aside{ display: none; }
  .afm-mobile-logo{ display: flex; }
  .afm-main{ padding: 36px 26px; }
}
@media (max-width: 500px){
  .afm-main{ padding: 26px 18px; }
  .afm-title{ font-size: 26px; letter-spacing: -.8px; }
  .afm-sub{ font-size: 13px; }
  .afm-input-wrap input{ padding: 14px 44px 14px 42px; font-size: 13.5px; }
  .afm-btn{ padding: 15px 20px; font-size: 14px; }
  .afm-row{ font-size: 12.5px; }
}


/* ============================================================
   TERMS PREMIUM V2
   ============================================================ */

@keyframes tfm-drift-1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.15)} }
@keyframes tfm-drift-2{ 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-8%,6%,0) scale(.95)} }
@keyframes tfm-drift-3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,8%,0) scale(1.1)} }
@keyframes tfm-star{ from{background-position:0 0} to{background-position:-500px -500px} }
@keyframes tfm-pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }
@keyframes tfm-halo{ 0%,100%{opacity:.5; transform:scale(1)} 50%{opacity:.9; transform:scale(1.06)} }

.tfm{ position: relative; padding: 22px 0 90px; }

.tfm-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(90px); opacity: .32;
}
.tfm-blob{
  position: absolute; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  mix-blend-mode: screen;
}
.tfm-blob-1{ background: radial-gradient(circle, #E63946, transparent 60%); top: -10%; left: -15%; animation: tfm-drift-1 26s ease-in-out infinite; }
.tfm-blob-2{ background: radial-gradient(circle, #4CC9F0, transparent 60%); top: 40%; right: -20%; animation: tfm-drift-2 30s ease-in-out infinite; }
.tfm-blob-3{ background: radial-gradient(circle, #a855f7, transparent 60%); bottom: -20%; left: 30%; animation: tfm-drift-3 34s ease-in-out infinite; }
.tfm .wrap{ position: relative; z-index: 2; }

/* ============ HERO ============ */
.tfm-hero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,22,.6), rgba(10,10,12,.9));
  margin-bottom: 32px;
  box-shadow: 0 40px 110px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  isolation: isolate;
}
.tfm-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.tfm-aurora{
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  filter: blur(80px); opacity: .5; mix-blend-mode: screen;
}
.tfm-aurora span{
  position: absolute; width: 60%; height: 60%; border-radius: 50%;
  animation: tfm-drift-1 20s ease-in-out infinite;
}
.tfm-aurora span:nth-child(1){ background: radial-gradient(circle, #E63946, transparent 65%); top: 0; left: 0; }
.tfm-aurora span:nth-child(2){ background: radial-gradient(circle, #4CC9F0, transparent 65%); top: 40%; right: 5%; animation-delay: -7s; }
.tfm-aurora span:nth-child(3){ background: radial-gradient(circle, #a855f7, transparent 65%); bottom: 0; left: 35%; animation-delay: -14s; }
.tfm-stars{
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 32% 72%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 32%, #fff, transparent),
    radial-gradient(1px 1px at 82% 52%, #fff, transparent),
    radial-gradient(1px 1px at 47% 87%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 18%, #fff, transparent);
  background-size: 400px 400px;
  animation: tfm-star 90s linear infinite;
}
.tfm-vignette{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.65) 100%);
}
.tfm-hero-inner{
  position: relative; z-index: 4;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 68px 32px 60px;
}
.tfm-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(230,57,70,.12);
  border: 1px solid rgba(230,57,70,.35);
  color: #ffb84d;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  margin-bottom: 22px;
  text-transform: uppercase;
}
.tfm-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 12px #E63946;
  animation: tfm-pulse 1.8s infinite;
}
.tfm-title{
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 18px;
}
.tfm-title em{
  font-style: normal;
  background: linear-gradient(110deg, #E63946, #ff8c42, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(230,57,70,.35));
}
.tfm-lead{
  font-size: 16px; line-height: 1.65;
  color: var(--text-dim);
  max-width: 600px; margin: 0 auto 24px;
}
.tfm-meta{
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.tfm-meta-pill{
  padding: 8px 15px; border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
  font-size: 12px; font-weight: 700;
}

/* ============ LAYOUT ============ */
.tfm-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}

/* ============ TOC ============ */
.tfm-toc{
  position: sticky;
  top: 100px;
  padding: 22px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 4px;
}
.tfm-toc-title{
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 800;
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.tfm-toc-link{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s var(--ease, cubic-bezier(.22,.9,.32,1));
  position: relative;
}
.tfm-toc-link span{
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: var(--text-faint);
  letter-spacing: .5px;
  min-width: 22px;
  transition: color .2s;
}
.tfm-toc-link:hover{
  background: rgba(255,255,255,.04);
  color: #fff;
}
.tfm-toc-link.tfm-toc-active{
  background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(230,57,70,.04));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tfm-toc-link.tfm-toc-active::before{
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #E63946, #ff6b35);
  box-shadow: 0 0 10px rgba(230,57,70,.6);
}
.tfm-toc-link.tfm-toc-active span{ color: #ffb84d; }

.tfm-toc-cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(230,57,70,.14), rgba(255,184,77,.05));
  border: 1px solid rgba(230,57,70,.35);
}
.tfm-toc-cta-title{
  font-size: 12.5px; font-weight: 800; color: #fff;
  margin-bottom: 10px;
}
.tfm-toc-cta-btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(230,57,70,.4);
  transition: transform .2s;
}
.tfm-toc-cta-btn:hover{ transform: translateY(-2px); }

/* ============ CONTENT ============ */
.tfm-content{ display: flex; flex-direction: column; gap: 18px; }

.tfm-card{
  position: relative;
  padding: 30px 32px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform .3s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s;
  scroll-margin-top: 100px;
}
.tfm-card::before{
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,57,70,.55), transparent);
  opacity: 0; transition: opacity .3s;
}
.tfm-card:hover{
  border-color: rgba(230,57,70,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 40px rgba(230,57,70,.1);
  transform: translateY(-3px);
}
.tfm-card:hover::before{ opacity: 1; }

.tfm-card-ico{
  position: absolute;
  top: 26px; right: 30px;
  font-size: 34px;
  opacity: .18;
  filter: drop-shadow(0 4px 20px rgba(230,57,70,.4));
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.tfm-card:hover .tfm-card-ico{
  opacity: .35;
  transform: scale(1.1) rotate(-4deg);
}

.tfm-card-head{
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
}
.tfm-card-num{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff, #ff8c42);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(230,57,70,.35));
  line-height: 1;
}
.tfm-card-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0;
}

.tfm-card-text{
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 0;
}

/* Tags "запрещено" */
.tfm-tags{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.tfm-tag{
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
.tfm-tag-bad{
  background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(230,57,70,.05));
  border: 1px solid rgba(230,57,70,.4);
  color: #ff8c94;
}

/* Notes */
.tfm-note{
  display: flex; gap: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(76,201,240,.1), rgba(76,201,240,.02));
  border: 1px solid rgba(76,201,240,.3);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.tfm-note-ico{ font-size: 20px; flex-shrink: 0; line-height: 1.3; }
.tfm-note-warn{
  background: linear-gradient(135deg, rgba(245,197,24,.1), rgba(245,197,24,.02));
  border-color: rgba(245,197,24,.35);
}

/* ============ CTA ============ */
.tfm-cta{
  position: relative;
  border-radius: 24px;
  padding: 46px 36px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230,57,70,.14), rgba(255,184,77,.06));
  border: 1px solid rgba(230,57,70,.3);
  box-shadow: 0 40px 100px rgba(230,57,70,.12);
  isolation: isolate;
  margin-top: 10px;
}
.tfm-cta-glow{
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(230,57,70,.3), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: tfm-halo 5s ease-in-out infinite;
}
.tfm-cta-inner{ position: relative; z-index: 1; }
.tfm-cta-title{
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0 0 10px;
}
.tfm-cta-sub{
  font-size: 14.5px;
  color: var(--text-dim);
  margin: 0 0 22px;
}
.tfm-cta-row{
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.tfm-cta-btn{
  padding: 13px 26px !important;
  font-size: 14px !important;
  border-radius: 100px !important;
}

/* reveal */
.tfm-reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease, cubic-bezier(.22,.9,.32,1)), transform .7s var(--ease, cubic-bezier(.22,.9,.32,1)); }
.tfm-reveal.tfm-in{ opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .tfm-layout{ grid-template-columns: 1fr; gap: 20px; }
  .tfm-toc{
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    padding: 16px;
  }
  .tfm-toc-title{ grid-column: 1 / -1; }
  .tfm-toc-cta{ grid-column: 1 / -1; margin-top: 10px; }
  .tfm-hero-inner{ padding: 54px 24px 46px; }
}
@media (max-width: 640px){
  .tfm{ padding: 14px 0 70px; }
  .tfm-hero{ border-radius: 20px; }
  .tfm-hero-inner{ padding: 44px 20px 38px; }
  .tfm-title{ font-size: 30px; letter-spacing: -1px; }
  .tfm-lead{ font-size: 14px; }
  .tfm-meta-pill{ font-size: 11px; padding: 6px 11px; }
  .tfm-card{ padding: 24px 22px; border-radius: 18px; }
  .tfm-card-ico{ top: 22px; right: 22px; font-size: 28px; }
  .tfm-card-num{ font-size: 22px; }
  .tfm-card-title{ font-size: 18px; }
  .tfm-card-text{ font-size: 14px; }
  .tfm-tag{ font-size: 11px; padding: 6px 11px; }
  .tfm-cta{ padding: 36px 22px; }
}


/* ============================================================
   SEARCH DROPDOWN PREMIUM V2
   ============================================================ */

@keyframes sdx-in{ from{opacity:0; transform: translateY(-6px) scale(.98);} to{opacity:1; transform: translateY(0) scale(1);} }
@keyframes sdx-spin{ to{ transform: rotate(360deg); } }

.nav-search, .mobile-search{
  position: relative !important;
}

.nav-search:focus-within svg{
  color: #E63946 !important;
  filter: drop-shadow(0 0 6px rgba(230,57,70,.6));
}
.nav-search input:focus{
  border-color: rgba(230,57,70,.5) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,.12) !important;
}

/* ============ DROP ============ */
.search-drop{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important; right: 0 !important;
  z-index: 1500 !important;
  max-height: 72vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(20,20,24,.98) 0%, rgba(12,12,16,.98) 100%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.75),
    0 0 0 1px rgba(230,57,70,.1),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(24px) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(230,57,70,.4) rgba(0,0,0,.2);
  animation: sdx-in .22s var(--ease, cubic-bezier(.22,.9,.32,1)) both;
}
.search-drop::-webkit-scrollbar{ width: 8px; }
.search-drop::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); border-radius: 4px; }
.search-drop::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #E63946, #ff6b35);
  border-radius: 4px;
}

/* ============ СТРОКА РЕЗУЛЬТАТА ============ */
.search-drop a[data-sd-row]{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .18s, transform .18s !important;
  position: relative;
  overflow: hidden;
}
.search-drop a[data-sd-row]::before{
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #E63946, #ff6b35);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease, cubic-bezier(.22,.9,.32,1));
  border-radius: 0 3px 3px 0;
}
.search-drop a[data-sd-row]:hover,
.search-drop a[data-sd-row].sd-active{
  background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(230,57,70,.05)) !important;
  transform: translateX(3px);
}
.search-drop a[data-sd-row]:hover::before,
.search-drop a[data-sd-row].sd-active::before{
  transform: scaleY(1);
}

.sd-poster{
  width: 42px !important;
  height: 60px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #1a1a1e !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.55) !important;
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1));
}
.search-drop a[data-sd-row]:hover .sd-poster,
.search-drop a[data-sd-row].sd-active .sd-poster{
  transform: scale(1.06);
}
.sd-poster img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.sd-info{
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.sd-title{
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.1px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s;
}
.search-drop a[data-sd-row]:hover .sd-title,
.search-drop a[data-sd-row].sd-active .sd-title{
  color: #ffb0b0 !important;
}
.sd-meta{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  color: var(--text-faint, #6c6c74) !important;
  font-weight: 600 !important;
}
.sd-dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 6px rgba(230,57,70,.6);
  display: inline-block;
}
.sd-rating{
  color: #F5C518 !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* ============ LOADING ============ */
.sd-loading{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 22px 16px !important;
  color: var(--text-faint, #6c6c74) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.sd-spin{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(230,57,70,.25);
  border-top-color: #E63946;
  animation: sdx-spin .7s linear infinite;
  display: inline-block;
}

/* ============ EMPTY ============ */
.sd-empty{
  padding: 26px 20px !important;
  text-align: center !important;
}
.sd-empty-ico{
  font-size: 34px;
  margin-bottom: 10px;
  opacity: .55;
  filter: drop-shadow(0 4px 16px rgba(230,57,70,.4));
}
.sd-empty-title{
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.sd-empty-sub{
  font-size: 12px;
  color: var(--text-faint, #6c6c74);
  font-weight: 600;
}

/* ============ ERROR ============ */
.sd-error{
  padding: 18px 16px !important;
  text-align: center !important;
  font-size: 13px;
  color: #ff8c94;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(230,57,70,.08);
  border: 1px solid rgba(230,57,70,.25);
  margin: 6px;
}

/* ============ MOBILE ============ */
@media (max-width: 640px){
  .search-drop{
    position: fixed !important;
    top: 80px !important;
    left: 12px !important;
    right: 12px !important;
    max-height: 70vh !important;
  }
  .sd-poster{ width: 40px !important; height: 56px !important; }
  .sd-title{ font-size: 13px !important; }
}

/* ============================================================
   CONTINUE WATCHING (home)
   ============================================================ */
.anp-cw-row{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  perspective: 1200px;
}
.anp-cw-card{
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease, cubic-bezier(.22,.9,.32,1)), border-color .3s, box-shadow .3s;
  position: relative;
}
.anp-cw-card:hover{
  transform: translateY(-6px);
  border-color: rgba(230,57,70,.55);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(230,57,70,.25);
}
.anp-cw-poster{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #000;
}
.anp-cw-poster img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.anp-cw-card:hover .anp-cw-poster img{ transform: scale(1.06); }
.anp-cw-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
}
.anp-cw-badge{
  position: absolute;
  top: 10px; left: 10px;
  padding: 5px 11px;
  border-radius: 100px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(230,57,70,.6);
  z-index: 3;
}
.anp-cw-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(230,57,70,.9);
  color: #fff;
  box-shadow: 0 12px 40px rgba(230,57,70,.7), inset 0 1px 0 rgba(255,255,255,.3);
  opacity: 0;
  transition: opacity .3s, transform .3s var(--ease, cubic-bezier(.22,.9,.32,1));
  z-index: 3;
  pointer-events: none;
}
.anp-cw-play svg{ margin-left: 2px; }
.anp-cw-card:hover .anp-cw-play{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.anp-cw-progress{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.15);
  z-index: 3;
}
.anp-cw-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #E63946, #ff6b35, #ffb84d);
  border-radius: 0 100px 100px 0;
  box-shadow: 0 0 12px rgba(230,57,70,.85);
  transition: width .4s var(--ease, cubic-bezier(.22,.9,.32,1));
}
.anp-cw-info{
  padding: 12px 14px 14px;
}
.anp-cw-title{
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
  line-height: 1.3;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}
.anp-cw-card:hover .anp-cw-title{ color: #ffb0b0; }
.anp-cw-meta{
  font-size: 11.5px;
  color: var(--text-faint, #6c6c74);
  font-weight: 700;
}
@media (max-width: 900px){
  .anp-cw-row{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}
@media (max-width: 640px){
  .anp-cw-row{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .anp-cw-title{ font-size: 12.5px; }
  .anp-cw-meta{ font-size: 10.5px; }
  .anp-cw-badge{ font-size: 10px; padding: 4px 9px; }
}

/* ============================================================
   WATCH TOGETHER
   ============================================================ */

/* Кнопка на anime.html */
.anp-watch-together{
  margin: 10px 0 14px;
}
.anp-wt-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 14px;
  border: 1px solid rgba(76,201,240,.4);
  background: linear-gradient(135deg, rgba(76,201,240,.14), rgba(76,201,240,.04));
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .25s var(--ease, cubic-bezier(.22,.9,.32,1)), box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.anp-wt-btn::before{
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .7s;
}
.anp-wt-btn:hover::before{ left: 100%; }
.anp-wt-btn:hover{
  transform: translateY(-3px);
  border-color: rgba(76,201,240,.7);
  box-shadow: 0 14px 40px rgba(76,201,240,.3);
}
.anp-wt-btn:disabled{ opacity: .6; cursor: not-allowed; transform: none; }
.anp-wt-ico{ font-size: 18px; }
.anp-wt-text{ font-weight: 800; }
.anp-wt-sub{
  font-size: 11px;
  color: rgba(200,200,220,.65);
  font-weight: 700;
  margin-left: 6px;
}
.anp-wt-btn.anp-wt-active{
  border-color: rgba(6,214,160,.5);
  background: linear-gradient(135deg, rgba(6,214,160,.14), rgba(6,214,160,.04));
}
.anp-wt-btn.anp-wt-active .anp-wt-ico::before{ content: '●'; color: #06D6A0; margin-right: -14px; opacity: 0; }

/* ============================================================
   QUALITY SWITCHER (Kodik all_qualities)
   ============================================================ */

#anp-qualities {
  display: block !important;
  position: relative;
  margin-top: 10px;
}

.anp-q-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  user-select: none;
  transition: transform .2s, border-color .2s, background .2s;
  font-family: inherit;
}
.anp-q-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(230,57,70,.5);
  background: linear-gradient(180deg, rgba(230,57,70,.12), rgba(230,57,70,.03));
}
.anp-q-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-faint, #6c6c74);
  font-weight: 800;
}
.anp-q-current {
  font-family: var(--font-display, sans-serif);
  font-size: 15px;
  color: #fff;
  letter-spacing: -.3px;
}
.anp-q-arrow {
  transition: transform .25s;
  color: var(--text-faint, #6c6c74);
}
.anp-q-menu.open ~ .anp-q-trigger .anp-q-arrow,
.anp-q-trigger.open .anp-q-arrow {
  transform: rotate(180deg);
}

.anp-q-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,20,24,.98), rgba(12,12,16,.98));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(230,57,70,.15);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: none;
  animation: anp-q-in .18s ease-out;
}
.anp-q-menu.open {
  display: block;
}
@keyframes anp-q-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.anp-q-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text-dim, #a8a8b8);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 9px;
  text-align: left;
  transition: background .15s, color .15s;
}
.anp-q-opt:hover {
  background: rgba(230,57,70,.12);
  color: #fff;
}
.anp-q-opt.active {
  background: linear-gradient(135deg, #E63946, #ff6b35);
  color: #fff;
  box-shadow: 0 6px 20px rgba(230,57,70,.4);
}
.anp-q-opt i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgba(255,255,255,.15);
  color: #fff;
}
.anp-q-opt.active i {
  background: rgba(0,0,0,.35);
}

/* На мобилке — пошире, снизу */
@media (max-width: 640px) {
  .anp-q-trigger { padding: 9px 14px; }
  .anp-q-menu {
    left: auto;
    right: 0;
    min-width: 160px;
  }
  .anp-q-opt { padding: 9px 12px; font-size: 13px; }
}


/* ============================================================
   QUALITY INLINE (внутри панели управления)
   ============================================================ */

#anp-qualities {
  display: inline-flex !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.anp-q-inline {
  /* Компактная, как PiP и FS */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  padding: 6px 10px !important;
  min-width: 44px !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  cursor: pointer;
  border-radius: 8px !important;
  font-family: inherit;
  transition: background .2s, transform .2s;
}
.anp-q-inline:hover {
  background: rgba(255,255,255,.08) !important;
}
.anp-q-inline svg {
  opacity: .85;
}
.anp-q-inline-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  font-family: var(--font-display, sans-serif);
  color: #fff;
}

/* Меню — всплывает ВВЕРХ от кнопки */
.anp-q-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(20, 20, 24, 0.98);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.75), 0 0 0 1px rgba(230,57,70,.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 200;
  display: none;
  animation: anp-q-in .18s ease-out;
}
.anp-q-menu.open {
  display: block;
}
@keyframes anp-q-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.anp-q-menu-head {
  padding: 8px 12px 6px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #6c6c74;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}

.anp-q-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: #c8c8d8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  transition: background .15s, color .15s;
}
.anp-q-opt:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.anp-q-opt.active {
  color: #fff;
  background: rgba(230,57,70,.12);
}
.anp-q-check {
  width: 14px;
  font-size: 12px;
  color: #E63946;
  font-weight: 900;
}
.anp-q-num {
  flex: 1;
  font-weight: 800;
  font-family: var(--font-display, sans-serif);
  letter-spacing: -.2px;
}
.anp-q-badge {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  padding: 2px 6px;
  border-radius: 100px;
  background: linear-gradient(135deg, #F5C518, #ffb84d);
  color: #1a1200;
}

/* На мобилке — меню слева, чтобы не залезало на экран */
@media (max-width: 640px) {
  .anp-q-inline-label { font-size: 11px; }
  .anp-q-menu {
    right: auto;
    left: 0;
    min-width: 150px;
  }
}

/* ============================================================
   RESPONSIVE v2 — телефоны / планшеты / ТВ
   ============================================================ */

/* ============================================================
   1. БАЗОВЫЕ ПРАВИЛА — работают везде
   ============================================================ */

/* Отключаем серый tap-highlight в мобильных браузерах */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Читаемый текст без pinch-zoom на малых экранах */
body {
  overflow-x: hidden;
}

/* Кнопки — минимум 44×44 для тача (стандарт Apple/Google) */
button, .btn, [role="button"], a.btn {
  min-height: 36px;
}

/* Тонкие скроллбары на мобильных */
* {
  scrollbar-width: thin;
}

/* ============================================================
   2. УСТРОЙСТВА С МЫШЬЮ (hover работает)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  /* Отключаем tap-highlight — работает только с мышью */
  a:hover, button:hover {
    transition: all .2s;
  }
}

/* ============================================================
   3. ТАЧ-УСТРОЙСТВА (телефоны, планшеты)
   hover не работает — нужен feedback на tap
   ============================================================ */
@media (hover: none) and (pointer: coarse) {

  /* Убираем все hover-эффекты с карточек, чтобы не залипали */
  .a-card:hover,
  .anp-anime-card:hover,
  .anp-cw-card:hover,
  .anp-ongoing-card:hover,
  .anp-cat-card:hover,
  .anp-similar-card:hover,
  .anp-season-btn:hover,
  .pfx-card:hover,
  .pfx-ach:hover,
  .voice-btn:hover,
  .anp-ep-item:hover,
  .status-btn:hover,
  .pfx-cell:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Tap-feedback — подсветка при нажатии */
  .a-card:active,
  .anp-anime-card:active,
  .anp-cw-card:active,
  .anp-cat-card:active,
  .anp-ongoing-card:active {
    transform: scale(.97) !important;
    transition: transform .1s !important;
  }

  /* Кнопки плеера — крупнее */
  .anp-ctrl { min-width: 42px !important; height: 42px !important; }
  .anp-ctrl svg { width: 22px !important; height: 22px !important; }
  #anp-play-btn { min-width: 48px !important; height: 48px !important; }

  /* touch-action — жесты не конфликтуют со скроллом */
  #anp-video-container,
  #anp-video,
  .anp-ctrl,
  .anp-ctrl-btn,
  #anp-progress-wrap,
  #anp-ep-toggle,
  #anp-q-trigger,
  #anp-voice-trigger {
    touch-action: manipulation;
  }
  #anp-progress-wrap {
    touch-action: none;
  }

  /* На тач-устройствах прогресс-бар всегда толстый */
  #anp-progress-wrap {
    height: 6px !important;
  }
  #anp-thumb {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
  }

  /* Отключаем параллакс-эффекты */
  .pfx-bg, .cfx-bg, .tfm-bg, .sfx-bg, .afx-bg, .afm-bg {
    display: none !important;
  }

  /* Ускоряем анимации — экономим батарею */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  /* ...кроме нужных */
  .anp-spinner, .anp-big-play-btn, .pfx-live, .anp-toast {
    animation-duration: revert !important;
  }
}

/* ============================================================
   4. ПЛАНШЕТЫ (768 — 1024) + small laptop
   ============================================================ */
@media (max-width: 1024px) {
  .wrap { padding: 0 20px !important; }

  .nav-inner { gap: 16px !important; padding: 12px 20px !important; }
  .nav-search { width: 180px !important; }

  /* Каталог: убираем боковую панель фильтров */
  .catalog-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .anp-filters {
    position: static !important;
    max-height: none !important;
  }

  /* Плеер — сайдбар вниз */
  .anp-main {
    flex-direction: column !important;
  }
  .anp-side {
    width: 100% !important;
    max-height: none !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Сетки аниме */
  .anp-card-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .anp-cw-row   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}

/* ============================================================
   5. ТЕЛЕФОНЫ (480 — 768) — большой телефон portrait
   ============================================================ */
@media (max-width: 768px) {
  .wrap { padding: 0 14px !important; }

  /* Навигация */
  .nav-inner { padding: 10px 14px !important; gap: 10px !important; }
  .nav-links { display: none !important; }
  .nav-search { display: none !important; }
  .burger { display: flex !important; }

  /* Заголовки */
  h1 { font-size: 26px !important; letter-spacing: -1px !important; }
  h2 { font-size: 20px !important; }

  /* HERO главной */
  .anp-home-hero { padding: 40px 0 50px !important; }
  .anp-hero-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .anp-hero-h1 { font-size: 34px !important; }
  .anp-hero-sub { font-size: 14px !important; }
  .anp-hero-slideshow-wrap { justify-content: center !important; }
  .hero-slideshow { max-width: 100% !important; aspect-ratio: 16/10 !important; }

  /* Hero /info страницы аниме */
  .anp-hero { padding: 20px 0 20px !important; }
  .a-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .a-detail-poster { max-width: 200px !important; margin: 0 auto !important; }
  .a-detail-title { font-size: 24px !important; text-align: center !important; }
  .a-badges, .a-ratings, .a-genres { justify-content: center !important; }
  .status-btns { justify-content: center !important; }

  /* Сетки карточек везде — 2 колонки */
  .anp-card-row,
  .anp-cw-row,
  .anp-ongoing-grid,
  .anp-catalog-grid,
  .pfx-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Каталог — карточки крупнее */
  .anp-cat-card { border-radius: 14px !important; }

  /* Профиль / магазин / правила — сетки в один столбец */
  .pfx-hero-grid,
  .sfx-grid,
  .pfx-stats,
  .afx-features,
  .afx-member,
  .pfx-achievements {
    grid-template-columns: 1fr !important;
  }

  /* Табы горизонтальным скроллом */
  .anp-tabs, .pfx-tabs, .ong-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .anp-tab, .pfx-tab, .ong-tab {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* Сезоны — горизонтальный скролл */
  .anp-seasons-row { overflow-x: auto !important; }
  .anp-season-btn { min-width: 180px !important; }

  /* Плеер */
  #anp-wrap { margin-left: -14px !important; margin-right: -14px !important; border-radius: 0 !important; }
  .anp-top-bar { padding: 12px 14px !important; }
  .anp-controls-row { gap: 4px !important; }
  #anp-back, #anp-fwd { display: none !important; }
  .anp-volume-wrap { display: none !important; }
  #anp-time { font-size: 11px !important; padding: 0 4px !important; }
  .anp-voice-label { max-width: 70px !important; }

  /* Скрываем эмодзи-иконки в панели, оставляем SVG */
  .anp-q-badge, .anp-next-timer { transform: scale(.9); }

  /* Скриншоты */
  .screens-row img { width: 180px !important; height: 101px !important; }
}

/* ============================================================
   6. МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 480)
   ============================================================ */
@media (max-width: 480px) {
  .wrap { padding: 0 12px !important; }

  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }

  .anp-hero-h1 { font-size: 26px !important; }
  .anp-hero-sub { font-size: 13px !important; }
  .anp-hero-cta { flex-direction: column !important; }
  .anp-btn-primary, .anp-btn-ghost { width: 100% !important; justify-content: center !important; padding: 12px 20px !important; }

  .anp-hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 12px !important;
  }
  .anp-stat-item b { font-size: 18px !important; }

  /* Каталог — только 2 колонки, компактнее */
  .anp-cat-title { font-size: 12px !important; }
  .anp-cat-meta { font-size: 10px !important; }
  .anp-cat-rating { padding: 3px 7px !important; font-size: 10px !important; }

  /* Плеер */
  .anp-big-play-btn { width: 64px !important; height: 64px !important; }
  .anp-big-play-btn svg { width: 26px !important; height: 26px !important; }
  .anp-ctrl { min-width: 34px !important; height: 34px !important; padding: 5px !important; }
  .anp-ctrl svg { width: 17px !important; height: 17px !important; }
  #anp-play-btn { min-width: 40px !important; height: 40px !important; }
  .anp-ctrl-btn { padding: 6px 8px !important; font-size: 11px !important; min-height: 32px !important; }
  #anp-ep-badge { min-width: 26px !important; height: 26px !important; font-size: 11px !important; }

  /* Оверлеи (next, resume) — компактнее */
  .anp-next-inner { padding: 20px 16px !important; }
  .anp-next-title { font-size: 16px !important; }
  .anp-next-timer { width: 60px !important; height: 60px !important; }
  .anp-next-num { font-size: 22px !important; }
  .anp-resume { left: 12px !important; right: 12px !important; transform: none !important; width: auto !important; }
  .anp-resume.active { transform: translateY(0) !important; }

  /* Сетки — 2 колонки в самом узком виде */
  .anp-cw-row, .anp-card-row { gap: 8px !important; }

  /* Toast — компактнее */
  .anp-toast { padding: 12px 16px !important; gap: 8px !important; }
  .anp-toast-text { font-size: 12.5px !important; }
  .anp-toast-ico { font-size: 20px !important; }
}

/* ============================================================
   7. ТЕЛЕВИЗОРЫ (min-width: 1920) — 4K / Smart TV
   ============================================================ */
@media (min-width: 1920px) {
  .wrap { max-width: 1720px !important; padding: 0 48px !important; }

  body { font-size: 17px; }

  h1 { font-size: 56px !important; letter-spacing: -2px !important; }
  h2 { font-size: 36px !important; }

  /* Кнопки крупнее — для пульта */
  .btn { padding: 16px 32px !important; font-size: 16px !important; }
  .status-btn { padding: 16px 28px !important; font-size: 15px !important; }

  /* Сетки — больше карточек в ряд */
  .anp-card-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
  .anp-cw-row   { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  .anp-ongoing-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; }

  /* Плеер — крупные кнопки и время */
  .anp-ctrl { min-width: 54px !important; height: 54px !important; }
  .anp-ctrl svg { width: 24px !important; height: 24px !important; }
  #anp-play-btn { min-width: 64px !important; height: 64px !important; }
  .anp-ctrl-btn { padding: 12px 20px !important; font-size: 15px !important; }
  #anp-time { font-size: 16px !important; padding: 0 18px !important; }
  .anp-big-play-btn { width: 140px !important; height: 140px !important; }
  .anp-big-play-btn svg { width: 56px !important; height: 56px !important; }

  /* Меню — крупнее */
  #anp-voices-menu { width: 400px !important; }
  .voice-btn { padding: 14px 16px !important; }
  .voice-name { font-size: 15px !important; }

  /* Фокус-кольцо для навигации с пульта */
  :focus-visible {
    outline: 3px solid #E63946 !important;
    outline-offset: 3px;
    border-radius: 8px;
  }
}

/* ============================================================
   8. ТВ + планшеты: touch-action для кнопок
   ============================================================ */
.btn, .status-btn, .anp-ctrl, .anp-tab, .pfx-tab, .ong-tab {
  touch-action: manipulation;
}

/* ============================================================
   9. iOS Safari: убираем rubber-band overflow
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  body {
    overscroll-behavior-y: none;
  }
  #anp-video-container {
    overscroll-behavior: none;
  }
}

/* ============================================================
   10. Reduced motion — пользователь отключил анимации в OS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   MOBILE PLAYER FIX — bottom-sheet + компактная панель
   ============================================================ */

/* Затемнение под bottom-sheet */
.anp-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.anp-sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {

  /* ---- Панель управления — компактнее ---- */
  #anp-controls {
    padding: 24px 8px 8px !important;
  }
  .anp-controls-row {
    gap: 3px !important;
    align-items: center !important;
  }

  /* Кнопки управления — меньше */
  .anp-ctrl {
    min-width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    border-radius: 9px !important;
  }
  .anp-ctrl svg { width: 17px !important; height: 17px !important; }

  #anp-play-btn {
    min-width: 42px !important;
    height: 42px !important;
  }
  #anp-play-btn svg { width: 20px !important; height: 20px !important; }

  /* Скрываем лишние кнопки на телефоне */
  #anp-back, #anp-fwd { display: none !important; }
  .anp-volume-wrap { display: none !important; }
  #anp-pip { display: none !important; }

  /* Время — компактное */
  #anp-time {
    font-size: 11.5px !important;
    padding: 0 4px !important;
    font-weight: 700 !important;
  }

  /* Speed — только цифра */
  .anp-speed-wrap { flex-shrink: 0; }
  #anp-speed {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 34px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
  }

  /* Кнопка озвучки — без текста, только иконка */
  .anp-voice-btn {
    max-width: 40px !important;
    padding: 6px !important;
    min-width: 36px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
  .anp-voice-label { display: none !important; }

  /* Кнопка качества — компактная, только число */
  .anp-q-inline {
    padding: 6px 8px !important;
    min-width: 42px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
  .anp-q-inline svg { display: none !important; }
  .anp-q-label {
    font-size: 11.5px !important;
    font-weight: 900 !important;
  }

  /* ---- Bottom-sheet меню озвучек и качества ---- */
  #anp-voices-menu,
  #anp-q-menu,
  #anp-speed-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 72vh !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.85) !important;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22,.9,.32,1);
    display: block !important;
    visibility: hidden;
    z-index: 9999 !important;
    animation: none !important;
  }
  #anp-voices-menu.open,
  #anp-q-menu.open,
  #anp-speed-menu.open {
    transform: translateY(0);
    visibility: visible;
  }

  /* Ручка-полоска сверху */
  #anp-voices-menu::before,
  #anp-q-menu::before,
  #anp-speed-menu::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 100px;
    margin: 10px auto 4px;
  }

  .anp-voices-head,
  .anp-q-head {
    text-align: center !important;
    padding: 6px 16px 12px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  /* Список озвучек в sheet */
  #anp-voices {
    padding: 8px 10px 18px !important;
    max-height: calc(72vh - 80px) !important;
  }
  .voice-btn {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .voice-name { font-size: 14px !important; }
  .voice-icon { width: 34px !important; height: 34px !important; font-size: 14px !important; }

  /* Список качеств в sheet */
  #anp-q-list {
    padding: 8px 10px 18px !important;
  }
  .anp-q-opt {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .anp-q-num { font-size: 15px !important; }

  /* Speed в sheet — сетка 3×2 */
  #anp-speed-menu {
    padding: 6px 12px 18px !important;
  }
  #anp-speed-menu .anp-speed-opt {
    padding: 14px 16px !important;
    font-size: 15px !important;
    text-align: center !important;
    border-radius: 10px !important;
    margin: 2px 0 !important;
  }

  /* ---- Комментарии — textarea на всю ширину ---- */
  .comment-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .comment-form .c-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  .comment-form textarea.field {
    width: 100% !important;
    min-height: 80px !important;
    max-height: 200px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    resize: vertical !important;
  }
  .comment-form button[type="submit"] {
    align-self: stretch !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* ---- Селектор серии — компактнее ---- */
  .anp-top-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .anp-ep-label { font-size: 9.5px !important; letter-spacing: 1.4px !important; }
  .anp-top-left { gap: 8px !important; width: 100% !important; }
  .anp-dropdown { max-width: 100% !important; flex: 1 !important; }

  #anp-ep-toggle {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }
  #anp-ep-badge {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  #anp-eps-count,
  .anp-top-bar #anp-status {
    font-size: 10.5px !important;
    padding: 4px 10px !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 480px) {
  /* Ещё компактнее */
  .anp-ctrl {
    min-width: 32px !important;
    height: 32px !important;
    padding: 5px !important;
  }
  .anp-ctrl svg { width: 15px !important; height: 15px !important; }
  #anp-play-btn {
    min-width: 38px !important;
    height: 38px !important;
  }
  #anp-play-btn svg { width: 18px !important; height: 18px !important; }

  #anp-time { font-size: 10.5px !important; }

  #anp-speed {
    font-size: 10px !important;
    padding: 5px 6px !important;
    min-width: 28px !important;
  }
  .anp-voice-btn { max-width: 36px !important; padding: 5px !important; min-width: 32px !important; }
  .anp-q-inline { min-width: 38px !important; padding: 5px 6px !important; }
  .anp-q-label { font-size: 10.5px !important; }

  /* Sheet — почти весь экран */
  #anp-voices-menu,
  #anp-q-menu,
  #anp-speed-menu {
    max-height: 80vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  #anp-voices {
    max-height: calc(80vh - 80px) !important;
  }

  /* Textarea в комментах */
  .comment-form textarea.field {
    min-height: 70px !important;
    font-size: 13.5px !important;
  }
}


/* ============================================================
   ALLOHA AD MODAL
   ============================================================ */
.anp-ad-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.anp-ad-modal-overlay.active { display: flex; }

.anp-ad-modal {
  background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow:
    0 40px 100px rgba(0,0,0,.8),
    0 0 0 1px rgba(230,57,70,.15),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation: anpModalIn .3s cubic-bezier(.22,.9,.32,1);
}
@keyframes anpModalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.anp-ad-modal h3 {
  color: #F5C518;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.anp-ad-modal p {
  color: #c8c8d8;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.anp-ad-modal p b { color: #fff; font-weight: 800; }

.anp-ad-modal .anp-ad-temp {
  color: #a78bfa;
  font-size: 12.5px;
  padding: 10px 14px;
  background: rgba(139,92,246,.1);
  border-radius: 10px;
  border-left: 3px solid #8b5cf6;
  margin: 16px 0 20px;
  line-height: 1.5;
}

.anp-ad-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.anp-ad-modal-btns button {
  padding: 12px 22px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  transition: all .2s;
}
.anp-ad-btn-cancel {
  background: rgba(255,255,255,.05);
  color: #c8c8d8;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.anp-ad-btn-cancel:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.anp-ad-btn-continue {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 8px 22px rgba(139,92,246,.4);
}
.anp-ad-btn-continue:hover {
  box-shadow: 0 12px 30px rgba(139,92,246,.6);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .anp-ad-modal { padding: 22px; border-radius: 16px; }
  .anp-ad-modal h3 { font-size: 16px; }
  .anp-ad-modal p { font-size: 13px; }
  .anp-ad-modal-btns { flex-direction: column; }
  .anp-ad-modal-btns button { width: 100%; padding: 14px; }
}


/* ============================================================
   MOBILE UI FIX v2 — прячем дубликаты, панель влезает
   ============================================================ */
@media (max-width: 768px) {

  /* Прячем дублирующие элементы в top-bar:
     #anp-eps-count ("17 · dreamcast") и #anp-status ("▶ AniDUB · 720p")
     — инфа дублируется кнопками внизу плеера */
  .anp-top-bar #anp-eps-count,
  .anp-top-bar #anp-status {
    display: none !important;
  }

  /* Top-bar теперь только для селектора серии */
  .anp-top-bar {
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
  }
  .anp-top-left { width: 100% !important; gap: 8px !important; }
  .anp-ep-label {
    font-size: 9.5px !important;
    letter-spacing: 1.2px !important;
    flex-shrink: 0 !important;
  }
  .anp-dropdown { flex: 1 !important; max-width: none !important; }

  #anp-ep-toggle {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
    width: 100% !important;
  }
  #anp-ep-badge {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  /* Панель управления — все кнопки влезают */
  #anp-controls {
    padding: 22px 6px 6px !important;
  }
  .anp-controls-row {
    gap: 2px !important;
    justify-content: space-between !important;
  }

  .anp-ctrl {
    min-width: 32px !important;
    height: 32px !important;
    padding: 5px !important;
    border-radius: 8px !important;
  }
  .anp-ctrl svg { width: 15px !important; height: 15px !important; }

  #anp-play-btn {
    min-width: 38px !important;
    height: 38px !important;
  }
  #anp-play-btn svg { width: 18px !important; height: 18px !important; }

  #anp-time {
    font-size: 10.5px !important;
    padding: 0 2px !important;
    font-weight: 700 !important;
  }

  /* Кнопки с текстом — компактнее */
  .anp-ctrl-btn {
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    gap: 3px !important;
  }
  .anp-ctrl-btn svg { width: 13px !important; height: 13px !important; }

  /* Speed — только цифра */
  #anp-speed { min-width: 28px !important; }

  /* Озвучка — только иконка */
  .anp-voice-btn {
    max-width: 34px !important;
    padding: 5px !important;
    min-width: 32px !important;
  }
  .anp-voice-label { display: none !important; }

  /* Качество — иконка + число */
  .anp-q-inline {
    min-width: 40px !important;
    padding: 5px 6px !important;
  }
  .anp-q-inline svg { width: 12px !important; height: 12px !important; }
  .anp-q-label {
    font-size: 10.5px !important;
    font-weight: 900 !important;
  }

  /* Кнопка watch-together — оставляем, но компактно */
  .anp-ctrl-wt { min-width: 32px !important; }
  .anp-ctrl-wt svg { width: 15px !important; height: 15px !important; }
}

@media (max-width: 480px) {
  #anp-controls { padding: 20px 4px 4px !important; }
  .anp-controls-row { gap: 1px !important; }

  .anp-ctrl {
    min-width: 30px !important;
    height: 30px !important;
    padding: 4px !important;
  }
  .anp-ctrl svg { width: 14px !important; height: 14px !important; }

  #anp-play-btn { min-width: 36px !important; height: 36px !important; }
  #anp-play-btn svg { width: 17px !important; height: 17px !important; }

  #anp-time { font-size: 9.5px !important; }

  .anp-ctrl-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-height: 30px !important;
    min-width: 28px !important;
  }

  .anp-q-inline { min-width: 36px !important; padding: 4px 5px !important; }
  .anp-q-label { font-size: 10px !important; }
  .anp-q-inline svg { width: 11px !important; height: 11px !important; }
}


/* ============================================================
   EPISODE SELECTOR INLINE (в панели управления)
   ============================================================ */

/* Скрываем устаревший top-bar и label */
.anp-top-bar,
.anp-ep-label {
  display: none !important;
}

/* Обёртка для inline-кнопки серии */
.anp-ep-inline-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* Кнопка серии — как остальные ctrl-btn */
.anp-ep-btn {
  max-width: 200px;
  padding: 8px 12px !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(230,57,70,.14), rgba(255,107,53,.06)) !important;
  border: 1px solid rgba(230,57,70,.35) !important;
  box-shadow:
    0 4px 14px rgba(230,57,70,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.anp-ep-btn:hover {
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  border-color: rgba(230,57,70,.8) !important;
  color: #fff !important;
  box-shadow:
    0 10px 26px rgba(230,57,70,.5),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.anp-ep-btn svg {
  color: #ff8c94;
  flex-shrink: 0;
}
.anp-ep-btn:hover svg { color: #fff; }

/* Бейдж номера серии */
#anp-ep-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: linear-gradient(135deg, #E63946, #ff6b35);
  border-radius: 7px;
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  box-shadow:
    0 3px 10px rgba(230,57,70,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* Название серии — обрезается, если длинное */
#anp-ep-current {
  font-family: var(--font-display, sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.1px;
}

.anp-ep-arrow {
  transition: transform .25s;
  color: #ff8c94;
  flex-shrink: 0;
}
.anp-ep-btn:hover .anp-ep-arrow { color: #fff; }

/* Меню — всплывает ВВЕРХ от панели */
/* Поиск */
.anp-ep-search-wrap {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(230,57,70,.06), transparent);
}
#anp-ep-search {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
#anp-ep-search:focus { border-color: rgba(230,57,70,.5); }

/* Сетка эпизодов */
#anp-ep-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  padding: 12px;
  max-height: 340px;
  overflow-y: auto;
}
#anp-ep-list::-webkit-scrollbar { width: 6px; }
#anp-ep-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E63946, #ff6b35);
  border-radius: 100px;
}
.anp-ep-item {
  padding: 10px 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px;
  color: #c8c8d8;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s;
}
.anp-ep-item:hover {
  background: rgba(230,57,70,.15);
  border-color: rgba(230,57,70,.5);
  color: #fff;
  transform: translateY(-2px);
}
.anp-ep-item.active {
  background: linear-gradient(135deg, #E63946, #ff6b35);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(230,57,70,.5);
}

/* === Мобильная адаптация === */
@media (max-width: 768px) {
  /* Кнопка серии — компактнее */
  .anp-ep-btn {
    max-width: 130px;
    padding: 5px 8px !important;
    gap: 4px !important;
  }
  #anp-ep-badge {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    padding: 0 5px;
    border-radius: 6px;
  }
  #anp-ep-current {
    display: none;  /* оставляем только номер */
  }
  .anp-ep-arrow {
    width: 10px;
    height: 10px;
  }

  /* Меню — bottom-sheet снизу, как voice/quality */
  /* Ручка сверху */
  #anp-ep-menu::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 100px;
    margin: 10px auto 4px;
  }
  #anp-ep-list {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    max-height: calc(70vh - 120px);
    padding: 12px 14px 20px;
  }
  .anp-ep-item {
    padding: 14px 4px;
    font-size: 14px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .anp-ep-btn {
    max-width: 60px;
    padding: 4px 6px !important;
  }
  #anp-ep-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10.5px;
    padding: 0 4px;
  }
  .anp-ep-btn > svg:first-child {
    display: none;  /* убираем иконку списка на самых узких */
  }
}


/* ============================================================
   FINAL FIX: top-bar + overflow + меню серий
   ============================================================ */

/* На всякий случай скрываем, если где-то остался в другом месте */
.anp-top-bar,
.anp-top-bar-inner,
.anp-ep-label {
  display: none !important;
}

/* Убираем overflow: hidden — иначе меню серий/озвучек/качества
   обрезается, когда открывается вверх из панели управления */
#anp-video-container {
  overflow: visible !important;
}
#anp-video {
  border-radius: 22px;
}
#anp-iframe {
  border-radius: 22px;
}
/* В fullscreen скругления не нужны */
#anp-video-container:fullscreen #anp-video,
#anp-video-container:fullscreen #anp-iframe {
  border-radius: 0;
}

/* Меню серии, озвучки, качества — максимальный z-index */
#anp-ep-menu,
#anp-voices-menu,
#anp-q-menu {
  z-index: 100000 !important;
}

/* На мобиле возвращаем border-radius: 0 (там плеер full-width) */
@media (max-width: 640px) {
  #anp-video { border-radius: 0; }
  #anp-iframe { border-radius: 0; }
}

/* ============================================================
   INLINE EPISODE BUTTON — компактнее
   ============================================================ */
.anp-ep-btn > svg:first-child {
  /* иконку-гамбургер убираем, номер и так в бейдже */
  display: none !important;
}
.anp-ep-btn {
  max-width: 170px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}
#anp-ep-badge {
  min-width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
}
#anp-ep-current {
  max-width: 110px !important;
  font-size: 13px !important;
}

@media (max-width: 768px) {
  .anp-ep-btn {
    max-width: 70px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }
  #anp-ep-current {
    display: none !important;
  }
  #anp-ep-badge {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
  .anp-ep-arrow {
    display: none !important;  /* стрелку вниз на мобиле не показываем */
  }
}


/* ============================================================
   EPISODE MENU — каноническая версия (финальный override)
   ============================================================ */

/* Убеждаемся что родители не обрезают меню */
#anp-wrap,
#anp-video-container,
#anp-controls,
.anp-controls-row,
.anp-ep-inline-wrap {
  overflow: visible !important;
}

/* Обёртка кнопки серии */
.anp-ep-inline-wrap {
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* Кнопка серии */
.anp-ep-btn {
  position: relative;
  z-index: 2;
}

/* Меню — открывается ВВЕРХ от кнопки */
#anp-ep-menu {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  min-width: 280px !important;
  max-width: 360px !important;
  max-height: 420px !important;
  background: linear-gradient(180deg, rgba(20,20,24,.99), rgba(12,12,16,.99)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.9),
    0 0 0 1px rgba(230,57,70,.15),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  display: none;
}

/* Меню открыто (inline style display:block от JS) */
#anp-ep-menu[style*="block"],
#anp-ep-menu[style*="display: block"] {
  display: block !important;
}

/* Поиск и список */
.anp-ep-search-wrap {
  padding: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: linear-gradient(180deg, rgba(230,57,70,.06), transparent) !important;
}
#anp-ep-search {
  width: 100% !important;
  padding: 11px 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  outline: none !important;
}
#anp-ep-search:focus {
  border-color: rgba(230,57,70,.5) !important;
}
#anp-ep-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
  gap: 6px !important;
  padding: 12px !important;
  max-height: 340px !important;
  overflow-y: auto !important;
}
#anp-ep-list::-webkit-scrollbar { width: 6px; }
#anp-ep-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E63946, #ff6b35) !important;
  border-radius: 100px;
}
.anp-ep-item {
  padding: 10px 4px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 9px !important;
  color: #c8c8d8 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}
.anp-ep-item:hover {
  background: rgba(230,57,70,.15) !important;
  border-color: rgba(230,57,70,.5) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.anp-ep-item.active {
  background: linear-gradient(135deg, #E63946, #ff6b35) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(230,57,70,.5) !important;
}

/* === Мобильная версия — bottom-sheet снизу === */
@media (max-width: 768px) {
  #anp-ep-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22,.9,.32,1);
    visibility: hidden;
    display: block !important;
    overflow: hidden !important;
  }
  #anp-ep-menu[style*="block"] {
    transform: translateY(0) !important;
    visibility: visible !important;
  }
  #anp-ep-menu::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 100px;
    margin: 10px auto 4px;
  }
  #anp-ep-list {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    max-height: calc(70vh - 120px) !important;
    padding: 12px 14px 20px !important;
  }
  .anp-ep-item {
    padding: 14px 4px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
}


/* ============================================================
   COMMENTS v2 — дерево, кнопки, спойлер
   ============================================================ */

.comments-section h2 {
  margin-bottom: 20px;
  font-size: 22px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* === Форма добавления === */
.comment-form {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
}
.comment-form-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-form textarea {
  flex: 1;
  min-height: 70px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color .2s;
  resize: vertical;
}
.comment-form textarea:focus {
  border-color: rgba(230,57,70,.5);
  background: rgba(255,255,255,.05);
}
.comment-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.comment-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  user-select: none;
  margin-right: auto;
}
.comment-checkbox input {
  accent-color: #E63946;
  width: 15px;
  height: 15px;
}

/* === Карточка комментария === */
.comment {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.comment:last-child { border-bottom: none; }

.comment-is-reply {
  padding-left: 18px;
  margin-left: 58px;
  border-left: 2px solid rgba(230,57,70,.25);
  border-bottom: none;
  padding-top: 12px;
  padding-bottom: 8px;
}

.comment-deleted {
  opacity: .55;
}
.comment-deleted .c-text {
  font-style: italic;
  color: var(--text-faint);
}
.comment-deleted .comment-actions { display: none !important; }

/* === Аватар и тело === */
.c-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.c-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.c-body { flex: 1; min-width: 0; }

.c-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.c-name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.1px;
}
.c-role {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.c-role-admin {
  background: linear-gradient(135deg, rgba(230,57,70,.25), rgba(255,107,53,.15));
  border-color: rgba(230,57,70,.5);
  color: #ff8c94;
  box-shadow: 0 2px 10px rgba(230,57,70,.3);
}
.c-time {
  font-size: 11.5px;
  color: var(--text-faint);
}
.c-edited {
  font-size: 10.5px;
  color: var(--text-faint);
  font-style: italic;
  opacity: .8;
}

.c-text {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* === Спойлер === */
.c-text .spoiler {
  display: inline;
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.35);
  border-radius: 5px;
  padding: 1px 8px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
  margin: 0 2px;
}
.c-text .spoiler:hover {
  background: rgba(168,85,247,.2);
}
.c-text .spoiler .spoiler-hint {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}
.c-text .spoiler .spoiler-content {
  display: none;
  color: var(--text-dim);
  user-select: text;
  cursor: text;
}
.c-text .spoiler.revealed {
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.2);
  cursor: text;
  user-select: text;
}
.c-text .spoiler.revealed .spoiler-hint { display: none; }
.c-text .spoiler.revealed .spoiler-content { display: inline; }

/* === Кнопки под комментом === */
.comment-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.c-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.c-action:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.1);
}
.c-action-danger:hover {
  background: rgba(230,57,70,.12);
  border-color: rgba(230,57,70,.35);
  color: #ff8c94;
}

/* === Inline-формы (ответ / редактирование) === */
.comment-reply-form, .comment-edit-form {
  margin-top: 12px;
  padding: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: comment-form-in .25s ease-out;
}
.comment-reply-form[hidden], .comment-edit-form[hidden] {
  display: none;
}
@keyframes comment-form-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.comment-reply-form textarea,
.comment-edit-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}
.comment-reply-form textarea:focus,
.comment-edit-form textarea:focus {
  border-color: rgba(230,57,70,.5);
  background: rgba(255,255,255,.05);
}

/* === Вложенные ответы === */
.comment-replies {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}

/* === Адаптив === */
@media (max-width: 640px) {
  .comment-form {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
  }
  .comment-form .c-avatar {
    width: 40px;
    height: 40px;
  }
  .comment-form textarea {
    min-height: 80px;
    font-size: 14px;
  }
  .comment-form button[type="submit"] {
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
  }
  .comment {
    gap: 10px;
    padding: 14px 0;
  }
  .comment-is-reply {
    margin-left: 22px;
    padding-left: 12px;
  }
  .c-avatar { width: 38px; height: 38px; }
  .c-name { font-size: 13.5px; }
  .c-text { font-size: 13.5px; }
  .c-action {
    font-size: 11.5px;
    padding: 5px 8px;
  }
  .comment-reply-form textarea,
  .comment-edit-form textarea {
    font-size: 13px;
  }
}


/* ============ МОБИЛЬНАЯ АДАПТАЦИЯ v2 ============ */


/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ v2 — правки 2026-09-26
   Перекрывает старые @media в style.css и anime.html
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 1. ПЛЕЕР: не растягивается на весь экран ---------- */
  #anp-video-container {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 60vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  #anp-video, #anp-iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  #anp-wrap, .anp-main {
    padding: 8px !important;
  }

  /* ---------- 2. МЕНЮ КАЧЕСТВА / ОЗВУЧКИ / СЕРИЙ / СКОРОСТИ ---------- */
  /* Превращаем в bottom-sheet — не вылезает за экран */
  #anp-voices-menu,
  #anp-q-menu,
  #anp-ep-menu,
  #anp-speed-menu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 55vh !important;
    border-radius: 16px !important;
    z-index: 9999 !important;
  }
  #anp-voices,
  #anp-q-list,
  #anp-ep-list {
    max-height: calc(55vh - 60px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Уменьшаем размеры строк */
  .voice-btn {
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
  .voice-name, .anp-voice-name {
    font-size: 13px !important;
  }
  .voice-quality, .anp-q-tag {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  #anp-q-list .q-btn {
    padding: 12px 16px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* ---------- 3. КНОПКИ СТАТУСА: сетка 2x2 ---------- */
  .status-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: unset !important;
    margin-top: 12px !important;
  }
  .status-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .status-btn span:first-child {
    margin-right: 4px;
  }

  /* ---------- 4. ЖАНРЫ: прижаты к левому краю, не центрируются ---------- */
  .a-tags, .a-detail-tags, .a-genres, .anime-genres,
  .tags-row, .tag-list, .anp-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .a-tag, .a-genre-tag, .genre-tag, .tag, .a-detail-tag {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    line-height: 1.2 !important;
  }

  /* ---------- 5. КОНТРОЛЫ ПЛЕЕРА: удобные для тапа ---------- */
  .anp-ctrl {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .anp-ctrl-btn {
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  #anp-play-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #anp-ep-toggle, #anp-voice-trigger, #anp-q-trigger, #anp-speed {
    min-height: 38px !important;
  }
  #anp-ep-current {
    display: none !important;   /* на мобилке только номер серии */
  }
  .anp-voice-label {
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ---------- 6. SAFE AREA для iPhone ---------- */
  #anp-controls {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  /* ---------- 7. АЛЬТ-НАЗВАНИЯ / ОПИСАНИЕ ---------- */
  .anp-alt-list {
    max-height: 240px !important;
    overflow-y: auto !important;
  }
  .anp-desc-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЕ ЭКРАНЫ (360px и меньше) ---------- */
@media (max-width: 400px) {
  #anp-video-container {
    max-height: 50vh !important;
  }
  #anp-voices-menu,
  #anp-q-menu,
  #anp-ep-menu,
  #anp-speed-menu {
    max-height: 60vh !important;
  }
  .status-btn {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  .a-tag, .a-genre-tag, .genre-tag, .tag {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  #anp-ep-current {
    display: none !important;
  }
  .anp-voice-label {
    max-width: 50px !important;
  }
}

/* ---------- ПЛАНШЕТЫ (768-1024) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  #anp-video-container {
    aspect-ratio: 16 / 9 !important;
    max-height: 70vh !important;
  }
}