/* ================= ШРИФТ ================= */
/* Nunito лежит внутри проекта, а не грузится с fonts.googleapis.com.

   Так сайт не зависит от чужого сервера: нет сети или закрыт домен —
   шрифт всё равно свой. И браузер посетителя больше никуда не ходит:
   раньше он сам приносил Google свой адрес и адрес страницы.

   Взяты только используемые начертания (400, 600, 700, 800), без
   курсива, и только кириллица с латиницей. unicode-range оставлен как
   есть: браузер скачивает лишь тот файл, символы из которого реально
   встретились на странице. */
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/nunito-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/nunito-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/nunito-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/nunito-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/nunito-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/nunito-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/nunito-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/nunito-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/nunito-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('/static/fonts/nunito-cyrillic-800.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('/static/fonts/nunito-latin-ext-800.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('/static/fonts/nunito-latin-800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================== единые токены оформления ================== */
:root{
  --mint:#84CBB6; --sky:#8DB5DF; --lilac:#AEA1D8; --sand:#D9A97F;
  --warn:#E3A76B; --alert:#DE8A8A;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --card-min:178px;
  --shadow-soft:0 14px 34px -18px rgba(0,0,0,.72);
  --shadow-lift:0 22px 46px -20px rgba(0,0,0,.8);
  /* Тень под кнопкой при наведении. Раньше здесь светилось мятным —
     кнопка будто подсвечивалась изнутри, и на тёмном фоне это било
     по глазам. Обычная мягкая тень отвечает на тот же вопрос
     («мышь здесь»), но не кричит. */
  --shadow-hover:0 10px 22px -12px rgba(0,0,0,.85);
  --shadow-press:0 3px 10px -6px rgba(0,0,0,.9);
  /* Одна кривая на все движения: так они выглядят как одна система,
     а не как десять разных анимаций, написанных в разное время. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --fast:.16s; --mid:.24s; --slow:.4s;
}
html[data-depth="deep"]{--bg:#191C24;--surface:#22262F;--surface-2:#2A2F3A;--line:#333846;
  --text:#E5E3EA;--dim:#959AA9;--dimmer:#6F7484}
html[data-depth="mid"]{--bg:#2C313C;--surface:#363C49;--surface-2:#414857;--line:#4B5262;
  --text:#EBE9F0;--dim:#A8ADBB;--dimmer:#848A99}
/* ================== ТЕМЫ ==================
   Каждая тема — свой набор цветов, и у каждой два варианта под
   переключатель «Фон: глубже / мягче». Идут после html[data-depth],
   потому что вес правил одинаковый и решает порядок в файле.

   «Как сейчас» повторяет исходные значения намеренно: так все четыре
   темы устроены одинаково, и ни одна не оказывается особенной. */

/* ---------- Как сейчас ---------- */
html[data-theme="kak-seychas"]{--bg:#191C24;--surface:#22262F;--surface-2:#2A2F3A;--line:#333846;
  --text:#E5E3EA;--dim:#959AA9;--dimmer:#6F7484}
html[data-theme="kak-seychas"][data-depth="mid"]{--bg:#2C313C;--surface:#363C49;--surface-2:#414857;
  --line:#4B5262;--text:#EBE9F0;--dim:#A8ADBB;--dimmer:#848A99}

/* ---------- Ночь: холоднее и глубже ---------- */
html[data-theme="noch"]{--bg:#0E1119;--surface:#161A24;--surface-2:#1D2230;--line:#2A3145;
  --text:#E2E7F2;--dim:#8C96AC;--dimmer:#626C84}
html[data-theme="noch"][data-depth="mid"]{--bg:#191E2B;--surface:#222839;--surface-2:#2B3245;
  --line:#38405A;--text:#E8ECF6;--dim:#99A2B8;--dimmer:#6F7890}

/* ---------- Уголь: почти чёрный, для тёмных комнат и OLED ---------- */
html[data-theme="ugol"]{--bg:#0A0B0E;--surface:#131519;--surface-2:#1A1D23;--line:#262931;
  --text:#E6E4E9;--dim:#8C8F97;--dimmer:#61646C}
html[data-theme="ugol"][data-depth="mid"]{--bg:#15171C;--surface:#1E2128;--surface-2:#262A32;
  --line:#343841;--text:#EAE8ED;--dim:#999CA4;--dimmer:#6E717A}

/* ---------- Бумага: светлая ----------
   Здесь же переопределены тени: чёрная тень в 85% прозрачности,
   уместная на тёмном фоне, на светлом выглядит грязным пятном. */
html[data-theme="bumaga"]{--bg:#EFEBE2;--surface:#FFFFFF;--surface-2:#F6F2EA;--line:#DCD5C8;
  --text:#22201C;--dim:#6B6459;--dimmer:#857E70;
  --shadow-soft:0 12px 28px -18px rgba(60,50,35,.42);
  --shadow-lift:0 18px 40px -20px rgba(60,50,35,.5);
  --shadow-hover:0 8px 18px -10px rgba(60,50,35,.5);
  --shadow-press:0 3px 8px -5px rgba(60,50,35,.55)}
html[data-theme="bumaga"][data-depth="mid"]{--bg:#F8F5EF;--surface:#FFFFFF;--surface-2:#FBF8F3;
  --line:#E7E1D6;--text:#2A2823;--dim:#665F53;--dimmer:#8C8577}

/* Заглушка обложки была нарисована тремя тёмно-синими цветами прямо в
   правиле — на светлой теме получалась чёрная дыра посреди страницы.
   Теперь она из тех же переменных, что и всё остальное. */
html[data-accent="mint"] {--mint:#84CBB6}
html[data-accent="sky"]  {--mint:#8DB5DF}
html[data-accent="lilac"]{--mint:#AEA1D8}
html[data-accent="sand"] {--mint:#D9A97F}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:Nunito,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .35s ease}
h1,h2,h3,h4{font-family:Nunito,system-ui,sans-serif;font-weight:800;letter-spacing:-.015em}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* сообщение об ошибке */
.err{display:none;margin-top:12px;padding:10px 13px;border-radius:var(--r-sm);font-size:13.5px;
  background:color-mix(in srgb,var(--alert) 15%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--alert) 34%,var(--line));color:var(--text)}
.err.show{display:block}
.busy{opacity:.6;pointer-events:none}
[hidden]{display:none!important}
.ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ==================== ГЛАВНАЯ ==================== */
/* ================= ЛОГОТИП ================= */
.mark{width:34px;height:34px;flex:none;border-radius:11px;display:block}

/* ================= ЭКРАН ВХОДА ================= */
.gate{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;padding:24px;overflow-y:auto;
}
.gate.hide{display:none}
.gate .aura{
  position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(120px);opacity:.2;
  background:radial-gradient(circle,var(--sky),transparent 70%);top:-140px;left:50%;margin-left:-260px;
  pointer-events:none;
}
.gate .aura2{
  position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(120px);opacity:.16;
  background:radial-gradient(circle,var(--mint),transparent 70%);bottom:-160px;right:-80px;pointer-events:none;
}
.box{
  position:relative;width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px 26px;
  box-shadow:var(--shadow-lift);
}
.box .top{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.box .top b{font-family:Nunito;font-weight:700;font-size:20px}
.box h2{font-size:20px;font-weight:700;margin:0 0 5px}
.box .lead{color:var(--dim);font-size:14px;margin:0 0 20px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:6px;font-family:Nunito;font-weight:600}
.field input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-sm);padding:11px 14px;font-family:inherit;font-size:15px;transition:.2s;
}
.field input::placeholder{color:var(--dimmer)}
.field input:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sky) 22%,transparent)}
.wide{
  width:100%;border:none;cursor:pointer;background:var(--mint);color:#16201D;
  border-radius:999px;padding:12px;font-family:Nunito;font-weight:700;font-size:15px;transition:.2s;
}
.wide:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);filter:brightness(1.05)}
.wide:active{transform:translateY(0) scale(.985);box-shadow:var(--shadow-press);transition-duration:.06s}
.wide.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.wide.ghost:hover{box-shadow:var(--shadow-hover);border-color:var(--dimmer);filter:none}
.split{display:flex;align-items:center;gap:11px;margin:18px 0;color:var(--dimmer);font-size:12px}
.split::before,.split::after{content:'';flex:1;height:1px;background:var(--line)}
.locked{
  margin-top:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-size:12.5px;color:var(--dim);display:flex;gap:9px;align-items:flex-start;
}
.locked svg{flex:none;margin-top:2px}
.gate .langrow{display:flex;justify-content:center;gap:6px;margin-top:16px}

/* ================= ПЕРЕКЛЮЧАТЕЛИ ================= */
.seg{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:999px;border:1px solid var(--line)}
/* Пять кнопок подряд в одну строку не влезают — этому ряду разрешено
   переноситься. Остальным нельзя: там по две-три кнопки. */
.seg.wrap{flex-wrap:wrap;border-radius:var(--r-md)}
.seg button{
  border:none;background:none;color:var(--dim);cursor:pointer;border-radius:999px;
  font-family:Nunito;font-weight:600;font-size:13px;padding:6px 12px;transition:.2s;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface-2);color:var(--text)}

/* ================= ПЛАШКА ГОСТЯ ================= */
.stickytop{position:sticky;top:0;z-index:80}
.guest{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 24px;background:color-mix(in srgb,var(--sky) 15%,var(--surface));
  border-bottom:1px solid color-mix(in srgb,var(--sky) 30%,var(--line));
  font-size:13.5px;
}
.guest.show{display:flex}
.guest .in{max-width:1160px;margin:0 auto;width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.guest .tag{
  background:var(--sky);color:#151D27;border-radius:999px;padding:2px 10px;
  font-family:Nunito;font-weight:700;font-size:11.5px;flex:none;
}
.guest .clock{font-family:Nunito;font-weight:700;font-variant-numeric:tabular-nums}
.guest .txt{color:var(--dim)}
.guest .sp{flex:1;min-width:6px}
.guest .rail{height:4px;border-radius:99px;background:color-mix(in srgb,#000 24%,transparent);
  position:relative;width:150px;flex:none}
.guest .rail i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--sky);transition:width 1s linear}
.guest .mini-btn{
  border:1px solid var(--line);background:var(--surface);color:var(--dim);cursor:pointer;
  border-radius:999px;padding:4px 11px;font-size:12px;font-family:Nunito;font-weight:600;
}
.guest .mini-btn:hover{color:var(--text)}
/* предупреждение и последняя минута */
.guest.warn{background:color-mix(in srgb,var(--warn) 17%,var(--surface));
  border-bottom-color:color-mix(in srgb,var(--warn) 34%,var(--line))}
.guest.warn .tag{background:var(--warn)} .guest.warn .rail i{background:var(--warn)}
.guest.last{background:color-mix(in srgb,var(--alert) 18%,var(--surface));
  border-bottom-color:color-mix(in srgb,var(--alert) 36%,var(--line))}
.guest.last .tag{background:var(--alert)} .guest.last .rail i{background:var(--alert)}
.guest .lastmsg{display:none;width:100%;color:var(--text);font-size:13px;padding-top:2px}
.guest.last .lastmsg{display:block}

/* ================= ШАПКА ================= */
header{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
/* Ширина шапки у каждой страницы своя, поэтому и правило своё.
   Раньше все три назывались просто .bar, и выигрывало последнее —
   шапка главной жила по ширине от страницы итогов. */
[data-page="index"] .bar{max-width:1160px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.brand b{font-family:Nunito;font-weight:700;font-size:19px;white-space:nowrap}
.brand b i{font-style:normal;color:var(--mint)}
.find{flex:1;min-width:170px;position:relative}
.find input{
  width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:999px;padding:11px 18px 11px 42px;font-family:inherit;font-size:15px;transition:.22s;
}
.find input::placeholder{color:var(--dimmer)}
.find input:focus{outline:none;border-color:var(--sky);background:var(--surface-2);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sky) 22%,transparent)}
.find::before{
  content:'';position:absolute;left:17px;top:50%;width:11px;height:11px;margin-top:-7px;
  border:1.7px solid var(--dimmer);border-radius:50%;box-shadow:6px 6px 0 -4.6px var(--dimmer);
}
/* Стили вкладок убраны вместе с самими вкладками: список один. */
.iconbtn{
  width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--dim);cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.iconbtn:hover{color:var(--text);border-color:var(--dimmer)}
.iconbtn.accent{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 40%,var(--line))}
.who{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 12px}
.who span{font-size:13px;color:var(--dim);white-space:nowrap}
.who button{border:none;background:var(--surface-2);color:var(--dim);cursor:pointer;border-radius:999px;
  padding:5px 11px;font-family:Nunito;font-weight:600;font-size:12.5px}
.who button:hover{color:var(--text)}

main{max-width:1160px;margin:0 auto;padding:0 24px 90px}

/* ================= ВЕРХ: ряд + счётчики ================= */
.topline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 14px}
.topline h2{font-family:Nunito;font-size:20px;font-weight:700;margin:0}
.topline .cnt{font-size:13.5px;color:var(--dim)}
.topline .sp{flex:1;min-width:8px}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{display:flex;align-items:baseline;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;white-space:nowrap}
.pill b{font-family:Nunito;font-weight:700;font-size:14.5px;line-height:1}
.pill span{font-size:12px;color:var(--dim)}
.pill.accent b{color:var(--mint)}
.pill.cool b{color:var(--sky)}

/* «Продолжить».
   Раньше это была лента с прокруткой вбок (.rowline): помещалось
   три-четыре карточки, остальные надо было утаскивать мышью, и сколько
   их всего — было не видно. Теперь сетка: всё сразу на виду и само
   переносится по ширине экрана. */
.contgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mini{
  display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px;transition:.22s;position:relative;min-width:0;
}
.mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--dimmer)}
.mini .mp{width:52px;height:70px;border-radius:9px;overflow:hidden;position:relative;flex:none;
  background:var(--surface-2)}
.mini .mp i{position:absolute;inset:0;background-size:cover;background-position:center}
.mini .mp .noart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Nunito;font-weight:700;font-size:20px;color:var(--dimmer)}
.mini .mb{min-width:0;flex:1}
.mini h4{font-family:Nunito;font-weight:700;font-size:14px;margin:0 0 3px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .ms{font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.mini .ms b{color:var(--text);font-family:Nunito;font-weight:700}
.mini .ms .at{color:var(--mint);font-family:Nunito;font-weight:700}
.mini .mr{height:4px;border-radius:99px;background:var(--surface-2);margin-top:7px;position:relative}
.mini .mr i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--sky)}
.mini .mleft{font-size:11.5px;color:var(--dimmer);margin-top:5px}

/* ================= СЕТКА ================= */
.sec{display:flex;align-items:baseline;gap:12px;margin:38px 0 18px}
.sec h2{font-size:21px;font-weight:700;margin:0}
.sec span{font-size:14px;color:var(--dim)}
.sec .sp{flex:1}
.sec a{font-family:Nunito;font-weight:600;font-size:14px;color:var(--sky);text-decoration:none}
.sec a:hover{text-decoration:underline}

/* Карточки в ряду одной высоты: тогда полосы прогресса встают на одну
   линию, как бы ни различалась длина названий. Обложки при этом
   остаются наверху — карточка внутри колонка. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));
  gap:26px 20px;align-items:stretch}
.card{text-decoration:none;color:inherit;position:relative;padding-bottom:2px;
  display:flex;flex-direction:column}
.card .wrap{position:relative;border-radius:var(--r-md)}
.card .pic{position:relative;aspect-ratio:3/4.2;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-soft);transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s}
.card .pic i{position:absolute;inset:0}
.card:hover .pic{transform:translateY(-6px);box-shadow:var(--shadow-lift)}/* ---------- строка прогресса под названием ---------- */
/* Полоса лежала на самой обложке, у нижнего края, а число — плашкой в
   углу. Под ними был не фон, а кадр из аниме: на светлых и пёстрых
   обложках их попросту не было видно, и это оставалось делом везения.
   Здесь под ними всегда один и тот же фон страницы. */
/* margin-top:auto прижимает строку к низу карточки — из-за этого
   полосы соседних карточек оказываются на одной линии даже когда одно
   название занимает строку, а другое три. */
.cprog{display:flex;align-items:center;gap:9px;margin:auto 2px 0;padding-top:10px;
  min-height:14px}
.cbar{
  flex:1;min-width:0;height:7px;border-radius:99px;position:relative;overflow:hidden;
  background:var(--surface-2);
  /* Своя обводка: без неё дорожка сливается с фоном. */
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent);
}
.cbar i{
  position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,
             color-mix(in srgb,var(--mint) 58%,var(--sky)),
             var(--mint));
}
/* Кружок на конце заливки: отмечает, где именно вы остановились. */
.cbar i::after{
  content:'';position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--bg) 82%,transparent);
}
.cprog.full .cbar i::after{display:none}
.cnum{
  flex:none;font-family:Nunito;font-weight:700;font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cprog.full .cnum{color:var(--mint)}
/* Считать долю не от чего — полосы нет, но высота строки сохраняется,
   иначе карточки в ряду разъедутся. */
.cprog.nobar .cbar{visibility:hidden}
.cbar i{transform-origin:left center;animation:growLine .5s var(--ease) both .12s}
.cnum{animation:fadeIn .34s var(--ease) both .18s}

/* Название под обложкой.

   Обрезать многоточием не стали намеренно: точки съедают ровно ту
   часть, по которой тайтл и узнают, — «Вторая атака», «часть вторая»,
   номер сезона. Пусть лучше название займёт три строки.

   Чтобы от разной длины не рвался ряд, под название отведено место
   под две строки: короткие названия его добирают пустотой, длинные
   растут вниз, а верх у всех карточек в ряду совпадает. */
.card h3{font-family:Nunito;font-weight:700;font-size:15px;line-height:1.35;
  margin:14px 2px 0;overflow-wrap:anywhere}

/* Кнопка «убрать из списка». Единственный свободный угол обложки —
   правый нижний: справа сверху счётчик серий, слева сверху «продолжить»,
   слева снизу секунда остановки, по низу полоса прогресса. Отступ снизу
   в 22px поднимает кнопку ровно над полосой, чтобы она её не задевала.
   На мыши появляется при наведении, чтобы не мельтешить в сетке. На
   сенсорном экране наведения не бывает, поэтому там она видна всегда:
   иначе кнопки просто не существует для телефона. */
.card .del{position:absolute;right:9px;bottom:9px;z-index:4;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);
  color:var(--dim);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .16s,color .16s,border-color .16s,background .16s}
.card:hover .del,.card .del:focus-visible{opacity:1}
.card .del:hover{color:var(--sand);border-color:var(--sand);
  background:color-mix(in srgb,var(--bg) 92%,transparent)}
@media (hover:none){.card .del{opacity:1}}

/* ================= СЕРИИ ================= */
.eps-box{margin-top:52px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-soft)}
.eps-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.eps-head h3{font-size:18px;font-weight:700;margin:0}
.eps-head span{font-size:13.5px;color:var(--dim)}
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.ep{border:1px solid var(--line);background:var(--surface-2);color:var(--dim);border-radius:var(--r-sm);
  padding:11px 0;cursor:pointer;font-family:Nunito;font-weight:600;font-size:14px;transition:.18s}
.ep:hover{color:var(--text);border-color:var(--dimmer);transform:translateY(-2px)}
.ep.seen{background:transparent;color:var(--dimmer);border-color:transparent}
.ep.seen::after{content:' ✓';color:var(--mint);font-size:11px}
.ep.now{background:var(--sky);border-color:var(--sky);color:#151D27;box-shadow:var(--shadow-hover)}

/* Свой фон обязателен: праздничный задник лежит ниже, и без фона
   надгробия проступали сквозь текст — выглядело как поломка. */
[data-page="index"] footer{border-top:1px solid var(--line);margin-top:56px;
  background:var(--bg);position:relative;z-index:1}
.beta{max-width:62ch;line-height:1.45}
.footlinks{display:flex;gap:18px;align-items:center;flex:none}

/* ---------- страница правил ---------- */
/* Страница короткая, и без этого футер повисал посреди экрана, а под
   ним оставалась пустота. Растягиваем на всю высоту окна. */
[data-page="pravila"] body{min-height:100vh;display:flex;flex-direction:column}
[data-page="pravila"] main{flex:1}
.pravila{max-width:760px;margin:0 auto;width:100%;padding:36px 24px 60px}
.pravila h1{font-size:clamp(26px,4vw,34px);margin:0 0 20px}
.pravila-text{font-size:15.5px;line-height:1.65;color:var(--text)}
.pravila-text h2{font-size:19px;margin:30px 0 8px}
.pravila-text p{margin:0 0 14px}
.pravila-text ol,.pravila-text ul{margin:0 0 14px;padding-left:22px}
.pravila-text li{margin-bottom:7px}
.pravila .lead{color:var(--dim);font-size:15px;margin:0 0 26px;max-width:60ch}
.pravila-text .pusto{color:var(--dim)}
/* Главный абзац раздела об ответственности: он и есть причина, по
   которой страницу открывают, — выделяем рамкой, а не капслоком. */
.pravila-text .vazhno{
  border:1px solid color-mix(in srgb,var(--sand) 45%,var(--line));
  background:color-mix(in srgb,var(--sand) 9%,transparent);
  border-radius:var(--r-md);padding:14px 16px;margin:0 0 14px;
  font-family:Nunito;font-weight:600;
}
[data-page="pravila"] footer{border-top:1px solid var(--line);background:var(--bg)}
[data-page="pravila"] .bar{max-width:760px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:14px}
[data-page="pravila"] footer .in{max-width:760px;margin:0 auto;padding:20px 24px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim)}
footer .in{max-width:1160px;margin:0 auto;padding:20px 24px;display:flex;
  justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}

/* Плашка над плеером: почему смотреть нечего */
.notice{
  display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;padding:13px 16px;
  border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--sand) 45%,var(--line));
  background:color-mix(in srgb,var(--sand) 12%,var(--surface));
}
.notice[hidden]{display:none}
.notice .ic{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--sand);color:#20180E;
  display:flex;align-items:center;justify-content:center;
  font-family:Nunito;font-weight:700;font-size:14px;line-height:1;
}
.notice .tx{min-width:0;font-size:13.5px;color:var(--dim);line-height:1.45}
.notice .tx b{display:block;color:var(--text);font-family:Nunito;font-weight:700;
  font-size:14.5px;margin-bottom:2px}

/* Полный экран.
   Без этих строк контейнер уходит в полный экран, а внутри остаётся
   прежняя коробка с соотношением сторон: маленькое видео посреди
   огромного чёрного поля. Со стороны выглядит как «кнопка не работает». */
#screen:fullscreen{width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}
#screen:fullscreen video{width:100%;height:100%;object-fit:contain}
#screen:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}
#screen:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}
footer a{color:var(--sky);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ================= ОКНО «ПРО САЙТ» ================= */
.veil{position:fixed;inset:0;z-index:150;background:rgba(8,10,14,.72);backdrop-filter:blur(5px);
  display:none;place-items:center;padding:22px;overflow-y:auto}
.veil.show{display:grid}
.sheet{
  position:relative;width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-lift);
}
.sheet .close{position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--dim);cursor:pointer;font-size:17px;line-height:1}
.sheet .close:hover{color:var(--text)}
.sheet .chip{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--lilac) 18%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--lilac) 34%,var(--line));border-radius:999px;padding:5px 13px;
  font-family:Nunito;font-weight:700;font-size:12px;color:var(--lilac);margin-bottom:15px}
.sheet h3{font-size:22px;font-weight:700;margin:0 0 12px}
.sheet p{color:var(--dim);font-size:14.5px;margin:0 0 13px}
.sheet p.strong{color:var(--text)}
.made{display:grid;gap:8px;margin:18px 0}
.made .r{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px}
.made .r b{font-family:Nunito;font-weight:700;font-size:13.5px;min-width:104px}
.made .r span{font-size:13px;color:var(--dim)}
.made .r .who-ai{color:var(--lilac)} .made .r .who-me{color:var(--mint)}

/* ================= ФИЛЬТРЫ ================= */
.filtbtn{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--dim);border-radius:999px;padding:10px 16px;cursor:pointer;flex:none;
  font-family:Nunito;font-weight:600;font-size:14px;transition:.2s;
}
.filtbtn:hover{color:var(--text);border-color:var(--dimmer)}
.filtbtn.on{background:color-mix(in srgb,var(--mint) 16%,var(--surface));border-color:var(--mint);color:var(--text)}

/* Стили панели фильтров (.filters, .frow, .chips, .chip, .fbot) удалены
   вместе с самой панелью: она отбирала только среди уже сохранённого,
   а искать новое аниме по жанрам источники не умеют.
   .chip остался только внутри .sheet — это значок «Собрано с ИИ». */

.empty{
  display:none;text-align:center;padding:44px 20px;color:var(--dim);
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);
}
.empty.show{display:block}
.empty b{display:block;font-family:Nunito;font-weight:700;font-size:16px;color:var(--text);margin-bottom:5px}
.card.hidden{display:none}

/* ================= РУЛЕТКА ================= */
.roul{
  position:relative;width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lift);text-align:center;
}
.roul h3{margin:0 0 4px;font-size:20px;font-weight:700}
.roul .sub{color:var(--dim);font-size:13.5px;margin-bottom:20px}

.roul .pickres{display:none;margin-bottom:16px}
.roul.done .pickres{display:block}
.roul .pickres .m{font-size:12.5px;color:var(--dim)}
/* Обложка выпавшего тайтла: раньше результат был одной строкой текста */
.roul .pickres .cover{
  width:96px;aspect-ratio:3/4.2;margin:2px auto 12px;border-radius:var(--r-md);
  background:var(--surface-2);background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;
}
.roul .pickres .cover .noart{font-family:Nunito;font-weight:700;font-size:30px;color:var(--dimmer)}
.roul .pickres .nm{font-family:Nunito;font-weight:700;font-size:19px;margin:3px 0 2px}
/* Кнопка «Смотреть» появляется только вместе с результатом */
.roul #roul-watch{display:none;text-decoration:none;text-align:center;margin-bottom:9px}
.roul.done #roul-watch{display:block}

/* ================= ЭКРАН ЗАГРУЗКИ ================= */
.boot{
  position:fixed;inset:0;z-index:190;background:var(--bg);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:26px;text-align:center;
}
.boot.show{display:flex}
.boot.show .bootline{animation:fadeIn .5s var(--ease) both .15s}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- общий индикатор загрузки ---------- */
/* Три точки, идущие волной. Кольцо на медленной машине выглядит
   замершим — непонятно, идёт что-то или сайт умер. У точек фаза
   разная, поэтому движение видно даже на одном кадре. */
.loader{display:flex;gap:7px;align-items:center;justify-content:center}
.loader i{width:9px;height:9px;border-radius:50%;background:var(--mint);
  animation:dotWave 1.05s var(--ease) infinite}
.loader i:nth-child(2){animation-delay:.14s}
.loader i:nth-child(3){animation-delay:.28s}
.loader.dark i{background:#fff}
@keyframes dotWave{
  0%,70%,100%{transform:translateY(0) scale(.82);opacity:.42}
  35%        {transform:translateY(-8px) scale(1);opacity:1}
}

/* ---------- экран загрузки ---------- */
.bootmark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--mint);color:#12211C;animation:markBeat 1.8s var(--ease) infinite}
@keyframes markBeat{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.06)}
}
.bootline{font-family:Nunito;font-weight:600;font-size:15px;color:var(--dim)}
/* Своё имя, а не .bar: с общим именем полоса забирала у шапки
   display:flex и padding:14px 24px и превращалась в серую таблетку. */
.bootbar{width:190px;height:3px;border-radius:99px;background:var(--surface-2);overflow:hidden;
  position:relative}
.bootbar i{display:block;height:100%;width:0;background:var(--mint);border-radius:99px;
  transition:width .25s var(--ease)}

/* ================= МЕТКА ПРОДОЛЖЕНИЯ ================= */
.at{
  display:inline-flex;align-items:center;gap:5px;color:var(--mint);
  font-family:Nunito;font-weight:700;font-size:12px;
}
.at svg{flex:none}/* ================= КАБИНЕТ ================= */
.who{cursor:pointer}
.who:hover{border-color:var(--dimmer)}
.ava{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:Nunito;font-weight:700;font-size:12px;color:#171A21;
  background-size:cover;background-position:center;overflow:hidden;
}
/* роль под именем */
.role{
  display:inline-block;margin-top:3px;border-radius:999px;padding:2px 10px;
  font-family:Nunito;font-weight:700;font-size:11px;letter-spacing:.04em;
  background:color-mix(in srgb,var(--mint) 20%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--mint) 38%,var(--line));color:var(--mint);
}
.role[data-kind="user"]{
  background:color-mix(in srgb,var(--sky) 20%,var(--surface-2));
  border-color:color-mix(in srgb,var(--sky) 38%,var(--line));color:var(--sky);
}
.role[data-kind="guest"]{
  background:color-mix(in srgb,var(--sand) 20%,var(--surface-2));
  border-color:color-mix(in srgb,var(--sand) 38%,var(--line));color:var(--sand);
}

.panel{
  position:relative;width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);overflow:hidden;
}
.panel .phead{display:flex;align-items:center;gap:13px;padding:22px 24px;border-bottom:1px solid var(--line)}
.panel .phead .ava{width:44px;height:44px;font-size:18px}
.panel .phead b{font-family:Nunito;font-weight:700;font-size:18px;display:block}
.panel .phead span{font-size:12.5px;color:var(--dim)}
.panel .pbody{padding:6px 24px 22px;max-height:min(66vh,620px);overflow-y:auto}
.panel .pfoot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px}

.grp{padding:18px 0;border-bottom:1px solid var(--line)}
.grp:last-child{border-bottom:none}
.grp > h4{font-family:Nunito;font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 13px}
.opt{display:flex;align-items:center;gap:14px;padding:8px 0;flex-wrap:wrap}
.opt .lb{flex:1;min-width:150px}
.opt .lb b{display:block;font-family:Nunito;font-weight:600;font-size:14.5px}
.opt .lb span{font-size:12.5px;color:var(--dim)}

.inp{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);
  padding:9px 12px;font-family:inherit;font-size:14px;min-width:150px;
}
.inp:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 2px color-mix(in srgb,var(--mint) 22%,transparent)}
select.inp{cursor:pointer}

/* переключатель да/нет */
.sw{width:44px;height:25px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);
  position:relative;cursor:pointer;flex:none;transition:.22s;padding:0}
.sw::after{content:'';position:absolute;left:3px;top:2.5px;width:18px;height:18px;border-radius:50%;
  background:var(--dimmer);transition:.22s}
.sw[aria-checked="true"]{background:color-mix(in srgb,var(--mint) 35%,var(--surface-2));border-color:var(--mint)}
.sw[aria-checked="true"]::after{left:22px;background:var(--mint)}

/* образцы цвета */
.swatches{display:flex;gap:8px}
.sc{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:.18s}
.sc:hover{transform:scale(1.09)}
.sc.on{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 14%,transparent)}

/* выбор логотипа */
/* ---------- карточки тем ---------- */
/* Настройка в столбик, а не в строку: карточки шире переключателей и
   в одну строку с подписью не помещаются. */
.opt.col{display:block}
.opt.col .lb{display:block;margin-bottom:10px}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.theme{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);
  padding:8px 8px 9px;cursor:pointer;display:grid;gap:7px;justify-items:stretch;
}
.theme .thpv{
  position:relative;display:block;height:46px;border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,#000 22%,transparent);overflow:hidden;
}
.theme .thbar{position:absolute;left:7px;right:7px;top:9px;height:15px;border-radius:4px}
.theme .thdot{position:absolute;left:7px;bottom:8px;width:11px;height:11px;border-radius:50%}
.theme .thnm{font-family:Nunito;font-weight:600;font-size:12.5px;color:var(--dim);text-align:center}
.theme:hover{border-color:var(--dimmer);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.theme:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-press)}
.theme.on{border-color:var(--text)}
.theme.on .thnm{color:var(--text)}
/* Галочка у выбранной — чтобы выбор читался не только по рамке. */
.theme.on .thpv::after{
  content:'';position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--text);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Подпись под настройкой. Имя .hint уже занято подписью в
   обрезчике аватарки, поэтому своё. */
.optnote{display:block;margin-top:9px;font-size:12px;line-height:1.45;color:var(--dimmer)}

.logos{display:flex;gap:9px;flex-wrap:wrap}
.logopick{
  width:52px;height:52px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  cursor:pointer;display:grid;place-items:center;transition:.18s;padding:0;
}
.logopick:hover{border-color:var(--dimmer)}
.logopick.on{border-color:var(--mint);box-shadow:0 0 0 2px color-mix(in srgb,var(--mint) 22%,transparent)}
.logo-v{display:none}
.logo-v.on{display:block}

/* блок администратора */
.adm{background:color-mix(in srgb,var(--lilac) 11%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--lilac) 26%,var(--line));border-radius:var(--r-md);padding:14px}
.adm .accs{display:grid;gap:7px;margin:11px 0}
.adm .acc{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 11px;font-size:13.5px}
.adm .acc .ava{width:22px;height:22px;font-size:10px}
.adm .acc .sp{flex:1}
.adm .acc em{font-style:normal;font-size:12px;color:var(--dim)}
.small{
  border:1px solid var(--line);background:var(--surface);color:var(--dim);cursor:pointer;
  border-radius:999px;padding:7px 14px;font-family:Nunito;font-weight:600;font-size:13px;transition:.2s;
}
.small:hover{color:var(--text);border-color:var(--dimmer)}
.small.warn{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 34%,var(--line))}

.saved{
  font-size:12.5px;color:var(--mint);opacity:0;transition:.3s;font-family:Nunito;font-weight:600;
  align-self:center;margin-left:auto;
}
.saved.show{opacity:1}

/* ---------- гостю настройки только на просмотр ---------- */
.lockbar{
  display:none;align-items:flex-start;gap:10px;margin:14px 0 2px;padding:11px 13px;
  background:color-mix(in srgb,var(--sand) 14%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--sand) 32%,var(--line));
  border-radius:var(--r-md);font-size:13px;color:var(--dim);
}
.lockbar.show{display:flex}
.lockbar b{color:var(--sand);font-family:Nunito;display:block;margin-bottom:2px;font-size:13.5px}
.pbody.ro .grp{opacity:.55;pointer-events:none}
.pbody.ro .lockbar{opacity:1;pointer-events:auto}
.pfoot.ro #set-save{display:none}

/* ---------- обрезка фото ---------- */
.cropwrap{max-width:300px}
.stage{
  width:220px;height:220px;border-radius:50%;overflow:hidden;position:relative;margin:0 auto 14px;
  background:var(--surface-2);border:1px solid var(--line);cursor:grab;touch-action:none;
}
.stage.drag{cursor:grabbing}
.stage img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
.stage::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mint) 60%,transparent);
}
.zoomrow{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.zoomrow span{font-size:12px;color:var(--dim);font-family:Nunito;font-weight:600}
input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:var(--surface-2);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--mint);cursor:pointer;
  border:none;box-shadow:0 3px 8px -3px #000;
}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--mint);
  cursor:pointer;border:none}
.hint{font-size:12px;color:var(--dimmer);text-align:center;margin-bottom:14px}

/* ---------- уведомления ---------- */
.bellwrap{position:relative}
.dotcount{
  position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;border-radius:99px;
  background:var(--sand);color:#1B140C;font-family:Nunito;font-weight:700;font-size:10.5px;
  display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg);
}
.drop{
  position:absolute;right:0;top:46px;width:min(340px,calc(100vw - 32px));z-index:90;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);overflow:hidden;display:none;
}
.drop.show{display:block}
.drop .dh{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.drop .dh b{font-family:Nunito;font-weight:700;font-size:14.5px}
.drop .dh span{font-size:11.5px;color:var(--dimmer);margin-left:auto}
.drop .dl{max-height:330px;overflow-y:auto}
.nrow{display:flex;gap:11px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.nrow:last-child{border-bottom:none}
.nrow:hover{background:var(--surface-2)}
.nrow .th{width:34px;height:46px;border-radius:8px;overflow:hidden;position:relative;flex:none}
.nrow .th i{position:absolute;inset:0}
.nrow .nb{min-width:0;flex:1}
.nrow .nb b{display:block;font-family:Nunito;font-weight:600;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .nb span{font-size:12px;color:var(--dim)}
.nrow .when{font-size:11.5px;font-family:Nunito;font-weight:700;white-space:nowrap;color:var(--dim)}
.nrow.fresh{background:color-mix(in srgb,var(--mint) 8%,transparent)}
.nrow.fresh .when{color:var(--mint)}
.nrow.soon .when{color:var(--sand)}
.drop .df{padding:10px 15px;font-size:12px;color:var(--dimmer);border-top:1px solid var(--line)}

/* ================= УВЕДОМЛЕНИЕ ПРИ ВХОДЕ ================= */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,26px);z-index:170;
  max-width:min(440px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--shadow-lift);
  display:flex;gap:11px;align-items:flex-start;opacity:0;pointer-events:none;transition:.35s;
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* Значок-щит вместо букв «ИИ»: плашка теперь про защиту входа. */
.toast .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mint) 20%,var(--surface-2));color:var(--mint)}
.toast .ic svg{display:block}
/* Кнопка «Включить» — на своей строке, чтобы не жалась к тексту. */
.toast #toast-go{margin-top:11px}
.toast .tx{font-size:13.5px;color:var(--dim);line-height:1.42}
.toast .tx b{color:var(--text);font-family:Nunito;display:block;margin-bottom:2px;font-size:14px}
.toast .x{border:none;background:none;color:var(--dimmer);cursor:pointer;font-size:17px;line-height:1;padding:0 2px}
.toast .x:hover{color:var(--text)}

@media (max-width:760px){
  .bar{gap:10px}
  .find{order:5;width:100%;flex-basis:100%}
  .guest .rail{display:none}
}

/* ==================== ПРОСМОТР ==================== */
/* ---------- шапка ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
[data-page="watch"] .bar{max-width:1240px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.back{display:flex;align-items:center;gap:8px;color:var(--dim);text-decoration:none;
  font-family:Nunito;font-weight:600;font-size:14px}
.back:hover{color:var(--text)}
.hcrumb{flex:1;min-width:0;font-size:13.5px;color:var(--dimmer);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcrumb b{color:var(--text);font-family:Nunito;font-weight:600}
/* Кнопка-значок описана один раз, в разделе шапки. */

/* ---------- каркас страницы ---------- */
.page{max-width:1240px;margin:0 auto;padding:22px 24px 80px;
  display:grid;grid-template-columns:1fr 316px;gap:26px;align-items:start}

/* ---------- плеер ---------- */
.player{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0D0F14;
  box-shadow:var(--shadow-lift)}
.screen{aspect-ratio:16/9;position:relative;overflow:hidden;display:grid;place-items:center}
.screen .bgart{position:absolute;inset:0;background:linear-gradient(155deg,#2B3B4A,#5C7285 52%,#101820)}
.screen .veilg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,transparent,rgba(8,10,14,.72))}
.playbtn{
  position:relative;z-index:3;width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;
  background:color-mix(in srgb,var(--mint) 92%,transparent);color:#16201D;
  display:grid;place-items:center;transition:.22s;box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
}
.playbtn:hover{transform:scale(1.06)}
.screen .titleover{position:absolute;left:22px;top:20px;z-index:3}
.screen .titleover .ep{font-family:Nunito;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint);margin-bottom:3px}
.screen .titleover h1{margin:0;font-size:clamp(19px,2.4vw,25px);font-weight:700}

/* дорожка времени */
.track{position:relative;height:5px;background:color-mix(in srgb,#fff 12%,transparent);cursor:pointer}
.track .buf{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,#fff 14%,transparent);width:74%}
.track .pos{position:absolute;left:0;top:0;bottom:0;background:var(--mint);width:38%}
.track .knob{position:absolute;left:38%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--mint);box-shadow:0 3px 10px -3px #000;transition:transform .18s}
.track:hover .knob{transform:scale(1.25)}
/* метки: опенинг и превью следующей серии */
.track .mark{position:absolute;top:0;bottom:0;width:2px;background:var(--sand);opacity:.75}

/* нижняя панель */
.ctrl{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#14171E;flex-wrap:wrap}
.cbtn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--dim);
  cursor:pointer;display:grid;place-items:center;transition:.16s;flex:none}
.cbtn:hover{background:#1E222B;color:var(--text)}
.time{font-family:Nunito;font-weight:600;font-size:13px;color:var(--dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.time b{color:var(--text)}
.ctrl .sp{flex:1;min-width:4px}

/* выпадающие настройки в панели */
.sel{position:relative}
.selbtn{
  display:flex;align-items:center;gap:7px;background:#1E222B;border:1px solid #2B303B;color:var(--dim);
  border-radius:999px;padding:7px 13px;cursor:pointer;font-family:Nunito;font-weight:600;font-size:13px;
  transition:.16s;white-space:nowrap;
}
.selbtn:hover{color:var(--text);border-color:#3A4150}
.selbtn i{font-style:normal;color:var(--text)}
.selbtn .cap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.menu{
  position:absolute;right:0;bottom:46px;min-width:190px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lift);
  padding:6px;display:none;z-index:20;
}
.menu.show{display:block}
.menu .mh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);
  padding:7px 10px 5px}
.menu button{
  display:flex;width:100%;align-items:center;gap:9px;background:none;border:none;color:var(--dim);
  cursor:pointer;text-align:left;padding:8px 10px;border-radius:9px;font-size:13.5px;transition:.14s;
}
.menu button:hover{background:var(--surface-2);color:var(--text)}
.menu button.on{color:var(--text)}
.menu button.on::after{content:'✓';margin-left:auto;color:var(--mint)}
.menu .sub{font-size:11.5px;color:var(--dimmer);margin-left:auto}

/* ---------- под плеером ---------- */
.under{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.chipbtn{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none;
  font-family:Nunito;font-weight:600;font-size:14px;transition:.18s;
}
.chipbtn:hover{border-color:var(--dimmer);transform:translateY(-1px)}
.chipbtn.primary{background:var(--mint);color:#16201D;border-color:var(--mint)}
.chipbtn.primary:hover{box-shadow:var(--shadow-hover)}
.chipbtn.mute{color:var(--dim)}

.tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:12px;color:var(--dim)}
.tag b{color:var(--text);font-family:Nunito;font-weight:600}

/* описание */
.desc{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow-soft)}
.desc h3{margin:0 0 8px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.nospoil{
  font-family:Nunito;font-weight:700;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:color-mix(in srgb,var(--mint) 18%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--mint) 36%,var(--line));
  color:var(--mint);border-radius:999px;padding:3px 9px;
}
.epnote{font-size:13.5px}
.desc p{margin:0 0 14px;color:var(--dim);font-size:14.5px}
.tags{display:flex;gap:7px;flex-wrap:wrap}

/* кадры из серии */
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;margin-top:8px;scrollbar-width:thin}
.shot{flex:0 0 168px;border-radius:var(--r-sm);overflow:hidden;position:relative;aspect-ratio:16/9;
  border:1px solid var(--line);cursor:pointer;transition:.2s}
.shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.shot i{position:absolute;inset:0}
.shot span{position:absolute;right:6px;bottom:6px;background:rgba(10,12,17,.8);border-radius:6px;
  padding:1px 7px;font-family:Nunito;font-weight:600;font-size:11px}

/* ---------- правая колонка ---------- */
.side{display:grid;gap:18px;position:sticky;top:80px}
/* Панель, а не карточка аниме. Раньше называлась .card и через это
   переопределяла карточку на главной: один файл стилей на три
   страницы, побеждает то объявление, что ниже. */
.pane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);overflow:hidden}
.pane .ch{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.pane .ch h3{margin:0;font-size:15px;font-weight:700}
.pane .ch span{font-size:12.5px;color:var(--dim);margin-left:auto}
.pane .cb{padding:14px 18px 18px}

/* следующая серия */
.next{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.next .nt{width:74px;height:44px;border-radius:9px;overflow:hidden;position:relative;flex:none}
.next .nt i{position:absolute;inset:0}
.next .nb b{display:block;font-family:Nunito;font-weight:700;font-size:14px}
.next .nb span{font-size:12.5px;color:var(--dim)}
.autonext{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:12.5px;color:var(--dim)}
/* Переключатель описан один раз, в разделе кабинета: он должен
   выглядеть одинаково и в настройках, и на странице просмотра. */
.sw[aria-checked="true"]{background:color-mix(in srgb,var(--mint) 35%,var(--surface-2));border-color:var(--mint)}
.sw[aria-checked="true"]::after{left:19px;background:var(--mint)}

/* список серий */
.eplist{max-height:330px;overflow-y:auto;padding:8px 10px 10px}
.eprow{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;cursor:pointer;
  color:inherit;padding:8px 9px;border-radius:10px;text-align:left;transition:.14s}
.eprow:hover{background:var(--surface-2)}
.eprow .n{width:26px;font-family:Nunito;font-weight:700;font-size:13px;color:var(--dimmer);flex:none}
.eprow .tt{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eprow .dur{font-size:12px;color:var(--dimmer)}
.eprow.seen .n{color:var(--mint)}
.eprow.seen .tt{color:var(--dim)}
.eprow.now{background:color-mix(in srgb,var(--mint) 16%,var(--surface-2))}
.eprow.now .n{color:var(--mint)}

/* прогресс тайтла */
.prog{height:6px;border-radius:99px;background:var(--surface-2);position:relative;margin:11px 0 8px}
.prog i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--mint)}
.pnote{font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;gap:8px}

@media (max-width:1000px){
  .page{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:620px){
  .ctrl{gap:7px;padding:9px 10px}
  .time{width:100%;order:9}
  .page{padding:16px 14px 60px}
}

/* ==================== ИТОГИ ГОДА ==================== */
header{border-bottom:1px solid var(--line)}
[data-page="stats"] .bar{max-width:960px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:14px}
/* Кнопка «назад» описана выше, в разделе просмотра. */
.bar .sp{flex:1}
.share{
  display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:#16201D;border:none;
  border-radius:999px;padding:9px 17px;cursor:pointer;font-family:Nunito;font-weight:700;font-size:14px;
  transition:.2s;
}
.share:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.share:active{transform:translateY(0) scale(.98);transition-duration:.06s}

/* Контейнер страницы итогов года.
   Раньше селектор был просто `.wrap` — и бил по КАЖДОМУ элементу с таким
   классом, включая обёртку обложки внутри карточки на главной. Карточка
   шириной 206px получала обложку в 112px (по 24px отступа с каждой
   стороны) и 90px пустоты под ней. То есть половина места на главной
   уходила в никуда из-за правила от совсем другой страницы.
   `body > .wrap` — контейнер страницы лежит прямо в body, обёртка
   карточки — нет. */
body > .wrap{max-width:960px;margin:0 auto;padding:0 24px 90px}

/* ---------- заглавие ---------- */
.hero{position:relative;text-align:center;padding:58px 0 44px}
.hero .glow{position:absolute;left:50%;top:0;width:520px;height:300px;margin-left:-260px;
  border-radius:50%;filter:blur(90px);opacity:.24;pointer-events:none;
  background:radial-gradient(circle,var(--mint),transparent 70%)}
.hero .k{position:relative;font-family:Nunito;font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.hero h1{position:relative;margin:0 0 10px;font-size:clamp(38px,8vw,72px);font-weight:700;line-height:.98}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero p{position:relative;color:var(--dim);margin:0;font-size:16px}

/* ---------- крупные числа ---------- */
.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:16px}
.b{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.b .n{font-family:Nunito;font-weight:700;font-size:clamp(34px,5.4vw,46px);line-height:1;margin-bottom:5px}
.b .l{font-size:13.5px;color:var(--dim)}
.b .sub{font-size:12.5px;color:var(--dimmer);margin-top:7px}
.b.mint .n{color:var(--mint)} .b.sky .n{color:var(--sky)}
.b.lilac .n{color:var(--lilac)} .b.sand .n{color:var(--sand)}

/* ---------- календарь года ---------- */
/* Панель итогов года: у неё свои отступы, поэтому и имя своё.
   С общим именем она перебивала панель на странице просмотра. */
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-soft);margin-top:16px}
.block > h3{margin:0 0 4px;font-size:17px;font-weight:700}
.block > .cap{font-size:13.5px;color:var(--dim);margin-bottom:18px}
.year{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mon{flex:0 0 auto}
.mon .mn{font-size:11px;color:var(--dimmer);font-family:Nunito;font-weight:600;margin-bottom:6px;
  text-align:center}
.days{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px}
.d{width:9px;height:9px;border-radius:2.5px;background:var(--surface-2)}
.d.l1{background:color-mix(in srgb,var(--mint) 28%,var(--surface-2))}
.d.l2{background:color-mix(in srgb,var(--mint) 55%,var(--surface-2))}
.d.l3{background:color-mix(in srgb,var(--mint) 80%,var(--surface-2))}
.d.l4{background:var(--mint)}
.legend{display:flex;align-items:center;gap:7px;margin-top:13px;font-size:12px;color:var(--dimmer)}

/* ---------- жанры ---------- */
.gen{display:grid;gap:11px}
.g{display:flex;align-items:center;gap:12px}
.g .nm{width:130px;font-family:Nunito;font-weight:600;font-size:14px;flex:none}
.g .track{flex:1;height:9px;border-radius:99px;background:var(--surface-2);position:relative;overflow:hidden}
.g .track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.g .v{width:52px;text-align:right;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- две колонки ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* рекорд */
.rec{display:flex;align-items:center;gap:16px}
.rec .num{font-family:Nunito;font-weight:700;font-size:52px;line-height:1;color:var(--sand)}
.rec .tx b{display:block;font-family:Nunito;font-weight:600;font-size:15px;margin-bottom:2px}
.rec .tx span{font-size:13px;color:var(--dim)}

/* топ тайтл */
.top1{display:flex;gap:14px;align-items:center}
.top1 .cv{width:62px;height:88px;border-radius:10px;overflow:hidden;position:relative;flex:none;
  box-shadow:var(--shadow-soft)}
.top1 .cv i{position:absolute;inset:0}
.top1 .tx b{display:block;font-family:Nunito;font-weight:700;font-size:16px;margin-bottom:3px}
.top1 .tx span{font-size:13px;color:var(--dim);display:block}

/* лента месяцев */
.months{display:grid;gap:9px;margin-top:2px}
.m{display:flex;align-items:center;gap:11px}
.m .mm{width:34px;font-size:12px;color:var(--dimmer);font-family:Nunito;font-weight:600;flex:none}
.m .tr{flex:1;height:7px;border-radius:99px;background:var(--surface-2);position:relative}
.m .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--sky)}
.m .vv{width:42px;text-align:right;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.m.best .tr i{background:var(--mint)}
.m.best .vv{color:var(--mint)}

[data-page="stats"] footer{border-top:1px solid var(--line);margin-top:44px;
  background:var(--bg)}
footer .in{max-width:960px;margin:0 auto;padding:20px 24px;font-size:13.5px;color:var(--dim);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ==================== НАСТОЯЩЕЕ ВИДЕО ==================== */
#video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;display:block;z-index:1;
}
.screen .bgart,.screen .veilg,.screen .titleover{transition:opacity .3s;z-index:2}
.screen .titleover{z-index:4}
.playbtn{z-index:5}
.loadwrap{
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background:rgba(8,10,14,.45);
}
.loadwrap .loader i{box-shadow:0 2px 8px -2px rgba(0,0,0,.9)}
#screen:fullscreen{width:100vw;height:100vh}
#screen:fullscreen #video{object-fit:contain}

/* ==================== ПРОИЗВОДИТЕЛЬНОСТЬ ==================== */
/* Размытие — самая дорогая операция для браузера. На больших областях
   и при наведении оно и давало ощущение подтормаживания. Оставляем
   только там, где оно действительно заметно, и делаем мягче. */
.glow,.glowS{filter:blur(48px);opacity:.22}
.gate .aura,.gate .aura2{filter:blur(80px)}
header{backdrop-filter:none;background:var(--bg)}
.stickytop{background:var(--bg)}.veil{backdrop-filter:none;background:rgba(8,10,14,.82)}

/* Подсказываем браузеру, что двигается только положение —
   тогда он не перерисовывает всю карточку целиком. */
.card .pic,.mini{will-change:transform}
.card:not(:hover) .pic,.mini:not(:hover){will-change:auto}

/* ==================== ОБЛОЖКИ ==================== */
/* Картинки от источников бывают любой формы. Раньше они растягивались
   и мылились — теперь заполняют карточку по центру без искажений. */
.card .pic i,.mini .mp i,.nrow .th i,.next .nt i,.top1 .cv i{
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.card .pic{background:var(--surface-2)}

/* ==================== ГРОМКОСТЬ ==================== */
.volbox{display:flex;align-items:center;gap:6px;flex:none}
#c-vol{
  width:74px;height:4px;-webkit-appearance:none;appearance:none;border-radius:99px;
  background:linear-gradient(to right,var(--mint) var(--fill,100%),#2B303B var(--fill,100%));
  cursor:pointer;
}
#c-vol::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--mint);border:none;cursor:pointer;
}
#c-vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--mint);border:none;cursor:pointer;
}
@media (max-width:700px){ #c-vol{display:none} }

/* ==================== ЗАГЛУШКА ОБЛОЖКИ ==================== */
/* Если обложки нет, вместо пустого прямоугольника показываем
   первую букву названия — так карточки выглядят одинаково. */
.card .pic .noart,.mini .mp .noart{
  position:absolute;inset:0;display:grid;place-items:center;z-index:0;
  font-family:Nunito,sans-serif;font-weight:700;
  color:color-mix(in srgb,var(--dimmer) 70%,transparent);
  background:linear-gradient(155deg,
             color-mix(in srgb,var(--surface-2) 82%,var(--line)),
             var(--surface-2) 60%,
             color-mix(in srgb,var(--surface-2) 84%,var(--bg)));
}
.card .pic .noart{font-size:44px}
.mini .mp .noart{font-size:18px}

/* ==================== ОДИНАКОВЫЙ ВИД НА ВСЕХ ЭКРАНАХ ==================== */
/* Плеер и панель под ним раньше расползались на узких экранах:
   кнопки переносились по одной, время уезжало вниз. */
@media (max-width:900px){
  .page{grid-template-columns:1fr;gap:20px}
  .side{position:static}
  .eplist{max-height:260px}
}
@media (max-width:700px){
  .page{padding:14px 12px 60px}
  .ctrl{gap:6px;padding:9px 8px;flex-wrap:wrap}
  .cbtn{width:34px;height:34px}
  .time{font-size:12px;order:0}
  .ctrl .sp{display:none}
  .sel{flex:1 1 auto;min-width:0}
  .selbtn{width:100%;justify-content:center;padding:8px 10px;font-size:12.5px}
  .selbtn .cap{display:none}
  .menu{left:0;right:auto;min-width:170px;max-width:calc(100vw - 32px)}
  .under{gap:8px}
  .chipbtn{flex:1 1 auto;justify-content:center;font-size:13px;padding:9px 12px}
  .desc{padding:16px 15px}
  .bar{padding:11px 12px;gap:9px}
  .brand b{font-size:17px}
  .topline{gap:9px}
  .pills{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .pill{flex:none}
  .hcrumb{font-size:12.5px}
}
@media (max-width:480px){
  main{padding-left:12px;padding-right:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 10px}
  .mini{flex-basis:180px}
  .chip{padding:6px 11px;font-size:13px}
  .panel .pbody{padding:6px 16px 18px}
  .panel .phead,.panel .pfoot{padding:16px}
  .opt{gap:10px}
  .opt .lb{min-width:120px}
  .inp{min-width:120px;width:100%}
}
/* Панель настроек и окна не должны вылезать за экран */
.veil{padding:16px}
.panel,.sheet,.roul{max-height:calc(100vh - 32px);overflow-y:auto}

/* Обложка перекрывает заглушку с буквой, когда загрузилась */
.card .pic i,.mini .mp i{z-index:1}/* Ошибка плеера — отдельной строкой поверх кадра, а не вместо названия */
.playerr{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:7;margin:0;
  text-align:center;
}

/* ================= ВКЛАДКИ СПИСКА ================= */
.sec .tabs{display:flex;gap:4px;background:var(--surface);padding:4px;
  border-radius:999px;border:1px solid var(--line);flex:none}
.sec .tabs a{padding:7px 15px;border-radius:999px;text-decoration:none;color:var(--dim);
  font-weight:700;font-size:13.5px;transition:.18s;white-space:nowrap}
.sec .tabs a:hover{color:var(--text)}
.sec .tabs a.on{background:var(--surface-2);color:var(--text);box-shadow:0 4px 12px -8px #000}

/* Пометки на обложке: досмотрено, либо на какой серии остановились *//* Полоса просмотра: сколько серий позади *//* ================= ОБЪЯВЛЕНИЕ АДМИНИСТРАТОРА ================= */
.sitenews{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;
  padding:14px 18px;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--sky) 42%,var(--line));
  background:color-mix(in srgb,var(--sky) 11%,var(--surface))}
.sitenews[hidden]{display:none}
.sitenews .ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sky);
  color:#151D27;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;line-height:1}
.sitenews .tx{min-width:0;font-size:14px;color:var(--text);line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}

/* ================= РУЛЕТКА ================= */
/* Раньше здесь был кружок, которому не задали ни размера, ни вращения:
   окно молчало без единого признака жизни, пока отвечал справочник. */
.roul-load{padding:24px 0 20px;display:grid;place-items:center;gap:14px}
.roul-load[hidden]{display:none}
.roul .pickres .rtags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:9px}
.roul .pickres .rtags .tag{background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:12px;color:var(--dim)}
.roul .pickres .about{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--dim);
  text-align:left;max-height:168px;overflow:auto}

/* ================= ВХОД ПО КОДУ ================= */
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;
  color:var(--dim);user-select:none}
.check input{width:17px;height:17px;accent-color:var(--mint);cursor:pointer}
.twofa{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0 4px;
  border-top:1px solid var(--line);margin-top:4px}
.twofa[hidden]{display:none}
.twofa .qrwrap{flex:none;background:#fff;padding:10px;border-radius:var(--r-md);
  line-height:0;box-shadow:var(--shadow-soft)}
.twofa .qrwrap img{display:block;width:184px;height:184px;image-rendering:pixelated}
.twofa-steps{flex:1;min-width:220px;font-size:13.5px;color:var(--dim);line-height:1.6}
.twofa-steps p{margin:0 0 6px}
.codrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.inp.code{width:120px;letter-spacing:.28em;font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums}
.manual{margin-top:10px;font-size:12.5px}
.manual summary{cursor:pointer;color:var(--sky)}
.manual code{display:block;margin-top:7px;padding:9px 11px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;word-break:break-all;letter-spacing:.06em}

/* Спокойный абзац в окне «о проекте» */
.sheet .quiet{color:var(--dimmer);font-size:13px;line-height:1.6}

/* ================= СВОИ ОКНА (вместо confirm/prompt/alert) ================= */
/* Своё окно должно лежать поверх всего, включая кабинет и окно новостей:
   оно всегда открывается ИЗ них. При z-index:60 оно оказывалось под
   панелью настроек (у неё 150) — окно создавалось, но его не было
   видно, и нажатие выглядело как «ничего не произошло». */
.veil.dialog{z-index:400}
.dbox{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-lift);
}
.dbox h3{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.3}
.dbox p{margin:0 0 18px;font-size:14px;color:var(--dim);line-height:1.55}
.dbox .inp{margin-bottom:18px}
.dbox .drow{display:flex;flex-direction:column;gap:9px}
.dbox .wide{width:100%}
.dbox .wide.danger{background:var(--sand);color:#20180E}
.dbox .wide.danger:hover{filter:brightness(1.06)}

/* ======================================================================
   ДВИЖЕНИЕ

   Одна кривая (--ease) и три длительности на весь сайт. Смысл не в
   украшательстве: движение отвечает на вопросы, которые иначе задаёт
   человек. «Нажалось ли?» — кнопка проседает. «Это можно нажать?» —
   приподнимается под мышкой. «Откуда взялось окно?» — оно выросло из
   середины, а не появилось рывком. «Список обновился?» — карточки
   выехали по очереди.

   Всё короткое: 0.16–0.4 секунды. Длиннее — и интерфейс начинает
   казаться медленным, каким бы красивым ни было само движение.
   ====================================================================== */

/* ---------- появления ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.94) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.012) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes growLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spinOnce { to { transform: rotate(360deg); } }
@keyframes nudge {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  75%     { transform: translateX(3px); }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.16); }
  100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

/* Подсказка на месте картинки, когда рисовать её нечем. */
.qrnone{max-width:184px;font-size:12.5px;line-height:1.4;color:var(--dim);
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0}

/* ---------- кнопки: одинаковый отклик у всех ---------- */
button, .chipbtn, .wide, .share, .iconbtn, .filtbtn, .small, .lang, .sc, .logopick {
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              filter var(--fast) var(--ease);
}
/* Нажатие видно у каждой кнопки без исключения: она проседает.
   Раньше половина кнопок на нажатие не отвечала никак, и было
   непонятно, попал ты по ней или нет. */
button:active, .chipbtn:active, .share:active { transform: scale(.97); }
.wide:active { transform: translateY(0) scale(.985); }

/* Кнопки-значки в шапке: приподнимаются и чуть подсвечивают рамку */
.iconbtn { transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
                       color var(--fast) var(--ease), background var(--fast) var(--ease); }
.iconbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.iconbtn:active { transform: translateY(0) scale(.93); box-shadow: var(--shadow-press); }
.iconbtn svg { transition: transform var(--mid) var(--ease); }
/* Колокольчик качается, значок обновляется поворотом — каждый значок
   двигается по-своему, чтобы их было видно как разные кнопки. */
#btn-bell:hover svg { animation: nudge .5s var(--ease); }
#btn-news:hover svg { transform: translateY(-1px) rotate(-6deg); }
#btn-stats:hover svg { transform: scaleY(1.18); }
#btn-about:hover svg { transform: rotate(20deg); }
#btn-roul:hover svg { transform: rotate(90deg); }

.filtbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.filtbtn:active { transform: translateY(0) scale(.97); }

.small { transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
                     border-color var(--fast) var(--ease), color var(--fast) var(--ease),
                     box-shadow var(--fast) var(--ease); }
.small:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.small:active { transform: scale(.96); box-shadow: var(--shadow-press); }

/* Мелкие кнопки, у которых отклик был только цветом текста: тень
   отвечает на вопрос «я на ней?» быстрее, чем оттенок серого. */
.seg button, .who button, .guest .mini-btn, .selbtn, .cbtn {
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.seg button:hover, .who button:hover, .guest .mini-btn:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-hover);
}
.seg button:active, .who button:active, .guest .mini-btn:active {
  transform: translateY(0) scale(.96); box-shadow: var(--shadow-press);
}
/* Кружок с аватаркой чуть подрастает — видно, что вся плашка нажимается */
.who .ava { transition: transform var(--mid) var(--ease); }
.who:hover .ava { transform: scale(1.08); }
/* Треугольник в логотипе слегка подаётся вперёд */
.brand .logo, .brand svg { transition: transform var(--mid) var(--ease); }
.brand:hover .logo, .brand:hover svg { transform: translateX(2px) scale(1.05); }
/* Поле поиска приподнимается, когда в нём печатают */
.find input { transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
                          box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.find input:focus { transform: translateY(-1px); }

/* ---------- карточки ---------- */
/* Выезжают по очереди. Задержка крошечная: при двадцати карточках
   последняя появится через полсекунды, а не через минуту. */
.grid .card { animation: riseIn .3s var(--ease) both; }
.grid .card:nth-child(1)  { animation-delay: .00s }
.grid .card:nth-child(2)  { animation-delay: .03s }
.grid .card:nth-child(3)  { animation-delay: .06s }
.grid .card:nth-child(4)  { animation-delay: .09s }
.grid .card:nth-child(5)  { animation-delay: .12s }
.grid .card:nth-child(6)  { animation-delay: .15s }
.grid .card:nth-child(7)  { animation-delay: .18s }
.grid .card:nth-child(8)  { animation-delay: .21s }
.grid .card:nth-child(9)  { animation-delay: .24s }
.grid .card:nth-child(10) { animation-delay: .27s }
.grid .card:nth-child(n+11) { animation-delay: .3s }

/* Обложка чуть приближается под мышкой — как будто карточка оживает */
.card .pic i { transition: transform var(--slow) var(--ease); }
.card:hover .pic i { transform: scale(1.06); }
/* Название под мышкой.

   Две попытки мимо: сперва оно зеленело — подсвечивало пол-экрана;
   потом подчёркивалось — линия под текстом смотрелась как ссылка из
   девяностых и спорила с полосой просмотра под ней.

   Третий вариант ничего не пририсовывает. В покое название чуть
   приглушено, под мышкой доходит до полной яркости. Разница видна,
   но на карточке не появляется ни одной новой линии. */
.card h3 { color: color-mix(in srgb, var(--text) 84%, var(--dim));
           transition: color var(--fast) var(--ease); }
.card:hover h3 { color: var(--text); }

/* Крестик удаления вырастает, а не появляется рывком */
.card .del { transform: scale(.8); transition: opacity var(--fast) var(--ease),
             transform var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.card:hover .del, .card .del:focus-visible { opacity: 1; transform: scale(1); }
.card .del:hover { transform: scale(1.12) rotate(90deg); }
.card .del:active { transform: scale(.92) rotate(90deg); }
@media (hover:none) { .card .del { opacity: 1; transform: scale(1); } }

/* Полоса просмотра растёт слева направо *//* Пометки на обложке проявляются следом за карточкой *//* ---------- вкладки ---------- */
.sec .tabs a { transition: color var(--fast) var(--ease), background var(--mid) var(--ease),
                           transform var(--fast) var(--ease); }
.sec .tabs a:active { transform: scale(.96); }
.sec .tabs a.on { animation: popIn .26s var(--ease); }

/* ---------- окна ---------- */
.veil { transition: opacity var(--mid) var(--ease); }
.veil.show .panel, .veil.show .sheet, .veil.show .roul,
.veil.show .cropwrap, .veil.dialog .dbox {
  animation: popIn .28s var(--ease);
}
/* Содержимое своего окна проявляется чуть позже коробки — так глаз
   успевает заметить, что окно приехало, прежде чем читать текст. */
.dbox h3 { animation: riseIn .3s var(--ease) both .06s; }
.dbox p  { animation: riseIn .3s var(--ease) both .1s; }
.dbox .drow { animation: riseIn .3s var(--ease) both .14s; }

/* ---------- переключатель ---------- */
/* Кружок едет с лёгким перелётом — так переключение чувствуется
   щелчком, а не просто сменой цвета. */
.sw { transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease); }
.sw::after { transition: left .22s cubic-bezier(.34,1.4,.5,1), background var(--mid) var(--ease); }
.sw:active::after { width: 21px; }
.sw[aria-checked="true"] { animation: pulseRing .45s var(--ease); }

/* ---------- объявление и уведомления ---------- */
.sitenews:not([hidden]) { animation: dropIn .34s var(--ease); }
.notice:not([hidden]) { animation: dropIn .34s var(--ease); }
.drop.show { animation: dropIn .22s var(--ease); }
.nrow { transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.nrow:hover { transform: translateX(3px); }
.toast.show { animation: slideUp .36s var(--ease); }

/* ---------- рулетка ---------- */
.roul.done .pickres .cover { animation: popIn .38s var(--ease) both; }
.roul.done .pickres .nm    { animation: riseIn .34s var(--ease) both .07s; }
.roul.done .pickres .m     { animation: riseIn .34s var(--ease) both .11s; }
.roul.done .pickres .rtags { animation: riseIn .34s var(--ease) both .15s; }
.roul.done .pickres .about { animation: riseIn .34s var(--ease) both .19s; }
.roul.done #roul-watch     { animation: riseIn .34s var(--ease) both .23s; }
.roul .pickres .rtags .tag { transition: transform var(--fast) var(--ease),
                                         border-color var(--fast) var(--ease); }
.roul .pickres .rtags .tag:hover { transform: translateY(-2px); border-color: var(--dimmer); }

/* ---------- страница просмотра ---------- */
.eprow { transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
                     color var(--fast) var(--ease); }
.eprow:hover { transform: translateX(4px); }
.eprow:active { transform: translateX(2px) scale(.99); }
.cbtn { transition: transform var(--fast) var(--ease), color var(--fast) var(--ease),
                    background var(--fast) var(--ease); }
.cbtn:hover { transform: scale(1.12); }
.cbtn:active { transform: scale(.92); }
.playbtn { transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.playbtn:hover { transform: scale(1.08); box-shadow: var(--shadow-lift); }
.playbtn:active { transform: scale(.96); }
.selbtn { transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
                      background var(--fast) var(--ease); }
.selbtn:hover { transform: translateY(-1px); }
.menu.show { animation: dropIn .2s var(--ease); }
.menu button { transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.menu button:hover { transform: translateX(3px); }

/* ---------- итоги года ---------- */
.big .b { animation: riseIn .38s var(--ease) both; }
.big .b:nth-child(2) { animation-delay: .06s }
.big .b:nth-child(3) { animation-delay: .12s }
.big .b:nth-child(4) { animation-delay: .18s }
.big .b { transition: transform var(--mid) var(--ease); }
.big .b:hover { transform: translateY(-3px); }
.gen .g .track i { transform-origin: left center; animation: growLine .6s var(--ease) both .15s; }
.months .m .tr i { transform-origin: left center; animation: growLine .6s var(--ease) both .15s; }
.year .d { transition: transform var(--fast) var(--ease); }
.year .d:hover { transform: scale(1.5); }

/* ---------- вход ---------- */
.gate .box { animation: popIn .4s var(--ease); }
.gate .field, .gate .wide, .gate .split, .gate .locked, .gate .langrow {
  animation: riseIn .4s var(--ease) both;
}
.gate .field:nth-of-type(1) { animation-delay: .05s }
.gate .field:nth-of-type(2) { animation-delay: .09s }
.gate .wide { animation-delay: .13s }
.gate .split { animation-delay: .16s }
.gate .locked { animation-delay: .2s }
.gate .langrow { animation-delay: .24s }

/* ---------- прочее ---------- */
.spin { animation: spinOnce .9s linear infinite; }
a { transition: color var(--fast) var(--ease); }
.acc { transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.acc:hover { transform: translateX(3px); }
.mini { transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
                    border-color var(--mid) var(--ease); }

/* ================= ПРАЗДНИКИ =================
   Украшение поверх темы. Цвета темы не трогаются — поэтому во время
   праздника переключение тем работает как обычно, а праздник остаётся
   при любой теме. Акцентный цвет тоже не трогается: иначе кнопки
   выбора акцента на месяц превратились бы в кнопки, которые ничего не
   делают.

   Слой лежит ПОД содержимым (z-index:0, содержимое — 1). Снег,
   пролетающий поверх текста, мил секунд десять, а на одиннадцатой
   мешает читать; в просветах между карточками его видно достаточно. */
/* Два слоя.

   Заливка — под всем (z-index:0): она красит страницу.
   Летающее — над содержимым (z-index:100), но под окнами кабинета
   (150) и под экраном входа (200): при вводе пароля мельтешение ни к
   чему, а вот над карточками снег и должен идти. Под содержимым он
   прятался за обложками и шёл в основном по пустому низу страницы. */
.prazdnik{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.prazdnik.verh{z-index:100}
#app{position:relative;z-index:1}
.prazdnik .zaliv{position:absolute;inset:0}

/* ---------- Новый год ---------- */
html[data-holiday="newyear"] .prazdnik .zaliv{
  background:
    radial-gradient(130% 70% at 50% -16%, color-mix(in srgb,#6FB3E0 62%,transparent), transparent 72%),
    radial-gradient(100% 55% at 8% 108%, color-mix(in srgb,#8AA6D8 44%,transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb,#4E7FA8 20%,transparent), transparent 42%);
}
/* Размер и прозрачность — через переменные, а не прямо в элементе.
   Свойство, записанное в сам элемент, сильнее любого правила из файла,
   и переопределить его под светлую тему было бы нечем. */
.snezh{
  position:absolute;top:-14px;border-radius:50%;
  width:var(--razmer,7px);height:var(--razmer,7px);
  background:radial-gradient(circle at 34% 32%, #fff, color-mix(in srgb,#DCEBFA 70%,transparent));
  opacity:0;animation:snegopad linear infinite;
}
/* На светлой теме белый снег на белом фоне пропадает. Здесь хлопья
   крупнее, синее, с каймой и собственной тенью — и заметно плотнее:
   прозрачность берётся из отдельной переменной, потому что обычную
   элемент задаёт сам, и правилом её не перебить. */
html[data-theme="bumaga"] .snezh{
  width:calc(var(--razmer,7px) * 1.45);
  height:calc(var(--razmer,7px) * 1.45);
  background:radial-gradient(circle at 32% 28%, #FFFFFF 26%, #7FAAD6);
  box-shadow:0 0 0 1px color-mix(in srgb,#2F5F91 52%,transparent),
             0 2px 4px -1px rgba(28,58,92,.45);
  animation-name:snegopadSvet;
}
@keyframes snegopadSvet{
  0%   {transform:translate3d(0,-20px,0) scale(.85);opacity:0}
  8%   {opacity:var(--vidno-svet,.9)}
  92%  {opacity:var(--vidno-svet,.9)}
  100% {transform:translate3d(var(--snos,18px),102vh,0) scale(1);opacity:0}
}
@keyframes snegopad{
  0%   {transform:translate3d(0,-20px,0) scale(.85);opacity:0}
  8%   {opacity:var(--vidno,.5)}
  92%  {opacity:var(--vidno,.5)}
  100% {transform:translate3d(var(--snos,18px),102vh,0) scale(1);opacity:0}
}

/* ---------- Хэллоуин ---------- */
html[data-holiday="halloween"] .prazdnik .zaliv{
  background:
    radial-gradient(120% 66% at 50% 112%, color-mix(in srgb,#E08A3C 58%,transparent), transparent 70%),
    radial-gradient(95% 58% at 86% -10%, color-mix(in srgb,#7E5AA8 52%,transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb,#4A2F5E 22%,transparent), transparent 46%);
}
/* Цвета задника собраны в одном месте: на светлой теме силуэт должен
   быть темнее, а луна теплее, иначе всё сливается с бумагой. */
html[data-holiday="halloween"]{
  --hall-temno:#1B1424; --hall-kamen:#2C2338; --hall-kost:#C9C2B4;
  --hall-ogon:#F2A93E; --hall-luna:#F3E4B8; --hall-luna-svet:rgba(243,228,184,.16);
  --hall-krater:rgba(180,164,120,.5);
}
html[data-theme="bumaga"][data-holiday="halloween"]{
  --hall-temno:#3A2B45; --hall-kamen:#4C3B5A; --hall-kost:#F0EADC;
  --hall-luna:#F6C46A; --hall-luna-svet:rgba(246,196,106,.3);
}
/* Кладбище во всю ширину у нижнего края — это фон, а не украшение
   поверх текста, поэтому живёт в нижнем слое. */
/* Высота не задаётся: она получается из ширины, потому что картинка
   держит свои пропорции. Задать и то и другое — значит вернуть
   растягивание, из-за которого тыквы были овальными. */
.kladbische{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block;
}
/* Луна высоко: пусть её меньше видно за содержимым — так просили.
   Над самым кладбищем она смотрелась приземлённо. */
.luna{
  position:absolute;right:clamp(18px,8vw,140px);
  top:clamp(88px,17vh,200px);
  width:clamp(78px,10vw,136px);height:auto;display:block;
}
.letuchka{
  position:absolute;color:color-mix(in srgb,#241C2C 72%,transparent);
  opacity:.5;animation:polyot linear infinite;
}
html[data-theme="bumaga"] .letuchka{color:color-mix(in srgb,#4A3A55 60%,transparent)}
@keyframes polyot{
  0%   {transform:translate3d(-10vw,0,0) rotate(-4deg)}
  50%  {transform:translate3d(50vw,-26px,0) rotate(5deg)}
  100% {transform:translate3d(112vw,0,0) rotate(-4deg)}
}

/* ---------- Сакура ---------- */
html[data-holiday="sakura"] .prazdnik .zaliv{
  background:
    radial-gradient(125% 64% at 50% -14%, color-mix(in srgb,#E894B0 52%,transparent), transparent 72%),
    radial-gradient(95% 52% at 90% 106%, color-mix(in srgb,#E8B58C 40%,transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb,#9C5C77 18%,transparent), transparent 44%);
}
.lepestok{
  position:absolute;top:-16px;
  background:linear-gradient(140deg,#F7C6D6,#EFA3BC);
  border-radius:70% 30% 62% 38% / 60% 62% 38% 40%;
  opacity:0;animation:padenie linear infinite;
}
@keyframes padenie{
  0%   {transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
  10%  {opacity:var(--vidno,.55)}
  90%  {opacity:var(--vidno,.55)}
  100% {transform:translate3d(var(--snos,60px),102vh,0) rotate(420deg);opacity:0}
}

/* ---------- Значок рядом с логотипом ---------- */
.prazdznak{display:grid;place-items:center;flex:none;margin-left:-2px}
.prazdznak svg{display:block}

/* ================= КНОПКИ ШАПКИ И СВЯЗЬ =================
   На широком экране .acts — обычный ряд кнопок, подписи спрятаны, а
   бургера нет. На узком всё наоборот: ряд превращается в список с
   подписями и раскрывается кнопкой. Кнопки при этом одни и те же —
   вторая копия для телефона означала бы два набора обработчиков,
   которые однажды разойдутся. */
.acts{display:flex;align-items:center;gap:9px}
.acts .lbl{display:none}
.burger{display:none}

.svyaz{
  position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,3vh,28px);z-index:120;
  width:50px;height:50px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--mint);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-lift);
}
.svyaz:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover),var(--shadow-lift)}
.svyaz:active{transform:translateY(0) scale(.94)}

@media (max-width:620px){
  .burger{display:grid}
  /* Список кнопок выпадает из-под шапки во всю её ширину. */
  .acts{
    display:none;position:absolute;left:14px;right:14px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    padding:7px;box-shadow:var(--shadow-lift);z-index:70;
  }
  .acts.open{display:flex;animation:dropIn .2s var(--ease)}
  .acts .lbl{display:block;font-family:Nunito;font-weight:600;font-size:14px}
  /* Внутри списка кнопки становятся строками: значок слева, подпись
     справа. Круглый значок без подписи в вертикальном списке не
     читается вовсе — непонятно, что за кнопка. */
  .acts .iconbtn,.acts .filtbtn,.acts .bellwrap>.iconbtn{
    width:100%;height:auto;border-radius:var(--r-sm);border:none;background:none;
    display:flex;align-items:center;gap:12px;justify-content:flex-start;
    padding:10px 11px;color:var(--text);
  }
  .acts .iconbtn:hover,.acts .filtbtn:hover,.acts .bellwrap>.iconbtn:hover{
    background:var(--surface-2);transform:none;box-shadow:none;
  }
  .acts .bellwrap{width:100%}
  .acts .drop{position:static;width:100%;margin-top:6px}
  .svyaz{width:46px;height:46px;bottom:14px;right:14px}
  /* Шапке нужен упор для выпадающего списка. */
  [data-page="index"] header{position:sticky;top:0}
  [data-page="index"] .bar{position:relative}
}

/* ==================== ТЕЛЕФОН: УЗКИЙ ЭКРАН ====================
   Проверено на 375 пикселях. Главный признак сломанной вёрстки —
   горизонтальная прокрутка; её быть не должно ни на одной странице. */
@media (max-width:620px){
  main{padding:0 14px 70px}

  /* Шапка в три строки вместо четырёх: сверху имя сайта и профиль,
     под ними поиск во всю ширину, ниже кнопки. */
  [data-page="index"] .bar{padding:10px 14px;gap:8px}
  .brand{order:1}
  .brand b{font-size:17px}
  .who{order:2;margin-left:auto}
  .find{order:3;width:100%;flex-basis:100%}
  /* Порядок: имя сайта, бургер, профиль, под ними поиск. */
  .burger{order:2}
  .who{order:3}
  .find{order:4}

  /* Заголовок раздела и вкладки.

     Было `display:flex` без переноса: заголовок сжимался до ширины
     соседей и рвался посреди слова, а вкладки уходили за край экрана.
     Теперь заголовок не сжимается, а вкладки занимают свою строку. */
  .sec{flex-wrap:wrap;align-items:center;gap:8px 10px;margin:24px 0 14px}
  .sec h2{flex:none;white-space:nowrap;font-size:19px}
  .sec .sp{display:none}
  .sec .tabs{order:9;width:100%;justify-content:stretch}
  .sec .tabs a{flex:1;text-align:center;padding:8px 6px;font-size:13px}

  /* Карточки: две в ряд на любом телефоне. */
  .grid{gap:20px 12px}

  /* Футер в столбик — иначе ссылки прижимаются к тексту. */
  [data-page="index"] footer .in{flex-direction:column;align-items:flex-start;gap:12px}

  /* Кабинет и окна: поля меньше, места под содержимое больше. */
  .panel,.sheet,.roul{padding:20px 16px}
  .opt{gap:10px}

  /* Праздник: украшений вдвое меньше — экран меньше, батарею жалко.
     Число задаётся в коде, здесь только размеры. */
  .luna{top:clamp(70px,12vh,120px);right:12px}
}

@media (max-width:400px){
  .sec h2{font-size:18px}
  /* Прячем только имя. Первый вариант правила убирал все span внутри
     плашки — вместе с именем исчезала и аватарка. */
  #whoami{display:none}
}

/* ======================================================================
   Уважение к настройке «меньше движения».

   В системе есть переключатель для тех, кому анимации мешают: от
   укачивания до мигрени. Игнорировать его — значит сделать сайт
   неудобным ровно для тех, кто об этом уже попросил.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover .pic i { transform: none; }
  .card:hover .pic { transform: none; }
  /* Праздник остаётся целиком, просто перестаёт двигаться.

     Убирать украшение вовсе — перебор: человек просил меньше движения,
     а не меньше картинок. Снежинки и лепестки рассыпаны по экрану и
     стоят на месте, летучие мыши висят там, где висели. */
  .snezh, .lepestok, .letuchka {
    animation: none;
    top: var(--stoyat, 30%);
    opacity: var(--vidno, .5);
  }
  .letuchka { left: var(--stoyat-x, 30%); }
  html[data-theme="bumaga"] .snezh { opacity: var(--vidno-svet, .9); }
}