/* style.css — дизайн-система сайта: база, темы, иконки, кнопки, главная, auth, clients/, welcome/ */

/* ---------- 1. Reset и база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', Roboto, Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background-color .35s ease, color .35s ease;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
p { line-height: 1.6; }
button { font-family: inherit; }

/* ---------- 2. Токены тем ---------- */
:root,
[data-theme="dark"] {
    --bg: #070d16;
    --bg-soft: #0b1420;
    --surface: #101b2c;
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.1);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #eef2fb;
    --text-muted: #93a1bd;
    --text-faint: #5c6a8a;
    --accent: #4f8cff;
    --accent-2: #a78bfa;
    --accent-strong: #6ea1ff;
    --accent-contrast: #06101f;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --icon-color: #b8c4de;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.28);
    --shadow-md: 0 12px 32px rgba(0,0,0,.38);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.48);
    --input-bg: rgba(255,255,255,0.05);
}
[data-theme="light"] {
    --bg: #eef2f9;
    --bg-soft: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #eef1f7;
    --surface-hover: #e4e9f3;
    --border: #e1e6f0;
    --border-strong: #cbd3e3;
    --text: #12172a;
    --text-muted: #5b6478;
    --text-faint: #929cb3;
    --accent: #2f6fed;
    --accent-2: #7c3aed;
    --accent-strong: #1f57cf;
    --accent-contrast: #ffffff;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #b8790a;
    --icon-color: #4a5372;
    --shadow-sm: 0 2px 8px rgba(20,30,60,.06);
    --shadow-md: 0 12px 28px rgba(20,30,60,.1);
    --shadow-lg: 0 24px 56px rgba(20,30,60,.14);
    --input-bg: #f4f6fb;
}
/* Третья тема: графит и приглушённая олива, тёплое золото для действий. */
[data-theme="military"] {
    --bg: #141712;
    --bg-soft: #191e16;
    --surface: #20251d;
    --surface-2: #293024;
    --surface-hover: #323b2b;
    --border: #3d4736;
    --border-strong: #68765a;
    --text: #f1efdf;
    --text-muted: #b9c0aa;
    --text-faint: #969f88;
    --accent: var(--military-accent, #e6c164);
    --accent-2: var(--military-accent-2, #b9c99a);
    --accent-strong: color-mix(in srgb, var(--accent) 82%, #fff3ce);
    --accent-contrast: #211d10;
    --success: #8ecb9c;
    --danger: #ee9385;
    --warning: #f0ab68;
    --icon-color: #c7cdb7;
    --shadow-sm: 0 2px 8px rgba(7, 10, 5, .24);
    --shadow-md: 0 12px 32px rgba(7, 10, 5, .36);
    --shadow-lg: 0 24px 64px rgba(7, 10, 5, .48);
    --input-bg: #181d16;
}

/* Тёплый цвет для метрик — не завязан на тему, просто акцентные ярлыки */
.cyan   { --tint: #38bdf8; }
.teal   { --tint: #2dd4bf; }
.violet { --tint: #a78bfa; }
.amber  { --tint: #fbbf24; }
.blue   { --tint: #4f8cff; }

/* ---------- 3. Иконки ---------- */
.icon {
    --icon-size: 20px;
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--icon-tint, var(--icon-color));
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    flex: none;
    transition: background-color .25s ease, transform .2s ease;
}
.icon-sm { --icon-size: 16px; }
.icon-lg { --icon-size: 26px; }
.icon-xl { --icon-size: 34px; }
.icon-accent   { --icon-tint: var(--accent); }
.icon-accent-2 { --icon-tint: var(--accent-2); }
.icon-success  { --icon-tint: var(--success); }
.icon-danger   { --icon-tint: var(--danger); }
.icon-warning  { --icon-tint: var(--warning); }
.icon-on-accent{ --icon-tint: var(--accent-contrast); }
.icon-tinted   { --icon-tint: var(--tint, var(--accent)); }

/* inline-svg вариант (welcome/index.html), красится через currentColor */
.ui-symbol { display: inline-flex; width: 1em; height: 1em; color: inherit; }
.ui-symbol svg { width: 100%; height: 100%; display: block; }
.ui-symbol.sm { width: .85em; height: .85em; }

/* ---------- 4. Кнопки / переключатель темы ---------- */
.btn, .btn-primary, .btn-ghost, .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 12px;
    padding: .7rem 1.3rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .auth-btn:active { transform: scale(.97); }
.btn-primary, .btn.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--text);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost, .btn.btn-ghost {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-hover); text-decoration: none; }
.btn-large { padding: .9rem 1.7rem; font-size: 1rem; }
.arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Переключатель тем — как в приложении (common/ThemeToggle.qml): капсула, кнопки 36×28, активная — цвет акцента
   с тонким кольцом; значки цветные: солнце золотое, луна тёмная, каска полноцветная (theme.js: decorateThemeButtons) */
.theme-switcher, .theme-toggle {
    display: flex;
    gap: 2px;
    background: color-mix(in srgb, var(--surface) 93%, black);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 4px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.theme-btn {
    position: relative;
    width: 36px; height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color .18s ease, color .18s ease;
}
.theme-btn .icon { --icon-tint: currentColor; }
.theme-btn .ui-symbol { width: 26px; height: 26px; color: currentColor; }
.theme-btn:not(.is-active):hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.theme-btn.is-active, .theme-btn.is-active:hover { background: var(--accent); color: var(--accent-contrast); }
/* тонкое свечение активной кнопки */
.theme-btn.is-active::after {
    content: ""; position: absolute; inset: -2px; border-radius: 999px;
    border: 1px solid var(--accent); opacity: .3; pointer-events: none;
}
.theme-ico {
    display: inline-block; flex: 0 0 auto;
    width: 22px; height: 22px;
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.theme-ico-light, .theme-ico-dark {
    background: var(--theme-ico-color);
    -webkit-mask: var(--theme-ico) center / contain no-repeat;
    mask: var(--theme-ico) center / contain no-repeat;
}
.theme-ico-light { --theme-ico: url(/icons/light.svg); --theme-ico-color: #cea262; }
.theme-ico-dark { --theme-ico: url(/icons/moon.svg); --theme-ico-color: #2c3136; }
.theme-ico-military { width: 24px; height: 24px; background: url(/icons/military.svg) center / contain no-repeat; }
.app-theme-btn:hover .theme-ico { transform: scale(1.05); }
.app-theme-btn.is-active .theme-ico { transform: scale(1.12); }

/* ---------- 5. Публичная главная ---------- */
.page-glow {
    position: fixed;
    width: 46vw; height: 46vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.glow-a { top: -14vw; right: -10vw; background: var(--accent); }
.glow-b { bottom: -18vw; left: -12vw; background: var(--accent-2); }

.topbar, .landing-nav {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-icon, .brand-logo {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
}
.brand-icon .icon { --icon-tint: currentColor; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy small, .brand-copy small.accent { color: var(--text-muted); font-weight: 400; font-size: .78rem; }

.topnav, .landing-links { display: flex; gap: 1.6rem; }
.topnav a, .landing-links a { color: var(--text-muted); font-weight: 500; font-size: .93rem; }
.topnav a:hover, .landing-links a:hover, .landing-links a.active { color: var(--text); text-decoration: none; }

.top-actions, .landing-actions { display: flex; align-items: center; gap: .75rem; }

main { position: relative; z-index: 1; }
.shell { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
    max-width: 1180px;
    margin: 0 auto;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    color: var(--accent);
    text-transform: uppercase;
}
.status-dot, .status-pip {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
    animation: ping-soft 2s ease-out infinite;
}
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin: .6rem 0 1rem; }
.hero h1 span { color: var(--accent); }
.hero-text, .hero-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.6rem 0 1.2rem; }
.hero-note { display: flex; align-items: center; gap: .55rem; color: var(--text-muted); font-size: .88rem; }
.note-icon { --icon-tint: var(--success); }

/* --- Карточка состояния сервера (публичная) --- */
.server-card, .server-state-card {
    position: relative;
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 85%, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.6rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    isolation: isolate;
    animation: card-rise .6s cubic-bezier(.2,.9,.25,1) both;
}
.server-card::before, .server-state-card::before {
    /* лёгкая бегущая сетка/скан-линия — придаёт карточке "живой" вид */
    content: "";
    position: absolute; inset: -40% -20%;
    background:
        repeating-linear-gradient(115deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 64px);
    opacity: .35;
    animation: drift-grid 16s linear infinite;
    z-index: -1;
    pointer-events: none;
}
.server-card::after, .server-state-card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    pointer-events: none;
}
.server-card:hover, .server-state-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.server-card, .server-state-card { transition: transform .35s ease, box-shadow .35s ease; }

.server-card-top, .server-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}
.server-title { display: flex; align-items: center; gap: .7rem; }
.card-kicker { font-size: .72rem; letter-spacing: .09em; color: var(--text-faint); font-weight: 700; text-transform: uppercase; }
.server-state, .server-title > div > b { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin-top: .3rem; }
.server-icon, .server-icon-box {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--surface-2);
    display: grid; place-items: center;
    color: var(--text-muted);
}
.server-icon .icon { --icon-tint: currentColor; }
.server-icon-box .ui-symbol { color: var(--text-muted); }

/* Оживлённый статус-индикатор: пульсирующее ядро + расходящиеся кольца */
.state-light, .online-dot, .server-online .online-dot {
    --dot-color: var(--success);
    position: relative;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--dot-color);
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--dot-color) 70%, transparent);
    flex: none;
}
.state-light::before, .state-light::after,
.online-dot::before, .online-dot::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--dot-color);
    animation: radar-ping 2.2s cubic-bezier(0,.4,.3,1) infinite;
}
.state-light::after, .online-dot::after { animation-delay: 1.1s; }
.state-light.is-offline, .online-dot.offline { --dot-color: var(--danger); }
.state-light.is-checking, .online-dot.checking { --dot-color: var(--warning); }
.state-light.is-offline::before, .state-light.is-offline::after,
.online-dot.offline::before, .online-dot.offline::after { animation-play-state: paused; opacity: .25; }

.server-online { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--success); font-size: .92rem; }

.server-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.server-metric, .server-metrics > div {
    display: flex; align-items: center; gap: .7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .7rem .8rem;
    transition: transform .2s ease, border-color .2s ease;
}
.server-metric:hover, .server-metrics > div:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.metric-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--tint, var(--accent)) 18%, transparent);
    color: var(--tint, var(--accent));
}
.metric-icon .icon { --icon-tint: currentColor; }
.metric-icon .ui-symbol { color: currentColor; }
.server-metric strong, .server-metrics b {
    display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}
.server-metric small, .server-metrics small { color: var(--text-muted); font-size: .74rem; }
.stat-flash { animation: value-flash .5s ease; }

.server-footer, .server-updated {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1.1rem; padding-top: .9rem;
    border-top: 1px solid var(--border);
    font-size: .8rem; color: var(--text-muted);
}
.pulse-dot, .sync-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: .4rem;
    animation: ping-soft 1.8s ease-in-out infinite;
}

/* ---------- Секции / инфо-карточки / соцсети ---------- */
.section { padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem); max-width: 1180px; margin: 0 auto; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: .4rem; }
.section-heading p { color: var(--text-muted); max-width: 34ch; margin: 0; }
.section-heading.centered { flex-direction: column; align-items: center; text-align: center; margin: 0 auto 2.4rem; }
.section-heading.centered p { max-width: 52ch; }

.stats-grid, .feature-grid, .workspace-grid { display: grid; gap: 1.1rem; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.feature-grid { grid-template-columns: repeat(2, minmax(340px, 1fr)); }
.workspace-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.4rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.info-icon, .workspace-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--surface-2);
    display: grid; place-items: center; margin-bottom: .9rem;
    color: var(--accent);
}
.info-icon .icon, .workspace-icon .icon, .workspace-icon .ui-symbol { --icon-tint: currentColor; color: currentColor; }
.info-value { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.info-card h3 { font-size: 1rem; margin: .3rem 0 .3rem; }
.info-card p { color: var(--text-muted); font-size: .88rem; margin: 0; }

.feature-card, .workspace-card {
    position: relative;
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.3rem;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover, .workspace-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.feature-glow {
    position: absolute; inset: auto -30% -60% auto; width: 60%; height: 140%;
    background: radial-gradient(circle, var(--tint, var(--accent)) 0%, transparent 70%);
    opacity: .18; pointer-events: none;
}
.feature-icon, .workspace-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--tint, var(--accent)) 20%, transparent);
    color: var(--tint, var(--accent));
}
.feature-icon .icon, .feature-icon .ui-symbol { --icon-tint: currentColor; color: currentColor; }
.feature-content h3, .feature-card h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.feature-content p, .feature-card p { color: var(--text-muted); font-size: .87rem; margin: 0; }
.feature-note { display: inline-block; margin-top: .6rem; font-size: .74rem; color: var(--tint, var(--accent)); font-weight: 600; }
.feature-arrow { position: absolute; right: 1.2rem; top: 1.3rem; --icon-tint: var(--text-faint); color: var(--text-faint); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.feature-card:hover .feature-arrow { opacity: 1; transform: translateX(3px); }

.closing-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent-2) 14%, var(--surface)));
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 2rem clamp(1.4rem, 4vw, 2.6rem);
}
.closing-card h2 { margin-top: .3rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.closing-card p { color: var(--text-muted); margin: 0; max-width: 42ch; }

.socials, .social-strip {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem;
    padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 4vw, 3rem);
    max-width: 1180px; margin: 0 auto;
}
.social-strip { justify-content: center; gap: 1.6rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.social-title { color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.social-copy h2 { margin: .3rem 0 .3rem; font-size: 1.5rem; }
.social-copy p { color: var(--text-muted); margin: 0; }
.social-links { display: flex; gap: .8rem; flex-wrap: wrap; }
.social-link, .social-links a {
    display: flex; align-items: center; gap: .7rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: .7rem 1rem; color: var(--text); transition: transform .2s ease, border-color .2s ease;
}
.social-link:hover, .social-links a:hover { transform: translateY(-3px); border-color: var(--border-strong); text-decoration: none; }
.social-badge {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast);
    font-weight: 700; font-size: .74rem;
}
.social-link small { display: block; color: var(--text-muted); font-weight: 400; font-size: .76rem; }
.social-arrow { margin-left: .4rem; color: var(--text-faint); }

.footer, .landing-footer {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem;
    padding: 1.6rem clamp(1rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
    color: var(--text-muted); font-size: .85rem;
    max-width: 1180px; margin: 0 auto;
}
.footer-right { display: flex; align-items: center; gap: .7rem; }
.footer-separator { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }

/* ---------- Анимации ---------- */
@keyframes radar-ping {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes ping-soft {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 0%, transparent); }
}
@keyframes drift-grid {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-64px, -32px, 0); }
}
@keyframes card-rise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes value-flash {
    0% { color: var(--accent); }
    100% { color: inherit; }
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes float-drone {
    0%   { transform: translate(0,0) rotate(0deg); }
    50%  { transform: translate(6px,-10px) rotate(3deg); }
    100% { transform: translate(0,0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ==================== 6. Auth: карточки входа/регистрации/активации и модалка ==================== */
.auth-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.2rem;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}
/* Декоративный фон: мягкие пятна света + сетка + "пролетающий" дрон-акцент */
.auth-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-decor .blob {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .4;
}
.auth-decor .blob-a { width: 34vw; height: 34vw; top: -8vw; left: -6vw; background: var(--accent); }
.auth-decor .blob-b { width: 30vw; height: 30vw; bottom: -10vw; right: -8vw; background: var(--accent-2); }
.auth-decor .grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.auth-decor .ring {
    position: absolute; border: 1px solid var(--border-strong); border-radius: 50%;
    opacity: .5;
}
.auth-decor .ring-a { width: 480px; height: 480px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.auth-decor .ring-b { width: 340px; height: 340px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.auth-decor .float-icon {
    position: absolute; color: var(--text-faint); opacity: .5;
    animation: float-drone 7s ease-in-out infinite;
}

.auth-brand {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: .6rem;
    justify-content: center;
    margin-bottom: 1.4rem;
    color: var(--text);
    font-weight: 700;
}
.auth-brand .brand-icon { width: 36px; height: 36px; border-radius: 10px; }

.auth-wrapper { position: relative; z-index: 1; width: 100%; max-width: 590px; }

.auth-card {
    position: relative;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(18px);
    width: 100%;
    padding: clamp(1.7rem, 4vw, 2.4rem);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid var(--border);
    animation: card-rise .45s cubic-bezier(.2,.9,.25,1) both;
}
.auth-card::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, transparent), transparent 40%, color-mix(in srgb, var(--accent-2) 55%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.auth-card-icon {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.auth-card-icon .icon { --icon-tint: currentColor; --icon-size: 26px; }
.auth-card h2 { font-size: 1.4rem; margin-bottom: .35rem; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 1.6rem; font-size: .9rem; }

.auth-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.auth-error {
    display: none;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--danger);
    border-radius: 12px;
    padding: .6rem .8rem;
    font-size: .85rem;
    text-align: left;
}
.auth-error.is-visible { display: block; }
.auth-success {
    display: none;
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
    border-radius: 12px; padding: .6rem .8rem; font-size: .85rem; text-align: left;
}
.auth-success.is-visible { display: block; }

.auth-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
    border: none; border-radius: 12px; padding: .85rem;
    font-size: 1rem; font-weight: 700;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.auth-btn:hover { filter: brightness(1.07); }
.auth-btn[disabled] { opacity: .65; cursor: progress; filter: none; }

.auth-links { margin-top: 1.4rem; font-size: .87rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .5rem; }
.auth-links a { font-weight: 600; }

/* поля ввода с иконками — иконка всегда видна */
.input-group { position: relative; width: 100%; }
.input-group label {
    display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted);
    margin-bottom: .4rem; letter-spacing: .01em;
}
.input-icon {
    position: absolute; left: 14px;
    top: calc(50% + (var(--has-label, 0) * 12px));
    transform: translateY(-50%);
    --icon-tint: var(--text-faint);
    pointer-events: none;
    transition: background-color .2s ease;
    z-index: 1;
}
.input-group:has(label) .input-icon { --has-label: 1; top: calc(50% + 12px); }
.input-group input {
    width: 100%;
    padding: .85rem .9rem .85rem 2.6rem;
    background: var(--input-bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.input-group input::placeholder { color: var(--text-faint); }
.input-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    background: var(--surface);
}
.input-group input:focus ~ .input-icon,
.input-group:focus-within .input-icon { --icon-tint: var(--accent); }
.input-group.has-toggle input { padding-right: 2.6rem; }
.input-toggle {
    position: absolute; right: 10px; top: calc(50% + (var(--has-label, 0) * 12px));
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center;
    color: var(--text-faint);
}
.input-group:has(label) .input-toggle { top: calc(50% + 12px); }
.input-toggle:hover { background: var(--surface-hover); color: var(--text); }
.input-toggle .icon { --icon-tint: currentColor; }
.input-hint { font-size: .76rem; color: var(--text-faint); margin-top: -.25rem; }

.auth-divider { display: flex; align-items: center; gap: .7rem; color: var(--text-faint); font-size: .78rem; margin: .2rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Модальное окно: возможности слева + увеличенная auth-карточка справа --- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    overflow: hidden;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; animation: overlay-in .25s ease; }
.modal-overlay.is-open ~ * ,
body.modal-open main, body.modal-open .topbar, body.modal-open .landing-nav, body.modal-open footer {
    filter: blur(6px) brightness(.85);
    transition: filter .3s ease;
    pointer-events: none;
}
.modal-shell {
    position: relative; width: min(1080px, 100%); max-height: 94vh;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    animation: modal-in .3s cubic-bezier(.2,.9,.25,1);
}
.modal-shell::-webkit-scrollbar { display: none; }
.modal-shell-inner {
    display: grid; grid-template-columns: minmax(260px, .78fr) minmax(500px, 1.22fr);
    gap: 1.25rem; align-items: stretch;
}
.modal-shell .auth-aside { min-height: 100%; }
.modal-shell .auth-card { width: 100%; animation: none; }
.modal-shell .auth-close { display: grid; }
.modal-close { display: none; }

.auth-close {
    position: absolute; top: 18px; right: 18px; z-index: 3;
    width: 38px; height: 38px; border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: grid; place-items: center; cursor: pointer;
    color: var(--text-muted);
}
.auth-close:hover { color: var(--text); background: var(--surface-hover); transform: translateY(-1px); }
.auth-close .icon { --icon-tint: currentColor; }

.auth-aside {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 2rem; border: 1px solid var(--border);
    border-radius: 28px; background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(18px); box-shadow: var(--shadow-lg);
}
.auth-aside::after {
    content: ""; position: absolute; width: 220px; height: 220px; right: -100px; bottom: -100px;
    border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent);
    filter: blur(10px); pointer-events: none;
}
.auth-aside-head h2 { margin: .45rem 0 .6rem; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.auth-aside-head p { color: var(--text-muted); line-height: 1.6; margin: 0; }
.auth-benefits { display: grid; gap: .75rem; margin: 2rem 0; }
.auth-benefit {
    display: flex; align-items: center; gap: .75rem; padding: .85rem;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.auth-benefit-icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
}
.auth-benefit b, .auth-benefit small { display: block; }
.auth-benefit small { margin-top: .15rem; color: var(--text-muted); font-size: .76rem; }
.auth-aside-social { position: relative; z-index: 1; }
.auth-socials { display: flex; gap: .55rem; margin-top: .65rem; flex-wrap: wrap; }
.auth-socials a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .7rem;
    border: 1px solid var(--border); border-radius: 12px; color: var(--text);
    background: var(--surface); font-size: .8rem;
}
.auth-socials a:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-2px); }

.auth-page > .auth-wrapper { max-width: 590px; }
.auth-page { overflow-x: hidden; }
@media (max-width: 820px) {
    .modal-shell-inner { grid-template-columns: 1fr; }
    .modal-shell .auth-aside { display: none; }
}
@media (max-width: 600px) {
    .auth-page { padding: 1rem; }
    .auth-card { padding: 2rem 1.2rem; border-radius: 22px; }
    .auth-close { top: 12px; right: 12px; }
}
.modal-loading {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    color: var(--text-muted); padding: 2.4rem; font-size: .9rem;
}
.spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--accent);
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== 7. clients/ — приветственный экран ==================== */
.welcome-screen {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.2rem;
    position: relative; overflow: hidden;
}
.welcome-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: card-rise .5s cubic-bezier(.2,.9,.25,1) both;
}
.welcome-avatar {
    width: 74px; height: 74px; margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.6rem; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.welcome-eyebrow { color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.welcome-card h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: .5rem 0 .6rem; }
.welcome-card .lead { color: var(--text-muted); max-width: 48ch; margin: 0 auto 1.6rem; }

.welcome-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; margin-bottom: 1.8rem; }
.welcome-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: .9rem; }
.welcome-stat b { display: block; font-size: 1.3rem; }
.welcome-stat span { font-size: .74rem; color: var(--text-muted); }

.welcome-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.welcome-links { margin-top: 1.4rem; font-size: .85rem; }
.welcome-links button {
    background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .4rem;
}
.welcome-links button:hover { color: var(--danger); }
.welcome-links .icon { --icon-tint: currentColor; }

/* ==================== 8. Легаси-панель welcome/dashboard.html ==================== */
.sidebar-menu {
    background: var(--surface);
    width: 250px; min-height: 100vh;
    border-right: 1px solid var(--border);
    padding: 1.2rem 0;
    position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column;
    z-index: 20;
}
.menu-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .75rem 1.4rem;
    color: var(--text-muted); font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
.menu-item .icon { --icon-tint: currentColor; }
.menu-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.menu-item.logout-item { margin-top: auto; border-top: 1px solid var(--border); }

.main-content { margin-left: 250px; padding: 2rem clamp(1rem, 3vw, 2.4rem); }
.main-content h1 { margin-bottom: 1.4rem; font-size: 1.6rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }

.mini-server-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.3rem; box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.mini-server-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mini-server-card .server-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border);
}
.mini-server-card .server-header h3 { font-size: 1.05rem; }
.mini-server-card .server-info p { display: flex; justify-content: space-between; margin: .5rem 0; font-size: .88rem; color: var(--text-muted); }
.mini-server-card .server-info strong { color: var(--text); }

/* ---------- 9. welcome/index.html — специфичные штрихи ---------- */
.landing-ambient { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.flight-trace { position: absolute; width: 40%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .25; }
.trace-a { top: 18%; left: -5%; }
.trace-b { top: 55%; right: -5%; }
.trace-c { top: 82%; left: 10%; }
.hero-v2 { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); }
.centered .eyebrow { justify-content: center; }


/* ==================== Auth / кабинет: крупный режим в стиле ServerControl ==================== */
.auth-page {
    min-height: 100vh;
    padding: 32px;
    gap: 28px;
}
.auth-aside {
    width: min(440px, 38vw);
    padding: 34px;
    border-radius: 28px;
}
.auth-aside-head h2 { font-size: clamp(26px, 3vw, 38px); }
.auth-aside-head p { font-size: 16px; color: var(--text-muted); }
.auth-benefit {
    padding: 16px;
    border-radius: 16px;
    gap: 14px;
}
.auth-benefit b { font-size: 16px; }
.auth-benefit small { font-size: 14px; line-height: 1.45; }
.auth-card {
    max-width: 560px;
    padding: 38px;
    border-radius: 28px;
}
.auth-card-icon { width: 64px; height: 64px; border-radius: 18px; }
.auth-card h2 { font-size: 30px; }
.auth-subtitle { font-size: 16px; }
.auth-form { gap: 18px; }
.input-group label { font-size: 15px; margin-bottom: 7px; }
.input-group input,
.input-group select {
    min-height: 52px;
    padding: 12px 16px 12px 48px;
    font-size: 16px;
    border-radius: 14px;
}
.auth-btn {
    min-height: 52px;
    border-radius: 14px;
    font-size: 17px;
}
.auth-links { font-size: 15px; line-height: 1.7; }
.auth-close {
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}
@media (max-width: 900px) {
    .auth-page { padding: 18px; }
    .auth-aside { display: none; }
    .auth-card { max-width: 620px; }
}


/* ==================== Auth: единая раскладка страниц и модалки ==================== */
.auth-page {
    display: grid;
    grid-template-columns: minmax(340px, 430px) minmax(480px, 620px);
    gap: 24px;
    align-items: stretch;
    justify-content: center;
    padding: 32px 28px;
}
.auth-page > .auth-aside {
    width: auto;
    min-height: 620px;
    animation: auth-aside-in .55s cubic-bezier(.2,.9,.25,1) both;
}
.auth-page > .auth-wrapper {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-page > .auth-wrapper .auth-card {
    animation: auth-card-in .55s .08s cubic-bezier(.2,.9,.25,1) both;
}

/* модалка главной: две отдельные карточки с зазором */
.modal-shell {
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: visible;
}
.modal-shell-inner {
    grid-template-columns: minmax(340px, .82fr) minmax(500px, 1.18fr);
    gap: 24px;
    align-items: stretch;
}
.modal-shell-inner > .auth-aside,
.modal-shell-inner > .auth-card {
    min-width: 0;
}
.modal-shell-inner > .auth-aside {
    min-height: 620px;
    animation: auth-aside-in .55s cubic-bezier(.2,.9,.25,1) both;
}
.modal-shell-inner > .auth-card {
    animation: auth-card-in .55s .08s cubic-bezier(.2,.9,.25,1) both;
}

@keyframes auth-aside-in {
    from { opacity: 0; transform: translateX(-28px) scale(.985); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes auth-card-in {
    from { opacity: 0; transform: translateX(28px) translateY(8px) scale(.985); }
    to   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

.auth-close {
    width: 42px;
    height: 42px;
    top: 16px;
    right: 16px;
    border-radius: 12px;
    z-index: 10;
}
.auth-card h2 { font-size: 30px; }
.auth-subtitle { font-size: 16px; }
.auth-form { gap: 18px; }
.input-group input { min-height: 50px; font-size: 16px; }
.auth-btn { min-height: 50px; font-size: 16px; }
.auth-links { font-size: 15px; }

@media (max-width: 980px) {
    .auth-page {
        grid-template-columns: minmax(300px, 380px) minmax(420px, 1fr);
        gap: 18px;
        padding: 22px;
    }
    .auth-page > .auth-aside { min-height: 580px; }
    .modal-shell { width: min(940px, calc(100vw - 32px)); }
    .modal-shell-inner { grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 30px; }
}
@media (max-width: 820px) {
    .auth-page {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
    }
    .auth-page > .auth-aside { display: none; }
    .modal-shell-inner { grid-template-columns: 1fr; }
    .modal-shell-inner > .auth-aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page > .auth-aside,
    .auth-page > .auth-wrapper .auth-card,
    .modal-shell-inner > .auth-aside,
    .modal-shell-inner > .auth-card { animation: none; }
}

/* ==================== Auth: карточки по высоте содержимого, переключатель форм ==================== */
.auth-v2 { min-height:100vh; padding:42px 28px 54px; align-items:flex-start; }
.auth-v2 .auth-wrapper { max-width:1180px; margin:0 auto; }
.auth-v2 .auth-brand { justify-content:flex-start; width:max-content; margin:0 0 22px 4px; font-size:16px; }
.auth-v2 .auth-layout { display:grid; grid-template-columns:minmax(300px,360px) minmax(460px,560px); gap:22px; align-items:center; justify-content:center; }
.auth-v2 .auth-aside { min-height:0; height:auto; padding:26px; border-radius:22px; align-self:center; }
.auth-v2 .auth-aside-head h2 { font-size:24px; margin:10px 0 8px; }
.auth-v2 .auth-aside-head p { font-size:14px; margin:0; }
.auth-v2 .auth-benefits { display:grid; gap:10px; margin-top:22px; }
.auth-v2 .auth-benefit { min-height:64px; padding:11px 12px; border-radius:14px; }
.auth-v2 .auth-socials { gap:7px; margin-top:12px; }
.auth-v2 .auth-socials a { min-height:42px; }
.auth-v2 .auth-card { width:auto; min-width:0; padding:30px; border-radius:22px; align-self:start; }
.auth-v2 .auth-card h2 { font-size:28px; }
.auth-v2 .auth-subtitle { font-size:15px; margin-bottom:22px; }
.auth-v2 .auth-card-icon { width:58px; height:58px; margin-bottom:14px; }
.auth-v2 .input-group input { min-height:50px; font-size:16px; padding-top:.9rem; padding-bottom:.9rem; }
.auth-v2 .input-group label { font-size:13px; }
.auth-v2 .auth-form { gap:15px; }
.auth-v2 .auth-btn { min-height:50px; font-size:16px; border-radius:13px; }
.auth-v2 .auth-links { font-size:14px; }
.auth-v2 .auth-close { top:16px; right:16px; }
.auth-v2 .auth-switcher { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:5px; margin-bottom:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.auth-v2 .auth-switcher a { min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--text-muted); font-size:13px; font-weight:700; text-decoration:none; transition:.2s ease; }
.auth-v2 .auth-switcher a:hover { color:var(--text); background:var(--surface-hover); text-decoration:none; }
.auth-v2 .auth-switcher a.active { color:var(--accent-contrast); background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent); }
.auth-v2 .auth-card { animation: auth-v2-card-in .36s cubic-bezier(.2,.8,.2,1) both; }
.auth-v2 .auth-aside { animation: auth-v2-aside-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes auth-v2-card-in { from{opacity:0;transform:translateX(18px) translateY(8px)} to{opacity:1;transform:none} }
@keyframes auth-v2-aside-in { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:none} }
.auth-v2 .auth-aside::after { width:180px;height:180px; }
@media (max-width:900px){
    .auth-v2 { padding:28px 18px 40px; }
    .auth-v2 .auth-layout { grid-template-columns:minmax(0,1fr); max-width:600px; margin:0 auto; }
    .auth-v2 .auth-aside { order:2; }
    .auth-v2 .auth-card { order:1; }
}
@media (max-width:560px){
    .auth-v2 { padding:18px 12px 28px; }
    .auth-v2 .auth-card,.auth-v2 .auth-aside { padding:21px; border-radius:18px; }
    .auth-v2 .auth-switcher { grid-template-columns:1fr; }
    .auth-v2 .auth-switcher a { min-height:40px; }
}


/* ==================== Auth: независимые карточки, адаптивная высота ==================== */
.auth-v2 {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 34px 24px 48px;
    align-items: flex-start;
}

.auth-v2 .auth-wrapper {
    width: min(1160px, 100%);
    max-width: none;
    margin: 0 auto;
}

.auth-v2 .auth-layout {
    display: grid;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px);
    gap: 24px;
    align-items: stretch;
    justify-content: center;
}

/* общая высота панелей по более высокой форме, без растяжения на экран */
.auth-v2 .auth-aside,
.auth-v2 .auth-card {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    box-sizing: border-box;
}

.auth-v2 .auth-aside {
    padding: 28px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-v2 .auth-card {
    padding: 30px 32px;
    border-radius: 24px;
    text-align: left;
}

.auth-v2 .auth-card-icon {
    margin-left: 0;
    margin-right: 0;
}

.auth-v2 .auth-card h2,
.auth-v2 .auth-subtitle {
    text-align: left;
}

/* выбор формы — карточки, а не ссылки */
.auth-v2 .auth-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
    margin: 0 0 22px;
    border: 0;
    background: transparent;
}

.auth-v2 .auth-switcher a {
    position: relative;
    min-height: 56px;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease,
                background .18s ease, color .18s ease, box-shadow .18s ease;
}

.auth-v2 .auth-switcher a:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

.auth-v2 .auth-switcher a.active {
    color: var(--accent-contrast);
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 9px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.auth-v2 .auth-switcher a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--accent-contrast) 75%, transparent);
}

.auth-v2 .auth-form { gap: 16px; }
.auth-v2 .input-group input { min-height: 50px; box-sizing: border-box; }
.auth-v2 .auth-btn { min-height: 50px; }

/* боковую панель не растягиваем на высоту экрана */
.auth-v2 .auth-aside { min-height: 0 !important; }

@media (max-width: 900px) {
    .auth-v2 .auth-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 650px;
        align-items: stretch;
    }

    .auth-v2 .auth-aside {
        order: 2;
    }

    .auth-v2 .auth-card {
        order: 1;
    }
}

@media (max-width: 620px) {
    .auth-v2 { padding: 18px 12px 28px; }
    .auth-v2 .auth-card,
    .auth-v2 .auth-aside { padding: 21px; border-radius: 20px; }
    .auth-v2 .auth-switcher {
        grid-template-columns: 1fr;
    }
    .auth-v2 .auth-switcher a { min-height: 46px; }
}


/* регистрация: компактные поля */
.auth-v2 .auth-layout { align-items: start !important; }
.auth-v2 .auth-aside,
.auth-v2 .auth-card { align-self: start !important; height: auto !important; min-height: 0 !important; }
.auth-v2 .auth-card { max-height: none; }

.auth-v2 .auth-form { gap: 12px !important; }
.auth-v2 .auth-form .grid-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.auth-v2 .auth-form .register-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.auth-v2 .auth-form .register-grid .input-group { min-width:0; }
.auth-v2 .auth-form .input-group { min-width:0; }
.auth-v2 .auth-form .input-group label { margin:0 0 5px; font-size:13px; }
.auth-v2 .auth-form .input-group input {
  box-sizing:border-box; width:100%; height:44px; min-height:44px;
  padding:10px 12px; border-radius:11px; font-size:15px; line-height:1.2;
}
.auth-v2 .auth-form .input-group:has(.input-icon) input { padding-left:40px; }
.auth-v2 .auth-form .input-group.has-toggle input { padding-right:42px; }
.auth-v2 .auth-form .input-icon { left:13px; }
.auth-v2 .auth-form .input-toggle { right:7px; width:34px; height:34px; }
.auth-v2 .auth-form .auth-btn { margin-top:2px; min-height:46px; height:46px; }
.auth-v2 .auth-card h2 { margin-bottom:5px; }
.auth-v2 .auth-subtitle { margin-bottom:14px; }

@media (max-width: 720px) {
  .auth-v2 .auth-form .grid-form,
  .auth-v2 .auth-form .register-grid { grid-template-columns:1fr; }
}

.auth-v2 .field-optional{font-weight:500;color:var(--text-faint);font-size:11px;margin-left:4px;}


/* селектор форм — карточки-кнопки на страницах и в модалке */
.auth-v2 .auth-switcher {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0 0 20px;
    padding:0;
    border:0;
    background:transparent;
}
.auth-v2 .auth-switch-card {
    appearance:none;
    border:1px solid var(--border);
    min-height:50px;
    padding:10px 12px;
    border-radius:13px;
    background:var(--surface-2);
    color:var(--text-muted);
    font:700 14px/1.1 inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.auth-v2 .auth-switch-card:hover {
    color:var(--text);
    border-color:var(--border-strong);
    background:var(--surface-hover);
    transform:translateY(-1px);
}
.auth-v2 .auth-switch-card.active {
    color:var(--accent-contrast);
    border-color:transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:0 9px 24px -12px color-mix(in srgb,var(--accent) 75%,transparent);
}
.modal-shell-inner .auth-card .auth-switcher {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0 0 20px;
    padding:0;
    border:0;
    background:transparent;
}
.modal-shell-inner .auth-card .auth-switch-card {
    appearance:none;
    border:1px solid var(--border);
    min-height:50px;
    padding:10px 12px;
    border-radius:13px;
    background:var(--surface-2);
    color:var(--text-muted);
    font:700 14px/1.1 inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.modal-shell-inner .auth-card .auth-switch-card:hover {
    color:var(--text);
    border-color:var(--border-strong);
    background:var(--surface-hover);
    transform:translateY(-1px);
}
.modal-shell-inner .auth-card .auth-switch-card.active {
    color:var(--accent-contrast);
    border-color:transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:0 9px 24px -12px color-mix(in srgb,var(--accent) 75%,transparent);
}
@media (max-width:620px){
  .auth-v2 .auth-switcher,.modal-shell-inner .auth-card .auth-switcher{grid-template-columns:1fr;}
}


/* auth-страницы: композиция по центру, карточки по высоте содержимого */
.auth-v2 {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box;
    padding: 28px 24px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.auth-v2 .auth-wrapper {
    width: min(1160px, 100%) !important;
    max-width: none !important;
    margin: 0 auto !important;
}

.auth-v2 .auth-brand {
    margin: 0 0 18px 4px !important;
}

.auth-v2 .auth-layout {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    gap: 24px !important;
    align-items: start !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.auth-v2 .auth-aside,
.auth-v2 .auth-card {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.auth-v2 .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 980px) {
    .auth-v2 {
        justify-content: center !important;
    }

    .auth-v2 .auth-layout {
        grid-template-columns: minmax(0, 650px) !important;
        max-width: 650px !important;
    }

    .auth-v2 .auth-aside {
        order: 2;
    }

    .auth-v2 .auth-card {
        order: 1;
    }
}

@media (max-width: 620px) {
    .auth-v2 {
        padding: 16px 12px 24px !important;
        justify-content: flex-start !important;
        overflow-y: auto;
    }

    .auth-v2 .auth-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: none !important;
    }
}


/* auth: бренд по центру и парные карточки */
.auth-v2 {
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 32px 24px 42px !important;
}
.auth-v2 .auth-wrapper {
    width: min(1160px, 100%) !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}
.auth-v2 .auth-brand {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 22px !important;
}
.auth-v2 .auth-layout {
    width: 100% !important;
    max-width: 1015px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    gap: 36px !important;
    align-items: stretch !important;
    justify-content: center !important;
}
.auth-v2 .auth-aside,
.auth-v2 .auth-card {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}
.auth-v2 .auth-aside {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.auth-v2 .auth-card {
    display: flex !important;
    flex-direction: column !important;
}
.auth-v2 .auth-form { flex: 0 0 auto; }
.auth-v2 .auth-links { margin-top: auto; padding-top: 12px; }

@media (max-width: 980px) {
    .auth-v2 { justify-content: center !important; align-items: center !important; }
    .auth-v2 .auth-layout {
        grid-template-columns: minmax(0, 650px) !important;
        max-width: 650px !important;
        align-items: stretch !important;
    }
    .auth-v2 .auth-aside { order: 2; }
    .auth-v2 .auth-card { order: 1; }
}

@media (max-width: 620px) {
    .auth-v2 {
        min-height: 100dvh !important;
        padding: 20px 12px 28px !important;
        justify-content: center !important;
        overflow-y: auto !important;
    }
    .auth-v2 .auth-brand { margin-bottom: 16px !important; }
    .auth-v2 .auth-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
    }
    .auth-v2 .auth-aside,
    .auth-v2 .auth-card { align-self: stretch !important; }
}

/* ---------- Авторизованный пользователь на главной ---------- */
.site-auth-actions[hidden],
.site-account[hidden] { display: none !important; }
.site-auth-actions, .site-account { display: flex; align-items: center; gap: .65rem; }
.account-profile {
    display: inline-flex; align-items: center; gap: .65rem;
    min-width: 0; max-width: 240px; padding: .42rem .65rem;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-2); color: var(--text); text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.account-profile:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-1px); }
.account-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface)); }
.account-avatar .icon { --icon-tint: currentColor; }
.account-copy { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.account-copy b, .account-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-copy b { font-size:.9rem; }
.account-copy small { color:var(--text-muted); font-size:.72rem; margin-top:.18rem; }
.account-logout { white-space:nowrap; }

@media (max-width: 900px) {
    .site-account, .site-auth-actions { gap: .45rem; }
    .account-profile { max-width: 190px; }
}
@media (max-width: 680px) {
    .account-copy { display:none; }
    .account-profile { padding:.45rem; }
}

/* плавная смена палитры для welcome/auth/clients */
html.theme-transition,
html.theme-transition body,
html.theme-transition body * {
    transition-property: background-color, background, border-color, color, box-shadow, outline-color, fill;
    transition-duration: .34s;
    transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
    html.theme-transition,
    html.theme-transition body,
    html.theme-transition body * { transition-duration: .01ms; }
}


/* ==================== Адаптив для публичных, auth-страниц и кабинета ==================== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.shell,.hero,.section,.socials,.social-strip,.footer,.landing-footer{width:100%;min-width:0}
@media (max-width:820px){
  .topbar,.landing-nav{gap:.7rem;padding-left:12px;padding-right:12px}
  .topnav,.landing-links{display:none}
  .top-actions,.landing-actions{gap:.45rem}
  .shell,.section,.socials,.social-strip,.footer,.landing-footer{padding-left:12px;padding-right:12px}
  .hero{grid-template-columns:1fr!important;padding-left:12px;padding-right:12px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:.65rem}
  .hero-actions .btn{width:100%}
  .server-metrics{grid-template-columns:1fr 1fr}
  .section-heading{align-items:flex-start;gap:1rem}
  .section-heading p{max-width:none}
  .stats-grid,.feature-grid,.workspace-grid{grid-template-columns:1fr 1fr}
  .closing-card{padding-left:16px;padding-right:16px}
  .social-strip{display:flex;flex-direction:column;align-items:flex-start}
  .social-links{width:100%}
  .social-link,.social-links a{flex:1 1 180px}
}
@media (max-width:600px){
  .topbar,.landing-nav{min-height:58px}
  .top-actions .theme-switcher,.landing-actions .theme-switcher{transform:scale(.92);transform-origin:right center}
  .hero{padding-top:2rem;padding-bottom:2rem}
  .hero h1{font-size:clamp(2rem,10vw,2.7rem)}
  .hero-text,.hero-lead{font-size:.95rem}
  .server-metrics{grid-template-columns:1fr}
  .stats-grid,.feature-grid,.workspace-grid{grid-template-columns:1fr}
  .info-card,.feature-card,.workspace-card{padding:16px}
  .footer,.landing-footer{flex-direction:column;align-items:flex-start;gap:.6rem}
  .footer-right{flex-wrap:wrap}
  .auth-v2{padding-left:10px!important;padding-right:10px!important}
  .auth-v2 .auth-layout{width:100%!important}
  .auth-v2 .auth-card,.auth-v2 .auth-aside{width:100%!important}
  .auth-card{padding:22px 16px;border-radius:20px}
  .auth-card h2{font-size:24px}
  .auth-form{gap:14px}
  .input-group input{min-height:48px;font-size:16px}
  .auth-btn{min-height:48px;font-size:16px}
}
@media (max-width:380px){
  .shell,.section,.socials,.social-strip,.footer,.landing-footer{padding-left:8px;padding-right:8px}
  .auth-v2{padding-left:8px!important;padding-right:8px!important}
  .auth-card{padding:18px 13px}
}
@supports(padding:max(0px)){body{padding-bottom:max(0px,env(safe-area-inset-bottom))}}


/* прокрутка auth, стабильная шапка welcome, карточка судьи в профиле */
.auth-v2 {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
}
.auth-v2 .auth-wrapper { flex: 0 0 auto; }
@media (max-width: 980px) {
    .auth-v2 {
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding-top: 20px !important;
        padding-bottom: 32px !important;
    }
    .auth-v2 .auth-wrapper { width: 100% !important; }
    .auth-v2 .auth-brand { flex: 0 0 auto; }
}
@media (max-width: 620px) {
    .auth-v2 {
        padding: 14px 10px 28px !important;
        -webkit-overflow-scrolling: touch;
    }
    .auth-v2 .auth-card { width: 100% !important; }
    .auth-v2 .auth-form .register-grid { grid-template-columns: 1fr !important; }
}

/* шапка главной: действия не сжимают бренд */
.landing-nav {
    min-width: 0;
}
.landing-nav .brand { min-width: 0; flex: 1 1 auto; }
.landing-nav .brand-copy { min-width: 0; }
.landing-nav .landing-actions { flex: 0 0 auto; min-width: 0; }
@media (max-width: 820px) {
    .landing-nav { padding: 10px 12px !important; gap: 8px !important; }
    .landing-nav .brand-copy small { display: none; }
    .landing-nav .brand-copy b { font-size: .92rem; white-space: nowrap; }
    .landing-nav .landing-actions .theme-toggle { flex: 0 0 auto; }
    .landing-nav .nav-login { display: inline-flex; }
    .landing-nav .nav-register { display: inline-flex; }
}
@media (max-width: 560px) {
    .landing-nav { padding: 8px 10px !important; }
    .landing-nav .brand-logo { width: 34px; height: 34px; border-radius: 10px; }
    .landing-nav .landing-actions { gap: 5px; }
    .landing-nav .nav-login, .landing-nav .nav-register {
        padding: .48rem .58rem; font-size: .76rem; white-space: nowrap;
    }
    .landing-nav .theme-toggle { transform: scale(.86); transform-origin: right center; margin-right: -5px; }
}
@media (max-width: 430px) {
    .landing-nav .nav-login { display: none; }
    .landing-nav .nav-register { padding-inline: .62rem; }
}

/* карточка судьи скрыта, js показывает её судьям */
#tab-profile .judge-profile-card { display: none; }
#tab-profile .judge-profile-card.is-visible { display: block; }


/* ==================== Главная: фоновые сферы, стеклянная шапка ==================== */
.landing-body { overflow-x: hidden; background:
    radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    radial-gradient(800px 540px at 88% 22%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 68%),
    var(--bg); }
.landing-body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image: radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size: 34px 34px; opacity:.18; mask-image:linear-gradient(to bottom, black, transparent 78%); }
.landing-nav { margin: 14px auto 0; width: min(1240px, calc(100% - 28px)); border:1px solid color-mix(in srgb, var(--border-strong) 75%, transparent); border-radius:18px;
    background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); }
.landing-nav::after { content:""; position:absolute; left:7%; right:7%; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); opacity:.65; }
.landing-ambient { position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.ambient-grid { position:absolute; inset:0; opacity:.11; background:linear-gradient(115deg,transparent 0 49.8%,color-mix(in srgb,var(--accent) 30%,transparent) 50%,transparent 50.2%); background-size:420px 420px; transform:rotate(-8deg) scale(1.3); mask-image:radial-gradient(ellipse at center,black,transparent 75%); }
.ambient-orb { position:absolute; display:block; border-radius:50%; width:clamp(110px,13vw,230px); aspect-ratio:1; filter:blur(1px); opacity:.55; mix-blend-mode:screen; box-shadow:inset -28px -30px 55px rgba(0,0,0,.35), inset 18px 15px 28px rgba(255,255,255,.13), 0 0 70px color-mix(in srgb,var(--orb-color) 35%,transparent); background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.42) 0 4%, color-mix(in srgb,var(--orb-color) 88%, white 12%) 12%, color-mix(in srgb,var(--orb-color) 72%, transparent) 43%, transparent 73%); animation:orb-float 13s ease-in-out infinite; }
.orb-a{--orb-color:#4f8cff;left:-2vw;top:17vh;animation-delay:-2s}.orb-b{--orb-color:#a78bfa;right:3vw;top:10vh;width:clamp(90px,10vw,180px);animation-delay:-7s}.orb-c{--orb-color:#2dd4bf;left:30vw;top:53vh;width:clamp(70px,8vw,150px);animation-delay:-4s}.orb-d{--orb-color:#fbbf24;right:18vw;top:65vh;width:clamp(60px,7vw,125px);animation-delay:-9s}.orb-e{--orb-color:#38bdf8;left:62vw;top:34vh;width:clamp(45px,5vw,90px);opacity:.38;animation-delay:-11s}.orb-f{--orb-color:#a78bfa;left:13vw;bottom:3vh;width:clamp(55px,6vw,110px);opacity:.32;animation-delay:-6s}
.ambient-ring { position:absolute; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:50%; opacity:.45; box-shadow:0 0 35px color-mix(in srgb,var(--accent) 10%,transparent); animation:ring-float 18s ease-in-out infinite; }
.ring-a{width:460px;height:460px;left:-150px;top:8%;}.ring-b{width:620px;height:620px;right:-260px;top:20%;border-color:color-mix(in srgb,var(--accent-2) 18%,transparent);animation-delay:-8s}.ring-c{width:280px;height:280px;left:48%;bottom:-180px;border-color:color-mix(in srgb,var(--success) 18%,transparent);animation-delay:-13s}
.card-sphere { position:absolute; width:120px; height:120px; right:-38px; bottom:-48px; border-radius:50%; pointer-events:none; opacity:.5; filter:blur(.2px); box-shadow:inset -18px -18px 32px rgba(0,0,0,.28), inset 10px 8px 18px rgba(255,255,255,.12), 0 0 45px color-mix(in srgb,var(--sphere-color) 30%,transparent); background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.34),color-mix(in srgb,var(--sphere-color) 82%,white 18%) 12%,color-mix(in srgb,var(--sphere-color) 60%,transparent) 50%,transparent 74%); transition:transform .4s ease,opacity .4s ease; }
.feature-card:hover .card-sphere,.workspace-card:hover .card-sphere{transform:translate(-8px,-8px) scale(1.08);opacity:.7}.sphere-cyan{--sphere-color:#38bdf8}.sphere-violet{--sphere-color:#a78bfa}.sphere-blue{--sphere-color:#4f8cff}.sphere-amber{--sphere-color:#fbbf24}.sphere-green{--sphere-color:#34d399}
.feature-card,.workspace-card,.server-state-card,.closing-card{isolation:isolate}.feature-card>*:not(.card-sphere),.workspace-card>*:not(.card-sphere),.server-state-card>*{position:relative;z-index:1}
.server-state-card::after{background:radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 26%),radial-gradient(circle at 8% 92%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 28%),inset 0 1px 0 rgba(255,255,255,.06)}
@keyframes orb-float{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(18px,-22px,0) scale(1.035)}66%{transform:translate3d(-14px,12px,0) scale(.97)}}
@keyframes ring-float{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(8deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ambient-orb,.ambient-ring{animation:none!important}}
@media (max-width:760px){.landing-nav{margin-top:8px;width:calc(100% - 16px);border-radius:15px}.landing-links{display:flex;flex:1 1 100%;justify-content:center;flex-wrap:wrap;gap:.45rem .9rem;padding-top:4px}.landing-links a{font-size:.78rem}.ambient-orb{opacity:.32}.ring-b{right:-420px}.ring-a{left:-300px}}

/* ==================== Веб-настройки сервера: стекло / blur ==================== */
:root { --site-blur: 18px; --site-orb-blur: 1px; --server-accent: #4f8cff; --server-accent-2: #a78bfa; }
.landing-nav,
.feature-card,
.workspace-card,
.server-state-card,
.closing-card,
.info-card,
.mini-server-card {
    backdrop-filter: blur(var(--site-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--site-blur)) saturate(140%);
}
.ambient-orb { filter: blur(var(--site-orb-blur)); }
.site-settings-wrap { position:relative; z-index:2; width:min(1100px,calc(100% - 28px)); margin:34px auto 80px; }
.settings-hero { padding:28px 4px 22px; }
.settings-hero .eyebrow,.panel-kicker { display:inline-block; font-size:.7rem; letter-spacing:.16em; font-weight:800; color:var(--accent); text-transform:uppercase; }
.settings-hero h1 { margin:.35rem 0 .55rem; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.035em; }
.settings-hero p { max-width:760px; color:var(--text-secondary); line-height:1.65; margin:0; }
.settings-panel { position:relative; overflow:hidden; margin-top:18px; padding:24px; border:1px solid color-mix(in srgb,var(--border-strong) 72%,transparent); border-radius:22px; background:color-mix(in srgb,var(--surface) 68%,transparent); box-shadow:0 22px 65px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(var(--site-blur)) saturate(140%); -webkit-backdrop-filter:blur(var(--site-blur)) saturate(140%); }
.settings-panel::after { content:""; position:absolute; width:240px; height:240px; right:-100px; top:-130px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),color-mix(in srgb,var(--accent) 28%,transparent) 32%,transparent 72%); filter:blur(12px); pointer-events:none; }
.settings-panel-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.settings-panel h2 { margin:.25rem 0 0; font-size:1.2rem; }
.settings-state,.blur-preview { border:1px solid var(--border); background:color-mix(in srgb,var(--surface-2) 70%,transparent); border-radius:999px; padding:.42rem .72rem; font-size:.78rem; color:var(--text-secondary); white-space:nowrap; }
.settings-form-grid { position:relative; z-index:1; display:grid; gap:10px; }
.setting-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,310px); align-items:center; gap:20px; padding:15px 0; border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.setting-row:first-child { border-top:0; }
.setting-row span { display:grid; gap:4px; }
.setting-row b { font-size:.96rem; }
.setting-row small { color:var(--text-secondary); line-height:1.4; }
.setting-row input[type=number],.setting-row select { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface-2) 82%,transparent); color:var(--text); padding:.72rem .8rem; }
.setting-row input[type=checkbox] { justify-self:end; width:48px; height:25px; accent-color:var(--accent); }
.setting-row input[type=range] { width:100%; accent-color:var(--accent); }
.blur-demo { position:relative; height:150px; margin-top:20px; overflow:hidden; border-radius:18px; border:1px solid var(--border); background:radial-gradient(circle at 15% 40%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 35%),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 40%),color-mix(in srgb,var(--bg) 75%,transparent); }
.blur-demo .ambient-orb { position:absolute; width:150px; height:150px; }
.blur-demo-card { position:absolute; inset:25px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px; border:1px solid color-mix(in srgb,var(--border-strong) 75%,transparent); border-radius:16px; background:color-mix(in srgb,var(--surface) 42%,transparent); backdrop-filter:blur(var(--site-blur)) saturate(145%); -webkit-backdrop-filter:blur(var(--site-blur)) saturate(145%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.blur-demo-card span { color:var(--text-secondary); font-size:.85rem; }
.settings-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.settings-actions p { margin:.35rem 0 0; color:var(--text-secondary); font-size:.84rem; }
.settings-actions .btn { min-width:190px; }
@media(max-width:700px){.setting-row{grid-template-columns:1fr}.setting-row input[type=checkbox]{justify-self:start}.settings-actions{align-items:stretch;flex-direction:column}.settings-actions .btn{width:100%}}

/* Единый стиль чекбокса (как во вкладках личного кабинета): скрытый native input + рисованный "box" с галочкой. */
.check{
  display:inline-flex; align-items:flex-start; gap:11px; font-size:.85rem; color:var(--text);
  cursor:pointer; user-select:none; -webkit-user-select:none; font-weight:normal;
}
.check input[type=checkbox]{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.check .box{
  width:22px; height:22px; flex:0 0 22px; margin-top:1px; border-radius:7px;
  border:2px solid var(--border-strong); background:var(--input-bg);
  display:grid; place-items:center; transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.check .tick{
  width:16px; height:16px; background:#fff;
  -webkit-mask:url(/icons/check.svg) center/contain no-repeat; mask:url(/icons/check.svg) center/contain no-repeat;
  transform:scale(0); transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.check:hover .box{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.check input[type=checkbox]:focus-visible ~ .box{ outline:2px solid var(--accent); outline-offset:2px; }
.check input[type=checkbox]:checked ~ .box{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.check input[type=checkbox]:checked ~ .box .tick{ transform:scale(1); }
.check-label{ line-height:1.4; }


/* визуальный стиль задаёт сервер */
:root { --accent: var(--server-accent, #4f8cff); --accent-2: var(--server-accent-2, #a78bfa); }
/* Стандартные синие акценты сайта не перекрашивают золотую тему; заданные вручную берутся из theme.js. */
[data-theme="military"] {
    --accent: var(--military-accent, #e6c164);
    --accent-2: var(--military-accent-2, #b9c99a);
}

/* не пускаем десктопную геометрию на телефоны */
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%;height:auto}
button,a,input,select,textarea{touch-action:manipulation}
@media(max-width:820px){
  .landing-nav{padding:10px 12px;gap:10px}
  .landing-nav .brand-copy small{display:none}
  .landing-nav .brand-logo{width:36px;height:36px;border-radius:10px}
  .landing-actions{margin-left:auto;gap:6px}
  .landing-actions .theme-toggle{display:none}
  .landing-actions .nav-register{display:none}
  .landing-actions .nav-login{padding:.55rem .7rem}
  .hero{min-height:0;padding-top:2.5rem}
  .hero-copy h1{font-size:clamp(2.25rem,12vw,4rem);line-height:.98}
  .hero-lead{font-size:.95rem}
  .server-card-v2{width:100%}
  .section{padding-top:2.5rem;padding-bottom:2.5rem}
  .section-heading h2{font-size:clamp(1.55rem,7vw,2.2rem)}
  .feature-card,.workspace-card{min-height:0}
  .social-strip-v2{flex-direction:column;align-items:flex-start;gap:10px}
  .landing-footer{flex-direction:column;align-items:flex-start;gap:5px;padding-bottom:24px}
}
@media(max-width:560px){
  .shell{padding-left:12px;padding-right:12px}
  .landing-nav{width:calc(100% - 12px);margin-top:6px;border-radius:14px}
  .landing-nav .brand-copy b{font-size:.88rem}
  .hero{padding:2.2rem 12px 1.5rem;gap:1.4rem}
  .hero-actions{width:100%}.hero-actions>*{width:100%;justify-content:center}
  .server-metrics{grid-template-columns:1fr 1fr}
  .server-metrics>div{min-width:0}
  .metric-icon{flex:0 0 auto}
  .feature-grid,.workspace-grid{gap:.8rem}
  .feature-card,.workspace-card{padding:18px}
  .card-sphere{width:90px;height:90px}
  .settings-panel{padding:16px;border-radius:17px}
  .settings-panel-head{align-items:flex-start;flex-direction:column;gap:8px}
  .setting-row{padding:13px 0}
  .blur-demo{height:125px}.blur-demo-card{inset:15px;padding:14px}
  .site-settings-wrap{width:calc(100% - 16px);margin-top:20px}
}
@media(max-width:380px){
  .server-metrics{grid-template-columns:1fr}
  .hero-copy h1{font-size:2.2rem}
  .auth-card{padding:1.25rem;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.theme-transition *{transition:none!important}}
@media(prefers-reduced-transparency:reduce){
  .landing-nav,.feature-card,.workspace-card,.server-state-card,.closing-card,.settings-panel,.auth-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--surface)!important}
}

.color-input{width:100%;height:44px;padding:3px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg);cursor:pointer}
.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;border-radius:9px}

.server-effects-off .ambient-orb,.server-effects-off .ambient-ring,.server-effects-off .card-sphere{animation:none!important;display:block!important}.server-effects-off *{transition-duration:.001ms!important}.server-effects-off .flight-trace{animation:none!important}.server-effects-off .auth-decor .blob,.server-effects-off .auth-decor .grid,.server-effects-off .auth-decor .ring,.server-effects-off .auth-decor .float-icon{animation:none!important}

.server-theme-locked .theme-toggle{display:none!important}

/* ==================== Веб-настройки сервера: прокрутка, переключатели, прогресс ==================== */
.site-settings-page {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.site-settings-page .site-settings-wrap { padding-bottom: max(70px, env(safe-area-inset-bottom)); }
.setting-control-inline { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:180px; }
.setting-control-state { min-width:72px; color:var(--text-secondary); font-size:.78rem; text-align:left; white-space:nowrap; }
.setting-switch {
    position:relative; flex:0 0 auto; width:50px; height:28px; padding:0; border:1px solid var(--border-strong);
    border-radius:999px; background:color-mix(in srgb,var(--surface-2) 88%,transparent); cursor:pointer;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18); transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.setting-switch span { position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--text-secondary); box-shadow:0 2px 7px rgba(0,0,0,.3); transition:transform .18s ease,background-color .18s ease; }
.setting-switch.is-on { background:color-mix(in srgb,var(--accent) 30%,var(--surface-2)); border-color:color-mix(in srgb,var(--accent) 70%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.setting-switch.is-on span { transform:translateX(22px); background:var(--accent); }
.setting-switch:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.setting-switch:disabled { opacity:.7; cursor:wait; }
.setting-progress { display:none; width:18px; height:18px; border:2px solid color-mix(in srgb,var(--text-secondary) 25%,transparent); border-top-color:var(--accent); border-radius:50%; animation:settings-progress-spin .7s linear infinite; }
.setting-progress.is-visible { display:inline-block; }
.setting-switch.is-busy { opacity:.72; }
@keyframes settings-progress-spin { to { transform:rotate(360deg); } }
@media(max-width:700px){
  .site-settings-page { overflow-y:auto; }
  .setting-control-inline { justify-content:flex-start; min-width:0; }
}
@media(max-width:420px){
  .site-settings-page .landing-nav { position:relative; }
  .site-settings-page .settings-hero h1 { font-size:clamp(1.8rem,10vw,2.5rem); }
  .site-settings-page .settings-panel { padding:14px; }
  .setting-control-inline { width:100%; }
}


/* ==================== Главная: шапка, иконки справа, auth для телефонов ==================== */
.landing-nav{position:sticky;top:12px;display:flex;align-items:center;gap:22px;padding:10px 14px;margin:12px auto 0;width:min(1180px,calc(100% - 24px));min-height:64px;border-radius:16px;backdrop-filter:blur(var(--site-blur)) saturate(145%);-webkit-backdrop-filter:blur(var(--site-blur)) saturate(145%)}
.landing-nav .brand{flex:0 0 auto}.landing-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto;min-width:0}.landing-links a{padding:9px 11px;border-radius:10px;font-size:.86rem}.landing-links a:hover,.landing-links a.active{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.landing-actions{flex:0 0 auto}.mobile-nav-toggle{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);place-items:center;cursor:pointer}.mobile-nav-toggle .ui-symbol{width:20px;height:20px}
/* крупная иконка справа вместо маленькой сферы */
.feature-card,.workspace-card{min-height:184px;padding:24px 128px 22px 22px;align-items:center;border-radius:22px;background:color-mix(in srgb,var(--surface) 76%,transparent)}
.feature-card .card-sphere,.workspace-card .card-sphere{width:180px;height:180px;right:-58px;bottom:-62px;opacity:.16;filter:blur(2px);z-index:0}
.feature-icon,.workspace-icon{position:absolute!important;right:24px;top:50%;transform:translateY(-50%);width:92px;height:92px;border-radius:26px;margin:0;z-index:2!important;background:color-mix(in srgb,var(--tint,var(--accent)) 10%,transparent);border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 24%,transparent);box-shadow:0 20px 50px color-mix(in srgb,var(--tint,var(--accent)) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.12);font-size:50px}
.feature-icon .ui-symbol,.workspace-icon .ui-symbol{width:54px;height:54px;filter:drop-shadow(0 7px 16px color-mix(in srgb,var(--tint,var(--accent)) 38%,transparent))}
.feature-glow{inset:auto -5% -20% auto;width:55%;height:120%;opacity:.09;z-index:0}.feature-arrow{right:22px;top:20px;opacity:.45;z-index:3!important}.feature-content{position:relative;z-index:3!important}.feature-content h3{font-size:1.2rem}.feature-content p{font-size:.92rem;line-height:1.55;max-width:48ch}.workspace-card{min-height:160px}.workspace-card>div:last-child{position:relative;z-index:3!important}.workspace-card h3{font-size:1.08rem}.workspace-card p{font-size:.88rem;line-height:1.5}.workspace-icon{right:22px;width:82px;height:82px;border-radius:23px}.workspace-icon .ui-symbol{width:46px;height:46px}
/* blur фона отключается общим переключателем blur */
.landing-ambient{filter:blur(var(--site-bg-blur));transform:scale(1.035);transition:filter .25s ease}.landing-ambient .ambient-grid{filter:blur(calc(var(--site-bg-blur) * .55))}
.auth-v2{overflow-y:auto;overflow-x:hidden;min-height:100dvh;height:auto;max-height:none;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .landing-nav{top:8px;gap:8px;padding:8px 10px;width:calc(100% - 12px);min-height:58px}
  .landing-nav .brand-copy small{display:none}.landing-nav .brand-copy b{font-size:.9rem}.landing-actions{gap:5px}.landing-actions .theme-toggle{display:none}.nav-login{padding:.5rem .65rem!important;font-size:.76rem!important}.nav-register{padding:.5rem .68rem!important;font-size:.76rem!important}.mobile-nav-toggle{display:grid}
  .landing-links{position:absolute;left:8px;right:8px;top:calc(100% + 7px);display:none;flex-direction:column;align-items:stretch;padding:8px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(var(--site-blur));-webkit-backdrop-filter:blur(var(--site-blur));box-shadow:var(--shadow-lg)}
  .landing-links.is-open{display:flex}.landing-links a{font-size:.88rem;padding:11px 12px}.landing-links a.active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .feature-card,.workspace-card{min-height:170px;padding:22px 112px 20px 18px;border-radius:19px}.feature-icon{right:16px;width:78px;height:78px;border-radius:21px;font-size:42px}.feature-icon .ui-symbol{width:46px;height:46px}.workspace-icon{right:16px;width:70px;height:70px;border-radius:19px}.workspace-icon .ui-symbol{width:40px;height:40px}.feature-card .card-sphere,.workspace-card .card-sphere{width:145px;height:145px;right:-55px;bottom:-48px;opacity:.12}.feature-arrow{right:15px;top:14px}.feature-content h3{font-size:1.05rem}.feature-content p{font-size:.84rem;line-height:1.48}.feature-note{font-size:.7rem}
  .auth-v2{padding:12px 10px 30px!important}.auth-v2 .auth-wrapper{width:100%;margin:0 auto}.auth-v2 .auth-brand{margin:0 0 12px 2px}.auth-v2 .auth-layout{display:block;width:100%;max-width:620px}.auth-v2 .auth-aside{display:none}.auth-v2 .auth-card{width:100%;padding:20px 16px;border-radius:19px}.auth-v2 .auth-card h2{font-size:24px}.auth-v2 .auth-subtitle{font-size:13px;line-height:1.45;margin-bottom:15px}.auth-v2 .auth-card-icon{width:50px;height:50px;margin-bottom:10px}.auth-v2 .auth-switcher{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:15px}.auth-v2 .auth-switcher .auth-switch-card{min-height:42px;padding:7px 5px;font-size:12px}.auth-v2 .auth-form{gap:11px}.auth-v2 .register-grid{grid-template-columns:1fr!important;gap:11px}.auth-v2 .input-group input{min-height:46px;padding-top:.72rem;padding-bottom:.72rem;font-size:15px}.auth-v2 .auth-btn{min-height:47px;font-size:15px;margin-top:3px}.auth-v2 .auth-links{font-size:13px;display:flex;flex-direction:column;gap:5px}.auth-v2 .auth-close{top:10px;right:10px}
}
@media(max-width:430px){.landing-nav .brand-logo{width:34px;height:34px}.landing-nav .nav-login{display:inline-flex!important}.landing-nav .nav-register{display:inline-flex!important}.landing-nav .brand-copy b{max-width:125px;overflow:hidden;text-overflow:ellipsis}.feature-card,.workspace-card{min-height:158px;padding-right:96px}.feature-icon{width:66px;height:66px;right:13px;border-radius:18px}.feature-icon .ui-symbol{width:38px;height:38px}.workspace-icon{width:60px;height:60px;right:13px}.workspace-icon .ui-symbol{width:34px;height:34px}.feature-card .card-sphere,.workspace-card .card-sphere{display:none}.feature-glow{display:none}.feature-content p{font-size:.8rem}.feature-note{margin-top:.4rem}.auth-v2 .auth-card{padding:18px 13px}.auth-v2 .auth-switcher .auth-switch-card{font-size:11px}.auth-v2 .input-group label{font-size:12px}}
@media(max-width:360px){.landing-nav .nav-login{display:none!important}.landing-nav .nav-register{font-size:.72rem!important;padding:.45rem .55rem!important}.auth-v2{padding-left:7px!important;padding-right:7px!important}.auth-v2 .auth-card{padding:16px 11px}}

/* декоративный фон задаёт сервер; blur зависит от общего blur и декора */
.server-decor-off .landing-ambient,
.server-decor-off .auth-decor { display:none !important; }
.server-decor-off .blur-demo .ambient-orb { display:none !important; }
.server-decor-off .blur-demo { background:transparent !important; }
.server-decor-off { --site-bg-blur:0px !important; }


/* регистрация на низких экранах: две колонки, без боковой панели, плотнее по вертикали */
@media (min-width: 721px) and (max-height: 820px) {
  .auth-v2[data-auth-mode="register"],
  body.auth-v2[data-auth-mode="register"] {
    padding: 16px 22px 22px !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  body.auth-v2[data-auth-mode="register"] .auth-brand { margin-bottom: 10px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-aside { display:none !important; }
  body.auth-v2[data-auth-mode="register"] .auth-layout {
    display:block !important; width:min(700px,100%) !important; max-width:700px !important;
  }
  body.auth-v2[data-auth-mode="register"] .auth-card {
    width:100% !important; padding:18px 22px !important; border-radius:18px !important;
  }
  body.auth-v2[data-auth-mode="register"] .auth-card-icon { width:44px !important; height:44px !important; margin-bottom:7px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-card h2 { font-size:22px !important; margin-bottom:2px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-subtitle { font-size:12px !important; margin-bottom:9px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-switcher { gap:6px !important; margin-bottom:10px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-switch-card { min-height:38px !important; padding:7px 8px !important; font-size:12px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form { gap:8px !important; }
  body.auth-v2[data-auth-mode="register"] .register-grid { gap:8px !important; }
  body.auth-v2[data-auth-mode="register"] .input-group label { margin-bottom:3px !important; font-size:11px !important; }
  body.auth-v2[data-auth-mode="register"] .input-group input { height:38px !important; min-height:38px !important; padding:7px 10px !important; font-size:13px !important; border-radius:9px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form .input-group:has(.input-icon) input { padding-left:34px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form .input-group.has-toggle input { padding-right:36px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form .input-icon { left:10px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form .input-toggle { right:5px !important; width:30px !important; height:30px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-btn { min-height:40px !important; height:40px !important; font-size:14px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-links { margin-top:8px !important; padding-top:0 !important; font-size:12px !important; gap:3px !important; }
}

@media (min-width: 721px) and (max-height: 650px) {
  body.auth-v2[data-auth-mode="register"] { padding:8px 16px 14px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-brand { margin-bottom:6px !important; font-size:14px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-card { padding:13px 18px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-card-icon { display:none !important; }
  body.auth-v2[data-auth-mode="register"] .auth-card h2 { font-size:19px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-subtitle { margin-bottom:6px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-switcher { margin-bottom:7px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-switch-card { min-height:34px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-form { gap:6px !important; }
  body.auth-v2[data-auth-mode="register"] .register-grid { gap:6px !important; }
  body.auth-v2[data-auth-mode="register"] .input-group input { height:34px !important; min-height:34px !important; }
  body.auth-v2[data-auth-mode="register"] .auth-btn { min-height:36px !important; height:36px !important; }
}


/* ==================== Текст кнопок в цвет темы ==================== */
.btn-primary,.btn.btn-primary,.auth-btn{
  color:var(--text)!important;
  text-shadow:none;
}
.btn-primary svg,.btn-primary .ui-symbol,.btn-primary .icon,.auth-btn svg,.auth-btn .ui-symbol,.auth-btn .icon{
  color:var(--text)!important;
  --icon-tint:var(--text);
}

/* ==================== Модалки auth на главной: регистрация как /auth/register ==================== */
.modal-shell-inner.auth-modal-register {
    width: min(1015px, 100%);
    max-width: 1015px;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.modal-shell-inner.auth-modal-register > .auth-aside {
    display: flex !important;
    min-height: 100%;
}
.modal-shell-inner.auth-modal-register > .auth-card {
    width: 100%;
    padding: 30px !important;
    border-radius: 22px !important;
}
@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-register {
        grid-template-columns: minmax(0, 650px) !important;
        max-width: 650px;
    }
    .modal-shell-inner.auth-modal-register > .auth-aside { order: 2; }
    .modal-shell-inner.auth-modal-register > .auth-card { order: 1; }
}
@media (max-width: 760px) {
    .modal-shell-inner.auth-modal-register { grid-template-columns: minmax(0, 1fr) !important; }
    .modal-shell-inner.auth-modal-register > .auth-aside { display: none !important; }
    .modal-shell-inner.auth-modal-register > .auth-card { padding: 20px 16px !important; border-radius: 19px !important; }
}



/* бренд панели welcome */
.welcome-dashboard-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.welcome-dashboard-brand img{width:42px;height:42px;border-radius:12px;object-fit:contain;}
.welcome-dashboard-brand div{display:flex;flex-direction:column;line-height:1.15;}
.welcome-dashboard-brand b{font-size:1rem;color:var(--text);}
.welcome-dashboard-brand small{margin-top:3px;color:var(--text-muted);font-size:.72rem;}

/* ==================== Выравнивание регистрации на главной и /auth/register ==================== */

/* больше воздуха между группами карточек */
.landing-body .feature-grid,
.landing-body .workspace-grid,
.landing-body .stats-grid {
    gap: 1.5rem;
}

.landing-body .feature-grid-v2 {
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.landing-body .feature-card,
.landing-body .workspace-card {
    height: 100%;
    min-height: 170px;
    box-sizing: border-box;
}

/* модалка регистрации повторяет двухколоночную геометрию /auth/register */
.modal-shell-inner.auth-modal-register {
    width: min(1015px, calc(100vw - 48px));
    max-width: 1015px;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    gap: 24px !important;
    align-items: start !important;
}

.modal-shell-inner.auth-modal-register > .auth-aside,
.modal-shell-inner.auth-modal-register > .auth-card {
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box;
}

.modal-shell-inner.auth-modal-register > .auth-aside {
    padding: 28px !important;
    border-radius: 24px !important;
}

.modal-shell-inner.auth-modal-register > .auth-card {
    padding: 30px 32px !important;
    border-radius: 24px !important;
    text-align: left;
}

/* поля регистрации по два в строке */
.modal-shell-inner.auth-modal-register .register-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.modal-shell-inner.auth-modal-register .register-grid .input-group {
    min-width: 0;
}

.modal-shell-inner.auth-modal-register .auth-form {
    gap: 12px !important;
}

.modal-shell-inner.auth-modal-register .input-group input {
    width: 100%;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.modal-shell-inner.auth-modal-register .auth-btn {
    height: 46px;
    min-height: 46px;
    margin-top: 2px;
}

/* левая панель по высоте содержимого */
.modal-shell-inner.auth-modal-register > .auth-aside {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-register {
        width: min(650px, calc(100vw - 32px));
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .modal-shell-inner.auth-modal-register > .auth-card { order: 1; }
    .modal-shell-inner.auth-modal-register > .auth-aside { order: 2; }
}

@media (max-width: 720px) {
    .landing-body .feature-grid,
    .landing-body .workspace-grid,
    .landing-body .stats-grid {
        gap: 1.15rem;
    }

    .modal-shell-inner.auth-modal-register .register-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .landing-body .feature-grid,
    .landing-body .workspace-grid,
    .landing-body .stats-grid {
        gap: 1rem;
    }

    .modal-shell-inner.auth-modal-register {
        width: calc(100vw - 20px);
        gap: 0 !important;
    }

    .modal-shell-inner.auth-modal-register > .auth-aside {
        display: none !important;
    }

    .modal-shell-inner.auth-modal-register > .auth-card {
        padding: 20px 16px !important;
        border-radius: 19px !important;
    }

    /* мобильная версия как у /auth/register */
    .modal-shell-inner.auth-modal-register .register-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }
}


/* ==================== Модалка auth: выравнивание и активная форма ==================== */
.modal-shell-inner.auth-modal-register,
.modal-shell-inner.auth-modal-login,
.modal-shell-inner.auth-modal-activate {
    width: min(1015px, calc(100vw - 48px));
    max-width: 1015px;
    display: grid !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
}

/* обе колонки одной высоты по правой карточке */
.modal-shell-inner.auth-modal-register > .auth-aside,
.modal-shell-inner.auth-modal-login > .auth-aside,
.modal-shell-inner.auth-modal-activate > .auth-aside {
    height: auto !important;
    min-height: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.modal-shell-inner.auth-modal-register > .auth-card,
.modal-shell-inner.auth-modal-login > .auth-card,
.modal-shell-inner.auth-modal-activate > .auth-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box;
}

/* у полей ФИО нет иконок — место под иконку не резервируем */
.modal-shell-inner.auth-modal-register .register-grid .input-group:not(:has(.input-icon)) input {
    padding-left: 12px !important;
}
.modal-shell-inner.auth-modal-register .register-grid .input-group:has(.input-icon) input {
    padding-left: 42px !important;
}
.modal-shell-inner.auth-modal-register .register-grid .input-group .input-icon {
    left: 13px !important;
}

/* активная форма в селекторе хорошо заметна */
.auth-switcher .auth-switch-card {
    position: relative;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.auth-switcher .auth-switch-card.active,
.auth-switcher .auth-switch-card[aria-current="page"] {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 7px 22px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.auth-switcher .auth-switch-card.active::after,
.auth-switcher .auth-switch-card[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-register,
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate {
        width: min(650px, calc(100vw - 32px));
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }
    .modal-shell-inner.auth-modal-register > .auth-aside,
    .modal-shell-inner.auth-modal-login > .auth-aside,
    .modal-shell-inner.auth-modal-activate > .auth-aside {
        min-height: auto !important;
    }
}

@media (max-width: 600px) {
    .modal-shell-inner.auth-modal-register,
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate {
        width: calc(100vw - 20px);
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* зазор между карточками 24px, у регистрации 32px */
.modal-shell-inner.auth-modal-login,
.modal-shell-inner.auth-modal-activate {
    width: min(1014px, calc(100vw - 48px));
    max-width: 1014px;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    margin-inline: auto;
}

.modal-shell-inner.auth-modal-register {
    width: min(1022px, calc(100vw - 48px));
    max-width: 1022px;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    margin-inline: auto;
}

/* левая карточка берёт высоту строки регистрации */
.modal-shell-inner.auth-modal-register > .auth-aside {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}
.modal-shell-inner.auth-modal-register > .auth-card {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}

/* отступы секций главной не меняем */
.landing-body .feature-grid,
.landing-body .workspace-grid,
.landing-body .stats-grid {
    gap: 1.1rem;
}

/* переключатель в модалке выглядит как на auth-странице (там ссылки, здесь кнопки) */
.auth-v2 .auth-switcher .auth-switch-card,
.auth-switcher .auth-switch-card {
    position: relative;
    min-height: 56px;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .18s ease, border-color .18s ease,
                background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-v2 .auth-switcher .auth-switch-card:hover,
.auth-switcher .auth-switch-card:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-1px);
}
.auth-v2 .auth-switcher .auth-switch-card.active,
.auth-v2 .auth-switcher .auth-switch-card[aria-current="page"],
.auth-switcher .auth-switch-card.active,
.auth-switcher .auth-switch-card[aria-current="page"] {
    color: var(--accent-contrast) !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    box-shadow: 0 9px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.auth-v2 .auth-switcher .auth-switch-card.active::after,
.auth-v2 .auth-switcher .auth-switch-card[aria-current="page"]::after,
.auth-switcher .auth-switch-card.active::after,
.auth-switcher .auth-switch-card[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--accent-contrast) 78%, transparent);
}

@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate,
    .modal-shell-inner.auth-modal-register {
        width: min(650px, calc(100vw - 32px));
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 18px !important;
    }
}

@media (max-width: 600px) {
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate,
    .modal-shell-inner.auth-modal-register {
        width: calc(100vw - 20px);
        row-gap: 0 !important;
    }
}

/* ==================== Модалка auth: геометрия; у регистрации шире зазор ==================== */
.modal-shell-inner.auth-modal-login,
.modal-shell-inner.auth-modal-activate {
    width: min(1014px, calc(100vw - 48px)) !important;
    max-width: 1014px !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    margin-inline: auto !important;
}

.modal-shell-inner.auth-modal-register {
    width: min(1046px, calc(100vw - 48px)) !important;
    max-width: 1046px !important;
    grid-template-columns: minmax(300px, 370px) minmax(470px, 620px) !important;
    column-gap: 48px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    margin-inline: auto !important;
}

/* высоту строки задаёт правая карточка */
.modal-shell-inner.auth-modal-register > .auth-aside,
.modal-shell-inner.auth-modal-register > .auth-card {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* общий переключатель auth, активное состояние как на /auth */
.auth-v2 .auth-switcher .auth-switch-card,
.modal-shell-inner .auth-switcher .auth-switch-card {
    position: relative;
    appearance: none;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    box-shadow: none;
    transition: transform .16s ease, border-color .16s ease,
                background .16s ease, color .16s ease, box-shadow .16s ease;
}
.auth-v2 .auth-switcher .auth-switch-card:hover,
.modal-shell-inner .auth-switcher .auth-switch-card:hover {
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
    background: var(--surface-hover) !important;
    transform: translateY(-1px);
}
.auth-v2 .auth-switcher .auth-switch-card.active,
.auth-v2 .auth-switcher .auth-switch-card[aria-current="page"],
.modal-shell-inner .auth-switcher .auth-switch-card.active,
.modal-shell-inner .auth-switcher .auth-switch-card[aria-current="page"] {
    color: var(--accent-contrast) !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    box-shadow: 0 9px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent) !important;
}
.auth-v2 .auth-switcher .auth-switch-card.active::after,
.modal-shell-inner .auth-switcher .auth-switch-card.active::after,
.auth-v2 .auth-switcher .auth-switch-card[aria-current="page"]::after,
.modal-shell-inner .auth-switcher .auth-switch-card[aria-current="page"]::after {
    content: none !important;
}

@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate,
    .modal-shell-inner.auth-modal-register {
        width: min(650px, calc(100vw - 32px)) !important;
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 18px !important;
    }
}
@media (max-width: 600px) {
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate,
    .modal-shell-inner.auth-modal-register {
        width: calc(100vw - 20px) !important;
        row-gap: 0 !important;
    }
}

/* ==================== Модалка auth: дети заполняют свою колонку грида — иначе фиксированная ширина aside наезжала на карточку ==================== */
.modal-shell-inner.auth-modal-login > .auth-aside,
.modal-shell-inner.auth-modal-activate > .auth-aside,
.modal-shell-inner.auth-modal-register > .auth-aside,
.modal-shell-inner.auth-modal-login > .auth-card,
.modal-shell-inner.auth-modal-activate > .auth-card,
.modal-shell-inner.auth-modal-register > .auth-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.modal-shell-inner.auth-modal-login,
.modal-shell-inner.auth-modal-activate {
    column-gap: 40px !important;
}

.modal-shell-inner.auth-modal-register {
    column-gap: 56px !important;
}

@media (max-width: 980px) {
    .modal-shell-inner.auth-modal-login,
    .modal-shell-inner.auth-modal-activate,
    .modal-shell-inner.auth-modal-register {
        row-gap: 28px !important;
    }
}

/* то же для /auth/, чтобы колонки не расползались */
.auth-v2 .auth-layout > .auth-aside,
.auth-v2 .auth-layout > .auth-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.auth-v2 .auth-layout {
    column-gap: 40px !important;
}
/* Выпадающий список пола в регистрации и профиле. */
.gender-inline-field,.gender-profile-row{display:flex;align-items:center;gap:12px;min-height:30px;margin-top:8px}
.gender-profile-row{margin:14px 0 0;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--border-strong,rgba(255,255,255,.18)) 55%,transparent)}
.gender-inline-title,.gender-profile-title{font-size:.84rem;font-weight:700;line-height:1.2;color:var(--text,#fff)}
.gender-profile-row select,.gender-select-field select{width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface-2) 82%,transparent);color:var(--text);padding:.72rem .8rem;cursor:pointer}
.gender-profile-row select{flex:1;min-width:180px;margin-left:auto}
.gender-profile-row select:focus,.gender-select-field select:focus{outline:2px solid color-mix(in srgb,var(--accent,#5b8cff) 55%,transparent);outline-offset:1px;border-color:var(--accent,#5b8cff)}


.app-download-cta{white-space:nowrap}.app-download-section{scroll-margin-top:90px}.app-download-section .hero-actions{justify-content:flex-end}


/* блок скачивания приложения, управляется сервером */
.app-download-section[hidden], .nav-app-download[hidden], .download-mini-link[hidden] { display:none !important; }
.nav-app-download { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 11px; border-radius:10px; font-size:.86rem; color:var(--text); text-decoration:none; white-space:nowrap; }
.nav-app-download:hover { background:color-mix(in srgb,var(--accent) 9%,transparent); text-decoration:none; }
.nav-app-download .ui-symbol { width:17px; height:17px; flex:0 0 17px; }
.download-mini-card { display:grid; grid-template-columns:minmax(250px, .8fr) minmax(320px, 1.2fr); align-items:center; gap:22px; padding:18px 20px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface) 82%,transparent); box-shadow:var(--shadow-md); }
.download-mini-head { display:flex; align-items:center; gap:13px; min-width:0; }
.download-mini-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); color:var(--accent); }
.download-mini-icon .ui-symbol { width:25px; height:25px; }
.download-mini-head h2 { margin:2px 0 3px; font-size:1.15rem; }
.download-mini-head p { margin:0; font-size:.82rem; color:var(--text-secondary); }
/* кнопок до трёх (Android, Windows, Linux): столько колонок, сколько помещается */
.download-mini-links { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:9px; }
.download-mini-link { min-height:60px; display:grid; grid-template-columns:30px minmax(0,1fr) 18px; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:13px; color:var(--text); background:var(--surface-2); text-decoration:none; }
.download-mini-link:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--surface-hover); text-decoration:none; }
.download-mini-link > .ui-symbol:first-child { width:22px; height:22px; justify-self:center; color:var(--accent); }
.download-mini-link > .ui-symbol:last-child { width:16px; height:16px; opacity:.6; justify-self:end; }
/* minmax(0,1fr) и min-width:0 — длинный текст обрезается многоточием, а не вылезает за карточку */
.download-mini-link > span:not(.ui-symbol) { min-width:0; }
.download-mini-link b,.download-mini-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.download-mini-link b { font-size:.82rem; } .download-mini-link small { margin-top:2px; color:var(--text-secondary); font-size:.68rem; }

/* иконка темы строго по центру активной сферы */
.theme-toggle { align-items:center; justify-content:center; }
.theme-btn { position:relative; padding:0 !important; margin:0; place-items:center; align-items:center; justify-items:center; line-height:0; text-align:center; overflow:hidden; }
.theme-btn .ui-symbol { display:flex !important; align-items:center; justify-content:center; align-self:center; justify-self:center; margin:0 !important; padding:0 !important; flex:0 0 26px; width:26px !important; height:26px !important; line-height:0; }
.theme-btn .ui-symbol svg { display:block !important; width:100% !important; height:100% !important; margin:0 !important; transform:none !important; flex:none; }
@media(max-width:820px){ .nav-app-download { font-size:.84rem; padding:10px 12px; } .download-mini-card { grid-template-columns:1fr; gap:14px; } .download-mini-links { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); } }
@media(max-width:560px){ .download-mini-links { grid-template-columns:1fr; } .nav-app-download { width:100%; } }


/* выпадающие списки по теме */
.themed-select{position:relative;width:100%;min-width:0;font:inherit;color:var(--text)}
.themed-select-control{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;padding:.72rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.themed-select-control:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.themed-select.open .themed-select-control,.themed-select-control:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.themed-select-arrow{width:8px;height:8px;flex:0 0 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .16s ease}
.themed-select.open .themed-select-arrow{transform:rotate(225deg) translateY(-1px)}
.themed-select-menu{position:absolute;z-index:1000;left:0;right:0;top:calc(100% + 7px);display:none;padding:5px;border:1px solid var(--border-strong);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-md);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.themed-select.open .themed-select-menu{display:block}
.themed-select-option{width:100%;display:block;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.themed-select-option:hover{background:var(--surface-hover)}
.themed-select-option.selected{background:color-mix(in srgb,var(--accent) 13%,var(--surface-2));font-weight:700}
.themed-select-option.selected::after{content:'✓';float:right;color:var(--accent)}
.themed-select.is-disabled .themed-select-control{opacity:.65;cursor:not-allowed}
.themed-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}

/* ==================== Производительность на телефонах: меньше blur и анимаций, эффекты не отключаем ==================== */
html.mobile-performance-mode:not(.server-effects-off) {
  --site-blur: 10px !important;
  --site-bg-blur: 4px !important;
}
html.site-low-performance:not(.server-effects-off) {
  --site-blur: 8px !important;
  --site-bg-blur: 3px !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  html:not(.server-effects-off) {
    --site-blur: 10px !important;
    --site-bg-blur: 4px !important;
  }
  html.site-low-performance:not(.server-effects-off) {
    --site-blur: 8px !important;
    --site-bg-blur: 3px !important;
  }

  .ambient-orb,
  .ambient-ring,
  .ambient-grid,
  .background-orb,
  .background-ring {
    animation-duration: 18s !important;
  }
}

/* появление выпадающего списка (как StyledComboBox в приложении) */
.themed-select.open .themed-select-menu{transform-origin:top center;animation:themedMenuIn .19s cubic-bezier(.2,.9,.3,1.15)}
@keyframes themedMenuIn{from{opacity:0;transform:translateY(-6px) scale(.95)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.themed-select.open .themed-select-menu{animation:none}}
html.server-effects-off .themed-select.open .themed-select-menu,html.client-user-effects-off .themed-select.open .themed-select-menu{animation:none}

/* согласие в форме регистрации: галочка и текст в одну строку (перекрывает .input-group label) */
.input-group.consent-field .check{display:flex;align-items:flex-start;gap:11px;font-size:.85rem;font-weight:400;color:var(--text);margin:0}
.auth-v2 .input-group.consent-field .check input[type=checkbox]{width:1px;min-height:0;padding:0}

/* подсказка под логином при регистрации */
.login-hint { margin-left: 6px; font-weight: 500; font-size: .72rem; color: var(--text-faint); }

/* общий верхний бар на страницах входа, регистрации и активации */
.auth-page > .landing-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; }
.auth-page { padding-top: 96px !important; }
.auth-page > .landing-nav .landing-links { display: flex; }
@media (max-width: 760px) { .auth-page > .landing-nav .landing-links { display: none; } .auth-page { padding-top: 84px !important; } }

/* регистрация: выбор роли «Наблюдатель» / «Пилот» — две кнопки в строку */
.role-choice-field{border:0;padding:0;margin:0;display:grid;gap:6px;min-width:0}
.role-choice-field legend{font-size:13px;font-weight:600;margin-bottom:4px;padding:0}
.role-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:12px;border:1px solid var(--c-line,rgba(255,255,255,.14));background:rgba(255,255,255,.03)}
.role-seg label{position:relative;cursor:pointer;margin:0}
.role-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.role-seg span{display:block;text-align:center;padding:8px 6px;border-radius:9px;font-size:14px}
.role-seg input:checked+span{background:var(--c-accent,#4f8cff);color:#fff;font-weight:600}
.role-seg input:focus-visible+span{outline:2px solid var(--c-accent,#4f8cff);outline-offset:1px}
.role-hint{opacity:.75;font-size:12px;line-height:1.35}

/* атрибут hidden всегда прячет элемент: иначе display у класса (grid/flex) перебивает его (страницы входа и регистрации) */
[hidden]{display:none!important}

/* логины скрыты сервером (настройка регистрации): всё, что показывает логин, помечено классом u-login */
.logins-hidden .u-login{display:none!important}

/* Длинные формы входа/регистрации помещаются по высоте и прокручиваются внутри окна. */
.modal-overlay {
    --dialog-pad-top: max(12px, env(safe-area-inset-top, 0px));
    --dialog-pad-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    height: 100vh;
    height: 100dvh;
    bottom: auto;
    padding: var(--dialog-pad-top) max(12px, env(safe-area-inset-right, 0px)) var(--dialog-pad-bottom) max(12px, env(safe-area-inset-left, 0px));
    overscroll-behavior: contain;
}
.modal-overlay > .modal-shell {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-gutter: stable;
    scroll-padding-block: 16px;
}
.modal-overlay > .modal-shell::-webkit-scrollbar { display: block; width: 8px; }
.modal-overlay > .modal-shell::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.modal-overlay .modal-shell-inner { width: 100%; max-width: 100%; min-width: 0; }
@media (max-height: 560px) and (orientation: landscape) {
    .modal-overlay { --dialog-pad-top: max(8px, env(safe-area-inset-top, 0px)); --dialog-pad-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
    .modal-overlay .modal-shell-inner { grid-template-columns: minmax(0, 1fr) !important; }
    .modal-overlay .modal-shell-inner > .auth-aside { display: none !important; }
    .modal-overlay .modal-shell-inner > .auth-card { min-height: 0 !important; padding: 20px !important; }
}