:root {
            --color-primary: #ff9900;
            --color-primary-hover: #e68a00;
            --color-success: #4CAF50;
            --color-warning: #ff9900;
            --color-error: #F44336;
            --color-bg: #f0f2f5;
            --color-surface: #ffffff;
            --color-text: #333;
            --color-text-secondary: #555;
            --color-text-muted: #888;
            --color-text-disabled: #999;
            --color-border: #e5e7eb;
            --color-info: #3b82f6;
            --color-input-bg: #fafafa;
            --color-divider: #eee;
            --color-gauge-bg: #e0e0e0;
            --color-badge-bg-success: rgba(76, 175, 80, 0.1);
            --color-badge-bg-warning: rgba(255, 152, 0, 0.1);
            --color-badge-bg-error: rgba(244, 67, 54, 0.1);
            --color-badge-bg-info: rgba(59, 130, 246, 0.1);
            --color-badge-text-success: #2E7D32;
            --color-badge-text-warning: #E65100;
            --color-badge-text-error: #C62828;
            --color-badge-text-info: #1565C0;
            /* Strong (saturated) badge palette — for high-contrast inline tags. */
            --color-badge-strong-bg-success: #d4f4dd;
            --color-badge-strong-text-success: #1b5e20;
            --color-badge-strong-bg-warning: #fef3c7;
            --color-badge-strong-text-warning: #92400e;
            --color-badge-strong-bg-error: #fdecea;
            --color-badge-strong-text-error: #b71c1c;
            --color-badge-strong-bg-info: #dbeafe;
            --color-badge-strong-text-info: #1e3a8a;
            /* "On" colors — text/icons placed on coloured surfaces. Each flips per theme. */
            --color-on-primary: #ffffff;
            --color-on-header: #ffffff;
            --color-on-error-solid: #ffffff;
            /* Delist button (used in blacklist tool). */
            --color-delist-bg: #d32f2f;
            --color-delist-bg-hover: #b71c1c;
            --color-on-delist: #ffffff;
            /* Tooltip colors. */
            --color-tooltip-bg: #333333;
            --color-on-tooltip: #ffffff;
            /* Focus ring. */
            --color-focus-ring: rgba(255, 153, 0, 0.45);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            /* Card accent colors */
            --color-card-spf: #3b82f6;
            --color-card-dkim: var(--color-primary);
            --color-card-dmarc: #4CAF50;
            --color-card-mx: #607D8B;
            --color-card-srv: #78909C;
            --color-card-ns: #3b82f6;
            --color-card-soa: #546E7A;
            --color-card-reputation: #F44336;
            --color-card-dbl: #7B1FA2;
            --color-card-modern: #9C27B0;
            --color-card-tlsrpt: #00796B;
            --color-card-bimi: #673AB7;
            --color-card-dane: #0097A7;
            --color-card-prediction: #00BCD4;
            --color-card-bulk: #FF5722;
            --color-warning-bg:     #fff8e1;
            --color-warning-border: #ffe082;
            --color-success-bg:     #e8f5e9;
            --color-success-text:   #1b5e20;
        }

        /* Dark mode color scheme */
        [data-theme="dark"] {
            --color-bg: #1a1a1a;
            --color-surface: #2d2d2d;
            --color-text: #e5e5e5;
            --color-text-secondary: #d4d4d4;
            --color-text-muted: #c0c0c0;
            --color-text-disabled: #a0a0a0;
            --color-border: #404040;
            --color-primary: #ffa726;
            --color-primary-hover: #fb8c00;
            --color-success: #4caf50;
            --color-warning: #ffa726;
            --color-error: #ef5350;
            --color-info: #42a5f5;
            --color-input-bg: #1e1e1e;
            --color-divider: #404040;
            --color-gauge-bg: #404040;
            --color-badge-bg-success: rgba(76, 175, 80, 0.15);
            --color-badge-bg-warning: rgba(255, 167, 38, 0.15);
            --color-badge-bg-error: rgba(239, 83, 80, 0.15);
            --color-badge-bg-info: rgba(66, 165, 245, 0.15);
            --color-badge-text-success: #4caf50;
            --color-badge-text-warning: #ffa726;
            --color-badge-text-error: #ff6b6b;
            --color-badge-text-info: #42a5f5;
            --color-badge-strong-bg-success: rgba(76, 175, 80, 0.18);
            --color-badge-strong-text-success: #81c784;
            --color-badge-strong-bg-warning: rgba(255, 167, 38, 0.20);
            --color-badge-strong-text-warning: #ffcc80;
            --color-badge-strong-bg-error: rgba(239, 83, 80, 0.20);
            --color-badge-strong-text-error: #ff8a80;
            --color-badge-strong-bg-info: rgba(66, 165, 245, 0.20);
            --color-badge-strong-text-info: #90caf9;
            --color-on-primary: #1a1a1a;
            --color-on-header: #1a1a1a;
            --color-on-error-solid: #1a1a1a;
            --color-delist-bg: #ef5350;
            --color-delist-bg-hover: #c62828;
            --color-on-delist: #1a1a1a;
            --color-tooltip-bg: #f0f0f0;
            --color-on-tooltip: #1a1a1a;
            --color-focus-ring: rgba(255, 167, 38, 0.55);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
            --color-warning-bg:     rgba(255, 167, 38, 0.12);
            --color-warning-border: rgba(255, 167, 38, 0.30);
            --color-success-bg:     rgba(76, 175, 80, 0.12);
            --color-success-text:   #81c784;
        }

        /* Auto dark mode based on system preference (only when user has no explicit preference). */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --color-bg: #1a1a1a;
                --color-surface: #2d2d2d;
                --color-text: #e5e5e5;
                --color-text-secondary: #d4d4d4;
                --color-text-muted: #c0c0c0;
                --color-text-disabled: #a0a0a0;
                --color-border: #404040;
                --color-primary: #ffa726;
                --color-primary-hover: #fb8c00;
                --color-success: #4caf50;
                --color-warning: #ffa726;
                --color-error: #ef5350;
                --color-info: #42a5f5;
                --color-input-bg: #1e1e1e;
                --color-divider: #404040;
                --color-gauge-bg: #404040;
                --color-badge-bg-success: rgba(76, 175, 80, 0.15);
                --color-badge-bg-warning: rgba(255, 167, 38, 0.15);
                --color-badge-bg-error: rgba(239, 83, 80, 0.15);
                --color-badge-bg-info: rgba(66, 165, 245, 0.15);
                --color-badge-text-success: #4caf50;
                --color-badge-text-warning: #ffa726;
                --color-badge-text-error: #ff6b6b;
                --color-badge-text-info: #42a5f5;
                --color-badge-strong-bg-success: rgba(76, 175, 80, 0.18);
                --color-badge-strong-text-success: #81c784;
                --color-badge-strong-bg-warning: rgba(255, 167, 38, 0.20);
                --color-badge-strong-text-warning: #ffcc80;
                --color-badge-strong-bg-error: rgba(239, 83, 80, 0.20);
                --color-badge-strong-text-error: #ff8a80;
                --color-badge-strong-bg-info: rgba(66, 165, 245, 0.20);
                --color-badge-strong-text-info: #90caf9;
                --color-on-primary: #1a1a1a;
                --color-on-header: #1a1a1a;
                --color-on-error-solid: #1a1a1a;
                --color-delist-bg: #ef5350;
                --color-delist-bg-hover: #c62828;
                --color-on-delist: #1a1a1a;
                --color-tooltip-bg: #f0f0f0;
                --color-on-tooltip: #1a1a1a;
                --color-focus-ring: rgba(255, 167, 38, 0.55);
                --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
                --color-warning-bg:     rgba(255, 167, 38, 0.12);
                --color-warning-border: rgba(255, 167, 38, 0.30);
                --color-success-bg:     rgba(76, 175, 80, 0.12);
                --color-success-text:   #81c784;
            }
        }

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

        /* Stop iOS Safari from auto-inflating font-size inside narrow flex
           items on mobile. Without this, an inline <span style="font-size:12px">
           inside a wrapped flex row gets boosted by Safari's "text autosizing"
           heuristic, which is why result badges appeared visibly larger than
           their declared size and bigger than sibling badges in the same row. */
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            font-size: 16px;
            line-height: 1.6;
            min-height: 100vh;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Smooth transitions for theme changes */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        /* Prevent transitions on page load */
        body.no-transition * {
            transition: none !important;
        }

        /* Visually-hidden helper — readable by screen readers, invisible on screen. */
        .visually-hidden {
            position: absolute !important;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Skip link — first focusable element on every page. */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 8px;
            background: var(--color-primary);
            color: var(--color-on-primary);
            padding: 8px 14px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            z-index: 2000;
            transition: top 0.2s ease;
        }
        .skip-link:focus {
            top: 8px;
            outline: 3px solid var(--color-focus-ring);
            outline-offset: 2px;
        }

        /* Focus-visible — applied to every interactive element so keyboard users see clear focus. */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        /* Honour reduced-motion preference — disable spinners, transforms, and smooth scroll. */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
            /* Show the spinner as a static ring (it uses currentColor, so it adapts to the
               surrounding text color — e.g. button label color in light vs dark mode). */
            .loading { animation: none !important; }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        main > header {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
            color: var(--color-on-header);
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 12px;
            box-shadow: var(--shadow-md);
        }

        main > header h1 {
            font-size: 28px;
            margin-bottom: 8px;
        }

        main > header h2.header-subtitle {
            font-size: 15px;
            font-weight: normal;
            margin: 8px 0 0 0;
            opacity: 0.85;
        }



        /* Beta banner sits inline in the topbar, just before the Tools button.
           Visual styling (background/shape) lives further down with .beta-banner. */
        .topbar-beta {
            flex-shrink: 0;
            box-shadow: var(--shadow-md);
        }

        /* Theme-toggle visual styles. Positioning is handled by the topbar
           (which the button now lives inside). */
        #theme-toggle {
            background: transparent;
            border: 1px solid var(--color-border);
            border-radius: 50%;
            width: 38px;
            height: 38px;
            cursor: pointer;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }

        #theme-toggle:hover {
            border-color: var(--color-primary);
            background: var(--color-input-bg);
        }

        #theme-toggle:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        .theme-icon {
            user-select: none;
        }

        .search-section {
            background: var(--color-surface);
            padding: 40px;
            border-radius: 12px;
            box-shadow: var(--shadow-md);
            margin-bottom: 30px;
        }

        .search-group {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 24px;
        }

        .search-group input,
        .search-group select,
        .form-input {
            width: 100%;
            height: 54px;
            padding: 14px 16px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px;
            background: var(--color-input-bg);
            color: var(--color-text);
            box-sizing: border-box;
            transition: border-color 0.2s, box-shadow 0.2s;
            margin-bottom: 12px;
        }

        textarea.form-input {
            height: auto;
            min-height: 120px;
        }

        .search-group input:focus,
        .search-group select:focus,
        .form-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15);
        }

        .search-group input::placeholder,
        .form-input::placeholder {
            color: var(--color-text-muted);
        }

        .btn {
            height: 54px;
            padding: 14px 28px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            font-weight: 600;
            background: var(--color-primary);
            color: var(--color-on-primary);
            transition: background-color 0.2s, transform 0.1s, color 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .search-group .btn {
            width: 100%;
        }

        .btn:hover {
            background: var(--color-primary-hover);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn:disabled {
            background: var(--color-text-disabled);
            cursor: not-allowed;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            /* Use currentColor so the spinner adapts to whatever text color the parent uses
               (e.g. the .btn picks up --color-on-primary). */
            border: 3px solid transparent;
            border-top-color: currentColor;
            border-right-color: currentColor;
            opacity: 0.85;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .results-section {
            display: none;
        }

        .results-section.active {
            display: block;
        }

        .result-card {
            background: var(--color-surface);
            padding: 24px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-md);
            border-top: 3px solid var(--color-border);
        }

        .result-card.ns      { border-top-color: var(--color-card-ns); }
        .result-card.spf     { border-top-color: var(--color-card-spf); }
        .result-card.dkim    { border-top-color: var(--color-card-dkim); }
        .result-card.dmarc   { border-top-color: var(--color-card-dmarc); }
        .result-card.reputation { border-top-color: var(--color-card-reputation); }
        .result-card.dbl     { border-top-color: var(--color-card-dbl); }
        .result-card.mx      { border-top-color: var(--color-card-mx); }
        .result-card.srv     { border-top-color: var(--color-card-srv); }
        .result-card.soa     { border-top-color: var(--color-card-soa); }
        .result-card.modern  { border-top-color: var(--color-card-modern); }
        .result-card.tlsrpt  { border-top-color: var(--color-card-tlsrpt); }
        .result-card.bimi    { border-top-color: var(--color-card-bimi); }
        .result-card.dane    { border-top-color: var(--color-card-dane); }
        .result-card.prediction  { border-top-color: var(--color-card-prediction); }
        .result-card.bulk-sender { border-top-color: var(--color-card-bulk); }
        .result-card.primary    { border-top-color: var(--color-primary); }

        /* Bulk Sender Checklist Styles */
        .bulk-checklist {
            margin-top: 15px;
            margin-bottom: 16px;
        }

        .bulk-checklist-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid var(--color-border);
            gap: 12px;
        }

        .bulk-checklist-item:last-child {
            border-bottom: none;
        }

        .bulk-checklist-item .status-icon {
            font-size: 18px;
            min-width: 24px;
        }

        .bulk-checklist-item .requirement {
            flex: 1;
        }

        .bulk-checklist-item .requirement strong {
            display: block;
            margin-bottom: 2px;
        }

        .bulk-checklist-item .requirement small {
            color: var(--color-text-secondary);
            font-size: 12px;
        }

        .bulk-checklist-item.pass {
            background: var(--color-badge-bg-success);
        }

        .bulk-checklist-item.fail {
            background: var(--color-badge-bg-error);
        }

        .bulk-checklist-item.warning {
            background: var(--color-badge-bg-warning);
        }

        .bulk-checklist-item.info {
            background: var(--color-badge-bg-info);
        }

        .bulk-checklist-item.info .requirement small {
            color: var(--color-text);
        }

        .bulk-checklist-item.info .requirement small a {
            color: var(--color-info);
        }

        .result-card p {
            margin-bottom: 16px;
        }

        .result-card h3 {
            font-size: 18px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .record-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-found {
            background: var(--color-badge-bg-success);
            color: var(--color-badge-text-success);
        }

        .status-not-found {
            background: var(--color-badge-bg-error);
            color: var(--color-badge-text-error);
        }

        .status-warning {
            background: var(--color-badge-bg-warning);
            color: var(--color-badge-text-warning);
        }

        .record-content {
            background: var(--color-input-bg);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--color-border);
            font-family: monospace;
            font-size: 13px;
            word-break: break-all;
            margin: 12px 0 16px 0;
            max-height: 200px;
            overflow-y: auto;
        }

        .rec-box {
            /* Top margin matches the gap we want above the box; bottom margin separates
               consecutive rec-boxes. Adjacent vertical margins collapse, so two stacked
               rec-boxes still show one ~16px gap. */
            margin: 12px 0 16px 0;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            border: 1px solid transparent;
            line-height: 1.5;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .rec-box.error {
            background: var(--color-badge-bg-error);
            border-color: var(--color-error);
            color: var(--color-badge-text-error);
        }

        .rec-box.warning {
            background: var(--color-badge-bg-warning);
            border-color: var(--color-warning);
            color: var(--color-badge-text-warning);
        }

        .rec-box.info {
            background: var(--color-badge-bg-info);
            border-color: var(--color-info);
            color: var(--color-badge-text-info);
        }

        .rec-box.success {
            background: var(--color-badge-bg-success);
            border-color: var(--color-success);
            color: var(--color-badge-text-success);
        }

        .rec-link {
            font-weight: 600;
            text-decoration: none;
            color: inherit;
            border-bottom: 1px solid currentColor;
        }

        /* Strong (high-contrast) badge utility — for "CRITICAL", "BETA", and similar inline tags. */
        .badge-strong {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            line-height: 1.4;
            white-space: nowrap;
        }
        .badge-strong-success {
            background: var(--color-badge-strong-bg-success);
            color: var(--color-badge-strong-text-success);
        }
        .badge-strong-warning {
            background: var(--color-badge-strong-bg-warning);
            color: var(--color-badge-strong-text-warning);
        }
        .badge-strong-error {
            background: var(--color-badge-strong-bg-error);
            color: var(--color-badge-strong-text-error);
        }
        .badge-strong-info {
            background: var(--color-badge-strong-bg-info);
            color: var(--color-badge-strong-text-info);
        }

        /* Generic form label + inline-error pair (used by support form, builder forms, etc.). */
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 6px;
        }
        .form-hint {
            font-size: 12px;
            color: var(--color-text-muted);
            margin-top: -4px;
            margin-bottom: 12px;
            display: block;
        }
        .form-error {
            font-size: 13px;
            color: var(--color-badge-text-error);
            margin-top: -8px;
            margin-bottom: 12px;
            display: block;
        }
        .form-error[hidden] { display: none; }

        .delist-btn {
            margin-left: 10px;
            padding: 3px 8px;
            background: var(--color-delist-bg);
            color: var(--color-on-delist);
            border-radius: 4px;
            text-decoration: none;
            font-size: 11px;
            font-weight: bold;
        }

        .delist-btn:hover,
        .delist-btn:focus-visible {
            background: var(--color-delist-bg-hover);
            color: var(--color-on-delist);
        }

        .compliance-section {
            background: var(--color-surface);
            padding: 32px;
            border-radius: 12px;
            box-shadow: var(--shadow-md);
            margin-bottom: 24px;
        }

        .compliance-score {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .score-gauge {
            width: 150px;
            height: 150px;
            position: relative;
            flex-shrink: 0;
        }

        .gauge-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(var(--gauge-color, var(--color-success)) 0deg, var(--gauge-color, var(--color-success)) calc(var(--score-percentage) * 3.6deg), var(--color-gauge-bg) calc(var(--score-percentage) * 3.6deg), var(--color-gauge-bg) 360deg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: bold;
            color: var(--color-surface);
        }

        .score-breakdown {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            width: 100%;
        }

        .score-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 10px;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-input-bg);
        }

        .score-item span {
            color: var(--color-text);
            font-weight: 500;
        }

        .grid-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* Shared "data list in a card" wrapper used by SPF lookup tree, MX records,
           and any other section that wants the same internal-border + padded-card look. */
        .spf-tree,
        .data-list-card {
            background: var(--color-input-bg);
            border: 1px solid var(--color-border);
            border-radius: 6px;
            padding: 15px;
            margin-top: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            overflow: hidden;
        }

        .spf-tree code,
        .spf-tree-item code {
            word-break: break-all;
            overflow-wrap: anywhere;
        }
        .data-list-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .spf-tree-item {
            padding: 4px 0;
            padding-left: 20px;
            border-left: 2px solid var(--color-divider);
            margin-left: 10px;
        }

        .spf-tree-item.level-0 {
            padding-left: 0;
            border-left: none;
            margin-left: 0;
            font-weight: bold;
        }

        .geo-info {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            padding: 12px;
            background: var(--color-input-bg);
            border-radius: 6px;
            margin-top: 10px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--color-text);
        }

        .geo-info span {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--color-text);
        }

        .dmarc-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
            margin-bottom: 16px;
        }

        .dmarc-tag {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .dmarc-tag.policy {
            background: var(--color-badge-bg-info);
            color: var(--color-badge-text-info);
        }

        .dmarc-tag.subdomain {
            background: var(--color-badge-bg-error);
            color: var(--color-badge-text-error);
        }

        .dmarc-tag.pct {
            background: var(--color-badge-bg-warning);
            color: var(--color-badge-text-warning);
        }

        .dmarc-tag.rua {
            background: var(--color-badge-bg-success);
            color: var(--color-badge-text-success);
        }

        .inbox-prediction {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            padding: 20px 20px 4px 20px;
        }

        .prediction-item {
            text-align: center;
            padding: 15px 25px;
            background: var(--color-input-bg);
            border-radius: 8px;
            min-width: 120px;
        }

        .prediction-item .provider {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--color-text);
        }

        .prediction-item .score {
            font-size: 24px;
            font-weight: bold;
        }

        .prediction-item .score.high {
            color: var(--color-success);
        }

        .prediction-item .score.medium {
            color: var(--color-warning);
        }

        .prediction-item .score.low {
            color: var(--color-error);
        }

        .prediction-subtitle {
            font-size: 13px;
            color: var(--color-text-secondary);
            margin: 4px 4px 14px;
            line-height: 1.5;
        }

        .prediction-item {
            min-width: 220px;
            max-width: 280px;
            padding: 16px 18px;
            text-align: left;
        }

        .prediction-item .provider {
            text-align: center;
            margin-bottom: 10px;
        }

        .prediction-item .outcome-headline {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
        }

        .prediction-item .outcome-label {
            font-size: 13px;
            color: var(--color-text-secondary);
        }

        .prediction-item .outcome-value {
            font-size: 26px;
            font-weight: bold;
        }

        .prediction-item .outcome-value.high {
            color: var(--color-success);
        }

        .prediction-item .outcome-value.medium {
            color: var(--color-warning);
        }

        .prediction-item .outcome-value.low {
            color: var(--color-error);
        }

        .prediction-item .outcome-secondary {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-size: 12px;
            color: var(--color-text-secondary);
            margin-top: 6px;
        }

        .prediction-item .outcome-secondary b {
            color: var(--color-text);
        }

        .prediction-item .provider-why {
            font-size: 12px;
            color: var(--color-text-secondary);
            line-height: 1.5;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--color-divider);
        }

        .prediction-caveat {
            font-size: 12px;
            color: var(--color-text-muted);
            margin: 14px 4px 0;
            line-height: 1.5;
        }

        .prediction-methodology {
            margin: 12px 4px 0;
            font-size: 13px;
            color: var(--color-text-secondary);
        }

        .prediction-methodology summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--color-primary);
        }

        .prediction-methodology p {
            margin-top: 8px;
            line-height: 1.6;
        }

        @media (max-width: 768px) {

            .grid-cards,
            .compliance-score,
            .search-group {
                flex-direction: column;
                grid-template-columns: 1fr;
            }

            .score-gauge {
                margin: 0 auto 20px;
            }
        }

        /* FAQ Accordion Styles */
        .faq-item {
            cursor: pointer;
            user-select: none;
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 1px solid var(--color-border);
        }

        .faq-item:last-child {
            border-bottom: none;
        }

        .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 0;
            transition: color 0.2s ease;
        }

        .faq-item:hover .faq-header {
            color: var(--color-primary);
        }

        .faq-header h3 {
            margin: 0;
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text);
        }

        .faq-item:hover .faq-header h3 {
            color: var(--color-primary);
        }

        .faq-toggle-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 12px;
            font-size: 18px;
            color: var(--color-text);
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .faq-item.open .faq-toggle-icon {
            transform: rotate(45deg);
            color: var(--color-primary);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .faq-item.open .faq-answer {
            max-height: 2000px;
            opacity: 1;
            margin-bottom: 20px;
        }

        .faq-answer p {
            font-size: 13px;
            line-height: 1.7;
            color: var(--color-text-secondary);
            margin: 0;
        }

        .faq-answer a {
            color: var(--color-primary);
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 48px 20px;
            margin-top: 24px;
        }

        footer p {
            font-size: 13px;
            color: var(--color-text-secondary);
            margin-bottom: 20px;
        }

        footer a {
            color: var(--color-primary);
            text-decoration: none;
        }

        footer a:hover { text-decoration: underline; }

        footer img {
            max-width: 180px;
            opacity: 0.8;
        }

        /* Beta banner */
        .beta-banner {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--color-primary);
            color: var(--color-on-primary);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: background 0.2s ease;
            vertical-align: middle;
        }

        .beta-banner:hover {
            background: var(--color-primary-hover);
            color: var(--color-on-primary);
            text-decoration: none;
        }

        /* Related tools — compact tooltip layout */
        .related-tools-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        .tool-chip {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid var(--color-border);
            transition: background 0.18s ease, border-color 0.18s ease;
            white-space: nowrap;
            cursor: pointer;
            background: var(--color-surface);
            color: var(--color-text);
        }

        .tool-chip.active-tool {
            background: var(--color-border);
            color: var(--color-text-disabled);
            cursor: default;
            pointer-events: none;
        }

        .tool-chip:not(.active-tool):hover,
        .tool-chip:not(.active-tool):focus-visible {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-on-primary);
        }

        /* Tooltip */
        .tool-chip .chip-tip {
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-tooltip-bg);
            color: var(--color-on-tooltip);
            font-size: 12px;
            font-weight: 400;
            padding: 6px 10px;
            border-radius: 6px;
            white-space: nowrap;
            max-width: 240px;
            white-space: normal;
            text-align: center;
            z-index: 100;
            pointer-events: none;
            line-height: 1.4;
        }

        .tool-chip .chip-tip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: var(--color-tooltip-bg);
        }

        /* Mobile: chips become inline text links with pipes */
        @media (max-width: 600px) {
            .related-tools-row {
                display: block;
                line-height: 2;
            }

            .tool-chip {
                display: inline;
                padding: 0;
                border: none;
                border-radius: 0;
                background: transparent;
                font-size: 13px;
                font-weight: 500;
                color: var(--color-primary);
            }

            .tool-chip.active-tool {
                color: var(--color-text-disabled);
                background: transparent;
                border: none;
            }

            .tool-chip:not(.active-tool):hover {
                background: transparent;
                border: none;
                color: var(--color-primary-hover);
                text-decoration: underline;
            }

            .tool-chip .chip-tip { display: none !important; }

            .tool-chip-sep {
                color: var(--color-text-muted);
                margin: 0 4px;
            }
        }

        /* Hide separators on desktop */
        @media (min-width: 601px) {
            .tool-chip-sep { display: none; }
        }

        /* Utility Classes */
        .text-secondary {
            color: var(--color-text-secondary);
        }

        .text-muted {
            color: var(--color-text-muted);
        }

        .form-input {
            width: 100%;
            padding: 14px;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            margin-bottom: 12px;
            background: var(--color-input-bg);
            color: var(--color-text);
        }

        .form-input::placeholder {
            color: var(--color-text-muted);
        }

        textarea.form-input {
            resize: vertical;
        }

        /* Tool heading + description block */
        .tool-header { margin-bottom: 24px; }
        /* h1 is the canonical tool header on tool pages (only H1 per page).
           h2 retained for any partials that still use the old element. */
        .tool-header h1,
        .tool-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--color-text); }
        .tool-header p  { font-size: 15px; color: var(--color-text-secondary); margin: 0; }

        /* Scan progress bar — sits below the Check Domain button while the homepage scan
           runs. Uses the native <progress> element for free progressbar a11y semantics. */
        .scan-progress {
            margin-top: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .scan-progress[hidden] { display: none; }
        .scan-progress-label {
            font-size: 13px;
            color: var(--color-text-muted);
        }
        .scan-progress-bar {
            width: 100%;
            height: 8px;
            border: none;
            border-radius: 4px;
            background: var(--color-gauge-bg);
            -webkit-appearance: none;
            appearance: none;
            overflow: hidden;
        }
        /* Track styling per browser. */
        .scan-progress-bar::-webkit-progress-bar {
            background: var(--color-gauge-bg);
            border-radius: 4px;
        }
        .scan-progress-bar::-webkit-progress-value {
            background: var(--color-primary);
            border-radius: 4px;
            transition: width 0.25s ease;
        }
        .scan-progress-bar::-moz-progress-bar {
            background: var(--color-primary);
            border-radius: 4px;
        }

        /* Share bar */
        .share-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .share-social-btn, .share-copy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            text-decoration: none;
            transition: border-color 0.15s, background 0.15s;
            flex-shrink: 0;
            cursor: pointer;
            padding: 0;
            font-size: 18px;
            line-height: 1;
        }
        .share-social-btn:hover, .share-copy-btn:hover {
            border-color: var(--color-primary);
            background: var(--color-input-bg);
        }
        .share-social-btn svg { width: 18px; height: 18px; }
        .share-bar-confirm { font-size: 13px; color: var(--color-success); }

        /* ─────────────────────────────────────────────────────────────────
           Topbar — sticky site header housing the brand, the "you are here"
           pill, the 🔧 Tools mega-menu trigger, and the theme toggle.
           Replaces the legacy bottom-of-page Related Tools block.
           ───────────────────────────────────────────────────────────────── */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 60;
            background: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
        }
        .topbar-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .topbar-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--color-text);
            font-weight: 700;
            font-size: 15px;
            margin-right: auto;
            white-space: nowrap;
        }
        .topbar-brand:hover { color: var(--color-primary); }
        .topbar-brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 7px;
            background: var(--color-primary);
            color: var(--color-on-primary);
            font-size: 13px;
            font-weight: 800;
            flex-shrink: 0;
        }
        .topbar-here {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--color-text-secondary);
            padding: 4px 10px;
            border: 1px solid var(--color-border);
            border-radius: 16px;
            background: var(--color-input-bg);
            white-space: nowrap;
            max-width: 40vw;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .topbar-here-dot {
            width: 6px;
            height: 6px;
            background: var(--color-primary);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .topbar-tools-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--color-primary);
            color: var(--color-on-primary);
            border: none;
            border-radius: 8px;
            padding: 8px 14px;
            font: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.15s ease;
            min-height: 36px;
        }
        .topbar-tools-btn:hover {
            background: var(--color-primary-hover);
        }
        .topbar-tools-btn:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
        .topbar-tools-chev { transition: transform 0.2s ease; }
        .topbar-tools-btn[aria-expanded="true"] .topbar-tools-chev { transform: rotate(180deg); }

        .topbar-theme-btn {
            background: transparent;
            border: 1px solid var(--color-border);
            border-radius: 50%;
            width: 38px;
            height: 38px;
            cursor: pointer;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.15s ease, background-color 0.15s ease;
            flex-shrink: 0;
        }
        .topbar-theme-btn:hover {
            border-color: var(--color-primary);
            background: var(--color-input-bg);
        }
        .topbar-theme-btn:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        /* Hide the "you are here" pill on small screens to keep the topbar
           single-row. Keep the home-link, trigger, and theme toggle. */
        @media (max-width: 720px) {
            .topbar-here { display: none; }
            .topbar-inner { padding: 10px 14px; gap: 8px; }
        }

        /* ─────────────────────────────────────────────────────────────────
           Mega-menu panel + backdrop
           ───────────────────────────────────────────────────────────────── */
        .topbar-mega {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin: 0 auto;
            max-width: 1200px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-top: none;
            border-radius: 0 0 12px 12px;
            box-shadow: var(--shadow-md), 0 24px 48px -12px rgba(0,0,0,0.18);
            padding: 20px 24px 22px;
            transform-origin: top;
            transform: scaleY(0.98) translateY(-4px);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.15s ease, opacity 0.15s ease;
            max-height: calc(100vh - 70px);
            overflow-y: auto;
        }
        .topbar-mega[data-open="true"] {
            transform: scaleY(1) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .topbar-mega-search {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: var(--color-input-bg);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            margin-bottom: 18px;
        }
        .topbar-mega-search-icon {
            font-size: 16px;
            color: var(--color-text-muted);
        }
        .topbar-mega-search input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font: inherit;
            font-size: 14px;
            color: var(--color-text);
            min-width: 0;
        }
        .topbar-mega-search input::placeholder { color: var(--color-text-muted); }
        .topbar-mega-search input:focus-visible { outline: none; }
        .topbar-mega-search:focus-within {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-focus-ring);
        }

        /* Featured strip — the 4 headline tools rendered above the columns.
           Surfaces ~80% of traffic at a glance; the rest live in the grid below. */
        .topbar-mega-featured {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 22px;
        }
        .topbar-mega-featured[hidden] { display: none; }
        .topbar-mega-featured-tile[hidden] { display: none; }
        .topbar-mega-featured-tile {
            display: grid;
            grid-template-columns: 22px 1fr;
            grid-template-rows: auto auto;
            column-gap: 10px;
            align-items: center;
            padding: 12px 14px;
            background: var(--color-primary-pale, rgba(255, 153, 0, 0.08));
            border: 1px solid rgba(255, 153, 0, 0.22);
            border-radius: 10px;
            text-decoration: none;
            color: var(--color-text);
            transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
        }
        .topbar-mega-featured-tile:hover {
            border-color: var(--color-primary);
            background: rgba(255, 153, 0, 0.14);
        }
        .topbar-mega-featured-tile:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }
        .topbar-mega-featured-tile--primary {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: #fff;
        }
        .topbar-mega-featured-tile--primary:hover {
            background: var(--color-primary-hover);
            border-color: var(--color-primary-hover);
        }
        .topbar-mega-featured-tile--here {
            outline: 2px solid var(--color-primary);
            outline-offset: -2px;
        }
        .topbar-mega-featured-emoji {
            grid-row: 1 / span 2;
            font-size: 20px;
            line-height: 1;
            text-align: center;
        }
        .topbar-mega-featured-label {
            font-weight: 600;
            font-size: 14px;
            line-height: 1.2;
        }
        .topbar-mega-featured-pitch {
            font-size: 12px;
            line-height: 1.3;
            opacity: 0.78;
        }
        .topbar-mega-featured-tile--primary .topbar-mega-featured-pitch { opacity: 0.92; }

        .topbar-mega-cols {
            display: grid;
            gap: 28px;
            grid-template-columns: repeat(4, 1fr);
        }
        /* Tablet: featured drops to 2×2, columns drop to 2. */
        @media (max-width: 800px) {
            .topbar-mega-featured { grid-template-columns: 1fr 1fr; gap: 8px; }
            .topbar-mega-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
        }
        /* Phone: featured stays 2×2 for thumb-reach. Each category becomes a
           full-width section with its tools laid out in a 2-column grid, so
           short labels (DKIM, BIMI, etc.) don't burn a whole row each. Sticky
           category headings keep orientation while scrolling.
           600px matches the breakpoint where the panel becomes a fixed sheet. */
        @media (max-width: 600px) {
            .topbar-mega-featured { grid-template-columns: 1fr 1fr; }
            .topbar-mega-featured-tile { padding: 10px 12px; }
            .topbar-mega-featured-pitch { display: none; }
            .topbar-mega-cols { grid-template-columns: 1fr; gap: 18px; }
            .topbar-mega-col-label {
                position: sticky;
                top: 0;
                background: var(--color-surface);
                padding: 8px 0 6px;
                margin-bottom: 6px;
                z-index: 1;
            }
            .topbar-mega-col ul {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2px 8px;
            }
            .topbar-mega-col li + li { margin-top: 0; }
            .topbar-mega-item { padding: 8px 8px; gap: 8px; }
            .topbar-mega-item-emoji { width: 18px; font-size: 15px; }
            .topbar-mega-item-label { font-size: 13.5px; line-height: 1.25; }
        }
        .topbar-mega-col[hidden] { display: none; }

        .topbar-mega-col-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--color-text);
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .topbar-mega-col-count {
            color: var(--color-text-muted);
            font-weight: 500;
            font-size: 11px;
            font-variant-numeric: tabular-nums;
        }

        .topbar-mega-col ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .topbar-mega-col li + li { margin-top: 2px; }
        .topbar-mega-col li[hidden] { display: none; }

        .topbar-mega-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 10px;
            min-height: 44px;
            border-radius: 6px;
            text-decoration: none;
            color: var(--color-text);
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.12s ease, color 0.12s ease;
        }
        .topbar-mega-item:hover {
            background: var(--color-input-bg);
            color: var(--color-primary);
        }
        .topbar-mega-item:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            background: var(--color-input-bg);
        }
        .topbar-mega-item-emoji {
            width: 22px;
            text-align: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .topbar-mega-item-label { flex: 1; min-width: 0; }
        .topbar-mega-item--here {
            background: var(--color-input-bg);
            color: var(--color-text-disabled);
            cursor: default;
        }
        .topbar-mega-item--here:hover {
            background: var(--color-input-bg);
            color: var(--color-text-disabled);
        }
        .topbar-mega-item-here-tag {
            margin-left: auto;
            font-size: 9px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: var(--color-badge-bg-info);
            color: var(--color-badge-text-info);
            padding: 1px 6px;
            border-radius: 8px;
            font-weight: 700;
        }

        .topbar-mega-empty {
            text-align: center;
            color: var(--color-text-muted);
            font-size: 14px;
            padding: 24px 0 8px;
        }

        .topbar-mega-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
            z-index: 55;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease;
        }
        .topbar-mega-backdrop[data-open="true"] {
            opacity: 1;
            pointer-events: auto;
        }
        [data-theme="dark"] .topbar-mega-backdrop,
        :root:not([data-theme="light"]) .topbar-mega-backdrop {
            background: rgba(0, 0, 0, 0.5);
        }

        /* Mobile: panel becomes a full-width slide-down sheet under the topbar. */
        @media (max-width: 600px) {
            .topbar-mega {
                position: fixed;
                top: 58px;
                left: 0; right: 0; bottom: 0;
                max-width: 100%;
                border-radius: 0;
                border-left: none;
                border-right: none;
                border-bottom: none;
                max-height: calc(100vh - 58px);
                padding: 16px;
            }
        }

        /* When the menu is open, prevent the page below from scrolling so the
           sheet feels like an overlay. Desktop is unaffected because the panel
           is short and the user expects normal page scroll behind it. */
        @media (max-width: 600px) {
            body.topbar-mega-locked { overflow: hidden; }
        }