/* ══════════════════════════════════════════════════════════
   Phase 5D.5 – Design Tokens  (Linear / Vercel / Stripe pass)
   ══════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ──────────────────────────────────────────── */
    --surface:          #ffffff;
    --surface-subtle:   #f8fafc;
    --surface-hover:    #f1f5f9;
    --bg-page:          #f1f5f9;

    /* ── Borders ────────────────────────────────────────────── */
    --border:           #e2e8f0;
    --border-subtle:    #f1f5f9;
    --border-strong:    #cbd5e1;

    /* ── Text ───────────────────────────────────────────────── */
    --text-primary:     #0f172a;
    --text-secondary:   #475569;
    --text-muted:       #94a3b8;
    --text-placeholder: #94a3b8;

    /* ── Brand / Primary — dark navy/slate, no violet ──────── */
    --primary:          #0f172a;
    --primary-hover:    #1e293b;
    --primary-light:    #f8fafc;
    --primary-border:   #cbd5e1;
    --primary-text:     #1e293b;
    /* gradient used only for the scan progress bar fill */
    --primary-gradient: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);

    /* ── Blue / Technical-info ──────────────────────────────── */
    --info-light:       #eff6ff;
    --info-border:      #bfdbfe;
    --info-text:        #2563eb;
    --info-dark:        #1e3a5f;

    /* ── Green / Success ────────────────────────────────────── */
    --success:          #16a34a;
    --success-cta:      #16a34a;
    --success-cta-hover:#15803d;
    --success-light:    #f0fdf4;
    --success-border:   #86efac;
    --success-text:     #166534;
    --success-muted:    #dcfce7;
    --success-dark:     #14532d;

    /* ── Amber / Warning ────────────────────────────────────── */
    --warning:          #f59e0b;
    --warning-light:    #fffbeb;
    --warning-border:   #fde68a;
    --warning-text:     #92400e;

    /* ── Red / Danger ───────────────────────────────────────── */
    --danger:           #dc2626;
    --danger-dark:      #b91c1c;
    --danger-light:     #fef2f2;
    --danger-border:    #fecaca;
    --danger-text:      #991b1b;

    /* ── Radius — tighter, more precise ────────────────────── */
    --radius-xs:        3px;
    --radius-sm:        4px;
    --radius-md:        6px;
    --radius-lg:        10px;
    --radius-xl:        12px;
    --radius-pill:      9999px;

    /* ── Shadows — light, warm-neutral ─────────────────────── */
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:        0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:        0 8px 24px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-modal:     0 20px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
    --focus-ring:       0 0 0 2px #fff, 0 0 0 4px #94a3b8;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

    /* ── Phase 5H polish: type scale (px, root-relative) ───── */
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-md:   13px;
    --fs-base: 14px;
    --fs-lg:   16px;
    --fs-xl:   20px;
    --fs-2xl:  28px;
    --fs-3xl:  44px;

    /* ── Phase 5H polish: spacing scale ────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ── Phase 5H polish: card chrome ──────────────────────── */
    --card-bg:        var(--surface);
    --card-border:    1px solid var(--border);
    --card-radius:    var(--radius-lg);
    --card-pad-y:     var(--space-5);
    --card-pad-x:     var(--space-5);
    --card-shadow:    0 1px 2px rgba(15, 23, 42, 0.04);
    --card-shadow-hi: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);

    /* ── Phase 5H polish: semantic issue severity roles ───── */
    /* clear   = 0 of this issue (good)
       attention = a few — soft amber
       warn   = several — orange
       critical = blocking — red */
    --issue-clear-bg:        var(--surface);
    --issue-clear-border:    var(--border);
    --issue-clear-text:      var(--text-muted);
    --issue-clear-accent:    #cbd5e1;

    --issue-attention-bg:     #fffbeb;
    --issue-attention-border: #fde68a;
    --issue-attention-text:   #92400e;
    --issue-attention-accent: #f59e0b;

    --issue-warn-bg:          #fff7ed;
    --issue-warn-border:      #fed7aa;
    --issue-warn-text:        #9a3412;
    --issue-warn-accent:      #f97316;

    --issue-critical-bg:      #fef2f2;
    --issue-critical-border:  #fecaca;
    --issue-critical-text:    #991b1b;
    --issue-critical-accent:  #dc2626;

    /* ── Phase 5H polish: panel tints (Linear/Vercel-style faint surfaces) ── */
    /* Hero panel stays on --surface (white). Other panels get a subtle tint
       so they read as separate documents without colliding with the cells inside. */
    --panel-tint-cool:    #f7f9fc;  /* faint slate — used for the Issues panel */
    --panel-tint-success: #f4faf6;  /* faint mint  — used for Domain Conventions */
    --panel-tint-warm:    #fffaf3;  /* faint cream — used for Quick SEO Fixes */

    /* Phase 5I — height of the sticky warnings bar. Used so the
       comparison-grid sticky <th> can sit immediately below it. */
    --fb-warnings-h: 50px;
}

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

body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - 40px);
}

/* ── Sidebar — dark anchor ───────────────────────────────── */

.sidebar {
    width: 220px;
    min-width: 220px;
    background: #0f172a;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 28px 0 24px;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 0 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 16px;
}

.sidebar-brand h1 {
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
}

.sidebar-brand p {
    font-size: 0.74em;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.5;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
}

.nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: rgba(255, 255, 255, 0.52);
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    box-shadow: none;
    line-height: 1.4;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    transform: none;
    box-shadow: none;
}

.nav-btn.active {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* ── Main content area ───────────────────────────────────── */

.main-area {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.main-content {
    padding: 40px;
}

.editor-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.editor-panel {
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.panel-header h2 {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-header .icon {
    font-size: 1em;
}

textarea {
    width: 100%;
    min-height: 400px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface-subtle);
    color: var(--text-primary);
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    background: var(--surface);
}

#inputHtml {
    color: var(--text-primary);
}

#outputHtml {
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.button-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

/* ── Base button reset ───────────────────────────────────── */

button {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
    box-shadow: none;
    font-family: var(--font-sans);
}

/* ── Primary brand button ────────────────────────────────── */

.btn-process {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.btn-process:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

/* ── Utility secondary (Copy Output) ─────────────────────── */

.btn-copy {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-copy:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

/* ── Destructive ghost (Clear All) ───────────────────────── */

.btn-clear {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger-border);
}

.btn-clear:hover {
    background: var(--danger-light);
    border-color: #fca5a5;
}

/* ── Stat items ──────────────────────────────────────────── */

.stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.stat-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    padding: 14px 22px;
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 150px;
    box-shadow: var(--shadow-xs);
}

.stat-value {
    font-size: 1.8em;
    font-weight: 700;
    display: block;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

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

.info-box {
    background: #f0fdfa;
    border-left: 3px solid #14b8a6;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    margin-top: 28px;
}

.info-box h3 {
    color: #134e4a;
    margin-bottom: 10px;
    font-size: 0.95em;
    font-weight: 600;
}

.info-box ul {
    list-style: none;
    padding-left: 0;
}

.info-box li {
    color: #115e59;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
    font-size: 0.88em;
    line-height: 1.5;
}

.info-box li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #14b8a6;
    font-weight: 600;
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--text-primary);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-16px);
    transition: all 0.22s;
    z-index: 1000;
    font-size: 0.88em;
    font-weight: 500;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        padding: 16px 0 12px;
    }

    .sidebar-brand {
        padding: 0 16px 14px;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 10px;
        gap: 6px;
    }

    .nav-btn {
        width: auto;
        flex: 1;
        text-align: center;
        padding: 8px 10px;
        font-size: 0.82em;
    }

    .editor-section {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 20px;
    }

    textarea {
        min-height: 300px;
    }
}

.loading {
    display: none;
    text-align: center;
    margin: 20px 0;
}

.loading.active {
    display: block;
}

.spinner {
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Tab navigation ─────────────────────────────────────── */

.tab-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.70);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-shadow: none;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.90);
    border-color: rgba(255, 255, 255, 0.30);
    transform: none;
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    border-color: transparent;
    font-weight: 600;
}

/* ── Schema Scanner section ──────────────────────────────── */

.module-heading {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.module-description {
    color: var(--text-muted);
    font-size: 0.92em;
    margin-bottom: 28px;
    line-height: 1.5;
}

.schema-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
    max-width: 600px;
}

.schema-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85em;
}

input[type="url"] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface);
    color: var(--text-primary);
}

input[type="url"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* ── Mobile adjustments ──────────────────────────────────── */

@media (max-width: 768px) {
    .tab-nav {
        gap: 6px;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ── Schema Scanner results ──────────────────────────────── */

.scan-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.result-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    box-shadow: var(--shadow-xs);
}

.result-section h3 {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.result-label {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.84em;
    min-width: 120px;
    padding-top: 3px;
    flex-shrink: 0;
}

.result-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.result-value {
    color: var(--text-primary);
    font-size: 0.88em;
    word-break: break-all;
    line-height: 1.5;
}

.result-empty {
    color: var(--text-placeholder);
    font-size: 0.88em;
    font-style: italic;
}

.result-note {
    color: var(--warning-text);
    font-size: 0.84em;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-xs);
    line-height: 1.5;
}

.result-source {
    color: var(--text-placeholder);
    font-size: 0.84em;
    margin-top: 8px;
    font-style: italic;
}

/* ── Badges ──────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Schema scanner semantic badges */
.badge-found    { background: var(--success-muted); color: var(--success-dark); }
.badge-missing  { background: var(--danger-border);  color: var(--danger-text); }
.badge-warning  { background: #fef3c7;               color: var(--warning-text); }
.badge-proposal { background: var(--primary-light);  color: var(--primary-text); }
.badge-info     { background: var(--info-light);     color: var(--info-dark); }

/* Domain status badges — pill-shaped */
.badge-active {
    background: var(--success-muted);
    color: var(--success-dark);
    border-radius: var(--radius-pill);
}

.badge-inactive {
    background: var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
}

/* ── Type tags ───────────────────────────────────────────── */

.type-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.type-tag {
    background: var(--info-light);
    color: var(--info-text);
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.82em;
    font-weight: 500;
    border: 1px solid var(--info-border);
}

/* ── Page type display ───────────────────────────────────── */

.page-type-display {
    margin-bottom: 6px;
}

.page-type-label {
    font-size: 1em;
    font-weight: 700;
    color: var(--primary);
}

/* ── JSON-LD blocks ──────────────────────────────────────── */

.jsonld-block {
    margin-bottom: 16px;
}

.jsonld-block:last-child {
    margin-bottom: 0;
}

.jsonld-block-header {
    font-size: 0.88em;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.parse-error {
    color: var(--danger);
    font-size: 0.86em;
}

/* ── Code block ──────────────────────────────────────────── */

.code-block {
    background: #0f172a;
    color: #cbd5e1;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* ── Proposal section ────────────────────────────────────── */

.proposal-warning {
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    padding: 10px 13px;
    border-radius: var(--radius-xs);
    color: var(--warning-text);
    font-size: 0.86em;
    line-height: 1.6;
    margin-bottom: 12px;
}

.proposal-warning code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ── Server error panel ──────────────────────────────────── */

.server-error {
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
}

.server-error h3 {
    color: var(--danger-dark);
    margin-bottom: 10px;
    font-size: 0.95em;
    font-weight: 600;
}

.server-error p {
    color: var(--text-muted);
    margin-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.6;
}

.server-error .code-block {
    margin: 10px 0;
    font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════
   Domain SEO Scanner — Phase 4A
   ══════════════════════════════════════════════════════════ */

/* ── Section header ──────────────────────────────────────── */

.domain-list-section {
    margin-bottom: 28px;
}

.domain-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.domain-section-title {
    font-size: 0.70em;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ── Add Domain button ───────────────────────────────────── */

.btn-add-domain {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 7px 14px;
    font-size: 0.84em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-xs);
}

.btn-add-domain:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

/* ── Domain cards ────────────────────────────────────────── */

.domain-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.domain-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.domain-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.domain-name {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Domain meta rows ────────────────────────────────────── */

.domain-card-meta {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.domain-meta-row {
    font-size: 0.84em;
    color: var(--text-secondary);
    line-height: 1.5;
}

.domain-meta-label {
    font-weight: 500;
    color: var(--text-muted);
}

.domain-meta-value {
    color: var(--text-secondary);
}

.domain-meta-missing {
    color: var(--text-placeholder);
    font-style: italic;
}

.domain-link {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
}

.domain-link:hover {
    text-decoration: underline;
}

/* ── Domain card action buttons ──────────────────────────── */

.domain-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-scan-domain,
.btn-view-report,
.btn-toggle-domain,
.btn-delete-domain {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 11px;
    font-size: 0.80em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: none;
    background: var(--surface);
    color: var(--text-secondary);
}

.btn-scan-domain {
    background: var(--primary-light);
    color: var(--primary-text);
    border-color: var(--primary-border);
    cursor: not-allowed;
    opacity: 0.55;
}

.btn-view-report {
    background: var(--surface);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-toggle-domain {
    background: var(--info-light);
    color: var(--info-text);
    border-color: var(--info-border);
}

.btn-toggle-domain:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-delete-domain {
    background: var(--surface);
    color: var(--danger-text);
    border-color: var(--danger-border);
}

.btn-delete-domain:hover {
    background: var(--danger-light);
    border-color: #fca5a5;
}

/* ── Empty state ─────────────────────────────────────────── */

.domain-empty {
    background: var(--surface-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.90em;
    line-height: 1.7;
}

.domain-empty p {
    margin: 0 0 4px;
}

/* ── Loading / error states ──────────────────────────────── */

.domain-loading {
    color: var(--text-muted);
    font-size: 0.88em;
    padding: 16px 0;
}

.domain-server-offline {
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    color: var(--danger-text);
    font-size: 0.88em;
    line-height: 1.6;
}

.domain-server-offline code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ── Add Domain form ─────────────────────────────────────── */

.add-domain-form {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-top: 4px;
}

.add-domain-form .domain-section-title {
    margin-bottom: 16px;
}

.domain-form-row {
    margin-bottom: 13px;
}

.domain-form-label {
    display: block;
    font-size: 0.84em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.domain-form-optional {
    font-weight: 400;
    color: var(--text-placeholder);
}

.domain-form-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.90em;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.domain-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.domain-form-error {
    color: var(--danger-dark);
    font-size: 0.84em;
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    padding: 7px 11px;
    margin-bottom: 12px;
}

.domain-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* ── API-key field helpers (add/edit domain form) ───────── */

.domain-form-hint {
    font-size: 0.78em;
    color: var(--text-muted, #6b7280);
    margin: 6px 0 0;
    line-height: 1.4;
}

.domain-form-api-state {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85em;
}

.domain-form-api-state[hidden] {
    display: none;
}

.domain-form-api-state__label {
    color: var(--text-muted, #6b7280);
}

.domain-form-api-state__hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.domain-form-api-state__remove {
    margin-left: auto;
    background: none;
    border: 1px solid var(--danger-border, #fecaca);
    color: var(--danger-dark, #b91c1c);
    padding: 3px 10px;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.domain-form-api-state__remove:hover {
    background: var(--danger-light, #fee2e2);
}

.domain-form-api-state__remove:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Domain table (compact list view) ───────────────────── */

.domain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    margin-bottom: 4px;
}

.domain-table thead tr {
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
}

.domain-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.70em;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.domain-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.1s;
}

.domain-table tbody tr:last-child {
    border-bottom: none;
}

.domain-table tbody tr:hover {
    background: var(--surface-subtle);
}

.domain-table td {
    padding: 10px 12px;
    color: var(--text-primary);
    vertical-align: middle;
}

.domain-table-name {
    font-weight: 600;
    white-space: nowrap;
}

.domain-table-url {
    word-break: break-all;
    max-width: 260px;
}

.domain-table-actions {
    white-space: nowrap;
}

/* Table action buttons — override card button sizing */
.btn-table-action {
    padding: 4px 10px !important;
    font-size: 0.78em !important;
    border-radius: var(--radius-sm);
    margin-right: 4px;
    box-shadow: none;
}

.btn-table-action:last-child {
    margin-right: 0;
}

.btn-table-action:hover {
    transform: none;
}

/* Update Scan button — now active (not disabled) */
.btn-scan-domain {
    background: var(--primary-light);
    color: var(--primary-text);
    border-color: var(--primary-border);
    cursor: pointer;
    opacity: 1;
}

.btn-scan-domain:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-view-report:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

/* ══════════════════════════════════════════════════════════
   Scan progress panel — Phase 4B
   ══════════════════════════════════════════════════════════ */

.scan-progress-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-xs);
}

/* ── Header row: title + state label ─────────────────────── */

.scan-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.90em;
}

.scan-state-label {
    font-size: 0.72em;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.scan-state-starting {
    background: var(--info-light);
    color: var(--info-dark);
}

.scan-state-running {
    background: var(--warning-light);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.scan-state-done {
    background: var(--success-muted);
    color: var(--success-dark);
}

.scan-state-error {
    background: var(--danger-border);
    color: var(--danger-text);
}

.scan-state-saved {
    background: var(--border);
    color: var(--text-secondary);
}

/* ── Progress bar ────────────────────────────────────────── */

.scan-progress-bar-wrap {
    background: var(--border);
    border-radius: var(--radius-pill);
    height: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.scan-progress-bar-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--radius-pill);
    width: 0%;
    transition: width 0.4s ease;
}

/* ── Counter text ────────────────────────────────────────── */

.scan-progress-stats {
    font-size: 0.82em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ── Scan complete summary ───────────────────────────────── */

.scan-summary-box {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-top: 12px;
}

.scan-summary-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.scan-summary-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

/* Legacy boxed variant — still used by Issues panel cells */
.scan-summary-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--issue-clear-bg);
    border: 1px solid var(--issue-clear-border);
    border-left: 3px solid var(--issue-clear-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
    text-align: left;
    transition: background 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.scan-summary-cell--good {
    background: var(--issue-clear-bg);
    border-color: var(--issue-clear-border);
    border-left-color: var(--success);
}

.scan-summary-cell--warn {
    background: var(--issue-warn-bg);
    border-color: var(--issue-warn-border);
    border-left-color: var(--issue-warn-accent);
}

.scan-summary-cell:hover {
    background: var(--surface-hover);
}

.scan-summary-cell--good:hover { background: var(--success-light); }
.scan-summary-cell--warn:hover { background: #ffedd5; }

.scan-summary-value {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 28px;
}

.scan-summary-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.3;
    text-align: right;
    flex: 1;
}

/* Stat variant — used in the hero strip (Total / Analyzed / Failed).
   No border, no box; centered number + uppercase label. */
.scan-summary-cell--stat {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: var(--space-2) var(--space-4);
    min-height: 0;
    text-align: center;
}
.scan-summary-cell--stat:first-child { border-left: 0; }
.scan-summary-cell--stat:hover { background: var(--surface-subtle); }

.scan-summary-cell--stat .scan-summary-value {
    font-size: var(--fs-2xl);
    color: var(--text-primary);
    min-width: 0;
}

.scan-summary-cell--stat .scan-summary-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
}

.scan-summary-cell--stat.scan-summary-cell--good    .scan-summary-value { color: var(--success-text); }
.scan-summary-cell--stat.scan-summary-cell--warn    .scan-summary-value { color: var(--issue-warn-text); }
/* Neutral — intentional exclusions (e.g. disCache skipped). Muted text, no colour signal. */
.scan-summary-cell--stat.scan-summary-cell--neutral .scan-summary-value { color: var(--text-muted); }
.scan-summary-cell--stat.scan-summary-cell--neutral .scan-summary-label { color: var(--text-muted); }

/* SEO Health hero — full-width, left-aligned, no card-in-card */
.seo-health-row {
    display: block;
    margin: var(--space-4) 0 0;
}

.seo-health-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: end;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Severity tints removed — accent stays in the top-stripe + score color only.
   Severity classes still mark the card so descendant rules below can vary
   color by status. */

.seo-health-score {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    align-self: center;
}

.seo-health-card--good     .seo-health-score { color: var(--success); }
.seo-health-card--needs    .seo-health-score { color: var(--issue-attention-accent); }
.seo-health-card--critical .seo-health-score { color: var(--issue-critical-accent); }

.seo-health-status {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    align-self: end;
}

.seo-health-card--good     .seo-health-status { color: var(--success-text); }
.seo-health-card--needs    .seo-health-status { color: var(--issue-attention-text); }
.seo-health-card--critical .seo-health-status { color: var(--issue-critical-text); }

.seo-health-progress {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: end;
}

.seo-health-progress-track {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    overflow: hidden;
}

.seo-health-progress-bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-health-progress-bar--good     { background: var(--success); }
.seo-health-progress-bar--needs    { background: var(--issue-attention-accent); }
.seo-health-progress-bar--critical { background: var(--issue-critical-accent); }

.seo-empty-state {
    margin: 10px 0 6px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    font-size: 0.88em;
    color: var(--text-secondary);
}

/* Simple tooltip */
.has-tooltip {
    position: relative;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 6px;
    max-width: 240px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.94);
    color: #f9fafb;
    font-size: 0.72em;
    line-height: 1.4;
    white-space: normal;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
    z-index: 20;
}

.has-tooltip:hover::after {
    opacity: 1;
}

.scan-summary-note {
    font-size: 0.80em;
    color: var(--text-placeholder);
    font-style: italic;
}

/* ── Scan error box ──────────────────────────────────────── */

.scan-error-box {
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-top: 10px;
    font-size: 0.88em;
    color: var(--danger-text);
    line-height: 1.6;
}

/* ── Summary card click-to-filter ───────────────────────── */

.scan-summary-cell--clickable {
    cursor: pointer;
}

.scan-summary-cell--clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.scan-summary-cell--active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

.scan-summary-cell--active .scan-summary-value,
.scan-summary-cell--active .scan-summary-label {
    color: #ffffff !important;
}

/* Stat-variant active state — the hero cells. Use a subtle outline
   instead of the dark fill (the hero panel already has its own accent stripe). */
.scan-summary-cell--stat.scan-summary-cell--active {
    background: var(--surface-hover) !important;
    border-color: transparent !important;
    border-left-color: var(--border-subtle) !important;
    box-shadow: inset 0 -2px 0 0 var(--primary);
}

.scan-summary-cell--stat.scan-summary-cell--active .scan-summary-value,
.scan-summary-cell--stat.scan-summary-cell--active .scan-summary-label {
    color: var(--text-primary) !important;
}

/* ── Phase 4C: Report viewer ──────────────────────────────── */

.report-loading {
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0;
    font-size: 0.88em;
}

/* Row count + export action row */
.report-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    flex-wrap: wrap;
}

.report-row-count {
    font-size: 0.78em;
    color: var(--text-placeholder);
    margin: 0;
}

#reportFilterBadge {
    min-height: 0;
    margin: 0 0 4px;
}

.report-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    color: var(--text-secondary);
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
}

.report-filter-badge strong {
    color: var(--text-primary, var(--text));
    font-weight: 600;
}

.report-filter-badge__reset {
    color: var(--accent, #3b82f6);
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
}

.report-filter-badge__reset:hover {
    text-decoration: underline;
}

.report-export-bar {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.btn-export {
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.78em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-export:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-export--csv {
    background: var(--info-light);
    border-color: var(--info-border);
    color: var(--info-text);
}

.btn-export--csv:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Table wrapper */
.report-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* Main results table */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}

.report-table thead {
    background: var(--surface-subtle);
}

.report-table th {
    padding: 7px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: 0.70em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--text-primary);
    line-height: 1.4;
}

.report-table tbody tr:last-child td {
    border-bottom: none;
}

.report-table tbody tr:hover td {
    background: var(--surface-subtle);
}

/* Row state classes */
.report-row--warn td {
    background: #fffbf0;
}

.report-row--warn:hover td {
    background: #fef9e7;
}

.report-row--error td {
    background: var(--danger-light);
}

.report-row--error:hover td {
    background: #fff5f5;
}

/* Column widths — Status column removed */
.col-url       { min-width: 160px; max-width: 220px; }
.col-title     { min-width: 120px; max-width: 180px; }
.col-desc      { min-width: 130px; max-width: 200px; }
.col-canonical { width: 68px; text-align: center; }
.col-h1        { min-width: 100px; max-width: 160px; }
.col-schema    { min-width: 90px; }
.col-warnings  { min-width: 160px; }  /* kept wide — text-heavy column */

/* URL link */
.report-url-link {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
    font-size: 0.9em;
}

.report-url-link:hover {
    text-decoration: underline;
}

/* Status badges */
.report-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.74em;
    font-weight: 600;
    white-space: nowrap;
}

.report-badge--ok {
    background: var(--success-muted);
    color: var(--success-dark);
}

.report-badge--error {
    background: var(--danger-border);
    color: var(--danger-text);
}

/* Cell helpers */
.report-cell-missing {
    color: var(--text-placeholder);
}

.report-cell-ok {
    color: var(--text-placeholder);
}

.report-yes {
    color: var(--success-text);
    font-weight: 600;
    cursor: default;
    text-decoration: underline dotted var(--success-border);
}

.report-warnings {
    color: var(--warning-text);
    font-size: 0.86em;
    word-break: break-word;
}

.report-error-msg {
    color: var(--danger-text);
    font-style: italic;
    font-size: 0.86em;
}

.report-empty {
    text-align: center;
    color: var(--text-placeholder);
    padding: 20px;
    font-style: italic;
    font-size: 0.88em;
}

/* ── Phase 4F: SEO Issues Overview panel ─────────────────── */

.seo-issues-panel {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 12px 0 0;
}

.seo-issues-title {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 9px;
}

.seo-issues-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Base row — shared by both button and div variants */
.seo-issue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.84em;
    text-align: left;
    background: transparent;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* Interactive rows (count > 0) */
button.seo-issue-item {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

button.seo-issue-item:hover {
    background: var(--surface);
    border-color: var(--border);
}

/* Active (currently filtered) state */
.seo-issue-item--active {
    background: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
}

.seo-issue-item--active .seo-issue-label {
    color: var(--primary-text);
    font-weight: 600;
}

/* Warning rows (count > 0) */
.seo-issue-item--warn .seo-issue-label {
    color: var(--text-primary);
}

.seo-issue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 0.80em;
    font-weight: 600;
    background: var(--danger-border);
    color: var(--danger-text);
    flex-shrink: 0;
}

/* Zero-count rows — muted and non-interactive */
.seo-issue-item--ok {
    opacity: 0.40;
    cursor: default;
}

.seo-issue-item--ok .seo-issue-label {
    color: var(--text-muted);
}

.seo-issue-count--ok {
    background: var(--border);
    color: var(--text-placeholder);
}

/* ── Phase 5A: Fix Brief column & overlay ────────────────── */

/* Table: Fix column */
.col-fix {
    width: 82px;
    text-align: center;
    white-space: nowrap;
}

.btn-fix-brief {
    padding: 3px 9px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--primary-text);
    font-size: 0.76em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.btn-fix-brief:hover {
    background: var(--surface-hover);
    border-color: var(--text-muted);
}

/* Overlay backdrop — wide centered modal (Phase 5D.2b) */
.fix-brief-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Wide modal panel — centered, capped at 1160px */
.fix-brief-panel {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-modal);
    width: min(1160px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.fix-brief-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 22px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
    gap: 12px;
}

.fix-brief-title {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.fix-brief-url {
    font-size: 0.78em;
    color: var(--text-muted);
    margin: 0;
    word-break: break-all;
}

.fix-brief-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.2em;
    line-height: 1;
    color: var(--text-placeholder);
    cursor: pointer;
    padding: 2px 5px;
    margin-top: 1px;
    transition: color 0.12s;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.fix-brief-close:hover {
    color: var(--text-secondary);
    background: var(--surface-hover);
}

/* Body — single scroll container, no horizontal overflow */
.fix-brief-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    padding: 0 22px 20px;
}

/* ══════════════════════════════════════════════════════════
   Phase 5D.3 – Comparison Grid
   ══════════════════════════════════════════════════════════ */

/* Wrapper adds top spacing before the grid */
.fix-cg-wrap {
    margin-top: 16px;
}

/* Grid heading above the table */
.fix-cg-heading {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
}

/* The comparison table */
.fix-cg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85em;
}

/* Column widths + vertical separators */
.fix-cg-th--field    { width: 160px; border-right: 1px solid var(--border); }
.fix-cg-th--current  { width: 34%;   border-right: 1px solid var(--border); }
/* .fix-cg-th--suggested fills remaining space */

/* Header row — sticky within .fix-brief-body scroll container. */
.fix-cg-th {
    padding: 6px 10px;
    text-align: left;
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-subtle);
    position: sticky;
    top: var(--fb-warnings-h, 0px);
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--border);
}

/* Data rows */
.fix-cg-row td {
    padding: 9px 10px;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.fix-cg-row:last-child td {
    border-bottom: none;
}

/* Zebra rows */
.fix-cg-row:nth-child(even) td {
    background: var(--surface-subtle);
}

/* Rows with a heuristic suggestion — softly highlighted
   Use higher specificity so this always wins over zebra striping. */
tr.fix-cg-row.fix-cg-row--has-fix td {
    background: var(--success-light);
}

tr.fix-cg-row.fix-cg-row--has-fix td.fix-cg-td-suggested {
    background: var(--success-muted);
}

/* Field name cell */
.fix-cg-td-field {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: top;
    font-size: 0.92em;
    border-right: 1px solid var(--border);
}

.badge-impact {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.badge-impact.high {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.badge-impact.medium {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.badge-impact.low {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}

/* Source badge stacks below the field label */
.fix-cg-td-field .fix-sf-source {
    display: block;
    margin-top: 4px;
}

/* Current value cell */
.fix-cg-td-current {
    color: var(--text-primary);
    word-break: break-word;
    border-right: 1px solid var(--border);
}

/* Missing current values stand out with a soft danger tint */
.fix-cg-td-current .fix-field-missing {
    display: inline-block;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    background: var(--danger-light);
    border-left: 3px solid var(--danger-border);
    color: var(--danger-text);
    font-style: normal;
    font-weight: 500;
}

/* Technical / URL fields */
tr:has([data-sf-field="canonical"]) .fix-cg-td-current .fix-field-value,
tr:has([data-sf-field="og_image"])  .fix-cg-td-current .fix-field-value {
    font-family: var(--font-mono);
    font-size: 0.82em;
    line-height: 1.55;
    word-break: break-all;
}

/* Suggested / editable cell */
.fix-cg-td-suggested {
    vertical-align: top;
}

.fix-cg-td-suggested .fix-sf-input,
.fix-cg-td-suggested .fix-sf-textarea {
    width: 100%;
    margin-top: 0;
}

/* Schema current-value cell */
.fix-cg-schema-preview {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    background: #0f172a;
    color: #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    min-height: 240px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

tr:has([data-sf-field="schema"]) .fix-cg-td-current {
    height: 1px;
}

/* Responsive: linearise rows below 700px */
@media (max-width: 700px) {
    .fix-brief-panel {
        width: 100%;
        max-height: 94vh;
        border-radius: var(--radius-md);
    }

    .fix-brief-body {
        padding: 0 14px 14px;
    }

    .fix-cg-table,
    .fix-cg-table thead,
    .fix-cg-table tbody,
    .fix-cg-table tr,
    .fix-cg-table th,
    .fix-cg-table td {
        display: block;
        width: 100%;
    }

    .fix-cg-table thead {
        display: none;
    }

    .fix-cg-row {
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .fix-cg-row td {
        border-bottom: 1px solid var(--border-subtle);
        padding: 7px 10px;
    }

    .fix-cg-row td::before {
        display: block;
        font-size: 0.70em;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-placeholder);
        margin-bottom: 3px;
    }

    .fix-cg-td-field::before   { content: 'Field'; }
    .fix-cg-td-current::before { content: 'Current'; }
    .fix-cg-td-suggested::before { content: 'Suggested Fix'; }
}

.fix-brief-section-title {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 9px;
}

/* Field table */
.fix-brief-fields {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-bottom: 12px;
}

.fix-brief-fields td {
    padding: 5px 8px;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.fix-brief-fields tr:last-child td {
    border-bottom: none;
}

.fix-field-label {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    width: 110px;
    font-size: 0.92em;
}

.fix-field-value {
    color: var(--text-primary);
    word-break: break-word;
}

.fix-field-missing {
    color: var(--danger);
    font-style: italic;
}

/* Warnings block */
.fix-brief-warnings {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 4px solid #f97316;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 0.82em;
    color: var(--warning-text);
}

.fix-brief-warnings strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.fix-brief-warnings-list {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 1em;
}

/* Prompt textarea */
.fix-brief-prompt {
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    font-family: var(--font-mono);
    font-size: 0.76em;
    line-height: 1.65;
    color: var(--text-secondary);
    resize: vertical;
    margin-bottom: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fix-brief-prompt:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    background: var(--surface);
}

/* SERP preview block in Fix Brief */
.serp-toggle-wrap {
    margin-top: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 8px 10px;
}

.serp-toggle-summary {
    cursor: pointer;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    outline: none;
}

.serp-preview {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 10px 12px;
}

.serp-title {
    color: #1a0dab;
    font-size: 1.06em;
    line-height: 1.3;
    margin-bottom: 4px;
    font-weight: 500;
}

.serp-url {
    color: #188038;
    font-size: 0.82em;
    margin-bottom: 4px;
    word-break: break-all;
}

.serp-desc {
    color: #4b5563;
    font-size: 0.85em;
    line-height: 1.45;
}

.fix-cg-td-serp {
    padding: 8px 10px;
    background: #ffffff;
    border-right: none;
}

.serp-preview--inline {
    margin-top: 0;
    max-width: 100%;
}

.serp-preview-caption {
    margin-bottom: 6px;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Quick SEO Fixes (Phase 5E.1, restyled in 5H polish) ─── */
.quick-fix-panel {
    margin: var(--space-5) 0;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--card-radius);
    background: var(--panel-tint-warm);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
}

.quick-fix-header {
    /* divider moved into the collapsible panel body — only shows when expanded */
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.quick-fix-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quick-fix-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--text-primary);
}

.quick-fix-subtitle {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.quick-fix-body {
    margin: 0;
}

.quick-fix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
}

.quick-fix-card {
    position: relative;
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 3px); /* room for accent stripe */
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.quick-fix-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--issue-clear-accent);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.quick-fix-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.quick-fix-label {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

.quick-fix-value {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Severity variants — accent stripe + subtle tint, not full-card flood */
.quick-fix-card.quick-fix--red::before    { background: var(--issue-critical-accent); }
.quick-fix-card.quick-fix--red            { background: var(--issue-critical-bg);  border-color: var(--issue-critical-border); }
.quick-fix-card.quick-fix--red .quick-fix-value { color: var(--issue-critical-text); }

.quick-fix-card.quick-fix--orange::before { background: var(--issue-warn-accent); }
.quick-fix-card.quick-fix--orange         { background: var(--issue-warn-bg);  border-color: var(--issue-warn-border); }
.quick-fix-card.quick-fix--orange .quick-fix-value { color: var(--issue-warn-text); }

.quick-fix-card.quick-fix--yellow::before { background: var(--issue-attention-accent); }
.quick-fix-card.quick-fix--yellow         { background: var(--issue-attention-bg);  border-color: var(--issue-attention-border); }
.quick-fix-card.quick-fix--yellow .quick-fix-value { color: var(--issue-attention-text); }

.quick-fix-btn {
    align-self: flex-start;
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    letter-spacing: -0.005em;
}

.quick-fix-btn:hover:not(.quick-fix-btn--disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}
.quick-fix-btn:active:not(.quick-fix-btn--disabled) {
    transform: translateY(1px);
}

.quick-fix-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface-hover);
    color: var(--text-muted);
    border-color: var(--border);
}

/* ── AI URL picker modal (Phase 5E.1) ─────────────────────── */
.ai-url-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.40);
}

.ai-url-picker-panel {
    width: min(760px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
}

.ai-url-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
}

.ai-url-picker-title {
    margin: 0;
    font-size: 0.90em;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.ai-url-picker-close {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-placeholder);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
}

.ai-url-picker-close:hover {
    background: var(--surface-hover);
    color: var(--text-secondary);
}

.ai-url-picker-body {
    padding: 14px 18px;
    overflow-y: auto;
}

.ai-url-picker-helper {
    margin: 0 0 10px;
    font-size: 0.82em;
    color: var(--text-muted);
}

.ai-url-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-url-picker-item {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}

.ai-url-picker-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.ai-url-picker-item--active {
    border-color: var(--primary);
    background: #eff6ff;
}

.ai-url-picker-item-index {
    font-size: 0.78em;
    color: var(--text-muted);
    margin-top: 1px;
}

.ai-url-picker-item-url {
    font-size: 0.80em;
    word-break: break-all;
}

.ai-url-picker-more {
    margin: 10px 0 0;
    font-size: 0.77em;
    color: var(--text-muted);
}

.ai-url-picker-footer {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
}

.ai-url-picker-cancel,
.ai-url-picker-generate {
    flex: 1;
}

/* ── Sticky footer (Phase 5D.2b) ─────────────────────────── */
.fix-brief-footer {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
}

/* Copy Prompt button — secondary outlined */
.btn-copy-prompt {
    flex: 1;
    padding: 8px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.86em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-copy-prompt:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

/* ── Phase 5C: Fix Brief overlay additions ───────────────── */

/* Page-context badge */
.fix-brief-context-badge {
    display: inline-block;
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.fix-brief-lang-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Schema Suggestion block */
.fix-brief-schema-section {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    margin: 10px 0 0;
}

.fix-brief-schema-section-title {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 7px;
}

/* "Suggested type: BlogPosting  [note]" line */
.fix-brief-suggestion-type {
    font-size: 0.84em;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.fix-brief-suggestion-label {
    color: var(--text-muted);
    font-weight: 500;
}

.fix-brief-suggestion-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
    background: var(--surface-hover);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    font-size: 0.96em;
}

/* Status note */
.fix-schema-note {
    font-size: 0.76em;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

.fix-schema-note--ok {
    background: var(--success-muted);
    color: var(--success-dark);
}

.fix-schema-note--missing {
    background: var(--danger-border);
    color: var(--danger-text);
}

/* JSON-LD skeleton code block */
.fix-brief-schema-preview {
    background: #0f172a;
    color: #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 0.76em;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Phase 5C.1: Detected schema section ────────────────── */

.fix-brief-detected-outer {
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    margin: 10px 0 0;
}

/* Horizontal row of detected-type chips */
.fix-brief-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 9px;
}

/* Individual detected-type chip */
.fix-schema-chip {
    display: inline-block;
    font-size: 0.76em;
    font-weight: 500;
    font-family: var(--font-mono);
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    padding: 2px 7px;
}

.fix-schema-loading {
    font-size: 0.78em;
    color: var(--text-placeholder);
    font-style: italic;
}

.fix-brief-detected-schema {
    min-height: 1em;
}

/* ── Phase 5B: Domain Conventions block (restyled in 5H polish) ── */

.domain-conventions-block {
    position: relative;
    background: var(--panel-tint-success);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 3px);
    margin: var(--space-5) 0;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.domain-conventions-block::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--success);
}

.domain-language-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.domain-language-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.domain-language-pill {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.domain-language-note {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.domain-conventions-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
    /* divider moved into the collapsible panel body — only shows when expanded */
    margin: 0;
}

.domain-conventions-none {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.domain-conventions-table {
    border-collapse: collapse;
    font-size: var(--fs-sm);
    width: 100%;
}

.domain-conventions-table td {
    padding: var(--space-1) var(--space-2);
    vertical-align: top;
}

.domain-conventions-table tr + tr td { padding-top: var(--space-2); }

.dc-label {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    width: 140px;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dc-value {
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.dc-pattern {
    font-style: italic;
    color: var(--success-text);
    font-weight: 600;
}

.dc-sep {
    background: var(--success-muted);
    color: var(--success-dark);
    padding: 1px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════
   Phase 5D – Heuristic Fix Engine: Suggested Fixes section
   ══════════════════════════════════════════════════════════ */

/* Section container */
.fix-brief-sf-section {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    margin: 14px 0 0;
}

/* Stacked list of field rows */
.fix-sf-list {
    display: flex;
    flex-direction: column;
}

/* One field row */
.fix-sf-row {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.84em;
}

.fix-sf-row:last-child {
    border-bottom: none;
}

/* Highlighted row — has an active heuristic suggestion */
.fix-sf-row--has-fix {
    background: var(--success-light);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 2px -3px;
}

/* Field label */
.fix-sf-field {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.96em;
}

/* Right-hand detail column */
.fix-sf-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

/* Single Current / Suggested line */
.fix-sf-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

/* "Current:" inline label */
.fix-sf-meta {
    color: var(--text-placeholder);
    font-size: 0.84em;
    font-weight: 500;
}

/* Existing value text */
.fix-sf-value {
    color: var(--text-primary);
    word-break: break-word;
}

/* Em-dash placeholder */
.fix-sf-dash {
    color: var(--text-placeholder);
}

/* "No heuristic suggestion" placeholder */
.fix-sf-none {
    color: var(--text-placeholder);
    font-style: italic;
}

/* Heuristic-suggested value */
.fix-sf-suggested {
    color: var(--success-text);
    font-weight: 600;
    word-break: break-all;
}

/* Source tag */
.fix-sf-source {
    font-size: 0.68em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    vertical-align: middle;
}

.fix-sf-source--heuristic {
    background: var(--primary-light);
    color: var(--primary-text);
    border: 1px solid var(--primary-border);
}

/* Suggested line editable */
.fix-sf-line--editable {
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Header row inside each field */
.fix-sf-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

/* Current value display line */
.fix-sf-current {
    font-size: 0.82em;
    color: var(--text-muted);
    margin-bottom: 2px;
    word-break: break-word;
}

/* Editable input */
.fix-sf-input {
    display: block;
    width: 100%;
    font-size: 0.9em;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 400;
    box-sizing: border-box;
    font-family: inherit;
    margin-top: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fix-sf-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* Editable textarea */
.fix-sf-textarea {
    display: block;
    width: 100%;
    min-height: 0;
    font-size: 0.82em;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 400;
    resize: vertical;
    box-sizing: border-box;
    font-family: var(--font-mono);
    line-height: 1.5;
    margin-top: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fix-sf-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* Suggested override — editable field feel, green border signals suggestion */
.fix-sf-input--suggested,
.fix-sf-textarea--suggested {
    border-color: #86efac;
    color: var(--text-primary);
    background: #ffffff;
}

.fix-sf-input--suggested {
    font-weight: 500;
}

.fix-sf-textarea--suggested {
    font-weight: 400;
}

/* Fix Brief — empty alt image rows */
.fix-brief-empty-alt {
    margin-top: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle);
}

.fix-brief-empty-alt__title {
    margin-top: 0;
    margin-bottom: 10px;
}

.fb-alt-toolbar {
    margin-bottom: 12px;
}

.fb-alt-toolbar .btn-apply-changes,
.fb-alt-toolbar .fb-alt-generate {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.fb-alt-no-key {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.45;
    color: var(--text-secondary);
}

.fb-alt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fb-alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised, var(--surface));
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}

.fb-alt-row__left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.fb-alt-row__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fb-alt-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}

.fb-alt-thumb--placeholder {
    background:
        linear-gradient(135deg, var(--border-subtle) 25%, transparent 25%) 0 0 / 10px 10px,
        linear-gradient(225deg, var(--border-subtle) 25%, transparent 25%) 0 0 / 10px 10px,
        linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%) 0 0 / 10px 10px,
        linear-gradient(315deg, var(--border-subtle) 25%, transparent 25%) 0 0 / 10px 10px,
        var(--surface);
}

.fb-alt-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-alt-src {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78em;
    line-height: 1.45;
    color: var(--text-secondary);
    word-break: break-all;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
}

.fb-alt-module {
    font-size: 0.78em;
    color: var(--text-muted);
}

.fb-alt-module-id {
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--text-secondary);
    background: var(--surface);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.fb-alt-field {
    display: block;
}

.fb-alt-field__label {
    display: block;
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-placeholder);
    margin-bottom: 4px;
}

.fb-alt-row .fix-sf-input.fb-alt-input {
    margin-top: 0;
    width: 100%;
}

@media (max-width: 640px) {
    .fb-alt-row {
        grid-template-columns: 1fr;
    }
}

/* Apply Changes button — primary save CTA */
.btn-apply-changes {
    flex: 1.4;
    padding: 9px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #fff;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-xs);
}

.btn-apply-changes:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════
   Module Scanner — Scan for Module tab
   ══════════════════════════════════════════════════════════ */

/* ── Mode toggle ─────────────────────────────────────────── */

.ms-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 0;
}

.ms-mode-btn {
    padding: 7px 18px;
    font-size: 0.84em;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.ms-mode-btn:not(:last-child) {
    border-right: 1px solid var(--border-strong);
}

.ms-mode-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.ms-mode-btn--active {
    background: var(--primary);
    color: #ffffff;
}

.ms-mode-btn--active:hover {
    background: var(--primary-hover);
    color: #ffffff;
}

/* ── Input form ──────────────────────────────────────────── */

.ms-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-xs);
}

.ms-form-row {
    margin-bottom: 16px;
}

.ms-form-row:last-of-type {
    margin-bottom: 0;
}

.ms-label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.ms-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 0.90em;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.ms-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.ms-hint {
    font-size: 0.78em;
    color: var(--text-muted);
    margin-top: 5px;
    margin-bottom: 0;
}

.ms-hint code {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.95em;
}

.ms-form-error {
    font-size: 0.82em;
    color: var(--danger-text);
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-top: 10px;
    margin-bottom: 0;
}

.ms-form-actions {
    margin-top: 16px;
}

/* ── Current URL ticker ──────────────────────────────────── */

.ms-current-url {
    font-size: 0.76em;
    color: var(--text-muted);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Results wrapper ─────────────────────────────────────── */

.ms-results-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Section header row (title + action button) ─────────── */

.ms-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ms-section-header .ms-section-title {
    margin-bottom: 0;
}

.ms-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 0.80em;
    font-weight: 600;
    color: var(--success-text);
    background: var(--success-light);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ms-export-btn:hover {
    background: var(--success-muted);
    border-color: var(--success-text);
}

/* ── Section headings ────────────────────────────────────── */

.ms-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}

.ms-section--empty {
    background: var(--surface-subtle);
}

.ms-section-title {
    font-size: 0.86em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.ms-section-title--match {
    color: var(--success-text);
}

.ms-section-title--warn {
    color: var(--warning-text);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.ms-details[open] .ms-section-title--warn {
    margin-bottom: 12px;
}

.ms-empty-hint {
    font-size: 0.83em;
    color: var(--text-muted);
    margin: 0;
}

.ms-empty-hint code {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ── URL lists ───────────────────────────────────────────── */

.ms-url-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-url-item {
    font-size: 0.82em;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ms-url-item--match {
    background: var(--success-light);
    border: 1px solid var(--success-border);
}

.ms-url-item--match a {
    color: var(--success-text);
    word-break: break-all;
    text-decoration: none;
}

.ms-url-item--match a:hover {
    text-decoration: underline;
}

.ms-url-item--error {
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    flex-direction: column;
    gap: 2px;
}

.ms-url-text {
    color: var(--text-primary);
    word-break: break-all;
}

.ms-error-reason {
    font-size: 0.90em;
    color: var(--danger-text);
}

/* ── Fatal error box ─────────────────────────────────────── */

.ms-fatal-error {
    background: var(--danger-light);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 0.86em;
}

/* ── Reuse scan-summary-cell for warn state ──────────────── */
/* (Phase 5H polish: unified warn styling lives in the main
   .scan-summary-cell--warn rule above; tint moved from full-card to
   left-accent stripe + soft amber background.) */

.scan-summary-cell--warn .scan-summary-value,
.scan-summary-cell--warn .scan-summary-label {
    color: var(--issue-warn-text);
}

/* ── Phase 5G: Site Health Checks panel ──────────────────── */

.site-health-panel {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 12px 0 0;
}

.site-health-title {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 9px;
}

.site-health-group {
    margin-top: 10px;
}

.site-health-group:first-of-type {
    margin-top: 0;
}

.site-health-group-label {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Critical-severity summary cell — used for invalid/missing html lang */
.scan-summary-cell--critical {
    background: var(--issue-critical-bg);
    border-color: var(--issue-critical-border);
    border-left-color: var(--issue-critical-accent);
}
.scan-summary-cell--critical:hover {
    background: #fee2e2;
}

.scan-summary-cell--critical .scan-summary-value,
.scan-summary-cell--critical .scan-summary-label {
    color: var(--issue-critical-text);
}

/* Critical-severity report row — any warning starting with CRITICAL: */
.report-row--critical td {
    background: var(--danger-light);
    box-shadow: inset 4px 0 0 0 var(--danger-text);
}

.report-row--critical:hover td {
    background: #fff5f5;
}

.report-row--critical .report-warnings {
    color: var(--danger-text);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Phase 5H polish — Panel row (2-col layout for sibling panels)
   Used to lay Domain Conventions and Quick SEO Fixes side-by-side.
   ───────────────────────────────────────────────────────────── */
.panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin: var(--space-5) 0;
    align-items: start;
}

/* When wrapped in .panel-row, child panels drop their own block margin
   (the row owns the outer spacing) and clamp their min-width so the
   1fr columns don't blow out on long content. */
.panel-row > .domain-conventions-block,
.panel-row > .quick-fix-panel {
    margin: 0;
    min-width: 0;
}

@media (max-width: 800px) {
    .panel-row {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────
   Phase 5H polish — Collapsible panel system
   Domain Conventions and Quick SEO Fixes use this; Issues panel
   stays always-expanded. Smooth animation via grid-template-rows
   0fr → 1fr (no JS height calculation needed).
   ───────────────────────────────────────────────────────────── */
/* .panel-collapsible is a marker class — visual chrome stays on the panel root.
   No own styles needed; classed for future hooks (e.g. JS auto-toggling). */

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.panel-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.panel-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

.panel-chevron svg {
    width: 14px;
    height: 14px;
    display: block;
}

.panel-header:hover .panel-chevron { color: var(--text-secondary); }
.panel-header[aria-expanded="true"] .panel-chevron { transform: rotate(180deg); }

.panel-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-header[aria-expanded="true"] + .panel-body {
    grid-template-rows: 1fr;
}

.panel-body > .panel-body-inner {
    overflow: hidden;
    min-height: 0;
    /* Padding/border are always applied — the grid-rows animation clips them
       via overflow: hidden when collapsed, so the transition is smooth. */
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* Reduced-motion: skip the animation but keep the toggle */
@media (prefers-reduced-motion: reduce) {
    .panel-body,
    .panel-chevron {
        transition: none;
    }
}

/* Phase 5H — Domain selector */
.domain-selector-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px 0;
}
.domain-selector-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.domain-selector-input {
    width: auto;
    max-width: 480px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    font-size: 14px;
}

.domain-details-panel {
    margin: 12px 0 20px 0;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.domain-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 16px;
}
.domain-details-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 8px;
}
.domain-details-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.domain-details-value {
    color: inherit;
    font-size: 14px;
    word-break: break-word;
}
.domain-details-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Phase 5H polish — Hero report card
   Score on top, progress bar across full width, status label,
   then a centered horizontal stat row (Total / Analyzed / Failed).
   ───────────────────────────────────────────────────────────── */
.overview-strip {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-6) var(--space-6) var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow-hi);
    position: relative;
    overflow: hidden;
}

.overview-strip::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--issue-clear-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.overview-strip:has(.seo-health-card--good)::before     { background: var(--success);            opacity: 1; }
.overview-strip:has(.seo-health-card--needs)::before    { background: var(--issue-attention-accent); opacity: 1; }
.overview-strip:has(.seo-health-card--critical)::before { background: var(--issue-critical-accent);  opacity: 1; }

.overview-strip-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

/* ─────────────────────────────────────────────────────────────
   Phase 5H polish — Unified Issues panel
   4-col grid desktop / 2-col tablet / 1-col mobile.
   Each group is its own column with a label + vertical stack
   of compact issue rows. Cells are horizontal: count left, label right.
   ───────────────────────────────────────────────────────────── */
.issues-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-5);
    margin: var(--space-5) 0;
    padding: var(--space-5) var(--space-6) var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--panel-tint-cool);
    box-shadow: var(--card-shadow);
}

.issues-panel-title {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.issues-panel-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--text-primary);
}

.issues-group {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.issues-group-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted);
    margin: 0 0 var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

@media (max-width: 960px) {
    .issues-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .issues-panel {
        grid-template-columns: 1fr;
    }
}

/* Phase 5H — empty-state for no saved report */
.report-empty-state {
    padding: 24px;
    text-align: center;
    border: 1px dashed #e5e7eb;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.report-empty-state__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}
.report-empty-state__body {
    color: var(--text-muted);
    margin: 0 0 14px 0;
}
.report-empty-state__cta {
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   Phase 5I — per-section score rings in Issues panel
   ══════════════════════════════════════════════════════════ */

.issues-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

/* When the label sits inside the header the header owns border/spacing */
.issues-group-header .issues-group-label {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-score-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.section-score-ring__track {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.section-score-ring__fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 400ms ease;
}

.section-score-ring--good .section-score-ring__fill { stroke: #68e326; }
.section-score-ring--warn .section-score-ring__fill { stroke: #ff8c00; }
.section-score-ring--crit .section-score-ring__fill { stroke: #ff2d2d; }

.section-score-ring__num {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .section-score-ring__fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   Phase 5I — Evidence section
   ══════════════════════════════════════════════════════════ */

.fb-ev-section {
    margin-top: 16px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.fb-ev-section-title {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}

.fb-ev-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.fb-ev-group:last-child { margin-bottom: 0; }

.fb-ev-summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 0.85em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    list-style: none;
    user-select: none;
}
.fb-ev-summary::-webkit-details-marker { display: none; }
.fb-ev-summary::marker                 { content: ''; }

.fb-ev-summary::before {
    content: '\25b8';
    color: var(--text-muted);
    font-size: 0.9em;
    transition: transform 120ms ease;
}
.fb-ev-group[open] .fb-ev-summary::before {
    transform: rotate(90deg);
}

.fb-ev-label  { flex: 1; }
.fb-ev-count  {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.85em;
}
.fb-ev-more   {
    color: var(--text-muted);
    font-size: 0.78em;
}

.fb-ev-list {
    list-style: none;
    margin: 0;
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fb-ev-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.fb-ev-mono {
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--text-secondary);
    word-break: break-all;
}

.fb-ev-meta { font-size: 0.78em; color: var(--text-muted); }
.fb-ev-ctx  { font-size: 0.78em; color: var(--text-muted); font-style: italic; }
.fb-ev-badge { display: inline-block; font-size: 0.72em; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }
.fb-ev-badge--warn { background: rgba(220, 38, 38, 0.1); color: var(--issue-critical-accent, #dc2626); }
.fb-ev-text { font-size: 0.85em; color: var(--text-primary); }

.fb-ev-html {
    margin: 4px 0 0;
    padding: 6px 8px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.78em;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
    .fb-ev-group[open] .fb-ev-summary::before { transition: none; }
}

/* Phase 5I — sticky warnings chip bar */
.fix-brief-warnings--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--warning-border);
    border-radius: 0;
    margin: 0 -22px 12px;
    padding: 8px 22px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    box-sizing: border-box;
}

.fix-brief-warnings-label {
    font-size: 0.70em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--warning-text);
    flex-shrink: 0;
}

.fb-warn-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.fb-warn-chip {
    flex-shrink: 0;
    background: var(--warning-light);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.78em;
    font-family: inherit;
    line-height: 1.4;
    cursor: default;
    white-space: nowrap;
}

.fb-warn-chip--has-evidence,
.fb-warn-chip--clickable {
    cursor: pointer;
    border-color: var(--warning-text);
}
.fb-warn-chip--has-evidence:hover,
.fb-warn-chip--has-evidence:focus-visible,
.fb-warn-chip--clickable:hover,
.fb-warn-chip--clickable:focus-visible {
    background: var(--info-light);
    border-color: var(--info-text);
    color: var(--info-text);
    outline: 2px solid var(--info-border);
    outline-offset: 1px;
}

/* Active chip — filled blue, clearly selected */
.fb-warn-chip--active {
    background: var(--info-text);
    border-color: var(--info-text);
    color: #fff;
    font-weight: 600;
    outline: 2px solid var(--info-border);
    outline-offset: 1px;
}

/* Summary flash — draws the eye to the opened disclosure */
@keyframes fb-ev-flash {
    0%   { background: var(--info-light); box-shadow: inset 0 0 0 2px var(--info-border); }
    60%  { background: var(--info-light); box-shadow: inset 0 0 0 2px var(--info-border); }
    100% { background: transparent;       box-shadow: none; }
}
.fb-ev-summary--highlight {
    animation: fb-ev-flash 1.4s ease forwards;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .fb-ev-summary--highlight { animation: none; background: var(--info-light); }
}

/* Field Comparison row highlight — flashes when a warning chip targets a
   specific field row in the Field Comparison grid. Mirrors fb-ev-flash. */
@keyframes fix-cg-row-flash {
    0%,
    60% {
        background: var(--info-light);
        box-shadow: inset 4px 0 0 var(--info-border);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}
.fix-cg-row--highlight,
.fix-cg-row--highlight > td {
    animation: fix-cg-row-flash 1.4s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .fix-cg-row--highlight,
    .fix-cg-row--highlight > td {
        animation: none;
        background: var(--info-light);
    }
}

/* Phase 5I (extended) — Page Notes section
   ──────────────────────────────────────────
   Page-level checks (html lang, robots, orphan, compression) that have no
   per-element Evidence. Visual rhythm mirrors .fb-ev-section so the two
   blocks read as siblings. */

.fb-page-notes {
    margin-top: 16px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.fb-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.fb-note:last-child { margin-bottom: 0; }

/* .fb-note > .fb-ev-summary reuses the styling from Evidence groups. */

.fb-note-body {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fb-note-text {
    margin: 0;
    font-size: 0.88em;
    color: var(--text-primary);
    line-height: 1.45;
}

.fb-note-hint {
    margin: 0;
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.45;
}

.fb-ev-count--critical {
    color: var(--issue-critical-accent, #dc2626);
    font-weight: 600;
}
.fb-ev-count--warn {
    color: var(--warning-text);
    font-weight: 600;
}

/* ── Cache Scanner ──────────────────────────────────────────────────────── */

/* Status colour aliases (kept local — not added to the global token table) */
.cache-scan-root {
    --cs-full:    var(--success);
    --cs-full-bg: var(--success-light);
    --cs-warn:    var(--warning);
    --cs-warn-bg: var(--warning-light);
    --cs-danger:  var(--danger);
    --cs-danger-bg: var(--danger-light);
    --cs-muted:   var(--text-muted);
    --cs-muted-bg: var(--surface-subtle);
}

/* Toolbar */
.cache-scan-toolbar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    align-items: center;
}

/* Buttons */
.cache-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.cache-scan-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}
.cache-scan-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.cache-scan-btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cache-scan-btn.primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Card grid */
.cache-scan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Individual card */
.cache-scan-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-pad-y) var(--card-pad-x);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow 0.15s;
}
.cache-scan-card:hover {
    box-shadow: var(--card-shadow-hi);
}

.cache-scan-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cache-scan-card-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
}
.cache-scan-card-url {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.cache-scan-card-body {
    flex: 1;
}
.cache-scan-card-status {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.cache-scan-card-actions {
    display: flex;
    gap: var(--space-2);
}

/* Detail panel */
.cache-scan-detail[hidden] { display: none; }

/* Utility states */
.cache-scan-loading,
.cache-scan-empty,
.cache-scan-error {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: var(--space-4) 0;
}
.cache-scan-error { color: var(--danger); }

/* Card body — hydrated state */
.cache-scan-card-timestamp {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* Health ratio bar */
.cs-bar {
    display: flex;
    height: 6px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--border);
    margin-bottom: var(--space-2);
}
.cs-bar--empty {
    background: var(--border);
}
.cs-bar-seg { height: 100%; min-width: 2px; }
.cs-bar-seg--full { background: var(--success); }
.cs-bar-seg--css  { background: var(--warning); }
.cs-bar-seg--html { background: #fb923c; }   /* orange — distinct from amber */
.cs-bar-seg--none { background: var(--danger); }
.cs-bar-seg--skip { background: var(--text-muted); }
.cs-bar-seg--err  { background: var(--danger-dark); }

/* Count badges */
.cache-scan-card-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}
.cs-count {
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
}
.cs-count--full { color: var(--success-text); }
.cs-count--warn { color: var(--warning-text); }
.cs-count--none { color: var(--danger-text); }
.cs-count--skip { color: var(--text-muted); }
.cs-count--err  { color: var(--danger-dark); }

/* Error state on card body */
.cache-scan-card-status--error { color: var(--danger); font-size: var(--fs-xs); }

/* Card divider */
.cache-scan-card-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* Bar + caption row */
.cs-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.cs-bar-wrap .cs-bar {
    flex: 1;
    margin-bottom: 0;
}
.cs-bar-caption {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* "View details" button variant — secondary/ghost */
.cache-scan-btn--detail {
    margin-left: auto;
    color: var(--info-text);
    border-color: var(--info-border);
    background: var(--info-light);
}
.cache-scan-btn--detail:hover:not(:disabled) {
    background: #dbeafe;
    border-color: var(--info-text);
}

/* Empty sitemap state (scan ran, 0 pages found) */
.cs-empty-sitemap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: var(--space-1) 0;
}
.cs-empty-sitemap-icon {
    font-size: var(--fs-lg);
    line-height: 1;
}

/* Indeterminate scan progress strip */
.cs-progress-strip {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--border);
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.cs-progress-strip-bar {
    height: 100%;
    width: 40%;
    border-radius: var(--radius-pill);
    background: var(--primary);
    animation: cs-indeterminate 1.4s ease-in-out infinite;
}
@keyframes cs-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-progress-strip-bar { animation: none; width: 100%; opacity: 0.4; }
}
.cs-scan-progress-text {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Queued card state */
.cs-status--queued { color: var(--text-muted); font-size: var(--fs-sm); }

/* Empty-state (no eligible domains) */
.cache-scan-empty-state {
    grid-column: 1 / -1;
    padding: var(--space-6) 0;
}

/* ── Skeleton loader (9E polish) ── */
.cs-card--skeleton {
    pointer-events: none;
}
.cs-skel {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-hover) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer 1.4s ease-in-out infinite;
}
.cs-skel--name   { height: 14px; width: 60%;  margin-bottom: var(--space-2); }
.cs-skel--url    { height: 11px; width: 45%;  margin-bottom: var(--space-2); }
.cs-skel--bar    { height: 6px;  width: 100%; margin: var(--space-3) 0 var(--space-2); }
.cs-skel--counts { height: 11px; width: 80%; }
@keyframes cs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-skel { animation: none; background: var(--border); }
}

/* ── Detail view (Phase 9D) ── */
.cs-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
}
.cs-back-btn { flex-shrink: 0; }
.cs-detail-domain {
    flex: 1;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-rescan-btn { flex-shrink: 0; }

/* Progress bar shown in detail during re-scan */
#csDetailProgress {
    margin-bottom: var(--space-3);
}
#csDetailProgress[hidden] { display: none; }

/* Filter chips */
.cs-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.cs-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cs-chip:hover { background: var(--surface-hover); }
.cs-chip--active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* Per-status chip accent colours (inactive state) */
.cs-chip--full  { border-color: var(--success-border); color: var(--success-text); }
.cs-chip--css   { border-color: var(--warning-border); color: var(--warning-text); }
.cs-chip--html  { border-color: #fed7aa; color: #9a3412; }
.cs-chip--none  { border-color: var(--danger-border);  color: var(--danger-text);  }
.cs-chip--skip  { border-color: var(--border-strong);  color: var(--text-muted);   }
.cs-chip--err   { border-color: var(--danger-border);  color: var(--danger-dark);  }
/* Active state overrides — always white text to beat per-variant color rules */
.cs-chip--full.cs-chip--active  { background: var(--success);     border-color: var(--success);     color: #fff; }
.cs-chip--css.cs-chip--active   { background: var(--warning);     border-color: var(--warning);     color: #fff; }
.cs-chip--html.cs-chip--active  { background: #fb923c;            border-color: #fb923c;            color: #fff; }
.cs-chip--none.cs-chip--active  { background: var(--danger);      border-color: var(--danger);      color: #fff; }
.cs-chip--skip.cs-chip--active  { background: var(--text-muted);  border-color: var(--text-muted);  color: #fff; }
.cs-chip--err.cs-chip--active   { background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }

/* Detail search */
.cs-detail-search-row { margin-bottom: var(--space-3); }
.cs-detail-search {
    width: 100%;
    max-width: 360px;
    padding: 5px var(--space-2);
    font-size: var(--fs-sm);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-detail-search:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* Detail table */
.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}
.cs-th {
    text-align: left;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cs-th--url    { width: 60%; }
.cs-th--icon   { width: 8%;  text-align: center; }
.cs-th--status { width: 24%; }

.cs-td {
    padding: 5px var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.cs-td--url {
    max-width: 0;        /* shrinks to table width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.cs-td--icon {
    text-align: center;
    font-size: var(--fs-base);
}
.cs-td--empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-5);
}

.cs-tr:hover .cs-td { background: var(--surface-subtle); }

/* Row accent left-borders */
.cs-tr--full { border-left: 3px solid var(--success); }
.cs-tr--css  { border-left: 3px solid var(--warning); }
.cs-tr--html { border-left: 3px solid #fb923c; }
.cs-tr--none { border-left: 3px solid var(--danger); }
.cs-tr--skip { border-left: 3px solid var(--border-strong); }
.cs-tr--err  { border-left: 3px solid var(--danger-dark); }

/* Status badges */
.cs-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--radius-pill);
}
.cs-badge--full { background: var(--success-muted);  color: var(--success-text); }
.cs-badge--css  { background: var(--warning-light);  color: var(--warning-text); }
.cs-badge--html { background: #fff7ed;               color: #9a3412;             }
.cs-badge--none { background: var(--danger-light);   color: var(--danger-text);  }
.cs-badge--skip { background: var(--surface-subtle); color: var(--text-muted);   }
.cs-badge--err  { background: var(--danger-light);   color: var(--danger-dark);  }

.cs-row-msg {
    margin-left: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Pagination */
.cs-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
}
.cs-page-btn  { flex-shrink: 0; }
.cs-page-info { color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Scan All banner (Phase 9E) ── */
.cs-scan-all-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--info-light);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}
.cs-banner-text   { flex: 1; color: var(--info-dark); }
.cs-banner-cancel { color: var(--danger-text); border-color: var(--danger-border); }
.cs-banner-dismiss { flex-shrink: 0; }

/* ── Status bar legend (9E polish) ── */
.cs-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.cs-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cs-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cs-legend-dot--full { background: var(--success); }
.cs-legend-dot--css  { background: var(--warning); }
.cs-legend-dot--html { background: #fb923c; }
.cs-legend-dot--none { background: var(--danger); }
.cs-legend-dot--skip { background: var(--text-muted); }
.cs-legend-dot--err  { background: var(--danger-dark); }

/* ── Domain SEO Dashboard ─────────────────────────────────────── */
.domain-dashboard-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.domain-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.domain-dashboard-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.domain-dashboard-card-header { display: flex; align-items: flex-start; gap: 8px; }
.domain-dashboard-card-meta   { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.domain-dashboard-card-name   { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-dashboard-card-url    { font-size: 12px; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.domain-dashboard-card-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.domain-dashboard-card-edit,
.domain-dashboard-card-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.domain-dashboard-card-edit:hover {
    color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}
.domain-dashboard-card-delete:hover {
    color: var(--issue-critical-accent, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.domain-dashboard-card-divider { border: none; border-top: 1px solid var(--border, #e5e7eb); margin: 0; }

.domain-dashboard-card-actions { display: flex; gap: 8px; }

.domain-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.domain-detail-name { font-weight: 600; }

#domains-detail-view[hidden]    { display: none; }
#domains-dashboard-view[hidden] { display: none; }

/* Phase B — card body + overall ring + section rings */
.domain-dashboard-card-body { display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
.domain-dashboard-card-timestamp { font-size: 12px; color: var(--text-muted, #6b7280); }
.domain-dashboard-card-status { font-size: 13px; color: var(--text-muted, #6b7280); }
.domain-dashboard-card-status--error { color: var(--issue-critical-accent, #dc2626); }

.dashboard-overall-row { display: flex; align-items: center; gap: 16px; }

.dashboard-overall-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px; height: 112px;
    flex-shrink: 0;
}
.dashboard-overall-ring__track { fill: none; stroke: #e5e7eb; stroke-width: 8; }
.dashboard-overall-ring__fill  { fill: none; stroke-width: 8; transition: stroke-dashoffset 0.4s ease; }
.dashboard-overall-ring--good .dashboard-overall-ring__fill { stroke: #68e326; }
.dashboard-overall-ring--warn .dashboard-overall-ring__fill { stroke: #ff8c00; }
.dashboard-overall-ring--crit .dashboard-overall-ring__fill { stroke: #ff2d2d; }
.dashboard-overall-ring__num   { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-size: 28px; font-weight: 700; line-height: 1; }
.dashboard-overall-ring__label { position: absolute; top: 64%; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text-muted, #6b7280); }

.dashboard-overall-status        { font-size: 14px; font-weight: 600; }
.dashboard-overall-status--good  { color: var(--success, #16a34a); }
.dashboard-overall-status--warn  { color: var(--issue-attention-accent, #d97706); }
.dashboard-overall-status--crit  { color: var(--issue-critical-accent, #dc2626); }

.dashboard-section-rings { display: flex; justify-content: space-between; gap: 8px; }
.dashboard-section-ring-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.dashboard-section-ring-cell__label { font-size: 11px; color: var(--text-muted, #6b7280); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .dashboard-overall-ring__fill { transition: none; }
}

/* Phase C — hover, skeleton, empty/error, responsive */

/* Step 3 — hover affordance */
.domain-dashboard-card:hover {
    border-color: var(--accent-color, #3b82f6);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
.domain-dashboard-card--skeleton { pointer-events: none; }

/* Step 1 — skeleton shimmer */
@keyframes dd-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.dd-skel {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--border, #e5e7eb) 25%, #f3f4f6 50%, var(--border, #e5e7eb) 75%);
    background-size: 800px 100%;
    animation: dd-shimmer 1.4s infinite linear;
}
.dd-skel--name        { height: 14px; width: 55%; margin-bottom: 4px; }
.dd-skel--url         { height: 11px; width: 80%; }
.dd-skel--ring        { width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0; }
.dd-skel--line        { height: 13px; width: 90%; border-radius: 4px; }
.dd-skel--line-short  { width: 60%; }
.dd-skel--small-ring  { width: 44px; height: 44px; border-radius: 50%; flex: 1; }
.dd-skel--btn         { height: 30px; flex: 1; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    .dd-skel { animation: none; background: var(--border, #e5e7eb); }
}

/* Step 6 — responsive */
@media (max-width: 480px) {
    .domain-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-section-ring-cell__label { font-size: 10px; }
}

@media (min-width: 481px) and (max-width: 767px) {
    .domain-dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (min-width: 1280px) {
    .domain-dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ── Auth / Admin ───────────────────────────────────────────── */
.sidebar-user-email {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.5rem;
}
.sidebar-logout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.sidebar-logout-btn:hover { background: var(--surface-hover); }
.admin-panel { max-width: 720px; }
.admin-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.admin-form h3 { margin: 0 0 1rem; font-size: 1rem; }
.admin-form-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.admin-form-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.admin-form-row input, .admin-form-row select {
    padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.admin-domain-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.admin-check { font-size: 0.85rem; }
.admin-users-list { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-user-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    display: grid;
    gap: 0.35rem;
}
.admin-user-domains { font-size: 0.85rem; color: var(--text-secondary); }
.admin-badge {
    font-size: 0.7rem;
    background: var(--info-light);
    color: var(--info-text);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-pill);
    margin-left: 0.25rem;
}
.admin-badge.inactive { background: var(--danger-light); color: var(--danger); }
.admin-delete-btn { justify-self: start; margin-top: 0.25rem; }