/* =========================================================================
   Design tokens — "Inspection Certificate" system.
   Graphite/charcoal surfaces with a warm brass accent (an audit is a
   certification exercise, not a generic SaaS product — the palette leans
   into that: an inspection stamp, an appraisal report, a calibrated
   instrument reading, rather than a default blue dashboard).
   Semantic pass/warning/fail hues are kept close to familiar green/amber/
   red so the meaning never gets lost, but shifted to sit comfortably next
   to the brass accent rather than a generic Bootstrap palette.
   ========================================================================= */

:root {
    --audit-primary: #9c7a3c;
    --audit-primary-dark: #7c5f2c;
    --audit-primary-contrast: #ffffff;
    /* Phase Y8 (design consistency pass) — a real, dark-mode-aware
       token replacing what used to be a fixed rgba(156, 122, 60, 0.1)
       fallback baked directly into the landing page's own CSS
       (.n15-*), which never adjusted for dark mode the way every
       other primary-tinted surface on this app already does. */
    --audit-primary-subtle: rgba(156, 122, 60, 0.1);
    --audit-ink: #15181f;
    --audit-muted: #5b6270;
    --audit-bg: #f2f1ec;
    --audit-surface: #ffffff;
    --audit-surface-alt: #f7f6f2;
    --audit-border: #e3e1d9;
    --audit-track: #eae8e0;
    --audit-hero-gradient-start: #ffffff;
    --audit-overlay-bg: rgba(21, 24, 31, 0.6);

    --audit-success: #2f8f5e;
    --audit-warning: #b5791f;
    --audit-danger: #b23b32;
    /* Phase Y8 (design consistency pass) — real tokens for the
       subtle-tinted backgrounds used behind status icons/badges
       throughout Phases V3/V4/W2, replacing hardcoded rgba() fallbacks
       that never adjusted for dark mode. */
    --audit-success-subtle: rgba(47, 143, 94, 0.12);
    --audit-warning-subtle: rgba(181, 121, 31, 0.15);
    --audit-danger-subtle: rgba(178, 59, 50, 0.12);

    /* Real user request — advanced suggestion marking / premium
       UI/UX presentation. A muted slate-indigo rather than a bright
       generic-SaaS blue, reading as "annotation ink" in an inspection
       report — sits quietly next to the brass accent instead of
       competing with it. */
    --audit-suggestion: #5a6b9c;
    --audit-suggestion-subtle: rgba(90, 107, 156, 0.12);

    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
        monospace;

    /* Bootstrap contextual-color overrides so bg-success/text-success/etc
     (used throughout the existing dashboard markup) inherit this
     palette's calmer, less-neon semantic hues automatically. */
    --bs-success: var(--audit-success);
    --bs-success-rgb: 47, 143, 94;
    --bs-warning: var(--audit-warning);
    --bs-warning-rgb: 181, 121, 31;
    --bs-danger: var(--audit-danger);
    --bs-danger-rgb: 178, 59, 50;
    --bs-primary: var(--audit-primary);
    --bs-primary-rgb: 156, 122, 60;
}

[data-bs-theme="dark"] {
    --audit-primary: #c9a15f;
    --audit-primary-dark: #e0bd7c;
    --audit-primary-contrast: #15181f;
    --audit-primary-subtle: rgba(201, 161, 95, 0.14);
    --audit-ink: #eef0f4;
    --audit-muted: #8b93a3;
    --audit-bg: #0b0d12;
    --audit-surface: #12151c;
    --audit-surface-alt: #171b24;
    --audit-border: #242938;
    --audit-track: #1c202b;
    --audit-hero-gradient-start: #12151c;
    --audit-overlay-bg: rgba(4, 5, 8, 0.75);

    --audit-success: #4cbb84;
    --audit-warning: #dba548;
    --audit-danger: #e0685c;
    --audit-success-subtle: rgba(76, 187, 132, 0.16);
    --audit-warning-subtle: rgba(219, 165, 72, 0.18);
    --audit-danger-subtle: rgba(224, 104, 92, 0.16);

    --bs-success: var(--audit-success);
    --bs-success-rgb: 76, 187, 132;
    --bs-warning: var(--audit-warning);
    --bs-warning-rgb: 219, 165, 72;
    --bs-danger: var(--audit-danger);
    --bs-danger-rgb: 224, 104, 92;
    --bs-primary: var(--audit-primary);
    --bs-primary-rgb: 201, 161, 95;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--audit-bg);
    color: var(--audit-ink);
    font-family: var(--font-sans);
}

.font-display {
    font-family: var(--font-display);
}

.font-mono,
.mono-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------- */
/* Navbar / Footer                                                        */
/* ---------------------------------------------------------------------- */

.app-navbar {
    background: var(--audit-surface);
    border-bottom: 1px solid var(--audit-border);
}

.app-navbar .navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--audit-ink);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.4rem;
    background: var(--audit-primary);
    color: var(--audit-primary-contrast);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Secondary navbar link (e.g. "Website Discovery") — reuses .brand-mark
   for its own icon so every top-level section of the app gets the same
   "mark + label" treatment as the main brand itself, rather than a
   plain text link that would look like an afterthought next to it. */
.app-navbar-link {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--audit-muted);
}

.app-navbar-link:hover {
    color: var(--audit-ink);
}

.app-navbar-link.active {
    color: var(--audit-ink);
    font-weight: 600;
}

.app-navbar-link .brand-mark {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.62rem;
}

/* Website Discovery — Detail Page (Phase E1). Bootstrap's default
   nav-tabs active state has no brand color of its own — this matches
   the same brass-accent-on-active convention .accordion-button:not(.collapsed)
   already established, so a detail page's tabs feel like the same
   design system as the audit dashboard's own accordion. */
.nav-tabs {
    border-bottom-color: var(--audit-border);
}

.nav-tabs .nav-link {
    color: var(--audit-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--audit-ink);
    border-bottom-color: var(--audit-border);
}

.nav-tabs .nav-link.active {
    color: var(--audit-primary);
    font-weight: 600;
    background: none;
    border-bottom-color: var(--audit-primary);
}

/* Website Discovery — empty section shell (Phase A4). A dashed-border
   panel marking where a later phase's real content (the search filter
   form, the results table, ...) will go, so an in-progress page reads
   as "under construction" rather than looking broken/empty by
   accident. Purely a structural placeholder — no functionality of its
   own. */
.discovery-placeholder {
    border: 1px dashed var(--audit-border);
    border-radius: 0.85rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--audit-muted);
}

/* Website Discovery — Advanced Filters, Phase C3 (Website Quality).
   Two native range inputs stacked directly on top of each other (both
   absolutely positioned, transparent track background, pointer-events
   disabled on everything except each input's own thumb) is the
   standard dependency-free technique for a dual-handle range slider —
   see the min/max sync logic in public/js/discovery-search-panel.js.
   Thumb/track colors reuse --audit-primary/--audit-track, the same
   brass accent and neutral track color .progress-thin already uses,
   not a new color scheme. */
.discovery-range-slider {
    position: relative;
    height: 1.5rem;
}

.discovery-range-input {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.discovery-range-input::-webkit-slider-runnable-track {
    height: 0.35rem;
    background: var(--audit-track);
    border-radius: 999px;
}

.discovery-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 1rem;
    height: 1rem;
    margin-top: -0.325rem;
    border-radius: 50%;
    background: var(--audit-primary);
    border: 2px solid var(--audit-surface);
    cursor: pointer;
}

.discovery-range-input::-moz-range-track {
    height: 0.35rem;
    background: var(--audit-track);
    border-radius: 999px;
}

.discovery-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--audit-primary);
    border: 2px solid var(--audit-surface);
    cursor: pointer;
}

/* Long specific-issue checkbox lists (SEO alone has 28 possible
   issues) scroll within a fixed height rather than stretching the
   Advanced Filters accordion body to an unwieldy length. */
.discovery-checkbox-scroll {
    max-height: 12rem;
    overflow-y: auto;
    padding-right: 0.25rem;
    border: 1px solid var(--audit-border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

/* Website Discovery — Result Card (Phase D3). A standalone, reusable
   colored dot for the Opportunity indicator — .checks-overview-legend
   .dot (used by the Checks Overview legend) is scoped to that one
   parent, so this is its own general-purpose version rather than
   reusing a class that only works nested inside a different
   component. */

/* Website Discovery — Compare feature (Phase E2). Fixed to the bottom
   of the viewport, centered, so it stays reachable regardless of scroll
   position while browsing a long results grid. z-index above
   .loading-overlay's own content but below nothing this app has —
   there's no modal/dialog layer in this app that would need to sit
   above it. */
.discovery-compare-bar {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--audit-border);
    border-radius: 999px;
    background-color: var(--audit-surface);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
}

/* Website Discovery — Watchlist ⭐ toggle (Phase G1). Reuses the same
   brass accent (--audit-primary) every other "primary brand color"
   element in this app already uses, rather than a generic yellow —
   so a saved/starred site's star reads as this app's own accent, not
   a browser-default "favorite" yellow. */
.discovery-star-btn {
    display: inline-flex;
    align-items: center;
}

.discovery-star-btn-active {
    color: var(--audit-primary);
    border-color: var(--audit-primary);
}

/* Comparison table (Phase E2) — the best score in each metric row,
   reusing --audit-success (the same green every other "good" score
   already uses across this app) rather than Bootstrap's own
   .table-success default green, so a highlighted cell here matches the
   rest of the app's palette exactly. color-mix() degrades gracefully in
   any browser that doesn't support it (no background tint, but the
   bold/colored text still communicates the highlight on its own). */
.compare-best {
    background-color: color-mix(in srgb, var(--audit-success) 12%, transparent);
    color: var(--audit-success);
    font-weight: 700;
}

/* Website Discovery — Map View (Phase E3). Leaflet's own default popup
     font doesn't inherit this app's typography, and its default max-width
     is narrower than this popup's content needs — both overridden here
     rather than in Leaflet's own CSS (never edit a vendored/CDN
     stylesheet directly). */
.discovery-map-popup {
    font-family: inherit;
    min-width: 200px;
}

.discovery-map-popup a {
    text-decoration: none;
}

.opportunity-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Technology badge pills (CMS/Framework/E-commerce/CDN) — a neutral
   outlined pill distinct from Bootstrap's filled .badge, so a card
   showing several detected technologies at once (e.g. "WordPress",
   "WooCommerce", "Cloudflare") reads as a scannable tag row rather
   than a wall of solid-color badges. */
.tech-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--audit-border);
    border-radius: 999px;
    color: var(--audit-muted);
    background-color: var(--audit-surface-alt);
}

/* Result card — the bordered container each discovered site renders
   in, matching .summary-card's own border/radius/background so a
   result card reads as the same "family" of component as the
   dashboard's category cards, without inheriting that class's hover-
   lift transform (a results list is scanned, not individually
   interacted with the way a dashboard summary card is). */
.result-card {
    border: 1px solid var(--audit-border);
    border-radius: 0.85rem;
    background-color: var(--audit-surface);
}

.result-card-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.result-card-ring-label {
    font-size: 0.68rem;
    color: var(--audit-muted);
    text-align: center;
    margin-top: 0.2rem;
}

.theme-toggle {
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-padding-y: 0.4rem;
    border-color: var(--audit-border);
    color: var(--audit-ink);
}

.theme-toggle .theme-toggle-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
}

[data-bs-theme="dark"] .theme-toggle-icon-light,
.theme-toggle-icon-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle-icon-dark {
    display: inline-block;
}

.app-footer {
    border-top: 1px solid var(--audit-border);
    color: var(--audit-muted);
    background-color: var(--audit-surface-alt);
}

/* ---------------------------------------------------------------------- */
/* Home / Hero                                                            */
/* ---------------------------------------------------------------------- */

.hero {
    padding: 6rem 1rem 5rem;
    background: radial-gradient(circle at 15% 20%,
            rgba(156, 122, 60, 0.08),
            transparent 45%),
        linear-gradient(180deg,
            var(--audit-hero-gradient-start) 0%,
            var(--audit-bg) 100%);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.4vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.hero-subtitle {
    color: var(--audit-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.audit-form-width {
    max-width: 640px;
}

.audit-form .input-group-text {
    background: var(--audit-surface);
    color: var(--audit-muted);
}

.audit-form .btn-primary {
    background-color: var(--audit-primary);
    border-color: var(--audit-primary);
    color: var(--audit-primary-contrast);
}

.audit-form .btn-primary:hover {
    background-color: var(--audit-primary-dark);
    border-color: var(--audit-primary-dark);
}

.result-header {
    background: var(--audit-surface);
    border-bottom: 1px solid var(--audit-border);
    padding: 2.5rem 0;
}

.result-header-hero {
    background: linear-gradient(155deg, color-mix(in srgb, var(--audit-primary) 8%, var(--audit-surface)) 0%, var(--audit-surface) 100%);
    border-bottom: 1px solid var(--audit-border);
    padding: 2.25rem 0;
}

.result-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--audit-primary);
    color: var(--audit-primary-contrast);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--audit-primary) 40%, transparent);
    flex-shrink: 0;
}

.result-header-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--audit-muted);
}

.result-header-domain {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.result-header-url {
    color: var(--audit-muted);
}

.result-header-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    flex-shrink: 0;
}

.result-header-domain-bold {
    font-weight: 700;
    font-size: 1.85rem;
}

.result-header-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.result-header-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--audit-ink);
    text-decoration: none;
}

.result-header-contact-item:hover {
    color: var(--audit-primary);
}

.result-header-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.result-header-contact-text {
    letter-spacing: 0.01em;
}

.result-header-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    background: var(--audit-primary);
    color: var(--audit-primary-contrast);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--audit-primary) 35%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.result-header-print-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--audit-primary) 45%, transparent);
    color: var(--audit-primary-contrast);
}

.result-header-print-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.result-header-more {
    position: relative;
}

.result-header-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--audit-border);
    border-radius: 999px;
    background: var(--audit-surface);
    color: var(--audit-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.result-header-more-btn:hover {
    background: var(--audit-surface-alt);
    color: var(--audit-ink);
}

.result-header-more-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 220px;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(21, 24, 31, 0.12);
    padding: 0.4rem;
    z-index: 30;
}

.result-header-more-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    color: var(--audit-ink);
    text-decoration: none;
}

.result-header-more-item:hover:not(.is-disabled) {
    background: var(--audit-surface-alt);
}

.result-header-more-item.is-disabled,
.result-header-more-item:disabled {
    color: var(--audit-muted);
    cursor: not-allowed;
}

.audit-pending-card {
    max-width: 520px;
    border: 1px solid var(--audit-border);
}

/* audit-progress.js updates this bar's width every animation frame to
   ease it smoothly toward the latest percent (see that file) — turning
   off Bootstrap's own width transition here avoids the two fighting
   each other, which would show up as stutter instead of smoothness. */
#audit-progress-bar {
    transition: none;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--audit-overlay-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* ---------------------------------------------------------------------- */
/* Report meta strip — small "§ 0X LABEL" structural device used above    */
/* each major dashboard section; the audit report genuinely does read as  */
/* a fixed, numbered sequence of sections, so the numbering carries real  */
/* information rather than decorating the page.                          */
/* ---------------------------------------------------------------------- */

.report-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--audit-primary);
    margin-bottom: 0.6rem;
}

.report-eyebrow::before {
    content: "";
    width: 1.35rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* Dashboard — Overall Score section ("certificate" hero)                 */
/* ---------------------------------------------------------------------- */

.dashboard-section {
    padding: 2.5rem 0;
}

.overall-score-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--audit-border);
    border-radius: 1.15rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    background: radial-gradient(circle at 100% 0%,
            rgba(156, 122, 60, 0.07),
            transparent 55%),
        radial-gradient(circle at 30% 0%,
            var(--audit-hero-gradient-start) 0%,
            var(--audit-surface) 65%);
}

[data-bs-theme="dark"] .overall-score-card {
    background: radial-gradient(circle at 100% 0%,
            rgba(201, 161, 95, 0.1),
            transparent 55%),
        radial-gradient(circle at 30% 0%,
            var(--audit-hero-gradient-start) 0%,
            var(--audit-surface) 65%);
}

/* Large decorative shield-check watermark in the hero card's top-right
   corner, at a low enough opacity to read as texture (like an
   embossed certificate seal) rather than content — see the inline SVG
   in dashboard.blade.php, which sets color: var(--audit-primary) so
   the watermark tints brass in both light and dark mode. Contained by
   .overall-score-card's own overflow: hidden, and kept out of the
   accessibility tree (aria-hidden) since it carries no information.
   z-index: 0 keeps it strictly behind .card-body's own stacking
   context (see the next rule) regardless of DOM order. */
.overall-score-watermark {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 17rem;
    height: 17rem;
    color: var(--audit-primary);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.overall-score-card>.card-body {
    position: relative;
    z-index: 1;
}

/* Score gauge ring — CSS conic-gradient, no chart library needed for the
   hero's signature element, so it renders instantly and stays crisp at
   any size. --gauge-pct (0-100) and --gauge-color are set inline per
   instance from the real score/variant. */
.score-gauge {
    --gauge-size: 168px;
    --gauge-thickness: 14px;
    position: relative;
    width: var(--gauge-size);
    height: var(--gauge-size);
    border-radius: 50%;
    margin: 0 auto;
    background: conic-gradient(var(--gauge-color) calc(var(--gauge-pct) * 1%),
            var(--audit-track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    /*
        Phase V5 (Luxury Visual Theme) — animates the conic-gradient's
        own fill percentage from 0 to the real --gauge-pct on page
        load. @property below is what makes a CSS-only transition of a
        conic-gradient ANGLE possible at all — without registering
        --gauge-pct as a real animatable <number>, the browser treats
        it as an opaque string and can't interpolate it, so the ring
        would otherwise jump straight to its final value with no
        animation. Falls back gracefully to that same instant jump on
        any browser without @property support — never a blank/broken
        gauge, just the pre-V5 static behavior for that one browser.
    */
    animation: score-gauge-fill 1.1s ease-out;
}

@property --gauge-pct {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@keyframes score-gauge-fill {
    from {
        --gauge-pct: 0;
    }
}

.score-gauge::before {
    content: "";
    position: absolute;
    inset: var(--gauge-thickness);
    border-radius: 50%;
    background: var(--audit-surface);
    box-shadow: inset 0 0 0 1px var(--audit-border);
}

.score-gauge-inner {
    position: relative;
    text-align: center;
    z-index: 1;
}

.score-gauge-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.1rem, 5vw, 2.65rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gauge-color);
}

.score-gauge-max {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--audit-muted);
    margin-top: 0.15rem;
}

/* Certification seal — the grade letter, styled like an inspection stamp */
.grade-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    position: relative;
}

.grade-seal::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px dashed currentColor;
    opacity: 0.45;
}

/* Audit report hero — Score Comparison section, first thing a person
   sees on the report. */
.audit-hero-card {
    background: linear-gradient(155deg, var(--audit-surface) 0%, var(--audit-surface-alt) 100%);
    border-color: var(--audit-border);
}

.score-ring {
    display: block;
}

.score-ring-progress {
    transition: stroke-dashoffset 0.6s ease;
}

.score-ring-number {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1;
}

.score-ring-grade {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--audit-muted);
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.audit-hero-eyebrow {
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

.audit-hero-domain {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--audit-ink);
    word-break: break-word;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--chip-color) 12%, transparent);
    color: var(--chip-color);
    font-size: 0.78rem;
    font-weight: 500;
}

.category-chip strong {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Category card header (SEO / Security / etc. accordion) */
.category-card-header {
    background: var(--audit-surface);
}

.category-score-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--audit-track);
    overflow: hidden;
}

.category-score-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.category-score-badge {
    font-family: var(--font-mono);
    font-weight: 600;
    background: transparent;
    border: 1.5px solid;
}

/* Real user request — premium "still analyzing" indicator for a
   category being backfilled in the background. */
.category-processing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--audit-primary);
    background: color-mix(in srgb, var(--audit-primary) 10%, var(--audit-surface-alt));
    border: 1px solid color-mix(in srgb, var(--audit-primary) 25%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    flex-shrink: 0;
}

.category-processing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--audit-primary);
    animation: category-processing-pulse 1.4s ease-in-out infinite;
}

.category-processing-badge-exhausted {
    color: var(--audit-muted);
    background: var(--audit-surface-alt);
    border-color: var(--audit-border);
}

@keyframes category-processing-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* Real user request — compact progress bar (percent + label) in the
   category header, matching the main audit progress bar's own
   striped/animated style, sized to fit inline in a header row. */
.category-backfill-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    max-width: 220px;
    cursor: default;
}

.category-backfill-progress .progress {
    width: 90px;
    height: 0.4rem;
    flex-shrink: 0;
}

.category-backfill-progress-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--audit-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Real user request — stacked backfill progress bars on the pending
   page, one per background backfill round. */
.backfill-stages {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.backfill-stage-label {
    font-size: 0.78rem;
}

.backfill-stage-attempt {
    color: var(--audit-primary);
    font-size: 0.75rem;
}

.category-chevron {
    color: var(--audit-muted);
    transition: transform 0.2s ease, color 0.15s ease;
}

.card[data-category-key] .category-card-header:hover .category-chevron {
    color: var(--cat-accent, var(--audit-muted));
}

.card[data-category-key] .card-body .btn-link:hover,
.card[data-category-key] .card-body .btn-outline-secondary:hover {
    color: var(--cat-accent, inherit);
    border-color: color-mix(in srgb, var(--cat-accent, var(--audit-border)) 45%, var(--audit-border));
}

.category-chevron-open {
    transform: rotate(180deg);
}

.overall-score-meta dt {
    color: var(--audit-muted);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.overall-score-meta dd {
    font-weight: 600;
    margin-bottom: 0;
}

/* Legacy alias kept so any markup still using .grade-pill (older partials
   awaiting a future pass) doesn't lose all styling. */
.grade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    font-weight: 700;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------------- */
/* Category Summary Cards                                                 */
/* ---------------------------------------------------------------------- */

.summary-card {
    border: 1px solid var(--audit-border);
    border-radius: 1rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease,
        border-color 0.15s ease;
}

.summary-card:hover {
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.09);
    transform: translateY(-3px);
    border-color: var(--gauge-color, var(--audit-border));
}

.summary-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.5rem;
    border-radius: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Compact per-card ring, same conic-gradient technique as the hero gauge
   but sized down — replaces a flat progress bar with something that
   reads at a glance, without the cost of a Chart.js instance per card. */
.mini-ring {
    --ring-size: 3.75rem;
    --ring-thickness: 6px;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color) calc(var(--ring-pct) * 1%),
            var(--audit-track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-ring::before {
    content: "";
    position: absolute;
    inset: var(--ring-thickness);
    border-radius: 50%;
    background: var(--audit-surface);
}

.mini-ring-value {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gauge-color);
}

.summary-card-summary {
    color: var(--audit-muted);
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Segmented pass/warning/fail bars — Checks Overview. Already a full
   pill shape (border-radius: 999px); height bumped slightly (0.4rem →
   0.55rem) so it reads more clearly as three distinct, hoverable
   segments rather than a thin hairline. Each segment's exact count is
   exposed via a native `title` attribute (see
   dashboard-components.blade.php) rather than a Bootstrap Tooltip
   component, since a native title needs no JS initialization and
   works identically everywhere a mouse can hover. */
.progress-thin {
    height: 0.55rem;
    border-radius: 999px;
    background-color: var(--audit-track);
}

.progress-thin .progress-bar {
    cursor: default;
}

/* ---------------------------------------------------------------------- */
/* Dashboard Components — Charts, Progress Bars, Accordion                */
/* ---------------------------------------------------------------------- */

.chart-card {
    border: 1px solid var(--audit-border);
    border-top: none;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(21, 24, 31, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.chart-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--audit-primary));
}

.chart-card:hover {
    box-shadow: 0 10px 28px rgba(21, 24, 31, 0.09);
}

.chart-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--icon-color, var(--audit-primary));
    color: var(--audit-primary-contrast);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--icon-color, var(--audit-primary)) 40%, transparent);
    flex-shrink: 0;
}

.chart-card-heading {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--audit-ink);
    line-height: 1.2;
}

/*
    Phase V2 (Technology Icon Display) — matches .chart-card's own
    border/radius convention above so the new "Detected Technology
    Stack" grid visually belongs with every other card on this page.
*/
.tech-stack-card {
    border: 1px solid var(--audit-border);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tech-stack-card:hover {
    border-color: var(--bs-primary, #9c7a3c);
    transform: translateY(-2px);
}

.tech-stack-card-icon {
    object-fit: contain;
}

.tech-check-icon {
    object-fit: contain;
    flex-shrink: 0;
}

/*
    Phase V3 (Performance/Security/Accessibility Category-Specific UI)
*/
/* Real user request — advanced UI/UX Screenshot Annotation panel. */
.screenshot-annotation-panel {
    padding: 1rem;
    border-radius: 0.6rem;
    background: var(--audit-surface-alt);
    border: 1px solid var(--audit-border);
    margin-bottom: 1rem;
}

.screenshot-annotation-eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--audit-muted);
    margin: 0 0 0.6rem;
}

.screenshot-annotation-frame {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--audit-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.screenshot-annotation-image {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-annotation-marker {
    position: absolute;
    border: 2px solid;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease;
}

.screenshot-annotation-marker:hover,
.screenshot-annotation-marker:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.screenshot-annotation-marker-fail {
    border-color: var(--audit-danger);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
}

.screenshot-annotation-marker-warning {
    border-color: var(--audit-warning);
    box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25);
}

.screenshot-annotation-marker-suggestion {
    border-style: dashed;
    border-color: var(--audit-suggestion);
    box-shadow: 0 0 0 1px var(--audit-suggestion-subtle);
}

.screenshot-annotation-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.3rem;
    background: var(--audit-ink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.25rem 0.55rem;
    border-radius: 0.3rem;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}

.screenshot-annotation-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.screenshot-annotation-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--audit-muted);
}

.screenshot-annotation-legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    display: inline-block;
}

.screenshot-annotation-legend-dot-fail {
    background: var(--audit-danger);
}

.screenshot-annotation-legend-dot-warning {
    background: var(--audit-warning);
}

.screenshot-annotation-legend-dot-suggestion {
    background: var(--audit-suggestion);
}

/* =========================================================================
   Real user request — completely new jewel-tone color direction for
   the UI/UX inspection section: a "verification seal" palette. Deep
   emerald carries the sense of something verified/trusted (the
   traditional color of an authentication seal or a notary stamp),
   rich garnet and topaz replace the app-wide danger/warning tones for
   a more saturated, jewel-box feel, and warm gold is reserved
   specifically for the score stamp — a small, deliberate accent
   rather than the dominant color, so it still reads as premium rather
   than gaudy. Scoped entirely within .uiux-inspection and
   .competitor-card via custom property overrides — every child rule
   below already reads var(--audit-*), so overriding those names
   locally repaints the whole section without duplicating any rule.
   ========================================================================= */
.uiux-inspection,
.competitor-card {
    --audit-primary: #1a6f57;
    --audit-primary-dark: #0e4d3c;
    --audit-primary-contrast: #ffffff;
    --audit-primary-subtle: rgba(26, 111, 87, 0.1);
    --audit-ink: #1c2420;
    --audit-muted: #5c6a63;
    --audit-surface: #fdfcf8;
    --audit-surface-alt: #f6f4ec;
    --audit-border: #e2ddc9;
    --audit-success: #1f8a5f;
    --audit-success-subtle: rgba(31, 138, 95, 0.12);
    --audit-warning: #ab7317;
    --audit-warning-subtle: rgba(171, 115, 23, 0.14);
    --audit-danger: #a32d3f;
    --audit-danger-subtle: rgba(163, 45, 63, 0.12);
    --uiux-gold: #b8923f;
    --uiux-gold-subtle: rgba(184, 146, 63, 0.14);
}

/* =========================================================================
   Real user request — advanced, premium UI/UX presentation: a grid of
   "inspection tag" cards for the 13 fixed UI/UX checkpoints (see
   UiUxAnalyzer's own docblock), replacing the plain generic list-group
   just for this category. Extends this file's own "Inspection
   Certificate" system (see the design-tokens docblock at the top of
   this file) rather than introducing a separate visual language.
   ========================================================================= */

.uiux-inspection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.uiux-inspection-eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--audit-muted);
    margin: 0;
}

.uiux-inspection-score {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--uiux-gold);
    background: var(--uiux-gold-subtle);
}

.uiux-inspection-score-number {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--audit-ink);
}

.uiux-inspection-score-grade {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-muted);
}

.uiux-inspection-score-pass .uiux-inspection-score-number {
    color: var(--audit-success);
}

.uiux-inspection-score-warning .uiux-inspection-score-number {
    color: var(--audit-warning);
}

.uiux-inspection-score-fail .uiux-inspection-score-number {
    color: var(--audit-danger);
}

.uiux-inspection-trend {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    margin-left: 0.3rem;
    cursor: default;
}

.uiux-inspection-trend-improved {
    color: var(--audit-success);
    background: var(--audit-success-subtle);
}

.uiux-inspection-trend-declined {
    color: var(--audit-danger);
    background: var(--audit-danger-subtle);
}

.uiux-inspection-trend-unchanged {
    color: var(--audit-muted);
    background: var(--audit-surface-alt);
}

.uiux-inspection-trend-arrow {
    font-size: 0.85rem;
}

.competitor-card {
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 0.6rem;
    padding: 1.1rem 1.25rem;
    margin-top: 1.25rem;
}

.competitor-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--audit-muted);
    margin: 0 0 0.7rem;
}

.competitor-form {
    display: flex;
    gap: 0.5rem;
}

.competitor-input {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--audit-border);
    border-radius: 0.4rem;
    background: var(--audit-surface-alt);
    color: var(--audit-ink);
}

.competitor-submit {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--audit-primary);
    color: var(--audit-surface);
    cursor: pointer;
    white-space: nowrap;
}

.competitor-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.competitor-error {
    font-size: 0.8rem;
    color: var(--audit-danger);
    margin: 0.7rem 0 0;
}

.competitor-result {
    margin-top: 1rem;
}

.competitor-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding-bottom: 1rem;
}

.competitor-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.competitor-score-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--audit-muted);
}

.competitor-score-number {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--audit-ink);
}

.competitor-score-grade {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--audit-muted);
}

.competitor-score-diff {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
}

.competitor-score-diff-pass {
    color: var(--audit-success);
    background: var(--audit-success-subtle);
}

.competitor-score-diff-fail {
    color: var(--audit-danger);
    background: var(--audit-danger-subtle);
}

.competitor-score-diff-warning {
    color: var(--audit-muted);
    background: var(--audit-surface-alt);
}

.competitor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.competitor-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--audit-muted);
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--audit-border);
}

.competitor-table td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--audit-border);
    color: var(--audit-ink);
}

.competitor-table th:not(:first-child),
.competitor-table td:not(:first-child) {
    text-align: center;
}

.competitor-status-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.competitor-status-dot-pass {
    background: var(--audit-success);
}

.competitor-status-dot-warning {
    background: var(--audit-warning);
}

.competitor-status-dot-fail {
    background: var(--audit-danger);
}

.competitor-status-dot-unknown {
    background: var(--audit-border);
}

/* Real user request — Technical SEO advanced features: AI Crawler
   Accessibility chip grid and Security Headers checklist. Both reuse
   the existing --audit-success/--audit-warning/--audit-danger/
   --audit-border variables above for automatic dark-mode support. */
.ai-crawler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.ai-crawler-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--audit-border);
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.ai-crawler-chip__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--audit-warning);
}

.ai-crawler-chip--allowed .ai-crawler-chip__dot {
    background: var(--audit-success);
}

.ai-crawler-chip--blocked .ai-crawler-chip__dot {
    background: var(--audit-danger);
}

.ai-crawler-chip--not_mentioned .ai-crawler-chip__dot {
    background: var(--audit-border);
}

.ai-crawler-chip__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-crawler-chip__status {
    flex-shrink: 0;
    font-weight: 600;
    opacity: 0.85;
}

.security-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--audit-border);
    font-size: 0.85rem;
}

.security-header-row:last-child {
    border-bottom: none;
}

.security-header-row__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.security-header-row__dot--pass {
    background: var(--audit-success);
}

.security-header-row__dot--missing {
    background: var(--audit-border);
}

.security-header-row__label {
    flex: 1;
}

.security-header-row__status {
    flex-shrink: 0;
    font-weight: 600;
}

.crawl-budget-bar {
    width: 100%;
    height: 0.5rem;
    background: var(--audit-border);
    border-radius: 0.25rem;
    overflow: hidden;
}

.crawl-budget-bar__fill {
    height: 100%;
    background: var(--audit-success);
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

.site-architecture-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--audit-border);
}

.site-architecture-row:last-child {
    border-bottom: none;
}

.site-architecture-row--button {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--audit-border);
    cursor: pointer;
    text-align: left;
}

.site-architecture-row--button:hover {
    background: var(--audit-surface-alt);
}

.site-architecture-row__label {
    flex-shrink: 0;
    width: 90px;
    font-size: 0.8rem;
    font-weight: 600;
}

.site-architecture-row__dots {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.site-architecture-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.site-architecture-dot--safe {
    background: var(--audit-success);
}

.site-architecture-dot--risk {
    background: var(--audit-danger);
}

.site-architecture-row__count {
    flex-shrink: 0;
    width: 80px;
    text-align: right;
}

.redirect-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.35rem 0;
}

.redirect-chain__hop {
    max-width: 160px;
}

.redirect-chain__arrow {
    color: var(--audit-warning);
    margin-right: 0.25rem;
}

.severity-accent {
    border-left: 3px solid transparent;
    padding-left: 0.75rem !important;
}

.severity-accent--critical {
    border-left-color: var(--audit-danger);
}

.severity-accent--warning {
    border-left-color: var(--audit-warning);
}

.severity-accent--notice {
    border-left-color: var(--audit-border);
}

.scan-log {
    max-width: 420px;
    background: #14161a;
    color: #d4d8dd;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    max-height: 180px;
    overflow-y: auto;
}

.scan-log__line {
    padding: 0.15rem 0;
    opacity: 0.85;
}

.scan-log__line:last-child {
    opacity: 1;
    font-weight: 600;
}

.scan-log__check {
    color: var(--audit-success);
}

.quick-wins-panel {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 300px;
    max-width: calc(100vw - 2.5rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--audit-border);
    border-radius: 0.65rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    z-index: 1040;
    overflow: hidden;
}

.quick-wins-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--audit-primary);
    color: var(--audit-primary-contrast);
    font-size: 0.85rem;
}

.quick-wins-panel__item {
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--audit-border);
    font-size: 0.78rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.technical-details-drawer {
    background: var(--audit-bg);
    border: 1px solid var(--audit-border);
    border-radius: 0.4rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.72rem;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 0;
}

.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg, #fff);
    padding: 0.6rem 0;
}

.section-nav a {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--audit-border);
    border-radius: 2rem;
    font-size: 0.78rem;
    text-decoration: none;
    color: inherit;
}

.section-nav a:hover {
    background: var(--audit-primary-subtle);
}

/* Real user request — complete premium redesign: the hero. One bold,
   massive score number as the singular memorable moment (per this
   app's own frontend-design skill guidance — "spend your boldness in
   one place, keep everything around it quiet"), set in display type
   with tight tracking. No card/shadow wrapper, no gradient-wash
   decoration, no tracked-out ALL-CAPS eyebrow — generous negative
   space instead. */
/* Real user request — reverting to a card-based, colorful "audit
   tool" style (Ahrefs/SEMrush reference, white background kept) per
   explicit feedback: a bordered, shadowed hero card with a colorful
   conic-gradient score gauge ring, and a colorful icon-badge grid for
   the category breakdown. */
.tech-hero-card {
    position: relative;
    overflow: hidden;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 2rem;
}

/* Real user request — "glass, glass premium vibe": same frosted-glass
   top strip as every other card (see .tech-seo-report .card::before),
   using the score's own color so the hero's own glass strip reflects
   the health score itself. */
.tech-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--audit-primary) 70%, transparent) 20%,
        var(--audit-primary) 50%,
        color-mix(in srgb, var(--audit-primary) 70%, transparent) 80%,
        transparent 100%
    );
    opacity: 0.9;
}

.tech-hero-card__top {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--audit-border);
}

.tech-hero-card__gauge {
    --gauge-size: 128px;
    --gauge-thickness: 11px;
    position: relative;
    width: var(--gauge-size);
    height: var(--gauge-size);
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color) calc(var(--gauge-pct) * 1%), var(--audit-track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tech-hero-card__gauge::before {
    content: "";
    position: absolute;
    inset: var(--gauge-thickness);
    border-radius: 50%;
    background: var(--audit-surface);
    box-shadow: inset 0 0 0 1px var(--audit-border);
}

.tech-hero-card__gauge-inner {
    position: relative;
    text-align: center;
    z-index: 1;
}

.tech-hero-card__score {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.tech-hero-card__score-max {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--audit-muted);
    margin-top: 0.15rem;
}

.tech-hero-card__eyebrow {
    font-size: 0.85rem;
    color: var(--audit-muted);
    margin-bottom: 0.5rem;
}

.tech-hero-card__grade-pill {
    display: inline-block;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.tech-hero-card__pages {
    font-size: 0.85rem;
    color: var(--audit-muted);
    margin: 0;
}

.tech-hero-card__breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tech-cat-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--stat-color) 8%, var(--audit-surface));
    border: 1px solid color-mix(in srgb, var(--stat-color) 25%, var(--audit-border));
}

.tech-cat-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--stat-color);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
}

.tech-cat-stat__label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--audit-ink);
    text-align: center;
}

.rich-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.rich-result-badge {
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--audit-primary-subtle);
    border: 1px solid color-mix(in srgb, var(--audit-primary) 30%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.rich-result-badge__type {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--audit-ink);
}

.rich-result-badge__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--audit-muted);
}

.rich-result-badge__feature {
    flex-basis: 100%;
    font-size: 0.76rem;
    color: var(--audit-primary);
}

.rich-result-badge__feature--none {
    color: var(--audit-muted);
}

.ssl-badge {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
}

.ssl-badge__days {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
}

.ssl-badge__label {
    font-size: 0.78rem;
}

.ssl-badge--safe {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.ssl-badge--warning {
    background: var(--audit-warning-subtle);
    color: var(--audit-warning);
}

.ssl-badge--danger {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

.ssl-badge--unknown {
    background: var(--audit-surface-alt);
    color: var(--audit-muted);
}

.parity-compare__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.parity-compare__label {
    flex-shrink: 0;
    width: 55px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--audit-muted);
}

.parity-compare__track {
    flex: 1;
    height: 0.65rem;
    background: var(--audit-track);
    border-radius: 999px;
    overflow: hidden;
}

.parity-compare__fill {
    height: 100%;
    border-radius: 999px;
}

.parity-compare__fill--desktop {
    background: var(--audit-primary);
}

.parity-compare__fill--mobile {
    background: var(--audit-suggestion);
}

.parity-compare__value {
    flex-shrink: 0;
    width: 70px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--audit-ink);
}

.parity-compare__gap {
    font-size: 0.76rem;
    color: var(--audit-muted);
    margin: 0.3rem 0 0;
}

.parity-verdict {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.parity-verdict__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.parity-verdict--safe {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.parity-verdict--safe .parity-verdict__icon {
    background: var(--audit-success);
    color: #fff;
}

.parity-verdict--warning {
    background: var(--audit-warning-subtle);
    color: var(--audit-warning);
}

.parity-verdict--warning .parity-verdict__icon {
    background: var(--audit-warning);
    color: #fff;
}

.domain-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.domain-bar-row--button {
    width: 100%;
    background: none;
    border: none;
    padding: 0.2rem 0;
    cursor: pointer;
    text-align: left;
}

.domain-bar-row--button:hover .domain-bar-row__label {
    text-decoration: underline;
}

.domain-bar-row__label {
    flex-shrink: 0;
    width: 110px;
    font-size: 0.76rem;
}

.domain-bar-row__track {
    flex: 1;
    height: 0.6rem;
    background: var(--audit-track);
    border-radius: 999px;
    overflow: hidden;
}

.domain-bar-row__fill {
    height: 100%;
    background: var(--audit-suggestion);
    border-radius: 999px;
}

.domain-bar-row__value {
    flex-shrink: 0;
    width: 50px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--audit-muted);
}

.drift-box {
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    height: 100%;
}

.drift-box--new {
    background: var(--audit-danger-subtle);
}

.drift-box--resolved {
    background: var(--audit-success-subtle);
}

.drift-box__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.drift-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.drift-box--new .drift-box__icon {
    background: var(--audit-danger);
    color: #fff;
}

.drift-box--resolved .drift-box__icon {
    background: var(--audit-success);
    color: #fff;
}

.drift-box__title {
    font-weight: 600;
    font-size: 0.85rem;
}

.drift-box--new .drift-box__title {
    color: var(--audit-danger);
}

.drift-box--resolved .drift-box__title {
    color: var(--audit-success);
}

.drift-box__item {
    font-size: 0.78rem;
    color: var(--audit-ink);
    margin: 0 0 0.3rem;
}

.drift-box__empty {
    font-size: 0.8rem;
    color: var(--audit-muted);
    margin: 0;
}

.ai-summary-line {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--audit-muted);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--audit-border);
}

.url-list-table {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--audit-border);
    border-radius: 0.5rem;
}

.url-list-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.url-list-table__row {
    border-bottom: 1px solid var(--audit-border);
    transition: background-color 0.12s ease;
}

.url-list-table__row:last-child {
    border-bottom: none;
}

.url-list-table__row:hover {
    background: var(--audit-surface-alt);
}

.url-list-table__url-cell {
    padding: 0.5rem 0.75rem;
    max-width: 0;
    width: 100%;
}

.url-list-table__link {
    font-family: var(--font-mono);
    color: var(--audit-ink);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-list-table__link:hover {
    color: var(--audit-primary);
    text-decoration: underline;
}

.url-list-table__extra-cell {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--audit-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.url-list-table__copy-cell {
    padding: 0.5rem 0.5rem;
    width: 1px;
    white-space: nowrap;
}

.url-list-table__copy-btn {
    border: 1px solid var(--audit-border);
    background: var(--audit-surface);
    color: var(--audit-muted);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.url-list-table__copy-btn:hover {
    color: var(--audit-primary);
    border-color: var(--audit-primary);
}

.url-list-table__empty {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--audit-success);
    background: var(--audit-success-subtle);
    border-radius: 0.4rem;
    padding: 0.35rem 0.7rem;
    margin: 0;
}

.issue-feed-filter {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--audit-surface-alt);
    padding: 0.25rem;
    border-radius: 0.6rem;
}

.issue-feed-filter__btn {
    border: none;
    background: transparent;
    border-radius: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--audit-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.issue-feed-filter__btn.is-active {
    background: var(--audit-surface);
    color: var(--audit-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    font-weight: 600;
}

.issue-feed-filter__btn--critical.is-active {
    color: var(--audit-danger);
}

.issue-feed-filter__btn--warning.is-active {
    color: var(--audit-warning);
}

.issue-feed-filter__btn--notice.is-active {
    color: var(--audit-muted);
}

.issue-feed {
    border-top: 1px solid var(--audit-border);
    border-bottom: 1px solid var(--audit-border);
}

.tech-section {
    padding-top: 0.5rem;
}

.tech-section__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--audit-ink);
    margin: 0;
}

.issue-feed-row {
    border-bottom: 1px solid var(--audit-border);
    border-left: 4px solid transparent;
}

.issue-feed-row:last-child {
    border-bottom: none;
}

.issue-feed-row--critical {
    border-left-color: var(--audit-danger);
    background: var(--audit-danger-subtle);
}

.issue-feed-row--warning {
    border-left-color: var(--audit-warning);
    background: var(--audit-warning-subtle);
}

.issue-feed-row--notice {
    border-left-color: var(--audit-border);
}

.issue-feed-row__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.issue-feed-row__toggle:hover {
    background: var(--audit-surface-alt);
}

.issue-feed-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
}

.issue-feed-row__icon--critical {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

.issue-feed-row__icon--warning {
    background: var(--audit-warning-subtle);
    color: var(--audit-warning);
}

.issue-feed-row__icon--notice {
    background: var(--audit-surface-alt);
    color: var(--audit-muted);
}

.issue-feed-row__message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--audit-ink);
}

.issue-feed-row__chevron {
    flex-shrink: 0;
    color: var(--audit-muted);
    transition: transform 0.15s ease;
    font-size: 0.8rem;
}

.issue-feed-row__chevron.is-open {
    transform: rotate(180deg);
}

.issue-feed-row__detail {
    padding: 0 1rem 1rem 3.1rem;
}

.issue-feed-row__recommendation {
    font-size: 0.82rem;
    color: var(--audit-muted);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

/* Real user request — Technical SEO advanced design: category-accent
   color, one per section, scoped to this page (data-tech-category)
   so it's never confused with the main audit report's own
   data-category-key palette. */
[data-tech-category="crawlability"] {
    --tech-cat-accent: #2d6e8e;
}

[data-tech-category="security"] {
    --tech-cat-accent: #6b4c93;
}

[data-tech-category="performance"] {
    --tech-cat-accent: #a8722f;
}

[data-tech-category="mobile"] {
    --tech-cat-accent: #4a7856;
}

[data-bs-theme="dark"] [data-tech-category="crawlability"] {
    --tech-cat-accent: #6fa8c9;
}

[data-bs-theme="dark"] [data-tech-category="security"] {
    --tech-cat-accent: #b39ce0;
}

[data-bs-theme="dark"] [data-tech-category="performance"] {
    --tech-cat-accent: #e0ab6c;
}

[data-bs-theme="dark"] [data-tech-category="mobile"] {
    --tech-cat-accent: #7fc294;
}

/* Real user request — complete premium redesign, applied at scale:
   transforms every Bootstrap .card on this page into the same quiet,
   hairline-bordered language as the hero and issue feed above — no
   rounded corners, no box-shadow, generous internal spacing. Scoped
   to .tech-seo-report so this never touches .card anywhere else in
   the app. */
.tech-seo-report .card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--audit-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.03);
}



.tech-seo-report .card-body {
    padding: 1.75rem !important;
}

.tech-seo-report .card-body h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.tech-seo-report .card.h-100 {
    transition: none;
}

.tech-seo-report .row.g-4 {
    --bs-gutter-y: 1.5rem;
    margin-bottom: 1.75rem !important;
}

/* Category-accent moves from a bold top stripe to a subtler left
   border — quieter, consistent with the "one bold moment" direction
   the hero above already establishes. */
/* Real user request — the category-accent border-top was removed
   here; the new .card::before glass strip (above) now serves as this
   section's own category-color indicator, avoiding a doubled-up
   strip at the same position. */

.section-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.section-nav__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--tech-cat-accent, var(--audit-muted));
    flex-shrink: 0;
}

.issue-feed-header {
    position: sticky;
    top: 3.2rem;
    z-index: 5;
    background: var(--bs-body-bg, #fff);
    padding: 0.5rem 0;
}

.all-clear-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--audit-success-subtle);
    border: 1px solid color-mix(in srgb, var(--audit-success) 30%, transparent);
}

.all-clear-banner__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--audit-success);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}

.all-clear-banner__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.all-clear-banner__subtitle {
    font-size: 0.85rem;
    color: var(--audit-muted);
}

/* MARKER: uiux-grid-2-columns-v3 — if you see this comment when
   checking this file on the live server, the 2-column fix IS
   deployed. If the live server's file doesn't have this comment,
   this file was never uploaded/synced there. */
.uiux-inspection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.uiux-card {
    text-align: left;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 0.6rem;
    padding: 0.85rem 0.9rem;
    box-shadow: 0 1px 2px rgba(28, 36, 32, 0.04), 0 3px 8px rgba(28, 36, 32, 0.05);
}

.uiux-card-readmore {
    display: block;
    margin-top: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--audit-primary);
    cursor: pointer;
}

.uiux-card-readmore:hover,
.uiux-card-readmore:focus-visible {
    text-decoration: underline;
}

.uiux-card-preview {
    display: block;
    width: 100%;
    height: 1.6rem;
    margin-bottom: 0.65rem;
}

.uiux-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.uiux-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.uiux-card-icon {
    color: var(--audit-muted);
    flex-shrink: 0;
}

.uiux-card-pass .uiux-card-icon {
    color: var(--audit-success);
}

.uiux-card-warning .uiux-card-icon {
    color: var(--audit-warning);
}

.uiux-card-fail .uiux-card-icon {
    color: var(--audit-danger);
}

.uiux-card-stamp {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.uiux-card-stamp-pass {
    color: var(--audit-success);
    background: var(--audit-success-subtle);
}

.uiux-card-stamp-warning {
    color: var(--audit-warning);
    background: var(--audit-warning-subtle);
}

.uiux-card-stamp-fail {
    color: var(--audit-danger);
    background: var(--audit-danger-subtle);
}

.uiux-card-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--audit-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uiux-card-priority {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.uiux-card-priority-tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--audit-surface-alt);
    color: var(--audit-muted);
    border: 1px solid var(--audit-border);
}

.uiux-card-priority-tag-high {
    color: var(--audit-danger);
    border-color: var(--audit-danger);
}

.uiux-card-priority-tag-medium {
    color: var(--audit-warning);
    border-color: var(--audit-warning);
}

.uiux-card-priority-tag-low {
    color: var(--audit-muted);
}

.uiux-card-detail {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--audit-border);
}

.uiux-card-note {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--audit-muted);
    margin: 0;
}

.uiux-card-note-clean {
    color: var(--audit-success);
}

.uiux-card-issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.uiux-card-issue-line {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--audit-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.uiux-card-issue-page {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--audit-ink);
    background: var(--audit-surface-alt);
    border: 1px solid var(--audit-border);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .uiux-inspection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Real user request — redesigned, premium horizontal metric card
   (2 per row, was 4), matching the same visual language as the Core
   Web Vitals cards elsewhere in the Performance tab: colored left-
   border accent, status icon, clean label/value typography — instead
   of the older gauge-canvas layout, which didn't leave enough room
   for the file dropdown to be readable at 4-per-row. */
.perf-metric-card-v2 {
    height: 100%;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--audit-border);
    border-left-width: 3px;
    background: var(--audit-surface-alt);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.perf-metric-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.perf-metric-card-v2-success {
    border-left-color: var(--audit-success);
}

.perf-metric-card-v2-warning {
    border-left-color: var(--audit-warning);
}

.perf-metric-card-v2-danger {
    border-left-color: var(--audit-danger);
}

.perf-metric-card-v2-top {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.perf-metric-card-v2-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    margin-top: 0.1rem;
}

.perf-metric-card-v2-icon-success {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.perf-metric-card-v2-icon-warning {
    background: var(--audit-warning-subtle, #fef3c7);
    color: var(--audit-warning);
}

.perf-metric-card-v2-icon-danger {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

.perf-metric-card-v2-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.perf-metric-card-v2-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--audit-muted);
    text-transform: uppercase;
}

.perf-metric-card-v2-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--audit-ink);
    line-height: 1.4;
}

/* Real user request — one metric per row (full width), premium
   horizontal layout: status icon leading, label and value clearly
   separated left/right, matching the same visual language as the
   Core Web Vitals cards elsewhere in the Performance tab. */
.perf-metric-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 0.55rem;
    border: 1px solid var(--audit-border);
    border-left-width: 3px;
    background: var(--audit-surface-alt);
    transition: box-shadow 0.15s ease;
}

.perf-metric-row:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

.perf-metric-row-success {
    border-left-color: var(--audit-success);
}

.perf-metric-row-warning {
    border-left-color: var(--audit-warning);
}

.perf-metric-row-danger {
    border-left-color: var(--audit-danger);
}

.perf-metric-row-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    margin-top: 0.05rem;
}

.perf-metric-row-icon-success {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.perf-metric-row-icon-warning {
    background: var(--audit-warning-subtle, #fef3c7);
    color: var(--audit-warning);
}

.perf-metric-row-icon-danger {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

.perf-metric-row-main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.perf-metric-row-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.perf-metric-row-label {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--audit-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.perf-metric-row-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--audit-ink);
    line-height: 1.4;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}

/* Real user request — actionable "what to do" recommendation text */
.perf-metric-row-recommendation {
    font-size: 0.78rem;
    color: var(--audit-muted);
    line-height: 1.55;
}

/* Real user request — problem files shown in red, distinct from the
   rest of the list, with a short reason label. */
.perf-metric-file-problem a {
    color: var(--audit-danger) !important;
    font-weight: 600;
}

.perf-metric-file-reason {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--audit-danger);
    background: var(--audit-danger-subtle);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

/* Real user request — expandable actual-file-URLs list within each
   static metric row (JS/CSS/Image Size, Render Blocking). */
.perf-metric-files-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: var(--audit-primary);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0;
    cursor: pointer;
}

.perf-metric-files-chevron {
    transition: transform 0.15s ease;
}

.perf-metric-files-chevron.is-open {
    transform: rotate(180deg);
}

.perf-metric-files-list {
    list-style: none;
    padding: 0.4rem 0.5rem;
    margin: 0;
    max-height: 8rem;
    overflow-y: auto;
    background: var(--audit-surface-alt);
    border-radius: 0.4rem;
    text-align: left;
}

.perf-metric-files-list li {
    font-size: 0.68rem;
    line-height: 1.6;
    word-break: break-all;
}

.perf-metric-files-list a {
    color: var(--audit-ink);
    text-decoration: none;
}

.perf-metric-files-list a:hover {
    color: var(--audit-primary);
    text-decoration: underline;
}

/* Real user request — redesigned static-crawl metric cards (HTML/CSS/
   JS size, compression, caching, etc), matching the same color-tint +
   status-icon language as the Core Web Vitals cards above them, for
   one cohesive visual system across the whole Performance tab instead
   of two different card styles. */
.perf-static-card {
    height: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    border: 1px solid var(--audit-border);
    background: var(--audit-surface-alt);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.perf-static-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.perf-static-success {
    border-color: color-mix(in srgb, var(--audit-success) 30%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-success) 5%, var(--audit-surface-alt));
}

.perf-static-warning {
    border-color: color-mix(in srgb, var(--audit-warning) 30%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-warning) 5%, var(--audit-surface-alt));
}

.perf-static-danger {
    border-color: color-mix(in srgb, var(--audit-danger) 30%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-danger) 5%, var(--audit-surface-alt));
}

.perf-static-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--audit-muted);
}

.perf-static-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.perf-static-icon-success {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.perf-static-icon-warning {
    background: var(--audit-warning-subtle, #fef3c7);
    color: var(--audit-warning);
}

.perf-static-icon-danger {
    background: var(--audit-danger-subtle, #fee2e2);
    color: var(--audit-danger);
}

.perf-static-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--audit-ink);
    line-height: 1.35;
    /* Keeps longer messages (e.g. "Compression cannot be determined:
       response headers are not available on CrawledPage.") readable
       within the card rather than overflowing or forcing the whole
       grid row to stretch to one oversized card's height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.perf-static-name {
    font-size: 0.7rem;
    color: var(--audit-muted);
    margin-top: 0.25rem;
}

/* Real user request — advanced Performance tab: PSI-style mobile/
   desktop score rings, Core Web Vitals cards, and opportunities. */
.perf-advanced-panel {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--audit-border);
}

.perf-advanced-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--audit-muted);
    padding: 0.5rem 0;
}

.perf-device-toggle {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--audit-surface-alt);
    padding: 0.25rem;
    border-radius: 0.6rem;
}

.perf-device-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    border-radius: 0.4rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--audit-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.perf-device-btn.is-active {
    background: var(--audit-surface);
    color: var(--audit-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    font-weight: 600;
}

.perf-device-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.perf-score-ring-progress {
    transition: stroke-dashoffset 0.6s ease;
}

.perf-score-ring-number {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.perf-cwv-card {
    height: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid var(--audit-border);
    background: var(--audit-surface-alt);
}

.perf-cwv-good {
    border-color: color-mix(in srgb, var(--audit-success) 35%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-success) 6%, var(--audit-surface-alt));
}

.perf-cwv-needs-improvement {
    border-color: color-mix(in srgb, var(--audit-warning) 35%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-warning) 6%, var(--audit-surface-alt));
}

.perf-cwv-poor {
    border-color: color-mix(in srgb, var(--audit-danger) 35%, var(--audit-border));
    background: color-mix(in srgb, var(--audit-danger) 6%, var(--audit-surface-alt));
}

.perf-cwv-abbr {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--audit-muted);
}

.perf-cwv-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perf-cwv-dot-good {
    background: var(--audit-success);
}

.perf-cwv-dot-needs-improvement {
    background: var(--audit-warning);
}

.perf-cwv-dot-poor {
    background: var(--audit-danger);
}

.perf-cwv-value {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--audit-ink);
}

.perf-cwv-status-label {
    font-size: 0.7rem;
    color: var(--audit-muted);
}

.perf-field-data-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--audit-muted);
    background: var(--audit-surface-alt);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
}

.perf-field-data-note svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--audit-primary);
}

.perf-opportunities-heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--audit-muted);
    margin-bottom: 0.6rem;
}

.perf-opportunity-item {
    border: 1px solid var(--audit-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.perf-opportunity-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    border: none;
    background: var(--audit-surface-alt);
    text-align: left;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
}

.perf-opportunity-toggle:hover {
    background: color-mix(in srgb, var(--audit-primary) 4%, var(--audit-surface-alt));
}

.perf-opportunity-chevron {
    flex-shrink: 0;
    color: var(--audit-muted);
    transition: transform 0.15s ease;
}

.perf-opportunity-chevron.is-open {
    transform: rotate(90deg);
}

.perf-opportunity-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--audit-ink);
}

.perf-opportunity-savings {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--audit-danger);
    background: var(--audit-danger-subtle, #fee2e2);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.perf-opportunity-desc {
    padding: 0.7rem 0.9rem 0.9rem 2.3rem;
    font-size: 0.82rem;
    color: var(--audit-muted);
    line-height: 1.55;
    margin: 0;
}

/* Real user request — Resource Breakdown donut chart */
.perf-resource-breakdown {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--audit-border);
}

.perf-donut-total {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--audit-ink);
}

.perf-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.perf-donut-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.perf-donut-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perf-donut-legend-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--audit-ink);
}

.perf-donut-legend-value {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--audit-muted);
}

/* Real user request — Filmstrip (page loading progression) */
.perf-filmstrip {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--audit-border);
}

.perf-filmstrip-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.perf-filmstrip-frame {
    flex-shrink: 0;
    text-align: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.perf-filmstrip-frame:hover .perf-filmstrip-img {
    border-color: var(--audit-primary);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.perf-filmstrip-img {
    width: 72px;
    height: auto;
    border-radius: 0.35rem;
    border: 1px solid var(--audit-border);
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.perf-filmstrip-time {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--audit-muted);
    margin-top: 0.2rem;
}

/* Real user request — click-to-enlarge lightbox for filmstrip frames */
.perf-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 2rem;
}

.perf-lightbox-content {
    text-align: center;
    max-width: min(90vw, 640px);
}

.perf-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.perf-lightbox-time {
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.perf-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.perf-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.perf-metric-ring {
    --ring-percent: 50%;
    --ring-color: var(--audit-muted);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--ring-color) calc(var(--ring-percent) * 1%), var(--audit-border) 0);
    position: relative;
}

.perf-metric-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
}

.perf-metric-ring-label {
    position: relative;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.perf-metric-ring-success {
    --ring-color: var(--audit-success);
}

.perf-metric-ring-warning {
    --ring-color: var(--audit-warning);
}

.perf-metric-ring-danger {
    --ring-color: var(--audit-danger);
}

.security-checklist-icon,
.check-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.check-item {
    padding-top: 1.15rem !important;
    padding-bottom: 1.15rem !important;
}

.check-item p:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.check-item .text-secondary.small {
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 0.15rem;
}

.security-checklist-icon-success,
.check-status-icon-success {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.security-checklist-icon-warning,
.check-status-icon-warning {
    background: var(--audit-warning-subtle);
    color: var(--audit-warning);
}

.security-checklist-icon-danger,
.check-status-icon-danger {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

/*
    Phase V4 (Business/Lead Scorecard Polish)
*/
.grade-ring {
    --grade-color: var(--audit-muted);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--grade-color) 0deg, var(--grade-color) 360deg);
    animation: grade-ring-fill 1s ease-out;
    position: relative;
}

.grade-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
}

.grade-ring-letter {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--grade-color);
}

.grade-ring-success {
    --grade-color: var(--audit-success);
}

.grade-ring-warning {
    --grade-color: var(--audit-warning);
}

.grade-ring-danger {
    --grade-color: var(--audit-danger);
}

/* Real user request — premium score ring for Prospect Qualification,
   matching the Performance tab's own score-ring visual language. */
.lead-score-ring-progress {
    transition: stroke-dashoffset 0.6s ease;
}

.lead-score-ring-letter {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.lead-score-ring-fraction {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--audit-muted);
}

/* Real user request — Best Contact Method badge */
.lead-best-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--audit-primary) 8%, var(--audit-surface-alt));
    border: 1px solid color-mix(in srgb, var(--audit-primary) 25%, var(--audit-border));
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    color: var(--audit-ink);
}

.lead-best-contact-badge svg {
    flex-shrink: 0;
    color: var(--audit-primary);
}

@keyframes grade-ring-fill {
    from {
        background: conic-gradient(var(--grade-color) 0deg, transparent 0deg);
    }

    to {
        background: conic-gradient(var(--grade-color) 0deg, var(--grade-color) 360deg);
    }
}

.prospect-next-action {
    background: var(--audit-surface-subtle, rgba(0, 0, 0, .03));
    border: 1px solid var(--audit-border);
    border-left: 3px solid var(--bs-primary, #9c7a3c);
}

/*
    Phase W2 (Responsive Check Display)
*/
.responsive-screenshot-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--audit-border);
    border-radius: .5rem;
    overflow: hidden;
}

.responsive-screenshot {
    display: block;
    max-width: 100%;
    max-height: 480px;
    width: auto;
}

.responsive-screenshot-highlight {
    position: absolute;
    border: 3px solid var(--audit-danger);
    background: var(--audit-danger-subtle);
    border-radius: 2px;
    pointer-events: none;
}

/*
    Phase Y8 (design consistency pass) — .responsive-device-toggle's
    own active-state rule was removed here: Phase Y3's Alpine
    conversion of the Mobile/Desktop toggle
    (resources/views/audit/partials/responsive-check.blade.php) moved
    to plain .btn-outline-secondary elements with Alpine's own
    :class="{ active: ... }" binding, which already gets its active
    styling from Bootstrap's own .btn.active rules — this class name
    stopped being used in any view at that point.
*/

.chart-wrap {
    position: relative;
    height: 280px;
}

.chart-wrap-lg {
    height: 340px;
}

.checks-overview-row .progress {
    overflow: hidden;
}

.checks-overview-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--audit-muted);
}

.checks-overview-legend .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

.accordion-item {
    border-color: var(--audit-border);
    background-color: var(--audit-surface);
}

.accordion-button {
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--audit-surface-alt);
    color: var(--audit-ink);
    box-shadow: inset 0 -1px 0 var(--audit-border);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(156, 122, 60, 0.18);
}

.accordion-button::after {
    margin-left: 0.75rem;
}

.accordion-body .fw-medium {
    font-weight: 600;
}

.accordion-body .badge.font-mono {
    font-weight: 600;
}

/* Detailed Results — individual check rows inside each accordion body.
   A colored left border (status-driven: pass=success/warning/fail=
   danger) plus a soft hover tint turns each plain list-group-item into
   a subtle, scannable "card row" without the weight of a full
   bordered card per check — there can be a dozen+ of these inside one
   accordion body. border-left-width/-color rather than a shorthand
   border-left so Bootstrap's own list-group-item top/bottom divider
   (already set by .list-group-flush) is never overridden. */
/* Real user request — category-specific accent tint per tab, so SEO,
   Security, Accessibility, Content, UI/UX, Business Opportunity, and
   Lead Intelligence each read as visually distinct at a glance.
   Deliberately scoped to structural elements only (header stripe,
   heading color) — check-item status colors and the score bar stay
   tied to pass/warning/fail and score level, which is what those
   colors need to communicate, not which category they're in. */
.card[data-category-key="seo"] {
    --cat-accent: #4a5b9e;
}

.card[data-category-key="security"] {
    --cat-accent: #3d6273;
}

.card[data-category-key="accessibility"] {
    --cat-accent: #2f8a83;
}

.card[data-category-key="content"] {
    --cat-accent: #a06a3e;
}

.card[data-category-key="ui_ux"] {
    --cat-accent: #7a5ba8;
}

.card[data-category-key="business_opportunity"] {
    --cat-accent: #3d7a52;
}

.card[data-category-key="lead_intelligence"] {
    --cat-accent: #9c4f61;
}

[data-theme="dark"] .card[data-category-key="seo"] {
    --cat-accent: #8b9adb;
}

[data-theme="dark"] .card[data-category-key="security"] {
    --cat-accent: #7fb0c2;
}

[data-theme="dark"] .card[data-category-key="accessibility"] {
    --cat-accent: #5fc9c0;
}

[data-theme="dark"] .card[data-category-key="content"] {
    --cat-accent: #d9a06c;
}

[data-theme="dark"] .card[data-category-key="ui_ux"] {
    --cat-accent: #b39ce0;
}

[data-theme="dark"] .card[data-category-key="business_opportunity"] {
    --cat-accent: #6fc98a;
}

[data-theme="dark"] .card[data-category-key="lead_intelligence"] {
    --cat-accent: #d98da0;
}

.card[data-category-key] .category-card-header {
    border-left: 3px solid color-mix(in srgb, var(--cat-accent, transparent) 55%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat-accent, transparent) 6%, var(--audit-surface)) 0%, var(--audit-surface) 55%);
    transition: background-color 0.15s ease;
}

.card[data-category-key] .category-card-header:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat-accent, transparent) 10%, var(--audit-surface)) 0%, var(--audit-surface) 65%);
}

.card[data-category-key] .category-card-header .fw-medium {
    color: color-mix(in srgb, var(--cat-accent, var(--audit-ink)) 82%, var(--audit-ink));
}

/* Real user request — grouped, per-page collapsible affected-locations
   list, replacing a flat alternating list that could run 14-18 lines
   for a single check. */
.check-location-list-grouped {
    list-style: none;
    width: 100%;
    padding-left: 0 !important;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--audit-border);
    border-radius: 0.5rem;
    background: var(--audit-surface-alt);
}

.check-location-page-group {
    border-bottom: 1px solid var(--audit-border);
}

.check-location-page-group:last-child {
    border-bottom: none;
}

.check-location-page-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--audit-muted);
    cursor: pointer;
}

.check-location-page-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--audit-primary) 5%, transparent);
}

.check-location-page-toggle:disabled {
    cursor: default;
    opacity: 0.7;
}

/* Real user request — red-highlighted problem entries (e.g. WCAG
   contrast failures) in the generic check-item affected-elements
   list, matching the same red-highlight pattern used for
   Performance's affected files. */
.check-location-page-group-problem .check-location-page-toggle a,
.check-location-page-group-problem .check-location-page-toggle span {
    color: var(--audit-danger);
    font-weight: 600;
}

.check-location-page-toggle a {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--audit-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check-location-page-toggle span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check-location-page-toggle a:hover {
    text-decoration: underline;
}

.check-location-page-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
    opacity: 0.6;
}

.check-location-page-chevron.is-open {
    transform: rotate(90deg);
}

.check-location-page-detail {
    padding: 0 0.75rem 0.6rem 2rem;
    font-size: 0.78rem;
    color: var(--audit-muted);
    line-height: 1.5;
}

.check-location-page-detail a {
    display: block;
    color: var(--audit-primary);
    word-break: break-all;
}

.check-item {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: transparent;
    transition: background-color 0.15s ease;
}

.check-item:hover {
    background-color: var(--audit-surface-alt);
}

.check-item-success {
    border-left-color: var(--audit-success);
}

.check-item-warning {
    border-left-color: var(--audit-warning);
}

.check-item-danger {
    border-left-color: var(--audit-danger);
}

/* Status pill — an icon + text badge (see the inline SVG per status in
   dashboard-components.blade.php) rather than a text-only badge, so a
   pass/warning/fail reads as a shape+color combination too, not color
   alone. */
.check-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.3em 0.65em;
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
}

.check-status-pill svg {
    flex-shrink: 0;
}

/* PRODUCTION UPDATE — real user request: replaces the plain
   pass/warning/fail text badge with a two-tier label (Critical/At
   Risk/Healthy as the emotionally meaningful word, a plain-language
   sub-label underneath) and a signal-bar icon whose bar count reflects
   severity, on a soft gradient background per status. */
.check-status-pill-v2 {
    padding: 0.35em 0.7em;
    color: #ffffff;
    line-height: 1.15;
}

.check-status-pill-danger {
    background: linear-gradient(135deg, #DC2626, #F87171);
}

.check-status-pill-warning {
    background: linear-gradient(135deg, #D97706, #FBBF24);
}

.check-status-pill-success {
    background: linear-gradient(135deg, #059669, #34D399);
}

.check-status-pill-neutral {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.check-status-signal {
    flex-shrink: 0;
}

.check-status-pill-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.check-status-pill-primary {
    font-weight: 700;
    font-size: 0.76rem;
}

.check-status-pill-secondary {
    font-weight: 500;
    font-size: 0.62rem;
    opacity: 0.9;
}

/* ---------------------------------------------------------------------- */
/* Lead Intelligence section (platform pills, contact tags, draft panel)  */
/* ---------------------------------------------------------------------- */

.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--audit-border);
    background: var(--audit-surface-alt);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.contact-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--audit-surface-alt);
    border: 1px solid var(--audit-border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--audit-ink);
}

.priority-badge-high {
    background-color: rgba(178, 59, 50, 0.12);
    color: var(--audit-danger);
    border: 1px solid rgba(178, 59, 50, 0.28);
}

.priority-badge-medium {
    background-color: rgba(181, 121, 31, 0.12);
    color: var(--audit-warning);
    border: 1px solid rgba(181, 121, 31, 0.28);
}

.priority-badge-low {
    background-color: rgba(47, 143, 94, 0.12);
    color: var(--audit-success);
    border: 1px solid rgba(47, 143, 94, 0.28);
}

.outreach-draft-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--audit-ink);
}

/* Outreach Draft — styled like an email client's compose/preview pane:
   a muted header strip for the toolbar (title + Copy button), a
   separate Subject row beneath it (mirroring a real client's From/
   Subject header block), and the monospace body above. */
.outreach-card {
    overflow: hidden;
}

.outreach-card-header {
    background-color: var(--audit-surface-alt);
    border-bottom: 1px solid var(--audit-border);
}

.outreach-card-subject-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    background-color: var(--audit-surface-alt);
    border-bottom: 1px solid var(--audit-border);
    font-size: 0.9rem;
}

.outreach-card-field-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--audit-muted);
}

.outreach-card-field-value {
    color: var(--audit-ink);
}

.outreach-body-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    resize: vertical;
}

.outreach-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--audit-surface-alt);
    border: 1px solid var(--audit-border);
    font-size: 0.8rem;
}

.outreach-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--audit-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.outreach-file-remove:hover {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

/* Outreach compose window — deliberately blue (not this report's own
   gold accent) since blue is the near-universal "this is mail" visual
   cue (Gmail, Outlook), making this section unmistakable at a glance —
   the real gap a prior, same-toned version of this card had. */
.mailbox-window {
    --mail-accent: #3468e0;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(52, 104, 224, 0.08);
    overflow: hidden;
}

.mailbox-titlebar {
    background: linear-gradient(155deg, color-mix(in srgb, var(--mail-accent) 10%, var(--audit-surface)) 0%, var(--audit-surface) 100%);
    border-bottom: 1px solid var(--audit-border);
}

.mailbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mail-accent);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--mail-accent) 40%, transparent);
    flex-shrink: 0;
}

.mailbox-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.mailbox-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--audit-border);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.mailbox-template-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--audit-border);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.mailbox-template-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mailbox-template-pill {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 1rem;
    border: 1px solid var(--audit-border);
    background: var(--audit-surface-alt);
    color: var(--audit-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mailbox-template-pill:hover {
    border-color: var(--audit-primary);
    color: var(--audit-ink);
}

.mailbox-template-pill-active {
    background: var(--audit-primary);
    border-color: var(--audit-primary);
    color: var(--audit-primary-contrast);
}

.mailbox-header-label {
    flex-shrink: 0;
    width: 3.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--audit-muted);
}

.mailbox-header-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 0.2rem 0;
    font-size: 0.92rem;
    color: var(--audit-ink);
    outline: none;
}

.mailbox-header-input:focus {
    box-shadow: none;
}

/* Real user request — Cc/Bcc toggle + rich text formatting toolbar */
.mailbox-ccbcc-toggle {
    flex-shrink: 0;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-accent, #4f46e5);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.mailbox-ccbcc-toggle:hover {
    text-decoration: underline;
}

.mailbox-format-toolbar {
    border-bottom: 1px solid var(--audit-border);
    padding-bottom: 0.6rem;
}

.mailbox-format-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--audit-ink);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.mailbox-format-btn:hover {
    background: var(--audit-surface-alt);
    border-color: var(--audit-border);
}

.mailbox-format-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mailbox-format-sep {
    width: 1px;
    height: 1.3rem;
    background: var(--audit-border);
    margin: 0 0.25rem;
}

.mailbox-body-editable {
    min-height: 12rem;
    max-height: 28rem;
    overflow-y: auto;
    border-radius: 0.4rem;
}

.mailbox-body-editable:focus {
    outline: none;
}

.mailbox-body-editable.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.mailbox-body-editable ul,
.mailbox-body-editable ol {
    padding-left: 1.4rem;
    margin: 0.4rem 0;
}

.mailbox-body-editable a {
    color: var(--audit-accent, #4f46e5);
}

/* Real user request — premium visual redesign of the Outreach Draft
   mailbox: a richer border glow, smoother gradient, and a touch of
   depth that reads as a polished product surface rather than a plain
   utility card. */
/* Real user request — WhatsApp + social media button bar, shown above
   Outreach Draft when the audited site's own contact info was found. */
.contact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, var(--audit-surface, #fff) 0%, var(--audit-surface-alt, #faf9f5) 100%);
    border: 1px solid var(--audit-border, #e5e1d8);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.contact-bar__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    margin-right: 0.25rem;
}

.contact-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--contact-btn-color, #6b7280);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-bar__btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.contact-bar__btn--whatsapp {
    background: #25D366;
}

.contact-bar__tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--audit-surface-alt, #f3f4f6);
    color: var(--audit-muted, #667085);
    border: 1px dashed var(--audit-border, #d1d5db);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.contact-bar__tech-badge:hover {
    background: var(--audit-surface, #fff);
    border-color: var(--audit-primary, #9c7a3c);
    color: var(--audit-primary, #9c7a3c);
}

.mailbox-window-premium {
    border: 1px solid color-mix(in srgb, var(--mail-accent) 22%, var(--audit-border));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 18px 40px rgba(52, 104, 224, 0.12),
        0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.25s ease;
}

.mailbox-window-premium:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 22px 48px rgba(52, 104, 224, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.05);
}

.mailbox-titlebar-premium {
    background: linear-gradient(155deg, color-mix(in srgb, var(--mail-accent) 14%, var(--audit-surface)) 0%, var(--audit-surface) 75%);
    position: relative;
}

.mailbox-titlebar-premium::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mail-accent) 45%, transparent), transparent 70%);
}

.mailbox-icon-premium {
    background: linear-gradient(135deg, var(--mail-accent), color-mix(in srgb, var(--mail-accent) 60%, #1e3a8a));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 14px color-mix(in srgb, var(--mail-accent) 45%, transparent);
}

.mailbox-header-row-premium {
    transition: background 0.15s ease;
    border-radius: 0.4rem;
}

.mailbox-header-row-premium:focus-within {
    background: color-mix(in srgb, var(--mail-accent) 5%, transparent);
}

.mailbox-format-toolbar-premium {
    background: color-mix(in srgb, var(--mail-accent) 4%, var(--audit-surface));
    border-radius: 0.5rem;
    margin: 0 1rem;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    width: calc(100% - 2rem);
}

/* Real user request — font selector in the toolbar */
.mailbox-font-select {
    border: 1px solid var(--audit-border);
    background: var(--audit-surface);
    border-radius: 0.35rem;
    font-size: 0.82rem;
    color: var(--audit-ink);
    padding: 0.3rem 0.5rem;
    height: 1.9rem;
    cursor: pointer;
    max-width: 9rem;
}

.mailbox-font-select:hover {
    border-color: color-mix(in srgb, var(--mail-accent) 40%, var(--audit-border));
}

.mailbox-font-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Real user request — email chip input for multiple To/Cc/Bcc
   addresses, matching Gmail/Outlook's own compose box. */
.email-chip-input-wrapper {
    position: relative;
    flex: 1 1 auto;
}

/* Real user request — a colorful, auto-dismissing (5s) toast
   notification card above the field on every verify click. Real
   user feedback: made more compact (tighter padding, smaller icon,
   truncated email) and restyled as a light card with a colored
   left-border accent instead of a full gradient wash — a more
   refined, premium notification pattern, not a generic SaaS-gradient
   card. */
.email-chip-toast {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    max-width: 22rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    background: #fff;
    border-left: 3px solid;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    cursor: pointer;
}

.email-chip-toast-valid {
    border-left-color: var(--audit-success);
}

.email-chip-toast-invalid,
.email-chip-toast-error {
    border-left-color: var(--audit-danger);
}

.email-chip-toast-unavailable {
    border-left-color: var(--audit-primary);
}

.email-chip-toast-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.email-chip-toast-valid .email-chip-toast-icon {
    background: var(--audit-success-subtle);
    color: var(--audit-success);
}

.email-chip-toast-invalid .email-chip-toast-icon,
.email-chip-toast-error .email-chip-toast-icon {
    background: var(--audit-danger-subtle);
    color: var(--audit-danger);
}

.email-chip-toast-unavailable .email-chip-toast-icon {
    background: color-mix(in srgb, var(--audit-primary) 14%, #fff);
    color: var(--audit-primary);
}

.email-chip-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.email-chip-toast-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--audit-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-chip-toast-message {
    font-size: 0.72rem;
    color: var(--audit-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-chip-toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--audit-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem;
}

.email-chip-toast-close:hover {
    color: var(--audit-ink);
}

.email-chip-toast-fade-enter-active,
.email-chip-toast-fade-leave-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.email-chip-toast-fade-enter-from,
.email-chip-toast-fade-leave-to {
    opacity: 0;
    transform: translateY(6px);
}

.email-chip-field {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.15rem 0;
    cursor: text;
}

.email-chip-field.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--mail-accent) 12%, var(--audit-surface));
    color: color-mix(in srgb, var(--mail-accent) 75%, #111827);
    border: 1px solid color-mix(in srgb, var(--mail-accent) 25%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.35rem 0.15rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: nowrap;
}

.email-chip-invalid {
    background: var(--audit-danger-subtle, #fee2e2);
    color: var(--audit-danger, #b91c1c);
    border-color: color-mix(in srgb, var(--audit-danger, #b91c1c) 30%, transparent);
}

.email-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.email-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.email-chip-remove:disabled {
    cursor: not-allowed;
}

/* Real user request — per-email "check if valid" button. Real user
   feedback fix: redesigned as a visible, labeled pill (not a tiny
   11px icon-only circle) so it's actually noticeable and its purpose
   is clear from the text alone, not just an icon a person has to
   guess at. */
.email-chip-validate {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.3rem;
    padding: 0 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.85;
    cursor: pointer;
    flex-shrink: 0;
}

.email-chip-validate:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
}

.email-chip-validate:disabled {
    cursor: not-allowed;
}

.email-chip-validate-valid {
    color: var(--audit-success);
    border-color: var(--audit-success);
    background: color-mix(in srgb, var(--audit-success) 12%, #fff);
    opacity: 1;
}

.email-chip-validate-invalid {
    color: var(--audit-danger);
    border-color: var(--audit-danger);
    background: color-mix(in srgb, var(--audit-danger) 12%, #fff);
    opacity: 1;
}

.email-chip-validate-unavailable {
    color: var(--audit-muted);
    opacity: 0.75;
    cursor: not-allowed;
}

.email-chip-validate-checking {
    opacity: 1;
}

.email-chip-validate-text {
    font-size: 0.68rem;
}

.email-chip-validate-spinner {
    animation: email-chip-validate-spin 0.8s linear infinite;
}

@keyframes email-chip-validate-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.email-chip-input {
    flex: 1 1 6rem;
    min-width: 6rem;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.92rem;
    color: var(--audit-ink);
    padding: 0.2rem 0;
}

/* Real fix — visible (not hover-only) validation result line */
.email-chip-result-line {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--audit-muted);
}

.email-chip-result-line strong {
    color: var(--audit-ink);
}

.email-chip-result-valid {
    color: var(--audit-success);
}

.email-chip-result-invalid {
    color: var(--audit-danger);
}

.email-chip-result-unavailable {
    color: var(--audit-muted);
}

.mailbox-body-input {
    width: 100%;
    border: none;
    background: transparent;
    resize: vertical;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--audit-ink);
    outline: none;
    padding: 0;
}

.mailbox-body-input:focus {
    box-shadow: none;
}

.mailbox-toolbar {
    background: var(--audit-surface-alt);
    border-top: 1px solid var(--audit-border);
}

.mailbox-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.35rem;
    background: var(--mail-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--mail-accent) 35%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mailbox-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--mail-accent) 45%, transparent);
}

.mailbox-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mailbox-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--audit-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mailbox-attach-btn:hover:not(.disabled) {
    background: color-mix(in srgb, var(--mail-accent) 12%, transparent);
    color: var(--mail-accent);
}

.mailbox-attach-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mailbox-based-on-toggle {
    position: relative;
    font-size: 0.78rem;
    color: var(--audit-muted);
    cursor: default;
    border-bottom: 1px dashed var(--audit-border);
}

.mailbox-based-on-popover {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    width: 260px;
    background: var(--audit-surface);
    border: 1px solid var(--audit-border);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(21, 24, 31, 0.12);
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    z-index: 5;
    text-align: left;
    white-space: normal;
}

.mailbox-based-on-toggle:hover .mailbox-based-on-popover,
.mailbox-based-on-toggle:focus .mailbox-based-on-popover {
    display: block;
}

/* Mail Settings page */
.settings-eyebrow {
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

.settings-heading {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--audit-ink);
}

.settings-field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--audit-muted);
}

.settings-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--audit-primary);
    color: var(--audit-primary-contrast, #fff);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.settings-provider-btn {
    border: 1.5px solid var(--audit-border);
    background: var(--audit-surface);
    color: var(--audit-ink);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.settings-provider-btn:hover {
    border-color: var(--audit-primary);
}

.settings-provider-btn.active {
    background: var(--audit-primary);
    border-color: var(--audit-primary);
    color: var(--audit-primary-contrast, #fff);
}

.settings-instructions {
    background: var(--audit-surface-alt);
    border: 1px solid var(--audit-border);
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
}

.settings-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: 0.6rem;
    border: 1px solid var(--audit-border);
    background: var(--audit-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.settings-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.settings-logo-preview-empty {
    background: var(--audit-surface-alt);
}

/* Momentary "Copied!" confirmation state — see outreach-copy.js. */
.outreach-copy-btn.is-copied {
    border-color: var(--audit-success);
    color: var(--audit-success);
}

/* ---------------------------------------------------------------------- */
/* Dark Mode, Print Layout & Responsive Polish                            */
/* ---------------------------------------------------------------------- */

body,
.card,
.app-navbar,
.result-header,
.summary-card,
.overall-score-card,
.accordion-item {
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--audit-surface);
}

[data-bs-theme="dark"] .summary-card-summary,
[data-bs-theme="dark"] .overall-score-meta dt {
    color: var(--audit-muted);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--audit-muted);
    border-color: var(--audit-border);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    color: var(--audit-ink);
    background-color: var(--audit-surface-alt);
    border-color: var(--audit-border);
}

/* Responsive polish -------------------------------------------------- */

@media (max-width: 991.98px) {
    .chart-wrap {
        height: 240px;
    }

    .chart-wrap-lg {
        height: 280px;
    }

    .score-gauge {
        --gauge-size: 148px;
    }
}

@media (max-width: 575.98px) {
    .chart-wrap {
        height: 200px;
    }

    .chart-wrap-lg {
        height: 220px;
    }

    .score-gauge {
        --gauge-size: 128px;
        --gauge-thickness: 11px;
    }

    .mini-ring {
        --ring-size: 3.1rem;
    }

    .accordion-button {
        font-size: 0.9rem;
        padding: 0.85rem 1rem;
    }

    .accordion-button .summary-card-icon {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.6rem;
    }

    .accordion-body {
        padding: 1rem;
    }

    .overall-score-meta dd {
        font-size: 0.9rem;
    }

    .grade-seal {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 1rem;
    }
}

/* Print-friendly layout ----------------------------------------------- */

/* Print-friendly layout -----------------------------------------------
   Verified against the "Print Report" flow (window.print(), triggered
   by the d-print-none button in result.blade.php) and Excel export
   (a download, never part of the printed page regardless):
     - .app-navbar and .theme-toggle (layouts/app.blade.php) and both
       the "Print Report"/"Download Excel Report" buttons
       (result.blade.php) already carry d-print-none, which Bootstrap's
       own d-print-none utility hides in print — the extra
       .app-navbar/.theme-toggle selectors below are a defense-in-depth
       duplicate of that same rule, not fixing a gap.
     - The accordion auto-expand rule (.accordion-collapse/.accordion-
       button/.collapse { display: block !important; ... }) was already
       correct and unchanged.
   The one real gap fixed here: chart canvases (and their .chart-card
   wrapper) had no break-inside protection, so a browser could
   previously cut a bar/radar chart in half across a page boundary —
   see the break-inside/page-break-inside rule below, now including
   .chart-card canvas and .outreach-card alongside the cards/accordion
   items that already had it.
   ----------------------------------------------------------------- */

@media print {

    /* PRODUCTION UPDATE — real user request: the report letterhead's
    own logo should be noticeably bigger in print/PDF than the
    compact on-screen version (.result-header-logo's own 44px), since
    a printed report benefits from a more prominent brand mark. */
    .result-header-logo {
        width: 72px !important;
        height: 72px !important;
    }

    :root,
    [data-bs-theme="dark"] {
        --audit-ink: #15181f;
        --audit-muted: #475467;
        --audit-bg: #ffffff;
        --audit-surface: #ffffff;
        --audit-surface-alt: #ffffff;
        --audit-border: #d0d5dd;
        --audit-track: #eef0f4;
    }

    body {
        background: #fff;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* PRODUCTION FIX — Bootstrap's own .container carries a fixed,
    centered max-width (designed for on-screen use beside the
    sidebar) that stayed in effect for print even with the sidebar
    itself hidden, squeezing this report's own content toward the
    middle of the page instead of using the full printable width. */
    .container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .app-navbar,
    .app-footer,
    .loading-overlay,
    .theme-toggle,
    .d-print-none,
    .accordion-button::after,
    .btn[data-bs-toggle="collapse"],
    .overall-score-watermark,
    [data-category-key="lead_intelligence"] {
        display: none !important;
    }

    .result-header {
        border-bottom: 1px solid var(--audit-border);
    }

    .result-header-hero {
        border-bottom: 1px solid var(--audit-border);
        background: none !important;
    }

    /* PRODUCTION FIX — v-show sets an inline display:none on whichever
    category card body ISN'T the currently-open accordion item; only
    the one category open on-screen printed at all before this. Forces
    every category card's own body to show regardless of Vue's own
    v-show state, scoped to [data-category-key] specifically so this
    never affects any other .card-body on the page. */
    [data-category-key] .card-body {
        display: block !important;
    }

    /* PRODUCTION FIX — same v-show-collapse issue as the category
    accordion body above, for the two nested toggle lists inside
    it: "N affected page(s)" and "View recommendations (N)" — both
    default closed and stayed that way in print until now. */
    .check-location-list,
    .category-recommendations-list {
        display: block !important;
    }

    /* Real user request — print view should show every dropdown open
    with no scrolling. Extends the fix above to the newer per-page
    group detail (its own separate v-show, expandedPageGroups), and
    removes the scroll box on the grouped affected-locations list —
    a printed page shows everything rather than truncating to a
    scroll container nobody can actually scroll on paper. */
    .check-location-page-detail {
        display: block !important;
    }

    .check-location-list-grouped {
        max-height: none !important;
        overflow: visible !important;
    }

    .check-location-page-toggle {
        pointer-events: none;
    }

    .check-location-page-chevron {
        display: none;
    }

    /* Real user request — print's dropdown box still wasn't taking
    full width even with the display:block/max-height fixes above.
    Browsers' print rendering of flexbox + flex-grow is a known
    inconsistency (some print engines compute a narrower intrinsic
    width for flex children than the same layout gets on-screen), so
    the whole check-item row is forced to plain block layout for
    print instead of relying on flexbox at all — the status pill
    already sits fine as a right-aligned inline element within that. */
    /* Real fix — the badge's position shifted unpredictably between
    check-items (reported as "not holding its place"), traced to the
    display:block + float:right approach below: floats interact
    unreliably with surrounding block content of varying height,
    especially once a check-item's dropdown is expanded and much
    taller than its neighbors. Replaced with explicit flex-sizing
    constraints instead — keeping the SAME flex layout the page
    already uses on-screen, just made print-reliable, rather than
    switching to a different layout model only for print. */
    .check-item {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .check-item>.flex-grow-1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .check-item .check-status-pill-v2 {
        flex: 0 0 auto;
        margin-left: 0.75rem;
    }

    .check-location-list-grouped,
    .check-location-page-group,
    .check-location-page-toggle {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .card,
    .summary-card,
    .overall-score-card,
    .accordion-item,
    .chart-card {
        border: 1px solid var(--audit-border) !important;
        box-shadow: none !important;
    }

    .summary-card:hover {
        transform: none;
    }

    /* Every card-shaped block that could otherwise be sliced across a
     page boundary — a chart (canvas included, since the browser has
     no visibility into what's drawn inside it and would otherwise
     happily cut it mid-bar) gets the same treatment as a category
     card or accordion item. break-inside is the modern property name;
     page-break-inside is kept alongside it for older/print-specific
     engines that don't recognize break-inside yet. */
    .summary-card,
    .overall-score-card,
    .accordion-item,
    .chart-card,
    .chart-card canvas,
    .outreach-card,
    .perf-opportunity-item,
    .perf-cwv-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .perf-device-toggle {
        display: none;
    }

    .category-processing-badge {
        display: none;
    }

    .category-processing-badge-exhausted {
        display: none;
    }

    .category-backfill-progress {
        display: none;
    }

    .perf-metric-files-list {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .perf-metric-files-toggle {
        display: none;
    }

    .perf-filmstrip-row {
        flex-wrap: wrap;
        overflow: visible;
    }

    /* Real user request — Score Comparison (and its sibling charts)
    still got cut across a page boundary despite break-inside:avoid
    above, because that property is known to be unreliable on
    flexbox children in several browsers' print engines. Bootstrap's
    .row is a flex container, so its .chart-card children's own
    break-inside:avoid wasn't being honored. Forcing the row itself
    to plain block/stacked layout for print removes the flex context
    that was interfering, letting break-inside:avoid actually work.
    Targets the specific row wrapping the chart cards by its actual
    classes rather than :has(), which isn't supported in every
    browser's print engine yet. */
    .row.g-4.mb-4 {
        display: block !important;
    }

    .row.g-4.mb-4>[class*="col-"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    .accordion-collapse,
    .accordion-button,
    .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .accordion-button {
        color: var(--audit-ink) !important;
        background: none !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    a[href]::after {
        content: "";
    }

}

/* ==========================================================================
   Phase N1 (Authentication Foundation) — login/register/forgot-password/
   reset-password/verify-email pages, all built on layouts/guest.blade.php.
   Reuses the app's own existing --audit-* variables (never new colors) so
   these pages never look like a bolted-on, differently-themed section.
   ========================================================================== */

.auth-body {
    background-color: var(--audit-bg);
    color: var(--audit-ink);
}

.auth-card-wrapper {
    max-width: 440px;
}

.auth-brand-text {
    color: var(--audit-ink);
    font-family: 'Fraunces', serif;
}

.auth-card {
    border: 1px solid var(--audit-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.auth-card .form-label {
    font-weight: 500;
    font-size: 0.875rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--audit-secondary, #6b7280);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--audit-border);
}

.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.auth-google-btn img {
    width: 18px;
    height: 18px;
}

.auth-footer-link {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 1.25rem;
}

.app-user-menu-toggle {
    border: none;
    background: none;
    color: var(--audit-ink);
}

.app-user-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.app-user-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--audit-border);
    color: var(--audit-ink);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ==========================================================================
   Phase N2 (Sidebar Navigation + Dynamic Notification System)
   ========================================================================== */

:root {
    --app-sidebar-width: 240px;
}

body {
    display: flex;
    min-height: 100vh;
}

/*
    PRODUCTION BUG FIXED — real production testing found every
    Inertia-rendered page's own sidebar/topbar/content appearing
    stacked vertically (sidebar list, then a "floating" topbar, then
    page content below it) rather than sidebar-left/content-right side
    by side — persisting even at genuine scroll position (0,0),
    ruling out a scroll-reset explanation entirely.

    Root cause: body's own display:flex above only applies to body's
    DIRECT children. resources/views/app-inertia.blade.php's own
    @inertia Blade directive renders <div id="app">...</div>, and
    Vue's own app.mount(el) call in resources/js/app.js mounts INTO
    that real DOM element (as its children) rather than replacing it
    — so #app itself, not .app-sidebar/.app-main-wrapper, is body's
    own actual direct child. Without #app ALSO being display:flex,
    its own children (rendered by
    resources/js/Layouts/AppLayout.vue's own multi-root <aside>/
    <div class="app-main-wrapper"> template) fall back to normal
    block-level stacking (top to bottom) instead of the intended
    side-by-side row layout — exactly matching every symptom above.
*/
#app {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.app-sidebar {
    width: var(--app-sidebar-width);
    flex-shrink: 0;
    background-color: var(--audit-bg);
    border-right: 1px solid var(--audit-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: margin-left 0.2s ease;
}

/*
    Phase Y1 (Alpine.js Foundation) — collapsed via the Alpine store's
    own sidebarCollapsed state (public/js/alpine-store.js), bound onto
    <body> as a reactive :class in resources/views/layouts/app.blade.php
    — replaces public/js/sidebar.js's own imperative classList.toggle,
    same resulting class name and CSS effect.
*/
body.app-sidebar-collapsed .app-sidebar {
    margin-left: calc(var(--app-sidebar-width) * -1);
}

.app-sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--audit-border);
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--audit-ink);
}

.app-sidebar-brand-text {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.05rem;
}

.app-sidebar-nav {
    flex: 1;
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
}

.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--audit-ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    margin-bottom: 0.15rem;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.app-sidebar-link:hover {
    background-color: var(--audit-border);
    color: var(--audit-ink);
    transform: translateX(2px);
}

/*
    Phase Y1 — PRODUCTION CONSISTENCY FIX: was hardcoded #9c7a3c/#fff,
    the exact same value var(--audit-primary)/var(--audit-primary-contrast)
    already hold — meaning this one rule silently stayed the LIGHT-mode
    brass color even in dark mode, instead of dark mode's own lighter
    #c9a15f accent every other primary-colored element on this app
    already switches to. Token-driven now, so this is automatically
    theme-correct.
*/
.app-sidebar-link.active {
    background-color: var(--audit-primary);
    color: var(--audit-primary-contrast);
    box-shadow: 0 2px 8px rgba(156, 122, 60, 0.25);
}

.app-sidebar-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* PRODUCTION BUG FIXED — real, pre-existing gap (not something this
session's print/CSS work introduced — confirmed by searching this
whole file plus AppLayout.vue's own template, which has no <style>
block at all): a locked sidebar item (any plan-gated or login-required
item — see AppLayout.vue's own v-if="item.is_locked || item.requires_login")
had zero CSS of its own, only ever noticeable on a REGULAR (non-admin)
account, since App\Http\Middleware\HandleInertiaRequests::sidebarItems()
never marks anything locked for an admin (isAdmin() bypasses the whole
check) — an admin account was never going to reveal this gap. Styled
to read as clearly "available, but locked" rather than either a fully
normal link (misleading — it doesn't navigate) or fully hidden: muted
text/icon color, no hover-highlight, not-allowed cursor, and a small
pill badge (Upgrade/Log In) on the right — the same badge shape/weight
.pdf-chip and this app's own other small status pills already use,
so it doesn't introduce a new one-off style.
*/
.app-sidebar-link-locked {
    color: var(--audit-muted);
    cursor: not-allowed;
}

.app-sidebar-link-locked:hover {
    background-color: transparent;
    color: var(--audit-muted);
    transform: none;
}

.app-sidebar-link-locked .app-sidebar-link-icon {
    opacity: 0.55;
}

.app-sidebar-link-locked .app-sidebar-link-text {
    flex: 1;
}

.app-sidebar-lock-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: var(--audit-border);
    color: var(--audit-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.app-sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--audit-border);
}

/* Phase Y1 — token-driven, was hardcoded #b23b32 (the light-mode-only
   danger hex; see .app-sidebar-link.active's own comment above for the
   identical class of bug this matches). */
.app-notification-badge {
    margin-left: auto;
    background-color: var(--audit-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.app-notification-dropdown {
    width: 340px;
    max-width: 90vw;
    padding: 0;
    overflow: hidden;
}

.app-notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--audit-border);
}

.app-notification-mark-all {
    font-size: 0.8rem;
    text-decoration: none;
}

.app-notification-list {
    max-height: 320px;
    overflow-y: auto;
}

.app-notification-item {
    display: block;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--audit-border);
    text-decoration: none;
    color: var(--audit-ink);
}

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

.app-notification-item.unread {
    background-color: rgba(156, 122, 60, 0.08);
}

.app-notification-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.app-notification-item-message {
    font-size: 0.8rem;
    color: var(--audit-muted);
}

.app-notification-item-time {
    font-size: 0.72rem;
    color: var(--audit-muted);
    opacity: 0.75;
    margin-top: 0.2rem;
}

.app-notification-dropdown-footer {
    display: block;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.82rem;
    border-top: 1px solid var(--audit-border);
    text-decoration: none;
}

.app-main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--audit-border);
    /*
        Phase Y1 — a subtle sticky-header treatment: this app's own
        .app-sidebar is already position:sticky; the topbar earns the
        same "stays put, content scrolls beneath it" feel, with a soft
        blur so scrolled content doesn't harshly clip at the edge.
    */
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--audit-surface);
}

.app-sidebar-toggle-btn {
    border: none;
    background: none;
    color: var(--audit-ink);
    padding: 0.35rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.app-sidebar-toggle-btn:hover {
    background-color: var(--audit-border);
}

.app-sidebar-toggle-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 767.98px) {
    .app-sidebar {
        position: fixed;
        z-index: 1040;
        margin-left: calc(var(--app-sidebar-width) * -1);
    }

    body.app-sidebar-collapsed .app-sidebar {
        margin-left: 0;
    }
}

/* ==========================================================================
   Phase N1.5 (Homepage + Quick Audit Hero) — new marketing landing page
   sections (resources/views/home/index.blade.php). Reuses this file's own
   existing --audit-* variables and .hero/.audit-form-width rules where
   they already fit (never new colors) — .hero-n15-* below is additive,
   not a replacement for .hero itself.
   ========================================================================== */

.hero-n15 {
    padding: 5rem 1rem 4.5rem;
    text-align: center;
    background: radial-gradient(circle at 15% 20%,
            rgba(156, 122, 60, 0.08),
            transparent 45%),
        linear-gradient(180deg, var(--audit-hero-gradient-start) 0%, var(--audit-bg) 100%);
}

.hero-n15-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--audit-primary);
    background-color: var(--audit-primary-subtle);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.hero-n15-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
    line-height: 1.15;
}

.hero-n15-subtitle {
    color: var(--audit-muted);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 2rem;
}

.n15-section {
    padding: 4.5rem 1rem;
}

.n15-section-alt {
    background-color: var(--audit-surface, rgba(0, 0, 0, 0.015));
}

.n15-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.n15-section-subtitle {
    color: var(--audit-muted);
    max-width: 560px;
    margin: 0 auto;
}

.n15-feature-card {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--audit-border);
    border-radius: 14px;
    background-color: var(--audit-bg);
}

.n15-feature-icon {
    width: 28px;
    height: 28px;
    color: var(--audit-primary);
    margin-bottom: 0.9rem;
}

.n15-feature-title {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.n15-feature-desc {
    color: var(--audit-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.n15-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--audit-primary);
    color: var(--audit-primary-contrast);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.n15-stat {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--audit-primary);
    margin-bottom: 0.25rem;
}

.n15-pricing-card {
    height: 100%;
    padding: 2rem;
    border: 1px solid var(--audit-border);
    border-radius: 14px;
    background-color: var(--audit-bg);
    text-align: center;
}

.n15-pricing-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.n15-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: 0.88rem;
    color: var(--audit-muted);
    text-align: left;
}

.n15-pricing-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--audit-border);
}

.n15-pricing-list li:last-child {
    border-bottom: none;
}

/*
    Phase V5 (Luxury Visual Theme) — spacing rhythm + mobile responsive
    fixes for the Full Audit Report page specifically.
*/

/*
    Breathing room between the numbered report sections (01/02/03/...)
    — previously each `<section class="mb-4">` sat only 1.5rem below
    the one before it, with the eyebrow label of the next section
    landing almost flush against the last card of the previous one.
    Scoped to .report-eyebrow's own parent section rather than a blanket
    section rule, so this doesn't affect unrelated pages that also use
    <section> tags for other layouts.
*/
.dashboard>section,
.dashboard-components>section {
    margin-bottom: 3rem;
}

.dashboard>section:last-child,
.dashboard-components>section:last-child {
    margin-bottom: 0;
}

.report-eyebrow {
    margin-bottom: 1rem;
}

/* Mobile responsive — Category Breakdown grid and Score Analysis charts */
@media (max-width: 575.98px) {
    .score-gauge {
        --gauge-size: 132px;
        --gauge-thickness: 11px;
    }

    .chart-wrap {
        height: 220px;
    }

    .summary-card-icon {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.62rem;
    }

    .mini-ring {
        --ring-size: 3rem;
    }

    .perf-metric-card {
        padding: 0.75rem !important;
    }

    .tech-stack-card {
        padding: 0.75rem !important;
    }
}

/*
    Phase Y1 (Alpine.js Foundation)
*/

/*
    [x-cloak] hides an element until Alpine has actually processed its
    own x-show/x-data directives — without this, an element whose
    INITIAL state is "closed" (like every dropdown menu this phase
    converts) would flash visible for one frame on every page load,
    before Alpine's own JS runs and hides it. This is Alpine's own
    documented, standard fix for that flash.
*/
[x-cloak] {
    display: none !important;
}

/*
    Phase Y5 (Vue.js islands) — Vue's own equivalent of Alpine's
    x-cloak: hides an element until Vue has actually mounted and
    processed it, preventing the same "flash of unprocessed template"
    (raw @{{ }} mustache syntax briefly visible) x-cloak's own comment
    above already explains for Alpine.
*/
[v-cloak] {
    display: none !important;
}

/*
    A real class replacing what used to be an inline
    -webkit-line-clamp style string built inside
    public/js/job-feed's own (now-removed) manual card-rendering
    function — same 3-line description clamp, just as reusable CSS
    instead of a JS-generated inline style attribute.
*/
.jf-description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
    A small scale+fade — used by the user-profile dropdown and the
    notification bell dropdown (resources/views/layouts/app.blade.php,
    resources/views/layouts/partials/sidebar.blade.php) via Alpine's
    own x-transition:enter directives, replacing the plain instant
    show/hide Bootstrap's own dropdown JS used to do.
*/
.app-dropdown-transition-enter {
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.app-dropdown-transition-enter-start {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}

.app-dropdown-transition-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*
    Phase Y2 (Alpine.js Foundation, cont.) — a clean, self-contained
    modal implementation for Alpine-driven modals (see
    resources/views/keyword-lists/index.blade.php's own New List
    modal) that deliberately does NOT reuse Bootstrap's own .modal/
    .modal-dialog/.modal-content classes — those classes' own CSS
    expects Bootstrap's modal.js to be the one adding/removing .show
    and toggling display, which this Alpine-driven modal isn't using
    at all; reusing those class names without that JS would leave the
    modal permanently hidden (Bootstrap's own base .modal rule is
    display:none) regardless of Alpine's own x-show state.
*/
.app-alpine-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background-color: var(--audit-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.app-alpine-modal-dialog {
    width: 100%;
    max-width: 500px;
}

.app-alpine-modal-content {
    background-color: var(--audit-surface);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.app-alpine-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--audit-border);
}

.app-alpine-modal-body {
    padding: 1.25rem;
}

.app-alpine-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--audit-border);
}

.app-alpine-modal-fade-enter {
    transition: opacity 0.15s ease-out;
}

.app-alpine-modal-fade-enter-start {
    opacity: 0;
}

.app-alpine-modal-fade-enter-end {
    opacity: 1;
}

.app-alpine-modal-scale-enter {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.app-alpine-modal-scale-enter-start {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
}

.app-alpine-modal-scale-enter-end {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ==========================================================
   Image Studio Phase 1 — Super Premium canvas editor
   ========================================================== */
.studio-editor {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--audit-bg, #f7f5f0);
    display: flex;
    flex-direction: column;
}

/* Real user request: shown inline right after upload, not as a
   fullscreen overlay behind a launcher button anymore. */
.studio-editor-embedded {
    position: relative;
    inset: auto;
    z-index: auto;
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    overflow: hidden;
    height: 640px;
}

.studio-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.25rem;
    background: var(--audit-surface, #fff);
    border-bottom: 1px solid var(--audit-border, #e3e1d9);
    flex-shrink: 0;
}

.studio-editor-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.studio-editor-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--audit-border, #e3e1d9);
    background: var(--audit-surface, #fff);
    color: var(--audit-ink, #15181f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.studio-editor-icon-btn:disabled {
    opacity: 0.35;
}

.studio-editor-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.studio-tool-rail {
    width: 84px;
    flex-shrink: 0;
    background: var(--audit-surface, #fff);
    border-right: 1px solid var(--audit-border, #e3e1d9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 0.5rem;
    overflow-y: auto;
}

.studio-tool-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.3rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--audit-muted, #667085);
}

.studio-tool-btn.active {
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 14%, transparent);
    color: var(--audit-primary, #b8873f);
}

.studio-tool-label {
    font-size: 0.68rem;
    font-weight: 600;
}

.studio-canvas-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: auto;
    background:
        linear-gradient(45deg, #e9e7e0 25%, transparent 25%),
        linear-gradient(-45deg, #e9e7e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9e7e0 75%),
        linear-gradient(-45deg, transparent 75%, #e9e7e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.studio-canvas-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
}

.studio-canvas-img {
    display: block;
    max-width: 78vw;
    max-height: 72vh;
    user-select: none;
    -webkit-user-drag: none;
}

.studio-canvas-filter-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.studio-crop-rect {
    position: absolute;
    border: 2px dashed #ffffff;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.studio-text-layer {
    position: absolute;
    cursor: move;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    user-select: none;
    padding: 2px 4px;
}

.studio-text-layer.active {
    outline: 1.5px dashed #fff;
}

.studio-watermark-layer {
    position: absolute;
    cursor: move;
    max-width: 220px;
    user-select: none;
}

.studio-property-panel {
    width: 300px;
    flex-shrink: 0;
    background: var(--audit-surface, #fff);
    border-left: 1px solid var(--audit-border, #e3e1d9);
    padding: 1.1rem;
    overflow-y: auto;
}

.studio-panel-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.studio-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.studio-preset-btn {
    padding: 0.55rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--audit-border, #e3e1d9);
    background: var(--audit-surface, #fff);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-ink, #15181f);
}

.studio-preset-btn.active {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 12%, transparent);
    color: var(--audit-primary, #b8873f);
}

.studio-slider-group {
    margin-bottom: 1rem;
}

.studio-slider-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
}

.studio-slider-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-ink, #15181f);
}

.studio-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.studio-filter-thumb {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0.3rem;
    background: transparent;
    text-align: center;
}

.studio-filter-thumb.active {
    border-color: var(--audit-primary, #b8873f);
}

.studio-filter-thumb-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
}

.studio-filter-thumb-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

.studio-edit-launch-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 3px 10px rgba(184, 135, 63, 0.35);
}

.studio-edit-launch-btn:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 135, 63, 0.45);
}

/* Image Studio Phase 2 — Batch/Workflow */
.batch-actions-bar {
    background: var(--audit-surface, #fff);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.batch-settings-panel {
    border-top: 1px solid var(--audit-border, #e3e1d9);
    padding-top: 0.85rem;
}

.image-studio-item-wrapper {
    position: relative;
}

.image-studio-item-select {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 5;
}

.image-studio-item-select .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ==========================================================
   Image Studio — merged upload+results page (real user request)
   ========================================================== */
.studio-eyebrow {
    color: var(--audit-muted, #667085);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.studio-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.9rem;
    font-weight: 600;
}

.studio-card {
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.studio-card-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.1rem;
    font-weight: 600;
}

.studio-mode-switch {
    display: inline-flex;
    background: var(--audit-surface-alt, #f3f1ea);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.studio-mode-switch button {
    border: none;
    background: transparent;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    transition: all 0.15s ease;
}

.studio-mode-switch button.active {
    background: var(--audit-surface, #fff);
    color: var(--audit-primary, #b8873f);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.studio-dropzone {
    border: 2px dashed var(--audit-border, #e3e1d9);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--audit-surface-alt, #faf9f5);
    transition: all 0.18s ease;
}

.studio-dropzone:hover {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 5%, var(--audit-surface-alt, #faf9f5));
}

.studio-dropzone.is-dragging {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 10%, var(--audit-surface-alt, #faf9f5));
    transform: scale(1.005);
}

.studio-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.studio-dropzone-title {
    font-weight: 600;
    font-size: 0.98rem;
}

.studio-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}

.studio-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.studio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.studio-upload-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    box-shadow: 0 3px 10px rgba(184, 135, 63, 0.3);
}

.studio-upload-btn:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 135, 63, 0.4);
}

.studio-upload-btn:disabled {
    opacity: 0.6;
}

.studio-section-divider {
    border: none;
    border-top: 1px solid var(--audit-border, #e3e1d9);
}

/* Image Studio — premium redesign pass (Usage stats, list rows) */
.studio-usage-stat {
    padding: 1rem 1.1rem;
    background: var(--audit-surface-alt, #f8f7f2);
    border-radius: 12px;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.studio-usage-stat-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.studio-usage-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 15%, transparent);
    color: var(--audit-primary, #b8873f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.studio-usage-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.studio-usage-value {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.studio-usage-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--audit-border, #e3e1d9);
    overflow: hidden;
}

.studio-usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--audit-primary, #b8873f), #d4a76a);
    transition: width 0.3s ease;
}

.studio-usage-bar-fill.is-warning {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.studio-usage-bar-fill.is-danger {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.studio-list-card {
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    overflow: hidden;
    background: var(--audit-surface, #fff);
}

.studio-list-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--audit-border, #e3e1d9);
    transition: background 0.12s ease;
}

.studio-list-row:last-child {
    border-bottom: none;
}

.studio-list-row:hover {
    background: var(--audit-surface-alt, #faf9f5);
}

.studio-list-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--audit-surface-alt, #f3f1ea);
    color: var(--audit-primary, #b8873f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.studio-list-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.studio-list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.studio-list-title {
    font-weight: 600;
    font-size: 0.88rem;
}

.studio-list-sub {
    font-size: 0.76rem;
    color: var(--audit-muted, #667085);
}

.studio-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35em 0.7em;
    border-radius: 999px;
}

.studio-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--audit-border, #e3e1d9);
    overflow: hidden;
}

.studio-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--audit-primary, #b8873f), #d4a76a);
    transition: width 0.3s ease;
}

/* Image Studio Quick Tools — premium redesign pass */
.studio-quicktools-card {
    background: var(--audit-surface-alt, #faf9f5);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
}

.studio-quicktools-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1rem;
    font-weight: 600;
}

.studio-quicktools-tabs button {
    font-size: 0.74rem;
    padding: 0.32rem 0.7rem;
}

.studio-field-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
}

.studio-field-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-ink, #15181f);
}

.studio-input {
    border-radius: 8px;
    border-color: var(--audit-border, #e3e1d9);
}

.studio-input:focus {
    border-color: var(--audit-primary, #b8873f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--audit-primary, #b8873f) 15%, transparent);
}

.studio-chip-btn {
    border: 1px solid var(--audit-border, #e3e1d9);
    background: var(--audit-surface, #fff);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--audit-ink, #15181f);
    transition: all 0.12s ease;
}

.studio-chip-btn:hover {
    border-color: var(--audit-primary, #b8873f);
    color: var(--audit-primary, #b8873f);
}

.studio-action-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 0.4rem 1.1rem;
    box-shadow: 0 2px 8px rgba(184, 135, 63, 0.25);
}

.studio-action-btn:hover {
    color: #fff;
    box-shadow: 0 3px 10px rgba(184, 135, 63, 0.35);
}

.studio-action-btn:disabled {
    opacity: 0.55;
    box-shadow: none;
}

/* Image Studio Quick Crop UX clarity fix — real user request */
.studio-freecrop-box {
    background: var(--audit-surface, #fff);
    border: 1px dashed var(--audit-border, #e3e1d9);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.studio-chip-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ==========================================================
   Image SEO — merged upload+results page (real user request)
   ========================================================== */
.seo-eyebrow {
    color: var(--audit-muted, #667085);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.seo-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.9rem;
    font-weight: 600;
}

.seo-card {
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.seo-card-heading {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.1rem;
    font-weight: 600;
}

.seo-field-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
}

.seo-input {
    border-radius: 8px;
    border-color: var(--audit-border, #e3e1d9);
}

.seo-input:focus {
    border-color: var(--audit-primary, #b8873f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--audit-primary, #b8873f) 15%, transparent);
}

.seo-mode-switch {
    display: inline-flex;
    background: var(--audit-surface-alt, #f3f1ea);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}

.seo-mode-switch button {
    border: none;
    background: transparent;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    transition: all 0.15s ease;
}

.seo-mode-switch button.active {
    background: var(--audit-surface, #fff);
    color: var(--audit-primary, #b8873f);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.seo-dropzone {
    border: 2px dashed var(--audit-border, #e3e1d9);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--audit-surface-alt, #faf9f5);
    transition: all 0.18s ease;
}

.seo-dropzone:hover {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 5%, var(--audit-surface-alt, #faf9f5));
}

.seo-dropzone.is-dragging {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 10%, var(--audit-surface-alt, #faf9f5));
    transform: scale(1.005);
}

.seo-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.seo-dropzone-title {
    font-weight: 600;
    font-size: 0.98rem;
}

.seo-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}

.seo-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.seo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seo-upload-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    box-shadow: 0 3px 10px rgba(184, 135, 63, 0.3);
}

.seo-upload-btn:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 135, 63, 0.4);
}

.seo-upload-btn:disabled {
    opacity: 0.6;
}

.seo-usage-stat {
    padding: 1rem 1.1rem;
    background: var(--audit-surface-alt, #f8f7f2);
    border-radius: 12px;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.seo-usage-stat-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.seo-usage-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 15%, transparent);
    color: var(--audit-primary, #b8873f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.seo-usage-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.seo-usage-value {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.seo-usage-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--audit-border, #e3e1d9);
    overflow: hidden;
}

.seo-usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--audit-primary, #b8873f), #d4a76a);
    transition: width 0.3s ease;
}

.seo-usage-bar-fill.is-warning {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.seo-usage-bar-fill.is-danger {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.seo-health-card {
    background: var(--audit-surface, #fff);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.seo-health-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--audit-muted, #667085);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seo-health-score {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--audit-primary, #b8873f);
    line-height: 1;
}

.seo-health-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--audit-border, #e3e1d9);
    overflow: hidden;
}

.seo-health-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.seo-health-bar-fill.is-warning {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.seo-health-bar-fill.is-good {
    background: linear-gradient(90deg, #059669, #34d399);
}

.seo-health-stat-num {
    font-family: var(--audit-display-font, 'Fraunces', serif);
    font-size: 1.4rem;
    font-weight: 700;
}

.seo-health-stat-label {
    font-size: 0.75rem;
    color: var(--audit-muted, #667085);
}

.seo-list-card {
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 14px;
    overflow: hidden;
    background: var(--audit-surface, #fff);
}

.seo-list-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--audit-border, #e3e1d9);
    transition: background 0.12s ease;
}

.seo-list-row:last-child {
    border-bottom: none;
}

.seo-list-row:hover {
    background: var(--audit-surface-alt, #faf9f5);
}

.seo-list-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--audit-surface-alt, #f3f1ea);
    color: var(--audit-primary, #b8873f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.seo-list-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--audit-border, #e3e1d9);
}

.seo-list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.seo-list-title {
    font-weight: 600;
    font-size: 0.88rem;
}

.seo-list-sub {
    font-size: 0.76rem;
    color: var(--audit-muted, #667085);
}

.seo-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35em 0.7em;
    border-radius: 999px;
}

.seo-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--audit-border, #e3e1d9);
    overflow: hidden;
}

.seo-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--audit-primary, #b8873f), #d4a76a);
    transition: width 0.3s ease;
}

.seo-section-divider {
    border: none;
    border-top: 1px solid var(--audit-border, #e3e1d9);
}

/* Image SEO Phase 2 — Bulk Efficiency */
.seo-bulk-actions {
    background: var(--audit-surface-alt, #faf9f5);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.seo-bulk-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(184, 135, 63, 0.25);
}

.seo-bulk-btn:hover {
    color: #fff;
}

.seo-bulk-btn:disabled {
    opacity: 0.6;
}

.seo-length-badge {
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: 0.4rem;
    color: var(--audit-muted, #667085);
    background: var(--audit-surface-alt, #f3f1ea);
    border: 1px solid var(--audit-border, #e3e1d9);
}

.seo-length-badge.is-ideal {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
}

.seo-length-badge.is-short,
.seo-length-badge.is-long {
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.25);
}

.seo-length-badge-inline {
    font-size: 0.72rem;
    font-weight: 600;
}

.seo-length-badge-inline.is-ideal {
    color: #059669;
}

.seo-length-badge-inline.is-short,
.seo-length-badge-inline.is-long {
    color: #d97706;
}

/* Image SEO Phase 3 — Advanced (export dropdown) */
.seo-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--audit-surface, #fff);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.6rem;
    z-index: 20;
}

.seo-export-menu-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--audit-muted, #667085);
    margin: 0.3rem 0.5rem 0.2rem;
}

.seo-export-menu-item {
    display: block;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--audit-ink, #15181f);
    text-decoration: none;
}

.seo-export-menu-item:hover {
    background: var(--audit-surface-alt, #f3f1ea);
    color: var(--audit-primary, #b8873f);
}

.seo-export-menu-note {
    font-size: 0.68rem;
    color: var(--audit-muted, #667085);
    padding: 0.3rem 0.5rem 0;
    margin: 0;
    font-style: italic;
}

/* Image SEO — per-image Context override (real user request) */
.seo-context-override-panel {
    background: var(--audit-surface-alt, #faf9f5);
    border: 1px dashed var(--audit-primary, #b8873f);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

/* Image SEO — premium metadata card redesign (real user request) */
.seo-field-card {
    background: var(--audit-surface, #fff);
    border: 1px solid var(--audit-border, #e3e1d9);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.seo-field-card-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--audit-ink, #15181f);
}

.seo-generated-badge {
    font-size: 0.68rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 15%, transparent);
    color: var(--audit-primary, #b8873f);
    border: 1px solid color-mix(in srgb, var(--audit-primary, #b8873f) 30%, transparent);
}

.seo-input-readonly {
    background: var(--audit-surface-alt, #faf9f5);
    color: var(--audit-muted, #667085);
}

.seo-field-btn {
    background: linear-gradient(135deg, var(--audit-primary, #b8873f), #8a5f2a);
    color: #fff;
    border: none;
    font-weight: 600;
}

.seo-field-btn:hover {
    color: #fff;
}

.seo-field-note {
    font-size: 0.76rem;
    color: #b45309;
    margin-top: 0.4rem;
}

.seo-alt-candidate {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--audit-border, #e3e1d9);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.seo-alt-candidate:hover {
    border-color: var(--audit-primary, #b8873f);
}

.seo-alt-candidate.is-selected {
    border-color: var(--audit-primary, #b8873f);
    background: color-mix(in srgb, var(--audit-primary, #b8873f) 6%, transparent);
}

.seo-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--audit-border, #e3e1d9);
}

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

.seo-checklist-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.seo-checklist-dot.bg-success {
    background: #059669;
}

.seo-checklist-dot.bg-warning {
    background: #d97706;
}

.seo-checklist-dot.bg-danger {
    background: #dc2626;
}

.seo-format-note {
    font-size: 0.78rem;
    background: color-mix(in srgb, #d97706 8%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 25%, transparent);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: #92400e;
}

/* Image SEO — per-field live score + recommendation (real user request) */
.seo-points-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.3em 0.6em;
}

.seo-live-tip {
    font-size: 0.76rem;
    color: var(--audit-muted, #667085);
    background: var(--audit-surface-alt, #faf9f5);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin: 0;
}
/* Real user request — Print/Save-as-PDF action bar: a smarter,
   more premium-looking panel for the action buttons, and print-only
   rules so the printed/PDF report reads as a clean document rather
   than a printed copy of the web app UI. */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, var(--audit-surface, #fff) 0%, var(--audit-surface-alt, #faf9f5) 100%);
    border: 1px solid var(--audit-border, #e5e1d8);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.action-bar__icon {
    display: inline-block;
    margin-right: 0.25rem;
    font-size: 0.85em;
    opacity: 0.85;
}

@media print {
    /* Hides anything not meant for the printed page — nav, filters,
       buttons, sticky headers, and anything explicitly marked
       .no-print — so the output reads as a clean report. */
    .no-print,
    .section-nav,
    .issue-feed-filter,
    nav,
    button:not(.accordion-button) {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .card,
    .tech-hero-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }

    .table-responsive,
    [style*="max-height"] {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Real user request — "transparent glass cover" vibe on every card,
   done safely this time: a genuine frosted-glass PANEL (translucent
   background + backdrop-filter blur) applied directly to each card's
   own background — not an added overlay element, so there is no new
   stacking context and nothing here can conflict with any other
   component's own z-index (the earlier attempt's mistake). A soft
   background wash behind the cards gives the blur something visible
   to soften, which is what makes the glass read as glass. */
.tech-seo-report {
    background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--audit-primary) 10%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--tech-cat-accent, #6b4c93) 8%, transparent) 0%, transparent 40%),
        var(--audit-bg, #faf9f5);
}

.tech-seo-report .card,
.tech-seo-report .tech-hero-card {
    background: color-mix(in srgb, var(--audit-surface) 72%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--audit-surface) 40%, var(--audit-border));
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04), inset 0 1px 0 color-mix(in srgb, white 50%, transparent);
}

[data-bs-theme="dark"] .tech-seo-report .card,
[data-bs-theme="dark"] .tech-seo-report .tech-hero-card {
    background: color-mix(in srgb, var(--audit-surface) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--audit-surface) 30%, var(--audit-border));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

/* Real user request — Outreach Email tracking panel: send list, open
   rate, click rate, and Link check, shown above Outreach Draft. */
.email-stats-panel {
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, var(--audit-surface, #fff) 0%, var(--audit-surface-alt, #faf9f5) 100%);
    border: 1px solid var(--audit-border, #e5e1d8);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.email-stats-panel__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.email-stats-panel__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.email-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--audit-primary, #9c7a3c) 6%, var(--audit-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--audit-primary, #9c7a3c) 20%, var(--audit-border, #e5e1d8));
    border-radius: 0.65rem;
}

.email-stat-card__value {
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--audit-primary, #9c7a3c);
    line-height: 1;
}

.email-stat-card__label {
    font-size: 0.76rem;
    color: var(--audit-muted, #667085);
}

.email-stats-table th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--audit-muted, #667085);
    font-weight: 600;
    border-bottom-width: 1px;
}

.email-stats-table td {
    vertical-align: middle;
    font-size: 0.85rem;
}

.link-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-check-list__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--audit-border, #e5e1d8);
    font-size: 0.82rem;
}

.link-check-list__item:last-child {
    border-bottom: none;
}

.link-check-list__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.link-check-list__status--ok {
    background: #dcfce7;
    color: #15803d;
}

.link-check-list__status--broken {
    background: #fee2e2;
    color: #b91c1c;
}