/* ========================================= */
/* БАЗОВЫЕ ПЕРЕМЕННЫЕ И ТЕМА                 */
/* ========================================= */
:root {
    /* ── Базовые фоны ── */
    --bg-main: #f5f7ff;         /* чуть голубовато-фиолетовый офф-вайт, не слепит */
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f0f3ff;

    /* ── Границы — мягкие, не чёрные ── */
    --border-color: #c8d0e0;
    --border-color-thin: #e4e8f4;

    /* ── Текст ── */
    --text-main: #0f172a;       /* очень тёмный сине-серый, не чистый чёрный */
    --text-muted: #64748b;

    /* ── Акцент: электрический индиго / фиолет ── */
    --accent: #6366f1;
    --accent-dark: #4f46e5;
    --accent-secondary: #06b6d4;    /* циан-500 для вторичных акцентов */
    --accent-blue: #eef2ff;         /* indigo-50 — фон при наведении/активном */
    --accent-hover: #e0e7ff;        /* indigo-100 */
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --accent-gradient-wide: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);
    --accent-glow: 0 8px 32px rgba(99, 102, 241, 0.38), 0 2px 10px rgba(99, 102, 241, 0.18);
    --accent-glow-sm: 0 4px 16px rgba(99, 102, 241, 0.22);
    --card-hover-glow: 0 0 0 2px rgba(99, 102, 241, 0.18), 0 12px 36px rgba(99, 102, 241, 0.07);

    /* ── Статусы ── */
    --success: #10b981;
    --success-bg: #ecfdf5;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-bg: #fef2f2;
    --info-bg: #eef2ff;
    --info-fg: #6366f1;
    --warn-bg: #fffbeb;
    --warn-fg: #d97706;
    --star-color: #f59e0b;
    --star-inactive: #d1d5db;

    /* ── Радиусы ── */
    --border-radius: 20px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ── Отступы ── */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* ── Тени ── */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 20px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
    --shadow-lg: 0 16px 48px rgba(15, 23, 42, .12), 0 4px 16px rgba(15, 23, 42, .06);

    /* ── Анимации ── */
    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

    /* ── Фокус ── */
    --focus-ring: #6366f1;
    --focus-ring-alpha: rgba(99, 102, 241, 0.18);

    /* ── Оверлей ── */
    --overlay-scrim: rgba(10, 10, 30, 0.55);

    /* ── Кнопки ── */
    --btn-black-hover: #4f46e5;

    /* ── Бейджи верификации ── */
    --reliable-bg: #eef2ff;
    --reliable-fg: #4338ca;
    --reliable-border: #c7d2fe;
    --verif-pending-bg: #eef2ff;
    --verif-pending-border: #c7d2fe;
    --verif-pending-fg: #3730a3;
    --verif-approved-bg: #ecfdf5;
    --verif-approved-border: #a7f3d0;
    --verif-approved-fg: #065f46;
    --verif-rejected-bg: #fef2f2;
    --verif-rejected-border: #fecaca;
    --verif-rejected-fg: #991b1b;
    --verif-info-bg: #fffbeb;
    --verif-info-border: #fde68a;
    --verif-info-fg: #78350f;

    /* ── FAB тени ── */
    --fab-shadow: rgba(99, 102, 241, 0.30);
    --fab-shadow-hover: rgba(99, 102, 241, 0.45);
    --fab-top-shadow: rgba(15, 23, 42, 0.12);
    --fab-top-shadow-hover: rgba(15, 23, 42, 0.20);

    /* ── Скелетоны ── */
    --skeleton-shine: rgba(255, 255, 255, 0.72);
    --portfolio-caption: rgba(0, 0, 0, 0.68);

    /* ── Типографика ── */
    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Manrope', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #0c0f1e;         /* глубокий индиго-чёрный */
    --bg-card: #12162b;         /* тёмный с фиолетовым оттенком */
    --bg-input: #181c32;
    --bg-hover: #1a1f38;
    --text-main: #e8eaf6;       /* тёплый светлый — не слепит */
    --text-muted: #8892b0;
    --border-color: #d8dce8;    /* виден на тёмном, не слишком резкий */
    --border-color-thin: #1e2444;
    --accent: #818cf8;          /* ярче для тёмного фона */
    --accent-dark: #6366f1;
    --accent-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    --accent-gradient-wide: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #22d3ee 100%);
    --accent-glow: 0 8px 32px rgba(129, 140, 248, 0.35), 0 2px 10px rgba(129, 140, 248, 0.15);
    --accent-glow-sm: 0 4px 16px rgba(129, 140, 248, 0.22);
    --card-hover-glow: 0 0 0 2px rgba(129, 140, 248, 0.22), 0 12px 36px rgba(129, 140, 248, 0.08);
    --accent-blue: #1a1b3e;
    --accent-hover: #1e2248;
    --focus-ring: #818cf8;
    --focus-ring-alpha: rgba(129, 140, 248, 0.22);
    --success-bg: #0a2a1f;
    --danger-bg: #2a1018;
    --info-bg: #1a1b3e;
    --info-fg: #a5b4fc;
    --warn-bg: #2a1e0a;
    --warn-fg: #fbbf24;
    --star-inactive: #4b5563;
    --btn-black-hover: #7c3aed;
    --reliable-bg: #1a1b3e;
    --reliable-fg: #a5b4fc;
    --reliable-border: #2d2f5a;
    --verif-pending-bg: #1a1b3e;
    --verif-pending-border: #2d2f5a;
    --verif-pending-fg: #c7d2fe;
    --verif-approved-bg: #0a2a1f;
    --verif-approved-border: #14532d;
    --verif-approved-fg: #86efac;
    --verif-rejected-bg: #2a1018;
    --verif-rejected-border: #7f1d1d;
    --verif-rejected-fg: #fca5a5;
    --verif-info-bg: #2a1e0a;
    --verif-info-border: #78350f;
    --verif-info-fg: #fcd34d;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --fab-shadow: rgba(129, 140, 248, 0.35);
    --fab-shadow-hover: rgba(129, 140, 248, 0.5);
    --fab-top-shadow: rgba(0, 0, 0, 0.5);
    --fab-top-shadow-hover: rgba(0, 0, 0, 0.65);
    --skeleton-shine: rgba(255, 255, 255, 0.06);
    --portfolio-caption: rgba(0, 0, 0, 0.82);
    --overlay-scrim: rgba(0, 0, 20, 0.72);
}

* { box-sizing: border-box; }

/* Глобальный сброс: изображения не вылезают за границы контейнера */
img, video, svg { max-width: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg-main);
    color: var(--text-main);
    padding: 20px;
    margin: 0;
    line-height: 1.5;
    /* Предотвращаем горизонтальный скролл от случайного переполнения */
    overflow-x: hidden;
}

.container { max-width: 1000px; margin: auto; }

/* ========================================= */
/* ДОВОДКА: экраны, доступность, скелетоны    */
/* ========================================= */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--text-main); }