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

:root {
    /* Фирменная палитра TopCheck */
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-primary-hover: #5a6fd6;
    --color-primary-deep: #5b4bc4;
    --color-primary-ink: #1c1633;
    --color-primary-soft: #ede9fe;
    --color-primary-border: #ddd6fe;
    --color-primary-border-light: #e8e4f8;
    --color-primary-border-strong: #c4b5fd;
    --color-primary-bg: #f7f5ff;
    --color-primary-bg-page: #fbfaff;
    --color-primary-muted: #6b63a0;
    --color-primary-text: #5b5478;
    --color-primary-accent: #7c73a0;
    --color-primary-chip: #4b3ec4;
    --color-primary-tab: #4c1d95;
    --color-blue: var(--color-primary);
    --color-blue-dark: var(--color-primary-hover);
    --color-blue-soft: var(--color-primary-soft);
    --chart-1: #667eea;
    --chart-2: #818cf8;
    --chart-3: #a78bfa;
    --chart-4: #c4b5fd;
    --chart-5: #e9ecef;
    --color-success: #28a745;
    --color-success-dark: #1e7e34;
    --color-success-alt: #218838;
    --color-success-soft: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #c3e6cb;
    --color-info: #17a2b8;
    --color-info-soft: #e6f7f9;
    --color-info-alert: #d1ecf1;
    --color-info-text: #0c5460;
    --color-info-border: #bee5eb;
    --color-warning: #ffc107;
    --color-danger: #d64550;
    --color-danger-dark: #b82e3a;
    --color-danger-hover: #c43642;
    --color-danger-soft: #fdf0f1;
    --color-danger-text: #8f2330;
    --color-danger-border: #f3c8cc;
    --color-danger-btn: #fce8ea;
    --color-danger-surface: #fff5f6;
    --color-danger-muted: #c97a82;
    --gradient-danger: linear-gradient(135deg, #e85d68 0%, #d64550 52%, #c43642 100%);
    --shadow-danger: 0 2px 8px rgba(214, 69, 80, 0.22);
    --shadow-danger-hover: 0 6px 16px rgba(214, 69, 80, 0.28);
    --color-muted: #6c757d;
    --color-muted-dark: #5a6268;
    --color-purple: #6f42c1;
    --pos-up-bg: #e6f6eb;
    --pos-down-bg: #fdeaea;
    --pos-base-bg: var(--color-primary-soft);
    --pos-diff: #c44747;
    --color-text: #333;
    --color-text-secondary: #555;
    --color-text-light: #666;
    --color-text-muted: #888;
    --color-text-faint: #999;
    --color-border: #eeeaf8;
    --color-bg: #f3f1fa;
    --color-bg-card: #fff;
    --color-bg-subtle: #f8f9fa;
    --color-bg-hover: #e9ecef;
    --color-bg-stripe: #fafbfc;
    --table-row-hover-tint: rgba(102, 126, 234, 0.14);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.12);
    --shadow-auth: 0 20px 60px rgba(0, 0, 0, 0.3);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    --gradient-admin: linear-gradient(135deg, #764ba2 0%, #3d3560 100%);
    --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --shadow-primary: 0 4px 12px rgba(102, 126, 234, 0.35);
    --shadow-primary-lg: 0 8px 20px rgba(102, 126, 234, 0.4);
    --shadow-primary-sm: 0 6px 14px rgba(102, 126, 234, 0.28);
    --transition: 0.25s ease;
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    font-family: var(--font);
    background: var(--color-bg);
    min-height: 100vh;
    color: var(--color-text);
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
}

.is-hidden {
    display: none !important;
}

/* ===== ИКОНКИ ===== */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -3px;
    overflow: visible;
    pointer-events: none;
}

.icon--sm {
    width: 14px;
    height: 14px;
}

.icon--xl {
    width: 48px;
    height: 48px;
}

.icon--empty {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto;
}

.icon--spin {
    animation: spin 0.8s linear infinite;
}

.btn .icon,
.btn-submit .icon,
.add-project-btn .icon,
.quick-check-btn .icon,
.admin-btn .icon,
.projects-btn .icon,
.header-logout .icon,
.back-btn .icon,
.logout-btn .icon,
.icon-btn .icon,
.alert .icon,
.section-title .icon,
.info-item .icon,
.stat-card-head .icon,
.date-picker__icon .icon,
.chart-container h2 .icon,
.summary-text .icon,
.chart-controls-label .icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

.icon-btn .icon {
    width: 18px;
    height: 18px;
}

/* ===== КОНТЕЙНЕРЫ ===== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.header,
.project-card,
.table-container,
.filters,
.project-info,
.form-container,
.stat-card,
.chart-container,
.chart-controls,
.recent-checks,
.modal-content {
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}

.header,
.project-card,
.table-container,
.filters,
.project-info,
.form-container,
.stat-card,
.chart-container,
.chart-controls,
.recent-checks,
.empty-state,
.modal-content {
    border-radius: var(--radius-lg);
}

/* ================================================================ */
/* ===== СТРАНИЦЫ АВТОРИЗАЦИИ И РЕГИСТРАЦИИ ===== */
/* ================================================================ */

.auth-page {
    background: var(--gradient-primary);
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ===== 404 ===== */
.error-page {
    background: var(--gradient-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    min-height: 100vh;
}
.error-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-auth);
    padding: 36px 32px 32px;
    width: 100%;
    max-width: 460px;
    text-align: center;
    animation: slideUp 0.55s ease;
}
.error-card__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.error-illus {
    margin: 8px auto 4px;
    max-width: 300px;
}
.error-illus__svg {
    width: 100%;
    height: auto;
    display: block;
}
.error-illus__glow {
    animation: errorGlow 3.2s ease-in-out infinite;
}
.error-illus__glass {
    transform-origin: 196px 78px;
    animation: errorSearch 3.4s ease-in-out infinite;
}
.error-illus__peek {
    animation: errorPeek 1.5s ease-in-out infinite;
}
@keyframes errorGlow {
    0%, 100% { opacity: 0.55; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.05); }
}
@keyframes errorSearch {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    25% { transform: translate(-36px, 16px) rotate(-2deg); }
    50% { transform: translate(-24px, 40px) rotate(6deg); }
    75% { transform: translate(12px, 6px) rotate(-4deg); }
}
@keyframes errorPeek {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.95; }
}
.error-card__code {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    margin: 4px 0 8px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.error-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}
.error-card__lead {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0 auto 22px;
    max-width: 34em;
}
.error-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.error-card__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: var(--gradient-primary);
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.error-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
    color: #fff;
}
.error-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.error-card__link:hover {
    color: var(--color-primary-dark);
}
@media (prefers-reduced-motion: reduce) {
    .error-illus__glow,
    .error-illus__glass,
    .error-illus__peek,
    .error-card {
        animation: none;
    }
}
@media (max-width: 480px) {
    .error-card {
        padding: 28px 20px 24px;
    }
    .error-card__code {
        font-size: 36px;
    }
}

.auth-container {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-auth);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    margin: auto;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header .auth-logo {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    color: var(--color-primary);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.brand__mark {
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}
.brand__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--color-text);
    line-height: 1;
}
.brand__name span {
    color: var(--color-primary);
}
.brand--lg {
    gap: 12px;
}
.brand--lg .brand__mark {
    width: 52px;
    height: 52px;
}
.brand--lg .brand__name {
    font-size: 30px;
}

.auth-header .brand {
    justify-content: center;
    margin-bottom: 18px;
}

.auth-header h1 {
    font-size: 28px;
    color: var(--color-text);
    margin-bottom: 6px;
    font-weight: 700;
}

.auth-header p {
    color: var(--color-text-muted);
    font-size: 14px;
}

.auth-container .form-group {
    margin-bottom: 20px;
}

.auth-container .form-group label {
    color: var(--color-text-secondary);
}

.auth-container .form-group input {
    padding: 12px 16px;
}

.auth-container .btn-auth {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--gradient-primary);
    color: #fff;
}

.auth-container .btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

.auth-container .btn-auth:active {
    transform: translateY(0);
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.auth-footer a {
    color: var(--color-primary);
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-footer a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

.btn-yandex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #e8d4cf;
    border-radius: 10px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.btn-yandex:hover {
    background: #fff8f6;
    border-color: #fc3f1d;
    color: #333;
    transform: none;
}

.btn-yandex--subtle {
    width: 100%;
}

.btn-yandex__icon {
    width: 20px;
    height: 20px;
    background: #fc3f1d;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
}

.auth-yandex {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-yandex-note {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 10px 0 0;
    line-height: 1.45;
}

.auth-yandex-note a {
    color: var(--color-primary);
}

.auth-forgot-link {
    margin-top: 8px;
    text-align: right;
    font-size: 13px;
}

.auth-forgot-link a {
    color: var(--color-primary);
    font-weight: 500;
}

.auth-container .alert-danger {
    background: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

.auth-container .alert-success {
    background: #efe;
    color: #3c3;
    border: 1px solid #cfc;
}

.auth-container .alert-info {
    background: var(--color-primary-bg);
    color: var(--color-primary-deep);
    border: 1px solid var(--color-primary-border);
}

.auth-container .checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-container .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.auth-container .checkbox-group label {
    margin: 0;
    font-weight: 400;
    color: var(--color-text-light);
    cursor: pointer;
}

.auth-captcha {
    margin-bottom: 18px;
}
.smart-captcha {
    height: 120px !important;
}

.auth-container .password-strength {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.auth-container .password-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

.password-strength-bar.is-weak { background: var(--color-danger); }
.password-strength-bar.is-medium { background: var(--color-warning); }
.password-strength-bar.is-strong { background: var(--color-success); }

/* ================================================================ */
/* ===== ОБЩИЙ ХЕДЕР ===== */
/* ================================================================ */

.header {
    padding: 20px 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-left .logo-icon {
    font-size: 28px;
}

.header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-divider {
    width: 1px;
    height: 28px;
    background: var(--color-border);
    flex-shrink: 0;
}

.header-left h1 {
    font-size: 20px;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.2;
}

.header-left .project-name {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ===== ПОЛЬЗОВАТЕЛЬ ===== */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-subtle);
    padding: 6px 16px 6px 6px;
    border-radius: 30px;
}
a.user-info {
    cursor: pointer;
}
a.user-info:hover {
    background: var(--color-bg-hover);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-avatar--xl {
    width: 96px;
    height: 96px;
    font-size: 36px;
}

.user-email {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #5b21b6;
    background: var(--color-primary-soft);
    border-radius: 999px;
    padding: 2px 8px;
}
.user-role-badge--admin {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.admin-role-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

/* ===== КНОПКИ ===== */
.btn,
.logout-btn,
.add-project-btn,
.back-btn {
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
}

.btn {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.btn:hover,
.logout-btn:hover,
.add-project-btn:hover,
.back-btn:hover,
.btn-submit:hover {
    transform: translateY(-2px);
}

.btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn:active,
.logout-btn:active,
.add-project-btn:active,
.back-btn:active,
.btn-submit:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
}
.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-primary);
}

.btn-success {
    background: var(--color-success);
    color: #fff;
}
.btn-success:hover {
    background: var(--color-success-dark);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

.btn-danger,
.logout-btn {
    background: var(--gradient-danger);
    color: #fff;
    border: 1px solid rgba(143, 35, 48, 0.12);
    box-shadow: var(--shadow-danger);
}
.btn-danger:hover,
.logout-btn:hover {
    background: linear-gradient(135deg, #d64550 0%, #b82e3a 100%);
    box-shadow: var(--shadow-danger-hover);
}

.btn-danger-soft {
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
    box-shadow: none;
}
.btn-danger-soft:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-danger);
}

.btn-danger-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-danger-muted);
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-danger-icon .icon {
    width: 16px;
    height: 16px;
}
.btn-danger-icon:hover:not(:disabled) {
    background: var(--color-danger-surface);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
    box-shadow: none;
    transform: none;
}
.btn-danger-icon:active:not(:disabled) {
    background: var(--color-danger-soft);
    transform: scale(0.96);
}

.btn-danger:disabled,
.btn-danger-soft:disabled,
.btn-danger-icon:disabled {
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
.btn-danger:disabled {
    background: #f1f3f5;
    color: #adb5bd;
    border-color: #e9ecef;
}
.btn-danger-soft:disabled {
    background: var(--color-danger-surface);
    color: #d4a8ad;
    border-color: #f5dde0;
}
.btn-danger-icon:disabled {
    background: transparent;
    color: #d4a8ad;
    border-color: transparent;
}

.btn-secondary,
.back-btn {
    background: var(--color-muted);
    color: #fff;
}
.btn-secondary:hover,
.back-btn:hover {
    background: var(--color-muted-dark);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.35);
}

.logout-btn {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}
.logout-btn:hover {
    background: linear-gradient(135deg, #d64550 0%, #b82e3a 100%);
}

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

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
.btn-danger:disabled,
.btn-danger-soft:disabled,
.btn-danger-icon:disabled {
    opacity: 1;
}

.add-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    background: var(--gradient-primary);
    color: #fff;
    cursor: pointer;
}
.add-project-btn:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-primary-sm);
}
.add-project-btn.is-active {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

.add-project-btn--icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    overflow: hidden;
}
.add-project-btn--icon .icon {
    width: 18px;
    height: 18px;
}

.header-icons {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.header-tools-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.header-tools-btn .icon {
    opacity: 0.72;
}
.header-tools-btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-light);
    border-color: #e2ddf0;
    box-shadow: none;
}
.header-tools-btn:hover .icon {
    opacity: 1;
}
.header-tools-btn.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-primary-deep);
    border-color: var(--color-primary-border);
}
.header-tools-btn.is-active .icon {
    opacity: 1;
}

/* ===== Поиск проекта в шапке ===== */
.hdr-search {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: block;
}
.hdr-search__toggle.projects-btn {
    position: absolute;
    inset: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.hdr-search__toggle.projects-btn .icon {
    fill: none;
    stroke: currentColor;
}
.hdr-search.is-open .hdr-search__toggle {
    /* слот 38×38 остаётся — соседние кнопки не прыгают */
    visibility: hidden;
    pointer-events: none;
}
.hdr-search__panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 90;
    width: min(300px, calc(100vw - 32px));
    height: 38px;
    transform: none;
}
.hdr-search__field {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 6px 0 10px;
    background: #fff;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.hdr-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-deep);
    flex: 0 0 auto;
    line-height: 0;
}
.hdr-search__icon .icon {
    width: 16px;
    height: 16px;
}
.hdr-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}
.hdr-search__input::-webkit-search-decoration,
.hdr-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.hdr-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.hdr-search__close:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.hdr-search__close .icon {
    width: 14px;
    height: 14px;
}
.hdr-search__drop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 4px;
}
.hdr-search__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
}
.hdr-search__item:hover,
.hdr-search__item.is-active {
    background: var(--color-primary-bg);
}
.hdr-search__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}
.hdr-search__meta {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-text-muted);
}
.hdr-search__item.is-paused .hdr-search__name {
    color: var(--color-text-muted);
}
.hdr-search__empty {
    padding: 12px 10px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .hdr-search__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 12px;
        width: auto;
        height: 42px;
        z-index: 120;
    }
    .hdr-search__field {
        height: 42px;
    }
    .hdr-search__drop {
        max-height: 50vh;
    }
}

.projects-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    line-height: 1;
    cursor: pointer;
}
.projects-btn:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-deep);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.projects-btn.is-active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-primary-sm);
}

.header-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-danger);
    color: #fff;
    border-radius: var(--radius-md);
    line-height: 1;
    cursor: pointer;
}
.header-logout:hover {
    background: var(--color-danger-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.quick-check-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-warning);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    line-height: 1;
    cursor: pointer;
}
.quick-check-btn:hover {
    background: var(--color-primary-bg);
    color: #e0a800;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.quick-check-btn.is-active {
    background: var(--gradient-primary);
    color: var(--color-warning);
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35);
}
.quick-check-btn .icon {
    fill: currentColor;
    stroke: none;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-admin);
    color: #fff;
    border-radius: var(--radius-md);
    line-height: 1;
    cursor: pointer;
}
.admin-btn:hover {
    filter: brightness(1.06);
    color: #fff;
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.35);
}
.admin-btn.is-active {
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.35);
}

.back-btn {
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-submit:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-primary-lg);
}
.btn-submit:disabled,
.project-card .check-btn:disabled,
.btn.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ===== КАРТОЧКИ ПРОЕКТОВ ===== */
.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.projects-header h2 {
    font-size: 20px;
    color: var(--color-text);
}

.projects-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: -4px 0 20px;
}
.projects-search {
    position: relative;
    display: block;
    flex: 1 1 240px;
    min-width: 180px;
}
.projects-search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.projects-search .search-input {
    width: 100%;
    height: 38px;
    padding: 8px 12px 8px 36px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
}
.projects-search .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.projects-toolbar .sort-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}
.projects-toolbar .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}
.projects-toolbar .sort-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-subtle);
}
.projects-toolbar .sort-btn.is-active {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
.projects-toolbar .sort-btn .icon {
    width: 14px;
    height: 14px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.projects-more {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 28px;
    padding: 16px 0 4px;
    color: var(--color-text-muted);
    font-size: 13px;
}
.projects-more[hidden] {
    display: none;
}
.projects-more.is-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid var(--color-muted);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.project-card {
    position: relative;
    padding: 20px;
    transition: all 0.3s ease;
    border-left: 4px solid var(--color-blue);
    min-width: 0;
}
.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.project-card.inactive {
    border-left-color: var(--color-muted);
}

.project-card .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 10px;
    padding-right: 56px;
    min-width: 0;
}

.project-card .project-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.project-card .project-name__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-card .project-engines {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.project-card .engine-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
}

.project-card .project-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--color-bg-hover);
    color: var(--color-text-light);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}
.project-card .project-status .icon {
    width: 14px;
    height: 14px;
}
.project-card .project-status.active {
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.project-card.inactive .project-status,
.project-card .project-status.disabled {
    background: var(--color-muted);
    color: #fff;
}

.project-card .project-meta {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 10px 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.project-card .project-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.project-card .project-meta .icon {
    width: 14px;
    height: 14px;
}
.project-card .project-meta__auto {
    color: var(--color-primary);
}
.project-card .project-meta__auto .icon-clock {
    animation: project-clock-glow 2.6s ease-in-out infinite;
}
.project-card .project-meta__auto .icon-clock__hour,
.project-card .project-meta__auto .icon-clock__min {
    transform-origin: 0 0;
}
.project-card .project-meta__auto .icon-clock__hour {
    animation: project-clock-hour 48s linear infinite;
}
.project-card .project-meta__auto .icon-clock__min {
    animation: project-clock-min 4s linear infinite;
}
@keyframes project-clock-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@keyframes project-clock-hour {
    to { transform: rotate(360deg); }
}
@keyframes project-clock-min {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .project-card .project-meta__auto .icon-clock {
        animation: none;
    }
    .project-card .project-meta__auto .icon-clock__hour,
    .project-card .project-meta__auto .icon-clock__min {
        animation: none;
    }
}
.project-card .project-owner {
    color: #6d28d9;
}

.project-card .project-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-bg);
}

.project-card .project-actions a,
.project-card .check-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
}
.project-card .project-actions a .icon,
.project-card .check-btn .icon {
    width: 16px;
    height: 16px;
}

.project-card .project-actions .btn-edit,
.project-card .check-btn {
    background: var(--color-blue-soft);
    color: var(--color-blue);
}
.project-card .project-actions .btn-edit:hover,
.project-card .check-btn:hover {
    background: var(--color-blue);
    color: #fff;
}

.project-card .project-actions .btn-positions {
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
}
.project-card .project-actions .btn-positions:hover {
    background: var(--color-primary);
    color: #fff;
}

.project-card .project-actions .btn-delete {
    background: var(--color-danger-btn);
    color: var(--color-danger);
}
.project-card .project-actions .btn-delete:hover {
    background: var(--color-danger);
    color: #fff;
}

.header-right .toggle-btn {
    position: static;
    flex-shrink: 0;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.4;
}
.toggle-btn .icon {
    width: 14px;
    height: 14px;
    vertical-align: 0;
}
.toggle-btn.enable {
    background: var(--color-success);
    color: #fff;
}
.toggle-btn.enable:hover {
    background: var(--color-success-dark);
}
.toggle-btn.disable {
    background: var(--color-danger);
    color: #fff;
}
.toggle-btn.disable:hover {
    background: var(--color-danger-dark);
}
.project-card .toggle-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
}
.project-card .toggle-btn .icon {
    width: 16px;
    height: 16px;
}

.project-card .check-btn {
    border: none;
    cursor: pointer;
}

.project-card .check-btn.loading {
    background: var(--color-warning);
    color: var(--color-text);
}

.project-card .check-btn .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.project-card .check-btn.loading .spinner {
    display: inline-block;
}

.project-card .check-btn.loading .btn-text {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.project-card .check-status {
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.project-card .check-status.show {
    display: block;
}

.project-card .check-status.pending { color: var(--color-warning); }
.project-card .check-status.success { color: var(--color-success); }
.project-card .check-status.error { color: var(--color-danger); }

/* ===== ТАБЛИЦЫ ===== */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-bg);
}

th {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}
th.sortable:hover {
    background: var(--color-bg-hover);
}

/* Подсветка всей строки: inset-оверлей поверх цветных ячеек (рост/падение и т.п.) */
table tbody tr:hover > td {
    box-shadow: inset 0 0 0 9999px var(--table-row-hover-tint);
}
table tbody tr:hover > td:first-child {
    box-shadow:
        inset 3px 0 0 0 var(--color-primary),
        inset 0 0 0 9999px var(--table-row-hover-tint);
}
tr:last-child td {
    border-bottom: none;
}

tr.stripe {
    background: var(--color-bg-stripe);
}

.col-num { width: 50px; }
.col-position { width: 120px; }
.col-actions { width: 80px; }
.col-diff { width: 100px; }

.col-actions .btn-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-footer {
    margin-top: 15px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.table-empty {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

.table-empty-icon {
    margin-bottom: 10px;
    color: var(--color-text-muted);
    opacity: 0.4;
}

/* ===== БЭДЖИ ПОЗИЦИЙ ===== */
.position-badge {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    min-width: 38px;
    text-align: center;
}
.position-badge.top10 { background: var(--color-success); }
.position-badge.top30 { background: var(--color-info); }
.position-badge.top100 {
    background: var(--color-warning);
    color: var(--color-text);
}
.position-badge.none { background: var(--color-danger); }
.position-badge.unknown { background: var(--color-muted); }

.diff-up,
.diff-down,
.diff-same {
    font-weight: 700;
}
.diff-up { color: var(--color-success); }
.diff-down { color: var(--color-danger); }
.diff-same { color: var(--color-warning); }

/* ===== ФИЛЬТРЫ ===== */
.filters {
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.filters label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filters .search-input,
.filters-search {
    flex: 1;
    min-width: 150px;
}

.filters .search-input {
    min-width: 180px;
}

.filters .sort-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.filters .sort-btn {
    padding: 6px 14px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--color-text-secondary);
}
.filters .sort-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-subtle);
}
.filters .sort-btn.active {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: #fff;
}

/* ===== ПРОЕКТНАЯ ИНФОРМАЦИЯ ===== */
.project-info {
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-text-light);
}
.project-info .info-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.project-info .info-item strong {
    color: var(--color-text);
}

/* ===== ФОРМЫ ===== */
.form-container {
    padding: 30px;
}
.form-container--compact {
    padding: 22px 24px;
    max-width: 720px;
    margin: 0 auto 24px;
}
.form-container--compact .form-group {
    margin-bottom: 16px;
}
.form-container--compact .form-group:last-child {
    margin-bottom: 0;
}
.form-container--compact .form-group textarea {
    min-height: 112px;
}
.form-container--compact .engine-card {
    padding: 10px 12px;
    border-radius: 12px;
    align-items: center;
}
.form-container--compact .engine-card__text em {
    font-size: 12px;
}
.form-container--compact .region-picker {
    padding: 10px;
}
.form-container--compact .help-text,
.form-container--compact .domain-hint {
    font-size: 12px;
}

/* Пошаговая форма */
.form-steps {
    --form-steps-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--form-steps-count, 4), minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.form-steps::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 14px;
    height: 2px;
    background: #e6e4f0;
    z-index: 0;
}
.form-steps::after {
    content: '';
    position: absolute;
    left: 12%;
    top: 14px;
    height: 2px;
    width: var(--form-steps-progress, 0%);
    max-width: 76%;
    background: var(--color-primary);
    z-index: 0;
    transition: width 0.25s ease;
}
.form-steps__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-muted);
    text-align: center;
}
.form-steps__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 2px solid #d9d6e6;
    color: var(--color-text-muted);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.form-steps__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
}
.form-steps__item.is-active {
    color: var(--color-primary-deep);
}
.form-steps__item.is-active .form-steps__num {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.form-steps__item.is-done {
    color: var(--color-primary-deep);
}
.form-steps__item.is-done .form-steps__num {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
}
.form-step {
    margin-bottom: 8px;
}
.form-step[hidden] {
    display: none !important;
}
.form-step__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.form-step__lead {
    margin: -8px 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.form-step__block {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-subtle);
}
.form-step__block[hidden] {
    display: none !important;
}
.form-step__block > .form-group:last-child,
.form-step__block > .serp-live-field:last-child {
    margin-bottom: 0;
}
.form-step__block-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}
.form-steps__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.form-steps__actions .btn {
    margin: 0;
    flex: 0 0 auto;
}
.form-steps__actions [data-step-prev] {
    margin-right: auto;
}
/* 1 шаг: только Далее | середина: Назад+Далее | 4 шаг: Назад+Создать */
.form-steps__actions.is-first [data-step-prev],
.form-steps__actions.is-last [data-step-next],
.form-steps__actions:not(.is-last) [data-step-submit] {
    display: none !important;
}
.form-steps__actions.is-last [data-step-submit] {
    display: inline-flex !important;
}
@media (max-width: 560px) {
    .form-steps__label {
        font-size: 11px;
    }
    .form-steps::before,
    .form-steps::after {
        left: 10%;
        right: 10%;
    }
    .form-steps::after {
        right: auto;
        max-width: 80%;
    }
}

.serp-live-field {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed #e4e6ef;
}
.form-group.serp-live-field > .serp-live-opt,
.serp-live-field .serp-live-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #9aa3b5;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
}
.serp-live-field .serp-live-opt input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    opacity: 0.75;
    vertical-align: middle;
}
.serp-live-field .serp-live-opt > span {
    display: inline-block;
    line-height: 1.2;
}
.serp-live-opt:hover,
.serp-live-opt:hover span {
    color: #7a8499;
}
.serp-live-field:has(.serp-live-opt input:checked) .serp-live-opt,
.serp-live-field:has(.serp-live-opt input:checked) .serp-live-opt span {
    color: #6b758a;
}
.serp-live-info-card {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #fafbfd;
    border: 1px solid #e4e8f0;
    font-size: 12px;
    line-height: 1.5;
    color: #5c6478;
}
.serp-live-field:has(.serp-live-opt input:checked) .serp-live-info-card {
    display: block;
}
.serp-live-info-card p {
    margin: 0 0 8px;
}
.serp-live-info-card p:last-child {
    margin-bottom: 0;
}
.serp-live-info-card__lead {
    color: #4a5368;
}
.serp-live-info-card__warn {
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff8ed;
    border: 1px solid #f0dfc0;
    color: #7a5a20;
}
.serp-live-info-card__rec {
    font-size: 11px;
    color: #9aa3b5;
}

.yandex-depth,
.search-depth {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8eaf4;
}
.yandex-depth label,
.search-depth label {
    margin: 0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yandex-depth select,
.search-depth select {
    width: auto;
    min-width: 120px;
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
}
.yandex-depth .help-text,
.search-depth .help-text {
    flex: 1 1 100%;
    margin-top: 0;
}

.form-group {
    margin-bottom: 24px;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
}
.form-group label:has(.tip) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.form-group label .required {
    color: var(--color-danger);
    margin-left: 3px;
}

.help-text,
.domain-hint,
.section-info {
    display: block;
    color: var(--color-text-muted);
    font-size: 13px;
    margin-top: 5px;
    font-weight: 400;
}
.form-group input[type="text"].is-invalid,
.form-group textarea.is-invalid {
    border-color: var(--color-danger);
}
.form-group input[type="text"].is-valid {
    border-color: var(--color-success);
}
.domain-hint.is-ok {
    color: var(--color-success-dark, #1e7e34);
}
.domain-hint.is-bad {
    color: var(--color-danger);
}
.section-info {
    color: var(--color-text-light);
    margin-top: 8px;
}

.auth-container .form-group input,
.filters select,
.filters input[type="text"],
.form-group input[type="text"],
.form-group select,
.form-group textarea,
.section-box textarea,
.form-row-inline select,
.add-form input[type="text"] {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
    transition: border-color var(--transition);
}

.auth-container .form-group input,
.form-group input[type="text"],
.form-group select,
.form-group textarea,
.section-box textarea {
    width: 100%;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea,
.section-box textarea {
    padding: 10px 14px;
}

.filters select,
.filters input[type="text"],
.form-row-inline select {
    padding: 8px 12px;
}

.auth-container .form-group input:focus,
.filters select:focus,
.filters input[type="text"]:focus,
.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus,
.section-box textarea:focus,
.form-row-inline select:focus,
.add-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group textarea,
.section-box textarea {
    resize: vertical;
    min-height: 180px;
    line-height: 1.6;
}

.section-box textarea {
    min-height: 120px;
    border-radius: var(--radius-sm);
}

.form-group select,
.form-row-inline select {
    appearance: auto;
    cursor: pointer;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row-inline {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.form-row-inline select {
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.add-form {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.add-form input[type="text"] {
    flex: 1;
    padding: 9px 14px;
    min-width: 200px;
}

.counter {
    text-align: right;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 5px;
}

.domain-display {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    word-break: break-all;
}

.domain-display .idn-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ===== СТАТИСТИКА ===== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    padding: 14px 18px;
    text-align: center;
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card .stat-number {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.stat-card .stat-change {
    font-size: 11px;
    margin-top: 4px;
    font-weight: 600;
}

.stat-card .stat-change.up { color: var(--color-success); }
.stat-card .stat-change.down { color: var(--color-danger); }
.stat-card .stat-change.same { color: var(--color-warning); }

.stat-card.total .stat-number,
.stat-card.queries .stat-number { color: var(--color-primary); }
.stat-card.checks .stat-number { color: var(--color-primary-dark); }
.stat-card.top10 .stat-number { color: var(--chart-1); }
.stat-card.top30 .stat-number { color: var(--chart-2); }
.stat-card.top100 .stat-number { color: var(--chart-3); }
.stat-card.none .stat-number { color: var(--chart-4); }
.stat-card.avg .stat-number { color: var(--color-primary-deep); }

/* ===== СВОДКА И ИНФО ===== */
.summary-text {
    background: var(--color-bg-subtle);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    border-left: 4px solid var(--color-blue);
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.summary-text strong {
    color: var(--color-text);
}

.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

.compare-info,
.last-check-info,
.check-panel {
    background: var(--color-blue-soft);
}

.last-check-info {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    display: inline-block;
    font-size: 14px;
    color: var(--color-blue-dark);
    margin-bottom: 15px;
}

.compare-info {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-blue-dark);
}

/* ===== ПАНЕЛЬ ДЕЙСТВИЙ ===== */
.action-bar {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.check-panel {
    margin: 15px 0;
    padding: 15px 20px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-blue);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.check-panel .btn {
    font-size: 15px;
    padding: 10px 24px;
}

.check-run {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: min(100%, 280px);
    flex: 1 1 240px;
}
.check-run .btn {
    align-self: flex-start;
}
.check-run__row,
.ws-run__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.check-run__row .tip,
.ws-run__row .tip,
.project-actions__check .tip {
    flex-shrink: 0;
}
.project-actions__check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.project-actions__check .tip__mark {
    width: 28px;
    height: 28px;
}
.check-run__hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-success-dark, #1e7e34);
    line-height: 1.3;
}
.ws-run {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.check-run--spotlight .btn-success.is-spotlight {
    font-weight: 700;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.45);
    animation: check-spotlight 1.7s ease-out infinite;
}
@keyframes check-spotlight {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .check-run--spotlight .btn-success.is-spotlight {
        animation: none;
        outline: 2px solid var(--color-success);
        outline-offset: 2px;
    }
}
.check-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.check-progress[hidden] {
    display: none !important;
}
.check-progress__bar {
    height: 8px;
    background: var(--color-bg);
    border-radius: 99px;
    overflow: hidden;
}
.check-progress__bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width .35s ease;
}
.check-progress__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text);
}
.check-progress__meta strong {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-deep);
    font-size: 15px;
    font-weight: 700;
}
.check-progress--card {
    margin-top: 12px;
}
.btn.btn-success.is-running,
.btn.btn-success.is-running:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1;
}
.project-card .check-btn.is-running,
.project-card .check-btn.is-running:disabled {
    opacity: 1;
    width: auto;
    min-width: 44px;
    padding: 0 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12px;
}
.project-card .check-btn.is-running .spinner {
    display: none;
}
.project-card .check-btn.is-running .btn-text {
    display: inline;
}

/* ===== СЕКЦИИ НА СТРАНИЦЕ ПРОЕКТА ===== */
.section-title {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title .icon,
.chart-container h2 .icon,
.chart-controls-label .icon,
.stat-card-head .icon {
    color: var(--color-primary);
}

.section-box {
    background: var(--color-bg-subtle);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    margin: 15px 0;
}

.section-box--success { border-left: 3px solid var(--color-success); }
.section-box--primary { border-left: 3px solid var(--color-blue); }

.access-label {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--color-primary-chip);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-border);
    white-space: nowrap;
    vertical-align: middle;
}
.access-label::before {
    content: none;
}
.header-left .project-name .access-label {
    font-size: 11px;
    position: relative;
    top: -1px;
}
.project-card .project-name .access-label {
    font-size: 11px;
    font-weight: 600;
}
.project-access__grant {
    margin: 4px 0 18px;
}
.project-access__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.project-access__row input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 420px;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.2;
    color: var(--color-text);
    background: var(--color-bg-card);
    transition: border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.project-access__row input[type="email"]::placeholder {
    color: var(--color-muted, #8b95a5);
}
.project-access__row input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
}
.project-access__row .btn {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
}
.project-access__empty {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--color-muted, #6b7280);
}
.project-access__list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-access__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #fff);
}
.project-access__who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
}
.project-access__who strong {
    font-weight: 600;
    word-break: break-all;
}
.project-access__name,
.project-access__meta {
    color: var(--color-muted, #6b7280);
    font-size: 13px;
}
.project-access__transfer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}
.project-access__transfer-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}
.project-access__transfer .help-text {
    margin-bottom: 12px;
}
@media (max-width: 560px) {
    .project-access__row .btn {
        width: 100%;
        justify-content: center;
    }
    .project-access__row input[type="email"] {
        max-width: none;
    }
    .project-access__item {
        flex-direction: column;
        align-items: stretch;
    }
    .project-access__item .btn {
        width: 100%;
        justify-content: center;
    }
}

.section-accordion {
    padding-top: 4px;
    padding-bottom: 4px;
}
.section-accordion.is-open {
    padding-top: 15px;
    padding-bottom: 15px;
}
.section-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}
.section-accordion__toggle:hover {
    color: var(--color-primary);
}
.section-accordion__toggle:hover .section-accordion__chevron {
    color: var(--color-primary);
}
.section-accordion__toggle .section-title {
    margin: 0;
    pointer-events: none;
}
.section-accordion__chevron {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.section-accordion.is-open .section-accordion__chevron {
    transform: rotate(90deg);
}
.section-accordion__body {
    display: none;
    padding-top: 8px;
}
.section-accordion.is-open .section-accordion__body {
    display: block;
}

.project-goto {
    display: flex;
    justify-content: center;
    margin: 8px 0 20px;
}
.project-goto__btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.28);
}
.project-goto__btn:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.empty-message {
    color: var(--color-muted);
    padding: 20px 0;
}

.queries-manage {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.queries-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
}
.queries-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
.queries-search .icon {
    grid-area: 1 / 1;
    justify-self: start;
    margin-left: 12px;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted, #888);
    pointer-events: none;
    z-index: 1;
}
.queries-search .search-input {
    grid-area: 1 / 1;
    width: 100%;
    height: 38px;
    padding: 8px 12px 8px 36px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
}
.queries-search .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.queries-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}
.queries-toolbar__actions .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    box-sizing: border-box;
    font-weight: 600;
    white-space: nowrap;
}
.queries-toolbar__actions .btn .icon {
    width: 15px;
    height: 15px;
}
.queries-table .col-actions {
    width: 52px;
    text-align: center;
    padding-right: 10px;
}
.queries-table td.col-actions,
.queries-table th.col-actions {
    vertical-align: middle;
}
.project-access__item .btn-danger-soft {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
}
.project-access__transfer .btn-danger {
    min-height: 40px;
    padding: 0 16px;
    font-weight: 600;
}
.project-manage__actions .btn,
.project-manage__actions .toggle-btn {
    min-height: 40px;
}

.queries-export-modal {
    max-width: 560px;
    width: 100%;
}
.queries-export-modal h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}
.queries-export-modal__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 8px;
}
.queries-export-modal__count {
    font-weight: 500;
    color: var(--color-text-muted);
}
.queries-export-modal__count::after {
    content: ' шт.';
}
.queries-export-modal__text {
    display: block;
    width: 100%;
    min-height: 260px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.queries-export-modal__text:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}
.queries-export-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
.queries-export-modal__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.queries-table-wrap {
    max-height: 480px;
    overflow: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.queries-table .col-check {
    width: 40px;
    text-align: center;
}
.queries-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    vertical-align: middle;
}
.queries-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ece8fb;
    color: #5b21b6;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
}
.queries-filter-empty {
    margin-top: 8px;
}

/* ===== ГРАФИКИ ===== */
.chart-container {
    padding: 25px;
    margin-bottom: 20px;
}

.chart-container h2 {
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.chart-wrapper {
    width: 100%;
    height: 450px;
    position: relative;
}

.chart-wrapper-sm {
    height: 350px;
}

.chart-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
}

.chart-controls-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-controls-spacer {
    flex: 1;
}

.legend-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    justify-content: center;
}

.legend-colors .color-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.color-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.color-box--top10 { background: var(--chart-1); }
.color-box--top30 { background: var(--chart-2); }
.color-box--top100 { background: var(--chart-3); }
.color-box--none { background: var(--chart-4); }

/* ===== АЛЕРТЫ ===== */
.alert,
.status-message {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.alert-danger,
.status-error {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.alert-info {
    background: var(--color-info-alert);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.alert-inline,
.status-success-inline,
.status-message {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ===== ТОСТЫ ===== */
.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-bg-card);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    animation: toast-in 0.28s ease;
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--info { border-left-color: var(--color-info); }

.toast__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast__icon .icon {
    width: 16px;
    height: 16px;
}
.toast--success .toast__icon {
    background: var(--color-success-soft);
    color: var(--color-success-dark);
}
.toast--error .toast__icon {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.toast--info .toast__icon {
    background: var(--color-info-alert);
    color: var(--color-info);
}

.toast__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.toast__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.toast__text {
    margin-top: 3px;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    word-wrap: break-word;
}

.toast__close {
    border: none;
    background: transparent;
    color: var(--color-text-faint);
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.toast__close .icon {
    width: 14px;
    height: 14px;
}
.toast__close:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

@keyframes toast-in {
    from {
        transform: translateX(18px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.toast.is-out {
    animation: toast-out 0.22s ease forwards;
}
@keyframes toast-out {
    to {
        transform: translateX(18px);
        opacity: 0;
    }
}

.status-message {
    padding: 10px 14px;
}

/* ===== ПОСЛЕДНИЕ ПРОВЕРКИ ===== */
.recent-checks {
    padding: 20px;
    margin-bottom: 30px;
}
.recent-checks h2 {
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 14px;
}

.check-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-bg);
}
.check-item:last-child {
    border-bottom: none;
}
.check-item__project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 1 240px;
    min-width: 140px;
    max-width: 280px;
    padding: 8px 10px;
    margin: -2px 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.check-item__project:hover,
.check-item__project:focus-visible {
    background: rgba(102, 126, 234, 0.1);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(102, 126, 234, 0.22);
}
.check-item__project:hover .check-site,
.check-item__project:focus-visible .check-site {
    color: var(--color-primary);
}
.check-item__project:hover .check-item__report,
.check-item__project:focus-visible .check-item__report {
    color: var(--color-primary);
    opacity: 1;
}
.check-item__project-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.check-site {
    font-weight: 500;
    color: var(--color-text);
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.check-item__report {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
    opacity: 0.55;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.check-item__report .icon {
    width: 16px;
    height: 16px;
}
.check-date {
    color: var(--color-text-muted);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.recent-checks .pos-dist {
    margin-bottom: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.pos-dist__label .icon {
    width: 13px;
    height: 13px;
    color: var(--color-primary);
    vertical-align: -2px;
}
.pos-dist__pct {
    font-weight: 500;
    color: var(--color-text-faint);
}
.pos-dist--compact .pos-dist__cell {
    padding: 8px 12px 10px;
}
.pos-dist--compact .pos-dist__label {
    font-size: 12px;
    margin-bottom: 2px;
}
.pos-dist--compact .pos-dist__value {
    font-size: 20px;
    line-height: 1.15;
}
.check-date .icon {
    width: 16px;
    height: 16px;
}

/* Компактный dist на дашборде: не ломаем в сетку 3+1 как полный pos-dist */
@media (max-width: 992px) {
    .pos-dist.pos-dist--compact {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .pos-dist.pos-dist--compact .pos-dist__cell {
        border-right: 1px solid var(--color-border);
        border-bottom: none;
        padding: 8px 6px 10px;
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(3n) {
        border-right: 1px solid var(--color-border);
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(4n),
    .pos-dist.pos-dist--compact .pos-dist__cell:last-child {
        border-right: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(n+4) {
        border-bottom: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__label {
        white-space: normal;
        line-height: 1.25;
    }
    .pos-dist.pos-dist--compact .pos-dist__pct {
        display: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__value {
        font-size: 18px;
    }
    .check-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .check-item__project {
        flex: none;
        max-width: none;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
    }
    .check-site {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .pos-dist.pos-dist--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(2n) {
        border-right: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(n+3) {
        border-bottom: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__cell:nth-child(n+4) {
        border-bottom: none;
    }
    .pos-dist.pos-dist--compact .pos-dist__value {
        font-size: 17px;
    }
}

/* ===== НАВИГАЦИЯ ===== */
.nav {
    margin-bottom: 20px;
}
.nav a {
    margin-right: 16px;
    color: var(--color-blue);
    font-weight: 500;
    font-size: 14px;
}
.nav a:hover {
    text-decoration: underline;
}

/* ===== ПУСТЫЕ СОСТОЯНИЯ ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--color-bg-card);
}
.empty-state .empty-icon {
    margin-bottom: 16px;
    opacity: 0.35;
    color: var(--color-text-muted);
}
.empty-state h3 {
    color: var(--color-text-light);
    margin-bottom: 8px;
    font-size: 20px;
}
.empty-state p {
    color: var(--color-text-faint);
    margin-bottom: 20px;
}
.project-paused {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
    font-size: 14px;
    line-height: 1.45;
}
.project-paused__text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.project-paused .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.project-paused .toggle-btn {
    position: static;
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 14px;
    width: auto;
    height: auto;
    border-radius: 20px;
}

/* ===== УПРАВЛЕНИЕ ПРОЕКТОМ (настройки) ===== */
.project-manage {
    margin-top: 24px;
    border-left: 3px solid var(--color-danger);
}
.project-manage__status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 12px 14px;
    background: var(--color-success-soft);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-success-text);
}
.project-manage__status--off {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}
.project-manage__status .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.project-manage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.toggle-btn--settings {
    font-size: 13px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    box-shadow: none;
}
.toggle-btn--settings .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.toggle-btn--settings.enable {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}
.toggle-btn--settings.enable:hover {
    background: var(--color-success);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.28);
}
.toggle-btn--settings.disable {
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}
.toggle-btn--settings.disable:hover {
    background: var(--color-danger);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-danger);
}
.project-manage__delete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
}

/* ===== МОДАЛЬНОЕ ОКНО ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}
.modal.active {
    display: flex;
}
.modal-content {
    padding: 30px;
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: none;
}
.modal-close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
    color: var(--color-text-faint);
    transition: color var(--transition);
    line-height: 1;
}
.modal-close:hover {
    color: var(--color-text);
}
.modal h2 {
    margin-bottom: 20px;
    color: var(--color-text);
}
.modal .chart-container {
    width: 100%;
    height: 400px;
}

body.confirm-open {
    overflow: hidden;
}
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 22, 48, 0.48);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.confirm-overlay.is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
.confirm-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}
.confirm-dialog {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-auth);
    padding: 28px 26px 22px;
    text-align: center;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.22s ease;
}
.confirm-overlay.is-open .confirm-dialog {
    transform: translateY(0) scale(1);
}
.confirm-dialog__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
}
.confirm-dialog__icon .icon {
    width: 24px;
    height: 24px;
}
.confirm-dialog--danger .confirm-dialog__icon {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.confirm-dialog__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.confirm-dialog__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.confirm-dialog__head .confirm-dialog__title {
    flex: 1;
    min-width: 0;
}
.confirm-dialog__text {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 22px;
}
.confirm-dialog__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.confirm-dialog__actions .btn {
    min-width: 120px;
    justify-content: center;
    border: none;
    cursor: pointer;
}
.confirm-dialog__cancel {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}
.confirm-dialog__ok {
    background: var(--gradient-primary);
    color: #fff;
}
.confirm-dialog__ok:hover {
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}
.confirm-dialog--danger .confirm-dialog__ok {
    background: var(--color-danger);
}
.confirm-dialog--danger .confirm-dialog__ok:hover {
    background: var(--color-danger-hover);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

/* ================================================================ */
/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
/* ================================================================ */

@media (max-width: 992px) {
    .container {
        padding: 15px;
    }
    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .auth-container {
        padding: 30px;
        max-width: 380px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .auth-container {
        padding: 28px 20px;
        max-width: 100%;
        border-radius: var(--radius-lg);
    }
    .auth-header .auth-logo .icon--xl {
        width: 40px;
        height: 40px;
    }
    .auth-header h1 {
        font-size: 22px;
    }
    .auth-header p {
        font-size: 13px;
    }
    .auth-container .form-group input {
        padding: 10px 14px;
        font-size: 13px;
    }
    .auth-container .btn-auth {
        padding: 12px;
        font-size: 15px;
    }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 16px 18px;
        gap: 12px;
    }
    .header-left {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .header-divider {
        display: none;
    }
    .header-title {
        align-items: center;
        text-align: center;
    }
    .header-left h1 {
        font-size: 20px;
    }
    .header-left .project-name {
        font-size: 16px;
    }
    .header-right {
        width: 100%;
        justify-content: center;
    }

    .user-info {
        padding: 4px 12px 4px 4px;
    }
    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .user-avatar--xl,
    .settings-avatar .user-avatar {
        width: 96px;
        height: 96px;
        font-size: 36px;
    }
    .user-email {
        font-size: 13px;
    }

    .project-card .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .projects-header {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 10px;
        margin-bottom: 12px;
    }
    .projects-header h2 {
        font-size: 18px;
    }
    .projects-header .add-project-btn {
        width: 100%;
        justify-content: center;
    }
    .projects-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 14px;
    }
    .projects-search {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }
    .projects-toolbar .sort-btns {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .projects-toolbar .sort-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 8px 10px;
        font-size: 13px;
    }
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 10px;
    }
    .filters .search-input {
        min-width: auto;
        width: 100%;
    }
    .filters .sort-btns {
        justify-content: center;
    }
    .filters .sort-btn {
        font-size: 12px;
        padding: 5px 10px;
    }
    .filters label {
        font-size: 12px;
    }
    .filters select {
        font-size: 13px;
        padding: 6px 10px;
        min-width: auto;
        width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .chart-wrapper {
        height: 300px;
    }

    .chart-wrapper-sm {
        height: 250px;
    }

    .chart-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .chart-controls-spacer {
        display: none;
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-card .stat-number {
        font-size: 22px;
    }

    .form-container {
        padding: 18px 16px;
    }

    .add-form {
        flex-direction: column;
        align-items: stretch;
    }
    .add-form input[type="text"] {
        min-width: auto;
        width: 100%;
    }

    .project-info {
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px;
        font-size: 13px;
    }

    th, td {
        padding: 8px 10px;
        font-size: 13px;
    }
    th {
        font-size: 12px;
    }
    .position-badge {
        font-size: 12px;
        padding: 2px 10px;
        min-width: 30px;
    }

    .check-date {
        font-size: 12px;
    }

    .compare-info {
        font-size: 13px;
        padding: 8px 12px;
        text-align: center;
    }

    .btn {
        font-size: 13px;
        padding: 6px 14px;
    }
    .logout-btn {
        font-size: 13px;
        padding: 6px 16px;
    }

    .modal-content {
        padding: 20px;
        margin: 10px;
        width: 98%;
    }
    .modal .chart-container {
        height: 280px;
    }

    .recent-checks {
        padding: 12px 14px;
        margin-bottom: 16px;
    }
    .recent-checks h2 {
        font-size: 16px;
    }

    .table-container {
        border-radius: var(--radius-md);
    }
}

@media (max-width: 480px) {
    .toast-stack {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }

    .container {
        padding: 6px;
    }
    .projects-header {
        margin-bottom: 10px;
        gap: 8px;
    }
    .projects-header h2 {
        font-size: 16px;
    }
    .projects-toolbar .sort-btn {
        padding: 7px 8px;
        font-size: 12px;
    }
    .recent-checks {
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    .recent-checks h2 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .auth-container {
        padding: 20px 16px;
        border-radius: 10px;
    }
    .auth-header .auth-logo .icon--xl {
        width: 36px;
        height: 36px;
    }
    .auth-header h1 {
        font-size: 19px;
    }
    .auth-header p {
        font-size: 12px;
    }
    .auth-container .form-group {
        margin-bottom: 14px;
    }
    .auth-container .form-group input {
        padding: 9px 12px;
        font-size: 12px;
    }
    .auth-container .btn-auth {
        padding: 10px;
        font-size: 14px;
    }
    .auth-footer {
        font-size: 13px;
    }

    .header {
        padding: 12px 14px;
        border-radius: var(--radius-md);
    }
    .header-left h1 {
        font-size: 18px;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-wrapper {
        height: 250px;
    }

    .chart-container {
        padding: 15px;
    }

    .chart-container h2 {
        font-size: 15px;
    }

    .stat-card .stat-number {
        font-size: 20px;
    }

    .project-card {
        padding: 14px 16px;
    }
    .project-card .project-name {
        font-size: 16px;
    }
    .project-card .project-meta {
        font-size: 12px;
        gap: 10px;
    }
    .project-card .project-actions a {
        font-size: 12px;
        padding: 4px 10px;
    }

    .form-container {
        padding: 14px 12px;
        border-radius: var(--radius-md);
    }
    .form-group {
        margin-bottom: 16px;
    }
    .form-group label {
        font-size: 13px;
    }
    .form-group input[type="text"],
    .form-group select,
    .form-group textarea {
        font-size: 13px;
        padding: 8px 12px;
    }
    .form-group textarea {
        min-height: 140px;
    }

    .btn-submit {
        font-size: 14px;
        padding: 12px;
    }
    .add-project-btn {
        font-size: 13px;
        padding: 8px 18px;
    }
    .add-project-btn--icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
    }

    .queries-toolbar__actions {
        margin-left: 0;
        width: 100%;
    }
    .queries-toolbar__actions .btn {
        flex: 1 1 auto;
    }
    .filters .sort-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    .filters select,
    .filters input[type="text"] {
        font-size: 12px;
        padding: 6px 10px;
    }

    th, td {
        padding: 6px 8px;
        font-size: 12px;
    }
    .position-badge {
        font-size: 11px;
        padding: 2px 8px;
        min-width: 26px;
    }

    .table-container {
        border-radius: var(--radius-sm);
    }
    .table-container table {
        font-size: 12px;
    }

    .project-info {
        font-size: 12px;
        padding: 10px 12px;
        gap: 4px;
    }

    .check-site {
        font-size: 13px;
    }
    .check-date {
        font-size: 12px;
    }

    .empty-state {
        padding: 40px 16px;
    }
    .empty-state .empty-icon .icon--empty {
        width: 48px;
        height: 48px;
    }
    .empty-state h3 {
        font-size: 17px;
    }

    .modal-content {
        padding: 16px;
        border-radius: var(--radius-md);
    }
    .modal .chart-container {
        height: 220px;
    }
    .modal-close {
        right: 14px;
        top: 10px;
        font-size: 24px;
    }

    .nav a {
        font-size: 13px;
        margin-right: 10px;
    }

    .counter {
        font-size: 12px;
    }
    .alert {
        font-size: 13px;
        padding: 10px 14px;
    }

    .diff-up,
    .diff-down,
    .diff-same {
        font-size: 13px;
    }
}

/* ================================================================ */
/* ===== ПЕЧАТЬ ===== */
/* ================================================================ */

@media print {
    body {
        background: #fff;
    }
    .header,
    .filters,
    .nav,
    .btn,
    .logout-btn,
    .add-project-btn,
    .project-actions,
    .back-btn,
    .auth-container,
    .toast-stack {
        display: none !important;
    }
    .container {
        padding: 0;
        max-width: 100%;
    }
    .table-container,
    .project-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    .project-card {
        break-inside: avoid;
        margin-bottom: 16px;
    }
    .projects-grid {
        display: block;
    }
    th {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .position-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .position-badge.top10 {
        background: var(--color-success) !important;
        color: #fff !important;
    }
    .position-badge.top30 {
        background: var(--color-info) !important;
        color: #fff !important;
    }
    .position-badge.top100 {
        background: var(--color-warning) !important;
        color: var(--color-text) !important;
    }
    .position-badge.none {
        background: var(--color-danger) !important;
        color: #fff !important;
    }
    .position-badge.unknown {
        background: var(--color-muted) !important;
        color: #fff !important;
    }
}

/* ===== СТАТИСТИКА ДВИЖЕНИЯ ПОЗИЦИЙ ===== */
.stats-row--movement {
    grid-template-columns: repeat(4, 1fr);
}

.stat-card-head {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.stat-card.improved .stat-number,
.stat-card.improved .stat-card-head { color: var(--color-success); }
.stat-card.same .stat-number,
.stat-card.same .stat-card-head { color: var(--color-muted); }
.stat-card.worsened .stat-number,
.stat-card.worsened .stat-card-head { color: var(--color-danger); }

.stats-caption {
    margin: -8px 0 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Компактная сводка над таблицей позиций */
.project-info + .pos-summary {
    margin-top: -8px;
}
.pos-summary {
    margin-bottom: 10px;
}
.pos-summary .stats-row--movement {
    gap: 8px;
    margin-bottom: 8px;
}
.pos-summary .stat-card {
    padding: 8px 10px;
}
.pos-summary .stat-card:hover {
    transform: none;
}
.pos-summary .stat-card-head {
    font-size: 13px;
    margin-bottom: 0;
    gap: 4px;
}
.pos-summary .stat-card-head .icon {
    width: 12px;
    height: 12px;
}
.pos-summary .stat-card .stat-number {
    font-size: 20px;
    line-height: 1.1;
}
.pos-summary .stat-card .stat-label {
    font-size: 13px;
    margin-top: 2px;
}
.pos-summary .stats-row--filterable .stat-card--filter {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.pos-summary .stats-row--filterable .stat-card--filter:hover {
    background: var(--color-primary-bg);
}
.pos-summary .stats-row--filterable .stat-card--filter.is-active {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 2px var(--color-primary-border-strong);
}
.pos-summary .stats-row--filterable .stat-card--filter.improved.is-active {
    background: rgba(34, 197, 94, 0.08);
    box-shadow: inset 0 0 0 2px var(--color-success);
}
.pos-summary .stats-row--filterable .stat-card--filter.same.is-active {
    background: rgba(107, 114, 128, 0.08);
    box-shadow: inset 0 0 0 2px var(--color-muted);
}
.pos-summary .stats-row--filterable .stat-card--filter.worsened.is-active {
    background: rgba(239, 68, 68, 0.08);
    box-shadow: inset 0 0 0 2px var(--color-danger);
}
.pos-summary .stats-row--filterable .stat-card--filter:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.pos-summary .pos-dist {
    margin-bottom: 6px;
}
.pos-summary .pos-dist__cell {
    padding: 8px 8px 10px;
}
.pos-summary .pos-dist__label {
    font-size: 13px;
    margin-bottom: 2px;
}
.pos-summary .pos-dist__value {
    font-size: 18px;
}
.pos-summary .pos-dist__delta {
    margin-left: 2px;
}
.pos-summary .pos-dist__delta-ico {
    width: 18px;
    height: 18px;
}
.pos-summary .pos-dist__delta-ico .icon {
    width: 11px;
    height: 11px;
}
.pos-summary .pos-dist__delta-n {
    font-size: 12px;
}
.pos-summary .stats-caption {
    margin: 0 0 4px;
    font-size: 12px;
    text-align: left;
}
.pos-summary + .action-bar {
    margin-top: 8px;
    margin-bottom: 10px;
}

.pos-dist {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.pos-dist__cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px 14px;
    text-align: left;
    border-right: 1px solid var(--color-border);
}

.pos-dist__cell:last-child {
    border-right: none;
}

.pos-dist__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}

.pos-dist__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pos-dist__num {
    line-height: 1;
}
.pos-dist__delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}
.pos-dist__delta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    line-height: 0;
}
.pos-dist__delta-ico .icon {
    width: 13px;
    height: 13px;
}
.pos-dist__delta-n {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.pos-dist__delta--up {
    color: var(--color-success-text);
}
.pos-dist__delta--up .pos-dist__delta-ico {
    background: var(--color-success-soft);
    color: var(--color-success-dark);
}
.pos-dist__delta--down {
    color: var(--color-danger-text);
}
.pos-dist__delta--down .pos-dist__delta-ico {
    background: var(--color-danger-soft);
    color: var(--color-danger-dark);
}

.pos-dist--filterable .pos-dist__cell--filter {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.pos-dist--filterable .pos-dist__cell--filter:hover {
    background: var(--color-primary-bg);
}
.pos-dist--filterable .pos-dist__cell--filter.is-active {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 2px var(--color-primary-border-strong);
}
.pos-dist--filterable .pos-dist__cell--filter.is-active .pos-dist__label,
.pos-dist--filterable .pos-dist__cell--filter.is-active .pos-dist__num {
    color: var(--color-primary-ink);
}
.pos-dist--filterable .pos-dist__cell--filter:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.filters--positions {
    align-items: flex-end;
    position: relative;
    overflow: visible;
}
.filters--positions .region-switch {
    flex: 1 1 100%;
}
.filters-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.filters-toolbar .date-picker {
    min-width: 0;
}
.filters-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.filters--positions .filters-search {
    flex: 0 0 auto;
    width: 240px;
    max-width: 100%;
}
.filters--positions .search-input {
    flex: none;
    width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 0;
}
.icon-btn:hover {
    background: var(--color-bg-hover);
}
.icon-btn--success {
    background: var(--color-success);
    color: #fff;
}
.icon-btn--success:hover {
    background: var(--color-success-dark);
}

.export-menu {
    position: relative;
}
.export-menu__popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    padding: 6px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.export-menu__branch {
    position: relative;
}
.export-menu__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
}
.export-menu__item--parent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.export-menu__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.export-menu__item--parent .icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.export-menu__item:hover,
.export-menu__branch.is-open > .export-menu__item--parent {
    background: #f4f5ff;
}
.export-menu__item strong {
    font-size: 13px;
}
.export-menu__item span {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.export-menu__sub {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    z-index: 41;
    min-width: 260px;
    padding: 6px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ===== ТАБЛИЦА ПОЗИЦИЙ (НЕСКОЛЬКО ДАТ) ===== */
.pos-table {
    font-size: 13px;
}

.pos-table th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.pos-table th,
.pos-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

.pos-table .query-text {
    font-weight: 500;
    white-space: nowrap;
}

.pos-th-date {
    text-align: center;
    min-width: 88px;
}

.pos-th-date__value {
    display: block;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.pos-th-avg {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
}

.pos-cell {
    position: relative;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-right: 22px;
}

.pos-cell--up { background: var(--pos-up-bg); }
.pos-cell--down { background: var(--pos-down-bg); }
.pos-cell--base { background: var(--pos-base-bg); }

.pos-cell__value {
    font-weight: 600;
    color: var(--color-text);
}

.pos-cell__diff {
    display: inline-block;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pos-diff);
    vertical-align: super;
    line-height: 1;
}

.pos-cell--up .pos-cell__diff { color: var(--color-success-dark); }
.pos-cell--down .pos-cell__diff { color: var(--color-danger); }

.pos-cell__info {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
    z-index: 2;
    line-height: 0;
}
.pos-cell__info .icon {
    width: 14px;
    height: 14px;
}
.pos-cell:hover .pos-cell__info,
.pos-cell:focus-within .pos-cell__info,
.pos-cell__info.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.pos-cell__info:hover,
.pos-cell__info.is-open {
    background: var(--color-primary);
    color: #fff;
}
@media (hover: none) {
    .pos-cell__info {
        opacity: 0.72;
        pointer-events: auto;
        transform: none;
    }
}

.pos-info-pop {
    position: fixed;
    z-index: 1600;
    width: min(360px, calc(100vw - 24px));
    padding: 16px 16px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(40, 24, 72, 0.18), 0 2px 8px rgba(40, 24, 72, 0.08);
    border: 1px solid #ece7f6;
    color: var(--color-text);
}
.pos-info-pop[hidden] {
    display: none !important;
}
.pos-info-pop__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pos-info-pop__close:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.pos-info-pop__query {
    font-weight: 650;
    font-size: 14px;
    line-height: 1.35;
    padding-right: 28px;
    margin-bottom: 4px;
}
.pos-info-pop__meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.pos-info-pop__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin: 0 -4px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: #f7f5fc;
    position: relative;
}
.pos-info-pop__row:last-child {
    margin-bottom: 0;
}
a.pos-info-pop__row:hover {
    background: #efeafb;
}
.pos-info-pop__row--muted {
    background: #f6f7fb;
}
.pos-info-pop__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    text-transform: none;
}
.pos-info-pop__label .icon {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}
.pos-info-pop__value {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text);
    padding-right: 22px;
}
.pos-info-pop__url {
    word-break: break-all;
    color: var(--color-primary);
    font-weight: 550;
}
.pos-info-pop__quoted {
    color: var(--color-text-muted);
    font-weight: 500;
}
.pos-info-pop__ws {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.pos-info-pop__ws-item {
    font-variant-numeric: tabular-nums;
}
.pos-info-pop__ws-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 1px;
}
.pos-info-pop__go {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    line-height: 0;
}
.pos-info-pop__go .icon {
    width: 14px;
    height: 14px;
}

.pos-table th.sortable.active {
    background: #e9eef5;
}

/* ===== КАЛЕНДАРЬ ДИАПАЗОНА ДАТ ===== */
.date-picker {
    position: relative;
    z-index: 20;
}

.date-picker__icon {
    display: inline-flex;
    color: var(--color-text-muted);
    line-height: 0;
}

.date-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    font-family: inherit;
    white-space: nowrap;
}
.date-picker__trigger:hover,
.date-picker__trigger[aria-expanded="true"] {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

.date-picker__popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: min(960px, calc(100vw - 40px));
}

.cal {
    background: var(--color-bg-card);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16);
    padding: 16px 18px 14px;
}

.cal-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
}

.cal-preset {
    border: none;
    background: transparent;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-family: inherit;
}
.cal-preset:hover {
    background: var(--color-bg-subtle);
}
.cal-preset.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.cal-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 18px;
}

.cal-months {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: start;
}
.cal-months__track {
    display: grid;
    grid-template-columns: repeat(var(--cal-months, 3), minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.cal-nav {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: var(--color-text-muted);
    height: 36px;
    align-self: start;
    margin-top: 2px;
}
.cal-nav:hover {
    color: var(--color-text);
}

.cal-month-title {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.cal-dow,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-dow span {
    text-align: center;
    font-size: 11px;
    color: var(--color-text-muted);
    padding-bottom: 6px;
}

.cal-day {
    position: relative;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    font-family: inherit;
}
.cal-day.is-out {
    color: #c5c9d1;
}
.cal-day.is-in-range {
    background: #edf4ff;
}
.cal-day.is-selected {
    background: var(--color-blue);
    color: #fff;
    font-weight: 600;
}
.cal-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1px var(--color-blue);
}
.cal-day:hover:not(.is-selected) {
    background: #dbe7fb;
}

.cal-dot {
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateX(-50%);
}
.cal-dot--check {
    background: var(--color-blue);
    display: inline-block;
}
.cal-day.is-selected .cal-dot--check {
    background: #fff;
}

.cal-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    align-items: center;
}
.cal-legend .cal-dot {
    position: static;
    transform: none;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}

.cal-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 8px;
    border-left: 1px solid var(--color-border);
}

.cal-side-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.cal-side-hint {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.cal-side input,
.cal-side select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}

.cal-apply {
    margin-top: auto;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
}

@media (max-width: 992px) {
    .stats-row--movement {
        grid-template-columns: repeat(2, 1fr);
    }
    .pos-dist {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .pos-dist__cell {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }
    .pos-dist__cell:nth-child(3n) {
        border-right: none;
    }
    .pos-dist__cell:nth-child(n+4) {
        border-bottom: none;
    }
    .date-picker__popup {
        min-width: calc(100vw - 24px);
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        top: 12px;
        max-height: calc(100vh - 24px);
        overflow: auto;
    }
    .cal-body {
        grid-template-columns: 1fr;
    }
    .cal-months {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
    }
    .cal-months__track {
        --cal-months: 1;
    }
    .cal-side {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--color-border);
        padding-top: 12px;
    }
}

@media (max-width: 768px) {
    .pos-table .query-text {
        white-space: normal;
        min-width: 140px;
    }
}

/* ===== НАСТРОЙКИ ПРОФИЛЯ ===== */
.settings-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items: start;
}

.settings-card {
    margin: 0;
}

.settings-lead {
    margin: -4px 0 20px;
}

.settings-card .form-group input[type="text"],
.settings-card .form-group input[type="tel"],
.settings-card .form-group input[type="password"],
.settings-card .form-group input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
    transition: border-color var(--transition);
}
.settings-card .form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.settings-card .form-group input:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.settings-card .checkbox-group.settings-notify {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.settings-card .checkbox-group.settings-notify input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.settings-card .checkbox-group.settings-notify label {
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.4;
}

.settings-avatar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.settings-avatar__preview {
    position: relative;
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}
.settings-avatar__camera {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.settings-avatar__camera .icon {
    width: 14px;
    height: 14px;
}

.settings-avatar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.settings-avatar__actions .btn {
    cursor: pointer;
}

.settings-avatar input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.settings-card .password-strength {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.settings-card .password-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== ВЫБОР РЕГИОНОВ ===== */
.region-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--color-primary-border-strong);
    border-radius: 12px;
}

.region-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.region-picker__chips:empty {
    display: none;
}

.region-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px 7px 12px;
    background: var(--color-primary-deep);
    color: #fff;
    border: 1px solid var(--color-primary-chip);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.region-chip .icon {
    width: 14px;
    height: 14px;
    color: #fff;
    stroke: #fff;
}
.region-chip__remove {
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.region-chip__remove:hover {
    background: rgba(255, 255, 255, 0.32);
}
.region-chip__remove .icon {
    width: 12px;
    height: 12px;
}

.region-picker__search {
    position: relative;
}
.region-picker__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    line-height: 0;
    pointer-events: none;
}
.region-picker__input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 2px solid var(--color-primary-border-strong);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    color: #1c1c28;
    background: #fff;
}
.region-picker__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.region-picker__suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(28, 28, 40, 0.22);
    border: 1px solid var(--color-primary-border-strong);
    max-height: 280px;
    overflow: auto;
    padding: 6px;
}

.region-picker__option {
    width: 100%;
    border: none;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    color: #1c1c28;
}
.region-picker__option + .region-picker__option {
    border-top: 1px solid var(--color-border);
}
.region-picker__option:hover,
.region-picker__option.is-active {
    background: var(--color-primary-bg);
    color: #1c1c28;
}
.region-picker__option .icon {
    color: var(--color-primary-deep);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.region-picker__option span {
    flex: 1;
    min-width: 0;
    color: #1c1c28;
}
.region-picker__option strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: #1c1c28;
}
.region-picker__parent {
    display: block;
    font-size: 12px;
    color: #4b5568;
    font-weight: 400;
}
.region-picker__option em {
    font-style: normal;
    font-size: 11px;
    color: var(--color-text-faint);
}
.region-picker__empty {
    padding: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.region-picker__hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.region-picker__hints-label {
    font-size: 12px;
    color: #4b5568;
    margin-right: 2px;
}
.region-picker__hint {
    border: 1px solid var(--color-primary-border-strong);
    background: #fff;
    color: #312e81;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.region-picker__hint:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-deep);
    color: #1c1c28;
}
.region-picker__hint[hidden] {
    display: none;
}

.engine-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.engine-card {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    background: #fff;
}
.engine-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.engine-card.is-checked {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.16);
}
.engine-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.engine-card__text strong {
    font-size: 15px;
}
.engine-card__text em {
    font-style: normal;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35;
}
.engine-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-size: 13px;
}
.engine-mark--yandex { background: #fc3f1d; }
.engine-mark--google { background: #4285f4; }
.region-switch__item .engine-mark,
.pos-th-region .engine-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
}
@media (max-width: 640px) {
    .engine-picker {
        grid-template-columns: 1fr;
    }
}

.region-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.region-switch__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.region-switch__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.region-switch__item.is-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}
.region-switch__item--all {
    border-style: dashed;
}
.region-switch__item--all.is-active {
    border-style: solid;
}

.pos-th-region {
    text-align: center;
    background: #f4f5ff;
    color: #3d4db5;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: none;
    border-left: 1px solid #d9def8;
    white-space: nowrap;
    min-width: 132px;
}
.pos-th-region__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pos-table .pos-th-date--nested {
    background: #fafbff;
}
.pos-th-date--region-start,
.pos-cell--region-start {
    border-left: 1px solid #d9def8;
}

.table-container--pos {
    max-height: calc((100vh - 160px) * 2);
    overflow: auto;
    overscroll-behavior: contain;
}
.table-container--wide .pos-table {
    width: max-content;
    min-width: 100%;
}
.table-scroll-hint {
    padding: 0 4px 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.table-container--pos thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--color-bg-subtle);
}
.table-container--pos thead .pos-th-region {
    background: #f4f5ff;
}
.table-container--pos thead .pos-th-date--nested {
    background: #fafbff;
}
.table-container--pos thead tr:nth-child(2) th {
    top: var(--pos-head-row1, 44px);
}
.table-container--pos thead tr:last-child th {
    box-shadow: inset 0 -1px 0 #e8eaf4;
}
.table-container--pos .col-num,
.table-container--pos tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 44px;
    width: 44px;
    background: var(--color-bg-card);
    box-shadow: 1px 0 0 #e8eaf4;
}
.table-container--pos tbody tr:hover > td:first-child {
    box-shadow:
        inset 3px 0 0 0 var(--color-primary),
        inset 0 0 0 9999px var(--table-row-hover-tint),
        1px 0 0 #e8eaf4;
}
.table-container--pos thead .col-num {
    z-index: 6;
    background: var(--color-bg-subtle);
}
.table-container--pos .pos-th-query,
.table-container--pos tbody .query-text {
    position: sticky;
    left: 44px;
    z-index: 3;
    min-width: 180px;
    background: var(--color-bg-card);
    box-shadow: 10px 0 10px -8px rgba(30, 34, 80, 0.18);
}
.table-container--pos tbody tr:hover > .query-text {
    box-shadow:
        inset 0 0 0 9999px var(--table-row-hover-tint),
        10px 0 10px -8px rgba(30, 34, 80, 0.18);
}
.table-container--pos thead .pos-th-query {
    z-index: 6;
    background: var(--color-bg-subtle);
}
.table-container--pos thead .pos-th-query.active {
    background: #e9eef5;
}
.table-container--ws .pos-th-query,
.table-container--ws tbody .query-text {
    box-shadow: none;
}
.table-container--ws tbody tr:hover > .query-text {
    box-shadow: inset 0 0 0 9999px var(--table-row-hover-tint);
}
.table-container--ws .pos-th-ws,
.table-container--ws tbody .pos-ws {
    position: sticky;
    left: 224px;
    z-index: 3;
    min-width: 92px;
    width: 92px;
    background: var(--color-bg-card);
    text-align: right;
    box-shadow: 10px 0 10px -8px rgba(30, 34, 80, 0.18);
}
.table-container--ws tbody tr:hover > .pos-ws {
    box-shadow:
        inset 0 0 0 9999px var(--table-row-hover-tint),
        10px 0 10px -8px rgba(30, 34, 80, 0.18);
}
.table-container--ws thead .pos-th-ws {
    z-index: 6;
    background: var(--color-bg-subtle);
    text-align: right;
    cursor: pointer;
}
.table-container--ws thead .pos-th-ws.active {
    background: #e9eef5;
}
.pos-th-ws__hint {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.2;
    margin-top: 2px;
}
.pos-ws__freq {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pos-ws__quoted {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.pos-ws__empty {
    color: var(--color-text-muted);
}
.pos-ws.is-sort-freq .pos-ws__freq {
    color: #5a67d8;
}
.pos-ws.is-sort-quoted .pos-ws__quoted {
    color: #5a67d8;
    font-weight: 700;
}
.table-container--pos::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.table-container--pos::-webkit-scrollbar-thumb {
    background: #c5c9e6;
    border-radius: 8px;
}

@media (hover: none) {
    .project-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

@media (max-width: 768px) {
    .header-right {
        gap: 8px;
    }
    .user-email {
        max-width: 120px;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .action-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 12px 0;
    }
    .action-bar .btn,
    .action-bar .btn-success,
    .action-bar span.btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        box-sizing: border-box;
    }
    .action-bar > :first-child {
        grid-column: 1 / -1;
    }

    .filters.filters--positions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filters--positions .region-switch {
        flex: 0 0 auto;
        width: 100%;
    }
    .region-switch__item {
        padding: 6px 10px;
        font-size: 12px;
    }
    .filters-toolbar {
        flex-wrap: wrap;
        width: 100%;
    }
    .filters-toolbar .date-picker,
    .filters-toolbar .date-picker__trigger {
        width: 100%;
        justify-content: center;
    }
    .date-picker__trigger {
        white-space: normal;
        text-align: center;
    }
    .filters-toolbar__actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .filters--positions .filters-search {
        width: 100%;
        max-width: none;
    }
    .filters--positions .search-input {
        width: 100%;
        min-width: 0;
        flex: none;
        height: 38px;
    }
    .filters--positions .icon-btn[title="Настройки проекта"] {
        display: none;
    }

    .export-menu__popup {
        right: 0;
        left: auto;
        min-width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
    .export-menu__sub {
        position: static;
        right: auto;
        min-width: 0;
        margin: 0 0 6px;
        box-shadow: none;
        border: 0;
        background: #f7f5fc;
    }

    .project-info {
        align-items: flex-start;
    }
    .info-item {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .chart-controls .btn {
        width: 100%;
        justify-content: center;
    }

    .table-container--pos {
        max-height: calc((100vh - 120px) * 2);
        -webkit-overflow-scrolling: touch;
    }
    .table-container--pos .col-num,
    .table-container--pos tbody td:first-child {
        min-width: 32px;
        width: 32px;
    }
    /* Sticky-фраза не должна занимать весь экран — иначе колонки позиций не видны. */
    .table-container--pos .pos-th-query,
    .table-container--pos tbody .query-text {
        left: 32px;
        min-width: 96px;
        max-width: min(42vw, 150px);
        width: min(42vw, 150px);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.3;
    }
    .table-container--pos .pos-th-date,
    .table-container--pos .pos-th-region,
    .table-container--pos .pos-cell {
        min-width: 68px;
    }
    .table-container--ws .pos-th-ws,
    .table-container--ws tbody .pos-ws {
        left: calc(32px + min(42vw, 150px));
        min-width: 64px;
        width: 64px;
        max-width: 72px;
    }

    .confirm-dialog {
        padding: 22px 16px 16px;
        max-width: 100%;
    }
    .confirm-dialog__actions {
        flex-direction: column;
    }
    .confirm-dialog__actions .btn {
        width: 100%;
        min-width: 0;
    }

    .settings-avatar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .settings-avatar__preview {
        width: 96px;
        height: 96px;
    }
    .settings-avatar__actions {
        width: 100%;
    }
    .add-form {
        flex-direction: column;
        align-items: stretch;
    }
    .add-form .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .user-email {
        display: none;
    }
    .user-info {
        padding: 4px;
        gap: 0;
    }
    .header-right {
        gap: 6px;
    }
    .stats-row--movement {
        grid-template-columns: 1fr 1fr;
    }
    .pos-dist {
        grid-template-columns: repeat(2, 1fr);
    }
    .pos-dist__cell:nth-child(3n) {
        border-right: 1px solid var(--color-border);
    }
    .pos-dist__cell:nth-child(2n) {
        border-right: none;
    }
    .pos-dist__cell:nth-child(n+4) {
        border-bottom: 1px solid var(--color-border);
    }
    .pos-dist__cell:nth-child(n+5) {
        border-bottom: none;
    }
    .pos-dist__value {
        font-size: 24px;
    }
    .action-bar {
        grid-template-columns: 1fr;
    }
    .action-bar > :first-child {
        grid-column: auto;
    }
    .region-switch__item .engine-mark {
        width: 18px;
        height: 18px;
        font-size: 10px;
        border-radius: 6px;
    }
}

/* ===== БЫСТРАЯ ПРОВЕРКА ===== */
.quick-check-lead {
    margin: -6px 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.quick-check-form .form-group textarea {
    min-height: 140px;
}

.quick-check-summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.quick-check-form.is-collapsed .quick-check-summary {
    display: flex;
}
.quick-check-form.is-collapsed .quick-check-form__fields {
    display: none;
}
.quick-check-summary__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.quick-check-summary__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.quick-check-summary__meta {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.35;
    word-break: break-word;
}

.quick-progress {
    display: none;
    margin-top: 12px;
}
.quick-progress.is-on {
    display: block;
}
.quick-progress__track {
    height: 6px;
    background: var(--color-bg-hover);
    border-radius: 99px;
    overflow: hidden;
}
.quick-progress__fill {
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    transition: width 0.2s ease;
}
.quick-progress__label {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}
.quick-progress__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.quick-progress__head .quick-progress__label {
    margin-top: 0;
    text-align: left;
}
.quick-progress__spinner {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-primary, #667eea);
    line-height: 0;
}
.quick-progress__spinner .icon {
    width: 16px;
    height: 16px;
}

.quick-check-results {
    margin-top: 16px;
    scroll-margin-top: 16px;
}
.quick-check-results[hidden] {
    display: none !important;
}

.quick-check-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.quick-check-results__heading {
    margin: 0;
    margin-right: auto;
    font-size: 18px;
    font-weight: 650;
    color: var(--color-text);
}
.quick-check-toolbar .search-input {
    width: 220px;
    max-width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.quick-check-results .pos-th-date {
    min-width: 140px;
}
.quick-check-results .pos-th-region__name {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.counter.is-over {
    color: var(--color-danger);
    font-weight: 600;
}

@media (max-width: 640px) {
    .quick-check-toolbar .search-input {
        width: 100%;
    }
    .quick-check-results__heading {
        width: 100%;
        margin-right: 0;
    }
}

/* ===== АДМИНКА ===== */
.admin-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.admin-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: visible;
}
.admin-card.is-loading .stat-number {
    min-height: 1.2em;
    display: inline-flex;
    align-items: center;
}
.admin-card__meta .admin-load-spin,
.stat-number .admin-load-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-primary-border, #ddd6fe);
    border-top-color: var(--color-primary, #667eea);
    border-radius: 50%;
    vertical-align: -2px;
    animation: admin-spin 0.7s linear infinite;
}
.admin-card__meta .admin-load-spin {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}
@keyframes admin-spin {
    to { transform: rotate(360deg); }
}
.admin-card__head {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}
.admin-card__head::-webkit-details-marker {
    display: none;
}
.admin-card__head::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 8px;
}
.admin-card[open] > .admin-card__head::after {
    transform: rotate(-135deg);
    margin-top: 6px;
}
.admin-card__head span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.admin-card__meta {
    margin-left: auto;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-muted);
}
.admin-card__body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}
.admin-card__body .stats-row {
    margin-bottom: 12px;
}
.admin-subtitle {
    font-size: 14px;
    margin: 8px 0 10px;
}
.admin-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.admin-check input {
    width: 16px;
    height: 16px;
}
.admin-check.is-locked {
    color: var(--color-text-muted);
    cursor: default;
}
.admin-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-top: 8px;
}
.admin-rates__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-rates__item input {
    width: 88px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}
.admin-legal {
    display: block;
    margin-bottom: 12px;
}
.admin-legal-form {
    display: grid;
    gap: 12px;
}
.admin-site-form {
    display: grid;
    gap: 12px;
}
.admin-site-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .admin-site-form__row {
        grid-template-columns: 1fr;
    }
}
.admin-legal-form__inn input {
    width: 200px;
    max-width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}
.admin-legal-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-legal textarea,
.admin-legal input {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
}
.admin-legal textarea {
    min-height: 160px;
    resize: vertical;
}
.admin-keys {
    display: grid;
    gap: 16px;
}
.admin-keys__form {
    display: grid;
    gap: 16px;
}
.admin-keys__block {
    margin: 0;
}
.admin-keys__block > .admin-card__body {
    display: grid;
    gap: 12px;
}
.admin-keys__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
.admin-keys__status {
    margin: 0;
    flex: 1 1 180px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.admin-keys__bar .btn {
    margin-left: auto;
}
.admin-keys__grid {
    display: grid;
    gap: 10px 12px;
}
@media (min-width: 720px) {
    .admin-keys__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .admin-keys__grid .admin-keys__span2 {
        grid-column: span 2;
    }
    .admin-keys__grid .admin-keys__full {
        grid-column: 1 / -1;
    }
}
.admin-keys__grid label,
.admin-keys__refresh label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-keys__lab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-keys input[type="text"],
.admin-keys input[type="password"],
.admin-keys input[type="email"],
.admin-keys input[type="number"],
.admin-keys__grid input[type="text"],
.admin-keys__grid input[type="password"],
.admin-keys__grid input[type="email"],
.admin-keys__grid input[type="date"],
.admin-keys__grid input[type="number"],
.admin-keys__refresh input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    font-family: inherit;
}
.admin-keys__grid textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 160px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    font-family: inherit;
    resize: vertical;
}
.admin-keys__grid input[type="date"] {
    padding: 0 10px;
}
.admin-keys__opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.admin-keys__opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-keys .admin-check {
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
}
.admin-keys__return {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}
.admin-keys__return code {
    font-size: 11px;
}
.admin-keys__backup-last {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
}
.admin-keys__backup-last a {
    font-weight: 600;
}
.admin-keys__refresh {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.admin-keys__refresh label {
    flex: 1 1 min(280px, 100%);
    min-width: 0;
    margin: 0;
}
.admin-keys__refresh .btn {
    flex: 0 0 auto;
    height: 38px;
    margin: 0;
    white-space: nowrap;
}
.admin-site-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-site-form > .btn,
.admin-site-form__actions .btn {
    width: auto;
    justify-self: start;
}
.admin-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 168px;
    flex-shrink: 0;
}
.admin-mode__opt {
    position: relative;
    margin: 0;
}
.admin-mode__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.admin-mode__opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--color-primary-border);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary-deep);
    cursor: pointer;
}
.admin-mode__opt input:checked + span {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
}
.admin-packs-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.admin-packs-page__block {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px 18px;
}
.admin-packs-page__block .admin-subtitle {
    margin-top: 0;
}
.admin-packs-page__block .help-text {
    margin-bottom: 12px;
}
.admin-empty {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}
.admin-rates--card {
    margin-top: 0;
}
.admin-packs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-pack {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-subtle);
}
.admin-pack__form {
    min-width: 0;
}
.admin-pack__fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
}
.admin-pack__field--wide {
    grid-column: 1 / -1;
}
.admin-pack__fields .admin-pack__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 0;
}
.admin-pack__fields .admin-pack__field.admin-check {
    flex-direction: row;
    align-items: center;
    align-self: center;
    min-height: 36px;
    font-size: 13px;
    color: var(--color-text);
}
.admin-pack__fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-pack__fields input[type="text"],
.admin-pack__fields input[type="number"] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    font-weight: 600;
    color: var(--color-text);
}
.admin-pack__fields input[type="file"] {
    font-size: 12px;
    font-weight: 400;
}
.admin-pack__actions {
    margin-top: 10px;
}
.admin-pack__delete {
    padding-top: 4px;
}
.admin-pack--new {
    margin-top: 12px;
    background: var(--color-bg-card);
    border-style: dashed;
}
@media (max-width: 720px) {
    .admin-pack__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.admin-users td,
.admin-users th {
    text-align: left;
}
.admin-delete-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-danger-btn);
    color: var(--color-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.admin-delete-btn:hover {
    background: var(--color-danger);
    color: #fff;
}
.admin-delete-btn .icon {
    width: 15px;
    height: 15px;
}
.admin-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.admin-delete-locked {
    color: var(--color-text-muted);
}

.balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary-soft);
    color: var(--color-primary-tab);
    padding: 6px 12px 6px 10px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid var(--color-primary-border);
}
.balance-chip:hover,
.balance-chip.is-active {
    background: var(--color-primary-border);
    color: var(--color-primary-tab);
    border-color: var(--color-primary-border-strong);
}
.balance-chip .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.balance-chip__value {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.balance-hero {
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, #fff 58%);
    border: 1px solid var(--color-primary-border-light);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
}
.balance-hero__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.balance-hero__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(102, 126, 234, 0.28);
}
.balance-hero__icon .icon {
    width: 24px;
    height: 24px;
}
.balance-hero__label {
    font-size: 13px;
    color: var(--color-text-muted);
}
.balance-hero__value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 2px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.balance-hero__unit {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-primary-accent);
}
.balance-hero__history {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-primary-border);
    color: var(--color-primary-deep);
    font-weight: 650;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(91, 75, 196, 0.06);
}
.balance-hero__history:hover {
    border-color: var(--color-primary-border-strong);
    background: var(--color-primary-bg);
}
.balance-hero__history .icon {
    width: 16px;
    height: 16px;
}
.balance-hero .balance-test-note {
    flex: 1 0 100%;
    margin-top: 0;
}
.balance-test-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #fff7ed;
    color: #9a3412;
    border-radius: var(--radius-md);
    font-size: 13px;
}
.pack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}
.pack-grid__offer {
    margin: 0 0 28px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.pack-grid__offer a {
    color: inherit;
}
.pack-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 10px 10px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pack-card__art {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    aspect-ratio: 1 / 1.05;
    background: var(--color-primary-soft);
}
.pack-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pack-card__art--num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 140px;
    color: #fff;
    text-align: center;
    padding: 18px 8px;
    background: linear-gradient(160deg, #8b9cf7 0%, #667eea 100%);
}
.pack-card:nth-child(5n+1) .pack-card__art--num {
    background: linear-gradient(160deg, #a5b4fc 0%, #818cf8 45%, #667eea 100%);
}
.pack-card:nth-child(5n+2) .pack-card__art--num {
    background: linear-gradient(160deg, #8b7cf6 0%, #667eea 50%, #6d5aed 100%);
}
.pack-card:nth-child(5n+3) .pack-card__art--num {
    background: linear-gradient(165deg, #7c6ee8 0%, #667eea 40%, #5b4bc4 100%);
}
.pack-card:nth-child(5n+4) .pack-card__art--num {
    background: linear-gradient(165deg, #6d5ae8 0%, #764ba2 48%, #ea7a4b 100%);
}
.pack-card:nth-child(5n+5) .pack-card__art--num {
    background: linear-gradient(165deg, #5b21b6 0%, #764ba2 42%, #f97316 100%);
}
.pack-card__num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pack-card__num-label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.92;
}
.pack-card__art--sm {
    width: 88px;
    height: 72px;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    flex-shrink: 0;
}
.pack-card__art--sm .pack-card__num {
    font-size: 15px;
}
.pack-card__art--sm .pack-card__num-label {
    font-size: 10px;
    margin-top: 2px;
}
.pack-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0 6px;
    margin: 0;
}
.pack-card__points {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 0 6px;
}
.pack-card__price {
    font-size: 26px;
    font-weight: 800;
    margin: 4px 0 2px;
    padding: 0 6px;
    color: var(--color-primary);
    line-height: 1.15;
}
.pack-card__meta {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0 6px;
    margin: 0 0 12px;
}
.pack-pay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding: 0 6px;
}
.pack-pay__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.pack-pay__btn .icon {
    width: 14px;
    height: 14px;
}
.pack-pay__btn .sbp-logo {
    width: 16px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.pack-pay__btn--sbp {
    background: #fff;
    color: #1d1346;
    border: 1px solid #d8d6e5;
    font-weight: 700;
    box-shadow: none;
}
.pack-pay__btn--sbp:hover {
    background: #f7f6fb;
    border-color: #5b57a2;
    color: #1d1346;
}
.pack-pay__btn--card {
    background: #fff;
    color: var(--color-primary-deep);
    border: 1px solid var(--color-primary-border);
}
.pack-pay__btn--card:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-border-strong);
}
.pack-card__offer {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}
.pack-card__offer a {
    color: inherit;
}
@media (max-width: 1100px) {
    .pack-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    .pack-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
    }
}

/* Страница баланса — 8 пакетов, ровная сетка */
.balance-page .header {
    margin-bottom: 14px;
}
.balance-page .balance-hero {
    padding: 14px 18px;
    margin-bottom: 14px;
}
.balance-page .balance-hero__value {
    font-size: 28px;
}
.balance-page__title {
    margin-bottom: 10px;
}
.balance-page .pack-grid--balance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
    align-items: stretch;
}
.balance-page .pack-card--balance {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.balance-page .pack-card--balance.is-hit {
    border-color: var(--color-primary-border-strong);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.16);
}
.balance-page .pack-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary-deep);
    background: var(--color-primary-soft);
    border-radius: 999px;
    padding: 3px 8px;
}
.balance-page .pack-card__head {
    height: 87px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff;
    text-align: center;
    padding: 12px 15px;
    flex-shrink: 0;
}
.balance-page .pack-card__points-big {
    font-size: 33px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.balance-page .pack-card__points-label {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.94;
}
.balance-page .pack-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    padding: 10px 12px 12px;
}
.balance-page .pack-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.balance-page .pack-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0;
    min-width: 0;
}
.balance-page .pack-card__price {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.balance-page .pack-card__meta {
    font-size: 12px;
    margin: 0;
    padding: 0;
}
.balance-page .pack-pay {
    margin-top: auto;
    padding: 8px 0 0;
    gap: 8px;
}
.balance-page .pack-pay__btn {
    height: 36px;
    font-size: 12px;
    border-radius: 9px;
}
.balance-page .pack-grid__offer--balance {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.45;
}
.balance-page .pack-card--tone-1 .pack-card__head {
    background: linear-gradient(160deg, #a5b4fc 0%, #818cf8 45%, #667eea 100%);
}
.balance-page .pack-card--tone-2 .pack-card__head {
    background: linear-gradient(160deg, #8b7cf6 0%, #667eea 50%, #6d5aed 100%);
}
.balance-page .pack-card--tone-3 .pack-card__head {
    background: linear-gradient(165deg, #7c6ee8 0%, #667eea 40%, #5b4bc4 100%);
}
.balance-page .pack-card--tone-4 .pack-card__head {
    background: linear-gradient(165deg, #6d5ae8 0%, #764ba2 48%, #ea7a4b 100%);
}
.balance-page .pack-card--tone-5 .pack-card__head {
    background: linear-gradient(165deg, #5b21b6 0%, #764ba2 42%, #f97316 100%);
}
.balance-page .pack-card--tone-6 .pack-card__head {
    background: linear-gradient(160deg, #93c5fd 0%, #667eea 55%, #6366f1 100%);
}
.balance-page .pack-card--tone-7 .pack-card__head {
    background: linear-gradient(160deg, #7c3aed 0%, #667eea 50%, #4f46e5 100%);
}
.balance-page .pack-card--tone-8 .pack-card__head {
    background: linear-gradient(165deg, #6366f1 0%, #764ba2 45%, #db2777 100%);
}
@media (max-width: 1100px) {
    .balance-page .pack-grid--balance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .balance-page .pack-grid--balance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    .balance-page .pack-grid--balance {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

.pay-test-card {
    max-width: 420px;
    margin: 24px auto;
}

.share-modal {
    max-width: 980px;
    padding-top: 28px;
}
.share-modal h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 48px;
}
.share-modal__close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.share-modal__close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.share-modal__close .icon {
    width: 18px;
    height: 18px;
}
.share-modal__lead {
    color: var(--color-text-light);
    font-size: 14px;
    margin: -8px 0 18px;
}
.share-calendar {
    margin-bottom: 16px;
}
.share-calendar .cal {
    box-shadow: none;
    border: 1px solid var(--color-border);
    padding: 14px;
}
.share-dates {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.share-dates label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.share-dates input[type="date"] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg-card);
}
.share-targets {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}
.share-engine {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--color-bg-subtle);
}
.share-engine__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}
.share-engine__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.share-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    font-size: 13px;
    cursor: pointer;
}
.share-loc:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.share-modal__actions {
    margin-bottom: 16px;
}
.share-result {
    margin: 0 0 18px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--color-success-soft);
    border: 1px solid var(--color-success-border);
}
.share-result label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success-text);
    margin-bottom: 8px;
}
.share-url-row {
    display: flex;
    gap: 8px;
}
.share-url-row input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    font: inherit;
}
.share-links h3 {
    font-size: 15px;
    margin: 0 0 10px;
}
.share-links__empty {
    color: var(--color-text-muted);
    font-size: 13px;
}
.share-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}
.share-link-row__info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.share-link-row__info a {
    color: var(--color-primary);
    font-weight: 600;
    word-break: break-all;
}
.share-link-row__info span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.share-link-row__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.share-guest .header-right {
    gap: 10px;
}
.demo-guest-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(76, 61, 139, 0.18);
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
}
.demo-guest-banner__text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
}
.demo-guest-banner__text .icon {
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .share-url-row,
    .share-dates {
        flex-direction: column;
    }
    .share-url-row .btn,
    .share-dates input[type="date"] {
        width: 100%;
    }
}

body {
    display: flex;
    flex-direction: column;
}
.container {
    flex: 1 0 auto;
    width: 100%;
}
body.auth-page {
    position: relative;
    padding-bottom: 20px;
}
body.auth-page .site-footer,
body.auth-page #legalModal,
body.auth-page #feedbackModal {
    display: none !important;
}
.site-footer {
    flex-shrink: 0;
    margin-top: 40px;
    padding: 18px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer__copy,
.site-footer__version,
.site-footer__link {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.site-footer__link {
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.site-footer__link:hover {
    color: var(--color-text);
    text-decoration: underline;
}
.site-footer__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.site-footer__report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.legal-modal {
    max-width: 440px;
    position: relative;
}
.legal-modal h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}
.legal-requisites {
    margin: 0;
    padding: 14px 16px;
    background: var(--color-bg-subtle);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.legal {
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 8px 0 40px;
    font-size: 15px;
    line-height: 1.65;
}
.legal h1 {
    font-size: 26px;
    margin: 0 0 16px;
}
.legal h2 {
    font-size: 18px;
    margin: 28px 0 10px;
}
.legal p,
.legal ul {
    margin: 0 0 12px;
}
.legal__meta {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}
.legal .legal-requisites {
    margin: 0 0 12px;
}
.feedback-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
body.feedback-open {
    overflow: hidden;
}
.feedback-modal {
    max-width: 480px;
    padding-top: 28px;
}
.feedback-modal h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 48px;
}
.feedback-modal .form-group input[type="email"],
.feedback-modal .form-group input[type="tel"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg-card);
}
.feedback-modal .form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.feedback-modal textarea {
    min-height: 120px;
    resize: vertical;
}
.feedback-modal .form-group {
    position: relative;
}
.feedback-modal input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.feedback-shot {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}
.feedback-shot .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.feedback-shot-preview {
    margin: 0 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-subtle);
}
.feedback-shot-preview img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin: 0 auto;
}
.admin-feedback__shot {
    display: inline-block;
    width: 56px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    vertical-align: middle;
    cursor: zoom-in;
}
.admin-feedback__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.shot-lightbox-open {
    overflow: hidden;
}
.shot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 24px;
    background: rgba(18, 14, 32, 0.78);
    backdrop-filter: blur(8px);
}
.shot-lightbox.is-open {
    display: flex;
}
.shot-lightbox__img {
    max-width: min(96vw, 1200px);
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    object-fit: contain;
    background: #fff;
}
.shot-lightbox__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.shot-lightbox__close:hover {
    background: #fff;
}
.feedback-modal .share-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 8px 0 0;
}
.admin-feedback tr.is-unread td {
    background: #f3f5fd;
}
.admin-feedback tr.is-unread {
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.admin-feedback__comment {
    max-width: 360px;
    font-weight: 400;
}
.admin-feedback__actions {
    white-space: nowrap;
}
.admin-feedback__actions .btn {
    margin-right: 6px;
}
@media print {
    .site-footer,
    #feedbackModal,
    #legalModal {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .site-footer__inner {
        align-items: flex-start;
    }
    .site-footer__report {
        width: 100%;
        justify-content: center;
    }
    .admin-pack {
        grid-template-columns: 72px 1fr;
    }
    .admin-pack__delete {
        grid-column: 2;
        justify-self: start;
        padding-top: 0;
    }
    .pack-card__art--sm {
        width: 72px;
        height: 60px;
    }
}

/* ===== АНАЛИТИКА ПОЗИЦИЙ ===== */
.filters--analytics {
    align-items: center;
}
.filters--analytics .analytics-toolbar {
    margin-left: auto;
}
.analytics-kpis .stat-number {
    font-size: 28px;
}
.analytics-note {
    margin: -8px 0 20px;
}
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.analytics-grid .chart-container {
    margin-bottom: 0;
}
.chart-wrapper-md {
    height: 320px;
}
.analytics-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.analytics-bar {
    display: grid;
    grid-template-columns: 110px 1fr 44px 56px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.analytics-bar__label {
    color: var(--color-text-muted);
}
.analytics-bar__track {
    height: 10px;
    background: #eceaf6;
    border-radius: 999px;
    overflow: hidden;
}
.analytics-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.analytics-zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: -8px 0 16px;
    padding: 10px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--color-text-muted);
}
.analytics-zone-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.analytics-zone-legend__item i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.analytics-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.analytics-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    padding: 10px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.analytics-chip strong {
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-text);
}
.analytics-chip span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.analytics-chip__label {
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.analytics-chip--good {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.analytics-chip--good strong { color: #15803d; }
.analytics-chip--risk {
    border-color: #fecaca;
    background: #fef2f2;
}
.analytics-chip--risk strong { color: #b91c1c; }
.analytics-chip--neutral {
    border-color: #fde68a;
    background: #fffbeb;
}
.analytics-chip--neutral strong { color: #a16207; }
.filters--analytics .analytics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.filters--analytics .date-picker {
    position: relative;
}
.analytics-bar__n {
    text-align: right;
    font-weight: 600;
}
.analytics-bar__pct {
    color: var(--color-text-muted);
    text-align: right;
}
.analytics-movers td,
.analytics-movers th {
    white-space: nowrap;
}
.analytics-movers .query-text {
    white-space: normal;
    max-width: 280px;
}
.analytics-delta--up {
    color: var(--color-success);
    font-weight: 700;
}
.analytics-delta--down {
    color: var(--color-danger);
    font-weight: 700;
}
.stat-card.declined .stat-number {
    color: var(--color-danger);
}
@media (max-width: 900px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    .analytics-bar {
        grid-template-columns: 90px 1fr 36px 48px;
        gap: 6px;
        font-size: 12px;
    }
}

.btn-lg {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
}
.pay-sheet {
    max-width: 420px;
    margin: 28px auto 40px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-primary-border-light);
    border-radius: 20px;
    padding: 22px 22px 20px;
    box-shadow: 0 16px 40px rgba(91, 75, 196, 0.08);
    text-align: left;
}
.pay-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.pay-sheet__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    flex-shrink: 0;
}
.pay-sheet__icon .icon {
    width: 22px;
    height: 22px;
}
.pay-sheet__icon--ok {
    background: var(--gradient-success);
    color: #fff;
}
.pay-sheet__icon--fail {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
}
.pay-sheet__icon--wait {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.pay-sheet__kicker {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.pay-sheet__title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}
.pay-sheet__amount {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--color-text);
    margin: 0 0 6px;
}
.pay-sheet__lead {
    color: var(--color-text-secondary);
    margin: 0 0 16px;
    font-size: 14px;
}
.pay-sheet__rows {
    list-style: none;
    margin: 0 0 12px;
    padding: 4px 0;
    border-top: 1px solid #eeeaf8;
    border-bottom: 1px solid #eeeaf8;
}
.pay-sheet__rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
}
.pay-sheet__rows li + li {
    border-top: 1px dashed #eeeaf8;
}
.pay-sheet__rows span {
    color: var(--color-text-muted);
    font-size: 13px;
}
.pay-sheet__rows strong {
    font-weight: 700;
}
.pay-sheet__hint {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.pay-sheet__balance {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.pay-sheet__balance span {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary-accent);
}
.pay-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pay-sheet__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(102, 126, 234, 0.28);
}
.pay-sheet__cta:hover {
    filter: brightness(1.04);
    color: #fff;
}
.pay-sheet__cta--sbp {
    background: #1d1346;
    box-shadow: 0 10px 22px rgba(29, 19, 70, 0.28);
}
.pay-sheet__cta--sbp:hover {
    background: #2a1d5c;
    filter: none;
    color: #fff;
}
.pay-sheet__cta--sbp .sbp-logo {
    width: 18px;
    height: 22px;
    object-fit: contain;
}
.pay-sheet__method {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pay-sheet__method .sbp-logo {
    width: 14px;
    height: 17px;
    object-fit: contain;
}
.pay-sheet__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    margin-top: 4px;
    color: var(--color-primary-muted);
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.pay-sheet__back:hover {
    color: var(--color-primary-deep);
}
.pay-sheet--ok .pay-sheet__title { color: var(--color-success-dark); }
.pay-sheet--fail .pay-sheet__title { color: var(--color-danger); }

.ops-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.ops-hero .balance-hero__value { margin-bottom: 0; }
.ops-credit {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.ops-credit label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.ops-credit input {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.ops-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-end;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.ops-filters__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
    min-width: 140px;
}
.ops-filters__item--grow {
    flex: 1 1 200px;
}
.ops-filters__item input,
.ops-filters__item select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    color: var(--color-text);
    background: #fff;
}
.ops-filters__actions {
    display: flex;
    gap: 8px;
}
.ops-count {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 10px;
}
.ops-more {
    margin: 8px 0 28px;
}
.ops-more a {
    color: var(--color-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ops-back {
    margin: 0 0 12px;
}
.ops-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
}
.ops-table .ops-delta { font-variant-numeric: tabular-nums; font-weight: 700; }
.ops-table tr.is-in .ops-delta { color: var(--color-success-dark); }
.ops-table tr.is-out .ops-delta { color: var(--color-danger); }
.ops-table tr.is-pay td { color: var(--color-text-muted); }

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 14px 0 4px;
}
.pager__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.pager__btn--on,
.pager__btn:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border-strong);
    color: var(--color-primary-tab);
}
.pager__gap { color: var(--color-text-muted); padding: 0 4px; }

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.admin-tabs__item {
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 13px;
}
.admin-tabs__item.is-on,
.admin-tabs__item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border-strong);
    color: var(--color-primary-tab);
}
.admin-jump-wrap {
    padding: 16px 18px;
}
.admin-jump-wrap .stats-row {
    margin-bottom: 0;
}
.admin-jump {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-jump__card {
    display: block;
    padding: 14px 12px;
    text-align: center;
    color: inherit;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.admin-jump__card:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-border-strong);
    transform: translateY(-1px);
}
.admin-jump__card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.admin-jump__card .stat-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.admin-jump__card .stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.admin-jump__card--alert .stat-number {
    color: var(--color-danger);
}
.admin-user-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.balance-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-title h1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--color-primary);
    cursor: help;
}
.tip[hidden] {
    display: none !important;
}
.tip__mark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tip__mark .icon {
    width: 12px;
    height: 12px;
}
.tip__box {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    background: #2d2640;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(28, 22, 48, 0.28);
    z-index: 80;
    text-align: left;
    white-space: normal;
}
.tip__box::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #2d2640;
}
.tip:hover .tip__box,
.tip:focus-within .tip__box {
    display: block;
}
.confirm-dialog {
    overflow: visible;
}
.confirm-dialog__tip .tip__box {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 260px;
    max-width: min(260px, calc(100vw - 48px));
    white-space: normal;
    font-variant-numeric: tabular-nums;
}
.confirm-dialog__tip .tip__box::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: #2d2640;
}
@media (max-width: 800px) {
    .tip__box {
        left: auto;
        right: 0;
        transform: none;
    }
    .tip__box::before {
        left: auto;
        right: 8px;
        transform: none;
    }
}
@media (max-width: 800px) {
    .admin-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-hero { flex-direction: column; align-items: stretch; }
    .pay-sheet { margin: 16px 0 32px; padding: 18px 16px; }
    .balance-hero { align-items: stretch; }
    .balance-hero__history { width: 100%; justify-content: center; }
    .admin-keys__bar .btn { margin-left: 0; width: 100%; justify-content: center; }
    .admin-keys__return { margin-left: 0; }
}

.scroll-top {
    position: fixed;
    right: 24px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483000;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 10px 28px rgba(76, 29, 149, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background 0.15s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px) scale(1.04);
}

.scroll-top:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.scroll-top__icon {
    display: block;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .scroll-top {
        right: auto;
        left: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
    }

    .scroll-top__icon {
        width: 18px;
        height: 18px;
    }

    .cookie-consent {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== Cookie consent ===== */
.cookie-consent {
    position: fixed;
    z-index: 2147482000;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: 520px;
    margin: 0 auto;
}

.cookie-consent__inner {
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.cookie-consent__text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text);
}

.cookie-consent__text a {
    color: var(--color-primary);
    font-weight: 600;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cookie-consent__btn {
    flex: 1 1 140px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.cookie-consent__btn--primary {
    background: var(--gradient-primary);
    color: #fff;
}

.cookie-consent__btn--ghost {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}

.cookie-consent__btn:hover {
    opacity: 0.95;
}

body.has-cookie-consent {
    padding-bottom: calc(var(--cookie-consent-offset, 140px) + env(safe-area-inset-bottom, 0px));
}

body.auth-page.has-cookie-consent {
    padding-bottom: calc(var(--cookie-consent-offset, 140px) + 20px + env(safe-area-inset-bottom, 0px));
}


/* ===== Инструменты ===== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin: 8px 0 28px;
}
.tool-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg, 14px);
    background: var(--color-bg-card, #fff);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition, .15s ease), box-shadow var(--transition, .15s ease);
}
.tool-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(28, 22, 51, .12));
    color: inherit;
}
.tool-tile__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--color-primary-bg, #f7f5ff);
    overflow: hidden;
}
.tool-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tool-tile__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}
.tool-tile__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}
.tool-tile__desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted, #6b7280);
}
.yu-admin-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== Апдейты Яндекса (календарь) ===== */
.yu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}
.yu-toolbar__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}
.yu-lead { margin-bottom: 10px; }
.yu-error { color: var(--color-danger-text, #721c24); }
.yu-admin-actions { margin: 0 0 14px; }
.yu-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.yu-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yu-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.yu-swatch--calm { background: #e8f5e9; border: 1px solid #c8e6c9; }
.yu-swatch--low { background: #eef2ff; border: 1px solid #c7d2fe; }
.yu-swatch--mid { background: #fff7ed; border: 1px solid #fed7aa; }
.yu-swatch--high { background: #fef2f2; border: 1px solid #fecaca; }
.yu-legend__item--mark .icon { width: 14px; height: 14px; color: var(--color-primary); }

.yu-cal {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    margin-bottom: 20px;
}
.yu-cal__head,
.yu-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.yu-cal__head {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
}
.yu-day {
    min-height: 84px;
    padding: 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.yu-day--empty {
    border: none;
    background: transparent;
    min-height: 0;
}
.yu-day--calm { background: #f7fbf7; }
.yu-day--low { background: #f7f8ff; border-color: #e0e7ff; }
.yu-day--mid { background: #fffaf3; border-color: #ffedd5; }
.yu-day--high { background: #fff6f6; border-color: #fecaca; }
.yu-day--none { background: #fafafa; }
.yu-day.is-today {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}
.yu-day.is-update {
    border-color: var(--color-primary-border-strong, #c4b5fd);
}
.yu-day__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.yu-day__num {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}
.yu-day.is-today .yu-day__num {
    color: var(--color-primary-chip, #4b3ec4);
}
.yu-day__mark .icon {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}
.yu-day__storm {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-ink, #1c1633);
}
.yu-day__storm--muted {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 16px;
}
.yu-day__wide {
    font-size: 11px;
    color: var(--color-text-muted);
}
.yu-list { margin-top: 8px; }
.yu-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.yu-pill--calm { background: #e8f5e9; color: #2e7d32; }
.yu-pill--low { background: #eef2ff; color: #4338ca; }
.yu-pill--mid { background: #ffedd5; color: #c2410c; }
.yu-pill--high { background: #fee2e2; color: #b91c1c; }
.yu-row--update td { background: #faf8ff; }
@media (max-width: 720px) {
    .yu-cal { padding: 10px; }
    .yu-cal__head, .yu-cal__grid { gap: 4px; }
    .yu-day { min-height: 68px; padding: 6px; }
    .yu-day__storm { font-size: 14px; }
    .yu-day__wide { display: none; }
}

.admin-mail {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.admin-mail__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-mail__compose {
    width: 100%;
    justify-content: center;
}
.admin-mail__boxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-mail__boxes--scroll {
    max-height: min(48vh, 340px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-gutter: stable;
}
.admin-mail__boxes-meta {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-muted);
}
.admin-mail__box-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.admin-mail__box-row .admin-mail__box {
    flex: 1;
    min-width: 0;
}
.admin-mail__box-del {
    margin: 0;
    flex-shrink: 0;
}
.admin-mail__box-del .btn-danger-icon {
    width: 36px;
    min-height: 100%;
    height: auto;
    padding: 0;
    border-radius: 10px;
}
.admin-mail__box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}
.admin-mail__box-icon {
    display: flex;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.admin-mail__box.is-on .admin-mail__box-icon,
.admin-mail__box:hover .admin-mail__box-icon {
    color: var(--color-primary-tab);
}
.admin-mail__box-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-mail__box.is-on,
.admin-mail__box:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border-strong);
    color: var(--color-primary-tab);
}
.admin-mail__box.is-off {
    opacity: 0.65;
}
.admin-mail__badge {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    text-align: center;
    flex-shrink: 0;
}
.admin-mail__settings.admin-card {
    border-radius: 12px;
    overflow: hidden;
}
.admin-mail__settings .admin-card__head {
    padding: 12px 14px;
    font-size: 14px;
}
.admin-mail__settings .admin-card__meta {
    font-size: 12px;
    color: var(--color-text-muted);
}
.admin-mail__settings-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 14px;
}
.admin-mail__settings-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.admin-mail__settings-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-mail__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.admin-mail__field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-mail__settings-form input[type="text"],
.admin-mail__settings-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-mail__settings-form input[type="text"]:focus,
.admin-mail__settings-form input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary-border-strong);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.admin-mail__local-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-mail__local-wrap:focus-within {
    border-color: var(--color-primary-border-strong);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.admin-mail__local-wrap input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.admin-mail__local-wrap input:focus {
    box-shadow: none;
}
.admin-mail__local-domain {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid var(--color-border);
    background: #f8fafc;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.admin-mail__settings-actions {
    padding-top: 4px;
}
.admin-mail__settings-actions .btn {
    width: 100%;
    justify-content: center;
}
.admin-mail__hint {
    margin: 0;
    font-size: 12px;
}
.admin-mail__main {
    min-width: 0;
}
.admin-mail__panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.admin-mail__panel--compose {
    padding: 20px 22px 22px;
}
.admin-mail__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.admin-mail__panel-head--list {
    align-items: flex-start;
    margin-bottom: 12px;
}
.admin-mail__panel-head h2 {
    margin: 0;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.admin-mail__subhead {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}
.admin-mail__count {
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
}
.admin-mail__folders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.admin-mail__folder {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}
.admin-mail__folder.is-on,
.admin-mail__folder:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border-strong);
    color: var(--color-primary-tab);
}
.admin-mail__alert {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 13px;
}
.admin-mail__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #f8fafc;
}
.admin-mail__search-icon {
    display: flex;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.admin-mail__search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--color-text);
}
.admin-mail__search input[type="search"]:focus {
    outline: none;
}
.admin-mail__search-clear {
    padding: 6px 8px;
}
.admin-mail__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(68vh, 720px);
    overflow: auto;
    padding-right: 2px;
}
.admin-mail__item-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.admin-mail__item-row .admin-mail__item {
    flex: 1;
    min-width: 0;
}
.admin-mail__item-del {
    margin: 0;
    flex-shrink: 0;
}
.admin-mail__item-del .btn-danger-icon {
    width: 38px;
    min-height: 100%;
    height: auto;
    padding: 0;
    border-radius: 10px;
}
.admin-mail__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-mail__item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.admin-mail__item.is-unread {
    border-color: var(--color-primary-border-strong);
    background: #faf8ff;
}
.admin-mail__item.is-unread .admin-mail__item-contact,
.admin-mail__item.is-unread .admin-mail__item-subject {
    font-weight: 700;
}
.admin-mail__item-icon {
    display: flex;
    color: var(--color-text-muted);
    margin-top: 2px;
    flex-shrink: 0;
}
.admin-mail__item.is-unread .admin-mail__item-icon {
    color: var(--color-primary-tab);
}
.admin-mail__item-body {
    flex: 1;
    min-width: 0;
}
.admin-mail__item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.admin-mail__item-contact {
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-mail__item-date {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-mail__item-subject {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-mail__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.admin-mail__range {
    font-size: 13px;
    color: var(--color-text-muted);
}
.admin-mail__pagesize {
    margin: 0 0 0 auto;
    font-size: 12px;
}
.admin-mail__compose-grid {
    display: grid;
    gap: 14px;
}
@media (min-width: 720px) {
    .admin-mail__compose-grid {
        grid-template-columns: 1fr 1fr;
    }
    .admin-mail__field-full {
        grid-column: 1 / -1;
    }
}
.admin-mail__compose-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-mail__compose-grid input[type="text"],
.admin-mail__compose-grid input[type="email"],
.admin-mail__compose-grid select,
.admin-mail__compose-grid textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    font-family: inherit;
}
.admin-mail__compose-grid input[type="text"],
.admin-mail__compose-grid input[type="email"],
.admin-mail__compose-grid select {
    height: 38px;
    padding: 0 12px;
}
.admin-mail__compose-grid textarea {
    min-height: 220px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
.admin-mail__compose-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.admin-mail__compose-actions .btn {
    width: auto;
    min-width: 160px;
}
.admin-mail__view-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.admin-mail__delete-form {
    margin: 0;
}
.admin-mail__view .admin-mail__view-icon {
    color: var(--color-primary-tab);
    margin-bottom: 8px;
}
.admin-mail__view .admin-mail__subject {
    margin: 0 0 10px;
    font-size: 20px;
}
.admin-mail__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
    color: var(--color-text-muted);
    font-size: 13px;
}
.admin-mail__body {
    margin: 0;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--color-border);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.admin-mail__empty {
    margin: 0;
}
@media (max-width: 900px) {
    .admin-mail {
        grid-template-columns: 1fr;
    }
    .admin-mail__pagesize {
        margin-left: 0;
        width: 100%;
    }
}

/* ===== Подбор запросов (Wordstat) ===== */
.kr-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}
.kr-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.05rem;
}
.kr-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.kr-import-btn {
    cursor: pointer;
    margin: 0;
}
.kr-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font: inherit;
    background: #fff;
}
.kr-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    background: #f8fafc;
    border: 1px solid var(--color-border);
}
.kr-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
}
.kr-check input {
    margin-top: 3px;
    flex-shrink: 0;
}
.kr-cost {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(135deg, #f3f0ff, #eef2ff);
    border: 1px solid #e2e8f0;
}
.kr-cost__tip {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-muted, #64748b);
}
.kr-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}
.kr-results-meta {
    font-size: 13px;
    color: var(--color-text-muted, #64748b);
}
.kr-results-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--color-text-muted, #64748b);
}
.kr-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.kr-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kr-table-wrap {
    max-height: min(70vh, 720px);
    overflow: auto;
}
.kr-table .kr-col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kr-phrase {
    font-weight: 500;
    min-width: 160px;
}
.kr-seed {
    font-size: 13px;
    color: var(--color-text-muted, #64748b);
    max-width: 140px;
}
.kr-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.kr-badge--popular {
    background: #ebf8ff;
    color: #2b6cb0;
}
.kr-badge--similar {
    background: #faf5ff;
    color: #6b46c1;
}
.kr-empty-row {
    text-align: center;
    color: var(--color-text-muted, #64748b);
    padding: 24px !important;
}
.kr-promo {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
}
.kr-promo--inline {
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
}
.kr-promo__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary, #667eea);
}
.kr-promo__link:hover {
    text-decoration: underline;
}
.kr-promo .help-text {
    display: block;
    margin-top: 4px;
}
@media (max-width: 960px) {
    .kr-layout {
        grid-template-columns: 1fr;
    }
}

/* Подбор запросов — шапка формы */
.kr-app {
    margin-bottom: 28px;
}
.container--wide {
    max-width: 1320px;
}
.kr-form-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.kr-form-top .kr-panel__title {
    margin: 0;
}
.kr-form-top__cost {
    font-size: 14px;
    color: var(--color-text-muted, #64748b);
    line-height: 1.35;
}
.kr-form-top__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary, #667eea);
}
.kr-form-top__tip {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-muted, #64748b);
}
.kr-form-top__start {
    width: 100%;
    justify-content: center;
}
.kr-progress {
    margin-bottom: 4px;
}
.tool-link {
    margin-top: 10px;
}
.tool-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary, #667eea);
    text-decoration: none;
}
.tool-link a:hover {
    text-decoration: underline;
}
.tool-link a .icon {
    flex-shrink: 0;
}
.kr-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.kr-label-row label {
    margin: 0;
}
.kr-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #667eea);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kr-text-btn:hover {
    color: #4c51bf;
}
.kr-fieldset {
    margin: 0 0 16px;
    padding: 12px 14px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: #fafbfc;
}
.kr-fieldset legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 14px;
}
.kr-radio-grid,
.kr-check-grid {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.kr-radio-grid {
    grid-template-columns: 1fr;
}
.kr-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kr-check-grid--freq {
    grid-template-columns: 1fr;
}
.kr-radio {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 14px;
    cursor: pointer;
}
.kr-radio input {
    margin-top: 3px;
}
.kr-check--compact {
    font-size: 14px;
}
.kr-export-group {
    display: inline-flex;
    gap: 6px;
}
.kr-table-hint {
    margin: 0 0 8px;
}
.kr-row--seed {
    background: #f8fafc;
}
.kr-row--seed .kr-phrase {
    color: #2d3748;
}
.kr-badge--seed {
    background: #edf2f7;
    color: #4a5568;
}
.kr-footer-note {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .kr-panel.section-box {
        padding: 14px 12px;
        margin: 12px 0;
    }

    .kr-form-top {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title title"
            "cost start";
        gap: 10px 12px;
        align-items: end;
    }
    .kr-form-top .kr-panel__title {
        grid-area: title;
    }
    .kr-form-top__cost {
        grid-area: cost;
        align-self: center;
        min-width: 0;
    }
    .kr-form-top__start {
        grid-area: start;
        width: auto;
        white-space: nowrap;
        padding-left: 14px;
        padding-right: 14px;
    }

    .kr-label-row {
        flex-wrap: wrap;
        gap: 6px 10px;
    }
    .kr-label-row label {
        flex: 1 1 auto;
        min-width: 0;
    }
    .kr-text-btn {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 6px 10px;
        border: 1px solid var(--color-primary-border, #d4dcff);
        border-radius: var(--radius-sm);
        background: var(--color-primary-soft, #f3f0ff);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        min-height: 32px;
    }

    .kr-fieldset {
        padding: 10px 12px 12px;
    }
    .kr-radio,
    .kr-check {
        font-size: 13px;
    }

    .kr-results-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .kr-results-meta {
        font-size: 12px;
        line-height: 1.4;
    }

    .kr-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .kr-toolbar .queries-search {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: none;
    }
    .kr-toolbar__actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .kr-toolbar__actions .btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
    }
    .kr-toolbar__actions .btn .icon {
        width: 14px;
        height: 14px;
    }
    .kr-toolbar__actions .btn-primary {
        grid-column: 1 / -1;
    }

    .kr-table-wrap {
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }
    .kr-table th,
    .kr-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    .kr-table .kr-origin {
        display: none;
    }
    .kr-table th:nth-child(4) {
        display: none;
    }
    .kr-table .kr-phrase {
        min-width: 0;
        word-break: break-word;
    }
    .kr-table .kr-badge {
        font-size: 11px;
        padding: 2px 6px;
        white-space: nowrap;
    }
    .kr-table .col-check {
        width: 32px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .kr-results-empty {
        padding: 20px 8px;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .kr-form-top {
        grid-template-areas:
            "title"
            "cost"
            "start";
        grid-template-columns: 1fr;
    }
    .kr-form-top__start {
        width: 100%;
    }

    .kr-label-row {
        flex-direction: column;
        align-items: stretch;
    }
    .kr-label-row .kr-text-btn {
        margin-left: 0;
        align-self: flex-end;
    }
}