/* Стилі головної (хаб), чек-листа налаштування, майстра першого входу, прапорців мов,
   тла гостьових сторінок і загальні кольори :root. Винесено з app/Views/layout.php
   рядки 612–767 (z78 крок 1, 14.10.2026) — підключається <link> на тому самому місці,
   тож порядок каскаду той самий. */
        :root {
            --surface: #ffffff;
            --text:    #0f172a;
            --muted:   #64748b;
            --border:  #e2e8f0;
            --bg-soft: #f8fafc;
            --primary: #0f172a;
            --accent:  #2563eb;
        }
        [data-bs-theme="dark"] {
            --surface: #0f172a;
            --text:    #f1f5f9;
            --muted:   #94a3b8;
            --border:  #1e293b;
            --bg-soft: #1e293b;
            --primary: #e2e8f0;
            --accent:  #60a5fa;
        }
        body:not(.crm-body) { background: var(--surface); color: var(--text); }
        .module-card {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
            transition: transform .12s, box-shadow .12s;
            text-decoration: none; color: inherit;
            display: block;
        }
        .module-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); color: inherit; }
        .module-card.disabled { opacity: 0.45; pointer-events: none; }
        /* ===== Хаб 2.0: брендинг + роадмап «Скоро» ===== */

        .hub-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
        .hub-logo {
            width: 56px; height: 56px; border-radius: 12px; object-fit: contain;
            background: #fff; border: 1px solid var(--border); padding: 6px; flex-shrink: 0;
        }
        .hub-title { font-size: 24px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.01em; }
        .hub-sub { color: var(--muted); font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
        .hub-company { font-weight: 600; color: var(--text); }
        .hub-date::first-letter { text-transform: uppercase; }
        .hub-sec-title {
            font-size: 12px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .06em; color: var(--muted); margin: 0 0 12px;
        }
        .hub-sec-soon { margin-top: 32px; }
        .module-card { background: var(--surface); }
        .module-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
        .module-open { font-size: 12px; font-weight: 600; color: var(--accent); opacity: 0; transition: opacity .12s; white-space: nowrap; }
        .module-card:hover .module-open { opacity: 1; }
        .module-soon { opacity: .62; cursor: default; }
        .module-soon:hover { transform: none; box-shadow: none; }
        .hub-soon-badge {
            font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
            color: var(--muted); border: 1px solid var(--border); border-radius: 999px;
            padding: 2px 10px; white-space: nowrap;
        }
        /* Підтримка внизу Хаба — тихий рядок, а не ще одна плитка: це не
           модуль, по який людина прийшла, а дверцята «якщо щось не так». */
        .hub-support {
            margin-top: 32px; padding-top: 20px;
            border-top: 1px solid var(--border);
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            font-size: 13px; color: var(--muted);
        }
        .hub-support a {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--accent); font-weight: 600; text-decoration: none;
        }
        .hub-support a:hover { text-decoration: underline; }

        /* ===== Чек-ліст «Налаштування акаунта» (Фаза B) ===== */
        .hub-checklist {
            border: 1px solid var(--border); border-radius: 14px;
            background: var(--surface);
            padding: 16px 20px; margin-bottom: 24px;
        }
        .hub-cl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .hub-cl-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
        .hub-cl-count { font-size: 12px; font-weight: 600; color: var(--accent); }
        .hub-cl-hide {
            margin-left: auto; border: 0; background: transparent; cursor: pointer;
            color: var(--muted); font-size: 13px; padding: 4px; border-radius: 6px;
        }
        .hub-cl-hide:hover { color: var(--text); background: var(--bg-soft); }
        .hub-cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
        .hub-cl-item {
            display: flex; align-items: center; gap: 8px;
            font-size: 14px; color: var(--text); text-decoration: none;
            padding: 6px 8px; border-radius: 8px; min-width: 0;
        }
        a.hub-cl-item:hover { background: var(--bg-soft); }
        a.hub-cl-item .bi-circle { color: var(--muted); }
        .hub-cl-arr { margin-left: auto; color: var(--accent); font-size: 12px; opacity: 0; transition: opacity .12s; }
        a.hub-cl-item:hover .hub-cl-arr { opacity: 1; }
        .hub-cl-item.done { color: var(--muted); }
        .hub-cl-item.done .bi-check-circle-fill { color: #1D9E75; }
        @media (max-width: 640px) { .hub-cl-grid { grid-template-columns: 1fr; } }

        /* ===== Wizard першого входу (SaaS Фаза A, 061) ===== */
        .obw-overlay {
            position: fixed; inset: 0; z-index: 3000;
            background: rgba(15, 23, 42, .55);
            display: flex; align-items: center; justify-content: center; padding: 16px;
        }
        .obw-card {
            width: min(640px, 100%); max-height: 92vh; overflow-y: auto;
            background: var(--surface); color: var(--text);
            border: 1px solid var(--border); border-radius: 16px;
            padding: 24px 28px; box-shadow: 0 24px 64px rgba(0,0,0,.28);
        }
        .obw-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
        .obw-dots { display: flex; gap: 6px; }
        .obw-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--border); }
        .obw-dot.active { background: var(--accent); }
        .obw-progress-label { font-size: 12px; color: var(--muted); }
        .obw-step { display: none; }
        .obw-step.active { display: block; }
        .obw-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
        .obw-hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
        .obw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
        .obw-span2 { grid-column: 1 / -1; }
        .obw-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); min-width: 0; }
        .obw-field .input-thin, .obw-field .select-thin { width: 100%; }
        .obw-req { color: #E24B4A; font-weight: 600; }
        .obw-error { margin-top: 10px; color: #E24B4A; font-size: 13px; }
        .obw-actions {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
        }
        .obw-invite-btn-wrap { justify-content: flex-end; }
        .obw-invited-card {
            border: 1px solid var(--border); border-radius: 10px;
            padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.5;
        }
        .obw-invited-card .bi-check-circle-fill { color: #1D9E75; }
        .obw-pass { font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--bg-soft); }
        .obw-pass-once { color: var(--muted); font-size: 12px; margin-top: 4px; }
        .obw-funnel-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
        .obw-stages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
        .obw-stage {
            border: 1px solid var(--border); border-radius: 999px;
            padding: 4px 12px; font-size: 13px; white-space: nowrap; background: var(--bg-soft);
        }
        .obw-stage-arr { color: var(--muted); font-size: 12px; }
        .obw-stages .obw-stage-arr:last-child { display: none; }
        @media (max-width: 640px) { .obw-grid { grid-template-columns: 1fr; } }
        .module-icon {
            width: 48px; height: 48px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            margin-bottom: 12px;
        }
        .lang-flag { font-size: 14px; }