:root {
    --background: #0b0c10;
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #f1f1f1;
    --text-muted: #88888e;
    --accent: #14b8a6;
    --accent-hover: #79b7ff;
    --danger: #ff5a5a;
    --success: #22c55e;
    --radius: 16px;
    --glass-blur: 22px;
    --shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Глобально — ни один textarea на панели нельзя тянуть за уголок мышью
   (просили явно "для всех textarea", не только уже стилизованных через
   .field textarea в components.css — на случай будущих textarea вне
   этой обёртки). */
textarea { resize: none; }

html { background-color: var(--background); }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-secondary);
    background-color: var(--background);
    position: relative;
    isolation: isolate;
}

/* ПЕРФОРМАНС (2026-08-14): раньше анимировался background-position —
   это paint-свойство, браузер обязан перерисовывать весь radial-gradient
   на весь вьюпорт каждый кадр, бесконечно, на КАЖДОЙ странице сайта, плюс
   filter: blur(70px) пересчитывался заново на каждый перерисованный кадр
   (а не кэшировался один раз). На мобильных GPU (особенно iOS Safari) это
   и роняло FPS — жаловался пользователь: лагало даже на чужом айфоне.
   Теперь анимируется только transform (compositor-свойство, без paint) —
   картинка внутри псевдоэлемента отрисовывается и блюрится ОДИН раз,
   дальше GPU просто двигает уже готовую текстуру, это на порядок дешевле.
   inset увеличен до -35% (было -25%), чтобы при translate до ±8% от
   своего размера псевдоэлемент не оголял края вьюпорта. */
body::before, body::after {
    content: '';
    position: fixed;
    inset: -35%;
    z-index: -1;
    filter: blur(70px);
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform;
}
body::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(88, 166, 255, 0.3), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.25), transparent 42%);
    animation: auroraDriftOne 7s ease-in-out infinite alternate;
}
body::after {
    background:
        radial-gradient(circle at 75% 15%, rgba(20, 184, 166, 0.25), transparent 42%),
        radial-gradient(circle at 25% 85%, rgba(236, 72, 153, 0.18), transparent 40%);
    animation: auroraDriftTwo 8.5s ease-in-out infinite alternate;
    animation-delay: -9s;
}
@keyframes auroraDriftOne {
    0%   { transform: translate(0%, 0%); }
    50%  { transform: translate(8%, 4%); }
    100% { transform: translate(-4%, 8%); }
}
@keyframes auroraDriftTwo {
    0%   { transform: translate(0%, 0%); }
    50%  { transform: translate(-6%, -5%); }
    100% { transform: translate(5%, -8%); }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}
/* Мобильные/touch-устройства (2026-08-14): даже с transform-анимацией
   backdrop-filter: blur() на .card остаётся дорогой compositor-операцией
   на мобильных GPU, особенно во время скролла (пересчитывается на каждый
   кадр скролла независимо от того, что именно движется). На мобильных —
   полностью гасим и анимацию фона, и блюр карточек, заменяя его более
   непрозрачным (но уже существующим в теме, не новым) --surface-strong.
   pointer:coarse ловит и планшеты в альбомной ориентации, у которых
   ширина может быть больше 768px.
   Селектор "body .card", а не просто ".card": components.css подключается
   ПОСЛЕ theme.css и содержит безусловное ".card { backdrop-filter: ... }"
   с той же специфичностью (0,1,0) — при равенстве побеждает то, что
   загрузилось позже, так что голый ".card" тут проиграл бы кадру ниже по
   каскаду. "body .card" — специфичность (0,1,1), гарантированно выше,
   не зависит от порядка подключения файлов. */
@media (max-width: 768px), (pointer: coarse) {
    body::before, body::after { animation: none; }
    body .card {
        background: var(--surface-strong);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }