/* ============================================================
   stand_neuro.css — MAXIMUM НЕЙРОСЛОП EDITION ✨🚀💎🔥
   Powered by Нейродвижок 9000™ • Synergy-driven • AI-first
   Нормальная версия лежит в stand_dark.css.

   Про производительность: цвета, градиенты, свечения и эмодзи здесь
   какие были, а вот backdrop-filter и анимации, которые попадали на
   сотни ячеек сразу, убраны. Именно они клали таблицу: блюр области
   размером во всю страницу и перерисовка каждого кадра. Анимации
   остались только там, где элемент один: заголовок, LIVE, CHECK FAILED.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Poppins:wght@400;600;800;900&display=swap');

:root {
    --slop-1: #6d28d9;
    --slop-2: #db2777;
    --slop-3: #0ea5e9;
    --slop-4: #f59e0b;
    --glow:   0 0 18px;
    --pinned-bg: #4c1d95;
    --table-bg:  #581c87;
    --head-h:    40px;      /* высота строки контестов = смещение строки задач */
    --head-bg:   #2e1065;   /* плашка шапки: темнее таблицы, работает как якорь */
    --head-bg-2: #3b0764;   /* строка задач: на ступеньку светлее */

    /* Цвета зазора между «таблетками» — свой на каждую зону. Все непрозрачные:
       через прозрачный зазор видно строки, едущие под прижатой колонкой. */
    --gap-data:   #581c87;
    --gap-pinned: #35106b;
    --gap-head:   #1c0742;
}

body {
    cursor: crosshair;
    margin: 0;
    padding: 26px;
    min-height: 100vh;
    color: #ffffff;
    font-family: 'Comic Sans MS', 'Comic Neue', 'Poppins', cursive, sans-serif;
    background: linear-gradient(135deg,
        var(--slop-1) 0%, var(--slop-2) 28%, var(--slop-3) 55%,
        var(--slop-4) 78%, var(--slop-1) 100%);
    background-attachment: fixed;
}

/* Живое сияние на фоне. Анимируется только transform фиксированного слоя:
   это composited-свойство, перерисовки кадра не происходит. Анимацию
   background-position не возвращаю — она перекрашивала весь экран. */
body::before {
    content: "";
    position: fixed;
    inset: -40%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(236,  72, 153, .55), transparent 45%),
        radial-gradient(circle at 70% 60%, rgba( 14, 165, 233, .50), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(245, 158,  11, .45), transparent 45%);
    will-change: transform;
    animation: slop-orbit 26s linear infinite;
}
@keyframes slop-orbit {
    0%   { transform: rotate(0turn)   scale(1); }
    50%  { transform: rotate(.5turn)  scale(1.25); }
    100% { transform: rotate(1turn)   scale(1); }
}

/* Второй слой крутится навстречу первому. Оба висят на body: у html
   псевдоэлемент рисуется раньше фона body и был бы им перекрыт. */
body::after {
    content: "";
    position: fixed;
    inset: -45%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    background:
        radial-gradient(circle at 20% 70%, rgba(167, 139, 250, .48), transparent 42%),
        radial-gradient(circle at 80% 25%, rgba(253, 224,  71, .34), transparent 42%),
        radial-gradient(circle at 60% 20%, rgba( 52, 211, 153, .34), transparent 40%),
        radial-gradient(circle at 25% 85%, rgba(244, 114, 182, .40), transparent 40%);
    animation: slop-orbit-back 34s linear infinite;
}
@keyframes slop-orbit-back { to { transform: rotate(-1turn); } }

/* Ковёр из эмодзи. Один фиксированный слой, движение по transform. */
.verdict_legend::before {
    content: "🚀✨💎🔥⚡🏆🎉💯🤖🦾";
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    font-size: 44px;
    line-height: 2.4;
    word-spacing: 30px;
    opacity: .13;
    overflow-wrap: break-word;
    animation: slop-carpet 40s linear infinite;
}
@keyframes slop-carpet {
    to { transform: translate(-60px, -110px); }
}

/* Радужная конус-развёртка на весь экран. Ещё один фиксированный слой. */
.verdict_legend::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background: conic-gradient(#ef4444, #f59e0b, #fde047, #34d399,
                               #22d3ee, #6366f1, #a855f7, #ec4899, #ef4444);
    will-change: transform;
    animation: slop-orbit-back 28s linear infinite;
}

/* ---- Заголовок: переливающийся градиентный текст ---- */
p.header {
    margin: 0 0 26px;
    font-family: 'Comic Sans MS', 'Comfortaa', cursive;
    font-size: 44px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    transform: rotate(-1.5deg) skewX(-4deg);
    -webkit-text-stroke: 2px #22d3ee;
    text-shadow: 2px 2px 0 #ec4899, 4px 4px 0 #a855f7, 6px 6px 0 #6366f1,
                 8px 8px 0 #22d3ee, 10px 10px 20px rgba(0, 0, 0, .55);
    background: linear-gradient(90deg, #fff, #fde047, #f472b6, #fff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slop-shine 5s linear infinite, slop-hue 9s linear infinite;
}
@keyframes slop-hue {
    from { filter: drop-shadow(0 4px 22px rgba(253, 224, 71, .65)) hue-rotate(0deg); }
    to   { filter: drop-shadow(0 4px 22px rgba(253, 224, 71, .65)) hue-rotate(360deg); }
}
p.header::before { content: "🏆💫🔥🎉 "; -webkit-text-fill-color: initial; }
p.header::after  { content: " 🚀✨💎⚡💯"; -webkit-text-fill-color: initial; }
@keyframes slop-shine { to { background-position: 300% 0; } }

h1 {
    font-family: Papyrus, 'Comic Sans MS', fantasy;
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 900;
    text-align: center;
    color: #fff;
    text-shadow: var(--glow) #ef4444, 0 0 34px #ef4444;
    animation: slop-panic .9s ease-in-out infinite;
}
h1::before { content: "🚨💀 "; }
h1::after  { content: " 💀🚨"; }
@keyframes slop-panic {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* ---- Фильтр ---- */
form.filter_form { margin: 0; }

.filter_form input[type=text] {
    width: 100%;
    min-width: 140px;
    box-sizing: border-box;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .2);
    border: 2px dashed #22d3ee;
    border-radius: 999px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 14px rgba(34, 211, 238, .6);
}
.filter_form input[type=text]::placeholder { color: rgba(255, 255, 255, .75); }
.filter_form input[type=text]:focus {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) #f472b6, 0 0 34px rgba(244, 114, 182, .8);
}

/* ============================================================
   Таблица
   ============================================================ */

/* Скроллится таблица, а не страница: display:block превращает саму таблицу
   в область прокрутки, поэтому рамка, фон и углы остаются на месте, а внутри
   ездит содержимое. Строки при этом продолжают выравниваться по колонкам. */
table.results {
    display: block;
    max-height: 78vh;
    overflow: auto;
    overscroll-behavior: contain;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--table-bg);
    border: 6px dashed #22d3ee;
    border-radius: 24px;
    box-shadow: 0 0 0 4px #ec4899, 0 0 0 8px #fde047,
                0 0 0 12px #34d399, 0 0 0 16px #6366f1,
                0 0 60px rgba(236, 72, 153, .7),
                0 24px 70px rgba(109, 40, 217, .8);
    scrollbar-width: thin;
    scrollbar-color: #f472b6 rgba(255, 255, 255, .12);
}
table.results::-webkit-scrollbar { width: 18px; height: 18px; }
table.results::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); }
table.results::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fde047, #f472b6 50%, #22d3ee);
    border-radius: 999px;
}

table.results td {
    cursor: help;
    box-sizing: border-box;
    padding: 6px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    /* «Таблетки»: зазор рисуется рамкой, а не border-spacing — так он входит
       в ширину ячейки (border-box) и не ломает арифметику прижатых колонок.
       Цвет зазора всегда непрозрачный и свой для каждой зоны (ниже): через
       прозрачный было видно строки, едущие под прижатой колонкой и шапкой. */
    border: 3px solid var(--gap-data);
    border-radius: 12px;
    background-clip: padding-box;
}

/* ============================================================
   Прижатые слева колонки.

   Ширины заданы руками, и это вынужденно: CSS не умеет складывать ширины
   предыдущих колонок, чтобы получить смещение для sticky. Набор колонок
   берётся из $columns в конфиге — если поменяешь его, правь числа ниже.
   Селектор при этом считать колонки умеет: :has(~ td.verdict) отбирает
   ровно те ячейки, за которыми идут вердикты, то есть все левые.
   ============================================================ */

:root {
    --col-1:  46px;   /* место                */
    --col-2: 260px;   /* имя                  */
    --col-3:  56px;   /* оценка               */
    --col-4:  46px;   /* сдано в зачётном     */
    --col-5:  56px;   /* осталось обязательных */
    --col-6:  46px;   /* решено               */

    --pin-1: 0px;
    --pin-2: var(--col-1);
    --pin-3: calc(var(--pin-2) + var(--col-2));
    --pin-4: calc(var(--pin-3) + var(--col-3));
    --pin-5: calc(var(--pin-4) + var(--col-4));
    --pin-6: calc(var(--pin-5) + var(--col-5));
    --pin-7: calc(var(--pin-6) + var(--col-6));
}

table.results td[class*="_header"],
table.results td:not(.verdict):has(~ td.verdict) { position: sticky; }

/* фон непрозрачный, иначе сквозь колонки поедет содержимое таблицы */
table.results td:not(.verdict):has(~ td.verdict) {
    z-index: 5;
    background-color: var(--pinned-bg);
    border-color: var(--gap-pinned);
}

table.results td[class*="_header"]:nth-child(1),
table.results td:not(.verdict):has(~ td.verdict):nth-child(1) {
    left: var(--pin-1); width: var(--col-1); min-width: var(--col-1);
}
table.results td[class*="_header"]:nth-child(2),
table.results td:not(.verdict):has(~ td.verdict):nth-child(2) {
    left: var(--pin-2); width: var(--col-2); min-width: var(--col-2); max-width: var(--col-2);
}
table.results td[class*="_header"]:nth-child(3),
table.results td:not(.verdict):has(~ td.verdict):nth-child(3) {
    left: var(--pin-3); width: var(--col-3); min-width: var(--col-3);
}
table.results td[class*="_header"]:nth-child(4),
table.results td:not(.verdict):has(~ td.verdict):nth-child(4) {
    left: var(--pin-4); width: var(--col-4); min-width: var(--col-4);
}
table.results td[class*="_header"]:nth-child(5),
table.results td:not(.verdict):has(~ td.verdict):nth-child(5) {
    left: var(--pin-5); width: var(--col-5); min-width: var(--col-5);
}
table.results td[class*="_header"]:nth-child(6),
table.results td:not(.verdict):has(~ td.verdict):nth-child(6) {
    left: var(--pin-6); width: var(--col-6); min-width: var(--col-6);
}
table.results td[class*="_header"]:nth-child(7),
table.results td:not(.verdict):has(~ td.verdict):nth-child(7) {
    left: var(--pin-7);
}

/* ============================================================
   Шапка: единая тёмная плашка на обе строки.

   Раньше здесь спорили три разных фона (индиго у колонок, розовый
   градиент у контестов, фиолетовый у задач) плюс жёлтая граница —
   рябило и названия сливались. Теперь фон один, а различают строки
   и контесты только цвет текста и разделитель.
   ============================================================ */

/* шапка колонок: прижата и сверху, и слева, поэтому лежит выше всех */
table.results td[class*="_header"] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: var(--head-h);
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 900;
    color: #fde047;
    -webkit-text-stroke: 1px #22d3ee;
    text-shadow: 0 0 10px #fde047;
    background-color: var(--head-bg);
    border-color: var(--gap-head);
}

/* названия контестов */
td.contest::before { content: "🎮 "; }
td.contest {
    position: sticky;
    top: 0;
    z-index: 4;
    height: var(--head-h);
    box-sizing: border-box;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fde047;
    -webkit-text-stroke: 1px #ec4899;
    text-shadow: 0 0 12px #fde047, 0 0 26px #f472b6;
    background-color: var(--head-bg);
    border-color: var(--gap-head);
}
/* задачи */
td.problem {
    position: sticky;
    top: var(--head-h);
    z-index: 3;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 0 10px rgba(255, 255, 255, .5);
    background-color: var(--head-bg-2);
    border-color: var(--gap-head);
}
/* обязательная задача: акцент подчёркиванием, а не жёлтой плашкой —
   плашка на каждой второй колонке забивала всю шапку */
td.problem.obligatory {
    color: #fde047;
    box-shadow: inset 0 -3px 0 #facc15;
}
td.problem.obligatory::before { content: "⭐"; animation: slop-twinkle 2.2s ease-in-out infinite; }

/* Липкие зоны — прижатые колонки и обе строки шапки — идут сплошной
   плиткой с разделителем в 1px, без скругления. У «таблетки» между
   четырьмя соседними углами остаётся звёздочка непрокрашенного места,
   и сквозь неё видно строки, которые едут под липкой ячейкой.
   Цвет разделителя приходит из зон выше (--gap-pinned / --gap-head). */
table.results td[class*="_header"],
table.results td.contest,
table.results td.problem,
table.results td:not(.verdict):has(~ td.verdict) {
    border-width: 1px;
    border-radius: 0;
    background-clip: border-box;
}

/* Начало контеста отбивает яркая линия: фон у всех строк шапки одинаковый.
   Правило идёт после плиточного, иначе border-width: 1px съедает эту линию. */
/* Отбивка контеста рисуется ниже одной полосой на всю таблицу,
   поэтому здесь у шапки своей границы больше нет. */

/* ============================================================
   Начало контеста в теле таблицы.

   Класса с номером контеста PHP не печатает, а colspan из шапки CSS
   протянуть вниз не может. Зацепка — title: задачи в каждом контесте
   нумеруются с начала, и короткое имя задачи лежит в title у шапки
   ("A: Задача А") и у каждой ячейки результата ("Фамилия, A (Задача А)").
   Ловим первую задачу контеста по нему.

   Это эвристика: она держится на том, что первая задача контеста
   называется A или 1. Если в конфиге нумерация другая, добавь её букву
   в список ниже.
   ============================================================ */
/* Полоса рисуется отдельным элементом, а не границей ячейки: граница
   повторяет скругление «таблетки» и распадается на дуги.

   Геометрия. Пусть 0 — стык колонок. Правая граница левой ячейки идёт
   -3…0, левая граница ячейки на стыке расширена до 8px и идёт 0…+8,
   то есть просвет между таблетками составляет 11px. Полоса в 3px встаёт
   на +1…+4 — по 4px воздуха с каждой стороны. Смещение left: -7px
   отсчитывается от края содержимого, которое начинается на +8.
   Числа одни и те же во всех строках, поэтому линия идёт ровно. */
table.results td.contest,
table.results td.problem[title^="A:"],
table.results td.problem[title^="a:"],
table.results td.problem[title^="1:"] {
    border-left-width: 8px;
}
/* эти ячейки и так sticky, отдельный position им не нужен и сломал бы прилипание */
table.results td.verdict[title*=", A ("],
table.results td.verdict[title*=", a ("],
table.results td.verdict[title*=", 1 ("] {
    position: relative;
    border-left-width: 8px;
}

table.results td.contest::after,
table.results td.problem[title^="A:"]::after,
table.results td.problem[title^="a:"]::after,
table.results td.problem[title^="1:"]::after,
table.results td.verdict[title*=", A ("]::after,
table.results td.verdict[title*=", a ("]::after,
table.results td.verdict[title*=", 1 ("]::after {
    content: "";
    position: absolute;
    top: -3px;      /* нахлёст на зазор между строками, чтобы линия не рвалась */
    bottom: -3px;
    left: -7px;
    width: 3px;
    z-index: 1;   /* иначе фон и свечение соседних ячеек рвут полосу */
    background: linear-gradient(180deg, #fde047, var(--slop-2) 45%, #22d3ee);
    pointer-events: none;
}


/* ---- Участник ---- */
td.rank {
    font-size: 17px;
    font-weight: 900;
    color: #fde047;
    text-shadow: var(--glow) rgba(253, 224, 71, .8);
}
/* первые две строки таблицы — шапка, поэтому призёры начинаются с третьей */
table.results tr:nth-child(3) td.rank::before { content: "🥇"; }
table.results tr:nth-child(4) td.rank::before { content: "🥈"; }
table.results tr:nth-child(5) td.rank::before { content: "🥉"; }
table.results tr:nth-child(3) td.rank::before,
table.results tr:nth-child(4) td.rank::before,
table.results tr:nth-child(5) td.rank::before { animation: slop-twinkle 1.8s ease-in-out infinite; }
@keyframes slop-twinkle {
    0%, 100% { opacity: 1;  transform: rotate(-12deg) scale(1); }
    50%      { opacity: .5; transform: rotate(12deg)  scale(1.25); }
}
table.results tr:nth-child(4) td.rank::before { animation-delay: .3s; }
table.results tr:nth-child(5) td.rank::before { animation-delay: .6s; }

table.results tr:nth-child(3) td.name {
    color: #fde047;
    box-shadow: inset 0 0 0 2px #e8c463, inset 0 0 22px rgba(232, 196, 99, .5);
}
td.name {
    text-align: left;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 0 12px rgba(253, 224, 71, .75);
    text-transform: uppercase;
    letter-spacing: .08em;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.solved, td.exam_solved, td.attempts, td.score,
td.weight, td.penalty {
    color: #fff;
}

/* ============================================================
   Вердикты
   ============================================================ */

td.verdict {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}
table.results td.verdict { outline: 1px dashed rgba(255, 255, 255, .3); }
table.results td.verdict::before {
    font-size: 13px;
    text-shadow: 0 0 8px rgba(255, 255, 255, .85);
}
td.verdict a { color: inherit; text-decoration: none; }
td.verdict a:hover { text-decoration: underline wavy; }

td.OK {
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(52, 211, 153, .55);
}
td.OK::before { content: "✅"; }

td.PR, td.AC, td.pending {
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(167, 139, 250, .5);
}
td.PR::before, td.AC::before, td.pending::before { content: "⏳"; }

td.WA, td.PE {
    background: linear-gradient(135deg, #fb7185, #e11d48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(251, 113, 133, .5);
}
td.WA::before, td.PE::before { content: "❌"; }

td.TL, td.WT {
    background: linear-gradient(135deg, #facc15, #d97706);
    color: #2a1a00;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(250, 204, 21, .5);
}
td.TL::before, td.WT::before { content: "⏰"; }

td.RT {
    background: linear-gradient(135deg, #ef4444, #9f1239);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(239, 68, 68, .6);
}
td.RT::before { content: "💥"; }

td.ML {
    background: linear-gradient(135deg, #e879f9, #a21caf);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(232, 121, 249, .5);
}
td.ML::before { content: "🧠"; }

td.RJ {
    background: linear-gradient(135deg, #fb923c, #c2410c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(251, 146, 60, .55);
}
td.RJ::before { content: "🚫"; }

td.CE { background: #64748b; }
td.CE::before { content: "🛠"; }

td.IG { background: #64748b; }
td.IG::before { content: "🙈"; }

td.DQ { background: #0f172a; }
td.DQ::before { content: "⛔"; }

td.CF {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px #fff, 0 0 24px rgba(239, 68, 68, 1);
}
td.CF::before { content: "🔥"; }

td.NO { background-color: #4a1573; }

/* ячейкам без своего свечения глянец добавляется отдельно */
table.results td[class^="exam_"],
table.results td[class^="remain_"],
table.results td[class^="ok_"],
table.results td.CE, table.results td.IG,
table.results td.DQ, table.results td.NO {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 8px rgba(0,0,0,.3);
}

/* ---- Оценка ---- */
td[class^="exam_"] { font-size: 16px; font-weight: 900; color: #fff; }
td.exam_5 { background: linear-gradient(135deg, #34d399, #059669); }
td.exam_5::before { content: "🌟"; }
td.exam_4 { background: linear-gradient(135deg, #a3e635, #4d7c0f); }
td.exam_4::before { content: "👍"; }
td.exam_3 { background: linear-gradient(135deg, #fbbf24, #b45309); }
td.exam_3::before { content: "😬"; }
td.exam_2 { background: linear-gradient(135deg, #ef4444, #991b1b); }
td.exam_2::before { content: "💀"; }

/* ---- Осталось обязательных / альтернативная шкала ---- */
td[class^="remain_"], td[class^="ok_"] { font-weight: 900; color: #fff; }
td.remain_0, td.ok_0   { background: linear-gradient(135deg, #34d399, #059669); }
td.remain_1, td.ok_5   { background: linear-gradient(135deg, #a3e635, #4d7c0f); }
td.remain_2, td.ok_10  { background: linear-gradient(135deg, #fbbf24, #b45309); }
td.remain_3, td.ok_15  { background: linear-gradient(135deg, #fb923c, #c2410c); }
td.remain_4, td.ok_inf { background: linear-gradient(135deg, #ef4444, #991b1b); }
td.remain_0::before, td.ok_0::before   { content: "🎉"; }
td.remain_4::before, td.ok_inf::before { content: "😱"; }

/* ---- Статистика ---- */
td.probstat, td.probstat_all { text-align: right; font-size: 12px; }
td.probstat_all {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 900;
}
td.probstat_all::before { content: "📊 "; }

/* ============================================================
   Ленты посылок: две колонки рядом, чтобы не листать страницу
   ============================================================ */

div:has(> table.subm_list) {
    display: inline-block;
    vertical-align: top;
    width: min(calc(50% - 14px), 620px);
    max-height: 420px;
    margin: 24px 10px 0 0;
    overflow-y: auto;
    border-radius: 22px;
    background: rgba(88, 28, 135, .6);
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: 0 16px 48px rgba(109, 40, 217, .55);
    scrollbar-width: thin;
    scrollbar-color: #f472b6 rgba(255, 255, 255, .12);
}
div:has(> table.subm_list)::-webkit-scrollbar { width: 11px; }
div:has(> table.subm_list)::-webkit-scrollbar-track {
    margin: 8px;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}
div:has(> table.subm_list)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fde047, #f472b6 50%, #22d3ee);
    border-radius: 999px;
}

@media (max-width: 980px) {
    div:has(> table.subm_list) { display: block; width: auto; margin-right: 0; }
}

table.subm_list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
table.subm_list td {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
table.subm_list tr:last-child td { border-bottom: none; }
/* зебра: глаз не теряет строку на широкой ленте */
table.subm_list tr:nth-child(even) td { background: rgba(255, 255, 255, .06); }

.subm_list_header {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    color: #fde047;
    background-color: #4338ca;
    background-image: linear-gradient(100deg,
        rgba(255,255,255,.26), rgba(255,255,255,.02) 45%, rgba(255,255,255,.26));
    background-size: 250% 100%;
    border-bottom: none;
    animation: slop-sweep 3.6s linear infinite;
}
.subm_list_header::before {
    content: "🔴 LIVE ";
    animation: slop-blink 1.4s ease-in-out infinite;
}
.subm_list_header h1,
.subm_list_header b { font: inherit; margin: 0; color: inherit; animation: none; }
.subm_list_header h1::before, .subm_list_header h1::after { content: none; }
@keyframes slop-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.subm_list .time         { width: 1%; color: rgba(255, 255, 255, .8); }
.subm_list .contest_name { color: rgba(255, 255, 255, .9);
                           max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.subm_list .user_name    { font-weight: 800; color: #fff; }
.subm_list td.verdict    { width: 1%; text-align: center; border-radius: 0; }

.subm_list a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #f472b6, #a78bfa);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    animation: slop-bounce 2s ease-in-out infinite;
}
.subm_list a::before { content: "👁"; }
.subm_list a:hover { text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.3), var(--glow) rgba(244, 114, 182, .9); }

/* ============================================================
   Легенда
   ============================================================ */

.verdict_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 22px 0;
}
.verdict_legend .leg {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    background-image: linear-gradient(100deg,
        rgba(255,255,255,.30), rgba(255,255,255,.02) 40%, rgba(255,255,255,.30));
    background-size: 250% 100%;
    animation: slop-sweep 3.2s linear infinite, slop-bounce 2.4s ease-in-out infinite;
}
/* каждая вторая таблетка завалена в свою сторону */
.verdict_legend .leg:nth-child(odd)  { rotate: -4deg; }
.verdict_legend .leg:nth-child(even) { rotate:  5deg; }
.verdict_legend .leg:nth-child(2) { animation-delay: 0s, .2s; }
.verdict_legend .leg:nth-child(3) { animation-delay: 0s, .4s; }
.verdict_legend .leg:nth-child(4) { animation-delay: 0s, .6s; }
.verdict_legend .leg:nth-child(5) { animation-delay: 0s, .8s; }
.verdict_legend .leg:nth-child(6) { animation-delay: 0s, 1s; }
.verdict_legend .leg:nth-child(7) { animation-delay: 0s, 1.2s; }
@keyframes slop-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes slop-sweep { to { background-position: 250% 0; } }
.verdict_legend .leg.OK { background: rgba(52, 211, 153, .55);  border-color: #34d399; }
.verdict_legend .leg.WA { background: rgba(251, 113, 133, .55); border-color: #fb7185; }
.verdict_legend .leg.PR { background: rgba(167, 139, 250, .55); border-color: #a78bfa; }
.verdict_legend .leg.TL { background: rgba(250, 204, 21, .55);  border-color: #facc15; }
.verdict_legend .leg.ML { background: rgba(232, 121, 249, .55); border-color: #e879f9; }
.verdict_legend .leg.RJ { background: rgba(251, 146, 60, .6);   border-color: #fb923c; }
.verdict_legend .leg.CE { background: rgba(148, 163, 184, .5);  border-color: rgba(203, 213, 225, .7); }

p.cf_list {
    font-family: Papyrus, 'Comic Sans MS', fantasy;
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    color: #fff;
    text-shadow: var(--glow) #ef4444, 0 0 40px #ef4444;
}

/* Мигание и пульсация физически неприятны при вестибулярных нарушениях
   и фотосенситивности. Внешний вид не меняется, только перестаёт дёргаться. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}