/* ==========================================================
   QRCheckSS Homepage - Unified Dark Mode
   Dark mode ONLY.
   Base/light theme remains untouched.
   ========================================================== */

html[data-theme="dark"] {
    --home-dark-bg: #07172f;
    --home-dark-bg-2: #0b1d39;
    --home-dark-bg-3: #0b244a;

    --home-dark-surface: #0d213f;
    --home-dark-surface-2: #11294d;
    --home-dark-surface-soft: rgba(16, 39, 73, .86);

    --home-dark-border: rgba(126, 166, 218, .16);
    --home-dark-border-strong: rgba(83, 151, 239, .28);

    --home-dark-text: #f2f7ff;
    --home-dark-text-soft: #c4d2e5;
    --home-dark-muted: #8fa5c2;

    --home-dark-primary: #3175f5;
    --home-dark-primary-2: #2469ee;
    --home-dark-purple: #6753eb;
}


/* Page background */
html[data-theme="dark"] body {
    color: var(--home-dark-text);

    background:
        radial-gradient(
            circle at 16% 8%,
            rgba(54, 160, 255, .13),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(103, 83, 235, .10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--home-dark-bg) 0%,
            var(--home-dark-bg-2) 48%,
            var(--home-dark-bg) 100%
        );
}


/* Header */
html[data-theme="dark"] .site-header {
    background: rgba(7, 23, 47, .90);
    border-bottom-color: var(--home-dark-border);
}

html[data-theme="dark"] .brand-copy strong {
    color: var(--home-dark-text);
}

html[data-theme="dark"] .brand-copy small {
    color: var(--home-dark-muted);
}

html[data-theme="dark"] .main-nav a {
    color: var(--home-dark-text-soft);
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active,
html[data-theme="dark"] .main-nav a[aria-current="page"] {
    color: #ffffff;

    background:
        rgba(49, 117, 245, .12);
}

html[data-theme="dark"] .language-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .nav-menu-toggle {
    color: var(--home-dark-text-soft);

    background:
        rgba(255,255,255,.045);

    border-color:
        var(--home-dark-border);
}


/* Hero */
html[data-theme="dark"] .hero {
    color: var(--home-dark-text);

    background:
        radial-gradient(
            circle at 16% 15%,
            rgba(54, 160, 255, .22),
            transparent 29%
        ),
        radial-gradient(
            circle at 80% 24%,
            rgba(120, 76, 240, .20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07172f 0%,
            #0b244a 48%,
            #122a61 100%
        );
}

html[data-theme="dark"] .hero h1 {
    color: #ffffff;
}

html[data-theme="dark"] .hero-lead {
    color: #c4d2e5;
}

html[data-theme="dark"] .eyebrow {
    color: #cfe4ff;

    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(255,255,255,.12);
}


/* Main sections */
html[data-theme="dark"] .section,
html[data-theme="dark"] .scanner-section,
html[data-theme="dark"] .result-section,
html[data-theme="dark"] .reports-section,
html[data-theme="dark"] .dashboard-section,
html[data-theme="dark"] .how-section,
html[data-theme="dark"] .about-section {
    color: var(--home-dark-text);

    background:
        linear-gradient(
            180deg,
            #081a33 0%,
            #0a1f3d 100%
        );
}

html[data-theme="dark"] .section:nth-of-type(even),
html[data-theme="dark"] .how-section,
html[data-theme="dark"] .about-section {
    background:
        linear-gradient(
            180deg,
            #0a1f3d 0%,
            #0b2445 100%
        );
}


/* Headings/text */
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .about-grid h2,
html[data-theme="dark"] .card-heading strong {
    color: var(--home-dark-text);
}

html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .about-grid p,
html[data-theme="dark"] .card-heading span {
    color: var(--home-dark-muted);
}


/* Cards */
html[data-theme="dark"] .scanner-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .result-hero,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .about-security-card,
html[data-theme="dark"] .qrv3-card {
    color: var(--home-dark-text);

    background:
        linear-gradient(
            145deg,
            #0d213f,
            #10284a
        );

    border-color:
        var(--home-dark-border);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.17);
}


/* Card secondary text */
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .privacy-note p,
html[data-theme="dark"] .summary-card small,
html[data-theme="dark"] .kpi-card > span,
html[data-theme="dark"] .kpi-card > small,
html[data-theme="dark"] .qrv3-card p {
    color: var(--home-dark-muted);
}

html[data-theme="dark"] .info-card strong,
html[data-theme="dark"] .privacy-note strong,
html[data-theme="dark"] .summary-card strong,
html[data-theme="dark"] .kpi-card > strong,
html[data-theme="dark"] .qrv3-card h3 {
    color: var(--home-dark-text);
}


/* Scanner */
html[data-theme="dark"] .scanner-tabs {
    border-color:
        var(--home-dark-border);
}

html[data-theme="dark"] .scanner-tab {
    color: var(--home-dark-muted);

    background:
        rgba(255,255,255,.025);
}

html[data-theme="dark"] .scanner-tab.active {
    color: #ffffff;

    background:
        rgba(49,117,245,.15);
}

html[data-theme="dark"] .scanner-panel,
html[data-theme="dark"] .drop-zone {
    color: var(--home-dark-text-soft);

    background:
        rgba(7,23,47,.42);

    border-color:
        var(--home-dark-border);
}

html[data-theme="dark"] .drop-zone:hover {
    background:
        rgba(49,117,245,.07);

    border-color:
        var(--home-dark-border-strong);
}


/* Buttons */
html[data-theme="dark"] .btn-secondary {
    color: #d9e8fb;

    background:
        rgba(255,255,255,.045);

    border-color:
        var(--home-dark-border);
}

html[data-theme="dark"] .btn-secondary:hover {
    color: #ffffff;

    background:
        rgba(49,117,245,.12);

    border-color:
        var(--home-dark-border-strong);
}


/* Table */
html[data-theme="dark"] table,
html[data-theme="dark"] .data-table {
    color: var(--home-dark-text-soft);

    background:
        var(--home-dark-surface);
}

html[data-theme="dark"] table th {
    color: #dbe8f8;

    background:
        #10284a;

    border-color:
        var(--home-dark-border);
}

html[data-theme="dark"] table td {
    color: var(--home-dark-text-soft);

    border-color:
        var(--home-dark-border);
}


/* Footer */
html[data-theme="dark"] .site-footer {
    color: var(--home-dark-muted);

    background:
        linear-gradient(
            135deg,
            #07172f,
            #0b244a
        );

    border-top-color:
        var(--home-dark-border);
}

html[data-theme="dark"] .site-footer a {
    color: var(--home-dark-text-soft);
}

html[data-theme="dark"] .site-footer a:hover {
    color: #ffffff;
}


/* Preserve semantic colors.
   Do NOT turn LOW/MEDIUM/HIGH/CRITICAL blue. */
html[data-theme="dark"] .risk-low,
html[data-theme="dark"] .level-low,
html[data-theme="dark"] .status-success {
    color: #31d69b;
}

html[data-theme="dark"] .risk-medium,
html[data-theme="dark"] .level-medium,
html[data-theme="dark"] .status-warning {
    color: #f0bd52;
}

html[data-theme="dark"] .risk-high,
html[data-theme="dark"] .level-high {
    color: #ff9966;
}

html[data-theme="dark"] .risk-critical,
html[data-theme="dark"] .level-critical,
html[data-theme="dark"] .status-danger {
    color: #ff7183;
}


/* ==========================================================
   FINAL DARK FIX
   Homepage statistics + How It Works cards only
   ========================================================== */


/* ----------------------------------------------------------
   Homepage statistics strip
   ---------------------------------------------------------- */

html[data-theme="dark"] body .stats-strip {
    background:
        linear-gradient(
            145deg,
            #0d213f 0%,
            #10284a 100%
        ) !important;

    border:
        1px solid rgba(126, 166, 218, .16) !important;

    color:
        #f2f7ff !important;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .18) !important;
}


/* Individual statistics */
html[data-theme="dark"] body .stats-strip > * {
    background:
        transparent !important;

    border-color:
        rgba(126, 166, 218, .16) !important;
}


/* Main numbers */
html[data-theme="dark"] body .stats-strip strong,
html[data-theme="dark"] body .stats-strip .value,
html[data-theme="dark"] body .stats-strip .number,
html[data-theme="dark"] body .stats-strip .stat-value,
html[data-theme="dark"] body #publicTotalScans,
html[data-theme="dark"] body #publicSafeScans,
html[data-theme="dark"] body #publicCompletedScans {
    color:
        #f2f7ff !important;
}


/* Statistics descriptions */
html[data-theme="dark"] body .stats-strip span,
html[data-theme="dark"] body .stats-strip small,
html[data-theme="dark"] body .stats-strip p {
    color:
        #8fa5c2 !important;
}


/* Dividers between statistics */
html[data-theme="dark"] body .stats-strip > * + * {
    border-color:
        rgba(126, 166, 218, .16) !important;
}


/* ----------------------------------------------------------
   HOW IT WORKS
   ---------------------------------------------------------- */

html[data-theme="dark"] body .how-section {
    background:
        linear-gradient(
            180deg,
            #081a33 0%,
            #0a2140 100%
        ) !important;
}


/* Four cards */
html[data-theme="dark"] body .how-section .how-grid > *,
html[data-theme="dark"] body .how-section .qrv3-card,
html[data-theme="dark"] body .how-grid .qrv3-card {
    background:
        linear-gradient(
            145deg,
            #0d213f 0%,
            #10284a 100%
        ) !important;

    border:
        1px solid rgba(126, 166, 218, .16) !important;

    color:
        #f2f7ff !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .16) !important;
}


/* 01 / 02 / 03 / 04 */
html[data-theme="dark"] body .how-section .how-grid > * > span:first-child,
html[data-theme="dark"] body .how-section .qrv3-card > span:first-child,
html[data-theme="dark"] body .qrv3-card .step-number {
    color:
        #58b9ff !important;
}


/* Card titles */
html[data-theme="dark"] body .how-section .how-grid h3,
html[data-theme="dark"] body .how-section .qrv3-card h3 {
    color:
        #f2f7ff !important;
}


/* Card descriptions */
html[data-theme="dark"] body .how-section .how-grid p,
html[data-theme="dark"] body .how-section .qrv3-card p {
    color:
        #9fb1c9 !important;
}


/* HOW IT WORKS eyebrow */
html[data-theme="dark"] body .how-section .section-heading .eyebrow,
html[data-theme="dark"] body .how-section .eyebrow {
    color:
        #41b9ff !important;
}


/* Main How It Works heading */
html[data-theme="dark"] body .how-section .section-heading h2 {
    color:
        #f2f7ff !important;
}