/* ═══════════════════════════════════════════════════════════════════
   NewsHelper — общие токены оформления
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Не зависит от темы ─────────────────────────────────────── */
    --glass-blur: blur(22px) saturate(140%);

    --dur-fast: 130ms;
    --dur: 210ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    --rail: 68px;
    --radius-sm: 10px;
    --radius-inner: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-card: 20px;
    --radius-xl: 26px;

    --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: var(--font-sans);
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* ── Тёмная тема ────────────────────────────────────────────── */
    --base-top: #0d0911;
    --base-mid: #09070c;
    --base-bot: #060508;
    --page-bg:  #09070c;

    --glow-1: rgba(236, 99, 160, 0.20);
    --glow-2: rgba(200, 70, 160, 0.10);
    --glow-3: rgba(130, 60, 170, 0.07);
    --bar-bg: rgba(9, 7, 12, 0.74);

    --accent-rgb:      236, 99, 160;
    --accent-deep-rgb: 214, 70, 138;
    --shadow-rgb:      0, 0, 0;
    --neutral-rgb:     208, 194, 216;

    --accent-300: #f7b6d4;
    --accent-400: #f38bbb;
    --accent-500: #ec63a0;
    --accent-600: #d6468a;
    --accent-ink: #f59cc5;

    --surf-1: rgba(255, 255, 255, 0.022);
    --surf-2: rgba(255, 255, 255, 0.035);
    --surf-3: rgba(255, 255, 255, 0.06);
    --surf-4: rgba(255, 255, 255, 0.085);

    --glass:        rgba(255, 255, 255, 0.035);
    --glass-strong: rgba(255, 255, 255, 0.06);
    --glass-sunken: rgba(0, 0, 0, 0.30);
    --glass-line:   rgba(255, 255, 255, 0.075);

    --spec: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --line:        rgba(var(--neutral-rgb), 0.09);
    --line-strong: rgba(var(--neutral-rgb), 0.16);
    --line-accent: rgba(var(--accent-rgb), 0.45);

    --ink:   #f1eff4;
    --ink-2: #a9a5b1;
    --ink-3: #7e7a87;

    --cta-bg:       #f1eff4;
    --cta-bg-hover: #ffffff;
    --cta-ink:      #0a0a0c;
    --cta-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.28);
    --cta-glow:     inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 28px rgba(var(--accent-rgb), 0.28);

    --ok:     #4ade80;
    --warn:   #fbbf24;
    --err:    #fb7185;
    --info:   #60a5fa;
    --violet: #c084fc;

    --ok-bg:     rgba(74, 222, 128, 0.13);
    --warn-bg:   rgba(251, 191, 36, 0.13);
    --err-bg:    rgba(251, 113, 133, 0.13);
    --info-bg:   rgba(96, 165, 250, 0.13);
    --violet-bg: rgba(192, 132, 252, 0.13);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-4: 0 26px 64px rgba(0, 0, 0, 0.60);

    --ok-rgb:     74, 222, 128;
    --warn-rgb:   251, 191, 36;
    --err-rgb:    251, 113, 133;
    --info-rgb:   96, 165, 250;
    --violet-rgb: 192, 132, 252;

    --ov-bg: rgba(0, 0, 0, 0.55);

    --tip-bg:  rgba(28, 20, 34, 0.96);
    --tip-ink: #f4f0ff;

    --autofill-bg: #140f18;

    --rank-bronze: #d99a5e;  --rank-bronze-rgb: 217, 154, 94;
    --rank-silver: #b9bfcc;  --rank-silver-rgb: 185, 191, 204;
    --rank-gold:   #e5b33c;  --rank-gold-rgb:   229, 179, 60;
    --rank-plat:   #67e8f9;  --rank-plat-rgb:   103, 232, 249;

    color-scheme: only dark;
}

/* ═══════════════════════════════════════════════════════════════════
   Светлая тема — холодная бумага
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
    --base-top: #f7f7f8;
    --base-mid: #f3f3f5;
    --base-bot: #ededf0;
    --page-bg:  #f3f3f5;

    --glow-1: rgba(236, 99, 160, 0.12);
    --glow-2: rgba(236, 99, 160, 0.05);
    --glow-3: transparent;
    --bar-bg: rgba(247, 247, 248, 0.78);

    --accent-rgb:      214, 51, 132;
    --accent-deep-rgb: 190, 24, 93;
    --shadow-rgb:      40, 30, 50;
    --neutral-rgb:     60, 56, 70;

    --accent-300: #f9a8d4;
    --accent-400: #ec4899;
    --accent-500: #db2777;
    --accent-600: #be185d;
    --accent-ink: #be185d;

    --surf-1: rgba(255, 255, 255, 0.55);
    --surf-2: rgba(255, 255, 255, 0.78);
    --surf-3: rgba(255, 255, 255, 0.92);
    --surf-4: #ffffff;

    --glass:        rgba(255, 255, 255, 0.7);
    --glass-strong: #ffffff;
    --glass-sunken: rgba(60, 56, 70, 0.05);
    --glass-line:   rgba(60, 56, 70, 0.10);

    --spec: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --line:        rgba(var(--neutral-rgb), 0.10);
    --line-strong: rgba(var(--neutral-rgb), 0.18);

    --ink:   #16151a;
    --ink-2: #55525e;
    --ink-3: #6d6a76;

    --cta-bg:       #16151a;
    --cta-bg-hover: #2a2830;
    --cta-ink:      #ffffff;

    --ok:     #15803d;
    --warn:   #b45309;
    --err:    #be123c;
    --info:   #0369a1;
    --violet: #6d28d9;

    --ok-bg:     rgba(21, 128, 61, 0.11);
    --warn-bg:   rgba(180, 83, 9, 0.11);
    --err-bg:    rgba(190, 18, 60, 0.10);
    --info-bg:   rgba(3, 105, 161, 0.10);
    --violet-bg: rgba(109, 40, 217, 0.10);

    --shadow-1: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
    --shadow-2: 0 6px 20px rgba(var(--shadow-rgb), 0.07);
    --shadow-3: 0 16px 40px rgba(var(--shadow-rgb), 0.10);
    --shadow-4: 0 26px 64px rgba(var(--shadow-rgb), 0.16);

    --ok-rgb:     21, 128, 61;
    --warn-rgb:   180, 83, 9;
    --err-rgb:    190, 18, 60;
    --info-rgb:   3, 105, 161;
    --violet-rgb: 109, 40, 217;

    --ov-bg: rgba(30, 26, 38, 0.30);

    --tip-bg:  rgba(22, 21, 26, 0.94);
    --tip-ink: #fff;

    --autofill-bg: #ffffff;

    --rank-bronze: #9a521e;  --rank-bronze-rgb: 154, 82, 30;
    --rank-silver: #5c626e;  --rank-silver-rgb: 100, 106, 118;
    --rank-gold:   #a5700a;  --rank-gold-rgb:   180, 120, 9;
    --rank-plat:   #0e7490;  --rank-plat-rgb:   14, 116, 144;

    color-scheme: only light;
}

/* ═══════════════════════════════════════════════════════════════════
   Общая основа сайта и панели
   ═══════════════════════════════════════════════════════════════════ */

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

[hidden] { display: none !important; }

html,
body { background-color: var(--page-bg); }

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(70vw 60vh at 82% -12%, var(--glow-1), transparent 62%),
        radial-gradient(60vw 50vh at -6% 108%, var(--glow-2), transparent 64%),
        radial-gradient(80vw 60vh at 40% 50%, var(--glow-3), transparent 72%),
        linear-gradient(180deg, var(--base-top) 0%, var(--base-mid) 55%, var(--base-bot) 100%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-theme="light"] body::after { opacity: 0.035; }

::selection { background: rgba(var(--accent-rgb), 0.26); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
    border-radius: 6px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--neutral-rgb), 0.24);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.55); background-clip: content-box; }

* { scrollbar-width: thin; scrollbar-color: rgba(var(--neutral-rgb), 0.28) transparent; }

/* ═══════════════════════════════════════════════════════════════════
   Общие детали сайта и панели
   ═══════════════════════════════════════════════════════════════════ */

/* ── Кнопки ───────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: var(--glass-strong);
    box-shadow: var(--shadow-1), var(--spec);
    color: var(--ink);
    font: 600 13.5px/1.3 var(--font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.btn:hover {
    background: var(--surf-4);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2), var(--spec);
}

.btn:active { transform: translateY(1px) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-sm { padding: 6px 13px; font-size: 12.5px; }

.btn-accent,
.btn-login {
    background: var(--cta-bg);
    color: var(--cta-ink);
    border-color: transparent;
    box-shadow: var(--cta-shadow);
}

.btn-accent:hover,
.btn-login:hover {
    background: var(--cta-bg-hover);
    border-color: transparent;
    box-shadow: var(--cta-glow);
}

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 6px;
    padding: 14px;
    border: none;
    border-radius: 999px;
    font: 600 14px var(--font-sans);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.btn-login svg { transition: transform var(--dur) var(--ease-out); }
.btn-login:hover svg { transform: translateX(4px); }
.btn-login:active { transform: scale(0.985); }

.btn-login:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Метки и сообщения ────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.badge-green  { background: rgba(var(--ok-rgb), 0.11);      color: var(--ok);    border-color: rgba(var(--ok-rgb), 0.26); }
.badge-red    { background: rgba(var(--err-rgb), 0.1);      color: var(--err);   border-color: rgba(var(--err-rgb), 0.26); }
.badge-yellow { background: rgba(var(--warn-rgb), 0.11);    color: var(--warn);  border-color: rgba(var(--warn-rgb), 0.26); }
.badge-grey   { background: rgba(var(--neutral-rgb), 0.09); color: var(--ink-2); border-color: var(--line-strong); }

.msg {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 40px 11px 14px;
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.msg svg { flex-shrink: 0; margin-top: 1px; }

.msg-err  { background: rgba(var(--err-rgb), 0.1);  border-color: rgba(var(--err-rgb), 0.28);  color: var(--err); }
.msg-ok   { background: rgba(var(--ok-rgb), 0.1);   border-color: rgba(var(--ok-rgb), 0.28);   color: var(--ok); }
.msg-warn { background: rgba(var(--warn-rgb), 0.1); border-color: rgba(var(--warn-rgb), 0.28); color: var(--warn); }

/* ── Поля ─────────────────────────────────────────────────────────── */

.field input,
.input-group input,
.code-input {
    width: 100%;
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-md);
    background: var(--surf-4);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease);
}

.field input::placeholder,
.input-group input::placeholder,
.code-input::placeholder { color: var(--ink-3); }

.field input:focus,
.input-group input:focus,
.code-input:focus {
    border-color: var(--line-accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.13);
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
    caret-color: var(--ink);
}

.input-group { position: relative; width: 100%; }

.input-group input { padding: 14px 16px 14px 46px; font-size: 13.5px; }

.input-icon {
    position: absolute;
    z-index: 1;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
    transition: color var(--dur) var(--ease);
}

.input-group:focus-within .input-icon { color: var(--accent-600); }

.field-msg {
    display: block;
    margin: -4px 0 12px 2px;
    font: 500 12px/1.4 var(--font-sans);
    color: var(--err);
}

.is-invalid,
.is-invalid:focus {
    border-color: var(--err) !important;
    box-shadow: 0 0 0 3px var(--err-bg) !important;
}

/* ── Карточка входа ───────────────────────────────────────────────── */

.login-box {
    position: relative;
    width: 100%;
    max-width: 410px;
    padding: 38px 34px 30px;
    text-align: center;
    background: var(--surf-2);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid var(--glass-line);
    border-radius: 24px;
    box-shadow: var(--shadow-4), var(--spec);
    animation: loginIn 0.45s var(--ease-out);
}

@keyframes loginIn {
    from { opacity: 0; transform: translateY(14px) scale(0.988); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.logo-glow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 23px;
    background: var(--surf-4);
    box-shadow: 0 14px 34px rgba(var(--shadow-rgb), 0.24), 0 0 0 7px var(--surf-1);
}

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

.logo-name {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.2;
    color: var(--ink);
}

.logo-badge {
    display: inline-block;
    margin: 9px auto 24px;
    padding: 4px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.26);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.login-foot {
    margin-top: 14px;
    font-size: 11px;
    color: var(--ink-3);
}

@media (max-width: 560px) {
    .login-box { padding: 32px 22px 26px; }
    .logo-glow { width: 66px; height: 66px; border-radius: 20px; }
    .logo-name { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Смена темы — общая для сайта и панели: переключатель один (theme.js)
   ═══════════════════════════════════════════════════════════════════ */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: theme-wave 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes theme-wave {
    from { clip-path: circle(0 at var(--wave-x, 100%) var(--wave-y, 0)); }
    to   { clip-path: circle(var(--wave-r, 150vmax) at var(--wave-x, 100%) var(--wave-y, 0)); }
}