:root {
    --navy: #0b1321;
    --navy-2: #0b1321;
    --ink: #17202c;
    --muted: #697789;
    --line: #dce3ec;
    --panel: #ffffff;
    --surface: #f4f7fb;
    --soft-blue: #e9f1fb;
    --accent: #0b1321;
    --accent-dark: #05080e;
    --survai-brand-blue: #0b1321;
    --survai-brand-blue-hover: #0b1321;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --success: #16704a;
    --success-soft: #ecfdf3;
    --warning: #926200;
    --warning-soft: #fff8db;
    --shadow: 0 20px 60px rgba(11, 18, 32, 0.08);
    --theme-bg: #f4f7fb;
    --theme-bg-strong: #ffffff;
    --theme-panel: #ffffff;
    --theme-panel-soft: #f8fafc;
    --theme-text: #17202c;
    --theme-muted: #697789;
    --theme-border: #dce3ec;
    --theme-accent: #1b5af9;
    --theme-accent-ink: #0b1321;
    --theme-sidebar: #0b1321;
    --theme-sidebar-panel: #0b1321;
    --theme-input: #ffffff;
    --theme-input-text: #17202c;
    --app-main-padding: clamp(18px, 3vw, 36px);
}

@media (max-width: 900px) {
    :root {
        --app-main-padding: clamp(16px, 3.5vw, 26px);
    }
}

/* ==========================================================
   SurvAI Premium SaaS V2: explicit high-visibility app shell
   Targets the real dashboard/workspace class names used by live pages.
   ========================================================== */

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body),
body.dashboard-body,
body.ops-dashboard-page,
body.survey-workflow-surface,
body.progress-page {
    background: #f8fafc !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel,
body.dashboard-body .main-panel,
body.ops-dashboard-page .main-panel,
body.survey-workflow-surface .main-panel,
body.progress-page .main-panel {
    background:
        radial-gradient(circle at 92% 0%, rgba(27, 90, 249, 0.09), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 36%, #f3f6fa 100%) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar,
body.dashboard-body .sidebar,
body.ops-dashboard-page .sidebar,
body.survey-workflow-surface .sidebar,
body.progress-page .sidebar {
    background: #0b1321 !important;
    box-shadow: 28px 0 70px rgba(11, 19, 33, 0.2) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-brand,
body.dashboard-body .sidebar-brand,
body.ops-dashboard-page .sidebar-brand,
body.survey-workflow-surface .sidebar-brand,
body.progress-page .sidebar-brand {
    margin-bottom: 10px;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a,
body.dashboard-body .sidebar-nav a,
body.ops-dashboard-page .sidebar-nav a,
body.survey-workflow-surface .sidebar-nav a,
body.progress-page .sidebar-nav a {
    border-radius: 18px !important;
}

.ops-hero,
.page-header,
.workflow-hero,
.progress-hero,
.report-overview-hero {
    padding: clamp(10px, 1.2vw, 18px) 0 !important;
}

.ops-dashboard-controls,
.dashboard-toolbar,
.toolbar,
.workflow-nav.card {
    border: 1px solid #e6ebf2 !important;
    border-radius: 20px !important;
    padding: clamp(14px, 1.6vw, 22px) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(11, 19, 33, 0.07) !important;
}

.ops-kpi-card,
.ops-card,
.ops-dashboard-card,
.ops-donut-block,
.ops-condition,
.ops-action-row,
.ops-diary-row,
.ops-activity-row,
.ops-region-row,
.ops-team-table,
.card,
.table-card,
.supporting-upload,
.report-form,
.client-profile-card,
.property-card,
.lifecycle-component-card,
.cost-item-card,
.cost-category-card {
    border: 1px solid #e6ebf2 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(11, 19, 33, 0.075) !important;
}

.ops-kpi-card:hover,
.ops-card:hover,
.card:hover {
    box-shadow: 0 24px 68px rgba(11, 19, 33, 0.11) !important;
}

.ops-kpi-card {
    min-height: 132px !important;
    padding: 24px !important;
}

.ops-kpi-card__value {
    color: #0b1321 !important;
    font-size: clamp(2rem, 2.7vw, 3.25rem) !important;
    letter-spacing: -0.055em !important;
}

.ops-kpi-card__label,
.ops-card h2,
.card h2,
.page-header h1 {
    color: #111827 !important;
}

.ops-card-link,
.table-card a,
.card a:not(.btn) {
    color: #1b5af9;
}

.btn,
button,
input,
select,
textarea {
    font-family: inherit;
}

.btn {
    border-radius: 999px !important;
}

.btn-primary:not(.reports-create-survey):not(.ops-create-survey-btn) {
    background: #1b5af9 !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline {
    background: #ffffff !important;
    color: #111827 !important;
}

.reports-create-survey,
.ops-create-survey-btn {
    background: #0b1321 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

input,
select,
textarea {
    border-color: #e6ebf2 !important;
    background: #ffffff !important;
    color: #111827 !important;
}

/* ==========================================================
   SurvAI Official Colour System
   Reference: premium SaaS navy navigation, white workspace,
   blue primary actions, restrained green success only.
   Keep last in the stylesheet so it normalises older page CSS.
   ========================================================== */

:root {
    --survai-navy: #0b1321;
    --survai-navy-deep: #08101c;
    /* Sidebar wordmark (`assets/icons/survai-wordmark-menu.png`) sampled blue — use for rail + primary */
    --survai-logo-blue: #1b5af9;
    --survai-blue: var(--survai-logo-blue);
    --survai-blue-hover: #1648d4;
    --survai-menu-icon-blue: var(--survai-logo-blue);
    --survai-green: #22c55e;
    --survai-amber: #f59e0b;
    --survai-red: #ef4444;
    --survai-bg: #f8fafc;
    --survai-card: #ffffff;
    --survai-border: #e6ebf2;
    --survai-text: #111827;
    --survai-secondary: #667085;
    --survai-muted: #98a2b3;
    --survai-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    --survai-shadow-hover: 0 18px 44px rgba(16, 24, 40, 0.10);
    --survai-focus: 0 0 0 4px rgba(27, 90, 249, 0.18);
    /* Icon rail width: Business Dashboard (ops) + report workspace sidebar */
    --survai-app-rail-width: 110px;

    --sai-navy: var(--survai-navy);
    --sai-navy-deep: var(--survai-navy-deep);
    --sai-workspace: var(--survai-card);
    --sai-workspace-soft: var(--survai-bg);
    --sai-card-border: var(--survai-border);
    --sai-text-main: var(--survai-text);
    --sai-text-secondary: var(--survai-secondary);
    --sai-focus-ring: var(--survai-focus);
    --theme-accent: var(--survai-blue);
    --theme-accent-ink: #ffffff;
    --accent: var(--survai-blue);
    --accent-dark: var(--survai-blue-hover);
    --success: var(--survai-green);
    --warning: var(--survai-amber);
    --danger: var(--survai-red);
    --survai-brand-blue: var(--survai-blue);
    --survai-brand-blue-hover: var(--survai-blue-hover);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body),
body.dashboard-body,
body.ops-dashboard-page,
body.survey-workflow-surface,
body.progress-page {
    background: var(--survai-bg) !important;
    color: var(--survai-text) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel,
body.dashboard-body .main-panel,
body.ops-dashboard-page .main-panel,
body.survey-workflow-surface .main-panel,
body.progress-page .main-panel {
    background:
        radial-gradient(circle at 92% 0%, rgba(27, 90, 249, 0.045), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, var(--survai-bg) 44%, #f4f7fb 100%) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar,
body.dashboard-body .sidebar,
body.ops-dashboard-page .sidebar,
body.survey-workflow-surface .sidebar,
body.progress-page .sidebar {
    /* Flat navy rail only — radial blue halo was washing through icon tiles beside the logo */
    background: linear-gradient(180deg, var(--survai-navy) 0%, var(--survai-navy-deep) 100%) !important;
    color: #ffffff !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a,
body.dashboard-body .sidebar-nav a,
body.ops-dashboard-page .sidebar-nav a,
body.survey-workflow-surface .sidebar-nav a,
body.progress-page .sidebar-nav a {
    color: rgba(255, 255, 255, 0.78) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a.active,
body.dashboard-body .sidebar-nav a.active,
body.ops-dashboard-page .sidebar-nav a.active,
body.survey-workflow-surface .sidebar-nav a.active,
body.progress-page .sidebar-nav a.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a.active::before,
body.dashboard-body .sidebar-nav a.active::before,
body.ops-dashboard-page .sidebar-nav a.active::before,
body.survey-workflow-surface .sidebar-nav a.active::before,
body.progress-page .sidebar-nav a.active::before {
    display: none !important;
}

.card,
.table-card,
.toolbar,
.supporting-upload,
.workflow-nav.card,
.section-card,
.dashboard-card,
.ops-kpi-card,
.ops-card,
.ops-dashboard-card,
.ops-donut-block,
.ops-condition,
.ops-action-row,
.ops-diary-row,
.ops-activity-row,
.ops-region-row,
.ops-team-table,
.sai-report-card,
.po-card,
.po-metric,
.cost-item-card,
.cost-category-card,
.lifecycle-component-card,
.transcript-document-card,
.documents-carousel-card {
    border-color: var(--survai-border) !important;
    background: var(--survai-card) !important;
    box-shadow: var(--survai-shadow) !important;
}

.card:hover,
.ops-kpi-card:hover,
.ops-card:hover,
.po-card:hover {
    box-shadow: var(--survai-shadow-hover) !important;
}

h1,
h2,
h3,
h4,
.page-header h1,
.ops-hero h1,
.po-topbar h1,
.po-hero-address,
.ops-kpi-card__value,
.ops-card h2,
.card h2 {
    color: var(--survai-text) !important;
}

p,
.form-note,
.po-subtitle,
.ops-subtitle,
.po-muted,
.ops-empty,
.secondary,
.muted {
    color: var(--survai-secondary) !important;
}

.eyebrow,
label span,
th,
.po-hero-grid dt,
.po-doc-cat-stats,
.ops-card-meta {
    color: var(--survai-muted) !important;
}

.btn-primary,
.reports-create-survey,
.ops-create-survey-btn,
button.btn-primary,
a.btn-primary {
    background: var(--survai-blue) !important;
    border-color: var(--survai-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.18) !important;
}

.btn-primary:hover,
.reports-create-survey:hover,
.ops-create-survey-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--survai-blue-hover) !important;
    border-color: var(--survai-blue-hover) !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline,
a.btn-secondary,
button.btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--survai-border) !important;
    color: var(--survai-text) !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #d8e0ea !important;
}

.btn-danger,
button.btn-danger,
a.btn-danger {
    background: #fff1f2 !important;
    border-color: rgba(239, 68, 68, 0.24) !important;
    color: var(--survai-red) !important;
}

input,
select,
textarea {
    border-color: var(--survai-border) !important;
    background: #ffffff !important;
    color: var(--survai-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--survai-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(27, 90, 249, 0.62) !important;
    box-shadow: var(--survai-focus) !important;
}

.ops-line-icon,
.po-inline-icon,
.po-metric-icon,
.po-act-icon,
.sidebar-nav-icon,
.workspace-tool-button__icon {
    color: currentColor;
}

.ops-kpi-card .ops-line-icon,
.po-metric-icon,
.transcript-document-icon {
    color: var(--survai-blue) !important;
    background: rgba(27, 90, 249, 0.10) !important;
}

.status-completed,
.status-complete,
.status-success,
.ops-trend--positive,
.condition-rating-badge.rating-cr1 {
    color: #15803d !important;
    background: rgba(34, 197, 94, 0.12) !important;
}

.status-processing,
.status-assigned,
.status-draft,
.ops-trend--neutral,
.condition-rating-badge.rating-ni,
.condition-rating-badge.rating-na {
    color: var(--survai-secondary) !important;
    background: rgba(152, 162, 179, 0.14) !important;
}

.status-warning,
.ops-trend--warning,
.condition-rating-badge.rating-cr2 {
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.14) !important;
}

.status-failed,
.status-danger,
.condition-rating-badge.rating-cr3 {
    color: #b91c1c !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

table thead,
.reports-table thead,
.wizard-documents-table th {
    background: #f8fafc !important;
}

table tr:hover td,
.reports-table tbody tr:hover,
.wizard-documents-table tbody tr:hover {
    background: rgba(27, 90, 249, 0.035) !important;
}

.ops-donut {
    --ops-donut-accent: var(--survai-blue);
}

.ops-condition--cr1,
.po-cr-box--cr1 {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #15803d !important;
}

.ops-condition--cr2,
.po-cr-box--cr2 {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
}

.ops-condition--cr3,
.po-cr-box--cr3 {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}

@media (max-width: 560px) {
    :root {
        --app-main-padding: clamp(14px, 4vw, 22px);
    }
}

html[data-theme="dark"] {
    --navy: #ffffff;
    --navy-2: #dbe5f4;
    --ink: #ffffff;
    --muted: #b6c2d3;
    --line: rgba(255, 255, 255, 0.14);
    --panel: rgba(9, 20, 37, 0.82);
    --surface: #0b1321;
    --soft-blue: rgba(27, 90, 249, 0.1);
    --accent: #1b5af9;
    --accent-dark: #9edf20;
    --danger: #fecaca;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.12);
    --warning: #fde68a;
    --warning-soft: rgba(253, 230, 138, 0.12);
    --shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
    --theme-bg: #0b1321;
    --theme-bg-strong: #0b1321;
    --theme-panel: rgba(9, 20, 37, 0.84);
    --theme-panel-soft: rgba(255, 255, 255, 0.06);
    --theme-text: #ffffff;
    --theme-muted: #b6c2d3;
    --theme-border: rgba(255, 255, 255, 0.14);
    --theme-accent: #1b5af9;
    --theme-accent-ink: #0b1321;
    --theme-sidebar: #0b1321;
    --theme-sidebar-panel: #0b1321;
    --theme-input: rgba(3, 10, 22, 0.58);
    --theme-input-text: #ffffff;
}

/* Final camera-first app-mode overrides. Keep these last so older responsive camera rules cannot reveal URL handoff panels. */
.capture-mode-body.is-camera-first-launch {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .sidebar,
.capture-mode-body.is-camera-first-launch .capture-workflow-intro,
.capture-mode-body.is-camera-first-launch .capture-desktop-handoff,
.capture-mode-body.is-camera-first-launch .mobile-capture-link-field,
.capture-mode-body.is-camera-first-launch .mobile-capture-copy-link {
    display: none !important;
}

.capture-mode-body.is-camera-first-launch .app-shell {
    display: block !important;
    min-height: 100dvh !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .main-panel {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-shell {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-panel.active.live-capture-panel,
.capture-mode-body.is-camera-first-launch .live-capture-panel .capture-screen {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-desktop-handoff .mobile-capture-link-field,
    .capture-desktop-handoff .mobile-capture-copy-link {
        display: none !important;
    }

    .survaicam-main {
        align-items: center !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        overflow: hidden !important;
    }

    .survaicam-permission-card,
    .survaicam-selected-card {
        width: min(520px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 24px !important;
        padding: 18px !important;
    }

    .survaicam-selected-card {
        width: min(430px, calc(100vw - 24px)) !important;
        min-height: calc(100dvh - 28px) !important;
        border-radius: 42px !important;
        padding: calc(56px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .survaicam-permission-card h1,
    .survaicam-selected-card h2 {
        font-size: clamp(22px, 6vw, 31px) !important;
        line-height: 1.08 !important;
    }

    .survaicam-actions {
        grid-template-columns: 1fr !important;
    }

    .survaicam-btn {
        width: 100% !important;
        min-height: 54px !important;
        border-radius: 18px !important;
    }
}

/* Final SurvAI Camera zoom rail placement. This must stay at the end of the stylesheet. */
@media (max-width: 920px), (pointer: coarse) {
    .capture-screen.is-main-camera .capture-filter-button svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .capture-screen.is-main-camera .capture-filter-button span {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        position: fixed !important;
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;
        right: calc(8px + var(--camera-safe-right)) !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 188px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 38px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 999px !important;
        padding: 6px 4px !important;
        background: rgba(6, 12, 20, 0.34) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
        transform: translateY(-50%) !important;
        backdrop-filter: blur(12px) saturate(125%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 0.76rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
        box-shadow: 0 4px 12px rgba(200, 243, 74, 0.22) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-zoom-control {
        right: auto !important;
        left: calc(8px + var(--camera-safe-left)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-zoom-control {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 164px !important;
        grid-auto-rows: 32px !important;
        gap: 4px !important;
        padding: 5px 3px !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.7rem !important;
    }
}

/* Final SurvAI Camera landscape mode selector placement: keep the portrait-style selector position. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: calc(14px + var(--camera-safe-bottom)) !important;
        left: 50% !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 5px !important;
        transform: translateX(-50%) !important;
        transform-origin: center !important;
        z-index: 52 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 70px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: auto !important;
        bottom: calc(10px + var(--camera-safe-bottom)) !important;
        left: 50% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 4px !important;
        transform: translateX(-50%) !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 64px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
    }
}

/* Absolute final correction: landscape keeps the portrait selector shape, sideways on the right edge. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: 50% !important;
        right: calc(-48px + var(--camera-safe-right) - 120px) !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 4px !important;
        transform: translateY(-50%) rotate(90deg) !important;
        transform-origin: center !important;
        z-index: 56 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 70px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: calc(-43px + var(--camera-safe-right) - 120px) !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        min-width: 64px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
    }
}

/* Absolute final capture navigation override. Keep after camera layout rules. */
.capture-mode-body .sidebar-brand,
.capture-mode-body .sidebar-brand:hover,
.capture-mode-body .sidebar-brand:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.capture-mode-body .brand-logo-sidebar {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.capture-dashboard-link {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 95;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--theme-text, #0f1b2f);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.capture-dashboard-link svg,
.capture-mobile-survey-shortcut svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capture-dashboard-link:hover,
.capture-dashboard-link:focus-visible {
    color: var(--theme-accent, #1b5af9);
    background: rgba(27, 90, 249, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.capture-mobile-survey-shortcut {
    position: fixed;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid rgba(27, 90, 249, 0.32);
    border-radius: 999px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(7, 17, 31, 0.86);
    box-shadow: 0 18px 40px rgba(7, 17, 31, 0.28);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(16px) saturate(130%);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.capture-mobile-survey-shortcut:hover,
.capture-mobile-survey-shortcut:focus-visible {
    color: #0b1321;
    border-color: var(--theme-accent, #1b5af9);
    background: var(--theme-accent, #1b5af9);
    outline: none;
    transform: translateY(-2px);
}

html[data-theme="light"] .capture-mobile-survey-shortcut {
    color: #0b1321;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(7, 17, 31, 0.18);
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-dashboard-link {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        color: #ffffff;
        background: rgba(7, 12, 22, 0.42);
        backdrop-filter: blur(14px) saturate(130%);
    }

    .capture-mobile-survey-shortcut {
        display: inline-flex;
    }

    .capture-mode-body.capture-live-active .capture-mobile-survey-shortcut,
    .capture-mode-body.is-camera-first-launch .capture-mobile-survey-shortcut {
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        min-height: 42px;
        padding: 0 12px;
        font-size: 0.8rem;
    }
}

/* Site-wide responsive containment guardrails. Keep long user/report content inside its card. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.app-shell,
.main-panel,
.card,
.workflow-page-card,
.section-card,
.output-section,
.output-summary-card,
.output-preview-card,
.workflow-builder-layout,
.builder-editor-column,
.builder-inspector,
.report-form,
.table-card,
.table-shell,
.section-head,
.page-header,
.header-actions,
.section-actions,
.section-head-actions,
.diagnostic-grid,
.condition-rating-summary-grid,
.workflow-qc-summary-grid,
.builder-mini-stats,
.matched-photo-grid,
.output-photo-grid,
.room-table-wrap,
.table-wrap {
    min-width: 0;
    max-width: 100%;
}

.main-panel,
.card,
.workflow-page-card,
.section-card,
.output-section,
.output-summary-card,
.output-preview-card,
.diagnostic-stat,
.condition-rating-summary-card,
.rating-sections-list a,
.section-body,
.form-note,
.page-header,
.section-head,
.workflow-page-header,
.report-heading,
.report-renderer {
    overflow-wrap: anywhere;
    word-break: normal;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

textarea,
input,
select,
button,
.btn {
    max-width: 100%;
}

.section-head > div,
.page-header > div,
.report-heading > div,
.diagnostic-stat span,
.diagnostic-stat strong,
.condition-rating-summary-card span,
.condition-rating-summary-card strong {
    min-width: 0;
}

.section-head-actions,
.header-actions,
.section-actions,
.form-actions,
.processing-actions,
.media-actions,
.photo-panel-actions,
.voice-button-row,
.voice-sync-actions,
.voice-note-actions {
    flex-wrap: wrap;
}

.table-wrap,
.room-table-wrap,
.wizard-documents-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
    .main-panel {
        width: 100%;
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }

    .workflow-page-card,
    .output-summary-card,
    .output-preview-card,
    .section-card,
    .card {
        border-radius: 14px;
    }

    .workflow-qc-summary-grid,
    .builder-mini-stats,
    .diagnostic-grid {
        grid-template-columns: 1fr;
    }

    .condition-rating-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .condition-rating-summary-card {
        min-height: 220px;
    }

    .section-head,
    .page-header,
    .report-heading {
        align-items: stretch;
    }

    .section-head-actions,
    .header-actions,
    .section-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .workflow-page-card,
    .output-summary-card,
    .output-preview-card,
    .section-card,
    .report-form,
    .card {
        padding-right: 14px;
        padding-left: 14px;
    }

    .diagnostic-stat {
        padding: 10px;
    }

    .condition-rating-badge {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 0.78rem;
    }

}

@media (max-width: 980px) {
    .po-overview-top {
        grid-template-columns: 1fr;
    }
}

/* Report Builder professional editor polish */
.workflow-builder-panel {
    --builder-border: rgba(15, 23, 42, 0.1);
    --builder-soft: #f8fafc;
    --builder-rail: #ffffff;
    --builder-shadow: 0 16px 44px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.workflow-builder-panel .workflow-nav.card,
.workflow-builder-panel .builder-queue-status,
.workflow-builder-panel .builder-status-summary,
.workflow-builder-panel .workflow-qc-summary,
.workflow-builder-panel .section-card,
.workflow-builder-panel .builder-inspector {
    border: 1px solid var(--builder-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--builder-shadow);
}

.workflow-builder-panel .workflow-builder-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.workflow-builder-panel .builder-queue-status {
    margin-top: 0;
}

.workflow-builder-panel .builder-queue-status .section-head {
    margin-bottom: 0.35rem;
}

.workflow-builder-panel .builder-queue-status .builder-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-builder-panel .builder-editor-column {
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
}

.workflow-builder-panel .section-card {
    position: relative;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 18px 0 0;
    background: transparent;
    box-shadow: none;
}

.workflow-builder-panel .section-card::before {
    content: none;
}

.workflow-builder-panel .section-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.workflow-builder-panel .section-card > .section-head {
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 0;
    background: transparent;
}

.workflow-builder-panel .section-card > .section-head h2 {
    font-size: clamp(1.08rem, 1.5vw, 1.34rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.workflow-builder-panel .section-order {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 8px;
    border-radius: 999px;
    padding: 3px 9px;
    color: #475569;
    background: #eef3f8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.workflow-builder-panel .section-collapsible {
    padding: 0 0 22px;
}

.workflow-builder-panel .section-form {
    display: grid;
    gap: 16px;
}

.workflow-builder-panel .section-text {
    min-height: 360px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    background: #ffffff;
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
    font-size: 1rem;
    line-height: 1.68;
}

.workflow-builder-panel .section-text:focus {
    border-color: rgba(27, 90, 249, 0.85);
    box-shadow: 0 0 0 4px rgba(27, 90, 249, 0.2), inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.workflow-builder-panel .condition-rating-control,
.workflow-builder-panel .section-regeneration-guidance,
.workflow-builder-panel .section-image-uploader,
.workflow-builder-panel .matched-photo-strip,
.workflow-builder-panel .approved-annotation-list {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 14px;
    background: #f8fafc;
}

.workflow-builder-panel .condition-rating-control > span,
.workflow-builder-panel .section-regeneration-guidance label span {
    color: #475569;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workflow-builder-panel .condition-rating-options {
    gap: 8px;
}

.workflow-builder-panel .condition-rating-option {
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.workflow-builder-panel .condition-rating-option:has(input:checked) {
    border-color: rgba(27, 90, 249, 0.85);
    background: rgba(27, 90, 249, 0.14);
    box-shadow: 0 0 0 3px rgba(27, 90, 249, 0.2);
}

.workflow-builder-panel .section-regeneration-guidance {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.workflow-builder-panel .section-regeneration-guidance textarea {
    border-radius: 12px;
    background: #ffffff;
}

.workflow-builder-panel .section-actions--qc {
    margin-top: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 14px;
}

.workflow-builder-panel .section-actions .btn,
.workflow-builder-panel .section-regeneration-guidance .btn {
    font-weight: 500;
}

.workflow-builder-panel .section-actions-main .btn-primary {
    box-shadow: 0 10px 22px rgba(27, 90, 249, 0.22);
}

.workflow-builder-panel .section-qc-approval {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 6px;
    background: #f8fafc;
}

.workflow-builder-panel .builder-inspector {
    top: 24px;
    gap: 16px;
    padding: 20px;
}

.workflow-builder-panel .builder-inspector .section-head {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.workflow-builder-panel .builder-mini-stats {
    gap: 10px;
}

.workflow-builder-panel .builder-mini-stats .diagnostic-stat {
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
}

.workflow-builder-panel .collapse-toggle {
    border-radius: 999px;
    background: #f8fafc;
}

@media (max-width: 1100px) {
    .workflow-builder-panel .workflow-builder-layout {
        grid-template-columns: 1fr;
    }

    .workflow-builder-panel .builder-inspector {
        position: static;
    }
}

@media (max-width: 720px) {
    .workflow-builder-panel .builder-queue-status .builder-mini-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .workflow-builder-panel .builder-editor-column {
        padding: 10px;
        border-radius: 18px;
    }

    .workflow-builder-panel .section-card > .section-head,
    .workflow-builder-panel .section-collapsible {
        padding-right: 16px;
        padding-left: 18px;
    }

    .workflow-builder-panel .section-text {
        min-height: 300px;
    }

    .workflow-builder-panel .section-regeneration-guidance {
        grid-template-columns: 1fr;
    }
}

/* Capture page navigation refinements. Kept at EOF to override older camera/sidebar rules. */
.capture-mode-body .sidebar-brand,
.capture-mode-body .sidebar-brand:hover,
.capture-mode-body .sidebar-brand:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.capture-mode-body .brand-logo-sidebar {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.capture-dashboard-link {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 95;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--theme-text, #0f1b2f);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.capture-dashboard-link svg,
.capture-mobile-survey-shortcut svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capture-dashboard-link:hover,
.capture-dashboard-link:focus-visible {
    color: var(--theme-accent, #1b5af9);
    background: rgba(27, 90, 249, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.capture-mobile-survey-shortcut {
    position: fixed;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid rgba(27, 90, 249, 0.32);
    border-radius: 999px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(7, 17, 31, 0.86);
    box-shadow: 0 18px 40px rgba(7, 17, 31, 0.28);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(16px) saturate(130%);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.capture-mobile-survey-shortcut:hover,
.capture-mobile-survey-shortcut:focus-visible {
    color: #0b1321;
    border-color: var(--theme-accent, #1b5af9);
    background: var(--theme-accent, #1b5af9);
    outline: none;
    transform: translateY(-2px);
}

html[data-theme="light"] .capture-mobile-survey-shortcut {
    color: #0b1321;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(7, 17, 31, 0.18);
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-dashboard-link {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        color: #ffffff;
        background: rgba(7, 12, 22, 0.42);
        backdrop-filter: blur(14px) saturate(130%);
    }

    .capture-mobile-survey-shortcut {
        display: inline-flex;
    }

    .capture-mode-body.capture-live-active .capture-mobile-survey-shortcut,
    .capture-mode-body.is-camera-first-launch .capture-mobile-survey-shortcut {
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        min-height: 42px;
        padding: 0 12px;
        font-size: 0.8rem;
    }
}

/* Global SurvAI light/dark theme layer. Kept last so legacy hard-coded colours inherit the selected mode. */
html,
body,
.app-shell,
.main-panel {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body),
.app-shell,
.main-panel {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] body:not(.login-body):not(.survaicam-page):not(.capture-mode-body) {
    background:
        radial-gradient(circle at 76% 14%, rgba(27, 90, 249, 0.1), transparent 30%),
        linear-gradient(145deg, #0b1321 0%, #0b1321 48%, #0b1321 100%);
}

html[data-theme="light"] body:not(.login-body):not(.survaicam-page):not(.capture-mode-body) {
    background: #f4f7fb;
}

.card,
.workflow-page-card,
.processing-card,
.dashboard-card,
.ops-dashboard-card,
.report-overview-card,
.client-profile-card,
.document-category-card,
.media-uploader-card,
.pdf-settings-card,
.costing-panel,
.transcript-workspace-card,
.voice-note-item,
.media-file-item,
.queue-item,
.diagnostic-stat,
.supporting-image-panel,
.supporting-document-item,
.report-form,
.table-shell {
    border-color: var(--theme-border) !important;
    background: var(--theme-panel) !important;
    color: var(--theme-text) !important;
    box-shadow: var(--shadow);
}

.sidebar {
    background: var(--theme-sidebar) !important;
    color: #ffffff;
}

.sidebar-nav a,
.sidebar .user-pill strong {
    color: rgba(255, 255, 255, 0.88);
}

.sidebar-nav a.active {
    background: transparent;
    color: #ffffff;
}

h1,
h2,
h3,
.section-head h2,
.page-header h1,
.workflow-page-header h1,
.voice-note-main strong,
.diagnostic-stat strong,
.transcript-card-head h2,
.transcript-section-title-row h2,
.transcript-workspace-header h1,
.transcript-recording-main strong,
.transcript-recording-summary span,
.transcript-recording-status,
.transcript-document-copy strong {
    color: var(--theme-text) !important;
}

p,
.form-note,
.lede,
.workflow-page-guidance,
.section-head p,
.voice-note-main span,
.voice-note-main em,
.transcript-card-head p,
.transcript-section-title-row p,
.transcript-recording-main p,
.transcript-document-copy em,
.transcript-workspace-header p,
.transcript-mic-state,
.transcript-workspace-message {
    color: var(--theme-muted) !important;
}

input,
select,
textarea,
.transcript-workspace-editor {
    border-color: var(--theme-border) !important;
    background: var(--theme-input) !important;
    color: var(--theme-input-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--theme-muted) 78%, transparent) !important;
}

.btn-primary,
.theme-toggle-control button.active,
.theme-toggle-control button[aria-pressed="true"] {
    border-color: transparent !important;
    background: var(--theme-accent) !important;
    color: var(--theme-accent-ink) !important;
}

.btn-secondary,
.btn-outline,
.theme-toggle-control button {
    border-color: transparent !important;
    background: var(--theme-panel-soft) !important;
    color: var(--theme-text) !important;
}

.transcript-workspace-page {
    background: var(--theme-bg) !important;
}

html[data-theme="dark"] .transcript-workspace-page {
    background:
        radial-gradient(circle at 76% 14%, rgba(27, 90, 249, 0.1), transparent 30%),
        linear-gradient(145deg, #0b1321 0%, #0b1321 48%, #0b1321 100%) !important;
}

html[data-theme="light"] .transcript-workspace-page,
html[data-theme="light"] .transcript-workspace-page .app-shell,
html[data-theme="light"] .transcript-workspace-page .transcript-workspace-main {
    background: #f4f7fb !important;
    color: #17202c !important;
}

html[data-theme="light"] .transcript-workspace-card,
html[data-theme="light"] .transcript-recording-card,
html[data-theme="light"] .transcript-document-card {
    border-color: #dce3ec !important;
    background: #ffffff !important;
    color: #17202c !important;
}

html[data-theme="light"] .transcript-document-card.is-selected,
html[data-theme="light"] .transcript-recording-status {
    border-color: rgba(27, 90, 249, 0.72) !important;
    background: rgba(27, 90, 249, 0.18) !important;
    color: #315000 !important;
}

.settings-theme-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    padding: 18px;
    background: var(--theme-panel-soft);
}

.settings-theme-panel h2 {
    margin: 0 0 4px;
    color: var(--theme-text);
}

.theme-toggle-control {
    display: inline-flex;
    gap: 4px;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    padding: 4px;
    background: var(--theme-panel);
}

.theme-toggle-control button {
    min-height: 38px;
    border-radius: 999px;
    padding: 0 14px;
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 720px) {
    .settings-theme-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .theme-toggle-control,
    .theme-toggle-control button {
        width: 100%;
    }
}

/* Final SurvAI Camera zoom rail placement. This must remain after older camera rules. */
@media (max-width: 920px), (pointer: coarse) {
    .capture-screen.is-main-camera .capture-filter-button svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .capture-screen.is-main-camera .capture-filter-button span {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        position: fixed !important;
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;
        right: calc(8px + var(--camera-safe-right)) !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 188px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 38px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 999px !important;
        padding: 6px 4px !important;
        background: rgba(6, 12, 20, 0.34) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
        transform: translateY(-50%) !important;
        backdrop-filter: blur(12px) saturate(125%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 0.76rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
        box-shadow: 0 4px 12px rgba(200, 243, 74, 0.22) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-zoom-control {
        right: auto !important;
        left: calc(8px + var(--camera-safe-left)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-zoom-control {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 164px !important;
        grid-auto-rows: 32px !important;
        gap: 4px !important;
        padding: 5px 3px !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.7rem !important;
    }
}

/* SurvAI Camera PWA launcher */
.survaicam-page {
    margin: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    background: #0b1321;
    color: #fff;
}

html:has(body.survaicam-page) {
    height: 100%;
    overflow: hidden;
}

.survaicam-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    background:
        radial-gradient(circle at 50% 18%, rgba(27, 90, 249, 0.12), transparent 28%),
        linear-gradient(145deg, #0b1321 0%, #0b1321 100%);
}

.survaicam-preview,
.survaicam-preview-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.survaicam-preview {
    object-fit: cover;
    background: #0b1321;
}

.survaicam-preview-placeholder {
    display: grid;
    place-items: center;
    gap: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.76);
}

.survaicam-preview-placeholder img {
    width: min(260px, 62vw);
    height: auto;
    opacity: 0.9;
}

.survaicam-shell:has(.survaicam-selected-card:not([hidden])) .survaicam-preview-placeholder img {
    display: none;
}

.survaicam-preview-placeholder span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

.survaicam-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 11, 22, 0.9) 0%, rgba(5, 11, 22, 0.2) 34%, rgba(5, 11, 22, 0.88) 100%),
        radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5));
}

.survaicam-topbar {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    z-index: 6;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.survaicam-topbar--close-only {
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.survaicam-topbar--close-only .survaicam-close-page {
    pointer-events: auto;
}

.survaicam-shell:has(.survaicam-selected-card:not([hidden])) .survaicam-topbar--close-only {
    display: none;
}

.survaicam-brand,
.survaicam-job-pill,
.survaicam-icon-btn {
    background: rgba(5, 14, 28, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.survaicam-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
}

.survaicam-brand img {
    width: 74px;
    height: auto;
    display: block;
}

.survaicam-brand span {
    font-size: 13px;
    font-weight: 700;
    color: #1b5af9;
}

.survaicam-job-pill {
    min-width: 0;
    padding: 8px 12px;
    border-radius: 14px;
}

.survaicam-job-pill span,
.survaicam-eyebrow {
    display: block;
    color: #1b5af9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.survaicam-job-pill strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.survaicam-icon-btn {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
}

.survaicam-icon-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.survaicam-main {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    align-items: center;
    padding: calc(18px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow: hidden;
}

.survaicam-permission-card,
.survaicam-selected-card,
.survaicam-menu,
.survaicam-bottom-sheet {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 14, 28, 0.72);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.survaicam-permission-card,
.survaicam-selected-card {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 28px;
}

.survaicam-permission-card[hidden] {
    display: none !important;
}

.survaicam-permission-card {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 12;
    width: min(390px, calc(100vw - 44px));
    max-height: min(680px, calc(100dvh - 44px));
    overflow: auto;
    transform: translate(-50%, -50%);
}

.survaicam-shell.is-permission-open::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: "";
    pointer-events: none;
    background: rgba(2, 8, 16, 0.42);
    backdrop-filter: blur(8px);
}

.survaicam-permission-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
}

.survaicam-selected-card {
    position: relative;
    display: flex;
    width: min(430px, calc(100vw - 32px));
    height: min(760px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-radius: 46px;
    padding: clamp(48px, 7vh, 66px) 24px 28px;
    background:
        linear-gradient(180deg, rgba(10, 22, 38, 0.86), rgba(5, 14, 28, 0.9)),
        rgba(5, 14, 28, 0.86);
    box-shadow:
        inset 0 0 0 7px rgba(255, 255, 255, 0.035),
        0 30px 90px rgba(0, 0, 0, 0.5);
}

.survaicam-card-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
}

.survaicam-selected-card::before {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 118px;
    height: 28px;
    border-radius: 999px;
    content: "";
    background: rgba(2, 8, 16, 0.86);
    transform: translateX(-50%);
}

.survaicam-selected-card::after {
    position: absolute;
    right: 16px;
    bottom: 10px;
    left: 16px;
    height: 5px;
    border-radius: 999px;
    content: "";
    background: rgba(255, 255, 255, 0.18);
}

.survaicam-permission-card h1,
.survaicam-selected-card h2 {
    margin: 8px 0 16px;
    color: #fff;
    font-size: clamp(25px, 5.8vw, 42px);
    line-height: 1.02;
    letter-spacing: 0;
}

.survaicam-selected-card h2 span {
    color: #dce7f7;
    font-size: clamp(23px, 5vw, 34px);
}

.survaicam-selected-card h2 {
    color: #ffffff;
    font-size: clamp(15px, 2.8vw, 19px);
    font-weight: 850;
    line-height: 1.2;
}

.survaicam-selected-card h2 span {
    display: block;
    margin-top: 8px;
    color: #f8fbff;
    font-size: clamp(22px, 4.8vw, 32px);
    line-height: 1.05;
}

.survaicam-card-logo {
    display: block;
    width: min(168px, 58%);
    height: auto;
    margin: 0 0 clamp(18px, 3vh, 34px);
    opacity: 0.96;
}

.survaicam-permission-list {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.survaicam-permission-list p {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    color: #c4cfdf;
    font-size: 14px;
}

.survaicam-permission-list strong {
    color: #fff;
}

.survaicam-btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid transparent;
    padding: 0 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.survaicam-btn--primary {
    background: #1b5af9;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 90, 249, 0.25);
}

.survaicam-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.survaicam-btn--warning {
    width: 100%;
    margin-top: 10px;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fbd38d;
}

.survaicam-status,
.survaicam-note,
.survaicam-empty {
    margin: 12px 0 0;
    color: #b6c2d3;
    font-size: 13px;
}

.survaicam-selected-card dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0;
}

.survaicam-selected-card dl div {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
}

.survaicam-selected-card dt {
    color: #90a2b9;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.survaicam-selected-card dd {
    margin: 4px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.survaicam-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.survaicam-bottom-sheet {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 8;
    max-height: min(72vh, 620px);
    padding: 10px 16px 16px;
    border-radius: 28px;
    overflow: auto;
    transform: translateY(calc(100% + 30px));
    transition: transform 180ms ease;
}

.survaicam-bottom-sheet.is-open {
    transform: translateY(0);
}

.survaicam-sheet-handle {
    width: 44px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
}

.survaicam-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.survaicam-sheet-head h2 {
    margin: 4px 0 0;
    color: #fff;
}

.survaicam-search {
    display: grid;
    gap: 6px;
    margin: 14px 0;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
}

.survaicam-search input {
    min-height: 48px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0 14px;
    font: inherit;
}

.survaicam-job-groups {
    display: grid;
    gap: 14px;
}

.survaicam-job-group h3 {
    margin: 0 0 8px;
    color: #1b5af9;
    font-size: 13px;
    letter-spacing: 0;
}

.survaicam-job-card {
    display: grid;
    width: 100%;
    gap: 3px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 13px 14px;
    text-align: left;
    cursor: pointer;
}

.survaicam-job-card strong {
    font-size: 15px;
    line-height: 1.24;
}

.survaicam-job-card span,
.survaicam-job-card em {
    color: #b6c2d3;
    font-size: 13px;
    font-style: normal;
}

.survaicam-menu {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 10;
    width: min(300px, calc(100vw - 28px));
    padding: 18px;
    border-radius: 24px;
}

.survaicam-menu h2 {
    margin: 0 52px 14px 0;
    color: #fff;
}

.survaicam-menu > .survaicam-icon-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

.survaicam-menu a,
.survaicam-menu button:not(.survaicam-icon-btn) {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.survaicam-menu .is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.survaicam-flash {
    position: fixed;
    z-index: 9;
    top: calc(78px + env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
}

.survaicam-denied {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 28px;
    text-align: center;
}

.survaicam-denied img {
    width: min(280px, 72vw);
}

.survaicam-denied h1 {
    margin: 0;
    color: #fff;
}

.survaicam-denied p {
    margin: 0;
    color: #b6c2d3;
}

@media (orientation: landscape) and (max-height: 620px) {
    .survaicam-main {
        align-items: center;
        justify-items: end;
        padding-top: calc(82px + env(safe-area-inset-top));
    }

    .survaicam-permission-card,
    .survaicam-selected-card {
        width: min(500px, 48vw);
        margin-right: clamp(16px, 4vw, 56px);
        padding: 20px;
    }

    .survaicam-permission-card h1,
    .survaicam-selected-card h2 {
        font-size: clamp(24px, 4vw, 34px);
    }
}

@media (max-width: 620px) {
    .survaicam-brand span {
        display: none;
    }

    .survaicam-brand img {
        width: 64px;
    }

    .survaicam-selected-card dl,
    .survaicam-actions,
    .survaicam-permission-list p {
        grid-template-columns: 1fr;
    }

    .survaicam-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

/* Camera-first mobile app path: never show URL handoff panels inside the field camera. */
.capture-mode-body.is-camera-first-launch {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .sidebar,
.capture-mode-body.is-camera-first-launch .capture-workflow-intro,
.capture-mode-body.is-camera-first-launch .capture-desktop-handoff,
.capture-mode-body.is-camera-first-launch .mobile-capture-link-field,
.capture-mode-body.is-camera-first-launch .mobile-capture-copy-link {
    display: none !important;
}

.capture-mode-body.is-camera-first-launch .app-shell {
    display: block !important;
    min-height: 100dvh !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .main-panel {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-shell {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-panel.active.live-capture-panel,
.capture-mode-body.is-camera-first-launch .live-capture-panel .capture-screen {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.capture-mode-body.is-camera-first-launch .main-panel > .alert {
    position: fixed;
    z-index: 1200;
    top: calc(14px + env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-desktop-handoff .mobile-capture-link-field,
    .capture-desktop-handoff .mobile-capture-copy-link {
        display: none !important;
    }

    .survaicam-main {
        align-items: center;
        height: 100dvh;
        min-height: 0;
        padding: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        overflow: hidden;
    }

    .survaicam-permission-card,
    .survaicam-selected-card {
        width: min(520px, calc(100vw - 24px));
        border-radius: 24px;
        padding: 18px;
    }

    .survaicam-permission-card h1,
    .survaicam-selected-card h2 {
        font-size: clamp(22px, 6vw, 31px);
        line-height: 1.08;
    }

    .survaicam-permission-list {
        gap: 7px;
        margin: 12px 0;
    }

    .survaicam-permission-list p {
        grid-template-columns: 1fr;
        gap: 2px;
        font-size: 13px;
    }

    .survaicam-actions {
        grid-template-columns: 1fr;
    }

    .survaicam-btn {
        width: 100%;
        min-height: 54px;
        border-radius: 18px;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--surface);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

textarea {
    resize: vertical;
}

.login-screen {
    --login-blue: #1b5af9;
    --login-navy: #0b1321;
    --login-navy-soft: #0b1321;
    --login-muted: #b6c2d3;
    position: relative;
    min-height: 100vh;
    background:
        linear-gradient(110deg, rgba(7, 17, 31, 0.9), rgba(7, 17, 31, 0.7)),
        url("../images/login-background-survai.png") 45% center / cover no-repeat;
    background-repeat: no-repeat;
    color: #ffffff;
}

.login-shell {
    display: grid;
    width: 100%;
    max-width: 1440px;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    min-height: 100vh;
    gap: clamp(28px, 4vw, 64px);
    margin: 0 auto;
    padding: clamp(32px, 5vw, 80px);
}

.login-hero-panel,
.login-form-panel {
    position: relative;
    min-height: calc(100vh - clamp(72px, 10vw, 164px));
    border-radius: 18px;
}

.login-hero-panel {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: transparent;
}

.login-hero-panel::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 20% 10%, rgba(27, 90, 249, 0.13), transparent 28%),
        linear-gradient(90deg, rgba(7, 17, 31, 0.34), transparent 70%);
    pointer-events: none;
}

.login-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(480px, 100%);
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 5vw, 68px);
}

.login-hero-logo {
    width: min(265px, 68vw);
    height: auto;
    margin-bottom: 14px;
}

.login-hero-slogan {
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.98rem, 1.25vw, 1.14rem);
    font-weight: 500;
}

.login-feature-list {
    display: grid;
    gap: 0;
    width: min(380px, 100%);
}

.login-feature {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.login-feature:first-child {
    padding-top: 0;
}

.login-feature:last-child {
    border-bottom: 0;
}

.login-feature strong,
.login-status-box strong {
    display: block;
    color: #ffffff;
    font-size: 0.92rem;
    line-height: 1.25;
}

.login-feature span:not(.login-feature-icon),
.login-status-box span {
    display: block;
    margin-top: 4px;
    color: var(--login-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.login-feature-icon {
    position: relative;
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    place-items: center;
    color: var(--login-blue);
}

.login-feature-icon svg {
    display: block;
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-status-box {
    display: grid;
    width: min(330px, 100%);
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    margin-top: 34px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(7, 17, 31, 0.42);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.login-status-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--login-blue);
    box-shadow: 0 0 0 5px rgba(27, 90, 249, 0.12);
}

.login-status-box em {
    color: var(--login-blue);
    font-style: normal;
}

.login-form-panel {
    display: grid;
    place-items: center;
    isolation: isolate;
    padding: clamp(24px, 4vw, 58px);
    background: transparent;
}

.login-form-panel::before {
    position: absolute;
    z-index: -1;
    inset: clamp(12px, 2vw, 38px);
    content: "";
    background: radial-gradient(circle, rgba(3, 12, 28, 0.86) 0%, rgba(3, 12, 28, 0.34) 46%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
}

.login-card {
    width: min(100%, 450px);
    padding: clamp(30px, 3.1vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(7, 17, 31, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 28px 80px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
}

.login-card-mobile-brand {
    display: none;
}

.login-card-title {
    display: block;
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(1.58rem, 2vw, 1.95rem);
    line-height: 1.1;
}

.login-card-subtitle {
    display: block;
    margin: 0 0 28px;
    color: rgba(182, 194, 211, 0.88);
    font-size: 0.95rem;
}

.login-card > .brand-logo-login {
    display: block;
    margin-right: auto;
    margin-bottom: 14px;
    margin-left: auto;
}

.login-card > .lede {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
}

.login-card-divider {
    display: block;
    width: 72px;
    height: 3px;
    margin: 22px auto 30px;
    border-radius: 999px;
    background: var(--login-blue);
}

.login-card label {
    color: #ffffff;
}

.login-card label span {
    color: rgba(255, 255, 255, 0.95);
}

.login-form input[type="email"],
.login-form input[type="password"] {
    min-height: 58px;
    border-color: rgba(182, 194, 211, 0.28);
    border-radius: 10px;
    background: rgba(6, 15, 29, 0.56);
    color: #ffffff;
    font-weight: 600;
}

.login-form input::placeholder {
    color: rgba(182, 194, 211, 0.72);
}

.login-form input:focus {
    border-color: var(--login-blue);
    box-shadow: 0 0 0 4px rgba(27, 90, 249, 0.12);
}

.login-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: -2px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 700;
}

.login-remember input {
    width: 21px;
    height: 21px;
    min-height: 0;
    accent-color: var(--login-blue);
}

.login-subtle-link,
.login-support a {
    color: var(--login-blue);
    font-weight: 800;
}

.login-card .login-submit {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-color: var(--login-blue);
    border-radius: 10px;
    background: var(--login-blue);
    color: var(--login-navy);
    font-weight: 900;
}

.login-card .login-submit:hover {
    border-color: #c9ff55;
    background: #c9ff55;
    color: var(--login-navy);
}

.login-card .alert-error {
    color: #fecaca;
    background: rgba(180, 35, 24, 0.18);
    border: 1px solid rgba(254, 202, 202, 0.34);
}

.login-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--login-muted);
    text-align: center;
}

.login-support p {
    margin-bottom: 0;
}

.login-support > span {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(182, 194, 211, 0.72);
    border-bottom-color: transparent;
    border-radius: 50%;
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 28px 18px;
    }

    .login-hero-panel {
        display: none;
    }

    .login-form-panel {
        min-height: auto;
        border-radius: 0;
        background: transparent;
    }

    .login-card-mobile-brand {
        display: block;
        margin-bottom: 22px;
        text-align: center;
    }

    .login-card-mobile-brand img {
        display: block;
        width: min(220px, 72vw);
        height: auto;
        margin: 0 auto 10px;
        object-fit: contain;
    }

    .login-card-mobile-brand p {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.92rem;
        font-weight: 600;
    }
}

@media (max-width: 560px) {
    .login-form-panel {
        padding: 20px;
    }

    .login-card {
        padding: 26px 20px;
        border-radius: 14px;
    }

    .login-form-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

.brand-mark {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--navy);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark.compact {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: #ffffff;
    color: var(--navy);
}

.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
    background-color: transparent;
    object-fit: contain;
}

.brand-logo-login {
    width: min(320px, 78vw);
    max-height: 88px;
}

.brand-logo-sidebar {
    display: block;
    width: min(420px, 100%);
    height: auto;
    max-height: 108px;
    background-color: transparent;
    object-fit: contain;
    object-position: left center;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 8px;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 10px;
    font-size: 1.22rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.lede,
.form-note,
.empty-state p,
.user-pill span,
.section-order {
    color: var(--muted);
}

.form-stack,
.report-form {
    display: grid;
    gap: 18px;
}

label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 700;
}

label span {
    font-size: 0.92rem;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input,
select {
    min-height: 46px;
    padding: 10px 12px;
}

select {
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

textarea {
    padding: 13px 14px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.14);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 15px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: none;
    transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.btn:hover {
    opacity: 0.9;
}

.btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

.btn-primary {
    background: var(--accent);
    color: #0b1321;
}

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

.btn-secondary {
    background: var(--soft-blue);
}

.btn-outline {
    background: #ffffff;
}

.btn-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.btn-small {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.9rem;
}

.btn-full {
    width: 100%;
}

.workflow-header-actions > .btn,
.workflow-header-actions .regenerate-actions .btn {
    font-weight: 400;
}

.app-shell {
    --sidebar-width: 260px;
    display: grid;
    min-height: 100vh;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    transition: grid-template-columns 180ms ease;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    width: var(--sidebar-width);
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px;
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(15, 27, 47, 0.96), rgba(7, 17, 31, 1)),
        var(--navy);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 18px 0 48px rgba(7, 17, 31, 0.12);
    transition: width 180ms ease, padding 180ms ease;
}

.sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 900;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
}

.sidebar-brand:hover,
.sidebar-brand:focus,
.sidebar-brand:focus-visible,
.sidebar-brand:active {
    background-color: transparent;
}

/* Default: no sidebar glyph tile (collapsed/mobile/drawer rules set the transparent wordmark). */
.sidebar-brand::before {
    display: none;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    content: "";
    background-color: transparent;
    background-image: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Desktop expanded rail: real RGBA wordmark only — avoids WebKit black rects + opaque mislabeled assets. */
.sidebar .sidebar-brand img.brand-logo-sidebar {
    background-color: transparent !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.sidebar .sidebar-brand:hover img.brand-logo-sidebar,
.sidebar .sidebar-brand:focus-visible img.brand-logo-sidebar {
    transform: rotate(90deg);
}

.sidebar-nav {
    display: grid;
    gap: 5px;
}

/* KPIs appear only below Settings — subtle separator from primary nav */
.sidebar-nav a.sidebar-nav-follow-settings {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: auto;
    border-radius: 12px;
    padding: 10px 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: transparent;
    transition: color 160ms ease;
}

.sidebar-nav a::before {
    display: none;
}

.sidebar-nav a.active {
    color: #ffffff;
    background: transparent;
}

.sidebar-nav a.active::before {
    background: transparent;
}

.sidebar-nav-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.sidebar-nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 0.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.sidebar-nav-label {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.sidebar-nav-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 18px;
    margin-left: 0;
    border-radius: 999px;
    padding: 2px 6px;
    color: #ffffff;
    background: var(--survai-menu-icon-blue);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.sidebar-footer {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

.user-pill {
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.user-pill span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.main-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--app-main-padding);
}

/*
 * Desktop: viewport-fixed primary sidebar (reports, dashboard, etc.). JS adds
 * .app-shell-has-main-sidebar — menu stays pinned while page content scrolls.
 * Workspace report shells (.sidebar--workspace) use dedicated fixed rules farther below.
 */
@media (min-width: 901px) {
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body).app-shell-has-main-sidebar .app-shell {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        padding-left: var(--sidebar-width);
        box-sizing: border-box;
    }

    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body).app-shell-has-main-sidebar
        .app-shell
        > .sidebar:not(.sidebar--workspace) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 60;
    }

    @supports selector(:has(.sidebar)) {
        body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.app-shell-has-main-sidebar)
            .app-shell:has(> .sidebar:not(.sidebar--workspace)) {
            display: block;
            min-height: 100vh;
            min-height: 100dvh;
            padding-left: var(--sidebar-width);
            box-sizing: border-box;
        }

        body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.app-shell-has-main-sidebar)
            .app-shell
            > .sidebar:not(.sidebar--workspace) {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: var(--sidebar-width);
            height: auto;
            min-height: 100vh;
            min-height: 100dvh;
            max-height: 100dvh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 60;
        }
    }

    /*
     * Fullscreen workspace hides the sidebar rail but keeps the pinned-shell padding-left;
     * clear the inset so reports list and main content span the viewport.
     */
    body.workspace-fullscreen.app-shell-has-main-sidebar:not(.login-body):not(.survaicam-page):not(.capture-mode-body)
        .app-shell {
        padding-left: 0 !important;
        padding-right: 0;
    }

    @supports selector(:has(.sidebar)) {
        body.workspace-fullscreen:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.app-shell-has-main-sidebar)
            .app-shell:has(> .sidebar:not(.sidebar--workspace)) {
            padding-left: 0 !important;
            padding-right: 0;
        }
    }

    body.workspace-fullscreen.dashboard-body.reports-page .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 901px) {
    .mobile-app-header {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.mobile-app-header,
.mobile-menu-toggle,
.mobile-menu-overlay {
    display: none;
}

/**
 * Fixed white top bar (mobile). Stays in place; sidebar + scrim use higher z-index
 * so they appear in front of this bar when the menu is open.
 */
.mobile-app-header {
    box-sizing: border-box;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    min-width: 0;
}

.page-header h1 {
    margin-bottom: 0;
}

.eyebrow {
    margin-bottom: 6px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.toolbar {
    margin-bottom: 18px;
}

.dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.dashboard-toolbar .search-field {
    flex: 1 1 220px;
    max-width: 460px;
}

.search-field {
    max-width: 460px;
}

.table-card {
    overflow: hidden;
}

.reports-page .table-card,
.reports-page .toolbar {
    width: 100%;
}

/* Match Business Dashboard (narrow icon rail) — reports grid sidebar column */
body.reports-page .app-shell {
    --sidebar-width: var(--survai-app-rail-width);
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-width: 0;
}

/*
 * Narrow icon rail: same geometry as Reports / Operational dashboard whenever the shell
 * uses the global sidebar (desk tools, Settings, Create Report File). Report workspaces
 * use .sidebar--workspace and keep separate layout rules (see body:has(.sidebar--workspace)).
 */
body:not(.login-body):not(.capture-mode-body):not(.survaicam-page):not(.pdf-viewer-body):not(
        .sai-studio-app
    )
    .app-shell:has(> aside.sidebar:not(.sidebar--workspace)) {
    --sidebar-width: var(--survai-app-rail-width);
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-width: 0;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.pdf-renderer-card {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.pdf-renderer-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pdf-renderer-summary h2 {
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 1.05rem;
}

.pdf-renderer-warning {
    color: #b45309;
    font-weight: 800;
}

.pdf-renderer-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 0.78rem;
    font-weight: 900;
}

.pdf-renderer-pill--success {
    color: #166534;
    background: #dcfce7;
}

.pdf-renderer-pill--fallback {
    color: #92400e;
    background: #fef3c7;
}

.pdf-renderer-pill--failed {
    color: #991b1b;
    background: #fee2e2;
}

.pdf-export-history summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 900;
}

.pdf-export-history table {
    width: 100%;
    min-width: 620px;
    margin-top: 10px;
    border-collapse: collapse;
}

.pdf-export-history th,
.pdf-export-history td {
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    text-align: left;
    font-size: 0.86rem;
}

.pdf-export-history th {
    color: var(--muted);
    background: #f8fafc;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    table-layout: fixed;
    font-size: 15px;
}

.reports-bulk-delete-form {
    display: none;
}

.reports-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.reports-bulk-select,
.reports-row-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.reports-row-select {
    justify-content: center;
    width: 100%;
}

.reports-bulk-select input,
.reports-row-select input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--survai-brand-blue);
}

.reports-table .reports-select-column,
.reports-table .reports-select-cell {
    text-align: center;
}

.reports-table tbody tr.reports-table-row-clickable.is-selected td {
    background: #eef4ff;
}

.reports-table th {
    position: relative;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    color: var(--muted);
    background: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.reports-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    color: #243044;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.reports-table tr:last-child td {
    border-bottom: 0;
}

.reports-table tbody tr.reports-table-row-clickable {
    cursor: pointer;
}

.reports-table tbody tr.reports-table-row-clickable:hover td {
    background: #f1f5f9;
}

.reports-survey-type-cell {
    min-width: 140px;
    font-weight: 500;
}

.reports-table td[data-label="Status"] .status {
    display: inline;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--navy) !important;
    font-size: inherit;
    font-weight: 700;
}

.report-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-weight: 500;
    white-space: nowrap;
}

.status-cell {
    white-space: nowrap;
}

.media-cell-wrap {
    white-space: nowrap;
}

.media-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: nowrap;
    color: #6b7280;
}

.media-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #64748b;
}

.media-item.is-zero {
    color: #a8b4c5;
}

.media-item.is-zero .media-icon,
.media-item.is-zero .media-count {
    color: #a8b4c5;
}

.media-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #94a3b8;
}

.media-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.media-count {
    font-variant-numeric: tabular-nums;
    color: #475569;
}


.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #9ca3af;
}

.status-dot--not-started {
    background: #9ca3af;
}

.status-dot--processed {
    background: #f59e0b;
}

.status-dot--complete {
    background: #22c55e;
}

.status-dot--sent {
    background: #ef4444;
}

.reports-table .reports-delete-action {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    min-height: 0;
    font: inherit;
    font-size: inherit;
    font-weight: 500;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.reports-table .reports-delete-action:hover {
    color: var(--navy);
}

.reports-mobile-summary-col,
.reports-mobile-summary-header,
.reports-mobile-summary-cell {
    display: none;
}

.reports-mobile-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.reports-mobile-status-dot {
    width: 11px;
    height: 11px;
}

.reports-mobile-type {
    min-width: 0;
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--navy);
    background: #eef4ff;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-mobile-media {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.reports-mobile-media .media-item {
    gap: 3px;
    font-size: 0.74rem;
}

.reports-mobile-media .media-icon,
.reports-mobile-media .media-icon svg {
    width: 14px;
    height: 14px;
}

.reports-create-survey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--survai-brand-blue) !important;
    color: #ffffff !important;
    box-shadow: none;
    font-weight: 850;
}

.reports-create-survey:hover {
    background: var(--survai-brand-blue-hover) !important;
    color: #ffffff !important;
    opacity: 1;
}

.dashboard-create-survey-plus {
    display: none;
}

.reports-create-survey .dashboard-create-survey-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}

.mobile-report-address {
    color: inherit;
    font-weight: 500;
}

.reports-column-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 2;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.reports-column-resizer::after {
    position: absolute;
    top: 28%;
    right: 3px;
    width: 1px;
    height: 44%;
    border-radius: 999px;
    background: transparent;
    content: "";
}

.reports-table th:hover .reports-column-resizer::after,
.reports-column-resizer:focus-visible::after {
    background: #94a3b8;
}

.reports-table.is-resizing {
    user-select: none;
    cursor: col-resize;
}

.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.82rem;
    font-weight: 900;
}

.status-completed {
    color: #166534;
    background: #dcfce7;
}

.status-completed_with_errors {
    color: #9a3412;
    background: #ffedd5;
}

.status-processing {
    color: var(--warning);
    background: var(--warning-soft);
}

.status-draft {
    color: #1e3a8a;
    background: #dbeafe;
}

.status-failed {
    color: #991b1b;
    background: #fee2e2;
}

.status-stopped {
    color: #ffffff;
    background: #dc2626;
}

.alert {
    margin-bottom: 18px;
    border-radius: 8px;
    padding: 13px 15px;
    font-weight: 700;
}

.alert-error {
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid #fecdca;
}

.alert-success {
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid #bbf7d0;
}

.alert-warning {
    color: var(--warning);
    background: var(--warning-soft);
    border: 1px solid #fde68a;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 34px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.report-form {
    padding: 24px;
}

.compact-form {
    padding: 0;
    box-shadow: none;
}

.transcript-input {
    min-height: 420px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.form-note {
    margin: 0;
    font-size: 0.92rem;
}

.form-note.vector-test-success {
    color: var(--success);
    font-weight: 800;
}

.form-note.vector-test-error {
    color: var(--danger);
    font-weight: 800;
}

.supporting-upload,
.room-picker {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.supporting-upload h2,
.room-picker h2 {
    margin-bottom: 4px;
}

.media-uploader-card {
    border-top: 1px solid var(--line);
}

.report-media-card {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px;
}

.media-dropzone {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-height: 136px;
    border: 1px dashed #c8d8ec;
    border-radius: 8px;
    padding: 20px;
    background: #fbfdff;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.media-dropzone strong {
    color: var(--navy);
}

.media-dropzone span {
    max-width: 680px;
}

.media-dropzone input {
    display: none !important;
}

.media-dropzone.is-dragover,
.media-dropzone.is-uploading {
    border-color: var(--accent);
    background: var(--soft-blue);
}

.media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.media-status-panel {
    display: grid;
    gap: 12px;
}

.media-status-panel[hidden] {
    display: none;
}

.media-file-list {
    display: grid;
    gap: 8px;
}

.media-file-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    background: #ffffff;
}

.media-file-item strong {
    overflow-wrap: anywhere;
}

.media-file-item span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.media-file-item em {
    grid-column: 1 / -1;
    color: var(--muted);
    font-style: normal;
    overflow-wrap: anywhere;
}

.media-file-item.status-completed {
    border-color: #bbf7d0;
    background: var(--success-soft);
}

.media-file-item.status-completed span {
    color: var(--success);
}

.media-file-item.status-uploading,
.media-file-item.status-transcribing,
.media-file-item.status-selected {
    border-color: #c8d8ec;
    background: #f8fbff;
}

.media-file-item.status-uploading span,
.media-file-item.status-transcribing span,
.media-file-item.status-selected span {
    color: var(--accent-dark);
}

.media-file-item.status-failed {
    border-color: #fecdca;
    background: var(--danger-soft);
}

.media-file-item.status-failed span,
.media-file-item.status-failed em {
    color: var(--danger);
}

.media-transcript-preview {
    min-height: 170px;
    background: #fbfdff;
}

.media-diagnostics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: 0.86rem;
}

.media-diagnostics span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 10px;
    background: #ffffff;
}

.media-diagnostics strong {
    color: var(--navy);
}

.pdf-settings-card {
    margin-bottom: 20px;
}

.pdf-settings-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 22px;
}

.cover-preview {
    display: grid;
    place-items: center;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f3f4f8;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.cover-preview img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.file-input {
    display: grid;
    gap: 8px;
    max-width: 520px;
}

.file-input input {
    border: 1px dashed #c8d8ec;
    background: #fbfdff;
    cursor: pointer;
}

.pill-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pill-toggle {
    display: inline-block;
    gap: 0;
    font-weight: 800;
}

.pill-toggle .pill-input {
    display: none;
    appearance: none;
}

.pill-toggle .pill-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.pill-toggle .pill-label:hover {
    border-color: #c8d8ec;
    background: var(--soft-blue);
}

.pill-toggle .pill-input:checked + .pill-label {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.pill-toggle .pill-input:focus + .pill-label {
    box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.14);
}

.survey-context-card {
    display: grid;
    gap: 18px;
}

.context-block {
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.context-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.context-block h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.context-field {
    display: grid;
    gap: 8px;
}

.context-field > span {
    color: var(--navy);
    font-weight: 800;
}

.context-pill-grid {
    align-items: flex-start;
    gap: 8px;
}

.voice-notes-card {
    display: grid;
    gap: 18px;
}

.voice-network-status {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    background: #eef9f2;
    color: #17653a;
    font-size: 0.86rem;
    font-weight: 800;
}

.voice-network-status.is-offline {
    background: #fff6e8;
    color: #8a4b00;
}

.voice-recorder-controls {
    position: sticky;
    top: 12px;
    z-index: 5;
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.voice-recorder-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
    gap: 14px;
}

.voice-recorder-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.voice-recorder-status strong {
    color: var(--navy);
    font-size: 1.35rem;
}

.recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #cbd5e1;
}

.recording-dot.is-active {
    background: #d92d20;
    box-shadow: 0 0 0 6px rgba(217, 45, 32, 0.14);
}

.voice-button-row,
.voice-sync-actions,
.voice-note-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.voice-button-row .btn {
    min-height: 46px;
}

.voice-preview {
    width: 100%;
}

.voice-note-list {
    display: grid;
    gap: 12px;
}

.progress-voice-notes {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.progress-voice-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.progress-voice-notes__head h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 800;
}

.progress-voice-notes__head span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.progress-voice-note__player {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.progress-voice-note__player audio {
    width: 100%;
}

.compact-empty-state {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
}

.voice-note-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #ffffff;
}

.voice-note-item.is-offline {
    border-color: #f2c879;
    background: #fffaf0;
}

.voice-note-item.is-synced {
    border-color: #bde5ca;
    background: #f7fdf9;
}

.voice-note-main {
    display: grid;
    gap: 4px;
}

.voice-note-main strong {
    color: var(--navy);
}

.voice-note-main span,
.voice-note-main em {
    color: var(--muted);
    font-size: 0.9rem;
}

.voice-sync-actions .error-text {
    color: #b42318;
}

.transcription-progress-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.transcription-progress-panel.is-complete {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.transcription-progress-panel.is-error {
    border-color: #fecaca;
    background: #fef2f2;
}

.transcription-progress-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--navy);
}

.transcription-progress-heading span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
}

.transcription-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeafe;
}

.transcription-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.25s ease;
}

.transcription-progress-panel.is-complete .transcription-progress-track span {
    background: var(--success);
}

.transcription-progress-panel.is-error .transcription-progress-track span {
    background: var(--danger);
}

.transcription-next-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: var(--navy);
    font-weight: 800;
}

.transcription-progress-panel[hidden],
.transcription-next-actions[hidden] {
    display: none;
}

.voice-note-item audio,
.voice-transcript-preview {
    width: 100%;
}

.voice-transcript-preview {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.voice-transcript-preview p {
    margin: 8px 0 0;
    color: var(--navy);
}

.voice-note-actions {
    grid-column: 1 / -1;
}

.profile-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-image-preview {
    width: 100%;
    max-height: 190px;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
    background: #f8fafc;
}

.signature-preview {
    object-fit: contain;
    padding: 12px;
}

.profile-textarea {
    min-height: 140px;
}

.profile-tools-list {
    display: grid;
    gap: 14px;
}

.profile-tool-row {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdff;
}

.profile-tool-row textarea {
    min-height: 110px;
}

.muted-tool-row {
    border-style: dashed;
    background: #ffffff;
}

.tool-checks,
.tool-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tool-check-card {
    flex: 1 1 260px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.tool-check-card span {
    display: grid;
    gap: 4px;
}

.tool-check-card em {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 400;
}

.profile-tools-panel[hidden] {
    display: none;
}

.ai-settings-textarea {
    min-height: 190px;
    line-height: 1.5;
}

.ai-settings-textarea.tall-textarea {
    min-height: 280px;
}

.ai-settings-textarea.compact-textarea {
    min-height: 135px;
}

.ai-global-rules-panel {
    border: 1px solid rgba(10, 25, 47, 0.1);
    border-radius: 14px;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(27, 90, 249, 0.08), rgba(255, 255, 255, 0) 42%),
        #fbfdff;
}

.quick-rule-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-terminology-panel {
    border: 1px solid rgba(10, 25, 47, 0.1);
    border-radius: 14px;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(27, 90, 249, 0.06), rgba(255, 255, 255, 0) 42%),
        #ffffff;
}

.ai-terminology-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ai-terminology-control {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.ai-terminology-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.ai-terminology-chip-list {
    display: flex;
    min-height: 34px;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-terminology-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(27, 90, 249, 0.14);
    border-radius: 999px;
    padding: 7px 10px;
    color: #1f2a44;
    background: rgba(27, 90, 249, 0.06);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
}

.ai-terminology-chip strong {
    color: #7b8798;
    font-size: 0.9rem;
    line-height: 1;
}

@media (max-width: 760px) {
    .ai-terminology-grid {
        grid-template-columns: 1fr;
    }
}

.global-rules-mode {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}

.global-rules-mode legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 800;
}

.global-rules-preview {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.global-rules-preview summary {
    cursor: pointer;
    padding: 14px;
    color: var(--navy);
    font-weight: 800;
}

.global-rules-preview-grid {
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
}

.global-rules-preview-grid h3 {
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.global-rules-preview-grid pre {
    min-height: 120px;
    max-height: 260px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #f7fafc;
    color: var(--navy);
    font: 0.86rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.section-prompts-panel {
    gap: 16px;
}

.section-prompt-list {
    display: grid;
    gap: 14px;
}

.section-prompt-card {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdff;
}

.section-prompt-card span {
    color: var(--navy);
    font-weight: 800;
}

.section-prompt-textarea {
    min-height: 150px;
}

.processing-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #c8d8ec;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbff;
}

.processing-panel[hidden] {
    display: none;
}

.processing-panel span {
    display: block;
    color: var(--muted);
}

.processing-card {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    padding: 20px;
}

.processing-diagnostics-card,
.processing-log-card {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.diagnostic-stat,
.diagnostic-detail > div {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfdff;
}

.diagnostic-stat span,
.diagnostic-detail span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnostic-stat strong,
.diagnostic-detail strong {
    color: var(--navy);
    overflow-wrap: anywhere;
}

.diagnostic-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
}

.processing-admin-actions form {
    margin: 0;
}

.processing-log-list {
    display: grid;
    gap: 8px;
}

.processing-log-entry {
    display: grid;
    grid-template-columns: 140px 86px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfdff;
}

.processing-log-entry time,
.processing-log-entry strong {
    color: var(--muted);
    font-size: 0.82rem;
}

.processing-log-entry span {
    overflow-wrap: anywhere;
}

.processing-log-entry.log-error {
    border-color: #fecdca;
    background: var(--danger-soft);
}

.processing-log-entry.log-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.processing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.processing-head h2 {
    margin-bottom: 0;
}

.processing-count {
    color: var(--navy);
    font-weight: 900;
}

.progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4ecf6;
}

.progress-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width 200ms ease;
}

.capture-sync-shell.card {
    margin-top: 1rem;
}

.capture-sync-panel {
    display: grid;
    gap: 0.75rem;
}

.capture-sync-status {
    margin: 0;
    font-weight: 700;
    color: var(--navy);
}

.capture-sync-overall {
    margin-top: 0.25rem;
}

.capture-sync-items {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.capture-sync-item {
    padding-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
}

.capture-sync-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.capture-sync-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.capture-sync-item-label {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--navy);
}

.capture-sync-item-state {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
}

.capture-sync-item-bar {
    margin-top: 0.25rem;
}

.processing-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.processing-actions .btn {
    flex: 0 1 auto;
}

.queue-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fbfdff;
}

.queue-item span {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.queue-item strong {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.queue-item em {
    grid-column: 1 / -1;
    color: var(--danger);
    font-style: normal;
}

.queue-retry-form {
    grid-column: 1 / -1;
    margin: 4px 0 0;
}

.queue-completed {
    border-color: #bbf7d0;
    background: var(--success-soft);
}

.queue-completed strong {
    color: var(--success);
}

.queue-processing {
    border-color: #c8d8ec;
    background: #f8fbff;
}

.queue-processing strong {
    color: var(--accent-dark);
}

.queue-failed {
    border-color: #fecdca;
    background: var(--danger-soft);
}

.queue-failed strong {
    color: var(--danger);
}

.spinner {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    background: url('../icons/loading-spinner.svg') center / contain no-repeat;
}

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

.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    transition: opacity 160ms ease;
}

.page-loading-overlay[hidden] {
    display: none;
}

.page-loading-card {
    display: grid;
    place-items: center;
}

.page-loading-card .spinner {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 10px 22px rgba(9, 23, 45, 0.26));
}

.report-heading {
    align-items: center;
}

.report-heading-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.report-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    border-radius: 999px;
    padding: 7px 13px;
    background: var(--navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(9, 23, 45, 0.14);
}

.report-type-badge--level-2 {
    background: #1b5af9;
}

.report-type-badge--level-3 {
    background: var(--navy);
}

.report-type-badge--level-3-plus {
    background: #16844a;
}

.report-type-badge--specific-defect {
    background: #b76b00;
}

.report-type-badge--diagnosis {
    background: #6d3ccf;
}

.report-type-badge--roof {
    background: #475569;
}

.workflow-title-meta,
.new-report-selected-survey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

body:has(.sidebar--workspace) .workflow-title-meta {
    display: none !important;
}

.new-report-selected-survey[hidden] {
    display: none !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inline-action-form {
    margin: 0;
}

.transcript-panel {
    margin-bottom: 20px;
    padding: 0;
}

.transcript-panel .section-head {
    padding: 16px 18px;
    margin-bottom: 0;
}

.transcript-panel [data-card-collapsible] {
    border-top: 1px solid var(--line);
}

.transcript-panel summary {
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 900;
}

.transcript-panel pre {
    max-height: 360px;
    margin: 0;
    overflow: auto;
    border-top: 1px solid var(--line);
    padding: 18px;
    color: #253246;
    background: #fbfdff;
    white-space: pre-wrap;
}

.supporting-document {
    display: grid;
    gap: 6px;
    padding: 18px;
    background: #fbfdff;
}

.supporting-document strong {
    color: var(--navy);
}

.supporting-document-list {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding: 18px;
}

.supporting-document-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfdff;
}

.supporting-document-preview {
    display: grid;
    width: 82px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
}

.supporting-document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.supporting-document-item strong,
.supporting-document-item span {
    display: block;
    overflow-wrap: anywhere;
}

.supporting-document-item span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.supporting-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.supporting-document-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1fr);
    gap: 18px;
    border-top: 1px solid var(--line);
    padding: 18px;
}

.supporting-document-layout .supporting-document,
.supporting-document-layout .report-form {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.supporting-document img {
    width: 100%;
    max-height: 260px;
    border-radius: 8px;
    object-fit: contain;
    background: #eef3f8;
}

.sections-list {
    display: grid;
    gap: 18px;
}

.section-image-uploader {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.upload-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 104px;
    border: 1px dashed #c8d8ec;
    border-radius: 8px;
    background: #fbfdff;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.upload-dropzone strong {
    color: var(--navy);
}

.upload-dropzone input {
    display: none;
}

.upload-dropzone.is-dragover,
.upload-dropzone.is-uploading {
    border-color: var(--accent);
    background: var(--soft-blue);
}

.wizard-documents-panel {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.wizard-documents-dropzone {
    min-height: 140px;
}

.wizard-documents-examples-heading {
    margin-top: 0;
}

.wizard-documents-table-wrap {
    overflow-x: auto;
}

.wizard-documents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.wizard-documents-table th,
.wizard-documents-table td {
    border-bottom: 1px solid var(--line);
    padding: 0.55rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.wizard-documents-table th {
    color: var(--muted);
    font-weight: 600;
}

.wizard-doc-category-select {
    min-width: 12.5rem;
    max-width: 100%;
}

.section-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.section-thumb {
    display: grid;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}

.section-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    object-fit: cover;
    background: #f3f4f8;
}

.section-thumb figcaption {
    display: grid;
    gap: 8px;
}

.photo-review-card {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
}

.photo-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.photo-dropzone {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-height: 126px;
    border: 1px dashed #c8d8ec;
    border-radius: 8px;
    padding: 20px;
    background: #fbfdff;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.photo-dropzone strong {
    color: var(--navy);
}

.photo-dropzone input {
    display: none !important;
}

.photo-dropzone.is-dragover,
.photo-dropzone.is-uploading {
    border-color: var(--accent);
    background: var(--soft-blue);
}

.photo-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    border: 1px solid #c8d8ec;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
}

.photo-bulk-toolbar[hidden] {
    display: none;
}

.photo-bulk-toolbar > strong {
    align-self: center;
    min-width: 92px;
    color: var(--navy);
}

.photo-bulk-toolbar label {
    min-width: min(220px, 100%);
}

.photo-grid-review {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.photo-review-item {
    position: relative;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.photo-review-item.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45, 105, 219, 0.16);
}

.photo-select-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(9, 30, 66, 0.76);
    cursor: pointer;
}

.is-photo-selecting .photo-select-check {
    display: flex;
}

.photo-select-check input {
    position: absolute;
    opacity: 0;
}

.photo-select-check span {
    width: 22px;
    height: 22px;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.photo-select-check input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 4px #ffffff;
}

.photo-review-item.status-matched,
.photo-review-item.status-annotated {
    border-color: #bbf7d0;
}

.photo-review-item.status-failed {
    border-color: #fecdca;
    background: var(--danger-soft);
}

.photo-thumb-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.photo-thumb-pair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    background: #f3f4f8;
}

.photo-thumb-pair img:only-child {
    grid-column: 1 / -1;
}

.photo-form {
    display: grid;
    gap: 12px;
}

.photo-meta {
    display: grid;
    gap: 3px;
}

.photo-meta strong {
    overflow-wrap: anywhere;
}

.photo-meta span,
.photo-meta em {
    color: var(--muted);
    font-size: 0.88rem;
    font-style: normal;
}

.photo-notes {
    min-height: 86px;
}

.photo-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.photo-actions {
    margin-top: 0;
}

.matched-photo-strip {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.matched-photo-strip > strong {
    color: var(--navy);
}

.matched-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.matched-photo-grid figure {
    display: grid;
    gap: 6px;
    margin: 0;
}

.matched-photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    background: #f3f4f8;
}

.matched-photo-grid figcaption {
    color: var(--muted);
    font-size: 0.84rem;
}

.matched-photo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.matched-photo-actions .btn {
    width: 100%;
    justify-content: center;
}

.approved-annotation-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.approved-annotation-list > strong {
    color: var(--navy);
}

.approved-annotation-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #f8fafc;
}

.approved-annotation-list p {
    margin: 3px 0;
    color: var(--text);
}

.approved-annotation-list small {
    display: block;
    color: var(--muted);
}

.annotation-rating-badge {
    display: inline-grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #d97706;
    font-size: 0.78rem;
    font-weight: 900;
}

.annotation-rating-badge.rating-cr3 {
    background: #dc2626;
}

.annotation-rating-badge.rating-cr1 {
    background: #16a34a;
}

.annotation-rating-badge.rating-ni,
.annotation-rating-badge.rating-na {
    background: #6b7280;
}

.annotation-rating-badge.rating-cr3,
.annotation-rating-badge.rating-cr2,
.annotation-rating-badge.rating-cr1,
.annotation-rating-badge.rating-ni,
.annotation-rating-badge.rating-na {
    color: #ffffff;
    box-shadow: none;
}

.floating-report-toolbar {
    position: fixed;
    left: 304px;
    bottom: 22px;
    z-index: 80;
    display: grid;
    gap: 10px;
    align-items: end;
    width: min(320px, calc(100vw - 34px));
    pointer-events: none;
}

.floating-toolbar-buttons,
.floating-toolbar-panel {
    pointer-events: auto;
}

.floating-toolbar-buttons {
    display: inline-flex;
    width: max-content;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.28);
    border-radius: 14px;
    background: #f1f5f9;
    box-shadow: 0 18px 42px rgba(11, 18, 32, 0.2), 0 2px 8px rgba(11, 18, 32, 0.08);
}

.floating-tool-button {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--line);
    color: #071421;
    background: rgba(255, 255, 255, 0.72);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.floating-tool-button:last-child {
    border-right: 0;
}

.floating-tool-button:hover,
.floating-tool-button:focus-visible {
    color: #071421;
    background: #e2e8f0;
    outline: none;
}

a.floating-tool-button {
    text-decoration: none;
}

.floating-tool-button--collapse-all {
    font-size: 1rem;
}

.floating-toolbar-icon,
.floating-tool-glyph,
.floating-download-glyph {
    display: block;
    width: 28px;
    height: 28px;
    color: #071421;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.floating-tool-glyph {
    overflow: visible;
}

.floating-tool-glyph .floating-tool-glyph-open,
.floating-tool-glyph .floating-tool-glyph-close {
    transition: opacity 140ms ease;
}

.floating-tool-glyph--collapse .floating-tool-glyph-open,
.floating-tool-glyph--expand .floating-tool-glyph-close {
    opacity: 0;
}

.floating-tool-glyph--collapse .floating-tool-glyph-close,
.floating-tool-glyph--expand .floating-tool-glyph-open {
    opacity: 1;
}

.floating-download-glyph {
    overflow: visible;
}

.floating-toolbar-panel {
    display: grid;
    max-height: min(440px, calc(100vh - 130px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 60px rgba(11, 18, 32, 0.2);
}

.floating-toolbar-panel[hidden] {
    display: none;
}

.floating-toolbar-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    color: var(--navy);
}

.floating-toolbar-panel-head button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--navy);
    background: #ffffff;
    cursor: pointer;
}

.floating-section-list {
    display: grid;
    max-height: min(370px, calc(100vh - 190px));
    overflow: auto;
    padding: 8px;
}

.floating-section-list a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: center;
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.floating-section-list a:hover,
.floating-section-list a:focus-visible {
    background: var(--soft-blue);
    outline: none;
}

.floating-section-list a.is-active {
    background: var(--soft-blue);
    box-shadow: inset 0 0 0 1px #c8d8ec;
}

.floating-section-list .floating-section-order {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: var(--navy);
    font-size: 0.72rem;
    font-weight: 800;
}

.floating-section-list .floating-section-title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.floating-section-list .condition-rating-badge {
    justify-self: end;
    width: 34px;
    height: 34px;
    font-size: 0.68rem;
}

.floating-section-list .form-note {
    padding: 10px;
}

.live-capture-mode-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.live-capture-mode-btn {
    flex: 1;
    max-width: 160px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.live-capture-mode-btn.active {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border-color: rgba(255, 255, 255, 0.92);
}

.capture-preview-touch-layer {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: var(--capture-tray-h, 168px);
    z-index: 4;
    touch-action: manipulation;
    cursor: pointer;
}

.capture-focus-square {
    position: absolute;
    z-index: 5;
    width: 72px;
    height: 72px;
    margin: 0;
    border: 2px solid rgba(255, 214, 10, 0.95);
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 0 9999px rgba(0, 0, 0, 0.05);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.capture-focus-square.is-fading {
    opacity: 0;
}

.capture-focus-square.is-focus-grid::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 214, 10, 0.55), rgba(255, 214, 10, 0.55)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(rgba(255, 214, 10, 0.55), rgba(255, 214, 10, 0.55)) 0 50% / 100% 1px no-repeat;
    opacity: 0.95;
}

.capture-training-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 104px;
    height: 104px;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.capture-training-reticle-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 214, 10, 0.85);
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.capture-training-reticle-cross::before,
.capture-training-reticle-cross::after {
    position: absolute;
    background: rgba(255, 214, 10, 0.75);
    content: "";
}

.capture-training-reticle-cross::before {
    top: 50%;
    left: 18%;
    width: 64%;
    height: 2px;
    margin-top: -1px;
}

.capture-training-reticle-cross::after {
    top: 18%;
    left: 50%;
    width: 2px;
    height: 64%;
    margin-left: -1px;
}

.capture-training-tap-chip {
    position: absolute;
    right: 12px;
    bottom: calc(var(--capture-tray-h, 168px) + 14px);
    z-index: 6;
    max-width: min(100%, 280px);
    padding: 8px 11px;
    border-radius: 12px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
    font-size: 0.78rem;
    line-height: 1.3;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}

.capture-training-tap-chip.is-dragging {
    cursor: grabbing;
}

.capture-training-tap-chip.is-positioned {
    right: auto;
    bottom: auto;
}

.capture-training-tap-chip strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.2;
}

.capture-training-tap-chip span {
    display: block;
    color: #334155;
}

.capture-training-hint-body {
    display: block;
    margin-top: 4px;
    white-space: pre-line;
    font-weight: 650;
    line-height: 1.32;
}

.capture-exposure-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.capture-exposure-label {
    opacity: 0.85;
}

.capture-exposure-step {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.capture-exposure-slider {
    width: min(160px, 38vw);
    accent-color: #ffd60a;
    cursor: pointer;
}

.capture-preview .capture-exposure-compact.capture-exposure-overlay {
    position: absolute;
    z-index: 12;
    left: 8px;
    top: 8px;
    margin: 0;
    max-width: calc(100% - 16px);
    padding: 8px 12px;
    pointer-events: auto;
    touch-action: manipulation;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    opacity: 1;
    transition: opacity 380ms ease;
}

.capture-preview .capture-exposure-compact.capture-exposure-overlay[hidden] {
    display: none !important;
}

.capture-preview .capture-exposure-compact.capture-exposure-overlay.is-fading-out {
    opacity: 0;
}

.capture-pause-recording-button {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.capture-pause-recording-button.is-paused .capture-pause-icon::before,
.capture-pause-recording-button.is-paused .capture-pause-icon::after {
    display: none;
}

.capture-pause-recording-button.is-paused .capture-pause-icon {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #ffffff;
    background: none;
}

.capture-recorder-controls {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.capture-control-tray .capture-record-toggle {
    position: absolute;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
}

.capture-control-tray.is-video-mode .capture-record-toggle {
    position: relative;
    left: auto;
    transform: none;
}

.capture-top-camera-tools {
    position: absolute;
    z-index: 6;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    max-width: min(240px, 46vw);
    pointer-events: none;
}

.capture-top-camera-tools > * {
    pointer-events: auto;
}

.capture-top-camera-tools[hidden] {
    display: none !important;
}

.capture-top-camera-tools .capture-flash-button,
.capture-top-camera-tools .capture-flip-button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.capture-top-camera-tools .capture-torch-cluster {
    margin-right: 0;
}

.capture-record-toggle.btn-record {
    border-radius: 999px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, width 0.16s ease, height 0.16s ease;
}

.capture-record-toggle.btn-record--idle .capture-record-icon {
    display: none;
}

.capture-record-toggle.btn-record--active .capture-record-icon {
    display: block;
}

.capture-record-toggle.btn-record--idle {
    width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    border: 3px solid rgba(255, 255, 255, 0.38) !important;
    background: radial-gradient(circle at 50% 38%, #ff3b30, #b91c1c) !important;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.07),
        0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.capture-record-toggle.btn-record--active {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border: 4px solid rgba(255, 255, 255, 0.9) !important;
    background: radial-gradient(circle at 50% 50%, #ff3b30 40%, #c62828 44%) !important;
    box-shadow:
        0 0 0 2px rgba(255, 59, 48, 0.5),
        0 10px 28px rgba(0, 0, 0, 0.38) !important;
}

.capture-record-toggle.btn-record--active .capture-record-icon::before {
    inset: 5px;
    border-radius: 999px;
    background: #ff3b30;
}

.capture-record-toggle.btn-record--active.is-recording .capture-record-icon::before {
    inset: 5px;
    border-radius: 4px;
    background: #ffffff;
}

.capture-control-tray.is-capture-idle-survey .capture-recorder-controls {
    justify-content: center;
}

.capture-control-tray.is-capture-idle-survey .capture-gallery.live-photo-strip:empty {
    display: none !important;
}

.capture-torch-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.capture-torch-auto-chip {
    min-width: 44px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.capture-torch-auto-chip[aria-pressed="true"] {
    color: #0f172a;
    background: #ffd60a;
    border-color: rgba(255, 214, 10, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 214, 10, 0.25);
}

.capture-control-tray .capture-pause-recording-button {
    margin-right: 36px;
}

.capture-control-tray .capture-photo-button:not(.capture-video-record-button) {
    margin-left: 36px;
}

.capture-control-tray.is-video-mode .capture-pause-recording-button {
    margin-right: 0;
}

.capture-control-tray.is-video-mode .capture-photo-button.capture-video-record-button {
    margin-left: 0;
}

.capture-control-tray .capture-toolbar-button {
    flex: 0 0 auto;
}

.capture-control-tray .capture-video-record-button {
    display: none;
}

.capture-control-tray.is-video-mode .capture-video-record-button {
    display: grid !important;
}

.capture-control-tray.is-video-mode .capture-recorder-controls {
    justify-content: center;
}

.capture-control-tray.is-video-mode .capture-photo-button:not(.capture-video-record-button) {
    display: grid !important;
    margin-left: 0;
}

.capture-control-tray.is-video-mode .capture-record-toggle {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
}

.capture-control-tray.is-video-mode .capture-video-record-button {
    width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.05;
    text-align: center;
    color: #ffffff;
    background: radial-gradient(circle at 50% 50%, #ff3b30 42%, #9f1239 46%);
    border: 4px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.floating-toolbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 158;
    padding: 0;
    margin: 0;
    border: 0;
    background: rgba(11, 18, 32, 0.34);
    cursor: pointer;
    pointer-events: auto;
}

.floating-toolbar-backdrop[hidden] {
    display: none !important;
}

.floating-report-toolbar--report-builder {
    z-index: 160;
    width: auto;
    max-width: calc(100vw - 24px);
    align-items: end;
    justify-items: end;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transition: left 0.2s ease, right 0.2s ease, transform 0.2s ease;
}

.floating-report-toolbar--report-builder.nav-dragging {
    transition: none;
}

/* Snap positions (horizontal). Vertical stays at bottom; drag only affects X. */
.floating-report-toolbar--report-builder.nav-snap-right {
    left: auto;
    right: max(16px, env(safe-area-inset-right, 0px));
    transform: none;
    justify-items: end;
}

.floating-report-toolbar--report-builder.nav-snap-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-items: center;
}

.floating-report-toolbar--report-builder.nav-snap-left {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: auto;
    transform: none;
    justify-items: start;
}

@media (min-width: 901px) {
    body:not(.sidebar-desktop-collapsed) .floating-report-toolbar--report-builder.nav-snap-left {
        left: max(304px, env(safe-area-inset-left, 0px));
    }
}

.floating-toolbar-buttons--builder-drag {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: max-content;
    max-width: calc(100vw - 40px);
    padding-left: 2px;
    border-radius: 14px;
    touch-action: none;
    box-shadow: 0 18px 42px rgba(11, 18, 32, 0.2), 0 2px 8px rgba(11, 18, 32, 0.08);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.floating-report-toolbar--report-builder.nav-dragging .floating-toolbar-buttons--builder-drag {
    cursor: grabbing;
}

.floating-builder-nav-grip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 14px;
    flex-shrink: 0;
    margin: 0 2px 0 6px;
    color: rgba(11, 18, 32, 0.28);
    font-size: 0.55rem;
    line-height: 1;
    letter-spacing: -0.06em;
    pointer-events: none;
}

.floating-builder-nav-grip::before {
    content: "⋮⋮";
}

.floating-toolbar-buttons--builder-drag .floating-tool-button--labeled {
    flex: 1 1 auto;
    min-width: 0;
}

.floating-report-toolbar--report-builder .floating-toolbar-panel--drawer {
    position: fixed;
    z-index: 161;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    width: min(520px, calc(100vw - 32px));
    max-height: min(68vh, calc(100vh - 112px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)));
    bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 62px);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 18, 32, 0.22);
}

.floating-report-toolbar--report-builder .floating-toolbar-panel--drawer .floating-toolbar-panel-head {
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.floating-report-toolbar--report-builder.nav-dragging .floating-toolbar-panel--drawer .floating-toolbar-panel-head {
    cursor: grabbing;
}

.floating-report-toolbar--report-builder .floating-section-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border-top: 1px solid var(--line);
}

.floating-toolbar-panel-footer {
    flex-shrink: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.floating-tool-button--labeled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 48px;
    height: 48px;
    padding: 0 16px;
    border-right: 1px solid var(--line);
    font-size: 0.95rem;
    font-weight: 800;
}

.floating-tool-button__icon {
    flex-shrink: 0;
}

.floating-toolbar-buttons--single .floating-tool-button:last-child {
    border-right: 0;
}

.floating-toolbar-panel-close {
    font-size: 1.35rem;
    line-height: 1;
}

.floating-report-toolbar--report-builder.nav-snap-left .floating-toolbar-panel--drawer:not([hidden]) {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: auto;
    transform: none;
}

@media (min-width: 901px) {
    body:not(.sidebar-desktop-collapsed) .floating-report-toolbar--report-builder.nav-snap-left .floating-toolbar-panel--drawer:not([hidden]) {
        left: max(304px, env(safe-area-inset-left, 0px));
    }
}

.floating-report-toolbar--report-builder.nav-snap-center .floating-toolbar-panel--drawer:not([hidden]) {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.floating-report-toolbar--report-builder.nav-snap-right .floating-toolbar-panel--drawer:not([hidden]) {
    left: auto;
    right: max(16px, env(safe-area-inset-right, 0px));
    transform: none;
}

.floating-report-toolbar--report-builder.nav-dragging .floating-toolbar-panel--drawer:not([hidden]) {
    left: inherit;
    right: auto;
    transform: none;
}

@media (max-width: 720px) {
    .floating-report-toolbar--report-builder {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        transform: none !important;
        justify-items: start;
    }

    .floating-report-toolbar--report-builder .floating-toolbar-panel--drawer:not([hidden]) {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 60px);
        width: calc(100vw - 24px);
        max-width: none;
        max-height: min(72vh, calc(100vh - 96px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)));
        border-radius: 16px;
        transform: none !important;
    }
}

.workflow-nav {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    padding: 6px 0 16px;
}

.workflow-nav.card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.capture-shell .workflow-nav {
    color: var(--ink);
    background: transparent;
}

.workflow-nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.workflow-nav-heading h2 {
    margin-bottom: 0;
}

.workflow-steps {
    display: grid;
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: start;
}

.workflow-step {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 0;
    justify-items: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    padding: 0 6px;
    background: transparent;
    color: var(--navy);
    text-align: center;
}

.workflow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 2px;
    background: var(--line);
}

.workflow-step.is-complete:not(:last-child)::before {
    background: var(--success);
}

.workflow-step strong {
    position: relative;
    z-index: 2;
    max-width: 100%;
    font-size: 0.88rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.workflow-step-number {
    position: relative;
    z-index: 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: var(--muted);
    box-shadow: 0 0 0 2px var(--line);
    font-size: 0.9rem;
    font-weight: 900;
}

.workflow-step.active,
.workflow-step:hover {
    color: var(--accent-dark);
}

.workflow-step.active .workflow-step-number {
    background: var(--accent);
    box-shadow: 0 0 0 2px #c8d8ec;
}

.workflow-step.is-complete .workflow-step-number {
    background: var(--success);
    box-shadow: 0 0 0 2px #bbf7d0;
}

.workflow-step.is-complete strong {
    color: var(--success);
}

.workflow-page-card {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
    padding: 22px;
}

.workflow-builder-panel {
    width: min(100%, 1540px);
    padding-bottom: max(56px, 4.5rem);
}

.workflow-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.builder-inspector {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.builder-editor-column {
    min-width: 0;
}

.builder-rating-summary,
.builder-suggestion-list {
    display: grid;
    gap: 10px;
}

.builder-rating-summary div,
.builder-rating-summary button {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px;
    background: #fbfdff;
}

.builder-rating-summary span {
    color: var(--navy);
    font-weight: 800;
}

.builder-rating-summary strong {
    color: var(--muted);
}

.builder-suggestion-list {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.builder-suggestion-list h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
}

.builder-suggestion-list p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.builder-mini-stats {
    grid-template-columns: 1fr;
}

.output-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.output-summary-card,
.output-preview-card {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.output-workspace-shell {
    display: grid;
    gap: 18px;
}

.output-qa-summary-bar {
    display: grid;
    grid-template-columns: repeat(8, minmax(110px, 1fr));
    gap: 10px;
    min-width: 0;
}

.output-qa-summary-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.output-qa-summary-item span {
    overflow: hidden;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.output-qa-summary-item strong {
    color: var(--navy);
    font-size: clamp(1.05rem, 1.45vw, 1.5rem);
    font-weight: 900;
    line-height: 1;
}

.output-workspace-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    scrollbar-width: thin;
}

.output-workspace-tab {
    flex: 0 0 auto;
    border: 0;
    border-radius: 11px;
    padding: 11px 14px;
    background: transparent;
    color: #3d4861;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    white-space: nowrap;
}

.output-workspace-tab.is-active {
    background: transparent;
    color: #3d4861;
    font-weight: 800;
    box-shadow: none;
}

.output-workspace-panel {
    display: grid;
    gap: 18px;
    background: #ffffff;
}

.output-workspace-panel[hidden] {
    display: none;
}

.output-workspace-loading {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 28px;
    background: #ffffff;
    color: #64748b;
    font-weight: 750;
}

.output-room-generation-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-room-generation-head h3 {
    margin: 0 0 4px;
    color: var(--navy);
    font-weight: 900;
}

.output-room-generation-status {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 13px 14px;
    background: #ffffff;
    color: #3d4861;
    font-weight: 750;
}

.output-room-generation-status.is-loading {
    color: #64748b;
}

.output-room-generation-status.is-success {
    border-color: rgba(34, 197, 94, 0.28);
    background: #f0fdf4;
}

.output-room-generation-status.is-error {
    border-color: rgba(220, 38, 38, 0.26);
    background: #fef2f2;
    color: #991b1b;
}

.output-room-generation-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.output-room-generation-summary span {
    display: grid;
    gap: 3px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.output-room-generation-summary strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.output-accommodation-table {
    display: grid;
    overflow: hidden;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #ffffff;
}

.output-accommodation-workspace {
    background: #ffffff;
}

.output-accommodation-add {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
}

.output-accommodation-add label {
    flex: 1 1 auto;
    min-width: 0;
}

.output-accommodation-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fafcfe;
}

.output-accommodation-bulk-bar[hidden] {
    display: none;
}

.output-accommodation-bulk-bar strong {
    color: #3d4861;
    font-size: 0.9rem;
}

.output-accommodation-bulk-bar label {
    min-width: 140px;
}

.output-accommodation-bulk-bar input {
    min-height: 36px;
    border-radius: 10px;
}

.output-accommodation-row {
    display: grid;
    grid-template-columns: 48px minmax(150px, 1.05fr) minmax(90px, 0.55fr) minmax(110px, 0.65fr) minmax(280px, 1.8fr) minmax(120px, 0.65fr) minmax(132px, 0.58fr);
    gap: 0;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0;
    padding: 0;
    background: #ffffff;
    box-shadow: none;
    cursor: pointer;
}

.output-accommodation-row:last-child {
    border-bottom: 0;
}

.output-accommodation-row:not(.output-accommodation-row--head):hover,
.output-accommodation-row:not(.output-accommodation-row--head):focus {
    background: #fbfdff;
    outline: none;
}

.output-accommodation-row.is-dragging {
    opacity: 0.68;
}

.output-accommodation-row--head {
    cursor: default;
    background: #ffffff;
    box-shadow: none;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.output-accommodation-row--head span,
.output-accommodation-cell,
.output-accommodation-actions {
    min-width: 0;
    padding: 13px 12px;
}

.output-accommodation-row input,
.output-accommodation-row textarea {
    border-radius: 10px;
    background: #ffffff !important;
}

.output-accommodation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.output-accommodation-room-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
}

.output-accommodation-room-cell [data-room-name] {
    font-weight: 400;
}

.output-accommodation-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
}

.output-accommodation-check input {
    width: 18px;
    height: 18px;
    accent-color: #3d4861;
}

.output-accommodation-drag-handle {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #94a3b8;
}

.output-accommodation-drag-handle svg,
.output-accommodation-icon-btn svg,
.output-room-modal__close svg {
    width: 100%;
    height: 100%;
}

.output-accommodation-drag-handle svg,
.output-accommodation-icon-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.output-accommodation-summary {
    overflow: hidden;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.38;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-accommodation-image-count {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    padding: 5px 9px;
    background: #ffffff;
    color: #3d4861;
    font-size: 0.8rem;
    font-weight: 850;
}

.output-accommodation-icon-btn {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
}

.output-accommodation-icon-btn:hover {
    border-color: rgba(61, 72, 97, 0.28);
    color: #3d4861;
}

.output-accommodation-icon-btn--danger:hover {
    border-color: rgba(185, 28, 28, 0.22);
    color: #b91c1c;
}

.output-accommodation-reorder-btn {
    display: none;
}

.output-accommodation-observations p,
.output-accommodation-images p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.output-accommodation-observations textarea {
    min-height: 140px;
    font-size: 0.92rem;
}

.has-output-room-modal {
    overflow: hidden;
}

.output-room-modal[hidden] {
    display: none;
}

.output-room-modal {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
}

.output-room-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
}

.output-room-modal__panel {
    position: relative;
    z-index: 1;
    overflow: auto;
    width: min(980px, 100%);
    max-height: min(860px, calc(100vh - 44px));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.output-room-modal__form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.output-room-modal__head,
.output-room-modal__subhead,
.output-room-modal__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.output-room-modal__foot .save-state {
    min-height: 1.2rem;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 800;
}

.output-room-modal__head h3,
.output-room-modal__subhead h4 {
    margin: 0;
    color: var(--navy);
}

.output-room-modal__close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.output-room-modal__grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 0.7fr) minmax(160px, 0.8fr);
    gap: 12px;
}

.output-room-modal__field {
    display: grid;
    gap: 8px;
}

.output-room-modal__field span,
.output-room-modal__grid label span {
    color: #3d4861;
    font-size: 0.82rem;
    font-weight: 850;
}

.output-room-modal__photos {
    display: grid;
    gap: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 14px;
}

.output-room-modal__photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.output-room-modal__photo-grid a {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #f8fafc;
    aspect-ratio: 1;
}

.output-room-modal__photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.output-accommodation-image-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.output-accommodation-image-link {
    color: var(--navy);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.output-accommodation-image-link:hover {
    text-decoration: underline;
}

.output-accommodation-image-strip a {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #eef2f7;
    aspect-ratio: 1;
}

.output-accommodation-image-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.output-accommodation-actions .save-state {
    min-height: 1rem;
}

.output-room-qa-list,
.output-legal-qa,
.output-legal-list {
    display: grid;
    gap: 12px;
}

.output-legal-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 10px;
}

.output-legal-summary-grid div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.output-legal-summary-grid span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.output-legal-summary-grid strong {
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: 900;
}

.output-legal-add {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
}

.output-legal-add label {
    flex: 1 1 auto;
    min-width: 0;
}

.output-legal-table {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #ffffff;
}

.output-legal-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr) minmax(100px, 0.5fr) minmax(120px, 0.62fr) minmax(260px, 1.4fr) minmax(120px, 0.5fr);
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
    cursor: pointer;
}

.output-legal-row:last-child {
    border-bottom: 0;
}

.output-legal-row:not(.output-legal-row--head):hover,
.output-legal-row:not(.output-legal-row--head):focus {
    background: #fbfdff;
    outline: none;
}

.output-legal-row--head {
    cursor: default;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.output-legal-row--head span,
.output-legal-cell,
.output-legal-actions {
    min-width: 0;
    padding: 13px 12px;
}

.output-legal-item-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.output-legal-notes {
    overflow: hidden;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.38;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-legal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.output-legal-reorder-btn {
    display: none;
}

.output-legal-priority {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: #eef2f7;
    color: #3d4861;
    font-size: 0.78rem;
    font-weight: 900;
}

.output-legal-priority--high {
    background: #fff7ed;
    color: #9a3412;
}

.output-legal-priority--critical {
    background: #fef2f2;
    color: #991b1b;
}

.output-legal-priority--low {
    background: #f0fdf4;
    color: #166534;
}

.output-repair-schedule {
    display: grid;
    gap: 12px;
}

.output-repair-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-repair-head h3 {
    margin: 0 0 4px;
    color: var(--navy);
    font-weight: 900;
}

.output-repair-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(118px, 1fr));
    gap: 10px;
}

.output-repair-summary-grid div {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.output-repair-summary-total {
    border-color: rgba(61, 72, 97, 0.28) !important;
    background: #fafcfe !important;
}

.output-repair-summary-grid span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.output-repair-summary-grid strong {
    color: var(--navy);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
}

.output-repair-status {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fafcfe;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 750;
}

.output-repair-status[hidden] {
    display: none;
}

.output-repair-status.is-error {
    border-color: rgba(220, 38, 38, 0.22);
    background: #fef2f2;
    color: #991b1b;
}

.output-repair-add {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
}

.output-repair-add label {
    flex: 1 1 auto;
    min-width: 0;
}

.output-repair-table {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #ffffff;
}

.output-repair-row {
    display: grid;
    grid-template-columns: minmax(118px, 0.62fr) minmax(145px, 0.8fr) minmax(190px, 1.2fr) minmax(190px, 1.2fr) minmax(56px, 0.32fr) minmax(78px, 0.38fr) minmax(92px, 0.45fr) minmax(92px, 0.45fr) minmax(86px, 0.42fr) minmax(150px, 0.58fr);
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
    cursor: pointer;
}

.output-repair-row:last-child {
    border-bottom: 0;
}

.output-repair-row:not(.output-repair-row--head):hover,
.output-repair-row:not(.output-repair-row--head):focus {
    background: #fbfdff;
    outline: none;
}

.output-repair-row.is-dragging {
    opacity: 0.68;
}

.output-repair-row--head {
    cursor: default;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.output-repair-row--head span,
.output-repair-cell,
.output-repair-actions {
    min-width: 0;
    padding: 13px 10px;
}

.output-repair-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.output-repair-source,
.output-repair-copy {
    overflow: hidden;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.38;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-repair-priority {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: #eef2f7;
    color: #3d4861;
    font-size: 0.78rem;
    font-weight: 900;
}

.output-repair-priority--critical {
    background: #fef2f2;
    color: #991b1b;
}

.output-repair-priority--high {
    background: #fff7ed;
    color: #9a3412;
}

.output-repair-priority--medium {
    background: #fffbeb;
    color: #92400e;
}

.output-repair-priority--low {
    background: #eff6ff;
    color: #1d4ed8;
}

.output-repair-priority--optional {
    background: #f8fafc;
    color: #64748b;
}

.output-repair-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.output-repair-reorder-btn {
    display: none;
}

.output-repair-modal .output-room-modal__panel {
    width: min(1080px, 100%);
}

.output-repair-modal__grid {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.output-risk-review {
    display: grid;
    gap: 12px;
}

.output-risk-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-risk-review-head h3 {
    margin: 0 0 4px;
    color: var(--navy);
    font-weight: 900;
}

.output-risk-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(105px, 1fr));
    gap: 10px;
}

.output-risk-summary-grid div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.output-risk-summary-grid span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.output-risk-summary-grid strong {
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: 900;
}

.output-risk-critical-warning,
.output-risk-review-status {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.92rem;
    font-weight: 750;
}

.output-risk-critical-warning svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.output-risk-review-status[hidden] {
    display: none;
}

.output-risk-review-status.is-loading {
    border-color: rgba(148, 163, 184, 0.22);
    background: #fafcfe;
    color: #64748b;
}

.output-risk-review-status.is-error {
    border-color: rgba(220, 38, 38, 0.22);
    background: #fef2f2;
    color: #991b1b;
}

.output-risk-table {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: #ffffff;
}

.output-risk-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.82fr) minmax(220px, 1.25fr) minmax(220px, 1.15fr) minmax(190px, 1fr) minmax(92px, 0.45fr) minmax(180px, 0.7fr);
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
}

.output-risk-row:last-child {
    border-bottom: 0;
}

.output-risk-row:not(.output-risk-row--head):hover {
    background: #fbfdff;
}

.output-risk-row--head {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.output-risk-row--head span,
.output-risk-cell,
.output-risk-actions {
    min-width: 0;
    padding: 13px 12px;
}

.output-risk-cell {
    display: grid;
    gap: 5px;
}

.output-risk-cell em,
.output-risk-issue small {
    overflow: hidden;
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-risk-issue strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-risk-copy {
    overflow: hidden;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.38;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.output-risk-badge,
.output-risk-status {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: #eef2f7;
    color: #3d4861;
    font-size: 0.78rem;
    font-weight: 900;
}

.output-risk-badge--critical {
    background: #fef2f2;
    color: #991b1b;
}

.output-risk-badge--high {
    background: #fff7ed;
    color: #9a3412;
}

.output-risk-badge--medium {
    background: #eff6ff;
    color: #1d4ed8;
}

.output-risk-badge--low {
    background: #f0fdf4;
    color: #166534;
}

.output-risk-status--fixed {
    background: #f0fdf4;
    color: #166534;
}

.output-risk-status--dismissed {
    background: #f8fafc;
    color: #64748b;
}

.output-risk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.output-risk-text-action {
    display: inline-flex;
    min-width: 38px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 900;
}

.output-risk-text-action:hover {
    border-color: rgba(61, 72, 97, 0.28);
    color: #3d4861;
}

.output-risk-detail {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 14px;
    background: #fafcfe;
}

.output-risk-detail[hidden] {
    display: none;
}

.output-risk-detail section {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.output-risk-detail h4 {
    margin: 0;
    color: #3d4861;
    font-size: 0.82rem;
    font-weight: 900;
}

.output-risk-detail p {
    margin: 0;
    color: #475569;
    line-height: 1.45;
}

.output-risk-export-alert {
    margin: 0;
}

.floating-toolbar-risk-warning {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(180, 83, 9, 0.22);
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.74rem;
    font-weight: 900;
}

.output-legal-modal .output-room-modal__panel {
    width: min(920px, 100%);
}

.output-room-qa-card,
.output-legal-group,
.output-legal-item {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-room-qa-summary {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(190px, 1.6fr) repeat(5, minmax(98px, 1fr));
    gap: 10px;
    align-items: center;
    border: 0;
    padding: 14px;
    background: transparent;
    color: #3d4861;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.output-room-qa-summary strong,
.output-image-qa-head h3,
.output-legal-group__head h3,
.output-room-detail-grid h3 {
    margin: 0;
    color: var(--navy);
    font-weight: 900;
}

.output-room-qa-summary em {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 750;
}

.output-room-qa-pill {
    display: inline-flex;
    width: fit-content;
    min-width: 48px;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    background: #eef2f7;
    color: var(--navy);
    font-weight: 900;
}

.output-room-qa-detail {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding: 16px;
}

.output-room-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.output-room-detail-grid section {
    border-radius: 12px;
    padding: 14px;
    background: #f8fafc;
}

.output-source-list,
.output-source-list li {
    display: grid;
    gap: 6px;
}

.output-source-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.output-source-list li {
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
}

.output-evidence-dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.output-evidence-dl div {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1fr);
    gap: 10px;
}

.output-evidence-dl dt {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.output-evidence-dl dd {
    margin: 0;
    color: #1f2a44;
    font-weight: 700;
}

.output-image-qa-head,
.output-legal-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
}

.output-image-qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.output-image-qa-card {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-image-qa-card > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eef2f7;
}

.output-image-quarantine-badge,
.image-manager-quarantine-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    padding: 5px 9px;
    background: #fafcfe;
    color: #3d4861;
    font-size: 0.78rem;
    font-weight: 760;
}

.output-image-quarantine-badge {
    margin: 10px 12px 0;
}

.output-image-quarantine-badge svg,
.image-manager-quarantine-badge svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.output-image-qa-form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.output-image-qa-form label {
    display: grid;
    gap: 5px;
}

.output-image-qa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.output-legal-group {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.output-legal-group__head {
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.output-legal-group__head span {
    display: inline-flex;
    min-width: 34px;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    background: #eef2f7;
    color: var(--navy);
    font-weight: 900;
}

.output-legal-item {
    display: grid;
    gap: 10px;
    padding: 14px;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .output-qa-summary-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .output-accommodation-row {
        grid-template-columns: 48px minmax(150px, 1fr) minmax(90px, 0.55fr) minmax(120px, 0.75fr) minmax(160px, 1fr) minmax(90px, 0.5fr) minmax(120px, 0.6fr);
    }

    .output-legal-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .output-repair-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .output-risk-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .output-legal-row {
        grid-template-columns: minmax(180px, 1.3fr) minmax(120px, 0.85fr) minmax(88px, 0.55fr) minmax(110px, 0.7fr) minmax(160px, 1fr) minmax(112px, 0.55fr);
    }

    .output-risk-row {
        grid-template-columns: minmax(130px, 0.8fr) minmax(190px, 1fr) minmax(170px, 1fr) minmax(160px, 0.9fr) minmax(86px, 0.45fr) minmax(160px, 0.65fr);
    }

    .output-repair-row {
        grid-template-columns: minmax(118px, 0.7fr) minmax(140px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(56px, 0.32fr) minmax(72px, 0.36fr) minmax(86px, 0.42fr) minmax(86px, 0.42fr) minmax(80px, 0.4fr) minmax(132px, 0.58fr);
    }

    .output-accommodation-row--head,
    .output-legal-row--head,
    .output-repair-row--head,
    .output-risk-row--head {
        display: none;
    }

    .output-room-qa-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .output-qa-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .output-room-qa-summary,
    .output-room-detail-grid,
    .output-accommodation-row,
    .output-legal-row,
    .output-repair-row,
    .output-risk-row,
    .output-risk-detail,
    .output-room-generation-summary,
    .output-room-modal__grid,
    .output-legal-summary-grid,
    .output-repair-summary-grid,
    .output-risk-summary-grid {
        grid-template-columns: 1fr;
    }

    .output-accommodation-row,
    .output-legal-row,
    .output-repair-row,
    .output-risk-row {
        padding: 10px 0;
    }

    .output-accommodation-actions,
    .output-legal-actions,
    .output-repair-actions,
    .output-risk-actions {
        justify-content: flex-start;
    }

    .output-accommodation-reorder-btn,
    .output-legal-reorder-btn,
    .output-repair-reorder-btn {
        display: inline-grid;
    }

    .output-room-modal {
        align-items: stretch;
        padding: 12px;
    }

    .output-room-modal__panel {
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .output-room-modal__form {
        padding: 16px;
    }

    .output-room-modal__head,
    .output-room-modal__subhead {
        align-items: stretch;
        flex-direction: column;
    }

    .output-accommodation-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .output-legal-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .output-repair-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .output-risk-row > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .output-room-generation-head {
        align-items: stretch;
        flex-direction: column;
    }

    .output-risk-review-head {
        align-items: stretch;
        flex-direction: column;
    }

    .output-repair-head {
        align-items: stretch;
        flex-direction: column;
    }

    .output-accommodation-add,
    .output-legal-add,
    .output-repair-add,
    .output-accommodation-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .output-accommodation-bulk-bar > *,
    .output-accommodation-bulk-bar label,
    .output-accommodation-bulk-bar input {
        width: 100%;
    }

    .output-image-qa-head,
    .output-legal-group__head {
        align-items: stretch;
        flex-direction: column;
    }

    .output-image-qa-grid {
        grid-template-columns: 1fr;
    }
}

.key-risk-list {
    display: grid;
    gap: 10px;
}

.key-risk-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #fbfdff;
    color: var(--navy);
    font-weight: 800;
}

.condition-ratings-panel {
    display: grid;
    width: 100%;
    gap: clamp(18px, 2.4vw, 36px);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: clamp(22px, 2.2vw, 34px);
    padding: clamp(18px, 3vw, 46px);
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.condition-ratings-panel__head {
    display: grid;
    gap: 12px;
}

.condition-ratings-panel__head h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.condition-ratings-panel__head p {
    margin: 0;
    color: #52627a;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.45;
}

.condition-rating-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.25vw, 22px);
    min-width: 0;
}

.condition-rating-summary-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: clamp(170px, 20vw, 310px);
    align-content: center;
    justify-items: center;
    gap: clamp(12px, 1.6vw, 30px);
    overflow: hidden;
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: clamp(18px, 1.8vw, 24px);
    padding: clamp(16px, 2vw, 34px) clamp(8px, 1.5vw, 24px);
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.condition-rating-summary-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--rating-accent, #94a3b8);
    content: "";
}

.condition-rating-summary-badge {
    display: inline-flex;
    width: clamp(58px, 6vw, 112px);
    height: clamp(58px, 6vw, 112px);
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--rating-soft, #f1f5f9);
    color: var(--rating-accent, #64748b);
    font-size: clamp(1rem, 1.5vw, 1.75rem);
    font-weight: 900;
    line-height: 1;
}

.condition-rating-summary-label {
    color: #52627a;
    font-size: clamp(0.66rem, 0.86vw, 1rem);
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-transform: uppercase;
}

.condition-rating-summary-card strong {
    color: var(--navy);
    font-size: clamp(2.1rem, 4.5vw, 5.2rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 0.88;
}

.condition-rating-summary-card--cr3 {
    --rating-soft: #fde8e8;
    --rating-accent: #c81e1e;
}

.condition-rating-summary-card--cr2 {
    --rating-soft: #fff2d8;
    --rating-accent: #c27803;
}

.condition-rating-summary-card--cr1 {
    --rating-soft: #dcfce7;
    --rating-accent: #159447;
}

.condition-rating-summary-card--ni,
.condition-rating-summary-card--na {
    --rating-soft: #eef2f7;
    --rating-accent: #64748b;
}

.condition-rating-summary-card:hover,
.condition-rating-summary-trigger:hover,
.builder-rating-summary button:hover {
    border-color: rgba(15, 23, 42, 0.16);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.condition-rating-summary-card:focus-visible,
.condition-rating-summary-trigger:focus-visible,
.builder-rating-summary button:focus-visible {
    outline: 3px solid rgba(27, 90, 249, 0.26);
    outline-offset: 3px;
}

.condition-rating-summary-trigger,
.builder-rating-summary button {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.rating-sections-modal {
    width: min(620px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--navy);
}

.rating-sections-modal::backdrop {
    background: rgba(7, 20, 33, 0.55);
    backdrop-filter: blur(3px);
}

.rating-sections-modal__inner {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel, #ffffff);
    box-shadow: 0 24px 70px rgba(7, 20, 33, 0.28);
}

.rating-sections-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rating-sections-modal__head h2 {
    margin: 0;
    font-size: 1.35rem;
}

.rating-sections-modal__head button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--navy);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.rating-sections-list {
    display: grid;
    gap: 10px;
}

.rating-sections-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
    color: var(--navy);
    font-weight: 800;
}

.rating-sections-list__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--navy);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 900;
}

@media (min-width: 721px) and (max-width: 1180px) {
    .condition-ratings-panel {
        gap: clamp(16px, 2vw, 24px);
        padding: clamp(18px, 2.4vw, 28px);
    }

    .condition-rating-summary-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(8px, 1.1vw, 14px);
    }

    .condition-rating-summary-card {
        min-height: clamp(160px, 19vw, 230px);
        gap: clamp(10px, 1.4vw, 18px);
        padding: clamp(14px, 1.7vw, 22px) clamp(8px, 1vw, 14px);
    }

    .condition-rating-summary-badge {
        width: clamp(56px, 6vw, 82px);
        height: clamp(56px, 6vw, 82px);
        font-size: clamp(1rem, 1.35vw, 1.3rem);
    }

    .condition-rating-summary-label {
        font-size: clamp(0.66rem, 0.78vw, 0.78rem);
        line-height: 1.16;
    }

    .condition-rating-summary-card strong {
        font-size: clamp(2.1rem, 3.8vw, 3.4rem);
    }
}

@media (max-width: 720px) {
    .condition-rating-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .condition-rating-summary-card {
        min-height: clamp(150px, 34vw, 220px);
    }
}

@media (max-width: 560px) {
    .condition-rating-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.output-section-list {
    display: grid;
    gap: 18px;
}

.output-section {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.output-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.output-section header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.output-section h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1.12rem;
}

.output-copy {
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.65;
}

.output-section-form {
    display: grid;
    gap: 12px;
}

.output-section-text {
    width: 100%;
    min-height: 180px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    color: #111827;
    background: #ffffff;
    font-size: 0.98rem;
    line-height: 1.65;
    resize: vertical;
}

.output-autosize-textarea {
    overflow-y: hidden;
    overscroll-behavior: auto;
    touch-action: pan-y;
}

.output-autosize-textarea.is-editing-output {
    overflow-y: hidden;
}

.output-autosize-textarea.is-scroll-enabled {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.output-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    margin-top: 0;
    overflow: visible;
    text-align: right;
}

.output-icon-action {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 999px;
    padding: 0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}

.output-icon-action::after {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    max-width: 160px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    content: attr(data-tooltip);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, 4px);
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: nowrap;
}

.output-icon-action:not([data-tooltip])::after,
.output-icon-action[data-tooltip=""]::after {
    content: none;
}

.output-icon-action:hover,
.output-icon-action:focus-visible {
    border-color: rgba(100, 116, 139, 0.5);
    background: #f1f5f9;
    color: #64748b;
    outline: none;
    transform: translateY(-1px);
}

.output-icon-action:hover::after,
.output-icon-action:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.output-icon-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.output-icon-action:disabled::after {
    opacity: 0;
}

.output-action-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.output-section-actions + .output-photo-grid,
.output-section-actions + .report-section-photo-strip {
    margin-top: 25px;
}

.output-photo-grid {
    margin-top: 4px;
}

.output-image-display-panel {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.output-image-bulk-toolbar {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(14px);
}

.output-image-bulk-toolbar[hidden] {
    display: none;
}

.output-image-bulk-toolbar__summary {
    display: grid;
    gap: 2px;
    min-width: 160px;
}

.output-image-bulk-toolbar__summary strong {
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 800;
}

.output-image-bulk-toolbar__summary span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
}

.output-image-bulk-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.output-image-bulk-toolbar__actions button {
    min-height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: #3d4861;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 750;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.output-image-bulk-toolbar__actions button:hover,
.output-image-bulk-toolbar__actions button:focus-visible {
    border-color: rgba(37, 99, 235, 0.3);
    color: #2563eb;
}

.output-image-bulk-toolbar__actions .output-image-bulk-toolbar__danger:hover,
.output-image-bulk-toolbar__actions .output-image-bulk-toolbar__danger:focus-visible {
    border-color: rgba(220, 38, 38, 0.26);
    color: #b91c1c;
}

.output-image-display-panel details {
    padding: 12px 14px;
}

.output-image-display-panel summary {
    cursor: pointer;
    color: #3d4861;
    font-size: 0.9rem;
    font-weight: 850;
}

.output-image-display-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr) minmax(260px, 1.2fr);
    gap: 14px;
    padding-top: 14px;
}

.output-image-display-grid fieldset {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: #fafcfe;
}

.output-image-display-grid legend {
    padding: 0 4px;
    color: #3d4861;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.output-image-display-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 650;
}

.output-image-display-grid label:has(select) {
    display: grid;
    gap: 5px;
}

.output-photo-edit-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.output-photo-edit-link span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    background: rgba(6, 19, 33, 0.86);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.output-photo-edit-link:hover span,
.output-photo-edit-link:focus-visible span {
    opacity: 1;
    transform: translateY(0);
}

.output-embedded-image {
    position: relative;
    display: block;
    margin: 0;
}

.output-image-select-control {
    position: absolute;
    z-index: 9;
    top: 8px;
    left: 8px;
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.output-embedded-image:hover .output-image-select-control,
.output-embedded-image:focus-within .output-image-select-control,
.output-embedded-image.is-selected .output-image-select-control {
    opacity: 1;
    transform: translateY(0);
}

.output-image-select-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.output-image-select-control span {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 1.6px solid #94a3b8;
    border-radius: 5px;
    color: #ffffff;
}

.output-image-select-control input:checked + span {
    border-color: #2563eb;
    background: #2563eb;
}

.output-image-select-control input:checked + span::after {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(1px, -1px);
}

.output-embedded-image.is-selected .output-image-surface img {
    outline: 3px solid rgba(37, 99, 235, 0.42);
    outline-offset: -3px;
}

.output-image-surface {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.output-image-surface img {
    display: block;
}

.output-image-info {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #3d4861;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.output-image-tip {
    position: absolute;
    z-index: 8;
    right: 8px;
    bottom: 42px;
    display: grid;
    max-width: min(260px, calc(100% - 16px));
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    color: #3d4861;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.output-image-tip strong {
    color: var(--navy);
    font-size: 0.85rem;
    font-weight: 850;
    line-height: 1.25;
}

.output-image-tip span {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.output-image-tip button {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: #3d4861;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 850;
}

[data-image-label-mode="hover"] .output-embedded-image:hover .output-image-tip,
[data-image-label-mode="hover"] .output-embedded-image:focus-within .output-image-tip,
[data-image-label-mode="hover"] .output-embedded-image.is-tip-open .output-image-tip,
[data-image-label-mode="always"] .output-image-tip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

[data-image-label-mode="hide"] .output-image-tip,
.output-workspace-shell:not(.output-image-option-editor) .output-image-info {
    display: none;
}

.output-workspace-shell:not(.output-image-option-annotations) .output-image-tip span {
    display: none;
}

.output-workspace-shell:not(.output-image-option-captions) .output-image-tip strong {
    display: none;
}

.output-workspace-shell.output-image-option-compact .output-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.has-output-image-modal {
    overflow: hidden;
}

.output-image-editor-modal[hidden] {
    display: none;
}

.output-image-editor-modal {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
}

.output-image-editor-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
}

.output-image-editor-modal__panel {
    position: relative;
    z-index: 1;
    overflow: auto;
    width: min(980px, 100%);
    max-height: min(820px, calc(100vh - 44px));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.output-image-editor-form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.output-image-editor-modal__head,
.output-image-editor-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.output-image-editor-modal__head h3 {
    margin: 0;
    color: var(--navy);
}

.output-image-editor-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.output-image-editor-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
    gap: 16px;
}

.output-image-editor-preview {
    overflow: hidden;
    border-radius: 14px;
    background: #f8fafc;
    aspect-ratio: 4 / 3;
}

.output-image-editor-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.output-image-editor-fields,
.output-image-editor-fields label {
    display: grid;
    gap: 8px;
}

.output-image-editor-fields span {
    color: #3d4861;
    font-size: 0.82rem;
    font-weight: 850;
}

.output-image-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 860px) {
    .output-image-display-grid,
    .output-image-editor-layout,
    .output-image-editor-grid {
        grid-template-columns: 1fr;
    }

    .output-image-editor-modal {
        align-items: end;
        padding: 12px;
    }

    .output-image-editor-modal__panel {
        max-height: calc(100vh - 24px);
        border-radius: 18px 18px 14px 14px;
    }
}

@media (max-width: 560px) {
    .output-image-bulk-toolbar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .output-image-bulk-toolbar__actions {
        justify-content: flex-start;
    }

    .output-image-select-control {
        opacity: 1;
        transform: none;
    }

    .output-image-display-panel details {
        padding: 10px;
    }

    .output-image-tip {
        right: 6px;
        bottom: 38px;
        max-width: calc(100% - 12px);
        padding: 9px;
    }

    .output-image-editor-form {
        padding: 16px;
    }
}

.output-translation-panel {
    display: grid;
    gap: 14px;
}

.translation-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.translation-controls label {
    display: grid;
    gap: 6px;
}

.is-output-translated .output-section-form button[type="submit"] {
    opacity: 0.5;
}

@media (max-width: 760px) {
    .translation-controls {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.section-photo-album-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.section-photo-album-link:hover {
    text-decoration: underline;
}

.photo-album-group {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.photo-album-group:first-child {
    border-top: 0;
    padding-top: 0;
}

.photo-album-group h3 {
    margin: 0;
    color: var(--navy);
}

.capture-live-sync-message {
    position: fixed;
    right: 16px;
    left: 16px;
    top: calc(env(safe-area-inset-top) + 68px);
    z-index: 90;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.84);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.capture-live-thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.capture-live-thumb-row img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.capture-live-thumb-row small {
    align-self: center;
    color: var(--muted);
    font-weight: 700;
}

.output-room-table {
    min-width: 720px;
}

.output-room-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.output-room-heading strong {
    min-width: 0;
}

.output-room-controls {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.output-room-controls .btn {
    min-height: 38px;
}

.camera-row-button {
    width: 42px;
    padding-right: 0;
    padding-left: 0;
}

.camera-icon {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.camera-icon::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 4px;
    width: 10px;
    height: 5px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.camera-icon::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.template-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.template-list-card,
.template-editor-card {
    padding: 22px;
}

.template-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 20px;
}

.template-list a {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--navy);
    text-decoration: none;
}

.template-list a.active,
.template-list a:hover {
    border-color: #c8d8ec;
    background: var(--soft-blue);
}

.template-list span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.template-create-form,
.template-blocks {
    display: grid;
    gap: 14px;
}

.template-block {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #fbfdff;
}

.template-block[draggable="true"] {
    cursor: default;
}

.template-block.is-dragging {
    opacity: 0.58;
    outline: 2px solid var(--accent);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.template-block-reorder-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 2px;
}

.template-block-drag-handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    padding: 0 12px;
    color: var(--navy);
    background: #edf4ff;
    cursor: grab;
    font-size: 0.78rem;
    font-weight: 850;
}

.template-block-drag-handle:active {
    cursor: grabbing;
}

.template-block-drag-handle span {
    color: var(--accent-dark);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -2px;
}

.template-block-mobile-order {
    display: none;
    align-items: center;
    gap: 6px;
}

.template-order-toast {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 10000;
    max-width: min(340px, calc(100vw - 32px));
    border: 1px solid rgba(22, 112, 74, 0.28);
    border-radius: 12px;
    padding: 11px 14px;
    color: #0f3d2d;
    background: #ecfdf3;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    font-size: 0.88rem;
    font-weight: 850;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.template-order-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.template-order-toast.is-error {
    border-color: rgba(180, 35, 24, 0.28);
    color: #7a271a;
    background: #fef3f2;
}

@media (max-width: 760px) {
    .template-block-reorder-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .template-block-drag-handle,
    .template-block-mobile-order {
        width: 100%;
    }

    .template-block-drag-handle {
        justify-content: center;
    }

    .template-block-mobile-order {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .template-block-mobile-order .btn {
        width: 100%;
    }
}

.template-block-new {
    background: #ffffff;
}

.template-text {
    min-height: 150px;
    line-height: 1.5;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-weight: 800;
}

.check-row input {
    width: auto;
}

.inline-check {
    align-self: end;
    min-height: 42px;
}

.danger-check {
    color: var(--danger);
}

.slim-grid {
    grid-template-columns: 160px minmax(0, 1fr);
}

.client-name-grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.client-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "primary"
        "secondary"
        "agent"
        "solicitor";
    gap: 18px;
    align-items: start;
}

.client-card-primary {
    grid-area: primary;
}

.client-card-secondary {
    grid-area: secondary;
}

.client-card-agent {
    grid-area: agent;
}

.client-card-solicitor {
    grid-area: solicitor;
}

.client-contact-card {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    overflow: hidden;
}

.client-contact-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    color: var(--navy);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 850;
    list-style: none;
}

.client-contact-card__summary::-webkit-details-marker {
    display: none;
}

.client-contact-card__summary::after {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 999px;
    color: #64748b;
    content: "+";
    font-size: 1.1rem;
    font-weight: 750;
    line-height: 1;
}

.client-contact-card[open] > .client-contact-card__summary {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.client-contact-card[open] > .client-contact-card__summary::after {
    content: "–";
}

.client-contact-card__summary:focus-visible {
    outline: 3px solid rgba(27, 90, 249, 0.22);
    outline-offset: -3px;
}

.client-contact-card__body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.client-contact-card h3 {
    margin: 0;
    color: var(--navy);
}

.optional-contact-panel {
    display: grid;
    gap: 14px;
}

.optional-contact-panel[hidden] {
    display: none !important;
}

.wizard-inline-processing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.wizard-inline-processing .spinner {
    width: 24px;
    height: 24px;
}

.wizard-inline-processing[hidden] {
    display: none !important;
}

.lookup-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lookup-inline-status .spinner {
    width: 20px;
    height: 20px;
}

.template-delete-form {
    margin-top: 14px;
}

.section-card {
    padding: 20px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    min-width: 0;
}

.section-head > div {
    min-width: 0;
}

.section-head h2 {
    margin-bottom: 0;
}

.section-head-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 0 auto;
}

.collapsible-card > .section-head,
.collapsible-card > .workflow-nav-heading,
.collapsible-card > .processing-head,
.section-card > .section-head,
.output-section > header {
    align-items: flex-start;
}

.collapsible-card > .section-head .section-head-actions,
.collapsible-card > .workflow-nav-heading .section-head-actions,
.collapsible-card > .processing-head .section-head-actions,
.section-card > .section-head .section-head-actions,
.output-section > header .section-head-actions {
    align-self: flex-start;
    margin-left: auto;
}

.collapse-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

.collapse-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 150ms ease;
}

.section-card.is-collapsed .collapse-toggle::before {
    transform: translate(-65%, -50%) rotate(-45deg);
}

.output-section.is-collapsed .collapse-toggle::before {
    transform: translate(-65%, -50%) rotate(-45deg);
}

.collapsible-card.is-collapsed .collapse-toggle::before {
    transform: translate(-65%, -50%) rotate(-45deg);
}

.section-collapsible[hidden] {
    display: none;
}

[data-card-collapsible][hidden] {
    display: none;
}

.section-order {
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.section-text {
    min-height: 220px;
    line-height: 1.55;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.section-actions--qc {
    align-items: center;
    justify-content: flex-start;
    column-gap: 12px;
    row-gap: 10px;
}

.section-actions--qc .section-actions-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
}

.section-regeneration-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 12px;
}

.section-regeneration-guidance label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.section-regeneration-guidance label span {
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 850;
}

.section-regeneration-guidance textarea {
    min-height: 58px;
    resize: vertical;
}

.report-builder-notice {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
    z-index: 100000;
    max-width: min(320px, calc(100vw - 36px));
    border: 1px solid rgba(27, 90, 249, 0.38);
    border-radius: 12px;
    padding: 12px 14px;
    color: #ffffff;
    background: #1b5af9;
    box-shadow: 0 18px 50px rgba(7, 17, 31, 0.2);
    font-size: 0.92rem;
    font-weight: 850;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.report-builder-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.report-builder-notice.is-error {
    color: #ffffff;
    border-color: rgba(220, 38, 38, 0.4);
    background: #b42318;
}

.section-actions--qc .section-qc-approval {
    margin: 0;
    margin-left: auto;
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.section-actions--qc .section-qc-approval .approval-status-line {
    flex: 0 1 auto;
}

.section-actions .btn {
    flex: 0 1 auto;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.text-danger {
    color: #b42318;
}

.regenerate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.regenerate-actions .inline-action-form {
    display: inline-flex;
}

.regenerate-actions .btn {
    white-space: nowrap;
}

.speech-rate-control {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding-right: 0;
    padding-left: 0;
}

.speech-rate-value {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 10px;
    color: var(--muted);
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.condition-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: none;
}

[data-condition-rating-badge] {
    cursor: pointer;
}

[data-condition-rating-badge]:focus-visible {
    outline: 3px solid rgba(27, 90, 249, 0.28);
    outline-offset: 3px;
}

.condition-rating-badge.rating-cr3 {
    background: #d92d20;
}

.condition-rating-badge.rating-cr2 {
    background: #f59e0b;
}

.condition-rating-badge.rating-cr1 {
    background: #16a34a;
}

.condition-rating-badge.rating-ni,
.condition-rating-badge.rating-na {
    background: #6b7280;
}

.condition-rating-badge.rating-cr3,
.condition-rating-badge.rating-cr2,
.condition-rating-badge.rating-cr1,
.condition-rating-badge.rating-ni,
.condition-rating-badge.rating-na {
    border-color: transparent;
    color: #ffffff;
    box-shadow: none;
}

.condition-rating-control {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.condition-rating-control > span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
}

.condition-rating-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.condition-rating-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px 7px 7px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
}

.condition-rating-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.condition-rating-option .condition-rating-badge {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 0.72rem;
}

.condition-rating-option strong {
    font-size: 0.86rem;
    white-space: nowrap;
}

.condition-rating-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--soft-blue);
    box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.1);
}

.condition-rating-picker {
    position: fixed;
    z-index: 10000;
    display: grid;
    gap: 6px;
    width: 236px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.condition-rating-picker__option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    padding: 6px 8px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    text-align: left;
}

.condition-rating-picker__option:hover,
.condition-rating-picker__option:focus-visible {
    background: #f1f5f9;
    outline: none;
}

.condition-rating-picker__option .condition-rating-badge {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 0.72rem;
}

.condition-rating-picker__label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.condition-rating-picker__label strong {
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.1;
}

.condition-rating-picker__label small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.1;
}

.add-room-form {
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}

.room-area-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.room-area-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.room-area-pill:hover:not(:disabled),
.room-area-pill:focus-visible:not(:disabled) {
    border-color: #c8d8ec;
    background: var(--soft-blue);
}

.room-area-pill.is-added,
.room-area-pill:disabled {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    opacity: 0.72;
}

.room-area-pill.is-added {
    cursor: pointer;
}

.room-area-pill.is-added::after {
    content: "×";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1;
}

.room-area-pill.is-added:hover,
.room-area-pill.is-added:focus-visible {
    opacity: 1;
    background: #0b1220;
    border-color: #0b1220;
}

.room-area-pill:disabled {
    cursor: default;
}

.room-area-pill.is-recent-highlight {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.18);
}

.room-area-status {
    margin: -6px 0 14px;
}

.room-area-status.is-success {
    color: #166534;
}

.room-area-status.is-error {
    color: #b42318;
}

.add-room-grid {
    align-items: end;
}

@media (max-width: 560px) {
    .add-room-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .add-custom-room-action {
        width: 100%;
        justify-self: stretch;
    }

    .add-custom-room-action .btn {
        width: 100%;
        justify-content: center;
    }
}

.add-custom-room-action {
    align-self: end;
}

.add-room-actions {
    margin-top: 12px;
}

.room-empty-note {
    padding: 14px 0 0;
}

.room-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.room-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    table-layout: fixed;
}

.room-table th,
.room-table td {
    border-top: 1px solid var(--line);
    padding: 14px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.room-table th {
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.room-table th:first-child,
.room-table td:first-child {
    width: 150px;
}

.room-table th:last-child,
.room-table td:last-child {
    width: 350px;
}

.room-text {
    min-height: 150px;
    line-height: 1.5;
}

.room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.save-state {
    min-width: 88px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
}

.save-state.success {
    color: var(--success);
}

.save-state.error {
    color: var(--danger);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.capture-mode-body {
    background: #eef3f8;
}

.capture-mode-body .app-shell {
    min-height: 100vh;
}

.capture-mode-body .app-shell .main-panel {
    min-width: 0;
}

.wizard-form {
    display: grid;
    gap: 22px;
    padding: 22px;
}

.wizard-progress {
    display: grid;
    grid-template-columns: repeat(var(--wizard-progress-count, 5), minmax(0, 1fr));
    gap: 8px;
    margin-bottom: var(--workflow-progress-bottom-gap, 1.5rem);
}

.wizard-progress button,
.wizard-progress a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    color: var(--navy);
    background: #fbfdff;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.wizard-progress button:hover,
.wizard-progress button:focus-visible,
.wizard-progress button.active,
.wizard-progress a:hover,
.wizard-progress a:focus-visible,
.wizard-progress a.active {
    border-color: #c8d8ec;
    background: var(--soft-blue);
    outline: none;
}

.wizard-progress button.complete,
.wizard-progress a.complete {
    border-color: #bbf7d0;
    background: var(--success-soft);
}

.wizard-progress button span,
.wizard-progress a span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: var(--navy);
    font-size: 0.84rem;
    font-weight: 900;
}

.wizard-progress button.complete span,
.wizard-progress a.complete span {
    background: var(--success);
}

.wizard-progress button strong,
.wizard-progress a strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    line-height: 1.15;
}

.wizard-form .wizard-step {
    display: none;
    gap: 18px;
}

.wizard-form .wizard-step.active {
    display: grid;
}

.wizard-survey-type-list {
    display: grid;
    gap: 18px;
}

.wizard-survey-type-group {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-survey-type-group h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--navy);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.wizard-survey-type-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    min-height: 112px;
    padding: 18px;
    background: #fbfdff;
    cursor: pointer;
}

.wizard-survey-type-row input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.wizard-survey-type-row:focus-within {
    outline: 3px solid rgba(27, 90, 249, 0.18);
    outline-offset: 2px;
}

.wizard-survey-type-row:has(input:checked) {
    border-color: #0b1321;
    background: var(--soft-blue);
}

.wizard-survey-type-row span {
    display: grid;
    gap: 3px;
}

.wizard-survey-type-row em {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
}

.new-report-mvp-form {
    gap: 22px;
}

.new-report-template-form {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 1180px;
    min-width: 0;
}

.new-report-template-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.new-report-template-card h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1.06rem;
    font-weight: 900;
}

.new-report-primary-levels,
.new-report-other-type-grid,
.new-report-address-lookup,
.new-report-client-grid {
    display: grid;
    gap: 12px;
}

.new-report-primary-levels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.new-report-level-option {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafcfe;
    color: #3d4861;
    cursor: pointer;
    font-weight: 850;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.new-report-level-option:has(input:checked) {
    border-color: rgba(11, 31, 58, 0.42);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.new-report-level-option input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--navy);
}

.new-report-level-option span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    line-height: 1.25;
    text-overflow: clip;
}

.new-report-level-option--compact {
    min-height: 44px;
    padding: 10px 12px;
}

.new-report-other-types {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 12px;
}

.new-report-other-types summary {
    width: fit-content;
    color: #3d4861;
    cursor: pointer;
    font-weight: 850;
}

.new-report-other-type-grid {
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.new-report-address-lookup {
    grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
}

.new-report-address-lookup[hidden] {
    display: none;
}

.new-report-selected-address {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    padding: 14px;
    background: #fafcfe;
    color: var(--navy);
    font-weight: 850;
}

.new-report-selected-address[hidden] {
    display: none;
}

.new-report-selected-address span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.new-report-address-status {
    min-height: 1.1rem;
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 700;
}

.new-report-client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.new-report-template-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.new-report-mvp-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.new-report-mvp-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.3fr) minmax(260px, 0.95fr);
    gap: 16px;
    align-items: start;
}

.new-report-mvp-panel,
.new-report-summary-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.new-report-mvp-panel h3,
.new-report-summary-card h3,
.wizard-survey-type-group h4 {
    margin: 0;
    color: var(--navy);
    font-weight: 900;
}

.wizard-survey-type-list--compact {
    gap: 12px;
}

.wizard-survey-type-list--compact .wizard-survey-type-group {
    grid-template-columns: 1fr;
}

.wizard-survey-type-list--compact .wizard-survey-type-row {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 10px;
}

.new-report-mvp-lookup-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    color: #52627a;
    font-size: 0.9rem;
}

.new-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.new-report-summary-card--wide {
    grid-column: 1 / -1;
}

.new-report-summary-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.new-report-summary-card dl div {
    display: grid;
    grid-template-columns: minmax(130px, 0.6fr) minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding-bottom: 10px;
}

.new-report-summary-card dt {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.new-report-summary-card dd {
    margin: 0;
    color: #1f2a44;
    font-weight: 750;
}

.new-report-summary-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.1rem;
    color: #52627a;
}

@media (max-width: 1180px) {
    .new-report-mvp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .new-report-mvp-panel:nth-child(2) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .new-report-primary-levels,
    .new-report-other-type-grid,
    .new-report-address-lookup,
    .new-report-client-grid {
        grid-template-columns: 1fr;
    }

    .new-report-template-card {
        padding: 14px;
    }

    .new-report-level-option {
        align-items: center;
        gap: 9px;
        min-height: 48px;
        padding: 11px 12px;
        font-size: 0.92rem;
    }

    .new-report-level-option input[type="radio"] {
        align-self: center;
    }

    .new-report-level-option span {
        align-self: center;
    }

    .new-report-template-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .new-report-mvp-grid,
    .new-report-summary-grid {
        grid-template-columns: 1fr;
    }

    .new-report-mvp-panel:nth-child(2),
    .new-report-summary-card--wide {
        grid-column: auto;
    }

    .new-report-summary-card dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.wizard-step-head {
    display: grid;
    gap: 4px;
}

.wizard-step-head h2 {
    margin-bottom: 0;
    font-size: 1.45rem;
}

.wizard-actions,
.wizard-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.wizard-actions {
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.wizard-toolbar {
    justify-content: flex-start;
}

.setup-sprift-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
}

.setup-sprift-panel[hidden],
.setup-sprift-panel .wizard-toolbar[hidden] {
    display: none !important;
}

.setup-sprift-panel .section-head {
    margin-bottom: 0;
}

.sprift-data-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.sprift-data-toolbar h3 {
    margin: 0 0 4px;
    color: var(--navy);
}

.sprift-data-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.sprift-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 14px 14px;
}

.sprift-image-preview {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.sprift-image-preview[hidden] {
    display: none !important;
}

.pre-survey-setup-card {
    margin-bottom: 18px;
}

.document-master-dropzone {
    display: grid;
    gap: 6px;
    border: 2px dashed #c8d8ec;
    border-radius: 12px;
    padding: 28px;
    color: var(--navy);
    background: #f8fbff;
    text-align: center;
    cursor: pointer;
}

.document-master-dropzone span {
    font-size: 1.05rem;
    font-weight: 900;
}

.document-master-dropzone em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.document-master-dropzone input {
    margin: 12px auto 0;
}

.report-site-media-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(7, 20, 33, 0.03);
    font-size: 14px;
}

.report-site-media-metrics > div {
    display: grid;
    gap: 2px;
    min-width: 90px;
}

.report-site-media-metrics strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
}

.report-site-media-metrics span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-site-media-metrics-links {
    flex: 1 1 auto;
    text-align: right;
    min-width: 0;
}

.report-site-media-metrics-links a {
    font-weight: 700;
}

.site-media-processing-banner {
    font-weight: 600;
}

.site-media-processing-banner__row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.site-media-processing-banner__pulse {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 0.35em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    animation: site-media-processing-pulse 1.2s ease-in-out infinite;
}

@keyframes site-media-processing-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.site-media-processing-banner__text {
    margin: 0;
    flex: 1;
    font-weight: 700;
}

.site-media-processing-banner__meta {
    margin: 0.4rem 0 0;
    padding-left: calc(10px + 0.65rem);
    font-weight: 500;
    opacity: 0.88;
}

.report-site-media-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-site-media-primary {
    flex: 0 0 auto;
}

.report-site-media-secondary {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-site-media-page-header.workflow-page-header {
    margin-bottom: 0;
}

.report-site-media-page-title {
    display: inline-flex;
    align-items: center;
    gap: clamp(18px, 4vw, 34px);
}

.report-site-media-page-title img {
    width: clamp(34px, 8vw, 54px);
    height: auto;
    object-fit: contain;
}

.report-site-media-page-header h1 {
    margin-bottom: 0.2rem;
}

.report-site-media-page-lede {
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.38;
}

.report-site-media-unified-head.section-head {
    margin-bottom: 10px;
}

.report-site-media-unified-head .form-note {
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 0;
}

.report-site-media-upload-guard {
    margin-bottom: 0;
}

.report-site-media-footnote {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.report-site-media-admin-card .section-head {
    margin-bottom: 10px;
}

/* Upload site media: match survey-workflow card padding; flex stack uses gap not card margins */
.report-site-media-page.survey-workflow-surface .report-site-media-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.report-site-media-page.survey-workflow-surface .report-site-media-main > .card,
.report-site-media-page.survey-workflow-surface .report-site-media-main > section.card {
    margin-bottom: 0;
    padding: clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.report-site-media-page.survey-workflow-surface .report-site-media-main > .alert {
    margin-bottom: 0;
}

.report-site-media-page .report-site-media-diag-head,
.internal-analytics-page .report-site-media-diag-head {
    margin-bottom: 14px;
    gap: 12px 18px;
    flex-wrap: wrap;
}

.report-site-media-page .report-site-media-diag-head > div:first-child,
.internal-analytics-page .report-site-media-diag-head > div:first-child {
    flex: 1 1 220px;
    min-width: 0;
}

.report-site-media-page .report-site-media-diag-head .form-note,
.internal-analytics-page .report-site-media-diag-head .form-note {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.report-site-media-page .report-site-media-diag-actions,
.internal-analytics-page .report-site-media-diag-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    margin-left: 0;
}

@media (min-width: 768px) {
    .report-site-media-page .report-site-media-diag-actions,
    .internal-analytics-page .report-site-media-diag-actions {
        flex: 0 1 auto;
        margin-left: auto;
        justify-content: flex-end;
    }
}

.report-site-media-page .report-site-media-diag-status,
.internal-analytics-page .report-site-media-diag-status {
    margin: 0 0 12px;
}

.report-site-media-page .report-site-media-diag-empty,
.internal-analytics-page .report-site-media-diag-empty {
    margin: 0;
}

.report-site-media-page .report-site-media-admin-table-wrap,
.internal-analytics-page .report-site-media-admin-table-wrap {
    margin-top: 2px;
}

.report-site-media-page .report-site-media-unified-card .form-actions {
    margin-top: 16px;
    margin-bottom: 0;
}

.report-site-media-page .report-site-media-workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-panel) 88%, var(--theme-surface));
}

.report-site-media-page .report-site-media-workflow legend {
    padding: 0 6px;
    color: var(--theme-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-site-media-page .report-site-media-workflow .transcript-toggle-row {
    margin: 0;
}

.report-site-media-page .report-site-media-auto-warning {
    flex: 1 1 100%;
    color: var(--theme-warning-text, var(--theme-text));
}

.report-site-media-page .report-site-media-unified-card > .form-note[role="note"] {
    margin-top: 14px;
    margin-bottom: 0;
}

.report-site-media-page .report-site-media-upload-queue {
    margin-top: 0;
}

.report-site-media-page .transcription-debug-action-form {
    margin: 0;
    display: inline-flex;
}

.report-site-media-admin-table-wrap {
    overflow: auto;
    max-height: min(320px, 40vh);
}

.report-site-media-data-table-compact th,
.report-site-media-data-table-compact td {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.25;
}

.report-site-media-unified-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: clamp(280px, 42vh, 420px);
    padding: 36px 24px;
    border: 2px dashed rgba(100, 116, 139, 0.45);
    border-radius: 14px;
    background: radial-gradient(circle at center, rgba(27, 90, 249, 0.06), transparent 40%), rgba(248, 250, 252, 0.85);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    overscroll-behavior: contain;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.report-site-media-unified-zone.is-dragging,
.report-site-media-unified-zone:focus-within {
    border-color: rgba(27, 90, 249, 0.72);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.report-site-media-unified-strong {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 850;
    color: var(--navy);
}

.report-site-media-unified-hint {
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--muted);
    max-width: 52rem;
    line-height: 1.45;
}

.report-site-media-unified-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.report-site-media-selection {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.84);
}

.report-site-media-selection[hidden] {
    display: none !important;
}

.report-site-media-selection__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.report-site-media-selection__summary > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #fff;
}

.report-site-media-selection__summary strong {
    display: block;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.1;
}

.report-site-media-selection__summary span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-site-media-selection__status {
    margin: 0;
}

.report-site-media-selection__preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    contain: content;
}

.report-site-media-preview-item,
.report-site-media-preview-more {
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #fff;
}

.report-site-media-preview-item img,
.report-site-media-preview-icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
}

.report-site-media-preview-item img {
    object-fit: cover;
}

.report-site-media-preview-icon {
    display: grid;
    place-items: center;
    color: var(--navy);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-site-media-preview-item span:not(.report-site-media-preview-icon) {
    min-width: 0;
    overflow: hidden;
    color: var(--navy);
    font-size: 0.86rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-site-media-preview-item small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.report-site-media-preview-more {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    font-weight: 900;
}

.report-site-media-selection-actions[hidden] {
    display: none !important;
}

.report-site-media-page .report-site-media-selection-actions .btn,
.report-site-media-page .report-site-media-unified-zone {
    touch-action: manipulation;
}

.report-site-media-device-tip {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.4;
}

.report-site-media-unified-card {
    position: relative;
}

#report-site-media-upload-queue,
.report-site-media-upload-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding:
        max(20px, env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(20px, env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px));
    margin: 0 !important;
    pointer-events: auto;
}

#report-site-media-upload-queue[hidden],
.report-site-media-upload-overlay[hidden] {
    display: none !important;
}

.report-site-media-upload-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.36);
    backdrop-filter: blur(6px) saturate(116%);
}

.report-site-media-upload-progress-panel {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: clamp(14px, 2.6vw, 24px);
    width: min(600px, calc(100vw - 48px));
    max-height: calc(100dvh - max(40px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 40px));
    overflow: auto;
    padding: clamp(26px, 4.4vw, 52px) clamp(22px, 4.8vw, 48px);
    border: 1px solid rgba(27, 90, 249, 0.14);
    border-radius: clamp(24px, 5vw, 38px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    text-align: center;
    backdrop-filter: blur(22px);
}

.report-site-media-upload-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--navy);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.report-site-media-upload-close[hidden] {
    display: none !important;
}

.report-site-media-upload-close:hover,
.report-site-media-upload-close:focus-visible {
    border-color: rgba(27, 90, 249, 0.28);
    outline: none;
    box-shadow: 0 0 0 4px rgba(27, 90, 249, 0.12), 0 8px 22px rgba(15, 23, 42, 0.12);
}

.report-site-media-upload-progress-ring {
    --upload-progress: 0deg;
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(220px, min(45vw, 42dvh), 320px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        conic-gradient(#1b5af9 var(--upload-progress), rgba(15, 23, 42, 0.08) 0),
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(239, 246, 255, 0.9));
    color: var(--navy);
    box-shadow: 0 24px 60px rgba(27, 90, 249, 0.18), 0 0 72px rgba(27, 90, 249, 0.14), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    transition: background 180ms ease-out;
}

.report-site-media-upload-progress-ring::before {
    content: "";
    position: absolute;
    inset: clamp(10px, 2.2vw, 14px);
    border-radius: inherit;
    z-index: 1;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.report-site-media-upload-halo {
    position: absolute;
    inset: clamp(-18px, -2.6vw, -10px);
    border-radius: 50%;
    border: 1px solid rgba(27, 90, 249, 0.16);
    background:
        radial-gradient(circle, rgba(27, 90, 249, 0.14), transparent 64%),
        radial-gradient(circle, rgba(27, 90, 249, 0.08), transparent 76%);
    filter: blur(0.2px);
}

.report-site-media-upload-halo::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    border: 1px solid rgba(27, 90, 249, 0.12);
}

.report-site-media-upload-progress-ring__inner {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    justify-items: center;
    width: 64%;
    min-height: 64%;
}

.upload-logo-stage {
    position: relative;
    display: flex;
    min-height: clamp(124px, min(26vw, 24dvh), 190px);
    align-items: center;
    justify-content: center;
    transform: none;
}

.upload-logo-symbol-pulse {
    transform-origin: center center;
    animation: site-media-upload-symbol-pulse 3.8s ease-in-out infinite;
}

.report-site-media-upload-logo {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(27, 90, 249, 0.12));
}

.report-site-media-upload-logo--responsive {
    width: clamp(56px, min(16vw, 15dvh), 98px);
    height: auto;
}

.upload-logo-tagline {
    position: absolute;
    top: calc(50% + clamp(44px, min(11vw, 10dvh), 74px));
    left: 50%;
    transform: translateX(-50%);
    color: #1b5af9;
    font-size: clamp(9px, min(2vw, 1.8dvh), 17px);
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    opacity: 0;
    text-transform: uppercase;
    white-space: nowrap;
    animation: taglineReveal 300ms ease both;
    animation-delay: 1s;
}

.report-site-media-upload-progress-ring strong {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    letter-spacing: 0;
}

.report-site-media-upload-dots {
    display: inline-flex;
    gap: 5px;
    min-height: 8px;
}

.report-site-media-upload-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1b5af9;
    opacity: 0.32;
}

.report-site-media-upload-progress-copy {
    display: grid;
    gap: 0;
    max-width: 34rem;
}

.report-site-media-upload-status-badge {
    justify-self: center;
    padding: 8px 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(219, 226, 255, 0.92), rgba(203, 214, 255, 0.82));
    color: #1b5af9;
    font-size: clamp(0.82rem, min(2.4vw, 2dvh), 1.08rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 14px 26px rgba(27, 90, 249, 0.1);
}

.report-site-media-upload-phase {
    justify-self: center;
    padding: 9px 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(219, 226, 255, 0.92), rgba(203, 214, 255, 0.82));
    color: #1b5af9;
    font-size: clamp(0.86rem, 2.8vw, 1.15rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 14px 26px rgba(27, 90, 249, 0.1);
}

.report-site-media-upload-progress-copy h3 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(20px, 2.2vw, 28px);
}

.report-site-media-upload-progress-copy p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.report-site-media-upload-count {
    color: var(--navy) !important;
    font-size: 0.92rem;
}

.report-site-media-upload-progress-track {
    width: min(100%, 420px);
    height: clamp(8px, 1.5vw, 11px);
    border: 1px solid rgba(27, 90, 249, 0.12);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 30px rgba(27, 90, 249, 0.1);
    overflow: hidden;
}

.report-site-media-upload-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1b5af9, #1648d4);
    transition: width 160ms ease-out;
}

.report-site-media-upload-secure-note {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    color: #64748b;
    font-size: clamp(0.92rem, 2.7vw, 1.08rem);
    font-weight: 800;
}

.report-site-media-upload-secure-note svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(27, 90, 249, 0.12);
    color: #1b5af9;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.report-site-media-upload-overlay[data-upload-outcome="success"] .report-site-media-upload-phase,
.report-site-media-upload-overlay[data-upload-outcome="success"] .report-site-media-upload-status-badge,
.survai-activity-overlay[data-activity-state="success"] .report-site-media-upload-status-badge {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.report-site-media-upload-overlay[data-upload-outcome="success"] .report-site-media-upload-progress-ring,
.survai-activity-overlay[data-activity-state="success"] .report-site-media-upload-progress-ring {
    background:
        conic-gradient(#16a34a var(--upload-progress), rgba(15, 23, 42, 0.08) 0),
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.92));
}

.report-site-media-upload-overlay[data-upload-outcome="success"] .report-site-media-upload-progress-track span,
.survai-activity-overlay[data-activity-state="success"] .report-site-media-upload-progress-track span,
.report-site-media-upload-overlay[data-upload-outcome="success"] .report-site-media-upload-dots i {
    border-color: rgba(22, 163, 74, 0.18);
    background: linear-gradient(90deg, #16a34a, #15803d);
    color: #15803d;
}

.report-site-media-upload-overlay[data-upload-outcome="error"] .report-site-media-upload-phase,
.report-site-media-upload-overlay[data-upload-outcome="error"] .report-site-media-upload-status-badge,
.survai-activity-overlay[data-activity-state="error"] .report-site-media-upload-status-badge {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

.report-site-media-upload-overlay[data-upload-outcome="error"] .report-site-media-upload-progress-ring,
.survai-activity-overlay[data-activity-state="error"] .report-site-media-upload-progress-ring {
    background:
        conic-gradient(#dc2626 var(--upload-progress), rgba(15, 23, 42, 0.08) 0),
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(254, 242, 242, 0.94));
}

.report-site-media-upload-overlay[data-upload-outcome="error"] .report-site-media-upload-progress-track span,
.survai-activity-overlay[data-activity-state="error"] .report-site-media-upload-progress-track span,
.report-site-media-upload-overlay[data-upload-outcome="error"] .report-site-media-upload-dots i {
    border-color: rgba(220, 38, 38, 0.18);
    background: linear-gradient(90deg, #dc2626, #b91c1c);
    color: #b91c1c;
}

@keyframes site-media-upload-halo-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@keyframes site-media-upload-symbol-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes taglineReveal {
    from {
        opacity: 0;
        transform: translateX(-50%);
    }

    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

@keyframes site-media-upload-dot-pulse {
    0%,
    80%,
    100% {
        opacity: 0.28;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.report-site-media-upload-row {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    padding: 6px 10px;
    background: rgba(248, 250, 252, 0.92);
}

.report-site-media-upload-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.25;
}

.report-site-media-upload-name {
    font-weight: 650;
    color: var(--navy);
    overflow-wrap: anywhere;
    text-align: left;
    min-width: 0;
}

.report-site-media-upload-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 650;
    color: var(--muted);
}

.report-site-media-upload-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.report-site-media-upload-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1b5af9, #1648d4);
    transition: width 120ms ease-out;
}

.report-site-media-upload-bar-fill.is-error {
    background: #dc2626;
}

.report-site-media-upload-summary {
    margin-top: 0;
}

body.theme-dark .report-site-media-upload-row,
body[data-theme="dark"] .report-site-media-upload-row {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 31, 49, 0.55);
}

body.theme-dark .report-site-media-upload-name,
body[data-theme="dark"] .report-site-media-upload-name {
    color: #f1f5f9;
}

body.theme-dark .report-site-media-upload-track,
body[data-theme="dark"] .report-site-media-upload-track {
    background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .report-site-media-upload-progress-panel,
body[data-theme="dark"] .report-site-media-upload-progress-panel {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 31, 49, 0.55);
}

body.theme-dark .report-site-media-upload-close,
body[data-theme="dark"] .report-site-media-upload-close {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 31, 49, 0.82);
    color: #f1f5f9;
}

body.theme-dark .report-site-media-upload-progress-ring::before,
body[data-theme="dark"] .report-site-media-upload-progress-ring::before {
    background: #0f1f31;
}

body.theme-dark .report-site-media-upload-progress-copy h3,
body[data-theme="dark"] .report-site-media-upload-progress-copy h3,
body.theme-dark .report-site-media-upload-progress-ring,
body[data-theme="dark"] .report-site-media-upload-progress-ring {
    color: #f1f5f9;
}

body.theme-dark .report-site-media-upload-progress-track,
body[data-theme="dark"] .report-site-media-upload-progress-track {
    border-color: rgba(96, 165, 250, 0.2);
    background: rgba(15, 31, 49, 0.78);
}

body.theme-dark .report-site-media-upload-secure-note,
body[data-theme="dark"] .report-site-media-upload-secure-note {
    color: #cbd5e1;
}

body.theme-dark .report-site-media-metrics,
body[data-theme="dark"] .report-site-media-metrics {
    background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .report-site-media-metrics strong,
body[data-theme="dark"] .report-site-media-metrics strong {
    color: #f1f5f9;
}

body.theme-dark .report-site-media-unified-zone,
body[data-theme="dark"] .report-site-media-unified-zone {
    background: radial-gradient(circle at center, rgba(27, 90, 249, 0.06), transparent 40%), rgba(15, 31, 49, 0.55);
    border-color: rgba(148, 163, 184, 0.35);
}

body.theme-dark .report-site-media-unified-strong,
body[data-theme="dark"] .report-site-media-unified-strong {
    color: #f1f5f9;
}

body.theme-dark .report-site-media-unified-hint,
body[data-theme="dark"] .report-site-media-unified-hint {
    color: var(--muted);
}

body.theme-dark .report-site-media-selection,
body[data-theme="dark"] .report-site-media-selection {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 31, 49, 0.55);
}

body.theme-dark .report-site-media-selection__summary > div,
body[data-theme="dark"] .report-site-media-selection__summary > div,
body.theme-dark .report-site-media-preview-item,
body[data-theme="dark"] .report-site-media-preview-item,
body.theme-dark .report-site-media-preview-more,
body[data-theme="dark"] .report-site-media-preview-more {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .report-site-media-selection__summary strong,
body[data-theme="dark"] .report-site-media-selection__summary strong,
body.theme-dark .report-site-media-preview-item span:not(.report-site-media-preview-icon),
body[data-theme="dark"] .report-site-media-preview-item span:not(.report-site-media-preview-icon),
body.theme-dark .report-site-media-preview-more,
body[data-theme="dark"] .report-site-media-preview-more {
    color: #f1f5f9;
}

@media (min-width: 721px) and (max-width: 1024px) {
    .report-site-media-upload-progress-panel {
        width: min(520px, calc(100vw - 56px));
        gap: 18px;
        padding: 34px 32px;
    }

    .report-site-media-upload-progress-ring {
        width: clamp(220px, min(42vw, 34dvh), 260px);
    }

    .report-site-media-upload-logo--responsive {
        width: clamp(64px, min(13vw, 12dvh), 82px);
    }

    .upload-logo-tagline {
        font-size: clamp(10px, 1.6vw, 14px);
    }
}

@media (max-width: 720px) {
    .report-site-media-unified-zone {
        min-height: min(360px, 46vh);
        padding: 30px 18px;
    }

    .report-site-media-selection__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-site-media-selection__preview {
        grid-template-columns: 1fr;
    }

    .report-site-media-upload-progress-panel {
        width: min(420px, calc(100vw - 32px));
        max-height: calc(100dvh - max(32px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 32px));
        gap: 12px;
        padding: clamp(18px, 4.8vw, 28px) clamp(14px, 4.2vw, 20px);
        border-radius: 22px;
    }

    .report-site-media-upload-progress-ring {
        width: clamp(160px, min(54vw, 30dvh), 220px);
    }

    .report-site-media-upload-progress-ring::before {
        inset: 9px;
    }

    .report-site-media-upload-halo {
        inset: -10px;
    }

    .upload-logo-stage {
        min-height: clamp(112px, min(40vw, 24dvh), 148px);
    }

    .report-site-media-upload-logo--responsive {
        width: clamp(50px, min(16vw, 12dvh), 70px);
    }

    .upload-logo-tagline {
        top: calc(50% + clamp(38px, min(12vw, 8.8dvh), 52px));
        font-size: clamp(8px, 2.25vw, 11px);
    }

    .report-site-media-upload-status-badge {
        padding: 7px 18px;
        font-size: 0.78rem;
    }

    .report-site-media-upload-progress-track {
        width: min(82vw, 310px);
        height: 8px;
    }

    .report-site-media-upload-secure-note {
        align-items: center;
        max-width: 100%;
        text-align: left;
    }

    .report-site-media-page .report-site-media-selection-actions {
        position: sticky;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 8px;
        margin: 14px -6px 0;
        padding: 8px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(14px);
    }

    .report-site-media-page .report-site-media-selection-actions .report-site-media-device-tip {
        grid-column: 1 / -1;
        text-align: center;
    }

    body.theme-dark.report-site-media-page .report-site-media-selection-actions,
    body[data-theme="dark"].report-site-media-page .report-site-media-selection-actions {
        border-color: rgba(148, 163, 184, 0.22);
        background: rgba(15, 31, 49, 0.88);
    }
}

@media (max-height: 640px) {
    .report-site-media-upload-progress-panel {
        gap: 10px;
        padding-block: 16px;
    }

    .report-site-media-upload-progress-ring {
        width: clamp(140px, 28dvh, 190px);
    }

    .upload-logo-stage {
        min-height: clamp(96px, 21dvh, 128px);
    }

    .report-site-media-upload-logo--responsive {
        width: clamp(44px, 11dvh, 62px);
    }

    .upload-logo-tagline {
        top: calc(50% + clamp(32px, 8dvh, 46px));
        font-size: 8px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .report-site-media-upload-halo,
    .report-site-media-upload-halo::after,
    .report-site-media-upload-dots i,
    .upload-logo-symbol-pulse,
    .upload-logo-tagline {
        animation: none !important;
    }

    .upload-logo-tagline {
        opacity: 1;
        transform: translateX(-50%);
    }

    .report-site-media-upload-progress-ring {
        transition: none !important;
    }
}

.documents-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.document-category-card {
    min-width: 0;
}

.wizard-disclosure {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    background: #fbfdff;
}

.wizard-disclosure summary {
    padding: 13px 14px;
    color: var(--navy);
    cursor: pointer;
    font-weight: 900;
}

.wizard-disclosure > *:not(summary) {
    margin: 0 14px 14px;
}

.wizard-disclosure.has-validation-error {
    border-color: #fecaca;
    background: #fff7f7;
}

.wizard-error {
    color: var(--danger);
    font-weight: 900;
}

.section-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

.section-toggle .pill-label {
    min-height: 42px;
    justify-content: flex-start;
    text-align: left;
}

.input-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.input-mode-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 154px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    color: var(--navy);
    background: #fbfdff;
    cursor: pointer;
    text-align: left;
}

.input-mode-card.primary {
    border-color: var(--accent);
    color: #ffffff;
    background: var(--accent);
}

.input-mode-card:hover,
.input-mode-card:focus-visible {
    border-color: #c8d8ec;
    box-shadow: 0 12px 28px rgba(11, 18, 32, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.input-mode-card strong {
    font-size: 1.1rem;
}

.input-mode-card span {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.input-mode-card.primary span {
    color: rgba(255, 255, 255, 0.88);
}

.wizard-entry-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px;
}

.wizard-entry-card h2 {
    margin-bottom: 4px;
}

.wizard-entry-steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.wizard-entry-steps span {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    color: var(--navy);
    background: #fbfdff;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
}

.capture-shell {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 14px 14px 96px;
}

.capture-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: -14px -14px 14px;
    padding: 14px;
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 12px 30px rgba(11, 18, 32, 0.18);
}

.capture-topbar h1 {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: clamp(1.15rem, 5vw, 1.8rem);
}

.capture-topbar .eyebrow,
.capture-topbar span {
    color: rgba(255, 255, 255, 0.74);
}

.capture-status-stack {
    display: grid;
    gap: 7px;
    justify-items: end;
    min-width: 130px;
}

.capture-network-status,
.capture-sync-status {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: right;
}

.capture-network-status.offline {
    color: #7c2d12;
    background: #ffedd5;
}

.capture-tabs {
    position: sticky;
    top: 86px;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
}

.capture-tabs button {
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    font-weight: 900;
}

.capture-tabs button.active {
    color: #ffffff;
    background: var(--navy);
}

.capture-panel {
    display: none;
}

.capture-panel.active {
    display: block;
}

.live-capture-panel.active {
    display: block;
}

.live-capture-stage {
    position: relative;
    min-height: calc(100vh - 160px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--navy);
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(11, 18, 32, 0.22);
}

.live-camera-preview {
    display: block;
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 640px;
    object-fit: cover;
    background: var(--navy);
}

.live-camera-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.6), rgba(11, 18, 32, 0.92));
    text-align: center;
}

.live-camera-placeholder[hidden] {
    display: none;
}

.live-camera-placeholder h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 7vw, 2.8rem);
}

.live-camera-placeholder p {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
}

.live-capture-top-controls {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
    gap: 8px;
}

.live-capture-top-controls label {
    display: grid;
    gap: 4px;
    margin: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.live-capture-top-controls span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.live-capture-top-controls select {
    min-height: 24px;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 900;
}

.live-capture-hud {
    position: absolute;
    top: 92px;
    left: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.live-hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-weight: 900;
    backdrop-filter: blur(14px);
}

.live-hud-pill strong {
    color: #ffffff;
    font-size: 1.15rem;
}

.live-capture-main-actions {
    position: absolute;
    right: 18px;
    bottom: 210px;
    left: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.live-photo-button {
    display: inline-grid;
    width: 126px;
    height: 126px;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    color: var(--navy);
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 950;
    text-transform: uppercase;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}

.live-photo-button:disabled {
    opacity: 0.45;
}

.live-capture-bottom-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: grid;
    gap: 12px;
    border-radius: 18px 18px 0 0;
    padding: 18px;
    background: rgba(12, 18, 30, 0.92);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
}

.live-capture-bottom-sheet .capture-summary-grid div {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.live-capture-bottom-sheet .capture-summary-grid span,
.live-capture-bottom-sheet .capture-summary-grid strong,
.live-capture-bottom-sheet .form-note {
    color: #ffffff;
}

.live-photo-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.live-photo-strip figure {
    position: relative;
    flex: 0 0 92px;
    width: 92px;
    height: 78px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
}

.live-photo-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-photo-strip figcaption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 999px;
    padding: 2px 6px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.66);
    font-size: 0.72rem;
    font-weight: 900;
}

.live-session-icon {
    display: grid;
    width: 100%;
    min-height: 74px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #b42318, #ff2f87);
    font-weight: 950;
}

.capture-desktop-handoff {
    display: grid;
    gap: 18px;
    max-width: 680px;
    margin: 22px auto;
    padding: 24px;
}

.capture-desktop-handoff input[readonly] {
    background: #f8fbff;
}

.pwa-install-card {
    display: grid;
    gap: 8px;
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbff;
}

.pwa-install-card strong {
    color: var(--navy);
}

.pwa-install-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.is-pwa-standalone .pwa-install-card,
.is-pwa-standalone .capture-install-hint,
.is-pwa-standalone [data-pwa-install-button],
.is-pwa-install-suppressed .pwa-install-card,
.is-pwa-install-suppressed [data-pwa-install-button] {
    display: none !important;
}

.pwa-install-modal[hidden] {
    display: none;
}

.pwa-install-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.pwa-install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 40, 0.68);
}

.pwa-install-dialog {
    position: relative;
    width: min(92vw, 420px);
    max-height: min(78vh, 620px);
    overflow: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(7, 21, 40, 0.28);
    padding: 24px;
    color: var(--navy);
}

.pwa-install-dialog h2 {
    margin: 0 0 10px;
}

.pwa-install-dialog p {
    margin: 0 0 14px;
    color: var(--muted);
    font-weight: 800;
}

.pwa-install-dialog ol {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--navy);
    font-weight: 900;
}

.pwa-install-dialog li + li {
    margin-top: 8px;
}

.pwa-install-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #eef4fb;
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

.capture-screen {
    display: none;
}

@media (min-width: 921px) {
    .live-capture-panel .capture-screen {
        display: none;
    }
}

@media (max-width: 920px) {
    .capture-mode-body {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #eef3f8;
    }

    .capture-mode-body .capture-topbar,
    .capture-mode-body .workflow-nav,
    .capture-mode-body .capture-tabs,
    .capture-desktop-handoff {
        display: none;
    }

    .capture-shell {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .capture-panel.active.live-capture-panel {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        height: auto;
    }

    .capture-screen {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        color: #ffffff;
        background: #000000;
        font-family: Arial, Helvetica, sans-serif;
    }

    .capture-header {
        z-index: 12;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 8px;
        min-height: calc(54px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
        color: #111827;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(14px);
    }

    .capture-header h2 {
        margin: 0;
        overflow: hidden;
        color: #111827;
        font-size: 1.04rem;
        line-height: 1.2;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .capture-back-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        color: #0a7cff;
        font-weight: 800;
    }

    .capture-back-button span {
        width: 13px;
        height: 13px;
        border-bottom: 3px solid currentColor;
        border-left: 3px solid currentColor;
        transform: rotate(45deg);
    }

    button.capture-finish-button {
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        text-align: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .capture-more-button,
    .capture-filter-button {
        display: inline-grid;
        min-width: 44px;
        min-height: 44px;
        place-items: center;
        border: 0;
        border-radius: 999px;
        color: #0a7cff;
        background: rgba(255, 255, 255, 0.88);
    }

    .capture-more-button {
        border: 2px solid #0a7cff;
        background: transparent;
    }

    .capture-more-button span,
    .capture-filter-button span {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: currentColor;
    }

    .capture-more-button,
    .capture-filter-button {
        grid-auto-flow: column;
        gap: 3px;
    }

    .capture-tag-bar {
        z-index: 11;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.92fr) 48px;
        gap: 8px;
        min-height: 64px;
        padding: 9px 12px;
        background: rgba(246, 247, 250, 0.94);
        backdrop-filter: blur(14px);
    }

    .capture-tag-pill {
        position: relative;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) 11px;
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        padding: 0 12px;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .capture-tag-pill select {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        border: 0;
        padding: 0;
        overflow: hidden;
        color: #111827;
        background: transparent;
        font-size: 0.95rem;
        font-weight: 800;
        text-overflow: ellipsis;
        appearance: none;
    }

    .capture-pill-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #0a7cff;
    }

    .capture-pill-room::before,
    .capture-pill-element::before,
    .capture-pill-defect::before {
        position: absolute;
        inset: 3px;
        content: "";
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .capture-pill-element::before {
        border-radius: 2px;
        transform: rotate(45deg);
    }

    .capture-pill-defect::before {
        border-radius: 999px;
        background: #ff9f0a;
        border-color: #ff9f0a;
    }

    .capture-pill-chevron {
        width: 9px;
        height: 9px;
        border-right: 2px solid #6b7280;
        border-bottom: 2px solid #6b7280;
        transform: rotate(45deg) translateY(-2px);
    }

    .capture-filter-button {
        color: #111827;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .capture-preview {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        background: #0b0f16;
    }

    .capture-preview-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        background: #0b0f16;
    }

    .capture-preview-shade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.38)),
            linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.18));
    }

    .capture-overlay {
        position: absolute;
        z-index: 3;
    }

    .capture-overlay-top {
        top: 28px;
        left: 14px;
        right: 14px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        gap: 10px;
        pointer-events: none;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count,
    .capture-zoom-control,
    .capture-floating-action {
        border-radius: 20px;
        color: #ffffff;
        background: rgba(20, 20, 20, 0.68);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(14px);
    }

    .capture-recording-badge,
    .capture-photo-count {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        padding: 10px 12px;
        justify-self: start;
        text-transform: uppercase;
    }

    .capture-photo-count {
        justify-self: end;
    }

    .capture-recording-badge strong,
    .capture-photo-count strong {
        display: block;
        color: #ffffff;
        font-size: 0.95rem;
        line-height: 1.05;
    }

    .capture-recording-badge span:not(.recording-dot),
    .capture-photo-count span {
        display: block;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 800;
        line-height: 1.1;
        text-transform: none;
    }

    .capture-recording-badge em {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.68rem;
        font-style: normal;
        font-weight: 800;
        line-height: 1.1;
        text-transform: none;
    }

    .capture-audio-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 126px;
        min-height: 58px;
        justify-content: center;
        padding: 10px 14px;
    }

    .capture-mic-icon {
        position: relative;
        width: 16px;
        height: 24px;
        border: 3px solid #ffffff;
        border-radius: 999px;
    }

    .capture-mic-icon::after {
        position: absolute;
        left: 50%;
        bottom: -9px;
        width: 16px;
        height: 8px;
        content: "";
        border-bottom: 3px solid #ffffff;
        border-left: 3px solid #ffffff;
        transform: translateX(-50%);
    }

    .capture-wave {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 26px;
    }

    .capture-wave i {
        display: block;
        width: 4px;
        height: 9px;
        border-radius: 999px;
        background: #ff7b7b;
        animation: capture-wave 980ms ease-in-out infinite;
    }

    .capture-wave i:nth-child(2) { animation-delay: 90ms; }
    .capture-wave i:nth-child(3) { animation-delay: 180ms; }
    .capture-wave i:nth-child(4) { animation-delay: 270ms; }
    .capture-wave i:nth-child(5) { animation-delay: 360ms; }
    .capture-wave i:nth-child(6) { animation-delay: 450ms; }

    @keyframes capture-wave {
        0%, 100% { height: 8px; opacity: 0.45; }
        50% { height: 25px; opacity: 1; }
    }

    .capture-image-icon {
        position: relative;
        width: 22px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 4px;
    }

    .capture-image-icon::before {
        position: absolute;
        right: 3px;
        top: 3px;
        width: 4px;
        height: 4px;
        content: "";
        border-radius: 999px;
        background: #ffffff;
    }

    .capture-image-icon::after {
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 12px;
        height: 8px;
        content: "";
        background: linear-gradient(135deg, transparent 48%, #ffffff 50%);
    }

    .capture-zoom-control {
        position: absolute;
        right: 12px;
        top: 43%;
        z-index: 4;
        display: grid;
        gap: 2px;
        padding: 8px;
        transform: translateY(-50%);
    }

    .capture-zoom-control button {
        min-width: 44px;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        background: transparent;
        font-weight: 900;
    }

    .capture-zoom-control button.active {
        color: #ffd60a;
        background: rgba(0, 0, 0, 0.24);
    }

    .capture-floating-action {
        position: absolute;
        z-index: 4;
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border: 0;
    }

    .capture-floating-action.active {
        color: #ffd60a;
    }

    .capture-flash-button {
        left: 18px;
        bottom: 255px;
    }

    .capture-flip-button {
        right: 22px;
        bottom: 255px;
    }

    .capture-flash-button span,
    .capture-flip-button span {
        position: relative;
        width: 22px;
        height: 22px;
    }

    .capture-flash-button span::before {
        position: absolute;
        inset: 0;
        content: "";
        clip-path: polygon(44% 0, 82% 0, 60% 38%, 82% 38%, 30% 100%, 42% 54%, 18% 54%);
        background: currentColor;
    }

    .capture-flip-button span::before,
    .capture-flip-button span::after {
        position: absolute;
        content: "";
        border: 3px solid currentColor;
        border-radius: 999px;
    }

    .capture-flip-button span::before {
        inset: 2px;
        border-left-color: transparent;
    }

    .capture-flip-button span::after {
        right: 0;
        bottom: 1px;
        width: 7px;
        height: 7px;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(-35deg);
    }

    .capture-photo-button {
        position: absolute;
        left: 50%;
        bottom: 236px;
        z-index: 5;
        display: grid;
        width: 112px;
        height: 112px;
        place-items: center;
        border: 5px solid rgba(255, 255, 255, 0.82);
        border-radius: 999px;
        padding: 16px 10px;
        color: #111827;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
        transform: translateX(-50%);
        text-align: center;
        text-transform: uppercase;
    }

    .capture-photo-button:disabled,
    .capture-start-recording:disabled {
        opacity: 0.45;
    }

    .capture-photo-icon {
        position: relative;
        width: 28px;
        height: 22px;
        border: 3px solid #111827;
        border-radius: 5px;
    }

    .capture-photo-icon::before {
        position: absolute;
        left: 7px;
        top: -8px;
        width: 10px;
        height: 5px;
        content: "";
        border-radius: 3px 3px 0 0;
        background: #111827;
    }

    .capture-photo-icon::after {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        content: "";
        border: 2px solid #111827;
        border-radius: 999px;
        transform: translate(-50%, -50%);
    }

    .capture-photo-button strong {
        color: #111827;
        font-size: 0.74rem;
        line-height: 1.1;
    }

    .capture-start-recording {
        position: absolute;
        left: 50%;
        bottom: 190px;
        z-index: 5;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        padding: 0 18px;
        color: #ffffff;
        background: #d83a3a;
        font-size: 0.82rem;
        font-weight: 900;
        text-transform: uppercase;
        transform: translateX(-50%);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    }

    .capture-camera-permission {
        z-index: 6;
        padding: 28px;
        background: linear-gradient(180deg, rgba(5, 10, 20, 0.42), rgba(5, 10, 20, 0.9));
    }

    .capture-control-tray {
        position: absolute;
        right: 10px;
        bottom: 72px;
        left: 10px;
        z-index: 6;
        display: grid;
        gap: 14px;
        border-radius: 22px;
        padding: 18px 14px 14px;
        color: #ffffff;
        background: rgba(13, 16, 23, 0.9);
        box-shadow: 0 -12px 42px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(18px);
    }

    .capture-recorder-controls {
        display: grid;
        grid-template-columns: 1fr 1.25fr 1fr;
        gap: 12px;
        align-items: center;
    }

    .capture-tray-button,
    .capture-stop-button {
        display: grid;
        min-height: 92px;
        place-items: center;
        gap: 7px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 999px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .capture-stop-button {
        min-height: 118px;
        border: 2px solid rgba(255, 92, 92, 0.8);
        background: radial-gradient(circle at 50% 38%, #ed4c4c, #c72e2e);
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04);
    }

    .capture-stop-button:disabled,
    .capture-tray-button:disabled {
        opacity: 0.48;
    }

    .capture-pause-icon,
    .capture-stop-icon,
    .capture-note-icon {
        position: relative;
        width: 24px;
        height: 24px;
    }

    .capture-pause-icon::before,
    .capture-pause-icon::after {
        position: absolute;
        top: 2px;
        bottom: 2px;
        width: 6px;
        content: "";
        border-radius: 2px;
        background: #ffffff;
    }

    .capture-pause-icon::before { left: 4px; }
    .capture-pause-icon::after { right: 4px; }

    .capture-stop-icon::before {
        position: absolute;
        inset: 4px;
        content: "";
        border-radius: 3px;
        background: #ffffff;
    }

    .capture-note-icon::before {
        position: absolute;
        inset: 2px 5px;
        content: "";
        border: 2px solid #ffffff;
        border-radius: 3px;
    }

    .capture-note-icon::after {
        position: absolute;
        right: 8px;
        bottom: 4px;
        width: 8px;
        height: 8px;
        content: "";
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(45deg);
    }

    .capture-status-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 12px;
    }

    .capture-status-row div {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
    }

    .capture-status-row strong,
    .capture-status-row small {
        display: block;
        min-width: 0;
    }

    .capture-status-row strong {
        overflow: hidden;
        color: #ffffff;
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .capture-status-row small {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.72rem;
        font-weight: 700;
    }

    .capture-status-icon {
        display: grid;
        width: 24px;
        height: 24px;
        grid-row: span 2;
        place-items: center;
        border-radius: 999px;
    }

    .capture-status-icon.success {
        background: #30d158;
    }

    .capture-status-icon.success::before {
        width: 10px;
        height: 6px;
        content: "";
        border-bottom: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        transform: rotate(-45deg);
    }

    .capture-status-icon.network::before {
        width: 18px;
        height: 12px;
        content: "";
        border-top: 4px solid rgba(255, 255, 255, 0.82);
        border-radius: 999px 999px 0 0;
    }

    .capture-gallery {
        display: flex;
        gap: 8px;
        min-height: 72px;
        overflow-x: auto;
        padding: 0 0 2px;
        scroll-snap-type: x proximity;
    }

    .capture-gallery .form-note {
        align-self: center;
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.78rem;
    }

    .capture-gallery figure {
        position: relative;
        flex: 0 0 72px;
        width: 72px;
        height: 64px;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        margin: 0;
        background: rgba(255, 255, 255, 0.08);
        scroll-snap-align: start;
    }

    .capture-gallery figure:last-child {
        border-color: #ffd60a;
    }

    .capture-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .capture-gallery figcaption {
        position: absolute;
        right: 4px;
        bottom: 4px;
        border-radius: 999px;
        padding: 2px 6px;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.66);
        font-size: 0.68rem;
        font-weight: 900;
    }

    .capture-tabbar {
        z-index: 12;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: calc(62px + env(safe-area-inset-bottom));
        padding: 6px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(6, 8, 12, 0.96);
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
    }

    .capture-tabbar button {
        position: relative;
        display: grid;
        min-width: 0;
        min-height: 50px;
        place-items: center;
        gap: 3px;
        border: 0;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.58);
        background: transparent;
        font-size: 0.72rem;
        font-weight: 800;
    }

    .capture-tabbar button.active {
        color: #0a84ff;
    }

    .capture-tabbar em {
        position: absolute;
        top: 3px;
        right: 28%;
        min-width: 18px;
        border-radius: 999px;
        padding: 2px 5px;
        color: #ffffff;
        background: #ff453a;
        font-size: 0.66rem;
        font-style: normal;
        line-height: 1;
    }

    .capture-tab-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 22px;
    }

    .capture-tab-camera::before,
    .capture-tab-folder::before,
    .capture-tab-sync::before,
    .capture-tab-more::before {
        position: absolute;
        content: "";
        inset: 3px;
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .capture-tab-camera::after {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 7px;
        height: 7px;
        content: "";
        border: 2px solid currentColor;
        border-radius: 999px;
        transform: translate(-50%, -50%);
    }

    .capture-tab-folder::before {
        border-radius: 3px;
        transform: skewX(-8deg);
    }

    .capture-tab-sync::before {
        border-left-color: transparent;
        border-radius: 999px;
    }

    .capture-tab-more::before {
        border: 0;
        box-shadow: 0 8px 0 currentColor, 8px 8px 0 currentColor, 16px 8px 0 currentColor;
        width: 4px;
        height: 4px;
        inset: 3px auto auto 2px;
        border-radius: 999px;
        background: currentColor;
    }
}

.capture-refresh-button span {
    position: relative;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 999px;
    background: transparent !important;
}

.capture-refresh-button span::after {
    position: absolute;
    top: -3px;
    right: -2px;
    width: 0;
    height: 0;
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
    transform: rotate(-28deg);
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-header {
        min-height: calc(44px + env(safe-area-inset-top));
        padding-top: calc(4px + env(safe-area-inset-top));
        padding-bottom: 4px;
    }

    .capture-tag-bar {
        min-height: 52px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .capture-overlay-top {
        top: 14px;
    }

    .capture-control-tray {
        right: 76px;
        left: 76px;
        bottom: 54px;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 10px 12px;
    }

    .capture-recorder-controls {
        grid-template-columns: repeat(3, minmax(68px, 1fr));
    }

    .capture-tray-button,
    .capture-stop-button {
        min-height: 64px;
    }

    .capture-status-row,
    .capture-gallery {
        min-height: 54px;
    }

    .capture-photo-button {
        bottom: 128px;
        width: 92px;
        height: 92px;
    }

    .capture-start-recording {
        bottom: 92px;
    }

    .capture-flash-button,
    .capture-flip-button {
        bottom: 128px;
    }
}

.capture-card {
    display: grid;
    gap: 16px;
}

.capture-cover-card {
    margin-bottom: 14px;
}

.capture-cover-layout {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.capture-template-form {
    align-self: stretch;
}

.desk-pdf-template-grid-slot {
    min-width: 0;
}

.desk-pdf-template-selector-card {
    max-width: min(100%, 520px);
    margin-top: 2px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.15rem 1.05rem;
    background: #fff;
}

.desk-pdf-template-form-inner label > span {
    font-weight: 700;
    color: var(--navy, #0b1321);
}

.desk-pdf-template-form-inner .compact-form label,
.desk-pdf-template-form-inner label {
    margin-bottom: 0;
}

.desk-pdf-template-form-inner select {
    margin-top: 0.45rem;
}

.desk-pdf-template-actions {
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line, #e2e8f0);
}

.desk-pdf-template-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.desk-pdf-template-action-row .btn {
    min-height: 42px;
}

.capture-cover-preview {
    min-height: 180px;
}

.capture-cover-preview img {
    min-height: 180px;
}

.capture-file-button {
    display: grid;
    min-height: 92px;
    place-items: center;
    border: 2px dashed #b9c8db;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--navy);
    font-size: 1.08rem;
    font-weight: 900;
    text-align: center;
}

.capture-file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.capture-photo-preview {
    width: 100%;
    max-height: 420px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--navy);
}

.capture-recorder-status {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.recording-dot.is-recording {
    background: var(--danger);
    box-shadow: 0 0 0 6px rgba(180, 35, 24, 0.14);
}

.sticky-capture-controls {
    position: sticky;
    bottom: 10px;
    z-index: 18;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(11, 18, 32, 0.14);
}

.capture-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.capture-summary-grid div {
    display: grid;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.capture-summary-grid span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.capture-summary-grid strong {
    color: var(--navy);
    font-size: 1.3rem;
}

.server-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capture-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.capture-action-bar form {
    margin: 0;
}

.capture-list {
    display: grid;
    gap: 12px;
}

.capture-list-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-left: 5px solid var(--warning);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.capture-list-item.status-synced {
    border-left-color: var(--success);
}

.capture-list-item.status-failed {
    border-left-color: var(--danger);
}

.capture-list-item.status-device_only {
    border-left-color: var(--muted);
}

.capture-list-item img,
.capture-list-item audio,
.capture-list-item video {
    width: 100%;
    max-height: 90px;
    border-radius: 6px;
    object-fit: cover;
}

.capture-list-item span,
.capture-list-item em,
.capture-list-item p {
    display: block;
    margin: 3px 0 0;
    color: var(--muted);
}

.capture-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.server-capture-list {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.server-capture-list > div:not(.capture-photo-review-strip) {
    display: grid;
    gap: 3px;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.capture-photo-review-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.server-capture-list .capture-photo-review-strip > div {
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}

.capture-photo-review-strip img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    object-fit: cover;
    background: #f3f4f8;
}

.capture-photo-review-strip span {
    color: var(--muted);
    font-size: 0.84rem;
}

@media (min-width: 901px) {
    /* Expanded desktop rail: icon above label (matches collapsed / mobile chrome). */
    body:not(.sidebar-desktop-collapsed) .sidebar-nav a {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 13px;
        min-height: auto;
        padding: 12px 10px;
        text-align: center;
    }

    body:not(.sidebar-desktop-collapsed) .sidebar-nav-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        flex-shrink: 0;
    }

    body:not(.sidebar-desktop-collapsed) .sidebar-nav-icon svg {
        stroke-width: 1.25;
    }

    body:not(.sidebar-desktop-collapsed) .sidebar-nav-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
        font-size: 0.82rem;
        font-weight: 400;
        line-height: 1.2;
        max-width: 100%;
    }

    .sidebar-desktop-header-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

    .sidebar-desktop-header-row .sidebar-brand {
        flex: 1;
        min-width: 0;
    }

    .sidebar-desktop-collapse {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-top: 2px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 10px;
        padding: 0;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
    }

    body.sidebar-desktop-collapsed .app-shell {
        --sidebar-width: var(--survai-app-rail-width);
    }

    body.sidebar-desktop-collapsed .sidebar {
        gap: 15px;
        padding-right: 14px;
        padding-left: 14px;
    }

    body.sidebar-desktop-collapsed .sidebar-desktop-header-row {
        display: grid;
        justify-items: center;
        gap: 12px;
    }

    body.sidebar-desktop-collapsed .sidebar-brand {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        overflow: visible;
    }

    body.sidebar-desktop-collapsed .sidebar-brand::before {
        content: "";
        display: block;
        width: 100%;
        height: 78px;
        flex-basis: auto;
        border-radius: 0;
        background-color: transparent;
        background-image: url("../icons/survai-wordmark-menu.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        mix-blend-mode: normal;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    body.sidebar-desktop-collapsed .brand-logo-sidebar {
        display: none;
    }

    body.sidebar-desktop-collapsed .sidebar-desktop-collapse {
        width: 44px;
        height: 44px;
        font-size: 1.12rem;
    }

    body.sidebar-desktop-collapsed .sidebar-nav a {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 5px;
        min-height: auto;
    }

    body.sidebar-desktop-collapsed .sidebar-nav a::before {
        top: 6px;
        bottom: 6px;
    }

    body.sidebar-desktop-collapsed .sidebar-nav-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    body.sidebar-desktop-collapsed .sidebar-nav-icon svg {
        stroke-width: 1.15;
    }

    body.sidebar-desktop-collapsed .sidebar-nav-label {
        font-size: 0.76rem;
        line-height: 1.18;
        font-weight: 400;
    }

    body.sidebar-desktop-collapsed .user-pill {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.sidebar-desktop-collapsed .sidebar-footer {
        justify-items: center;
    }

    body.sidebar-desktop-collapsed .sidebar-footer .btn {
        width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        border-radius: 16px;
        font-size: 0;
    }

    body.sidebar-desktop-collapsed .sidebar-footer .btn::before {
        display: inline-block;
        width: 24px;
        height: 24px;
        content: "";
        background:
            linear-gradient(currentColor, currentColor) 4px 10px / 14px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 10px 4px / 2px 14px no-repeat;
        transform: rotate(45deg);
    }

    body.sidebar-desktop-collapsed .sidebar-footer .btn::after {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        content: "Logout";
        clip: rect(0, 0, 0, 0);
    }

}

@media (max-width: 900px) {
    .sidebar-desktop-header-row {
        display: contents;
    }

    .sidebar-desktop-collapse,
    .sidebar-desktop-expand {
        display: none !important;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    /*
     * Reports: desktop rule keeps a narrow icon rail + main. Below 900px the sidebar is a drawer
     * or stacked — keep a single grid track so .main-panel spans the full viewport width.
     */
    body.reports-page .app-shell {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    /* Operational dashboard: desktop rule is 248px + main; single column when shell stacks */
    .ops-dashboard-page .app-shell {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    body:not(.login-body):not(.capture-mode-body):not(.survaicam-page):not(.pdf-viewer-body):not(
            .sai-studio-app
        )
        .app-shell:has(> aside.sidebar:not(.sidebar--workspace)) {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    /* Without JS drawer (.has-mobile-sidebar), stack sidebar in-flow as a fallback only. */
    body:not(.has-mobile-sidebar) .sidebar {
        position: static;
        height: auto;
        min-height: auto;
        padding: 16px;
    }

    body:not(.has-mobile-sidebar) .sidebar-brand {
        justify-content: flex-start;
    }

    body:not(.has-mobile-sidebar) .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.has-mobile-sidebar) .sidebar-nav a {
        text-align: center;
    }

    body:not(.has-mobile-sidebar) .sidebar-footer {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .floating-report-toolbar {
        left: 16px;
        bottom: 16px;
        width: min(320px, calc(100vw - 32px));
    }

    .page-header,
    .report-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .processing-head {
        flex-direction: column;
    }

    .diagnostic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-detail,
    .processing-log-entry {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .wizard-form {
        padding: 16px;
    }

    .wizard-entry-card {
        grid-template-columns: 1fr;
    }

    .wizard-entry-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-progress {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wizard-survey-type-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .input-mode-grid {
        grid-template-columns: 1fr;
    }

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

    .context-grid {
        grid-template-columns: 1fr;
    }

    .voice-recorder-meta,
    .voice-note-item,
    .supporting-document-layout {
        grid-template-columns: 1fr;
    }

    .supporting-document-item {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .supporting-document-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .supporting-document-actions .btn,
    .supporting-document-actions .inline-action-form {
        flex: 1 1 130px;
    }

    .voice-recorder-controls {
        top: 8px;
    }

    .file-input {
        max-width: none;
    }

    .pdf-settings-layout {
        grid-template-columns: 1fr;
    }

    .cover-preview,
    .cover-preview img {
        min-height: 220px;
    }

    .capture-cover-layout {
        grid-template-columns: 1fr;
    }

    .capture-cover-preview,
    .capture-cover-preview img {
        min-height: 190px;
    }

    .profile-image-grid {
        grid-template-columns: 1fr;
    }

    .template-layout {
        grid-template-columns: 1fr;
    }

    .slim-grid {
        grid-template-columns: 1fr;
    }

    .client-name-grid {
        grid-template-columns: 1fr;
    }

    .client-details-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "primary"
            "secondary"
            "agent"
            "solicitor";
    }

    .section-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .photo-grid-review {
        grid-template-columns: 1fr;
    }

    .photo-panel-actions {
        justify-content: flex-start;
    }

    .capture-topbar {
        flex-direction: column;
    }

    .capture-status-stack {
        width: 100%;
        grid-template-columns: 1fr 1fr;
        justify-items: stretch;
    }

    .capture-network-status,
    .capture-sync-status {
        justify-content: center;
        text-align: center;
    }

    .capture-summary-grid,
    .server-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capture-tabs {
        top: 128px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-capture-stage {
        min-height: calc(100dvh - 112px);
        margin: 0 -14px;
        border-radius: 0;
    }

    .live-camera-preview {
        height: calc(100dvh - 112px);
        min-height: 620px;
    }

    .live-capture-top-controls {
        grid-template-columns: 1fr;
    }

    .live-capture-hud {
        top: 178px;
    }

    .live-capture-main-actions {
        bottom: 236px;
    }

    .live-capture-main-actions .btn {
        min-height: 52px;
    }

    .live-photo-button {
        width: 116px;
        height: 116px;
    }

    .live-capture-bottom-sheet {
        padding: 14px;
    }

    .live-capture-bottom-sheet .capture-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capture-list-item {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .workflow-steps {
        grid-template-columns: repeat(5, minmax(58px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .output-grid {
        grid-template-columns: 1fr;
    }

    .workflow-builder-layout {
        grid-template-columns: 1fr;
    }

    .builder-inspector {
        position: static;
    }

    .capture-item-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .capture-item-actions .btn {
        flex: 1 1 140px;
    }

    body.has-mobile-sidebar {
        --survai-mobile-drawer-brand-height: 84px;
        /* Mobile white bar: hamburger brand mark (all pages using initMobileMenu + logo asset) */
        --survai-mobile-header-brand-logo-height: 45px;
        --survai-mobile-app-header-total: calc(110px + env(safe-area-inset-top, 0px));
    }

    body.has-mobile-sidebar:has(.mobile-menu-toggle--brand) {
        --survai-mobile-app-header-total: calc(
            var(--survai-mobile-header-brand-logo-height) + 40px + env(safe-area-inset-top, 0px)
        );
    }

    body.has-mobile-sidebar .main-panel {
        padding-top: var(--survai-mobile-app-header-total);
    }

    body.dashboard-body.has-mobile-sidebar .main-panel {
        padding-top: var(--survai-mobile-app-header-total);
    }

    body.dashboard-body.has-mobile-sidebar .dashboard-create-survey {
        display: none !important;
    }

    body.has-mobile-sidebar .mobile-app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 890;
        display: flex;
        justify-content: space-between;
        min-height: var(--survai-mobile-app-header-total);
        align-items: center;
        gap: 12px;
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
        padding-right: max(14px, env(safe-area-inset-right, 0px));
        padding-bottom: 14px;
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        border-bottom: 1px solid rgba(15, 23, 42, 0.1);
        background: #ffffff;
        box-sizing: border-box;
    }

    /*
     * Report workspace: fixed .workspace-topbar (z-index ~880) otherwise covers the mobile menu bar.
     * Stack the topbar under the injected mobile header and add matching scroll padding.
     */
    body.has-mobile-sidebar .workspace-topbar:not(.workspace-topbar--mobile-embedded) {
        top: var(--survai-mobile-app-header-total);
    }

    body.has-mobile-sidebar .sidebar.sidebar--workspace + .workspace-topbar + .main-panel {
        padding-top: calc(var(--app-main-padding) + 100px + var(--survai-mobile-app-header-total));
    }

    body.workspace-fullscreen.has-mobile-sidebar .sidebar.sidebar--workspace + .workspace-topbar + .main-panel {
        padding-top: calc(var(--app-main-padding) + var(--survai-mobile-app-header-total));
    }

    /*
     * Browser / workspace fullscreen: never slide the fixed mobile shell toolbar off-screen.
     * Keep .mobile-app-header + embedded workspace topbar visible with safe stacking.
     */
    html:-webkit-full-screen body.workspace-fullscreen.has-mobile-sidebar .mobile-app-header,
    html:fullscreen body.workspace-fullscreen.has-mobile-sidebar .mobile-app-header,
    body.workspace-fullscreen.has-mobile-sidebar .mobile-app-header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 890 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-sizing: border-box;
    }

    body.workspace-fullscreen.has-mobile-sidebar .workspace-topbar.workspace-topbar--mobile-embedded {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        position: static !important;
    }

    body.workspace-fullscreen.has-mobile-sidebar .dashboard-body .main-panel,
    body.workspace-fullscreen.has-mobile-sidebar .main-panel {
        padding-top: calc(var(--app-main-padding) + var(--survai-mobile-app-header-total)) !important;
    }

    body.has-mobile-sidebar .mobile-app-header__spacer {
        flex: 1;
        min-width: 0;
    }

    body.has-mobile-sidebar .survai-mobile-wordmark-link {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        margin-inline: 4px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    body.has-mobile-sidebar .survai-mobile-wordmark-link:focus-visible {
        outline: 2px solid rgba(27, 90, 249, 0.45);
        outline-offset: 2px;
        border-radius: 8px;
    }

    body.has-mobile-sidebar img.survai-wordmark {
        display: block;
        height: 26px;
        width: auto;
        max-width: min(176px, 46vw);
        object-fit: contain;
        object-position: center;
    }

    body.has-mobile-sidebar .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1010;
        height: 100dvh !important;
        min-height: 100vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: calc(16px + env(safe-area-inset-top));
        transform: translateX(-105%) !important;
        transition: transform 180ms ease;
        box-shadow: 8px 0 22px rgba(11, 18, 32, 0.12);
        /* Same narrow rail as reports.php for every mobile drawer (ops, workspace, standard). */
        width: min(110px, calc(100vw - 24px));
        min-width: 0;
        max-width: min(110px, calc(100vw - 24px));
        gap: 15px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        isolation: isolate;
        overflow-x: clip;
    }

    body.has-mobile-sidebar.mobile-menu-open .sidebar {
        transform: translateX(0) !important;
        /* Softer edge: large blur + scrim read as a muddy “oval” on iOS Safari */
        box-shadow: 6px 0 20px rgba(11, 18, 32, 0.14);
    }

    body.has-mobile-sidebar .sidebar-brand {
        justify-content: center;
        overflow: visible;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
    }

    body.has-mobile-sidebar .sidebar .sidebar-brand img {
        display: none !important;
    }

    /* Mobile drawers: one wordmark treatment (reports-style rail). */
    body.has-mobile-sidebar .sidebar .sidebar-brand::before {
        display: block !important;
        width: 100%;
        height: var(--survai-mobile-drawer-brand-height, 84px);
        flex-basis: auto;
        border-radius: 0;
        background-color: transparent;
        background-image: url("../icons/survai-wordmark-menu.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        mix-blend-mode: normal;
        content: "";
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    body.has-mobile-sidebar .sidebar .brand-logo-sidebar {
        display: none !important;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav a {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-height: auto;
        padding: 10px 5px;
        border-radius: 14px;
        font-size: 0.72rem;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav a.active {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /*
     * Project / account Settings in the drawer duplicates the cog control in workspace-topbar--global or report topbar:
     * hide only on phones. Pages without that topbar (e.g. standalone admin, coverage map if no header) stay unchanged.
     */
    body.has-mobile-sidebar .sidebar.sidebar--workspace .sidebar-nav a[href*='report-settings'] {
        display: none !important;
    }

    body.has-mobile-sidebar:has(.workspace-topbar--global) .sidebar:not(.sidebar--workspace) .sidebar-nav a[href$='settings.php'] {
        display: none !important;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav-icon {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        isolation: isolate;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav-icon svg {
        stroke-width: 1.35;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav-label {
        font-weight: 400;
        font-size: 0.74rem;
        line-height: 1.15;
    }

    body.has-mobile-sidebar .sidebar-footer {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    body.has-mobile-sidebar .user-pill {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.has-mobile-sidebar .sidebar-footer .btn {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 14px;
        font-size: 0;
    }

    body.has-mobile-sidebar .sidebar-footer .btn::before {
        display: inline-block;
        width: 24px;
        height: 24px;
        content: "";
        background:
            linear-gradient(currentColor, currentColor) 4px 10px / 14px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 10px 4px / 2px 14px no-repeat;
        transform: rotate(45deg);
    }

    body.has-mobile-sidebar .mobile-menu-toggle {
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        display: flex;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 10px;
        background: rgba(241, 245, 249, 0.95);
        box-shadow: none;
    }

    body.has-mobile-sidebar .mobile-menu-toggle--brand {
        width: auto;
        height: auto;
        min-width: 44px;
        min-height: 44px;
        max-width: min(420px, 58vw);
        flex-direction: row;
        gap: 0;
        padding: 6px 8px;
        margin: 0;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        align-items: center;
        justify-content: flex-start;
    }

    body.has-mobile-sidebar .mobile-menu-toggle--brand:hover,
    body.has-mobile-sidebar .mobile-menu-toggle--brand:focus-visible {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.has-mobile-sidebar .mobile-menu-toggle--brand:focus-visible {
        outline: 2px solid rgba(27, 90, 249, 0.42);
        outline-offset: 3px;
        border-radius: 8px;
    }

    body.has-mobile-sidebar .mobile-menu-toggle--brand .mobile-menu-toggle__logo {
        display: block;
        width: auto;
        height: var(--survai-mobile-header-brand-logo-height);
        max-height: var(--survai-mobile-header-brand-logo-height);
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
        pointer-events: none;
        -webkit-user-drag: none;
        user-select: none;
        mix-blend-mode: normal;
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-toggle--brand {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0.92;
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-toggle {
        left: auto;
    }

    body.has-mobile-sidebar .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: #0f172a;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    body.has-mobile-sidebar .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span + span {
        margin-top: 0;
    }

    body.has-mobile-sidebar .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span:nth-child(3) {
        margin-top: 0;
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span:nth-child(2) {
        opacity: 0;
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-toggle:not(.mobile-menu-toggle--brand):not(.mobile-menu-toggle--fallback) span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    body.has-mobile-sidebar .mobile-menu-toggle--fallback .mobile-menu-toggle__fallback-icon {
        display: block;
        width: 22px;
        height: 22px;
        color: #0f172a;
    }

    body.has-mobile-sidebar .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        background: rgba(11, 18, 32, 0.42);
        display: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        pointer-events: none;
    }

    body.has-mobile-sidebar.mobile-menu-open .mobile-menu-overlay {
        display: block;
        pointer-events: auto;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.capture-live-active.has-mobile-sidebar .mobile-app-header,
    body.capture-mode-body.has-mobile-sidebar .mobile-app-header,
    body.capture-live-active.has-mobile-sidebar .mobile-menu-toggle,
    body.capture-mode-body.has-mobile-sidebar .mobile-menu-toggle,
    body.capture-mode-body.has-mobile-sidebar .mobile-menu-overlay,
    body.capture-live-active.has-mobile-sidebar .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 15px;
    }

    .login-card {
        padding: 26px 20px;
    }

    body:not(.has-mobile-sidebar) .sidebar {
        gap: 14px;
        padding: 14px;
    }

    body:not(.has-mobile-sidebar) .sidebar-nav {
        grid-template-columns: 1fr;
    }

    body:not(.has-mobile-sidebar) .sidebar-footer {
        grid-template-columns: 1fr;
    }

    .page-header {
        gap: 14px;
        margin-bottom: 18px;
    }

    .page-header h1 {
        font-size: 1.65rem;
    }

    .wizard-progress {
        display: none;
    }

    .wizard-survey-type-group {
        grid-template-columns: 1fr;
    }

    .wizard-entry-steps {
        grid-template-columns: 1fr;
    }

    .wizard-progress button,
    .wizard-progress a {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 46px;
    }

    .wizard-progress button span,
    .wizard-progress a span {
        width: 28px;
        height: 28px;
    }

    .wizard-actions .btn,
    .wizard-actions button {
        flex: 1 1 100%;
    }

    .capture-shell {
        padding: 12px 10px 88px;
    }

    .capture-tabs {
        top: 126px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capture-summary-grid,
    .server-summary {
        grid-template-columns: 1fr;
    }

    .capture-list-item {
        grid-template-columns: 1fr;
    }

    .capture-list-item img,
    .capture-list-item audio,
    .capture-list-item video {
        max-height: 220px;
    }

    .header-actions,
    .form-actions,
    .processing-actions,
    .section-actions,
    .media-actions,
    .photo-panel-actions,
    .voice-button-row,
    .voice-sync-actions,
    .voice-note-actions {
        width: 100%;
    }

    .page-header .btn,
    .header-actions .btn,
    .form-actions .btn,
    .processing-actions .btn,
    .section-actions .btn,
    .media-actions .btn,
    .photo-panel-actions .btn,
    .voice-button-row .btn,
    .voice-sync-actions .btn,
    .voice-note-actions .btn {
        width: 100%;
    }

    .section-actions--qc > .section-actions-main > .btn,
    .section-actions--qc > .section-qc-approval .btn {
        width: auto;
    }

    .section-actions--qc > .section-qc-approval {
        margin-left: auto;
        width: auto;
        max-width: 100%;
    }

    .transcription-progress-heading {
        display: grid;
    }

    .transcription-progress-heading span {
        text-align: left;
    }

    .report-form,
    .section-card,
    .processing-card,
    .processing-diagnostics-card,
    .processing-log-card,
    .photo-review-card,
    .template-list-card,
    .template-editor-card,
    .empty-state {
        padding: 18px;
    }

    .transcript-input {
        min-height: 320px;
    }

    .section-text {
        min-height: 260px;
    }

    .room-text {
        min-height: 180px;
    }

    .pill-grid {
        gap: 8px;
    }

    .pill-toggle {
        flex: 1 1 calc(50% - 8px);
    }

    .pill-toggle .pill-label {
        width: 100%;
        min-height: 40px;
        padding: 9px 10px;
        white-space: normal;
    }

    .queue-item {
        grid-template-columns: 1fr;
    }

    .queue-item strong {
        justify-self: start;
    }

    .diagnostic-grid {
        grid-template-columns: 1fr;
    }

    .section-head {
        flex-direction: column;
        gap: 8px;
    }

    .section-head-actions {
        width: 100%;
        justify-content: space-between;
    }

    .save-state {
        min-width: 0;
        text-align: left;
    }

    .upload-dropzone {
        min-height: 116px;
        padding: 16px;
    }

    .media-dropzone {
        min-height: 128px;
        padding: 16px;
    }

    .media-file-item {
        grid-template-columns: 1fr;
    }

    .photo-thumb-pair {
        grid-template-columns: 1fr;
    }

    .photo-dropzone {
        min-height: 118px;
        padding: 16px;
    }

    .photo-checks {
        display: grid;
    }

    .tool-checks,
    .tool-checkbox-grid {
        display: grid;
    }

    .media-diagnostics {
        display: grid;
    }

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

    .matched-photo-grid {
        grid-template-columns: 1fr;
    }

    .cover-preview,
    .cover-preview img {
        min-height: 190px;
    }

    .template-block {
        padding: 14px;
    }

    .workflow-nav {
        padding: 6px 0 16px;
    }

    .workflow-nav-heading {
        flex-direction: row;
        align-items: center;
    }

    .workflow-nav-address {
        display: none;
    }

    .progress-report-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
    }

    .progress-report-heading .report-heading-right {
        align-items: flex-start;
        justify-self: end;
        margin-left: 0;
    }

    .workflow-step {
        min-height: auto;
    }

    .output-summary-card,
    .output-preview-card,
    .workflow-page-card,
    .survey-workflow-surface .main-panel > .card:not(.desk-study-status-strip),
    .survey-workflow-surface .main-panel .desk-study-main-column > .card,
    .survey-workflow-surface .main-panel .desk-study-main-column > section.card,
    .survey-workflow-surface .main-panel form.desk-study-form > section.card,
    .survey-workflow-surface .main-panel form.desk-study-form > div.card,
    .survey-workflow-surface .main-panel > .desk-study-status-strip.card {
        padding: 18px;
    }
}

@media (max-width: 920px) {
    /*
     * Icon rail + main is for wide layouts; once we use stacked cards / full-bleed main,
     * a single grid column lets sections span the viewport (drawer sidebar is fixed off-canvas).
     */
    body.reports-page .app-shell {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    body:not(.login-body):not(.capture-mode-body):not(.survaicam-page):not(.pdf-viewer-body):not(
            .sai-studio-app
        )
        .app-shell:has(> aside.sidebar:not(.sidebar--workspace)) {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    /*
     * Desktop (min-width:901px) adds padding-left for the fixed sidebar. While the layout uses
     * a drawer / stacked nav (≤920px), clear that inset so content aligns to the viewport edges.
     */
    body.dashboard-body.reports-page.app-shell-has-main-sidebar .app-shell {
        padding-left: 0;
        padding-right: 0;
    }

    @supports selector(:has(.sidebar)) {
        body.dashboard-body.reports-page:not(.app-shell-has-main-sidebar)
            .app-shell:has(> .sidebar:not(.sidebar--workspace)) {
            padding-left: 0;
            padding-right: 0;
        }
    }

    /* Full-bleed content: drop main-panel side gutters so sections span the viewport (safe-area aware). */
    body.reports-page .main-panel {
        width: 100%;
        max-width: 100%;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
    }

    body.reports-page .main-panel > .alert {
        margin-right: max(16px, env(safe-area-inset-right, 0px));
        margin-left: max(16px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        max-width: none;
    }

    .reports-column-resizer {
        display: none;
    }

    .reports-page .table-card {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        width: 100%;
        max-width: none;
        align-self: stretch;
        box-sizing: border-box;
    }

    .reports-page .table-wrap {
        overflow: visible;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .reports-page .reports-table {
        min-width: 0;
        table-layout: auto;
    }

    /* Mobile card rows: compact report scan view */
    .reports-page .reports-table td[data-label="Survey type"],
    .reports-page .reports-table td[data-label="Status"],
    .reports-page .reports-table td[data-label="Media"],
    .reports-page .reports-table td[data-label="Delete"] {
        display: none !important;
    }

    .reports-page .reports-mobile-summary-cell {
        display: block !important;
        border-bottom: 0;
    }

    .reports-table,
    .reports-table thead,
    .reports-table tbody,
    .reports-table tr,
    .reports-table th,
    .reports-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .reports-table thead {
        display: none;
    }

    .dashboard-body .reports-table tr {
        margin-bottom: 8px;
        border: 0;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(11, 18, 32, 0.06);
        overflow: hidden;
    }

    .reports-table td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        border-bottom: 1px solid var(--line);
        padding: 12px 14px;
        box-sizing: border-box;
    }

    .reports-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        width: 100%;
    }

    .reports-page .reports-mobile-summary-cell::before {
        display: none;
    }

    .reports-page .reports-mobile-summary {
        justify-content: flex-start;
    }

    .reports-page .reports-mobile-media {
        margin-left: auto;
    }

    .reports-table td:last-child {
        border-bottom: 0;
    }

    .dashboard-body .reports-table .status-cell {
        white-space: normal;
    }

    .dashboard-body .reports-table .report-status-indicator {
        flex-wrap: wrap;
        row-gap: 4px;
        white-space: normal;
    }

    .dashboard-body .reports-table td[data-label="Media"] .media-cell {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        box-sizing: border-box;
    }

    .dashboard-body .mobile-report-address {
        display: block;
        min-height: 0;
        padding: 0;
        color: var(--navy);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .reports-page .reports-filter-panel .search-field {
        flex: 1 1 100%;
        max-width: none;
    }

    .reports-page .table-card .empty-state {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(11, 18, 32, 0.06);
    }
}

@media (max-width: 700px) {
    .dashboard-body .page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .dashboard-body .page-header .eyebrow,
    .dashboard-body .wizard-entry-card {
        display: none;
    }

    .dashboard-body .page-header h1 {
        margin: 0;
        font-size: 1.45rem;
        line-height: 1.1;
    }

    .dashboard-body .toolbar {
        margin-bottom: 12px;
    }

    .table-card {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .table-wrap {
        overflow: visible;
    }

    .room-table,
    .room-table thead,
    .room-table tbody,
    .room-table tr,
    .room-table th,
    .room-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .room-table thead {
        display: none;
    }

    .room-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
    }

    .room-table td,
    .room-table th:first-child,
    .room-table td:first-child,
    .room-table th:last-child,
    .room-table td:last-child {
        width: 100%;
    }

    .room-table td {
        border-top: 0;
        border-bottom: 1px solid var(--line);
        padding: 12px;
    }

    .room-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .room-table td:last-child {
        border-bottom: 0;
    }

    .output-room-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .output-room-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .output-room-controls .btn {
        flex: 1 1 auto;
        min-width: 84px;
        min-height: 42px;
    }
}

@media (max-width: 420px) {
    .login-shell {
        padding: 14px;
    }

    .brand-logo-sidebar {
        width: min(390px, 92vw);
        max-height: 96px;
        height: auto;
    }

    .sidebar-brand {
        font-size: 1.08rem;
    }

    .reports-table td {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .pill-toggle {
        flex-basis: 100%;
    }

    .btn {
        padding-right: 12px;
        padding-left: 12px;
    }

    .status {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .dashboard-body .reports-table td[data-label="Media"] .media-cell {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dashboard-body .reports-table td[data-label="Media"] {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 920px) {
    .capture-mode-body {
        width: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #eef3f8;
        overscroll-behavior-y: contain;
    }

    .capture-mode-body .app-shell .main-panel {
        width: 100%;
        max-width: none;
        padding: var(--app-main-padding);
        padding-top: calc(var(--app-main-padding) + env(safe-area-inset-top));
        padding-right: calc(var(--app-main-padding) + env(safe-area-inset-right));
        padding-bottom: calc(var(--app-main-padding) + env(safe-area-inset-bottom));
        padding-left: calc(var(--app-main-padding) + env(safe-area-inset-left));
        box-sizing: border-box;
    }

    .capture-mode-body .main-panel > .alert {
        margin-bottom: 12px;
    }

    .capture-mode-body .capture-topbar,
    .capture-mode-body .workflow-nav,
    .capture-mode-body .capture-tabs,
    .live-capture-panel .capture-desktop-handoff {
        display: none !important;
    }

    .capture-shell {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .capture-panel.active.live-capture-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .capture-screen {
        --capture-tabbar-h: calc(62px + env(safe-area-inset-bottom));
        --capture-tray-h: clamp(178px, 31dvh, 222px);
        position: relative;
        z-index: 1;
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        height: auto;
        max-height: none;
        flex-direction: column;
        overflow: hidden;
        color: #ffffff;
        background: #000000;
        font-family: Arial, Helvetica, sans-serif;
        touch-action: manipulation;
    }

    /* Do not show the live camera block in the page scroll until the user engages SurvAI Cam. */
    .capture-mode-body:not(.capture-live-active) .live-capture-panel .capture-screen {
        display: none !important;
    }

    .capture-mode-body:not(.capture-live-active) .capture-panel.active.live-capture-panel {
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto;
    }

    .capture-mode-body.capture-live-active .live-capture-panel .capture-screen {
        position: fixed !important;
        inset: 0;
        z-index: 1000;
        width: 100vw;
        max-width: 100vw;
        flex: none !important;
        display: flex !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
    }

    .capture-mode-body.capture-live-active {
        overflow: hidden;
    }

    .capture-header {
        position: relative;
        z-index: 20;
        display: grid;
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
        flex: 0 0 calc(56px + env(safe-area-inset-top));
        grid-template-columns: 78px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 6px;
        padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
        color: #111827;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(16px);
    }

    .capture-header h2 {
        margin: 0;
        overflow: hidden;
        color: #111827;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.1;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .capture-back-button {
        display: inline-flex;
        min-width: 0;
        min-height: 44px;
        align-items: center;
        gap: 5px;
        overflow: hidden;
        color: #0a7cff;
        font-size: 0.96rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .capture-back-button span {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        border-bottom: 3px solid currentColor;
        border-left: 3px solid currentColor;
        transform: rotate(45deg);
    }

    button.capture-finish-button {
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        text-align: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .capture-more-button,
    .capture-filter-button {
        display: inline-grid;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        grid-auto-flow: column;
        place-content: center;
        gap: 3px;
        border: 0;
        border-radius: 999px;
        color: #0a7cff;
        background: rgba(255, 255, 255, 0.92);
    }

    .capture-more-button {
        border: 2px solid #0a7cff;
        background: transparent;
    }

    .capture-more-button span,
    .capture-filter-button span {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: currentColor;
    }

    .capture-tag-bar {
        position: relative;
        z-index: 19;
        display: flex;
        min-height: 56px;
        flex: 0 0 56px;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 10px;
        background: rgba(246, 247, 250, 0.95);
        backdrop-filter: blur(14px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .capture-tag-bar::-webkit-scrollbar {
        display: none;
    }

    .capture-tag-pill {
        position: relative;
        display: grid;
        min-width: 132px;
        max-width: min(48vw, 210px);
        min-height: 44px;
        flex: 0 0 auto;
        grid-template-columns: 18px minmax(0, 1fr) 10px;
        align-items: center;
        gap: 7px;
        border: 0;
        border-radius: 999px;
        padding: 0 12px;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
    }

    .capture-tag-pill select {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        border: 0;
        padding: 0 2px 0 0;
        overflow: hidden;
        color: #111827;
        background: transparent;
        font-size: 0.92rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
        appearance: none;
    }

    .capture-filter-button {
        flex: 0 0 44px;
        color: #111827;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
    }

    .capture-training-toggle {
        flex: 0 0 auto;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        padding: 0 15px;
        color: #111827;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
        font-size: 0.9rem;
        font-weight: 900;
    }

    .capture-training-toggle.active {
        color: var(--navy);
        background: #ffd60a;
        box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.24), 0 8px 22px rgba(0, 0, 0, 0.2);
    }

    .capture-pill-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #0a7cff;
    }

    .capture-pill-room::before,
    .capture-pill-element::before,
    .capture-pill-defect::before {
        position: absolute;
        inset: 3px;
        content: "";
        border: 2px solid currentColor;
        border-radius: 4px;
    }

    .capture-pill-element::before {
        border-radius: 2px;
        transform: rotate(45deg);
    }

    .capture-pill-defect::before {
        border-color: #ff9f0a;
        border-radius: 999px;
        background: #ff9f0a;
    }

    .capture-pill-chevron {
        width: 9px;
        height: 9px;
        border-right: 2px solid #6b7280;
        border-bottom: 2px solid #6b7280;
        transform: rotate(45deg) translateY(-2px);
    }

    .capture-preview {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        background: #000000;
    }

    .capture-screen .capture-preview-video.live-camera-preview,
    .capture-screen .capture-preview-video {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center center;
        background: #000000;
    }

    .capture-preview-shade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.48)),
            linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.16));
    }

    .capture-overlay {
        position: absolute;
        z-index: 5;
    }

    .capture-overlay-top {
        top: 10px;
        right: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: minmax(82px, auto) minmax(72px, 1fr) minmax(70px, auto);
        align-items: start;
        gap: 8px;
        pointer-events: none;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count,
    .capture-zoom-control,
    .capture-floating-action {
        border-radius: 18px;
        color: #ffffff;
        background: rgba(20, 20, 20, 0.66);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(14px);
    }

    .capture-recording-badge,
    .capture-photo-count {
        display: inline-flex;
        min-width: 0;
        min-height: 46px;
        align-items: center;
        gap: 7px;
        padding: 7px 9px;
        justify-self: start;
        text-transform: uppercase;
    }

    .capture-photo-count {
        justify-self: end;
    }

    .capture-recording-badge strong,
    .capture-photo-count strong {
        display: block;
        color: #ffffff;
        font-size: 0.82rem;
        line-height: 1.05;
    }

    .capture-recording-badge span:not(.recording-dot),
    .capture-photo-count span {
        display: block;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.78rem;
        font-weight: 850;
        line-height: 1.05;
        text-overflow: ellipsis;
        text-transform: none;
        white-space: nowrap;
    }

    .capture-recording-badge em {
        display: none;
    }

    .capture-audio-pill {
        display: inline-flex;
        min-width: 84px;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 7px 10px;
        justify-self: center;
    }

    .capture-mic-icon {
        position: relative;
        width: 12px;
        height: 18px;
        border: 2px solid #ffffff;
        border-radius: 999px;
    }

    .capture-mic-icon::after {
        position: absolute;
        bottom: -7px;
        left: 50%;
        width: 12px;
        height: 7px;
        content: "";
        border-bottom: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        transform: translateX(-50%);
    }

    .capture-wave {
        display: inline-flex;
        height: 22px;
        align-items: center;
        gap: 3px;
    }

    .capture-wave i {
        display: block;
        width: 3px;
        height: 8px;
        border-radius: 999px;
        background: #ff7b7b;
        animation: capture-wave 980ms ease-in-out infinite;
    }

    .capture-image-icon {
        position: relative;
        width: 19px;
        height: 17px;
        border: 2px solid #ffffff;
        border-radius: 4px;
    }

    .capture-zoom-control {
        position: absolute;
        top: 45%;
        right: 9px;
        z-index: 6;
        display: grid;
        gap: 0;
        padding: 5px;
        transform: translateY(-50%);
    }

    .capture-zoom-control button {
        min-width: 42px;
        min-height: 42px;
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        background: transparent;
        font-size: 0.84rem;
        font-weight: 900;
    }

    .capture-zoom-control button.active {
        color: #ffd60a;
        background: rgba(0, 0, 0, 0.24);
    }

    .capture-training-hint {
        position: absolute;
        right: 18px;
        bottom: calc(var(--capture-tabbar-h, 70px) + var(--capture-tray-h, 136px) + 26px);
        left: 18px;
        z-index: 12;
        display: grid;
        max-width: min(420px, calc(100% - 36px));
        gap: 4px;
        margin: 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 18px;
        padding: 12px 14px;
        color: #ffffff;
        background: rgba(11, 18, 32, 0.82);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
        text-align: center;
        backdrop-filter: blur(16px);
        pointer-events: none;
    }

    .capture-training-hint[hidden] {
        display: none;
    }

    .capture-training-hint strong {
        color: #ffffff;
        font-size: 1.08rem;
        line-height: 1.1;
    }

    .capture-training-hint span {
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .capture-training-hint.is-scanning {
        background: rgba(15, 23, 42, 0.74);
    }

    .capture-training-hint.is-error {
        background: rgba(127, 29, 29, 0.82);
    }

    .capture-floating-action {
        position: absolute;
        z-index: 7;
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
        border: 0;
    }

    .capture-flash-button {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 30px);
        left: 16px;
    }

    .capture-flip-button {
        right: 16px;
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 30px);
    }

    .capture-photo-button {
        position: absolute;
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 12px);
        left: 50%;
        z-index: 8;
        display: grid;
        width: 94px;
        height: 94px;
        place-items: center;
        border: 4px solid rgba(255, 255, 255, 0.84);
        border-radius: 999px;
        padding: 12px 8px;
        color: #111827;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
        text-align: center;
        text-transform: uppercase;
        transform: translateX(-50%);
    }

    .capture-photo-icon {
        position: relative;
        width: 25px;
        height: 20px;
        border: 3px solid #111827;
        border-radius: 5px;
    }

    .capture-photo-button strong {
        color: #111827;
        font-size: 0.66rem;
        line-height: 1.05;
    }

    .capture-start-recording {
        position: absolute;
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 112px);
        left: 50%;
        z-index: 9;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        padding: 0 16px;
        color: #ffffff;
        background: #d83a3a;
        font-size: 0.76rem;
        font-weight: 900;
        text-transform: uppercase;
        transform: translateX(-50%);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    }

    .capture-start-recording:disabled {
        opacity: 0;
        pointer-events: none;
    }

    .capture-photo-button:disabled {
        opacity: 0.54;
    }

    .capture-camera-permission {
        z-index: 30;
        display: grid;
        place-content: center;
        gap: 14px;
        padding: 22px;
        background: linear-gradient(180deg, rgba(5, 10, 20, 0.24), rgba(5, 10, 20, 0.82));
        text-align: center;
    }

    .capture-camera-permission[hidden] {
        display: none;
    }

    .capture-camera-permission h2 {
        margin: 0;
        color: #ffffff;
        font-size: 1.55rem;
        line-height: 1.1;
    }

    .capture-camera-permission p {
        display: none;
    }

    .capture-camera-permission .capture-install-hint {
        display: block;
        max-width: 320px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.84rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .capture-control-tray {
        position: absolute;
        right: 9px;
        bottom: var(--capture-tabbar-h);
        left: 9px;
        z-index: 10;
        display: grid;
        height: var(--capture-tray-h);
        max-height: 35dvh;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 8px;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        padding: 10px 10px 8px;
        color: #ffffff;
        background: rgba(13, 16, 23, 0.88);
        box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(18px);
    }

    .capture-recorder-controls {
        display: grid;
        grid-template-columns: 1fr 1.18fr 1fr;
        align-items: center;
        gap: 8px;
    }

    .capture-tray-button,
    .capture-stop-button {
        display: grid;
        min-width: 0;
        min-height: 62px;
        place-items: center;
        gap: 4px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 999px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.66rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .capture-stop-button {
        min-height: 76px;
        border: 2px solid rgba(255, 92, 92, 0.8);
        background: radial-gradient(circle at 50% 38%, #ed4c4c, #c72e2e);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04);
    }

    .capture-stop-button:disabled,
    .capture-tray-button:disabled {
        opacity: 0.48;
    }

    .capture-pause-icon,
    .capture-stop-icon,
    .capture-note-icon {
        position: relative;
        width: 22px;
        height: 22px;
    }

    .capture-status-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 8px;
    }

    .capture-status-row div {
        display: grid;
        min-width: 0;
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 7px;
        align-items: center;
    }

    .capture-status-row strong,
    .capture-status-row small {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .capture-status-row strong {
        color: #ffffff;
        font-size: 0.76rem;
    }

    .capture-status-row small {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.66rem;
        font-weight: 700;
    }

    .capture-status-icon {
        display: grid;
        width: 22px;
        height: 22px;
        grid-row: span 2;
        place-items: center;
        border-radius: 999px;
    }

    .capture-gallery {
        display: flex;
        min-height: 64px;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .capture-gallery::-webkit-scrollbar {
        display: none;
    }

    .capture-gallery .form-note {
        display: none;
    }

    .capture-gallery figure {
        position: relative;
        width: 68px;
        height: 62px;
        flex: 0 0 68px;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        margin: 0;
        background: rgba(255, 255, 255, 0.08);
        scroll-snap-align: start;
    }

    .capture-gallery figure:last-child {
        border-color: #ffd60a;
    }

    .capture-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .capture-gallery figcaption {
        position: absolute;
        right: 4px;
        bottom: 4px;
        border-radius: 999px;
        padding: 2px 6px;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.66);
        font-size: 0.62rem;
        font-weight: 900;
    }

    .capture-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        display: grid;
        min-height: var(--capture-tabbar-h);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 5px 8px calc(6px + env(safe-area-inset-bottom));
        background: rgba(6, 8, 12, 0.96);
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
    }

    .capture-tabbar.compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .capture-tabbar button {
        position: relative;
        display: grid;
        min-width: 0;
        min-height: 50px;
        place-items: center;
        gap: 2px;
        border: 0;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.58);
        background: transparent;
        font-size: 0.68rem;
        font-weight: 800;
    }

    .capture-tabbar button.active {
        color: #0a84ff;
    }

    .capture-live-info-panel {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
    }

    .capture-live-info-item {
        display: grid;
        min-width: 0;
        min-height: 50px;
        align-content: center;
        gap: 2px;
        border-radius: 10px;
        padding: 6px 4px;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.055);
        text-align: center;
    }

    .capture-live-info-item span {
        overflow: hidden;
        font-size: 0.58rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .capture-live-info-item strong {
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 950;
        line-height: 1;
    }

    .capture-tabbar em {
        position: absolute;
        top: 2px;
        right: 28%;
        min-width: 18px;
        border-radius: 999px;
        padding: 2px 5px;
        color: #ffffff;
        background: #ff453a;
        font-size: 0.62rem;
        font-style: normal;
        line-height: 1;
    }
}

@media (max-width: 920px) and (max-height: 720px) {
    .capture-screen {
        --capture-tray-h: clamp(158px, 30dvh, 188px);
    }

    .capture-overlay-top {
        top: 7px;
    }

    .capture-recording-badge,
    .capture-photo-count,
    .capture-audio-pill {
        min-height: 40px;
        padding: 6px 8px;
    }

    .capture-audio-pill {
        min-width: 72px;
    }

    .capture-wave i:nth-child(n+5) {
        display: none;
    }

    .capture-tray-button,
    .capture-stop-button {
        min-height: 52px;
    }

    .capture-stop-button {
        min-height: 62px;
    }

    .capture-tray-button strong,
    .capture-stop-button strong {
        display: none;
    }

    .capture-status-row {
        padding-top: 6px;
    }

    .capture-status-row small {
        display: none;
    }

    .capture-gallery {
        min-height: 54px;
    }

    .capture-gallery figure {
        width: 60px;
        height: 52px;
        flex-basis: 60px;
    }

    .capture-photo-button {
        width: 82px;
        height: 82px;
        padding: 10px 7px;
    }

    .capture-photo-button strong {
        font-size: 0.6rem;
    }

    .capture-start-recording {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 100px);
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen {
        --capture-tabbar-h: 56px;
        --capture-tray-h: clamp(112px, 34dvh, 150px);
    }

    .capture-header {
        height: calc(46px + env(safe-area-inset-top));
        min-height: calc(46px + env(safe-area-inset-top));
        flex-basis: calc(46px + env(safe-area-inset-top));
        padding-top: calc(3px + env(safe-area-inset-top));
        padding-bottom: 3px;
    }

    .capture-tag-bar {
        min-height: 50px;
        flex-basis: 50px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .capture-tag-pill {
        min-height: 42px;
    }

    .capture-overlay-top {
        top: 7px;
        right: 76px;
        left: 76px;
    }

    .capture-control-tray {
        right: 74px;
        left: 74px;
        grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr);
        grid-template-rows: auto minmax(46px, 1fr);
        align-items: center;
        padding: 8px 10px;
    }

    .capture-recorder-controls {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
    }

    .capture-screen .capture-recorder-controls .capture-photo-button:not(.capture-video-record-button) {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .capture-status-row {
        border-top: 0;
        padding-top: 0;
    }

    .capture-gallery {
        grid-column: 1 / -1;
        min-height: 48px;
    }

    .capture-gallery figure {
        width: 58px;
        height: 46px;
        flex-basis: 58px;
    }

    .capture-photo-button {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 8px);
        width: 76px;
        height: 76px;
    }

    .capture-start-recording {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 86px);
    }

    .capture-flash-button,
    .capture-flip-button {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 18px);
    }
}

@media (max-width: 920px) {
    .capture-screen {
        --capture-tray-h: clamp(118px, 20dvh, 148px);
    }

    .capture-tag-bar {
        min-height: 0;
        flex-basis: 0;
        justify-content: center;
        overflow: hidden;
        padding: 0;
    }

    .capture-tag-pill {
        min-width: min(58vw, 210px);
        max-width: min(64vw, 240px);
    }

    .capture-hidden-tags {
        display: none !important;
    }

    .capture-tag-bar select[hidden],
    .capture-tag-bar .capture-filter-button {
        display: none !important;
    }

    .capture-audio-pill {
        min-width: 116px;
    }

    .capture-wave {
        display: none !important;
    }

    .capture-audio-meter {
        display: inline-flex;
        height: 24px;
        align-items: center;
        gap: 3px;
    }

    .capture-audio-meter i {
        display: block;
        width: 4px;
        height: 22px;
        border-radius: 999px;
        background: #30d158;
        transform: scaleY(0.1);
        transform-origin: center bottom;
        transition: transform 90ms linear;
    }

    .capture-photo-count {
        min-width: 72px;
    }

    .capture-flash-button,
    .capture-flip-button {
        bottom: calc(var(--capture-tabbar-h) + var(--capture-tray-h) + 18px);
        width: 48px;
        height: 48px;
    }

    .capture-start-recording {
        display: none !important;
    }

    .capture-control-tray {
        height: var(--capture-tray-h);
        max-height: 24dvh;
        bottom: calc(var(--capture-tabbar-h) - 18px);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 6px;
        padding: 8px 12px 10px;
    }

    .capture-recorder-controls {
        grid-row: 2;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        align-self: end;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        min-height: 80px;
    }

    .capture-screen .capture-recorder-controls .capture-photo-button:not(.capture-video-record-button) {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .capture-control-tray.is-capture-idle-survey .capture-pause-recording-button,
    .capture-control-tray.is-capture-idle-survey .capture-photo-button:not(.capture-video-record-button) {
        display: none !important;
    }

    .capture-tray-button {
        display: grid;
        width: 58px;
        height: 58px;
        min-height: 58px;
        place-items: center;
        gap: 3px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.6rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .capture-tray-button strong {
        color: #ffffff;
        font-size: 0.58rem;
        line-height: 1;
    }

    .capture-record-icon {
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
    }

    .capture-record-toggle .capture-record-icon::before {
        content: none;
        display: none;
    }

    .capture-record-toggle.is-recording .capture-record-icon::before {
        content: "";
        display: block;
        position: absolute;
        inset: 4px;
        border-radius: 3px;
        background: #ffffff;
    }

    .capture-photo-button {
        position: static;
        display: grid;
        width: 76px;
        height: 76px;
        min-height: 76px;
        place-items: center;
        border: 5px solid rgba(255, 255, 255, 0.78);
        border-radius: 999px;
        padding: 0;
        color: #111827;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
        transform: none;
    }

    .capture-photo-button strong {
        display: none;
    }

    .capture-photo-icon {
        width: 27px;
        height: 22px;
    }

    .capture-status-row {
        display: none !important;
    }

    .capture-gallery {
        grid-row: 1;
        align-self: end;
        min-height: 48px;
    }

    .capture-gallery figure {
        width: 58px;
        height: 48px;
        flex-basis: 58px;
    }
}

@media (max-width: 920px) and (max-height: 720px) {
    .capture-screen {
        --capture-tray-h: clamp(104px, 19dvh, 130px);
    }

    .capture-control-tray {
        max-height: 23dvh;
        bottom: calc(var(--capture-tabbar-h) - 20px);
    }

    .capture-recorder-controls {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .capture-tray-button {
        width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .capture-photo-button {
        width: 68px;
        height: 68px;
        min-height: 68px;
    }

    .capture-gallery {
        min-height: 38px;
    }

    .capture-gallery figure {
        width: 50px;
        height: 38px;
        flex-basis: 50px;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen {
        --capture-tray-h: clamp(92px, 28dvh, 118px);
    }

    .capture-control-tray {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 0.72fr);
        grid-template-rows: minmax(58px, auto);
        bottom: calc(var(--capture-tabbar-h) - 14px);
    }

    .capture-gallery {
        grid-column: auto;
    }
}

@media (max-width: 920px) {
    .capture-header {
        color: #ffffff;
        background: rgba(6, 8, 12, 0.96);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .capture-header h2 {
        color: #ffffff;
    }

    .capture-back-button,
    .capture-finish-button {
        color: #ffffff;
    }

    .capture-more-button {
        border-color: rgba(255, 255, 255, 0.68);
        color: #ffffff;
    }

    .capture-control-tray {
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .capture-recorder-controls {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 76px;
    }

    /* Keep record button absolutely centred on the tray; do not force static (breaks visibility/layout). */
    .capture-toolbar-button,
    .capture-photo-button {
        position: static !important;
    }

    .capture-toolbar-button {
        display: grid;
        width: 58px;
        height: 58px;
        min-height: 58px;
        place-items: center;
        border: 2px solid rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        color: #ffffff;
        background: rgba(8, 12, 18, 0.56);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(12px);
    }

    .capture-toolbar-button.active {
        color: #ffd60a;
        border-color: rgba(255, 214, 10, 0.8);
    }

    .capture-photo-button {
        width: 76px;
        height: 76px;
        min-height: 76px;
    }

    .capture-record-toggle {
        width: 68px;
        height: 68px;
        min-height: 68px;
    }

    .capture-tabbar {
        transition: transform 190ms ease, opacity 190ms ease;
        will-change: transform;
    }

    .capture-tabbar-handle {
        position: fixed;
        right: 50%;
        bottom: calc(var(--capture-tabbar-h) - 8px);
        z-index: 25;
        display: grid;
        width: 62px;
        height: 22px;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: rgba(6, 8, 12, 0.88);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
        transform: translateX(50%);
    }

    .capture-tabbar-handle span {
        display: block;
        width: 34px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.66);
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar {
        opacity: 0.94;
        transform: translateY(calc(100% - 12px - env(safe-area-inset-bottom)));
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar-handle {
        bottom: calc(7px + env(safe-area-inset-bottom));
    }

    .capture-screen.is-live-toolbar-collapsed .capture-control-tray {
        bottom: calc(9px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-control-tray {
        top: calc(56px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 6px);
        left: auto;
        display: flex;
        width: 78px;
        height: auto;
        max-height: none;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        pointer-events: none;
    }

    .capture-recorder-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: auto;
    }

    .capture-pause-recording-button {
        order: 2;
    }

    .capture-record-toggle {
        order: 3;
    }

    .capture-photo-button:not(.capture-video-record-button) {
        order: 4;
    }

    .capture-video-record-button {
        order: 5;
    }

    .capture-photo-button {
        width: 68px;
        height: 68px;
        min-height: 68px;
    }

    .capture-toolbar-button {
        width: 54px;
        height: 54px;
        min-height: 54px;
    }

    .capture-gallery {
        position: fixed;
        right: calc(100px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 8px);
        left: calc(12px + env(safe-area-inset-left));
        z-index: 13;
        min-height: 46px;
        align-self: auto;
        border-radius: 10px;
        padding: 0;
    }

    .capture-gallery figure {
        width: 58px;
        height: 44px;
        flex-basis: 58px;
    }

    .capture-overlay-top {
        top: calc(58px + env(safe-area-inset-top));
        right: auto;
        left: calc(12px + env(safe-area-inset-left));
        display: flex;
        width: 72px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count {
        width: 72px;
        min-width: 72px;
        min-height: 44px;
        justify-content: center;
        padding: 6px;
    }

    .capture-recording-badge {
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .capture-recording-badge .recording-dot {
        margin: 0;
    }

    .capture-recording-badge strong {
        display: none;
    }

    .capture-audio-pill {
        gap: 6px;
    }

    .capture-audio-meter {
        height: 28px;
        transform: rotate(90deg);
    }

    .capture-photo-count {
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .capture-photo-count .capture-image-icon {
        margin: 0 auto;
    }

    .capture-photo-count span {
        font-size: 0.58rem;
    }

    .capture-zoom-control {
        top: 50%;
        right: calc(96px + env(safe-area-inset-right));
        transform: translateY(-50%);
    }

    .capture-screen.is-live-toolbar-collapsed .capture-control-tray {
        bottom: calc(9px + env(safe-area-inset-bottom));
    }

    .capture-screen.is-live-toolbar-collapsed .capture-gallery {
        bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 920px) {
    .capture-tabbar {
        right: auto;
        bottom: -5px;
        left: 50%;
        width: min(342px, calc(100vw - 28px));
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        transform: translateX(-50%);
        transition: transform 190ms ease, opacity 190ms ease, visibility 190ms ease;
    }

    .capture-tabbar-handle {
        right: auto;
        bottom: calc(var(--capture-tabbar-h) + 4px);
        left: 50%;
        width: 54px;
        height: 30px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        transform: translateX(-50%);
    }

    .capture-tabbar-handle span {
        width: 16px;
        height: 16px;
        border-right: 3px solid rgba(255, 255, 255, 0.78);
        border-bottom: 3px solid rgba(255, 255, 255, 0.78);
        border-radius: 0;
        background: transparent;
        transform: translateY(-3px) rotate(45deg);
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(100% + 18px));
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar button {
        visibility: hidden;
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar-handle {
        bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar-handle span {
        transform: translateY(3px) rotate(225deg);
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-tabbar {
        width: min(430px, calc(100vw - 190px));
        min-height: calc(var(--capture-tabbar-h) - 6px);
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .capture-tabbar button {
        min-height: 44px;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-header {
        grid-template-columns: 108px minmax(0, 1fr) 58px;
        padding-right: calc(18px + env(safe-area-inset-right));
        padding-left: calc(18px + env(safe-area-inset-left));
    }

    .capture-back-button,
    .capture-finish-button {
        justify-self: start;
        padding-left: 2px;
    }

    .capture-more-button,
    .capture-refresh-button {
        justify-self: end;
        margin-right: 2px;
    }

    .capture-control-tray {
        top: calc(60px + env(safe-area-inset-top));
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 16px);
        width: 74px;
        overflow: visible;
        align-items: center;
        justify-content: center;
    }

    .capture-recorder-controls {
        gap: 8px;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .capture-toolbar-button {
        width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .capture-record-toggle {
        width: 56px;
        height: 56px;
        min-height: 56px;
    }

    .capture-photo-button {
        width: 62px;
        height: 62px;
        min-height: 62px;
    }

    .capture-overlay-top {
        top: calc(60px + env(safe-area-inset-top));
        left: calc(14px + env(safe-area-inset-left));
        width: 80px;
        gap: 7px;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count {
        width: 80px;
        min-width: 80px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .capture-audio-pill {
        min-height: 58px;
        flex-direction: column;
        gap: 5px;
        padding: 6px;
    }

    .capture-audio-meter {
        width: 52px;
        height: 20px;
        justify-content: center;
        overflow: hidden;
        transform: none;
    }

    .capture-audio-meter i {
        width: 3px;
        height: 18px;
    }
}

@media (max-width: 920px) {
    .capture-header {
        grid-template-columns: 92px minmax(0, 1fr) 54px;
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-left: calc(16px + env(safe-area-inset-left));
    }

    .capture-back-button,
    .capture-finish-button {
        justify-self: start;
        padding-left: 2px;
    }

    .capture-more-button,
    .capture-refresh-button {
        justify-self: end;
        margin-right: 2px;
    }

    .capture-control-tray {
        overflow: visible;
    }
}

@media (max-width: 920px) and (orientation: portrait) {
    .capture-control-tray {
        bottom: calc(var(--capture-tabbar-h) - 9px);
    }

    .capture-recorder-controls {
        transform: none;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-header {
        grid-template-columns: 118px minmax(0, 1fr) 62px;
        padding-right: calc(24px + env(safe-area-inset-right));
        padding-left: calc(24px + env(safe-area-inset-left));
    }

    .capture-control-tray {
        top: calc(58px + env(safe-area-inset-top));
        right: calc(18px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 18px);
        width: 88px;
        min-width: 88px;
        max-height: none;
        align-items: center;
        justify-content: center;
        overflow: visible;
        padding: 4px 0;
    }

    .capture-recorder-controls {
        width: 88px;
        gap: 8px;
        align-items: center;
        justify-content: center;
        overflow: visible;
        transform: none;
    }

    .capture-toolbar-button {
        width: 54px;
        height: 54px;
        min-height: 54px;
    }

    .capture-record-toggle {
        width: 60px;
        height: 60px;
        min-height: 60px;
    }

    .capture-photo-button {
        width: 68px;
        height: 68px;
        min-height: 68px;
        border-width: 4px;
    }

    .capture-overlay-top {
        top: calc(60px + env(safe-area-inset-top));
        left: calc(18px + env(safe-area-inset-left));
        width: 94px;
        max-width: 94px;
        gap: 8px;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count {
        width: 94px;
        min-width: 94px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .capture-audio-pill {
        min-height: 64px;
        padding: 7px 6px;
    }

    .capture-audio-meter {
        width: 64px;
        max-width: 64px;
        height: 24px;
        justify-content: center;
        overflow: hidden;
        transform: none;
    }

    .capture-audio-meter i {
        width: 4px;
        height: 20px;
        flex: 0 0 4px;
    }

    .capture-zoom-control {
        right: calc(112px + env(safe-area-inset-right));
    }

    .capture-gallery {
        right: calc(112px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 10px);
    }

    .capture-tabbar-handle {
        bottom: calc(var(--capture-tabbar-h) + 12px);
    }

    .capture-screen.is-live-toolbar-collapsed .capture-tabbar-handle {
        bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-control-tray {
        top: calc(54px + env(safe-area-inset-top));
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 14px);
        width: 82px;
        min-width: 82px;
    }

    .capture-recorder-controls {
        width: 82px;
        gap: 6px;
    }

    .capture-toolbar-button {
        width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .capture-record-toggle {
        width: 56px;
        height: 56px;
        min-height: 56px;
    }

    .capture-photo-button {
        width: 62px;
        height: 62px;
        min-height: 62px;
    }
}

.report-renderer {
    display: grid;
    gap: 18px;
}

.report-render-block {
    border-color: rgba(15, 23, 42, 0.08);
}

.report-render-summary-grid {
    align-items: stretch;
}

.report-contents-list {
    display: grid;
    gap: 8px;
}

.report-contents-list a {
    display: grid;
    grid-template-columns: minmax(42px, auto) 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    color: #0f1b2d;
    text-decoration: none;
    background: #fff;
}

.report-contents-list a:hover {
    border-color: rgba(45, 212, 111, 0.55);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.report-contents-list span {
    display: inline-flex;
    min-width: 36px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef6ff;
    color: #0f4d7f;
    font-size: 12px;
    font-weight: 700;
}

.report-contents-list strong {
    font-size: 14px;
    font-weight: 600;
}

.report-concern-list {
    display: grid;
    gap: 10px;
}

.report-concern-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
}

.report-concern-item:hover {
    border-color: rgba(15, 23, 42, 0.2);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.report-concern-item .condition-rating-badge {
    grid-row: span 3;
    align-self: start;
}

.report-concern-item strong {
    font-size: 15px;
    font-weight: 700;
}

.report-concern-item small {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.report-concern-item em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

.report-section-photo-strip {
    margin-top: 14px;
}

@media (max-width: 560px) {
    .report-concern-item {
        grid-template-columns: 1fr;
    }

    .report-concern-item .condition-rating-badge {
        grid-row: auto;
        justify-self: start;
    }
}

/* Report renderer premium presentation layer */
.report-renderer {
    --rr-navy: #0b1321;
    --rr-ink: #17202c;
    --rr-muted: #64748b;
    --rr-line: rgba(15, 23, 42, 0.1);
    --rr-soft: #f8fafc;
    --rr-green: #16a34a;
    --rr-blue: #1b5af9;
    --rr-amber: #f59e0b;
    --rr-red: #dc2626;
    --rr-shadow: 0 14px 40px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--rr-ink);
    font-size: 15px;
    line-height: 1.62;
}

.report-renderer .output-summary-card,
.report-renderer .output-preview-card,
.report-renderer .report-render-report-body {
    border-color: var(--rr-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--rr-shadow);
}

.report-renderer .section-head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rr-line);
}

.report-renderer .section-head h2,
.report-renderer .output-summary-card h2 {
    color: var(--rr-navy);
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: 0;
}

.report-renderer .eyebrow {
    color: var(--rr-green);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
}

.report-renderer .form-note {
    color: var(--rr-muted);
    font-size: 0.88rem;
}

.report-render-summary-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.report-render-summary-grid .output-summary-card:first-child {
    border-left: 4px solid var(--rr-green);
}

.report-render-summary-grid .output-summary-card p[data-summary-output-text] {
    color: var(--rr-ink);
    font-size: 0.96rem;
    line-height: 1.7;
}

.report-contents {
    overflow: hidden;
}

.report-contents .section-head {
    margin-bottom: 0;
    border-bottom: 0;
}

.report-contents-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--rr-line);
    border-radius: 12px;
    background: #ffffff;
}

.report-contents-list a {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--rr-line);
    border-radius: 0;
    padding: 10px 14px;
    background: #ffffff;
}

.report-contents-list a:last-child {
    border-bottom: 0;
}

.report-contents-list a:hover {
    background: #f8fafc;
    box-shadow: none;
}

.report-contents-list span {
    min-width: 48px;
    min-height: 28px;
    border: 1px solid rgba(27, 90, 249, 0.16);
    background: rgba(27, 90, 249, 0.07);
    color: #1648d4;
    font-size: 0.74rem;
    font-weight: 850;
}

.report-contents-list strong {
    color: var(--rr-navy);
    font-size: 0.92rem;
    font-weight: 650;
}

.report-condition-summary {
    border-top: 4px solid var(--rr-navy);
}

.report-concerns {
    border-top: 4px solid var(--rr-red);
}

.report-concern-list {
    gap: 9px;
}

.report-concern-item {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 14px 16px;
    border-color: var(--rr-line);
    border-radius: 12px;
    background: #ffffff;
}

.report-concern-item .condition-rating-badge {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    box-shadow: none;
}

.report-concern-item strong {
    color: var(--rr-navy);
    font-size: 0.98rem;
    font-weight: 750;
}

.report-concern-item small {
    color: #475569;
    font-size: 0.86rem;
}

.report-concern-item em {
    color: #64748b;
    font-size: 0.78rem;
}

.report-render-report-body {
    padding: 24px;
}

.report-render-report-body > [data-card-collapsible] {
    min-width: 0;
}

.report-renderer .output-section-list {
    gap: 0;
}

.report-renderer .output-section {
    gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--rr-line);
}

.report-renderer .output-section:first-child {
    padding-top: 0;
}

.report-renderer .output-section > header {
    align-items: center;
    padding: 0;
}

.report-renderer .output-section h3 {
    color: var(--rr-navy);
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.28;
}

.report-renderer .section-order {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    margin: 0 0 6px;
    border-radius: 999px;
    padding: 3px 8px;
    color: #1648d4;
    background: rgba(27, 90, 249, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.report-renderer .section-body {
    max-width: 78ch;
    color: var(--rr-ink);
    font-size: 0.96rem;
    line-height: 1.72;
}

.report-renderer .output-section-text {
    min-height: 220px;
    border-color: rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    color: var(--rr-ink);
    font-size: 0.96rem;
    line-height: 1.72;
}

.report-fixed-text-section {
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #fbfdff;
}

.report-fixed-text-section > header {
    margin-bottom: 4px;
}

.report-body-section {
    break-inside: avoid;
}

.report-section-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.report-section-photo-strip figure {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #ffffff;
}

.report-section-photo-strip img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.report-section-photo-strip figcaption {
    padding: 7px 8px;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.32;
}

.report-back-page {
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--rr-navy);
    color: #ffffff;
}

.report-back-page-inner {
    display: grid;
    min-height: 360px;
    place-items: center;
    padding: 48px 28px;
    text-align: center;
    background:
        radial-gradient(circle at 20% 10%, rgba(27, 90, 249, 0.16), transparent 30%),
        linear-gradient(135deg, #0b1321, #0b1321);
}

.report-back-kicker {
    margin: 0;
    color: #1b5af9;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.report-back-page h2 {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 800;
}

.report-back-address {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
}

.report-back-rule {
    width: 72px;
    height: 3px;
    margin: 20px auto;
    border-radius: 999px;
    background: #1b5af9;
}

.report-back-copy {
    max-width: 560px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.96rem;
}

.report-back-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
}

.report-back-meta div {
    min-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.06);
}

.report-back-meta dt,
.report-back-meta dd {
    margin: 0;
}

.report-back-meta dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
}

.report-back-meta dd {
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 650;
}

@media (max-width: 860px) {
    .report-render-summary-grid {
        grid-template-columns: 1fr;
    }

    .report-section-photo-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .report-render-report-body,
    .report-renderer .output-summary-card,
    .report-renderer .output-preview-card {
        padding: 16px;
    }

    .report-contents-list a {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 10px;
    }

    .report-renderer .output-section > header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .report-section-photo-strip {
        grid-template-columns: 1fr;
    }
}

@media print {
    .report-renderer {
        display: block;
        color: #0b1321;
        font-size: 10pt;
        line-height: 1.48;
    }

    .report-renderer .card,
    .report-renderer .output-preview-card,
    .report-renderer .output-summary-card,
    .report-render-report-body {
        box-shadow: none !important;
    }

    .report-render-block,
    .report-renderer .output-section,
    .condition-rating-summary-card,
    .report-concern-item,
    .report-section-photo-strip figure {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-contents,
    .report-condition-summary,
    .report-concerns {
        break-after: page;
        page-break-after: always;
    }

    .report-back-page {
        break-before: page;
        page-break-before: always;
    }

    .report-renderer .section-head,
    .report-renderer .output-section > header {
        break-after: avoid;
        page-break-after: avoid;
    }

    .report-section-photo-strip {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 4pt;
    }

    .report-section-photo-strip figure {
        display: table-cell;
        width: 25%;
        vertical-align: top;
    }
}

.template-composer {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
}

.template-composer-list {
    display: grid;
    gap: 12px;
}

.template-composer-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    padding: 12px;
    background: #fbfdff;
}

.template-composer-row[draggable="true"] {
    cursor: grab;
}

.template-composer-row--new {
    border-style: dashed;
}

.template-composer-grip {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    color: var(--navy);
    background: #edf4ff;
    font-weight: 900;
}

.template-composer-grid {
    grid-template-columns: 90px 110px minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(190px, 1fr) 90px;
    gap: 10px;
}

.template-composer-flags {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: -2px;
}

.inline-input-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

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

@media (max-width: 920px) {
    .capture-recorder-controls {
        grid-template-columns: repeat(4, 68px);
        justify-content: center;
        justify-items: center;
    }

    .capture-toolbar-button,
    .capture-photo-button,
    .capture-record-toggle {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        padding: 0;
    }

    .capture-photo-button {
        border-width: 4px;
    }

    .capture-record-toggle strong {
        display: none !important;
    }

    .capture-record-icon {
        width: 26px;
        height: 26px;
    }

    .capture-record-toggle .capture-record-icon::before {
        content: none;
        display: none;
    }

    .capture-record-toggle.is-recording .capture-record-icon::before {
        content: "";
        display: block;
        position: absolute;
        inset: auto;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        margin: 0;
        border: 0;
        border-radius: 4px;
        background: #ffffff;
        transform: translate(-50%, -50%);
    }

    .capture-flip-button span {
        position: relative;
        width: 28px;
        height: 18px;
        border: 2px solid currentColor;
        border-radius: 999px / 72%;
    }

    .capture-flip-button span::before {
        position: absolute;
        inset: auto;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        content: "";
        border: 0;
        border-radius: 999px;
        background: currentColor;
        transform: translate(-50%, -50%);
    }

    .capture-flip-button span::after {
        display: none;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-control-tray {
        width: 78px;
        min-width: 78px;
    }

    .capture-recorder-controls {
        width: 78px;
        gap: 7px;
    }

    .capture-toolbar-button,
    .capture-photo-button,
    .capture-record-toggle {
        width: 58px;
        height: 58px;
        min-width: 58px;
        min-height: 58px;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-control-tray,
    .capture-recorder-controls {
        width: 74px;
        min-width: 74px;
    }

    .capture-toolbar-button,
    .capture-photo-button,
    .capture-record-toggle {
        width: 54px;
        height: 54px;
        min-width: 54px;
        min-height: 54px;
    }
}

@media (max-width: 920px) {
    audio[data-live-audio-preview]:not([hidden]) {
        position: fixed;
        right: auto;
        bottom: calc(var(--capture-tabbar-h) + 42px);
        left: 50%;
        z-index: 26;
        display: block;
        width: min(320px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        height: 38px;
        transform: translateX(-50%);
    }

    .capture-screen.is-live-toolbar-collapsed audio[data-live-audio-preview]:not([hidden]) {
        bottom: calc(48px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    audio[data-live-audio-preview]:not([hidden]) {
        bottom: calc(var(--capture-tabbar-h) + 28px);
        width: min(360px, calc(100vw - 210px));
        max-width: calc(100vw - 210px);
    }

    .capture-screen.is-live-toolbar-collapsed audio[data-live-audio-preview]:not([hidden]) {
        bottom: calc(28px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 920px) {
    .capture-header {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .capture-header h2,
    .capture-back-button,
    .capture-finish-button,
    .capture-more-button,
    .capture-refresh-button {
        color: #ffffff;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    }

    .capture-more-button,
    .capture-refresh-button {
        background: rgba(0, 0, 0, 0.18);
        border-color: rgba(255, 255, 255, 0.64);
    }

    .capture-training-toggle {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.82rem;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-training-hint {
        right: calc(104px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h, 54px) + 10px);
        left: calc(84px + env(safe-area-inset-left));
        max-width: none;
        padding: 8px 10px;
    }

    .capture-training-hint strong {
        font-size: 0.92rem;
    }

    .capture-training-hint span {
        display: none;
    }
}

/* SurvAI Cam: single record control and cleaner landscape action rail. */
@media (max-width: 920px) {
    .capture-pause-recording-button,
    .capture-video-record-button,
    .capture-control-tray.is-video-mode .capture-video-record-button {
        display: none !important;
    }

    .capture-recorder-controls {
        grid-template-columns: repeat(2, 68px);
        justify-content: center;
        justify-items: center;
    }

    .capture-control-tray.is-video-mode .capture-record-toggle {
        position: relative;
        left: auto;
        transform: none;
    }

    .capture-control-tray.is-video-mode .capture-photo-button:not(.capture-video-record-button) {
        display: grid !important;
        margin-left: 0;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-top-camera-tools {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
    }

    .capture-top-camera-tools .capture-torch-cluster {
        width: 70px;
    }

    .capture-control-tray {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
        min-width: 70px;
    }

    .capture-recorder-controls {
        width: 70px;
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 11px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .capture-record-toggle .capture-record-icon,
    .capture-photo-button .capture-photo-icon,
    .capture-toolbar-button > span {
        transform: rotate(90deg);
        transform-origin: center;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-top-camera-tools,
    .capture-top-camera-tools .capture-torch-cluster,
    .capture-control-tray,
    .capture-recorder-controls {
        width: 64px;
        min-width: 64px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
}

/* Live Survey Capture final authoritative control positions. This block intentionally follows all older camera overrides. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: calc(12px + env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button,
    .capture-screen.is-main-camera .capture-flash-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.34) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-refresh-button svg,
    .capture-screen.is-main-camera .capture-flash-button span {
        width: 18px !important;
        height: 18px !important;
    }

    .capture-screen.is-main-camera .capture-torch-cluster {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 44px !important;
        min-width: 44px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-torch-auto-chip,
    .capture-screen.is-main-camera .capture-flip-button,
    .capture-screen.is-main-camera .live-capture-mode-row,
    .capture-screen.is-main-camera audio[data-live-audio-preview] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recording-badge {
        display: inline-flex !important;
        width: auto !important;
        min-width: 72px !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        padding: 7px 10px !important;
        background: rgba(0, 0, 0, 0.38) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge strong,
    .capture-screen.is-main-camera .capture-recording-badge em {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge span:not(.recording-dot) {
        color: #ffffff !important;
        font-size: 0.86rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge .recording-dot:not(.is-recording) {
        opacity: 0.45;
        background: rgba(255, 255, 255, 0.75);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        place-items: center !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, 64px) !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        gap: 22px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border-width: 4px !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        top: calc(62px + env(safe-area-inset-top)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: translateY(56px);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(18px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 74px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 74px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 64px) !important;
        gap: 30px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        transform: rotate(-45deg) !important;
        transform-origin: center !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon,
    .capture-screen.is-main-camera .capture-toolbar-button > span {
        transform: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-rows: repeat(2, 58px) !important;
        gap: 24px !important;
    }
}

/* Live Survey Capture final positioning overrides: keep this block last. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        grid-template-columns: repeat(2, 96px) !important;
        gap: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        max-width: 96px !important;
        max-height: 96px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border: 5px solid rgba(255, 255, 255, 0.55) !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        box-shadow:
            0 0 0 5px rgba(0, 0, 0, 0.24),
            0 12px 30px rgba(0, 0, 0, 0.36) !important;
    }

    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
        z-index: 74 !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar {
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(120%) !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar button {
        display: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(6px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 108px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 108px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 90px) !important;
        gap: 26px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle,
    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        right: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-rows: repeat(2, 78px) !important;
        gap: 16px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
    }
}

/* Live Survey Capture save/layout refinement: final override for official capture camera only. */
.capture-live-audio-playback {
    margin-top: 8px;
}

.capture-live-audio-playback audio {
    display: block;
    width: min(100%, 360px);
    max-width: 100%;
}

@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-control-tray {
        bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-columns: repeat(2, 96px) !important;
        gap: 24px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        max-width: 96px !important;
        max-height: 96px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border: 6px solid rgba(255, 255, 255, 0.96) !important;
        background: #ffffff !important;
        box-shadow:
            inset 0 0 0 8px rgba(255, 255, 255, 0.96),
            inset 0 0 0 11px rgba(8, 12, 18, 0.12),
            0 10px 24px rgba(0, 0, 0, 0.28) !important;
    }

    .capture-screen.is-main-camera .capture-photo-icon,
    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, calc(100% + 22px)) !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar button {
        visibility: hidden !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(6px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 108px !important;
        min-width: 108px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 108px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 90px) !important;
        gap: 26px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle,
    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        right: auto !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-control-tray {
        right: calc(6px + env(safe-area-inset-right)) !important;
        width: 94px !important;
        min-width: 94px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 94px !important;
        grid-template-rows: repeat(2, 78px) !important;
        gap: 16px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
    }
}

/* Live Survey Capture authoritative mobile control positions. Keep this block last. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: calc(12px + env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button,
    .capture-screen.is-main-camera .capture-flash-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.34) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-refresh-button svg,
    .capture-screen.is-main-camera .capture-flash-button span {
        width: 18px !important;
        height: 18px !important;
    }

    .capture-screen.is-main-camera .capture-torch-cluster {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 44px !important;
        min-width: 44px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-torch-auto-chip,
    .capture-screen.is-main-camera .capture-flip-button,
    .capture-screen.is-main-camera .live-capture-mode-row,
    .capture-screen.is-main-camera audio[data-live-audio-preview] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recording-badge {
        display: inline-flex !important;
        width: auto !important;
        min-width: 72px !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        padding: 7px 10px !important;
        background: rgba(0, 0, 0, 0.38) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge strong,
    .capture-screen.is-main-camera .capture-recording-badge em {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge span:not(.recording-dot) {
        color: #ffffff !important;
        font-size: 0.86rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge .recording-dot:not(.is-recording) {
        opacity: 0.45;
        background: rgba(255, 255, 255, 0.75);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        place-items: center !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, 64px) !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        gap: 22px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border-width: 4px !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        top: calc(62px + env(safe-area-inset-top)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: translateY(56px);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(18px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 74px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 74px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 64px) !important;
        gap: 30px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        transform: rotate(-45deg) !important;
        transform-origin: center !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon,
    .capture-screen.is-main-camera .capture-toolbar-button > span {
        transform: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-rows: repeat(2, 58px) !important;
        gap: 24px !important;
    }
}

/* Live Survey Capture final control alignment: compact top-left utilities and stable main controls. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: calc(12px + env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button,
    .capture-screen.is-main-camera .capture-flash-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.34) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-refresh-button svg,
    .capture-screen.is-main-camera .capture-flash-button span {
        width: 18px !important;
        height: 18px !important;
    }

    .capture-screen.is-main-camera .capture-torch-cluster {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 44px !important;
        min-width: 44px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-torch-auto-chip,
    .capture-screen.is-main-camera .capture-flip-button,
    .capture-screen.is-main-camera .live-capture-mode-row,
    .capture-screen.is-main-camera audio[data-live-audio-preview] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recording-badge {
        display: inline-flex !important;
        width: auto !important;
        min-width: 72px !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        padding: 7px 10px !important;
        background: rgba(0, 0, 0, 0.38) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge strong,
    .capture-screen.is-main-camera .capture-recording-badge em {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge span:not(.recording-dot) {
        color: #ffffff !important;
        font-size: 0.86rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge .recording-dot:not(.is-recording) {
        opacity: 0.45;
        background: rgba(255, 255, 255, 0.75);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        place-items: center !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, 64px) !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        gap: 22px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border-width: 4px !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        top: calc(62px + env(safe-area-inset-top)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: translateY(56px);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(18px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 74px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 74px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 64px) !important;
        gap: 30px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        transform: rotate(-45deg) !important;
        transform-origin: center !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon,
    .capture-screen.is-main-camera .capture-toolbar-button > span {
        transform: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-rows: repeat(2, 58px) !important;
        gap: 24px !important;
    }
}

/* --- SurvAI Operational Dashboard --- */
.ops-dashboard-page {
    background: #f3f6fb;
}

.ops-dashboard-page .app-shell {
    --sidebar-width: var(--survai-app-rail-width);
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-width: 0;
}

@media (max-width: 1100px) {
    .ops-dashboard-page .app-shell {
        --sidebar-width: var(--survai-app-rail-width);
    }
}

.ops-dashboard {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--app-main-padding);
    box-sizing: border-box;
}

/* Settings hub: vertical gap between cards matches Business Dashboard `.ops-grid` (22px) */
body.settings-page .main-panel.ops-dashboard {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ops-dashboard.is-cards-compact .ops-grid--primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-dashboard.is-cards-compact .ops-grid--secondary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-dashboard.is-cards-compact .ops-grid--secondary:nth-of-type(4),
.ops-dashboard.is-cards-compact .ops-grid--secondary:nth-of-type(5) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-dashboard.is-cards-ultra .ops-grid--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-dashboard.is-cards-ultra .ops-grid--secondary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ops-dashboard.is-cards-ultra .ops-grid--secondary:nth-of-type(4),
.ops-dashboard.is-cards-ultra .ops-grid--secondary:nth-of-type(5) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 901px) {
    .sidebar--ops,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) {
        gap: 16px;
        padding: 22px 10px;
    }

    .sidebar--ops .sidebar-brand,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-brand {
        width: 100%;
        justify-content: center;
    }

    /* Horizontal wordmark on desktop; compact mark is handled by collapsed / mobile drawers. */
    .sidebar--ops .sidebar-brand::before,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-brand::before {
        display: none;
    }

    .sidebar--ops .brand-logo-sidebar,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .brand-logo-sidebar {
        display: block;
        width: min(420px, 100%);
        max-height: 108px;
        height: auto;
        margin: 0 auto;
        background-color: transparent !important;
        object-fit: contain;
        object-position: center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .sidebar-nav--ops,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav {
        gap: 6px;
        overflow-y: auto;
        padding-right: 0;
    }

    .sidebar-nav--ops a,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a {
        min-height: auto;
        border-radius: 14px;
        padding: 10px 4px;
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.82rem;
        line-height: 1.16;
        text-align: center;
    }

    .sidebar-nav--ops .sidebar-nav-icon,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav .sidebar-nav-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .sidebar-nav--ops .sidebar-nav-icon svg,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav .sidebar-nav-icon svg {
        stroke-width: 1.22;
    }

    .sidebar-nav--ops .sidebar-nav-label,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav .sidebar-nav-label {
        font-weight: 400;
        font-size: 0.82rem;
        line-height: 1.18;
    }
}

.sidebar-nav--ops a.active,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a.active {
    color: #ffffff;
    background: transparent;
}

.ops-line-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    flex: 0 0 18px;
    color: currentColor;
}

.ops-line-icon svg,
.ops-quick-actions svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ops-line-icon svg .sai-icon-fill {
    fill: none;
    stroke: none;
    opacity: 0;
}

.ops-line-icon svg .sai-icon-accent,
.workspace-tool-button__icon svg .sai-icon-accent {
    color: var(--survai-menu-icon-blue);
    stroke: currentColor;
}

.status-dot--warning {
    background: #f59e0b;
}

.status-dot--urgent {
    background: #ef4444;
}

.ops-hero,
.ops-section-head,
.ops-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ops-hero {
    margin-bottom: 16px;
}

/* Business dashboard: on small screens the fixed white workspace topbar already shows title + actions */
@media (max-width: 900px) {
    body.ops-dashboard-page .ops-hero--dashboard-main {
        display: none;
    }

    body.ops-dashboard-page .ops-dashboard-controls {
        display: none !important;
    }
}

.ops-hero h1 {
    margin-bottom: 2px;
    color: var(--navy);
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.ops-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.ops-hero-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ops-create-survey-btn {
    border: 0;
    border-radius: 999px;
    background: var(--survai-brand-blue) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.ops-create-survey-btn:hover {
    background: var(--survai-brand-blue-hover) !important;
    color: #ffffff !important;
    opacity: 1;
}

.ops-notification-wrap {
    position: relative;
}

.ops-notification {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
}

.ops-notification:hover,
.ops-notification:focus-visible,
.ops-notification[aria-expanded="true"] {
    background: #edf5ff;
    color: #0b1321;
    outline: none;
}

.ops-notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}

.ops-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    width: min(390px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(7, 26, 61, 0.1);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(7, 26, 61, 0.16);
}

.ops-notification-panel[hidden] {
    display: none !important;
}

.ops-notification-panel__head,
.ops-notification-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.ops-notification-panel__head {
    border-bottom: 1px solid rgba(7, 26, 61, 0.08);
    background: #f8fbff;
}

.ops-notification-panel__head strong {
    display: block;
    color: #0b1321;
    font-size: 0.94rem;
    line-height: 1.15;
}

.ops-notification-panel__head span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.ops-notification-panel__head > span {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: #0b1321;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.ops-notification-list {
    max-height: min(520px, calc(100vh - 230px));
    overflow: auto;
    padding: 8px;
}

@media (max-width: 900px) {
    .ops-notification-panel:not([hidden]) {
        position: fixed !important;
        top: calc(var(--survai-mobile-app-header-total, calc(110px + env(safe-area-inset-top, 0px))) + 10px);
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        left: max(14px, env(safe-area-inset-left, 0px));
        width: auto !important;
        max-width: none !important;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        z-index: 1300 !important;
    }

    .ops-notification-panel .ops-notification-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .ops-notification-panel > .ops-notification-empty {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .ops-notification-panel:not([hidden]) .ops-notification-panel__head,
    .ops-notification-panel:not([hidden]) .ops-notification-panel__foot {
        flex-shrink: 0;
    }
}

/* ------------------------------------------------------------------
 * Workspace topbar filter dropdown (reports list search; dashboard date range)
 * ------------------------------------------------------------------ */
.reports-filter-wrap {
    position: relative;
}

.reports-filter-toggle {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.reports-filter-toggle:hover,
.reports-filter-toggle:focus-visible,
.reports-filter-toggle[aria-expanded='true'] {
    color: #475569;
    outline: none;
}

.reports-filter-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.output-section-header-copy {
    display: none;
}

.output-section.is-collapsed .output-section-header-copy {
    display: inline-flex;
}

.output-section.is-collapsed .output-section-actions [data-copy-section]:not([data-copy-section-header]) {
    display: none;
}

.copy-confirmation-modal[hidden] {
    display: none;
}

.copy-confirmation-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(5px);
}

.copy-confirmation-modal__panel {
    width: min(360px, 100%);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    padding: 22px;
    text-align: center;
}

.copy-confirmation-modal__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    margin-bottom: 12px;
}

.copy-confirmation-modal__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.copy-confirmation-modal__panel h2 {
    margin: 0 0 6px;
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 700;
}

.copy-confirmation-modal__panel p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.reports-filter-toggle__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.reports-filter-toggle__icon svg circle,
.reports-filter-toggle__icon svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reports-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    width: min(340px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(7, 26, 61, 0.1);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(7, 26, 61, 0.14);
}

.reports-filter-panel[hidden] {
    display: none !important;
}

.reports-filter-panel__head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(7, 26, 61, 0.08);
    background: #f8fbff;
}

.reports-filter-panel__head strong {
    font-size: 0.9rem;
    font-weight: 850;
    color: #0b1321;
}

.reports-filter-panel__body {
    display: grid;
    gap: 12px;
    padding: 12px 14px 14px;
}

.reports-filter-panel__body .ops-range-form--in-panel {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin: 0;
}

.reports-filter-panel__body .ops-range-form--in-panel label {
    display: grid;
    gap: 6px;
    width: 100%;
    margin: 0;
}

.reports-filter-panel__body .ops-range-form--in-panel .btn {
    width: 100%;
    justify-content: center;
}

.reports-filter-panel__body .ops-range-form--in-panel select,
.reports-filter-panel__body .ops-range-form--in-panel input {
    width: 100%;
    min-width: 0;
}

.reports-filter-panel__field.search-field span {
    font-size: 0.74rem;
}

.reports-filter-panel__field input,
.reports-filter-panel__field select {
    width: 100%;
}

.workspace-topbar--global .workspace-topbar-actions .reports-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.workspace-topbar--global .workspace-topbar-actions .reports-filter-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #d9dbe1;
}

.workspace-topbar--global .workspace-topbar-actions .reports-filter-panel {
    z-index: 1200;
}

@media (max-width: 900px) {
    .reports-filter-panel:not([hidden]) {
        position: fixed !important;
        top: calc(var(--survai-mobile-app-header-total, calc(110px + env(safe-area-inset-top, 0px))) + 10px);
        right: max(14px, env(safe-area-inset-right, 0px));
        left: max(14px, env(safe-area-inset-left, 0px));
        width: auto !important;
        max-width: none !important;
        bottom: auto;
        height: auto;
        z-index: 1300 !important;
    }
}

html[data-theme='dark'] .reports-filter-panel,
body.theme-dark .reports-filter-panel,
body.dark-mode .reports-filter-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #0b1321;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

html[data-theme='dark'] .reports-filter-panel__head,
body.theme-dark .reports-filter-panel__head,
body.dark-mode .reports-filter-panel__head {
    border-color: rgba(255, 255, 255, 0.1);
    background: #0f172a;
}

html[data-theme='dark'] .reports-filter-panel__head strong,
body.theme-dark .reports-filter-panel__head strong,
body.dark-mode .reports-filter-panel__head strong {
    color: #f8fafc;
}

.ops-notification-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    color: #0b1321;
    text-decoration: none;
}

.ops-notification-item:hover,
.ops-notification-item:focus-visible {
    background: #f1f6fc;
    outline: none;
}

.ops-notification-item__icon {
    width: 36px;
    height: 36px;
    border-color: rgba(27, 90, 249, 0.18);
    background: #f5f9ff;
}

.ops-notification-item--high .ops-notification-item__icon {
    color: #b42318;
    background: #fff1f0;
}

.ops-notification-item--medium .ops-notification-item__icon,
.ops-notification-item--warning .ops-notification-item__icon {
    color: #b76b00;
    background: #fff8e7;
}

.ops-notification-item--info .ops-notification-item__icon {
    color: #0b1321;
    background: #edf5ff;
}

.ops-notification-item__body {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.ops-notification-item__body strong {
    overflow: hidden;
    color: #0b1321;
    font-size: 0.84rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-notification-item__body small,
.ops-notification-item__body em {
    overflow: hidden;
    color: #64748b;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-notification-item__body em {
    color: #7c8a9d;
}

.ops-notification-item__count {
    display: inline-grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    background: #0b1321;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.ops-notification-empty {
    margin: 0;
    padding: 20px 16px;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 800;
}

.ops-notification-panel__foot {
    border-top: 1px solid rgba(7, 26, 61, 0.08);
    background: #f8fbff;
}

.ops-notification-panel__foot a {
    color: #1b5af9;
    font-size: 0.8rem;
    font-weight: 900;
    text-decoration: none;
}

.ops-notification-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.ops-notification-sound-toggle input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: #1b5af9;
}

.ops-notification-sound-status {
    min-height: 1rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.settings-notification-sound-panel {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    margin: 1rem 0 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.settings-notification-sound-panel h2 {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.15rem;
}

.notification-sound-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
    gap: 1rem;
    align-items: end;
}

@media (max-width: 720px) {
    .notification-sound-settings-grid {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .ops-notification,
body.theme-dark .ops-notification,
body.dark-mode .ops-notification {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

html[data-theme="dark"] .ops-notification:hover,
html[data-theme="dark"] .ops-notification:focus-visible,
html[data-theme="dark"] .ops-notification[aria-expanded="true"],
body.theme-dark .ops-notification:hover,
body.theme-dark .ops-notification:focus-visible,
body.theme-dark .ops-notification[aria-expanded="true"],
body.dark-mode .ops-notification:hover,
body.dark-mode .ops-notification:focus-visible,
body.dark-mode .ops-notification[aria-expanded="true"] {
    background: rgba(27, 90, 249, 0.14);
    color: #c5f946;
}

html[data-theme="dark"] .ops-notification-panel,
body.theme-dark .ops-notification-panel,
body.dark-mode .ops-notification-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #0b1321;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .ops-notification-panel__head,
html[data-theme="dark"] .ops-notification-panel__foot,
body.theme-dark .ops-notification-panel__head,
body.theme-dark .ops-notification-panel__foot,
body.dark-mode .ops-notification-panel__head,
body.dark-mode .ops-notification-panel__foot {
    border-color: rgba(255, 255, 255, 0.1);
    background: #0b1321;
}

html[data-theme="dark"] .ops-notification-panel__head strong,
html[data-theme="dark"] .ops-notification-item__body strong,
body.theme-dark .ops-notification-panel__head strong,
body.theme-dark .ops-notification-item__body strong,
body.dark-mode .ops-notification-panel__head strong,
body.dark-mode .ops-notification-item__body strong {
    color: #f8fafc;
}

html[data-theme="dark"] .ops-notification-item,
body.theme-dark .ops-notification-item,
body.dark-mode .ops-notification-item {
    color: #f8fafc;
}

html[data-theme="dark"] .ops-notification-panel__head > div span,
html[data-theme="dark"] .ops-notification-item__body small,
html[data-theme="dark"] .ops-notification-item__body em,
html[data-theme="dark"] .ops-notification-empty,
body.theme-dark .ops-notification-panel__head > div span,
body.theme-dark .ops-notification-item__body small,
body.theme-dark .ops-notification-item__body em,
body.theme-dark .ops-notification-empty,
body.dark-mode .ops-notification-panel__head > div span,
body.dark-mode .ops-notification-item__body small,
body.dark-mode .ops-notification-item__body em,
body.dark-mode .ops-notification-empty {
    color: #91a3b8;
}

html[data-theme="dark"] .ops-notification-panel__head > span,
html[data-theme="dark"] .ops-notification-item__count,
body.theme-dark .ops-notification-panel__head > span,
body.theme-dark .ops-notification-item__count,
body.dark-mode .ops-notification-panel__head > span,
body.dark-mode .ops-notification-item__count {
    color: #ffffff;
}

html[data-theme="dark"] .ops-notification-item:hover,
html[data-theme="dark"] .ops-notification-item:focus-visible,
body.theme-dark .ops-notification-item:hover,
body.theme-dark .ops-notification-item:focus-visible,
body.dark-mode .ops-notification-item:hover,
body.dark-mode .ops-notification-item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
}

.ops-range-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.ops-range-form label {
    gap: 4px;
}

.ops-range-form label span {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.ops-range-form select,
.ops-range-form input {
    min-height: 38px;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 0.84rem;
}

.ops-custom-date input {
    width: 145px;
}

.ops-range-form:not(.is-custom) .ops-custom-date {
    display: none;
}

.ops-dashboard-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: -2px 0 14px;
}

.ops-dashboard-layout-slot {
    min-width: 0;
}

.ops-kpi-grid {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    gap: clamp(14px, 1.75vw, 22px);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 22px;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.ops-kpi-grid > .ops-kpi-card {
    flex: 0 0 clamp(196px, 14vw, 236px);
    scroll-snap-align: start;
}

.ops-dashboard-customize {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.ops-dashboard-layout-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 0 12px;
    background:
        linear-gradient(135deg, rgba(27, 90, 249, 0.055), rgba(27, 90, 249, 0.07)),
        #ffffff;
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px rgba(15, 23, 42, 0.035);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
}

.ops-dashboard-layout-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.ops-dashboard-layout-toggle:hover,
.ops-dashboard-customize.is-open .ops-dashboard-layout-toggle {
    border-color: rgba(27, 90, 249, 0.5);
    color: #16704a;
    background: rgba(27, 90, 249, 0.13);
}

.ops-dashboard-layout-panel {
    position: absolute;
    z-index: 30;
    left: 0;
    top: 100%;
    width: min(760px, calc(100vw - 380px));
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

@media (max-width: 1320px) {
    .ops-dashboard-layout-panel {
        width: min(720px, calc(100vw - 44px));
    }
}

.ops-dashboard-layout-panel[hidden] {
    display: none;
}

.ops-dashboard-layout-panel > div {
    min-width: min(100%, 280px);
    margin-right: auto;
}

.ops-dashboard-customize strong {
    display: block;
    color: var(--navy);
    font-size: 0.86rem;
    line-height: 1.2;
}

.ops-dashboard-customize span {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 760;
    line-height: 1.35;
}

.ops-dashboard-customize label {
    display: grid;
    min-width: min(100%, 210px);
    gap: 4px;
}

.ops-dashboard-customize label span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.ops-dashboard-customize select {
    min-height: 34px;
    border: 1px solid #dbe5f0;
    border-radius: 9px;
    padding: 0 9px;
    background: #ffffff;
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 800;
}

.ops-dashboard-customize-btn {
    min-height: 34px;
    border: 1px solid rgba(27, 90, 249, 0.22);
    border-radius: 9px;
    padding: 0 12px;
    background: #ffffff;
    color: #1b5af9;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
}

.ops-dashboard-customize-btn:hover:not(:disabled) {
    border-color: rgba(27, 90, 249, 0.5);
    color: #16704a;
    background: rgba(27, 90, 249, 0.1);
}

.ops-dashboard-customize-btn:disabled,
.ops-dashboard-customize select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ops-kpi-card,
.ops-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.045);
}

.ops-dashboard-dropzone {
    position: relative;
    border-radius: 14px;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.ops-dashboard-dropzone.is-dashboard-drag-over {
    background: rgba(27, 90, 249, 0.055);
    box-shadow: inset 0 0 0 1px rgba(27, 90, 249, 0.28);
}

.ops-dashboard [data-dashboard-card][hidden] {
    display: none !important;
}

.ops-dashboard-draggable {
    position: relative;
    cursor: grab;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.ops-dashboard-draggable:active {
    cursor: grabbing;
}

.ops-dashboard-draggable::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    opacity: 0;
    background:
        radial-gradient(circle, rgba(100, 116, 139, 0.64) 1.5px, transparent 2px) 0 0 / 6px 6px;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.ops-dashboard-draggable:hover {
    border-color: rgba(27, 90, 249, 0.22);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.065);
}

.ops-dashboard-draggable:hover::after {
    opacity: 0.58;
}

.ops-dashboard-draggable.is-dashboard-dragging {
    opacity: 0.42;
    border-color: rgba(27, 90, 249, 0.78);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.ops-dashboard-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(100, 116, 139, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #64748b;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.ops-dashboard-card-remove svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.ops-dashboard-draggable:hover .ops-dashboard-card-remove,
.ops-dashboard-card-remove:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.ops-dashboard-card-remove:hover,
.ops-dashboard-card-remove:focus-visible {
    border-color: rgba(255, 77, 109, 0.34);
    background: #fff5f7;
    color: #e11d48;
    outline: none;
}

/* Dashboard ops-grid tiles: symmetric padding vs border + shared rhythm under card heads */
.ops-dashboard .ops-grid > .ops-card {
    --dash-card-pad: clamp(12px, 2.8vw, 20px);
    box-sizing: border-box;
    padding: var(--dash-card-pad);
}

.ops-dashboard .ops-grid > .ops-card.ops-dashboard-draggable > .ops-card-head {
    padding-inline-end: 42px;
}

.ops-dashboard .ops-grid > .ops-card > .ops-donut-block,
.ops-dashboard .ops-grid > .ops-card > .ops-insight-list,
.ops-dashboard .ops-grid > .ops-card > .ops-condition-grid,
.ops-dashboard .ops-grid > .ops-card > .ops-team-table,
.ops-dashboard .ops-grid > .ops-card > .ops-action-list,
.ops-dashboard .ops-grid > .ops-card > .ops-today-list {
    margin-top: 14px;
}

.ops-dashboard .ops-grid > .ops-card > .ops-donut-block,
.ops-dashboard .ops-grid > .ops-card > .ops-team-table {
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ops-dashboard .ops-grid > .ops-card > .ops-donut-block {
    margin-bottom: 0;
}

.ops-dashboard .ops-grid > .ops-card > .ops-team-table {
    margin-bottom: 0;
}

.ops-dashboard .ops-grid > .ops-card.ops-dashboard-draggable .ops-dashboard-card-remove {
    top: max(10px, calc(var(--dash-card-pad) - 4px));
    right: max(10px, calc(var(--dash-card-pad) - 4px));
}

.ops-dashboard .ops-grid > .ops-dashboard-draggable::after {
    top: calc(var(--dash-card-pad) + 0px);
    right: calc(var(--dash-card-pad) + 0px);
}

.ops-dashboard .ops-grid > .ops-card .ops-donut-block--chart:focus-visible {
    outline: 2px solid rgba(27, 90, 249, 0.45);
    outline-offset: 3px;
    border-radius: 12px;
}

.ops-kpi-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(10px, 2vw, 14px);
    min-width: 0;
    min-height: 104px;
    padding: 14px 13px;
    overflow: hidden;
}

.ops-kpi-grid > .ops-card {
    grid-column: span 1;
    position: relative;
    min-height: unset;
    overflow: visible;
    z-index: 1;
}

.ops-kpi-grid > .ops-card:has(.ops-donut-block--chart:focus-within),
.ops-kpi-grid > .ops-card:has(.ops-donut-block--chart:hover) {
    z-index: 50;
}

.ops-kpi-grid > .ops-card .ops-card-head {
    margin-bottom: 2px;
}

.ops-kpi-grid > .ops-card .ops-card-head h2 {
    font-size: clamp(0.88rem, 2.8vw, 1rem);
    line-height: 1.2;
}

.ops-kpi-grid > .ops-card .ops-card-link {
    font-size: 0.72rem;
}

.ops-grid > .ops-kpi-card {
    min-height: 104px;
}

.ops-kpi-card__value {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: min(6.5rem, 42%);
    max-width: 46%;
    color: var(--navy);
    font-size: clamp(1.55rem, 3.1vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-kpi-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.ops-kpi-card__label {
    min-width: 0;
    color: #475569;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}

.ops-kpi-card .ops-trend {
    margin: 0;
}

.ops-trend {
    min-width: 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.ops-trend--positive {
    color: #16704a;
}

.ops-trend--negative {
    color: #b42318;
}

.ops-trend--warning {
    color: #b7791f;
}

.ops-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 8px;
    align-items: start;
    gap: 22px;
    margin-bottom: 18px;
}

.ops-grid--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-grid--secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-grid--secondary:nth-of-type(4),
.ops-grid--secondary:nth-of-type(5) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-grid > .ops-card {
    width: auto;
    margin: 0;
    grid-row-end: span var(--ops-card-row-span, 1);
}

.ops-grid > .ops-kpi-card {
    width: auto;
    margin: 0;
    grid-row-end: span var(--ops-card-row-span, 1);
}

.ops-card {
    min-width: 0;
    overflow: hidden;
    padding: 14px;
}

.ops-card--wide {
    grid-column: 1 / -1;
}

.ops-card h2,
.ops-section-head h2 {
    margin-bottom: 0;
    color: var(--navy);
    font-size: 0.98rem;
    line-height: 1.2;
}

.ops-card-meta,
.ops-card-link {
    min-width: 0;
    max-width: 48%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-card-link {
    color: #1b5af9;
}

.ops-card-head > div {
    min-width: 0;
}

.ops-card-head h2 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-pipeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0 12px;
}

.ops-pipeline::before {
    content: "";
    position: absolute;
    top: 22px;
    right: calc(100% / 12);
    left: calc(100% / 12);
    height: 3px;
    border-radius: 999px;
    background: #d9e2ee;
}

.ops-pipeline-stage {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 108px;
    justify-items: center;
    gap: 3px;
    padding: 0 4px;
    background: transparent;
    text-align: center;
    text-decoration: none;
}

.ops-pipeline-stage .ops-line-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 2px solid #cfd9e8;
    border-radius: 999px;
    background: #ffffff;
    color: #16704a;
    box-shadow: 0 0 0 4px #ffffff;
}

.ops-pipeline-stage:first-child .ops-line-icon {
    border-color: #16704a;
    box-shadow: 0 0 0 4px #eefaf2;
}

.ops-pipeline-stage strong {
    color: var(--navy);
    font-size: 0.94rem;
    line-height: 1;
}

.ops-pipeline-stage span:not(.ops-line-icon) {
    display: block;
    max-width: 100%;
    min-height: 28px;
    overflow: hidden;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.ops-pipeline-stage small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.ops-progress-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 850;
}

.ops-progress-summary strong {
    color: var(--navy);
}

.ops-progress-track,
.ops-bar {
    display: block;
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: #e5edf6;
}

.ops-progress-track span,
.ops-bar span {
    display: block;
    width: var(--bar-width, 0%);
    height: 100%;
    border-radius: inherit;
    background: #16704a;
}

.ops-action-list,
.ops-bar-list,
.ops-region-list,
.ops-diary-list,
.ops-activity-list,
.ops-today-list,
.ops-mini-metric-list,
.ops-insight-list,
.ops-quick-actions {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.ops-activity-list {
    min-width: 0;
}

.ops-coverage-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ops-coverage-filters,
.ops-coverage-custom,
.ops-coverage-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.ops-coverage-filters {
    margin-top: 8px;
}

.ops-coverage-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.ops-coverage-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ops-coverage-legend-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid #1b5af9;
    border-radius: 999px;
    background: #0b1321;
    box-shadow: 0 0 0 3px rgba(27, 90, 249, 0.14);
}

.ops-coverage-legend-dot--flat {
    border-color: #ffb020;
    box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.16);
}

.ops-coverage-legend-dot--other {
    border-color: #91a3b8;
    box-shadow: 0 0 0 3px rgba(145, 163, 184, 0.14);
}

.ops-coverage-filters button {
    min-height: 32px;
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    padding: 0 11px;
    background: #ffffff;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 850;
    cursor: pointer;
}

.ops-coverage-filters button:hover,
.ops-coverage-filters button.is-active {
    border-color: #16704a;
    background: #ecfdf3;
    color: #16704a;
}

.ops-coverage-custom label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ops-coverage-custom input {
    min-height: 34px;
    border-radius: 8px;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .output-section-actions {
        gap: 7px;
    }

    .output-icon-action {
        width: 36px;
        height: 36px;
    }

    .output-action-icon {
        width: 17px;
        height: 17px;
    }

    .speech-rate-value {
        min-height: 36px;
        padding: 0 8px;
        font-size: 0.76rem;
    }
}

.ops-coverage-map {
    position: relative;
    z-index: 0;
    width: 100%;
    min-height: 286px;
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-radius: 12px;
    background: #eaf1f8;
}

.ops-coverage-map--full {
    min-height: 560px;
}

.ops-coverage-legend--status {
    margin-top: 4px;
}

.ops-coverage-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ops-coverage-legend-swatch--progress {
    background: #1b5af9;
    box-shadow: 0 0 0 3px rgba(27, 90, 249, 0.18);
}

.ops-coverage-legend-swatch--completed {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.ops-coverage-legend-swatch--draft {
    background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}

.ops-report-pin {
    background: transparent !important;
    border: none !important;
}

.ops-report-pin__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.ops-report-pin__circle--progress {
    background: #1b5af9;
}

.ops-report-pin__circle--completed {
    background: #16a34a;
}

.ops-report-pin__circle--draft {
    background: #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}

.ops-report-pin__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}

.ops-report-pin-svg {
    display: block;
    width: 15px;
    height: 15px;
}

.ops-report-pin__circle--progress .ops-report-pin-svg,
.ops-report-pin__circle--completed .ops-report-pin-svg {
    color: #ffffff;
}

.ops-report-pin__circle--draft .ops-report-pin-svg {
    color: #475569;
}

.ops-coverage-cluster-wrap {
    background: transparent !important;
    border: none !important;
}

.ops-coverage-cluster-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #1b5af9;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 14px rgba(27, 90, 249, 0.35);
    position: relative;
}

.ops-coverage-cluster-badge span {
    position: relative;
    z-index: 1;
}

.ops-coverage-cluster-badge--halo::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    background: rgba(27, 90, 249, 0.14);
    z-index: 0;
}

.ops-coverage-map .marker-cluster-small,
.ops-coverage-map .marker-cluster-medium,
.ops-coverage-map .marker-cluster-large {
    background: transparent !important;
}

.ops-coverage-map .marker-cluster-small div,
.ops-coverage-map .marker-cluster-medium div,
.ops-coverage-map .marker-cluster-large div {
    background: transparent !important;
}

.ops-coverage-map .leaflet-control-attribution {
    font-size: 9px;
}

.property-location-card {
    padding: clamp(16px, 2vw, 22px);
}

.property-location-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.property-location-card__head h2 {
    margin: 0;
    color: var(--sai-text, #0f172a);
    font-size: clamp(1.08rem, 1.4vw, 1.28rem);
    line-height: 1.18;
}

.property-location-map {
    position: relative;
    z-index: 0;
    width: 100%;
    min-height: 290px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(27, 90, 249, 0.08), rgba(255, 255, 255, 0.78)),
        #eaf1f8;
}

.property-location-card--output .property-location-map {
    min-height: 260px;
}

.property-location-map .leaflet-control-attribution {
    font-size: 9px;
}

.property-location-static-fallback {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.property-location-static-fallback img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-location-static-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border: 5px solid #ffffff;
    border-radius: 999px;
    background: #1b5af9;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22);
}

.property-location-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 4px solid #ffffff;
    border-radius: 999px;
    background: #1b5af9;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}

.property-location-marker__svg {
    display: block;
    width: 18px;
    height: 18px;
}

.property-location-leaflet-marker {
    border: 0 !important;
    background: transparent !important;
}

.property-location-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-top: 10px;
    color: var(--sai-muted, #64748b);
    font-size: 0.82rem;
}

.property-location-meta span:first-child {
    color: var(--sai-text, #0f172a);
    font-weight: 650;
}

.property-location-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 132px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.82);
    color: var(--sai-muted, #64748b);
    padding: 18px;
}

.property-location-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(27, 90, 249, 0.10);
    color: #1b5af9;
}

.property-location-empty__icon .property-location-marker__svg {
    width: 22px;
    height: 22px;
}

.property-location-empty p {
    margin: 0;
    font-weight: 650;
}

.ops-coverage-pin {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    overflow: visible;
}

.ops-coverage-beacon {
    --ops-beacon-delay: 0s;
    --ops-pin-core: #0b1321;
    --ops-pin-core-flash: #071a3d;
    --ops-pin-ring: #1b5af9;
    --ops-pin-ring-soft: rgba(27, 90, 249, 0.22);
    --ops-pin-ring-glow: rgba(27, 90, 249, 0.78);
    --ops-pin-pulse: rgba(27, 90, 249, 0.72);
    --ops-pin-pulse-outer: rgba(22, 112, 74, 0.34);
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    overflow: visible;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.28));
}

.ops-coverage-beacon::before,
.ops-coverage-beacon::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: 0;
    border: 2px solid var(--ops-pin-pulse);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.25);
    animation: opsCoverageBeaconPulse 1.85s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: var(--ops-beacon-delay);
    pointer-events: none;
}

.ops-coverage-beacon::after {
    inset: -13px;
    border-color: var(--ops-pin-pulse-outer);
    animation-delay: calc(var(--ops-beacon-delay) + 0.34s);
}

.ops-coverage-beacon--flat {
    --ops-pin-ring: #ffb020;
    --ops-pin-ring-soft: rgba(255, 176, 32, 0.22);
    --ops-pin-ring-glow: rgba(255, 176, 32, 0.78);
    --ops-pin-pulse: rgba(255, 176, 32, 0.76);
    --ops-pin-pulse-outer: rgba(146, 98, 0, 0.34);
}

.ops-coverage-beacon--other {
    --ops-pin-ring: #91a3b8;
    --ops-pin-ring-soft: rgba(145, 163, 184, 0.2);
    --ops-pin-ring-glow: rgba(145, 163, 184, 0.56);
    --ops-pin-pulse: rgba(145, 163, 184, 0.66);
    --ops-pin-pulse-outer: rgba(71, 85, 105, 0.3);
}

.ops-coverage-pin-core {
    position: relative;
    z-index: 1;
    display: block;
    width: 18px;
    height: 18px;
    border: 3px solid var(--ops-pin-ring);
    border-radius: 999px 999px 999px 0;
    background: var(--ops-pin-core);
    box-shadow:
        0 0 0 5px var(--ops-pin-ring-soft),
        0 0 18px var(--ops-pin-ring-glow),
        0 6px 14px rgba(15, 23, 42, 0.28);
    transform: rotate(-45deg);
    animation: opsCoveragePinFlash 1.85s ease-in-out infinite;
    animation-delay: var(--ops-beacon-delay);
}

@keyframes opsCoverageBeaconPulse {
    0% {
        opacity: 0.84;
        transform: scale(0.28);
    }
    72% {
        opacity: 0;
        transform: scale(1.35);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes opsCoveragePinFlash {
    0%,
    100% {
        background: var(--ops-pin-core);
        box-shadow:
            0 0 0 5px var(--ops-pin-ring-soft),
            0 0 14px var(--ops-pin-ring-glow),
            0 6px 14px rgba(15, 23, 42, 0.28);
    }
    42% {
        background: var(--ops-pin-core-flash);
        box-shadow:
            0 0 0 8px var(--ops-pin-ring-soft),
            0 0 26px var(--ops-pin-ring-glow),
            0 8px 18px rgba(15, 23, 42, 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ops-coverage-beacon::before,
    .ops-coverage-beacon::after,
    .ops-coverage-pin-core {
        animation: none;
    }
}

.coverage-popup {
    display: grid;
    gap: 4px;
    min-width: 190px;
    color: #0f172a;
    font-size: 0.78rem;
}

.coverage-popup strong {
    color: #071a3d;
    font-size: 0.86rem;
}

.coverage-popup span {
    color: #475569;
}

.coverage-popup a {
    margin-top: 4px;
    color: #16704a;
    font-weight: 850;
}

.ops-coverage-stats {
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.ops-coverage-stats strong {
    color: var(--navy);
}

.coverage-table-card {
    margin-top: 12px;
}

.coverage-location-table {
    display: grid;
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.coverage-location-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(100px, 0.8fr) minmax(82px, 0.5fr);
    gap: 12px;
    min-width: 760px;
    padding: 10px 0;
    border-bottom: 1px solid #e8eef6;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.coverage-location-row:hover {
    color: #16704a;
}

.coverage-location-row--head {
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.coverage-location-row span:first-child {
    color: var(--navy);
}

html[data-theme="dark"] .ops-coverage-filters button {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.74);
    color: rgba(226, 232, 240, 0.9);
}

html[data-theme="dark"] .ops-coverage-filters button:hover,
html[data-theme="dark"] .ops-coverage-filters button.is-active {
    border-color: #1b5af9;
    background: rgba(27, 90, 249, 0.12);
    color: #d8ff6f;
}

html[data-theme="dark"] .ops-coverage-map {
    border-color: rgba(148, 163, 184, 0.18);
    background: #0f172a;
}

html[data-theme="dark"] .ops-report-pin__circle--draft {
    background: rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .ops-report-pin__circle--draft .ops-report-pin-svg {
    color: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .coverage-location-row {
    border-bottom-color: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.82);
}

/* --- Property evidence media pages --- */
.evidence-media-main {
    width: 100%;
    min-width: 0;
}

.evidence-photos-page {
    overflow: visible;
}

.evidence-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 18px;
}

.evidence-photo-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.evidence-photo-preview {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #0f172a;
    aspect-ratio: 4 / 3;
}

.evidence-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.evidence-photo-preview:hover img {
    transform: scale(1.025);
}

.evidence-photo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.evidence-audio-card .transcript-section-title-row,
.evidence-media-uploads-card .transcript-section-title-row {
    align-items: flex-start;
}

.evidence-audio-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.evidence-recording-list {
    gap: 10px;
}

.evidence-recording-card {
    grid-template-columns: minmax(88px, 0.45fr) minmax(180px, 1.15fr) minmax(190px, 1fr) minmax(260px, 1.2fr);
}

.evidence-recording-card audio,
.evidence-upload-item audio {
    width: 100%;
    min-width: 190px;
}

.evidence-upload-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.evidence-upload-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--theme-border, #dce3ec);
    border-radius: 12px;
    background: var(--theme-panel-soft, #f8fafc);
}

.evidence-upload-item > div,
.evidence-video-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.evidence-upload-item strong,
.evidence-video-copy strong {
    overflow: hidden;
    color: var(--theme-text, var(--navy));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evidence-upload-item span,
.evidence-upload-item em,
.evidence-video-copy span {
    color: var(--theme-muted, var(--muted));
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 750;
}

.evidence-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 16px;
    margin-top: 14px;
}

.evidence-video-item {
    display: grid;
    gap: 12px;
    border: 1px solid var(--theme-border, #dce3ec);
    border-radius: 14px;
    padding: 12px;
    background: var(--theme-panel-soft, #f8fafc);
}

.evidence-video-preview {
    overflow: hidden;
    border-radius: 12px;
    background: #0b1321;
    aspect-ratio: 16 / 9;
}

.evidence-video-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.evidence-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 920px) {
    .evidence-photo-grid,
    .evidence-video-grid {
        grid-template-columns: 1fr;
    }

    .evidence-recording-card,
    .evidence-upload-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .evidence-audio-actions {
        justify-content: stretch;
    }

    .evidence-audio-actions .btn,
    .evidence-video-actions .btn,
    .evidence-video-actions .inline-action-form,
    .evidence-video-actions .inline-action-form .btn,
    .evidence-photo-actions .btn {
        width: 100%;
    }

    .evidence-recording-card audio,
    .evidence-upload-item audio {
        min-width: 0;
    }
}

.ops-action-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 800;
}

.ops-action-row strong {
    color: var(--navy);
    font-size: 1rem;
}

.ops-action-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #64748b;
}

.ops-action-row--high .ops-action-dot {
    background: #ef4444;
}

.ops-action-row--medium .ops-action-dot {
    background: #f59e0b;
}

.ops-action-row--low .ops-action-dot {
    background: #1b5af9;
}

.ops-bar-row,
.ops-region-row {
    display: grid;
    gap: 5px;
}

.ops-bar-row > div,
.ops-region-row > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 850;
}

.ops-bar-row strong,
.ops-region-row strong {
    color: var(--navy);
}

.ops-donut-block {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin-top: 12px;
}

.ops-donut {
    position: relative;
    display: grid;
    width: 116px;
    height: 116px;
    place-items: center;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.ops-donut::after {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.ops-donut span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    color: var(--navy);
    line-height: 1.05;
}

.ops-donut strong {
    font-size: 1.2rem;
}

.ops-donut small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
}

.ops-donut-legend {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.ops-donut-legend div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 850;
}

.ops-donut-legend i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.ops-donut-legend span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-donut-legend strong {
    color: var(--navy);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Donut charts moved into KPI strip (narrow tiles): shrink chart + show breakdown popover */
.ops-kpi-grid > .ops-card .ops-donut-block--chart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: start;
    gap: 6px;
    margin-top: 8px;
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut {
    width: clamp(76px, 78%, 108px);
    height: clamp(76px, 78%, 108px);
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut span {
    max-width: 88%;
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut strong {
    font-size: clamp(0.88rem, 3.8vw, 1.06rem);
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut small {
    font-size: 0.61rem;
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut-legend {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 80;
    display: grid;
    width: max-content;
    max-width: min(300px, calc(100vw - 48px));
    gap: 8px;
    padding: 12px;
    margin: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 22px 50px rgba(7, 26, 61, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart:hover .ops-donut-legend,
.ops-kpi-grid > .ops-card .ops-donut-block--chart:focus-within .ops-donut-legend {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ops-kpi-grid > .ops-card .ops-donut-block--chart:focus-visible {
    outline: 2px solid rgba(27, 90, 249, 0.45);
    outline-offset: 3px;
    border-radius: 12px;
}

.ops-condition-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.ops-condition {
    display: grid;
    min-height: 84px;
    place-items: center;
    gap: 3px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 900;
}

.ops-condition strong {
    font-size: 1.35rem;
    line-height: 1;
}

.ops-condition--cr3 {
    background: #fef3f2;
    color: #b42318;
}

.ops-condition--cr2 {
    background: #fff7ed;
    color: #b7791f;
}

.ops-condition--cr1 {
    background: #ecfdf3;
    color: #16704a;
}

.ops-team-table {
    display: grid;
    gap: 0;
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ops-team-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) repeat(4, minmax(72px, 0.65fr));
    align-items: center;
    gap: 8px;
    min-width: 560px;
    padding: 7px 0;
    border-bottom: 1px solid #e8eef6;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.ops-team-row:last-child {
    border-bottom: 0;
}

.ops-team-row--head {
    color: var(--muted);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.ops-team-person {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-team-person b {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #e9f7ef;
    color: #16704a;
    font-size: 0.68rem;
}

.ops-diary-row,
.ops-activity-row,
.ops-today-row {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px 0;
    border-bottom: 1px solid #e8eef6;
}

.ops-diary-row:last-child,
.ops-activity-row:last-child,
.ops-today-row:last-child {
    border-bottom: 0;
}

.ops-diary-row strong,
.ops-activity-row strong,
.ops-today-row strong {
    color: var(--navy);
    font-size: 0.82rem;
    line-height: 1.2;
}

.ops-diary-row span,
.ops-diary-row small,
.ops-activity-row span,
.ops-activity-row small,
.ops-today-row span,
.ops-today-row small,
.ops-today-row em {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.2;
}

.ops-today-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    text-decoration: none;
}

.ops-today-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-today-row small {
    grid-column: 2;
}

.ops-today-row em {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
    border-radius: 999px;
    padding: 4px 8px;
    background: #f1f5f9;
    color: #334155;
    font-style: normal;
}

.ops-activity-row {
    grid-template-columns: minmax(22px, auto) minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
}

.ops-activity-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ops-activity-row > div > strong,
.ops-activity-row > div > span {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.ops-activity-row > small {
    justify-self: end;
    align-self: start;
    white-space: nowrap;
    text-align: end;
}

.ops-activity-icon {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    color: #1b5af9;
}

.ops-activity-row--success .ops-activity-icon {
    color: #16704a;
}

.ops-activity-row--warning .ops-activity-icon {
    color: #f59e0b;
}

.ops-activity-row--danger .ops-activity-icon {
    color: #ef4444;
}

.ops-empty {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.ops-mini-metric {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(8px, 1.8vw, 12px);
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
}

.ops-mini-metric__value {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: min(5.25rem, 36%);
    max-width: 42%;
    color: var(--navy);
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.02em;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-mini-metric__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.ops-mini-metric__label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}

.ops-insight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #e8eef6;
}

.ops-insight-row:last-child {
    border-bottom: 0;
}

.ops-insight-row span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}

.ops-insight-row strong {
    flex: 1 1 44%;
    min-width: 0;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-quick-actions a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    padding: 9px 10px;
    background: #ffffff;
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
}

.ops-quick-actions svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #16704a;
}

.ops-section-head {
    align-items: center;
    margin-bottom: 10px;
}

.ops-dashboard .table-card {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.045);
}

@media (max-width: 1320px) {
    .ops-grid--primary,
    .ops-grid--secondary,
    .ops-grid--secondary:nth-of-type(4),
    .ops-grid--secondary:nth-of-type(5) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-dashboard.is-cards-compact .ops-grid--primary,
    .ops-dashboard.is-cards-compact .ops-grid--secondary,
    .ops-dashboard.is-cards-compact .ops-grid--secondary:nth-of-type(4),
    .ops-dashboard.is-cards-compact .ops-grid--secondary:nth-of-type(5) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ops-dashboard.is-cards-ultra .ops-grid--primary,
    .ops-dashboard.is-cards-ultra .ops-grid--secondary:nth-of-type(4),
    .ops-dashboard.is-cards-ultra .ops-grid--secondary:nth-of-type(5) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ops-dashboard.is-cards-ultra .ops-grid--secondary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ops-pipeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .ops-dashboard-page {
        width: 100%;
        overflow-x: hidden;
    }

    .ops-dashboard-page .app-shell {
        display: block;
        width: 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .ops-hero,
    .ops-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ops-card-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ops-card-meta,
    .ops-card-link {
        max-width: 100%;
        white-space: normal;
    }

    .ops-hero-actions {
        justify-content: flex-start;
    }

    body.ops-dashboard-page .ops-dashboard-controls {
        display: none !important;
    }

    body.ops-dashboard-page .main-panel.ops-dashboard > section.ops-kpi-grid {
        display: none !important;
    }

    .ops-range-form {
        width: 100%;
    }

    .ops-range-form label:first-child {
        flex: 1 1 180px;
    }

    .ops-custom-date {
        flex: 1 1 130px;
    }

    .ops-custom-date input {
        width: 100%;
    }

    .ops-kpi-grid,
    .ops-grid--primary,
    .ops-grid--secondary,
    .ops-grid--secondary:nth-of-type(4),
    .ops-grid--secondary:nth-of-type(5) {
        width: 100%;
        min-width: 0;
    }

    .ops-grid,
    .ops-grid--primary,
    .ops-grid--secondary,
    .ops-grid--secondary:nth-of-type(4),
    .ops-grid--secondary:nth-of-type(5) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ops-kpi-grid > .ops-card {
        grid-column: 1;
    }

    .ops-grid > .ops-card,
    .ops-grid > .ops-kpi-card {
        display: block;
        margin-bottom: 0;
    }

    .ops-grid > .ops-kpi-card {
        display: flex;
    }

    .ops-kpi-card {
        min-height: 100px;
        padding: 12px 11px;
    }

    .ops-card,
    .ops-kpi-card,
    .ops-donut-block,
    .ops-action-row,
    .ops-diary-row,
    .ops-activity-row,
    .ops-region-row,
    .ops-team-table {
        max-width: 100%;
        min-width: 0;
    }

    .ops-coverage-map {
        min-height: 260px;
    }

    .ops-coverage-map--full {
        min-height: 440px;
    }

    .property-location-map {
        min-height: 250px;
    }

    .ops-coverage-filters button {
        flex: 1 1 auto;
        min-width: 92px;
    }

    .ops-pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-donut-block {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .ops-donut {
        width: 100px;
        height: 100px;
    }

    .ops-donut::after {
        inset: 25px;
    }

    .ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut::after {
        inset: 25%;
    }

    .ops-condition-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sidebar-nav--ops a,
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .ops-dashboard-page .app-shell {
        width: 100%;
    }

    .ops-pipeline,
    .ops-condition-grid {
        grid-template-columns: 1fr;
    }

    .ops-donut-block {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .ops-donut-legend {
        width: 100%;
    }

    .ops-kpi-grid > .ops-card .ops-donut-block--chart .ops-donut-legend {
        width: max-content;
        max-width: min(300px, calc(100vw - 32px));
    }
    .ops-kpi-card {
        border-radius: 14px;
        padding: 12px;
    }

    .ops-notification {
        width: 42px;
        height: 42px;
    }

    .ops-coverage-map {
        min-height: 235px;
    }

    .ops-coverage-map--full {
        min-height: 360px;
    }

    .property-location-card {
        padding: 14px;
    }

    .property-location-card__head {
        margin-bottom: 12px;
    }

    .property-location-map,
    .property-location-card--output .property-location-map {
        min-height: 220px;
    }

    .property-location-meta {
        align-items: flex-start;
        flex-direction: column;
        font-size: 0.78rem;
    }

    .ops-coverage-stats {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Camera architecture split: Main Capture keeps evidence controls; AI Training is identify-only. */
.capture-screen.is-main-camera .capture-training-toggle,
.capture-screen.is-main-camera .capture-tag-bar,
.capture-screen.is-main-camera .capture-audio-pill,
.capture-screen.is-main-camera .capture-photo-count,
.capture-screen.is-main-camera .capture-zoom-control,
.capture-screen.is-main-camera .capture-training-reticle,
.capture-screen.is-main-camera .capture-training-tap-chip,
.capture-screen.is-main-camera .capture-training-hint {
    display: none !important;
}

.capture-screen.is-main-camera .capture-preview-touch-layer {
    bottom: calc(var(--capture-tray-h, 168px) + var(--capture-tabbar-h, 74px));
}

.capture-screen.is-main-camera .capture-overlay-top {
    width: auto;
    max-width: none;
}

.capture-screen.is-main-camera .capture-recording-badge {
    width: auto;
    min-width: 92px;
    min-height: 42px;
    padding: 8px 12px;
}

.capture-screen.is-main-camera .capture-recording-badge em {
    display: none;
}

.capture-screen.is-main-camera .capture-top-camera-tools {
    gap: 10px;
}

.capture-screen.is-main-camera .capture-torch-auto-chip {
    display: none;
}

.capture-video-preview {
    display: block;
    width: 100%;
    max-height: 320px;
    border-radius: var(--radius-md);
    background: #09172d;
    object-fit: contain;
}

.capture-video-preview[hidden] {
    display: none;
}

.capture-screen.is-training-camera .capture-control-tray,
.capture-screen.is-training-camera .capture-tabbar,
.capture-screen.is-training-camera .capture-tabbar-handle,
.capture-screen.is-training-camera .capture-overlay-top,
.capture-screen.is-training-camera .capture-zoom-control,
.capture-screen.is-training-camera .capture-gallery {
    display: none !important;
}

.capture-screen.is-training-camera .capture-preview-touch-layer {
    bottom: 0;
}

.capture-screen.is-training-camera .capture-training-toggle {
    display: inline-flex;
}

.capture-screen.is-training-camera .capture-training-hint:not([hidden]) {
    display: none !important;
}

.capture-screen.is-training-camera .capture-training-reticle:not([hidden]) {
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}

.capture-screen.is-training-camera .capture-training-reticle.is-dragging {
    cursor: grabbing;
}

@media (max-width: 920px) {
    .capture-screen.is-training-camera .capture-preview {
        inset: 0;
    }

    .capture-screen.is-training-camera .capture-training-hint:not(.is-positioned) {
        right: calc(14px + env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        left: auto;
        top: auto;
        width: min(330px, calc(100vw - 28px));
        max-width: min(330px, calc(100vw - 28px));
    }

    .capture-screen.is-training-camera .capture-training-tap-chip {
        right: calc(14px + env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: min(360px, calc(100vw - 28px));
        max-width: min(360px, calc(100vw - 28px));
        padding: 12px 14px;
        font-size: 0.86rem;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-training-camera .capture-training-hint:not(.is-positioned) {
        right: calc(18px + env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: min(340px, 36vw);
        max-width: min(340px, 36vw);
    }

    .capture-screen.is-training-camera .capture-training-tap-chip {
        right: calc(18px + env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: min(360px, 38vw);
        max-width: min(360px, 38vw);
    }
}

@media (max-width: 920px) and (hover: hover) and (pointer: fine) {
    .capture-mode-body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        background: var(--bg);
        overscroll-behavior: auto;
    }

    .capture-mode-body .capture-topbar {
        display: flex !important;
    }

    .capture-mode-body .workflow-nav {
        display: flex !important;
    }

    .capture-mode-body .capture-tabs {
        display: grid !important;
    }

    .capture-shell,
    .capture-panel.active.live-capture-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .live-capture-panel .capture-screen {
        display: none !important;
    }

    .live-capture-panel .capture-desktop-handoff {
        display: grid !important;
    }
}

.capture-screen .capture-header {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.capture-screen .capture-header::before,
.capture-screen .capture-header::after {
    display: none !important;
}

.capture-screen .capture-more-button,
.capture-screen .capture-refresh-button {
    background: transparent !important;
}

.capture-screen .capture-refresh-button svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 920px) {
    .capture-header {
        grid-template-columns: minmax(56px, 74px) minmax(0, 1fr) auto !important;
    }

    .capture-header-actions {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .capture-header-actions .capture-training-toggle {
        display: inline-flex;
        height: 36px;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.58);
        color: #ffffff;
        background: rgba(0, 0, 0, 0.24);
        box-shadow: none;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .capture-header-actions .capture-training-toggle.active {
        border-color: rgba(255, 214, 10, 0.92);
        color: var(--navy);
        background: #ffd60a;
        text-shadow: none;
    }

    .capture-header-actions .capture-refresh-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }
}

@media (max-width: 380px) {
    .capture-header-actions .capture-training-toggle {
        width: 40px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }

    .capture-header-actions .capture-training-toggle::before {
        content: "AI";
        font-size: 0.78rem;
        font-weight: 900;
    }
}

.smart-annotation-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 8, 23, 0.68);
}

.smart-annotation-modal[hidden] {
    display: none;
}

.smart-annotation-dialog {
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    height: min(880px, calc(100dvh - 36px));
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(2, 8, 23, 0.36);
}

.smart-annotation-head {
    flex: 0 0 auto;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding: 18px 20px;
}

.smart-annotation-head h2 {
    margin: 0;
}

.smart-annotation-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

.smart-annotation-canvas {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: 16px;
    background: var(--navy);
}

.smart-annotation-stage {
    position: relative;
    display: inline-grid;
    max-width: 100%;
    max-height: 100%;
    place-items: center;
}

.smart-annotation-stage img,
.smart-annotation-canvas img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.smart-annotation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    touch-action: none;
}

.smart-marker {
    position: absolute;
    display: grid;
    min-width: 32px;
    min-height: 32px;
    place-items: center;
    border: 3px solid #d92626;
    color: #ffffff;
    background: rgba(217, 38, 38, 0.12);
    font-size: 0.68rem;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: move;
    touch-action: none;
}

.smart-marker.type-circle {
    border-radius: 999px;
}

.smart-marker.type-arrow,
.smart-marker.type-line {
    height: 0 !important;
    min-height: 0;
}

.smart-marker.rating-cr2 {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.14);
}

.smart-marker.rating-cr1 {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.14);
}

.smart-marker.rating-ni,
.smart-marker.rating-na {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.16);
}

.smart-marker.active {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.58), 0 0 0 7px rgba(255, 47, 135, 0.55);
}

.smart-marker-label {
    pointer-events: none;
}

.smart-resize-handle {
    position: absolute;
    right: -10px;
    bottom: -10px;
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.32);
    cursor: nwse-resize;
}

.smart-marker.active .smart-resize-handle {
    display: block;
}

.smart-annotation-panel {
    display: grid;
    grid-template-rows: auto minmax(110px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}

.smart-annotation-actions,
.smart-annotation-form .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-annotation-actions [data-smart-tool].active {
    color: #ffffff;
    border-color: var(--navy);
    background: var(--navy);
}

.smart-annotation-list {
    display: grid;
    gap: 8px;
    align-content: start;
    overflow: auto;
}

.smart-annotation-list-item {
    display: grid;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    color: var(--text);
    background: #ffffff;
    text-align: left;
}

.smart-annotation-list-item.active {
    border-color: var(--accent);
    background: #eef4ff;
}

.smart-annotation-list-item span {
    color: var(--muted);
    font-size: 0.82rem;
}

.smart-annotation-form {
    display: grid;
    gap: 10px;
}

.smart-annotation-form textarea {
    min-height: 88px;
}

.survai-photo-editor {
    position: fixed;
    inset: 0;
    z-index: 3200;
    overflow: hidden;
    background: rgba(2, 8, 23, 0.76);
}

.survai-photo-editor[hidden] {
    display: none;
}

.survai-photo-editor svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.survai-photo-editor__shell {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) minmax(310px, 360px);
    width: 100%;
    height: 100dvh;
    color: #0b1321;
    background: #f3f6fa;
}

.survai-photo-editor__rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(22px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    color: #f8fbff;
    background:
        radial-gradient(circle at 12% 8%, rgba(27, 90, 249, 0.22), transparent 32%),
        linear-gradient(180deg, #063f3e 0%, #031d2d 100%);
}

.survai-photo-editor__brand {
    margin-bottom: 28px;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.survai-photo-editor__brand span {
    color: #1b5af9;
}

.survai-editor-tool,
.survai-editor-pill,
.survai-editor-close-top,
.survai-editor-done,
.survai-editor-tool-grid button,
.survai-photo-editor__annotation-bar button,
.survai-editor-panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(7, 17, 31, 0.12);
    border-radius: 16px;
    min-height: 48px;
    padding: 11px 16px;
    color: inherit;
    background: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.survai-editor-tool {
    justify-content: flex-start;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: #f8fbff;
    background: rgba(3, 28, 44, 0.58);
}

.survai-editor-tool:hover,
.survai-editor-tool.is-active {
    color: #ffffff;
    border-color: rgba(27, 90, 249, 0.24);
    background: linear-gradient(135deg, rgba(27, 90, 249, 0.34), rgba(7, 88, 80, 0.72));
}

.survai-editor-tool--ai {
    margin-top: 10px;
    color: #ffffff;
    background: #1b5af9;
}

.survai-photo-editor__main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.survai-photo-editor__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: calc(18px + env(safe-area-inset-top)) 28px 18px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(7, 17, 31, 0.08);
    box-shadow: 0 8px 30px rgba(7, 17, 31, 0.06);
}

.survai-editor-pill {
    border-radius: 999px;
    min-width: 48px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(7, 17, 31, 0.06);
}

.survai-editor-done {
    margin-left: auto;
    border-color: #0f7d63;
    border-radius: 999px;
    min-width: 138px;
    color: #ffffff;
    background: #087f67;
    box-shadow: 0 12px 26px rgba(8, 127, 103, 0.24);
}

.survai-editor-close-top {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 999px;
    color: #0b1321;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(7, 17, 31, 0.06);
}

.survai-editor-zoom {
    display: inline-grid;
    grid-template-columns: 54px 84px 54px;
    align-items: center;
    border: 1px solid rgba(7, 17, 31, 0.12);
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(7, 17, 31, 0.05);
}

.survai-editor-zoom button {
    display: grid;
    min-height: 48px;
    place-items: center;
    border: 0;
    color: #0b1321;
    background: transparent;
    cursor: pointer;
}

.survai-editor-zoom strong {
    display: grid;
    min-height: 48px;
    place-items: center;
    border-inline: 1px solid rgba(7, 17, 31, 0.09);
    font-weight: 800;
}

.survai-photo-editor__workspace {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 0;
    padding: 14px;
}

.survai-photo-editor__stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: auto;
    border: 1px solid rgba(7, 17, 31, 0.12);
    border-radius: 0 !important;
    padding: 18px;
    background:
        linear-gradient(45deg, #eef2f5 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f5 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f5 75%),
        #ffffff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.survai-photo-editor__stage canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 !important;
    box-shadow: 0 16px 50px rgba(7, 17, 31, 0.18);
    transform-origin: center center;
    touch-action: none;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.survai-photo-editor__hint {
    border-radius: 8px;
    padding: 13px 16px;
    color: #075e4b;
    background: linear-gradient(90deg, rgba(27, 90, 249, 0.22), rgba(8, 127, 103, 0.08));
    font-weight: 700;
}

.survai-photo-editor__hint[data-status="error"] {
    color: #8a1f11;
    background: #fff1ed;
}

.survai-photo-editor__hint[data-status="success"] {
    color: #075e4b;
    background: #e9fbd1;
}

.survai-photo-editor__annotation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(7, 17, 31, 0.1);
    border-radius: 18px;
    padding: 12px;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(7, 17, 31, 0.08);
}

.survai-photo-editor__annotation-bar[hidden],
.survai-photo-editor__annotation-bar label[hidden] {
    display: none;
}

.survai-photo-editor__annotation-bar button {
    flex: 0 0 auto;
    min-height: 44px;
    border-radius: 999px;
    padding: 10px 13px;
    color: #182230;
    background: #ffffff;
}

.survai-photo-editor__annotation-bar button.is-active {
    color: #ffffff;
    border-color: #1b5af9;
    background: #1b5af9;
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.22);
}

.survai-photo-editor[data-editor-mode="annotate"] .survai-photo-editor__stage canvas {
    cursor: crosshair;
}

.survai-photo-editor .survai-editor-pill[title],
.survai-photo-editor .survai-photo-editor__annotation-bar button[title] {
    white-space: nowrap;
}

.survai-photo-editor__annotation-bar label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid rgba(7, 17, 31, 0.1);
    border-radius: 999px;
    padding: 7px 10px;
    color: #475467;
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 850;
}

.survai-photo-editor__annotation-bar input[type="color"] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
}

.survai-photo-editor__annotation-bar select {
    border: 0;
    border-radius: 999px;
    padding: 7px 9px;
    color: #0b1321;
    background: #ffffff;
    font: inherit;
    font-weight: 800;
}

.survai-photo-editor__strip {
    display: flex;
    gap: 10px;
    border: 1px solid rgba(7, 17, 31, 0.1);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    background: #ffffff;
}

.survai-photo-editor__thumb {
    position: relative;
    border: 2px solid #1b5af9;
    border-radius: 0 !important;
    padding: 0;
    overflow: visible;
    background: #ffffff;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.survai-photo-editor__thumb canvas {
    display: block;
    width: 120px;
    height: 74px;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: contain;
}

.survai-photo-editor__thumb span {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 6px;
    color: #0b1321;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
}

.survai-photo-editor__panel {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    overflow: auto;
    border-left: 1px solid rgba(7, 17, 31, 0.1);
    padding: calc(24px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
}

.survai-photo-editor__panel [hidden] {
    display: none !important;
}

.survai-photo-editor__panel label {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: #4b5563;
    font-weight: 700;
}

.survai-photo-editor__panel input[type="color"] {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
}

.survai-photo-editor__info {
    display: grid;
    gap: 12px;
}

.survai-photo-editor__info h3 {
    margin: 0;
}

.survai-photo-editor__info dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.survai-photo-editor__info div {
    display: grid;
    gap: 3px;
    border-bottom: 1px solid rgba(7, 17, 31, 0.08);
    padding-bottom: 9px;
}

.survai-photo-editor__info dt {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.survai-photo-editor__info dd {
    margin: 0;
    color: #0b1321;
    overflow-wrap: anywhere;
}

.survai-editor-tool-grid {
    display: grid;
    gap: 8px;
}

.survai-editor-tool-grid button,
.survai-editor-panel-button {
    justify-content: flex-start;
    border-radius: 8px;
    color: #0b1321;
    background: #ffffff;
}

.survai-editor-tool-grid button.is-active,
.survai-editor-panel-button:hover {
    border-color: rgba(8, 127, 103, 0.3);
    background: linear-gradient(135deg, rgba(27, 90, 249, 0.22), rgba(7, 88, 80, 0.08));
}

.survai-photo-editor__ai {
    border-top: 1px solid rgba(7, 17, 31, 0.1);
    padding-top: 14px;
}

.survai-photo-editor__ai h3 {
    margin: 0 0 6px;
    color: #0b1321;
}

.survai-photo-editor__ai p,
.survai-photo-editor__thermal {
    color: #667085;
    font-size: 0.88rem;
}

.survai-ai-suggestion {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(7, 17, 31, 0.1);
    border-radius: 10px;
    padding: 12px;
    background: #ffffff;
}

.survai-ai-suggestion + .survai-ai-suggestion {
    margin-top: 8px;
}

.survai-ai-suggestion span {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 800;
}

.survai-ai-suggestion div {
    display: flex;
    gap: 8px;
}

.survai-ai-suggestion button {
    border: 1px solid rgba(7, 17, 31, 0.12);
    border-radius: 999px;
    padding: 7px 11px;
    background: #f8fafc;
    font-weight: 800;
    cursor: pointer;
}

.survai-ai-suggestion button:first-child {
    color: #ffffff;
    border-color: #1b5af9;
    background: #1b5af9;
}

body.modal-open {
    overflow: hidden;
}

.survai-professional-notice {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(27, 90, 249, 0.18);
    border-radius: 16px;
    padding: 16px 18px;
    color: #123053;
    background: linear-gradient(135deg, rgba(27, 90, 249, 0.1), rgba(255, 255, 255, 0.96));
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.survai-professional-notice strong {
    color: #0b1321;
    font-size: 1rem;
}

.survai-professional-notice p {
    margin: 0;
    color: #475467;
    line-height: 1.55;
}

.survai-professional-notice__label {
    width: max-content;
    border-radius: 999px;
    padding: 5px 10px;
    color: #1648d4;
    background: rgba(27, 90, 249, 0.1);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.survai-professional-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.survai-professional-badges span {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    padding: 6px 10px;
    color: #344054;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
}

.pwa-pull-refresh-indicator {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: 50%;
    z-index: 10000;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    padding: 8px 14px;
    color: #ffffff;
    background: rgba(11, 18, 32, 0.92);
    box-shadow: 0 12px 28px rgba(11, 18, 32, 0.28);
    font-size: 0.84rem;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-120% + min(var(--pull-distance, 0px), 54px)));
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.pwa-pull-refresh-indicator.is-visible {
    opacity: 1;
}

.pwa-pull-refresh-indicator.is-ready,
.pwa-pull-refresh-indicator.is-refreshing {
    background: rgba(27, 90, 249, 0.94);
}

.pwa-pull-refresh-indicator span {
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.pwa-pull-refresh-indicator.is-ready span,
.pwa-pull-refresh-indicator.is-refreshing span {
    transform: rotate(225deg) translateY(-2px);
}

.capture-toolbar-button.capture-flash-button.active {
    color: var(--navy) !important;
    border-color: #fff7b8 !important;
    background: radial-gradient(circle at 50% 38%, #fff7b8 0%, #ffd60a 58%, #f5b700 100%) !important;
    box-shadow:
        0 0 0 4px rgba(255, 214, 10, 0.26),
        0 0 28px rgba(255, 214, 10, 0.86),
        0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

.capture-toolbar-button.capture-flash-button.active span::before {
    background: var(--navy) !important;
}

@media (max-width: 820px) {
    .survai-photo-editor__shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .survai-photo-editor__rail {
        order: 3;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .survai-photo-editor__brand {
        display: none;
    }

    .survai-editor-tool {
        min-width: 86px;
        min-height: 52px;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        font-size: 0.74rem;
    }

    .survai-photo-editor__main {
        order: 1;
        min-height: 0;
    }

    .survai-photo-editor__topbar {
        grid-template-columns: auto auto auto auto auto;
        gap: 7px;
        min-height: 72px;
        padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    }

    .survai-editor-pill {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .survai-editor-pill span {
        display: none;
    }

    .survai-editor-zoom {
        grid-template-columns: 38px 54px 38px;
        font-size: 0.82rem;
    }

    .survai-editor-zoom button,
    .survai-editor-zoom strong {
        min-height: 44px;
    }

    .survai-editor-done {
        min-width: 88px;
        min-height: 44px;
        padding: 10px 12px;
    }

    .survai-photo-editor__workspace {
        padding: 8px;
        gap: 8px;
    }

    .survai-photo-editor__stage {
        padding: 8px;
    }

    .survai-photo-editor__hint {
        padding: 10px 12px;
        font-size: 0.84rem;
    }

    .survai-photo-editor__annotation-bar {
        justify-content: flex-start;
        border-radius: 12px;
        padding: 8px;
    }

    .survai-photo-editor__annotation-bar button {
        min-width: 82px;
        flex-direction: column;
        gap: 4px;
        border-radius: 12px;
        padding: 8px 10px;
        font-size: 0.74rem;
    }

    .survai-photo-editor__annotation-bar label {
        min-width: max-content;
    }

    .survai-photo-editor__strip {
        display: none;
    }

    .survai-photo-editor__panel {
        order: 2;
        display: block;
        max-height: 31dvh;
        border-top: 1px solid rgba(7, 17, 31, 0.1);
        border-left: 0;
        padding: 10px 12px;
    }

    .survai-photo-editor__panel label {
        margin-bottom: 10px;
    }

    .survai-editor-tool-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .survai-editor-tool-grid button {
        min-width: 94px;
        flex: 0 0 auto;
    }

    .survai-photo-editor__ai {
        margin-top: 12px;
    }

    .smart-annotation-modal {
        padding: 0;
    }

    .smart-annotation-dialog {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .smart-annotation-head {
        padding: 14px;
    }

    .smart-annotation-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(42dvh, 1fr) minmax(0, 48dvh);
        min-height: 0;
    }

    .smart-annotation-canvas {
        min-height: 0;
        padding: 8px;
    }

    .smart-annotation-panel {
        min-height: 0;
        max-height: 50dvh;
    }
}

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y;
        -webkit-text-size-adjust: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    body.has-mobile-sidebar .main-panel {
        padding-top: var(--survai-mobile-app-header-total);
    }

    .workflow-shortcuts {
        display: none !important;
    }

    .regenerate-actions {
        width: 100%;
    }

    .regenerate-actions .inline-action-form,
    .regenerate-actions .btn {
        width: 100%;
    }

    .workflow-nav-heading.section-head,
    .processing-head {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .workflow-nav-address {
        display: none;
    }

    .workflow-nav-heading > div,
    .processing-head > div:first-child {
        min-width: 0;
    }

    .progress-report-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
    }

    .progress-report-heading .report-heading-right {
        align-items: flex-start;
        justify-self: end;
        margin-left: 0;
    }

    .workflow-nav-heading .section-head-actions,
    .processing-head .section-head-actions {
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .collapsible-card > .section-head,
    .collapsible-card > .workflow-nav-heading,
    .collapsible-card > .processing-head,
    .section-card > .section-head,
    .output-section > header {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .collapsible-card > .section-head .section-head-actions,
    .collapsible-card > .workflow-nav-heading .section-head-actions,
    .collapsible-card > .processing-head .section-head-actions,
    .section-card > .section-head .section-head-actions,
    .output-section > header .section-head-actions {
        width: auto;
        justify-content: flex-end;
        align-items: flex-start;
        margin-left: auto;
    }

    .workflow-nav-heading .status {
        max-width: 126px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workflow-nav-heading h2,
    .processing-head h2 {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .processing-count {
        white-space: nowrap;
    }

    .collapsible-card > .section-head,
    .collapsible-card > .workflow-nav-heading,
    .collapsible-card > .processing-head {
        margin-bottom: 0;
    }

    .collapsible-card:not(.is-collapsed) > [data-card-collapsible] {
        margin-top: 12px;
    }

    .processing-log-card {
        margin-bottom: 0;
    }
}

.pdf-viewer-body {
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
    background: var(--navy);
}

.pdf-viewer-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #eef3f8;
}

.pdf-viewer-topbar {
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid #d9e2ee;
    background: rgba(255, 255, 255, 0.96);
    color: #13233a;
}

.pdf-viewer-back,
.pdf-viewer-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: #13233a;
    font-weight: 800;
    text-decoration: none;
}

.pdf-viewer-back span {
    display: inline-block;
    margin-right: 4px;
    font-size: 2rem;
    line-height: 1;
}

.pdf-viewer-title {
    min-width: 0;
    text-align: center;
}

.pdf-viewer-title strong,
.pdf-viewer-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-viewer-title strong {
    font-size: 1rem;
}

.pdf-viewer-title span {
    color: #607086;
    font-size: 0.82rem;
}

.pdf-viewer-frame-wrap {
    min-height: 0;
    overflow: hidden;
}

.pdf-viewer-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.pdf-viewer-toolbar {
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #d9e2ee;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.14);
}

.pdf-viewer-toolbar .btn {
    width: 100%;
    min-height: 46px;
    padding-inline: 12px;
}

@media (min-width: 900px) {
    .pdf-viewer-shell {
        inset: 18px;
        width: auto;
        height: auto;
        border-radius: 18px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.24);
    }
}

/* --- Survey workflow chrome (progress rail, page headers) --- */
.wizard-progress + .supporting-image-panel {
    margin-top: 0;
}

/* Process Data page (progress.php): collapsible interior + supporting docs layout */
.progress-page .progress-main [data-card-collapsible] {
    min-width: 0;
}

.progress-page .progress-main:has(.progress-floating-dock) {
    padding-bottom: clamp(72px, 12vw, 120px);
}

.main-panel:has(.progress-floating-dock) {
    padding-bottom: clamp(72px, 12vw, 120px);
}

.progress-floating-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
}

.progress-floating-dock__surface {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px 20px;
    max-width: min(960px, 100%);
    padding: 12px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 4px 24px rgba(15, 23, 42, 0.08),
        0 24px 48px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(10px);
}

body.progress-page .progress-floating-dock__surface {
    background: rgba(255, 255, 255, 0.96);
}

.progress-floating-dock__group {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    padding: 4px 8px;
    border-radius: 14px;
    background: rgba(241, 245, 249, 0.85);
}

.progress-floating-dock__group--rooms {
    background: rgba(238, 242, 255, 0.9);
}

.progress-floating-dock__group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #64748b);
    white-space: nowrap;
}

.progress-floating-dock__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-dock-control {
    position: relative;
    display: flex;
    align-items: center;
}

.progress-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.progress-dock-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.progress-dock-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.progress-dock-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.progress-dock-btn--primary {
    background: var(--survai-blue);
    color: #fff;
}

.progress-dock-btn--retry {
    background: #fff;
    color: #475569;
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.progress-dock-btn--danger {
    background: #fb7185;
    color: #881337;
}

.progress-dock-icon-svg {
    display: block;
}

.progress-dock-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: min(260px, 70vw);
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #0f172a;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    z-index: 2;
}

.progress-dock-popover strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.progress-dock-popover p {
    margin: 0;
    color: #475569;
}

.progress-dock-control:hover .progress-dock-popover,
.progress-dock-control:focus-within .progress-dock-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 540px) {
    .progress-floating-dock__surface {
        flex-direction: column;
        align-items: stretch;
    }

    .progress-floating-dock__group {
        justify-content: space-between;
    }
}

.progress-page .progress-wizard-card .wizard-progress {
    min-width: 0;
    margin-bottom: 0;
}

.progress-page .progress-wizard-card .wizard-progress a strong,
.progress-page .progress-wizard-card .wizard-progress button strong {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.progress-page .progress-files-card {
    display: grid;
    gap: 18px;
}

.progress-page .progress-file-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.035);
}

.progress-page .progress-file-tab {
    min-width: 0;
    min-height: 58px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font: inherit;
    font-weight: 850;
    text-align: left;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.progress-page .progress-file-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-page .progress-file-tab strong {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eaf1f8;
    color: var(--ink);
    font-size: 0.95rem;
}

.progress-page .progress-file-tab:hover,
.progress-page .progress-file-tab.is-active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.progress-page .progress-file-tab.is-active strong {
    background: var(--accent);
    color: var(--theme-accent-ink);
}

.progress-page .progress-file-panel {
    min-width: 0;
}

.progress-page .progress-file-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.progress-page .progress-file-panel-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.25rem;
}

.progress-page .progress-file-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-page .progress-media-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.progress-page .progress-media-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--theme-panel-soft);
}

.progress-page .progress-media-item strong,
.progress-page .progress-video-item strong {
    display: block;
    color: var(--ink);
}

.progress-page .progress-media-item span,
.progress-page .progress-video-item span {
    display: block;
    color: var(--muted);
    font-weight: 750;
    font-size: 0.9rem;
}

.progress-page .progress-media-item audio {
    width: 100%;
}

.progress-page .progress-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.progress-page .progress-video-item {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--theme-panel-soft);
}

.progress-page .progress-video-item video {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    background: #0b1321;
    object-fit: cover;
}

.progress-page .progress-file-panel .supporting-image-panel {
    margin: 0;
    box-shadow: none;
}

/* Supporting documents: match other cards’ outer rhythm; keep inner inset panels */
.progress-page .supporting-image-panel.transcript-panel {
    padding: 22px;
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

.progress-page .supporting-image-panel.transcript-panel .section-head {
    padding: 0 0 16px;
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.progress-page .supporting-image-panel.transcript-panel [data-card-collapsible] {
    border-top: 0;
    min-width: 0;
}

.progress-page .supporting-image-panel .supporting-document-layout {
    border-top: 0;
    padding: 0;
    min-width: 0;
}

.progress-page .supporting-document-layout .supporting-document,
.progress-page .supporting-document-layout .report-form {
    min-width: 0;
}

.progress-page .supporting-document img {
    max-width: 100%;
}

.progress-page .supporting-document-list {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
}

.progress-page .supporting-document-item {
    grid-template-columns: 82px minmax(0, 1fr) auto;
}

.progress-page .supporting-document-item > div {
    min-width: 0;
}

.progress-page .section-head > div,
.progress-page .processing-head > div {
    min-width: 0;
}

.progress-page .processing-head h2 {
    overflow-wrap: anywhere;
}

.progress-page .diagnostic-grid {
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.progress-page .diagnostic-stat {
    min-width: 0;
}

.progress-page .queue-item {
    min-width: 0;
}

.progress-page .queue-item em {
    overflow-wrap: anywhere;
}

.progress-page .processing-card[data-spinner-src] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(27, 90, 249, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.98) 42%, rgba(236, 244, 255, 0.94) 100%);
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.07),
        0 0 0 1px rgba(184, 239, 63, 0.06);
}

.progress-page .processing-card[data-spinner-src]::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 55% at 18% 0%, rgba(27, 90, 249, 0.06), transparent 52%);
}

.progress-page .processing-card[data-spinner-src] > * {
    position: relative;
    z-index: 1;
}

.progress-page .processing-card[data-spinner-src] .processing-head .processing-count {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(27, 90, 249, 0.14);
    background: rgba(255, 255, 255, 0.75);
    color: var(--survai-navy);
    font-weight: 800;
}

.progress-page .processing-card[data-spinner-src] .progress-track {
    height: 12px;
    border: 1px solid rgba(27, 90, 249, 0.12);
    background: rgba(11, 19, 33, 0.06);
}

.progress-page .processing-card[data-spinner-src] .progress-track span {
    background: linear-gradient(90deg, #1b5af9 0%, #4f8bff 42%, #b8ef3f 100%);
    box-shadow: 0 0 18px rgba(27, 90, 249, 0.28);
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-page .processing-card[data-spinner-src] .queue-list {
    gap: 10px;
}

.progress-page .processing-card[data-spinner-src] .queue-item {
    border-radius: 14px;
    border: 1px solid rgba(27, 90, 249, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 12px 14px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.progress-page .processing-card[data-spinner-src] .queue-item.queue-pending {
    border-color: rgba(27, 90, 249, 0.12);
}

.progress-page .processing-card[data-spinner-src] .queue-item.queue-processing {
    border-color: rgba(184, 239, 63, 0.42);
    background: linear-gradient(135deg, #ffffff 0%, rgba(184, 239, 63, 0.09) 100%);
    box-shadow:
        0 0 0 1px rgba(184, 239, 63, 0.14),
        0 12px 28px rgba(27, 90, 249, 0.08);
}

.progress-page .processing-card[data-spinner-src] .queue-item.queue-completed {
    border-color: rgba(34, 197, 94, 0.28);
}

.progress-page .processing-card[data-spinner-src] .queue-item.queue-failed {
    border-color: rgba(239, 68, 68, 0.28);
}

.progress-page .processing-card[data-spinner-src] .queue-item__status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 2rem;
    min-height: 1.5rem;
    margin: 0;
    font-weight: 800;
}

.progress-page .processing-card[data-spinner-src] .queue-item__status--pending,
.progress-page .processing-card[data-spinner-src] .queue-item__status--processing {
    color: transparent;
}

.progress-page .processing-card[data-spinner-src] .queue-status-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-page .processing-card[data-spinner-src] .queue-status-spinner__img {
    display: block;
    width: 22px;
    height: 22px;
}

.progress-page .processing-card[data-spinner-src] .queue-status-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--survai-muted);
}

.progress-page .processing-card[data-spinner-src] .queue-completed .queue-status-label {
    color: var(--success);
}

.progress-page .processing-card[data-spinner-src] .queue-processing .queue-status-label {
    color: var(--survai-blue);
}

.progress-page .processing-card[data-spinner-src] .queue-failed .queue-status-label {
    color: var(--danger);
}

.progress-page .workflow-unassigned-photos {
    margin-top: 1rem;
}

.progress-page .workflow-unassigned-photos-title {
    margin: 0;
}

.progress-page .workflow-unassigned-photos-actions {
    margin: 0;
}

.progress-page .workflow-unassigned-photos .matched-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    align-items: start;
}

.progress-page .workflow-unassigned-photos .matched-photo-grid figure {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.progress-page .workflow-photo-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.progress-page .workflow-photo-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f6fb;
}

.progress-page .workflow-photo-media::before {
    content: "Preview unavailable";
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    padding: 12px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.progress-page .workflow-photo-media.is-broken::before {
    display: grid;
}

.progress-page .workflow-photo-media img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    font-size: 0;
    color: transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.progress-page .workflow-photo-link figcaption {
    display: -webkit-box;
    min-height: 58px;
    padding: 10px 12px 12px;
    overflow: hidden;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.progress-page .workflow-photo-link:hover .workflow-photo-media img,
.progress-page .workflow-photo-link:focus-visible .workflow-photo-media img {
    transform: translateY(-1px);
}

.progress-page .workflow-photo-link:focus-visible {
    outline: 3px solid rgba(30, 64, 175, 0.22);
    outline-offset: 4px;
    border-radius: 8px;
}

.progress-page .workflow-unassigned-photos .matched-photo-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    gap: 6px;
}

.progress-page .workflow-unassigned-photos .matched-photo-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(127, 29, 29, 0.18);
    white-space: nowrap;
}

.progress-page .workflow-photo-roll {
    margin-top: 1rem;
}

.progress-page .workflow-photo-roll .matched-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.progress-page .workflow-photo-roll a {
    display: block;
}

.progress-page .workflow-photo-roll-actions {
    margin-top: 1rem;
}

@media (max-width: 560px) {
    .progress-page .progress-wizard-card .wizard-progress {
        display: grid;
        grid-template-columns: 1fr;
    }

    .progress-page .progress-file-tabs {
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
    }

    .progress-page .progress-file-tab {
        min-height: 52px;
        padding: 10px 12px;
    }

    .progress-page .progress-file-panel-head,
    .progress-page .progress-media-item {
        grid-template-columns: 1fr;
        display: grid;
    }

    .progress-page .progress-main .workflow-page-card,
    .progress-page .progress-main .processing-card.workflow-page-card,
    .progress-page .supporting-image-panel.transcript-panel,
    .survey-workflow-surface .main-panel > .card:not(.desk-study-status-strip),
    .survey-workflow-surface .main-panel .desk-study-main-column > .card,
    .survey-workflow-surface .main-panel .desk-study-main-column > section.card,
    .survey-workflow-surface .main-panel form.desk-study-form > section.card,
    .survey-workflow-surface .main-panel form.desk-study-form > div.card,
    .survey-workflow-surface .main-panel > .desk-study-status-strip.card {
        padding: 18px;
    }
}

.wizard-progress + .desk-study-status-strip {
    margin-top: 0;
}

.page-transcript-upload .page-header.workflow-page-header {
    margin-bottom: 2rem;
}

.page-transcript-upload .wizard-progress {
    margin-bottom: var(--workflow-progress-bottom-gap, 1.5rem);
}

.transcript-workspace-page {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.transcript-workspace-page .app-shell,
.transcript-workspace-page .transcript-workspace-main {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.transcript-workspace-main {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: var(--app-main-padding);
    color: var(--theme-text);
}

.transcript-workspace-header {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.transcript-workspace-header > div:first-of-type {
    min-width: 0;
}

.transcript-workspace-header > .header-actions,
.transcript-workspace-header > .workflow-header-actions {
    min-width: 0;
}

.transcript-workspace-header h1 {
    color: var(--theme-text);
}

.transcript-workspace-header p {
    color: var(--theme-muted);
}

.transcript-workspace-header .workflow-title-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--theme-text);
}

.transcript-workspace-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-self: start;
    justify-content: flex-end;
}

.transcript-workspace-status span {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 104px;
    padding: 12px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-panel-soft);
    color: var(--theme-muted);
    font-size: 0.82rem;
}

.transcript-workspace-status strong {
    color: var(--theme-text);
    font-size: 1.2rem;
}

.transcript-workspace-form {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

.transcript-workspace-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--theme-panel);
    box-shadow: var(--shadow);
    color: var(--theme-text);
    min-width: 0;
    max-width: 100%;
}

.transcript-editor-card {
    padding: clamp(18px, 2.8vw, 30px);
}

.transcript-card-head,
.transcript-section-title-row,
.transcript-recording-title-row,
.transcript-workspace-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.transcript-card-head {
    margin-bottom: 16px;
}

.transcript-card-head h2,
.transcript-section-title-row h2 {
    margin-bottom: 4px;
    color: var(--theme-text);
}

.transcript-card-head p,
.transcript-section-title-row p,
.transcript-recording-main p,
.transcript-empty {
    margin: 0;
    color: var(--theme-muted);
}

.transcript-workspace-editor {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: clamp(320px, 43vh, 560px);
    resize: vertical;
    border-color: var(--theme-border);
    border-radius: 12px;
    background: var(--theme-input);
    color: var(--theme-input-text);
    font-size: 1rem;
    line-height: 1.6;
}

.transcript-workspace-editor::placeholder {
    color: color-mix(in srgb, var(--theme-muted) 72%, transparent);
}

.transcript-workspace-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 14px;
}

.transcript-site-upload-retry-actions {
    margin-top: 10px;
    margin-bottom: 4px;
    align-items: flex-start;
}

.transcript-site-upload-retry-actions .form-note {
    flex: 1 1 min(520px, 100%);
    margin: 0;
    line-height: 1.45;
}

.transcript-bulk-transcription-retry {
    margin-bottom: 14px;
}

.transcript-site-uploads-scroll {
    max-height: min(560px, 72vh);
    min-height: 200px;
    overflow: auto;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-panel);
    -webkit-overflow-scrolling: touch;
}

.transcript-site-uploads-table {
    width: 100%;
    min-width: 1480px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.transcript-site-uploads-table thead th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: linear-gradient(to bottom, var(--theme-panel), var(--theme-panel));
    box-shadow: 0 1px 0 var(--theme-border);
    text-align: left;
    padding: 8px 10px;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-muted);
    white-space: nowrap;
}

.transcript-site-uploads-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--theme-border);
    vertical-align: top;
}

.transcript-site-upload-row:last-child td {
    border-bottom: none;
}

.transcript-site-upload-filename {
    display: block;
    max-width: min(260px, 28vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-site-upload-table-ta {
    width: 100%;
    min-width: 140px;
    resize: vertical;
    min-height: 44px;
    max-height: 200px;
    font-size: 0.8125rem;
    line-height: 1.4;
    box-sizing: border-box;
}

.transcript-su-table-cell-label {
    display: block;
    margin: 0;
    min-width: 0;
}

.transcript-su-col-meta {
    max-width: 170px;
}

.transcript-site-upload-meta-summary {
    display: block;
    max-width: 164px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.transcript-site-upload-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 800;
    font-size: 0.74rem;
    background: rgba(27, 90, 249, 0.12);
    color: #7eb0ff;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transcript-site-upload-row.status-failed .transcript-site-upload-status,
.transcript-site-upload-row.status-failed_terminal .transcript-site-upload-status,
.transcript-site-upload-row.status-failed_retryable .transcript-site-upload-status {
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

.transcript-site-upload-row.status-completed .transcript-site-upload-status {
    background: rgba(52, 211, 153, 0.14);
    color: #a7f3d0;
}

.transcript-site-upload-row.status-transcribing .transcript-site-upload-status,
.transcript-site-upload-row.status-pending_cloud_transcription .transcript-site-upload-status,
.transcript-site-upload-row.status-aws_transcribe_processing .transcript-site-upload-status {
    background: rgba(96, 165, 250, 0.14);
    color: #bfdbfe;
}

.transcript-site-upload-row.status-pending .transcript-site-upload-status,
.transcript-site-upload-row.status-pending_audio_extraction .transcript-site-upload-status,
.transcript-site-upload-row.status-extracting_audio .transcript-site-upload-status,
.transcript-site-upload-row.status-queued .transcript-site-upload-status,
.transcript-site-upload-row.status-processing .transcript-site-upload-status,
.transcript-site-upload-row.status-uploaded .transcript-site-upload-status {
    background: rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
}

.transcript-site-upload-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 128px;
}

.transcript-site-upload-ready-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
}

.transcript-site-upload-row-hint {
    font-size: 0.72rem;
    color: var(--theme-muted);
    line-height: 1.35;
}

.transcript-site-upload-row-hint--ok {
    color: #a7f3d0;
}

.transcript-site-upload-row-hint--error {
    color: #fecaca;
}

.transcript-su-col-transcript,
.transcript-su-col-notes {
    min-width: 200px;
}

.transcript-mic-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid rgba(27, 90, 249, 0.36);
    border-radius: 999px;
    padding: 0 16px;
    background: rgba(27, 90, 249, 0.1);
    color: var(--theme-text);
    cursor: pointer;
    font-weight: 800;
}

.transcript-mic-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #1b5af9;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transcript-mic-button.is-active {
    background: #1b5af9;
    color: #ffffff;
}

.transcript-mic-button.is-active svg {
    stroke: #ffffff;
}

.transcript-mic-state,
.transcript-workspace-message {
    margin: 0;
    color: var(--theme-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.documents-carousel-card,
.recordings-card {
    padding: 18px;
}

.transcript-toggle-row,
.transcript-recording-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--theme-text);
    font-weight: 800;
}

.transcript-toggle-row input,
.transcript-recording-check input,
.transcript-document-card input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: #1b5af9;
}

.transcript-document-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 14px 2px 4px;
    scroll-snap-type: x proximity;
}

.transcript-document-card {
    display: grid;
    grid-template-columns: auto auto minmax(170px, 1fr);
    align-items: center;
    gap: 10px;
    flex: 0 0 min(320px, 82vw);
    scroll-snap-align: start;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--theme-panel-soft);
    cursor: pointer;
}

.transcript-document-card.is-selected {
    border-color: rgba(27, 90, 249, 0.64);
    background: rgba(27, 90, 249, 0.12);
}

.transcript-document-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: #1b5af9;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}

.transcript-document-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.transcript-document-copy strong,
.transcript-recording-main strong {
    overflow: hidden;
    color: var(--theme-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-document-copy em {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-recording-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.transcript-exif-panel {
    margin-top: 0.75rem;
    padding: 12px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-panel-soft);
}

.transcript-exif-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #6b7280);
}

.transcript-exif-list {
    display: grid;
    gap: 6px;
    margin: 0;
}

.transcript-exif-item {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 8px 12px;
    font-size: 0.9rem;
}

.transcript-exif-item dt {
    margin: 0;
    font-weight: 600;
    color: var(--theme-text-muted, #6b7280);
}

.transcript-exif-item dd {
    margin: 0;
    word-break: break-word;
}

.transcript-exif-empty {
    margin: 0;
}

.transcript-combined-exif-panel {
    margin-bottom: 1rem;
}

.transcript-combined-exif-list {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 14px;
}

.transcript-combined-exif-item {
    display: grid;
    gap: 6px;
}

.transcript-combined-exif-meta {
    font-size: 0.88rem;
    color: var(--theme-text-muted, #6b7280);
}

.transcript-recording-card {
    display: grid;
    grid-template-columns: auto minmax(190px, 0.9fr) minmax(210px, 1fr) minmax(260px, 0.95fr);
    gap: 14px;
    align-items: center;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--theme-panel-soft);
}

.transcript-recording-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.transcript-recording-main audio {
    width: 100%;
}

.transcript-recording-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.transcript-recording-summary span {
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--theme-muted);
    background: color-mix(in srgb, var(--theme-panel) 84%, transparent);
    font-size: 0.82rem;
    font-weight: 800;
}

.transcript-recording-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 0;
}

.transcript-recording-actions audio {
    width: min(100%, 320px);
}

.transcript-recording-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(27, 90, 249, 0.12);
    color: #1b5af9;
    font-size: 0.78rem;
    font-weight: 900;
}

.transcript-recording-card.status-error .transcript-recording-status,
.transcript-recording-card.status-failed .transcript-recording-status {
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca;
}

.transcript-recording-card.status-transcribing .transcript-recording-status {
    background: rgba(96, 165, 250, 0.16);
    color: #bfdbfe;
}

.transcript-empty {
    padding: 14px 0 4px;
}

@media (max-width: 1100px) {
    .transcript-workspace-header,
    .transcript-card-head,
    .transcript-section-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .transcript-workspace-status {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        justify-content: stretch;
        align-self: stretch;
        justify-items: stretch;
    }

    .transcript-workspace-status span {
        flex: unset;
        min-width: 0;
    }

    .transcript-recording-card {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-width: 0;
    }

    .transcript-recording-check {
        justify-content: space-between;
    }

    .transcript-recording-actions {
        justify-items: stretch;
    }

    .transcript-recording-actions audio {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .transcript-workspace-page {
        overflow-x: hidden;
    }

    .transcript-workspace-page .app-shell {
        width: 100%;
        min-width: 0;
    }

    .transcript-workspace-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }

    body.has-mobile-sidebar .transcript-workspace-page .transcript-workspace-main {
        padding-top: var(--survai-mobile-app-header-total, calc(110px + env(safe-area-inset-top, 0px)));
    }

    .transcript-workspace-header {
        gap: 14px;
        margin-bottom: 16px;
    }

    .transcript-workspace-header h1 {
        font-size: clamp(1.8rem, 10vw, 2.4rem);
        line-height: 1.05;
    }

    .transcript-workspace-header p {
        font-size: 0.95rem;
    }

    .transcript-workspace-header .workflow-title-meta {
        display: grid;
        gap: 8px;
        align-items: start;
        border: 1px solid var(--theme-border);
        border-radius: 14px;
        padding: 12px;
        background: var(--theme-panel);
    }

    .transcript-workspace-header .workflow-title-meta strong {
        color: var(--theme-text);
        overflow-wrap: anywhere;
    }

    .transcript-workspace-status {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .transcript-workspace-status span {
        min-width: 0;
        padding: 10px;
        font-size: 0.72rem;
    }

    .transcript-workspace-status strong {
        font-size: 1rem;
    }

    .transcript-editor-card,
    .documents-carousel-card,
    .recordings-card {
        padding: 14px;
        border-radius: 14px;
    }

    .transcript-workspace-editor {
        min-height: 44vh;
        font-size: 0.95rem;
    }

    .transcript-toggle-row {
        justify-content: space-between;
        width: 100%;
    }

    .transcript-workspace-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .transcript-workspace-actions .btn,
    .transcript-mic-button,
    .transcript-generate-btn {
        width: 100%;
        justify-content: center;
    }

    .transcript-document-card {
        grid-template-columns: auto auto minmax(0, 1fr);
        flex-basis: min(84vw, 320px);
        max-width: 84vw;
    }

    .transcript-recording-card {
        gap: 10px;
        padding: 12px;
    }

    .transcript-recording-check {
        align-items: center;
        justify-content: flex-start;
    }

    .transcript-recording-main strong {
        white-space: normal;
    }

    .transcript-recording-summary {
        gap: 6px;
    }

    .transcript-recording-summary span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .transcript-recording-status {
        justify-self: start;
    }
}

.workflow-page-header h1 {
    margin-bottom: 0.35rem;
}

.workflow-page-guidance {
    margin: 0;
    max-width: 52rem;
    color: #5c6b82;
    font-size: 0.98rem;
    line-height: 1.45;
}

/**
 * Desk study, Process Data, Quality Control: one rhythm for main padding and card stacks.
 * Matches .workflow-page-card (22px / 18px / 20px).
 */
.survey-workflow-surface .main-panel {
    box-sizing: border-box;
    padding: var(--app-main-padding);
}

.survey-workflow-surface .main-panel > .alert {
    margin-bottom: 1.25rem;
}

.survey-workflow-surface .main-panel > .card:not(.desk-study-status-strip),
.survey-workflow-surface .main-panel .desk-study-main-column > .card,
.survey-workflow-surface .main-panel .desk-study-main-column > section.card,
.survey-workflow-surface .main-panel form.desk-study-form > section.card,
.survey-workflow-surface .main-panel form.desk-study-form > div.card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 22px;
    gap: 18px;
    margin-bottom: 20px;
    display: grid;
}

.survey-workflow-surface .main-panel > .desk-study-status-strip.card {
    margin-bottom: 20px;
    padding: 22px;
    gap: 12px;
}

.workflow-builder-panel .wizard-progress + .workflow-qc-summary {
    margin-top: 0;
}

.workflow-qc-summary .workflow-qc-summary-grid {
    margin-top: 0.5rem;
}

.workflow-qc-summary .section-head {
    margin-bottom: 0.35rem;
    align-items: center;
}

@media (max-width: 639px) {
    .workflow-qc-summary .section-head {
        align-items: flex-start;
    }
}

.section-qc-approval,
.approval-action-row {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.section-qc-approval .approval-status-line,
.approval-action-row .approval-status-line {
    margin: 0;
    flex: 1 1 12rem;
    font-weight: 650;
}

.approval-status-line__mark {
    margin-right: 0.35rem;
    color: #166534;
    font-weight: 800;
}

.desk-review-flag {
    margin-top: 0.65rem;
}

.wizard-review-flag {
    margin-top: 0.75rem;
}

.btn.btn-disabled,
.btn-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.floating-tool-button--disabled,
.floating-tool-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.workflow-processing-status-card .diagnostic-grid {
    margin-top: 0.25rem;
}

.workflow-header-actions {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-end;
}

/* --- Report workspace: replaces main sidebar when a report file is open --- */
.sidebar--workspace .sidebar-brand {
    justify-content: center;
    width: 100%;
}

@media (min-width: 901px) {
    body:not(.sidebar-desktop-collapsed) .sidebar--workspace .sidebar-brand::before {
        display: none;
    }
}

.sidebar--workspace .brand-logo-sidebar {
    display: block;
    width: min(420px, 100%);
    max-height: 108px;
    height: auto;
    margin: 0 auto;
    background-color: transparent !important;
    object-fit: contain;
    object-position: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar--workspace .sidebar-nav-label {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.18;
}

/* Tenant admin shortcuts must not appear in report-file workspace nav */
.sidebar--workspace .sidebar-nav a[href^="templates.php"],
.sidebar--workspace .sidebar-nav a[href^="cost_database.php"],
.sidebar--workspace .sidebar-nav a[href^="surveyor-profiles.php"],
.sidebar--workspace .sidebar-nav a[href^="settings.php"] {
    display: none !important;
}

@media (min-width: 901px) {
    .sidebar.sidebar--workspace {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 900;
        height: 100dvh;
        overflow-y: auto;
        gap: 16px;
        box-sizing: border-box;
        width: var(--sidebar-width, var(--survai-app-rail-width));
        min-width: var(--sidebar-width, var(--survai-app-rail-width));
        max-width: var(--sidebar-width, var(--survai-app-rail-width));
        padding: 22px 10px;
        transition: none;
    }

    .sidebar.sidebar--workspace + .workspace-topbar {
        left: var(--sidebar-width);
    }

    .sidebar.sidebar--workspace + .workspace-topbar + .main-panel {
        grid-column: 2;
        grid-row: 1;
        padding-top: calc(var(--app-main-padding) + 100px);
    }

    .sidebar.sidebar--workspace + .workspace-topbar.report-workspace-header + .main-panel {
        padding-top: calc(var(--app-main-padding) + 124px);
    }

    body.workspace-fullscreen .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    body.workspace-fullscreen .sidebar.sidebar--workspace + .workspace-topbar {
        left: 0;
    }

    body.workspace-fullscreen .sidebar.sidebar--workspace + .workspace-topbar + .main-panel {
        padding-top: var(--app-main-padding);
    }

    body.workspace-fullscreen .sidebar.sidebar--workspace {
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
    }

    body.workspace-fullscreen .sidebar:not(.sidebar--workspace) {
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
    }

    body.workspace-fullscreen .workspace-topbar:not(.workspace-topbar--mobile-embedded) {
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-105%);
    }

    body.workspace-fullscreen .main-panel {
        grid-column: 1;
    }

    body.workspace-fullscreen .sidebar:not(.sidebar--workspace) + .workspace-topbar--global + .main-panel {
        padding-top: var(--app-main-padding);
    }
}

.workspace-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 880;
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(16px, 2vw, 28px);
    color: #071421;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
    transition: left 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.report-workspace-header {
    display: flex;
    min-height: 124px;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.report-workspace-header__row {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-inline: clamp(16px, 2vw, 30px);
}

.report-workspace-header__context {
    min-height: 70px;
    justify-content: space-between;
    gap: 18px;
}

.report-workspace-header__title {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
}

.report-workspace-header__eyebrow {
    margin: 0;
    color: #8d98aa;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.report-workspace-header__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #657188;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.report-workspace-header__identity strong {
    overflow: hidden;
    max-width: min(42vw, 680px);
    color: #0f172a;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-workspace-header__identity span {
    position: relative;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    color: #717d93;
    white-space: nowrap;
}

.report-workspace-header__identity span + span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 10px;
    border-radius: 999px;
    background: rgba(113, 125, 147, 0.45);
}

.report-workspace-header__primary-action {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
}

.report-workspace-header__primary-action .header-actions,
.report-workspace-header__primary-action .workflow-header-actions,
.report-workspace-primary-action {
    margin: 0;
    align-items: center;
    justify-content: flex-end;
}

.report-workspace-nav {
    min-height: 54px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: clamp(16px, 2vw, 30px);
    -webkit-overflow-scrolling: touch;
}

.report-workspace-nav::-webkit-scrollbar {
    height: 0;
}

.report-workspace-nav__link {
    position: relative;
    display: inline-flex;
    min-height: 54px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 560;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 140ms ease, background-color 140ms ease;
}

.report-workspace-nav__link + .report-workspace-nav__link {
    border-left: 1px solid rgba(15, 23, 42, 0.06);
}

.report-workspace-nav__link::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.report-workspace-nav__link:hover,
.report-workspace-nav__link:focus-visible {
    color: #1b5af9;
    background: rgba(27, 90, 249, 0.035);
    outline: none;
}

.report-workspace-nav__link.is-active {
    color: #1b5af9;
    font-weight: 700;
}

.report-workspace-nav__link.is-active::after {
    background: #1b5af9;
}

.workspace-topbar-title {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.page-header-title,
.workspace-topbar-title strong {
    margin: 0;
    overflow: hidden;
    max-width: min(72vw, 920px);
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-topbar .po-topbar-titles {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.workspace-topbar .po-topbar-titles h1 {
    margin: 0;
    overflow: hidden;
    max-width: min(72vw, 920px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ops/reports/settings strip — larger title than report-workspace strip; desktop bumps +25% below */
.workspace-topbar--global .workspace-topbar-title .page-header-title,
.workspace-topbar--global .workspace-topbar-title strong {
    font-size: 1.32rem;
}

@media (min-width: 901px) {
    .sidebar:not(.sidebar--workspace) + .workspace-topbar--global {
        left: var(--sidebar-width, 280px);
    }

    .sidebar:not(.sidebar--workspace) + .workspace-topbar--global + .main-panel {
        padding-top: calc(var(--app-main-padding) + 100px);
    }

    body.sidebar-desktop-collapsed .sidebar:not(.sidebar--workspace) + .workspace-topbar--global {
        left: var(--survai-app-rail-width);
    }

    /* Primary heading in fixed white strip (<strong> in .workspace-topbar-title): +25% vs mobile/base tier */
    .workspace-topbar--global .workspace-topbar-title .page-header-title,
    .workspace-topbar--global .workspace-topbar-title strong {
        font-size: calc(1.32rem * 1.25);
    }

    .workspace-topbar:not(.workspace-topbar--global) .workspace-topbar-title .page-header-title,
    .workspace-topbar:not(.workspace-topbar--global) .workspace-topbar-title strong {
        font-size: calc(0.96rem * 1.25);
    }
}

@media (max-width: 900px) {
    /* Drawer / report nav already carry Settings — hide duplicate cog in top bar */
    .workspace-topbar .workspace-tool-button[href$='settings.php'],
    .workspace-topbar .workspace-tool-button[href*='report-settings.php'] {
        display: none !important;
    }

    /* Camera / new survey shortcut is available in the drawer and report nav */
    .workspace-topbar-actions .workspace-tool-button.workspace-mobile-camera-button {
        display: none !important;
    }

    .workspace-topbar--global:not(.workspace-topbar--mobile-embedded) {
        top: var(--survai-mobile-app-header-total, 0px);
        min-height: 82px;
        padding-block: 14px;
    }

    .sidebar:not(.sidebar--workspace) + .workspace-topbar--global + .main-panel {
        padding-top: calc(var(--app-main-padding) + 92px + var(--survai-mobile-app-header-total, 0px));
    }

    /*
     * Primary workspace top bar (global ops or report file) is moved beside the drawer toggle (see initMobileMenu / app.js).
     * Single white strip + correct scroll inset for main content.
     */
    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar .mobile-app-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: max(10px, 2.2vw);
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar .mobile-app-header > .mobile-menu-toggle {
        flex-shrink: 0;
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar .mobile-app-header > .workspace-topbar.workspace-topbar--mobile-embedded {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;
        z-index: 1 !important;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        min-height: 0 !important;
        align-items: center;
        justify-content: space-between !important;
        gap: clamp(6px, 1.8vw, 12px);
        padding: 0 !important;
        margin: 0;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar
        .mobile-app-header
        > .workspace-topbar.workspace-topbar--mobile-embedded
        .workspace-topbar-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar
        .mobile-app-header
        > .workspace-topbar.workspace-topbar--mobile-embedded
        .workspace-topbar-title
        strong {
        max-width: 100%;
    }

    /*
     * White mobile shell: workspace title is 2× the default narrow topbar label (0.88rem → ~1.76rem).
     * Applies globally wherever the workspace strip is .workspace-topbar--mobile-embedded.
     */
    .workspace-topbar.workspace-topbar--mobile-embedded .workspace-topbar-title strong {
        font-size: calc(0.88rem * 2);
        line-height: 1.2;
    }

    .workspace-topbar--global.workspace-topbar--mobile-embedded .workspace-topbar-title strong {
        font-size: calc(1rem * 2.25);
        line-height: 1.18;
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar
        .mobile-app-header
        > .workspace-topbar.workspace-topbar--mobile-embedded
        .workspace-topbar-actions {
        flex-shrink: 0;
        margin-left: 0;
        gap: 4px;
    }

    body.survai-global-topbar-mobile-embedded.has-mobile-sidebar .app-shell > .main-panel {
        padding-top: calc(var(--app-main-padding, 24px) + var(--survai-mobile-app-header-total)) !important;
    }
}

@media (min-width: 901px) {
    /* Reports: “New survey” is the grey + in aux HTML; hide duplicate camera shortcut in the strip */
    body.reports-page .workspace-topbar--global .workspace-tool-button.workspace-mobile-camera-button {
        display: none !important;
    }
}

.workspace-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Operational notifications bell lives in the global white topbar (dashboard) */
.workspace-topbar--global .workspace-topbar-actions .ops-notification-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.workspace-topbar--global .workspace-topbar-actions .ops-notification {
    display: inline-flex;
    width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #d9dbe1;
    background: transparent;
}

.workspace-topbar--global .workspace-topbar-actions .ops-notification-count {
    border-color: rgba(255, 255, 255, 0.98);
}

.workspace-topbar--global .workspace-topbar-actions .ops-notification-panel {
    z-index: 1200;
}

.workspace-tool-button,
.workspace-topbar .workspace-fullscreen-toggle {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 0;
    color: #d9dbe1;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: none;
    transition: color 140ms ease, transform 140ms ease;
}

.workspace-topbar .workspace-fullscreen-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
}

.workspace-tool-button:hover,
.workspace-tool-button:focus-visible,
.workspace-tool-button.is-active,
.workspace-topbar .workspace-fullscreen-toggle:hover,
.workspace-topbar .workspace-fullscreen-toggle:focus-visible {
    color: #d9dbe1;
    background: transparent;
    outline: none;
    transform: translateY(-1px);
}

.workspace-tool-button.is-active {
    color: #d9dbe1;
}

.workspace-tool-button--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.workspace-mobile-camera-button {
    display: none;
}

.workspace-tool-button:hover::after,
.workspace-tool-button:focus-visible::after,
.workspace-topbar .workspace-fullscreen-toggle:hover::after,
.workspace-topbar .workspace-fullscreen-toggle:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1200;
    width: max-content;
    max-width: 220px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    padding: 6px 10px;
    color: #ffffff;
    background: #0b1321;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

/*
 * White global workspace strip: toolbar glyphs are static #d9dbe1 — no lift, colour shift,
 * transition, or tooltip(:after) on hover/focus (controls remain keyboard-usable).
 */
.workspace-topbar--global .workspace-topbar-actions .reports-filter-toggle,
.workspace-topbar--global .workspace-topbar-actions .reports-filter-toggle:hover,
.workspace-topbar--global .workspace-topbar-actions .reports-filter-toggle:focus-visible,
.workspace-topbar--global .workspace-topbar-actions .reports-filter-toggle[aria-expanded='true'],
.workspace-topbar--global .workspace-topbar-actions .ops-notification,
.workspace-topbar--global .workspace-topbar-actions .ops-notification:hover,
.workspace-topbar--global .workspace-topbar-actions .ops-notification:focus-visible,
.workspace-topbar--global .workspace-topbar-actions .ops-notification[aria-expanded='true'] {
    color: #d9dbe1;
    background: transparent;
    outline: none;
    box-shadow: none;
    transform: none;
    transition: none;
}

.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button,
.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button:hover,
.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button:focus-visible,
.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button.is-active,
.workspace-topbar--global .workspace-topbar-actions .workspace-fullscreen-toggle,
.workspace-topbar--global .workspace-topbar-actions .workspace-fullscreen-toggle:hover,
.workspace-topbar--global .workspace-topbar-actions .workspace-fullscreen-toggle:focus-visible {
    color: #d9dbe1 !important;
    background: transparent !important;
    outline: none;
    box-shadow: none !important;
    transform: none !important;
    transition: none;
}

.workspace-topbar--global .workspace-topbar-actions .workspace-topbar-new-survey-link.workspace-tool-button,
.workspace-topbar--global .workspace-topbar-actions .workspace-topbar-new-survey-link.workspace-tool-button:hover,
.workspace-topbar--global .workspace-topbar-actions .workspace-topbar-new-survey-link.workspace-tool-button:focus-visible {
    color: #d9dbe1 !important;
    transform: none !important;
    transition: none;
}

.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button:hover::after,
.workspace-topbar--global .workspace-topbar-actions .workspace-tool-button:focus-visible::after,
.workspace-topbar--global .workspace-topbar-actions .workspace-fullscreen-toggle:hover::after,
.workspace-topbar--global .workspace-topbar-actions .workspace-fullscreen-toggle:focus-visible::after {
    content: none !important;
    display: none !important;
}

.workspace-tool-button__icon,
.workspace-tool-button__icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.workspace-fullscreen-toggle {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
    z-index: 1200;
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    color: #071421;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    backdrop-filter: blur(14px);
}

.workspace-fullscreen-toggle:hover,
.workspace-fullscreen-toggle:focus-visible {
    border-color: transparent;
    background: transparent;
    outline: none;
}

.workspace-fullscreen-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workspace-topbar-actions .workspace-tool-button,
.workspace-topbar-actions .workspace-fullscreen-toggle {
    position: relative !important;
    inset: auto !important;
    display: inline-grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    color: #d9dbe1 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    backdrop-filter: none !important;
}

.workspace-topbar-actions .workspace-tool-button:hover,
.workspace-topbar-actions .workspace-tool-button:focus-visible,
.workspace-topbar-actions .workspace-fullscreen-toggle:hover,
.workspace-topbar-actions .workspace-fullscreen-toggle:focus-visible {
    color: #d9dbe1 !important;
    background: transparent !important;
    outline: none !important;
    transform: none !important;
}

.workspace-topbar-actions .workspace-tool-button.is-active {
    color: #d9dbe1 !important;
    background: transparent !important;
    outline: none !important;
    transform: none !important;
}

.workspace-topbar-actions .workspace-tool-button__icon,
.workspace-topbar-actions .workspace-tool-button__icon svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
}

/* Sizing only: do not force display — it breaks enter/exit icon visibility under .workspace-fullscreen-toggle. */
.workspace-topbar-actions .workspace-fullscreen-icon {
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
}

/* Keep accent strokes the same light grey as the rest of the icon (no brand-blue chip) */
.workspace-topbar-actions .workspace-tool-button__icon svg .sai-icon-accent {
    color: currentColor;
    stroke: currentColor;
}

.workspace-fullscreen-icon--exit,
body.workspace-fullscreen .workspace-fullscreen-icon--enter {
    display: none;
}

body.workspace-fullscreen .workspace-fullscreen-icon--exit {
    display: block;
}

.sidebar--workspace .sidebar-nav {
    flex: 1;
    display: grid;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: start;
}

.sidebar--workspace .sidebar-nav a {
    gap: 12px;
    min-height: auto;
    border-radius: 14px;
    padding: 10px 4px;
    font-size: 0.82rem;
    line-height: 1.16;
    text-align: center;
}

.sidebar--workspace .sidebar-nav a::before {
    display: none;
}

.sidebar--workspace .sidebar-nav-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.sidebar--workspace .sidebar-nav-icon svg {
    stroke-width: 1.22;
}

@media (max-width: 899px) {
    .sidebar.sidebar--workspace + .workspace-topbar + .main-panel {
        padding-top: calc(var(--app-main-padding) + 100px);
    }

    .sidebar.sidebar--workspace + .workspace-topbar.report-workspace-header + .main-panel {
        padding-top: calc(var(--app-main-padding) + 130px + var(--survai-mobile-app-header-total, 0px));
    }

    .workspace-topbar {
        left: 0;
        min-height: 100px;
        padding: 14px 12px;
    }

    .report-workspace-header {
        min-height: 130px;
        padding: 0;
    }

    .report-workspace-header__row {
        padding-inline: 14px;
    }

    .report-workspace-header__context {
        min-height: 76px;
        gap: 10px;
    }

    .report-workspace-header__eyebrow {
        font-size: 0.62rem;
    }

    .report-workspace-header__identity {
        display: grid;
        gap: 3px;
        font-size: 0.7rem;
    }

    .report-workspace-header__identity strong {
        max-width: 100%;
        font-size: 0.96rem;
    }

    .report-workspace-header__identity span + span::before {
        content: none;
        display: none;
    }

    .report-workspace-header__primary-action .btn {
        min-height: 38px;
        padding-inline: 13px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .report-workspace-nav {
        min-height: 54px;
        padding-inline: 0;
    }

    .report-workspace-nav__link {
        min-height: 54px;
        padding-inline: 14px;
        font-size: 0.8rem;
    }

    .workspace-topbar-title .page-header-title,
    .workspace-topbar-title strong {
        font-size: 0.88rem;
    }

    .workspace-tool-button {
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
    }

    a.workspace-tool-button[data-tooltip='Activity'] {
        display: none !important;
    }

    .workspace-topbar .workspace-fullscreen-toggle {
        display: none !important;
    }

    .sidebar--workspace .sidebar-nav {
        grid-template-columns: 1fr;
    }

    .sidebar--workspace .sidebar-nav a {
        text-align: center;
    }
}

.report-overview-progress-meter {
    margin: 0.5rem 0 1rem;
}

.report-overview-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.report-overview-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--navy, #0b1321);
}

.report-overview-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Property Overview dashboard (report-overview.php) --- */
.property-overview-main {
    --po-navy: #0b1321;
    --po-border: rgba(15, 23, 42, 0.08);
    --po-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
    --po-blue: #1b5af9;
    --po-green: #16a34a;
    --po-amber: #ea580c;
    --po-red: #dc2626;
    --po-grey: #64748b;
}

.po-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--po-border);
}

.po-topbar h1 {
    margin: 0 0 0.2rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--po-navy);
    letter-spacing: -0.02em;
}

.po-subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted, #64748b);
}

.po-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.po-topbar > .po-topbar-actions:only-child {
    margin-left: auto;
}

.po-pdf-btn {
    white-space: nowrap;
}

.po-notify {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(27, 90, 249, 0.08);
    border: 1px solid rgba(27, 90, 249, 0.2);
    text-decoration: none;
    color: var(--po-navy);
}

.po-notify--empty {
    opacity: 0.55;
    pointer-events: none;
}

.po-notify-icon {
    width: 18px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 4px 4px 2px 2px;
    position: relative;
}

.po-notify-icon::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -3px;
    width: 7px;
    height: 7px;
    background: var(--po-red);
    border-radius: 50%;
    opacity: 0;
}

.po-notify:not(.po-notify--empty) .po-notify-icon::after {
    opacity: 1;
}

.po-notify-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--po-red);
    border-radius: 999px;
}

.po-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

.po-primary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.po-rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.po-card {
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 12px;
    box-shadow: var(--po-shadow);
    padding: 1rem 1.1rem;
}

.po-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}

.po-card-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--po-navy);
}

.po-hero {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.1rem;
}

.po-hero-media {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
    min-height: 120px;
    align-self: stretch;
}

.po-hero-img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
}

.po-hero-placeholder {
    min-height: 140px;
    background: linear-gradient(135deg, rgba(27, 90, 249, 0.12), rgba(15, 23, 42, 0.08));
}

.po-hero-body {
    min-width: 0;
}

.po-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.po-hero-address {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--po-navy);
    line-height: 1.3;
}

.po-hero-ref {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
}

.po-status-pill {
    flex-shrink: 0;
}

.po-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0 0 0.85rem;
}

.po-hero-grid dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
}

.po-hero-grid dd {
    margin: 0.1rem 0 0;
    font-size: 0.84rem;
    color: var(--po-navy);
    font-weight: 500;
}

.po-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.po-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.65rem;
}

.po-metric {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 10px;
    box-shadow: var(--po-shadow);
}

.po-metric strong {
    display: block;
    font-size: 1rem;
    color: var(--po-navy);
    line-height: 1.15;
}

.po-metric span {
    font-size: 0.72rem;
    color: var(--muted, #64748b);
}

.po-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(27, 90, 249, 0.1);
    position: relative;
}

.po-metric-icon--photo::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 2px solid var(--po-blue);
    border-radius: 3px;
}

.po-metric-icon--audio::before {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    top: 10px;
    bottom: 8px;
    border: 2px solid var(--po-blue);
    border-radius: 4px;
}

.po-metric-icon--doc::before {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    top: 7px;
    bottom: 9px;
    border: 2px solid var(--po-blue);
    border-radius: 2px;
}

.po-metric-icon--room::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid var(--po-blue);
    border-radius: 2px;
}

.po-metric-icon--ai::before {
    content: 'AI';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--po-blue);
}

.po-metric-icon--qc::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 10px;
    height: 2px;
    background: var(--po-amber);
    box-shadow: 0 5px 0 var(--po-amber);
}

.po-metric-icon--cost::before {
    content: '£';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--po-green);
}

.po-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.po-workflow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-workflow-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto auto 1.5rem;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--po-border);
    font-size: 0.84rem;
}

.po-workflow-row:last-child {
    border-bottom: 0;
}

.po-wf-name {
    font-weight: 600;
    color: var(--po-navy);
}

.po-wf-status {
    color: var(--muted, #64748b);
    font-size: 0.78rem;
}

.po-wf-date {
    color: var(--muted, #64748b);
    font-size: 0.78rem;
    text-align: right;
}

.po-wf-tick {
    text-align: center;
    color: var(--po-green);
    font-weight: 700;
}

.po-workflow-row.is-done .po-wf-status {
    color: var(--po-green);
}

.po-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-action-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--po-border);
    font-size: 0.82rem;
}

.po-action-row:last-child {
    border-bottom: 0;
}

.po-risk-label {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
}

.po-action-row.risk-high .po-risk-label {
    background: rgba(220, 38, 38, 0.12);
    color: var(--po-red);
}

.po-action-row.risk-medium .po-risk-label {
    background: rgba(234, 88, 12, 0.12);
    color: var(--po-amber);
}

.po-action-row.risk-low .po-risk-label {
    background: rgba(27, 90, 249, 0.1);
    color: var(--po-blue);
}

.po-action-row.risk-high .po-action-text {
    color: #7f1d1d;
}

.po-action-row.risk-medium .po-action-text {
    color: #9a3412;
}

.po-muted {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted, #64748b);
}

.po-media-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.po-media-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--po-border);
    flex-shrink: 0;
}

.po-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.po-media-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--po-navy);
}

.po-media-meta {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    color: var(--muted, #64748b);
}

.po-media-meta strong {
    color: var(--po-navy);
}

.po-cr-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.po-cr-box {
    text-align: center;
    padding: 0.55rem 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--po-border);
}

.po-cr-box span {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.po-cr-box strong {
    font-size: 1.05rem;
}

.po-cr-box--cr3 {
    background: #d92d20;
    border-color: transparent;
}
.po-cr-box--cr3 span {
    color: #ffffff;
}

.po-cr-box--cr2 {
    background: #f59e0b;
    border-color: transparent;
}
.po-cr-box--cr2 span {
    color: #ffffff;
}

.po-cr-box--cr1 {
    background: #16a34a;
    border-color: transparent;
}
.po-cr-box--cr1 span {
    color: #ffffff;
}

.po-cr-box--ni {
    background: #6b7280;
    border-color: transparent;
}
.po-cr-box--ni span {
    color: #ffffff;
}

.po-cr-box--cr3,
.po-cr-box--cr2,
.po-cr-box--cr1,
.po-cr-box--ni,
.po-cr-box--cr3 strong,
.po-cr-box--cr2 strong,
.po-cr-box--cr1 strong,
.po-cr-box--ni strong {
    color: #ffffff;
    box-shadow: none;
}

.po-intel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.po-intel-chip {
    flex: 1 1 auto;
    min-width: 100px;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--po-border);
}

.po-intel-chip span {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
}

.po-intel-chip strong {
    display: block;
    font-size: 0.78rem;
    margin-top: 0.15rem;
    color: var(--po-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-workflow-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.po-workflow-action {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.po-workflow-action:hover,
.po-workflow-action:focus-visible {
    border-color: rgba(27, 90, 249, 0.26);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.po-workflow-action > span {
    grid-row: 1 / span 2;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(27, 90, 249, 0.08);
    color: #3d4861;
}

.po-workflow-action > span svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
}

.po-workflow-action strong {
    overflow: hidden;
    color: var(--po-navy);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.po-workflow-action em {
    color: #64748b;
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.3;
}

.po-property-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.po-property-summary-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: #fafcfe;
}

.po-property-summary-item span {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.po-property-summary-item strong {
    overflow: hidden;
    color: var(--po-navy);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.po-property-summary-item--muted strong {
    color: #94a3b8;
}

.po-desk-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.po-desk-highlight {
    display: grid;
    gap: 10px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.po-desk-highlight--warning {
    border-color: rgba(234, 88, 12, 0.24);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.88), #ffffff);
}

.po-desk-highlight--review {
    border-color: rgba(27, 90, 249, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.72), #ffffff);
}

.po-desk-highlight--ok {
    border-color: rgba(22, 163, 74, 0.18);
}

.po-desk-highlight--muted {
    background: #fafcfe;
}

.po-desk-highlight__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.po-desk-highlight h4 {
    margin: 0;
    color: var(--po-navy);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1.25;
}

.po-desk-highlight__top span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(61, 72, 97, 0.07);
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.po-desk-highlight p {
    margin: 0;
    color: #3d4861;
    font-size: 0.82rem;
    line-height: 1.45;
}

.po-desk-highlight details {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 8px;
}

.po-desk-highlight summary {
    cursor: pointer;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 750;
}

.po-intelligence-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
    gap: 18px;
}

.po-prompt-list,
.po-focus-list,
.po-missing-data-grid {
    display: grid;
    gap: 10px;
}

.po-prompt-row,
.po-focus-row,
.po-missing-data-item {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.po-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.po-prompt-row strong,
.po-focus-row strong,
.po-missing-data-item strong {
    display: block;
    color: var(--po-navy);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
}

.po-prompt-row p,
.po-focus-row p,
.po-missing-data-item p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.42;
}

.po-prompt-row > span {
    align-self: start;
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(27, 90, 249, 0.08);
    color: #3d4861;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.po-focus-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

.po-focus-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 26px;
    border-radius: 999px;
    background: rgba(27, 90, 249, 0.08);
    color: #3d4861;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.po-focus-row--high > span {
    background: rgba(234, 88, 12, 0.12);
    color: #9a3412;
}

.po-missing-data-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.po-missing-data-item--warning {
    border-color: rgba(234, 88, 12, 0.24);
    background: rgba(255, 247, 237, 0.74);
}

.po-missing-data-item--review {
    border-color: rgba(27, 90, 249, 0.2);
    background: rgba(239, 246, 255, 0.72);
}

.po-missing-data-item--muted {
    background: #fafcfe;
}

.po-doc-form {
    margin-bottom: 1rem;
}

.po-doc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0.75rem;
    margin-bottom: 0.65rem;
    border: 1px dashed rgba(27, 90, 249, 0.35);
    border-radius: 10px;
    background: rgba(27, 90, 249, 0.04);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.po-doc-dropzone.is-dragover {
    border-style: solid;
    background: rgba(27, 90, 249, 0.1);
}

.po-doc-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.po-doc-drop-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--po-navy);
}

.po-doc-drop-hint {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted, #64748b);
}

.po-doc-field {
    display: block;
    margin-bottom: 0.5rem;
}

.po-doc-field span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--muted, #64748b);
}

.po-doc-field select,
.po-doc-field input[type='text'] {
    width: 100%;
}

.po-doc-ai {
    margin: 0.35rem 0 0.65rem;
}

.po-doc-submit {
    margin-top: 0.25rem;
}

.po-doc-cats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.po-doc-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.03);
    font-size: 0.78rem;
}

.po-doc-cat-name {
    font-weight: 600;
    color: var(--po-navy);
}

.po-doc-cat-stats {
    display: flex;
    gap: 0.5rem;
    color: var(--muted, #64748b);
    font-size: 0.72rem;
}

.po-doc-cat-stats em {
    font-style: normal;
    font-weight: 700;
    color: var(--po-navy);
    margin-right: 0.15rem;
    font-size: 0.62rem;
}

.po-stat-warn {
    color: var(--po-amber) !important;
    font-weight: 600;
}

.po-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-activity-row {
    display: flex;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--po-border);
}

.po-activity-row:last-child {
    border-bottom: 0;
}

.po-act-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(27, 90, 249, 0.1);
    position: relative;
}

.po-act-icon--ok {
    background: rgba(22, 163, 74, 0.12);
}
.po-act-icon--ok::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--po-green);
}

.po-act-icon--warn {
    background: rgba(234, 88, 12, 0.12);
}
.po-act-icon--warn::after {
    content: '!';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--po-amber);
}

.po-act-icon--err {
    background: rgba(220, 38, 38, 0.12);
}
.po-act-icon--err::after {
    content: '×';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--po-red);
}

.po-act-icon--ai::after,
.po-act-icon--doc::after,
.po-act-icon--pdf::after,
.po-act-icon--qc::after,
.po-act-icon--info::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 9px;
    bottom: 9px;
    border: 2px solid var(--po-blue);
    border-radius: 3px;
    opacity: 0.85;
}

.po-activity-body {
    min-width: 0;
}

.po-activity-msg {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    color: var(--po-navy);
    line-height: 1.35;
}

.po-activity-row time {
    font-size: 0.72rem;
    color: var(--muted, #64748b);
}

@media (max-width: 1100px) {
    .po-layout {
        grid-template-columns: 1fr;
    }

    .po-intelligence-split {
        grid-template-columns: 1fr;
    }

    .po-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 720px) {
    .po-hero {
        grid-template-columns: 1fr;
    }

    .po-hero-media {
        max-height: 180px;
    }

    .po-grid-2 {
        grid-template-columns: 1fr;
    }

    .po-workflow-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .po-wf-tick {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .po-cr-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .po-prompt-row {
        grid-template-columns: 1fr;
    }

    .po-workflow-action-grid,
    .po-property-summary-grid,
    .po-desk-highlight-grid,
    .po-missing-data-grid {
        grid-template-columns: 1fr;
    }

    .po-rail {
        grid-template-columns: 1fr;
    }
}

/* Property Overview refinement layer */
.property-overview-main {
    --po-border: rgba(15, 23, 42, 0.1);
    --po-shadow: 0 10px 32px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.property-overview-main .po-card {
    border-radius: 10px;
    box-shadow: var(--po-shadow);
}

.po-card[draggable="true"] {
    cursor: grab;
}

.po-card.is-dragging {
    opacity: 0.62;
    cursor: grabbing;
}

.po-card-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 650;
}

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

.po-drag-handle,
.po-head-icon,
.po-inline-icon,
.po-metric-icon,
.po-act-icon,
.po-media-summary svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.po-drag-handle svg,
.po-head-icon svg,
.po-inline-icon svg,
.po-metric-icon svg,
.po-act-icon svg,
.po-media-summary svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.po-drag-handle {
    opacity: 0.48;
}

.po-inline-icon {
    margin-right: 5px;
    vertical-align: -3px;
}

.po-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.po-overview-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: stretch;
    min-width: 0;
}

.po-overview-top .po-hero,
.po-overview-top .po-condition {
    min-width: 0;
}

.po-hero {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 14px;
}

.po-hero-eyebrow {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: start;
    margin: 0 0 -0.25rem;
}

.po-hero-media {
    position: relative;
    min-height: 230px;
    border-radius: 12px;
}

.po-hero-img,
.po-hero-placeholder {
    min-height: 230px;
}

.po-hero-placeholder {
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 650;
}

.property-overview-main .po-hero-media {
    display: flex;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    align-self: start;
    box-sizing: border-box;
    padding: clamp(8px, 1.1vw, 12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.92);
}

.property-overview-main .po-hero-img,
.property-overview-main .po-hero-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
}

.property-overview-main .po-hero-img {
    object-fit: cover;
}

.po-cover-picker-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.po-cover-picker-link .po-hero-placeholder {
    gap: 6px;
}

.po-cover-picker-link .po-hero-placeholder em {
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 650;
}

.po-cover-picker-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.18);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity 160ms ease;
}

.po-cover-picker-link:hover .po-cover-picker-overlay,
.po-cover-picker-link:focus-visible .po-cover-picker-overlay {
    opacity: 1;
}

.property-overview-main .po-cover-form {
    right: clamp(16px, 1.5vw, 20px);
    bottom: clamp(16px, 1.5vw, 20px);
}

.po-cover-form {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}

.po-cover-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.74);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.po-cover-action input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.po-hero-address {
    font-size: clamp(1.05rem, 1.7vw, 1.32rem);
    font-weight: 650;
}

.po-job-sheet {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
}

.po-detail-wide {
    grid-column: 1 / -1;
}

.po-hero-grid dt {
    font-size: 0.66rem;
    font-weight: 650;
}

.po-hero-grid dd {
    font-size: 0.84rem;
    font-weight: 450;
}

.po-date-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(61, 72, 97, 0.14);
    border-radius: 999px;
    background: #ffffff;
    color: var(--po-navy);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 520;
    line-height: 1.2;
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.po-date-edit-button:hover,
.po-date-edit-button:focus-visible {
    border-color: rgba(27, 90, 249, 0.35);
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.11);
    transform: translateY(-1px);
    outline: none;
}

.po-date-edit-button .po-inline-icon {
    width: 16px;
    height: 16px;
    margin: 0;
    color: #3d4861;
}

.po-date-modal {
    width: min(430px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--po-navy);
}

.po-date-modal::backdrop {
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(3px);
}

.po-date-modal__card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
}

.po-date-modal__head {
    display: grid;
    gap: 6px;
}

.po-date-modal__head h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.2;
    color: var(--po-navy);
}

.po-date-modal__field {
    display: grid;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 650;
    color: #3d4861;
}

.po-date-modal__field input[type="date"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(61, 72, 97, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    background: #ffffff;
    color: var(--po-navy);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 520;
}

.po-date-modal__field input[type="date"]:focus {
    border-color: rgba(27, 90, 249, 0.44);
    box-shadow: 0 0 0 4px rgba(27, 90, 249, 0.1);
    outline: none;
}

.po-date-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.po-condition {
    order: 0;
}

.po-rail .po-condition.condition-ratings-panel {
    gap: 12px;
    border-color: rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.po-rail .po-condition .condition-ratings-panel__head {
    gap: 4px;
}

.po-rail .po-condition .condition-ratings-panel__head h2 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.po-rail .po-condition .condition-ratings-panel__head p {
    max-width: 24rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.35;
}

.po-rail .po-condition .condition-rating-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.po-rail .po-condition .condition-rating-summary-card {
    min-height: 66px;
    gap: 4px;
    border-color: rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 7px 4px 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}

.po-rail .po-condition .condition-rating-summary-card::after {
    height: 2px;
}

.po-rail .po-condition .condition-rating-summary-badge {
    width: 28px;
    height: 28px;
    font-size: 0.58rem;
    letter-spacing: 0;
}

.po-rail .po-condition .condition-rating-summary-label {
    max-width: 100%;
    color: #64748b;
    font-size: 0.47rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.08;
}

.po-rail .po-condition .condition-rating-summary-card strong {
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1;
}

.po-rail .po-condition .condition-rating-summary-card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .po-rail .po-condition .condition-rating-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .po-rail .po-condition .condition-rating-summary-card {
        min-height: 78px;
        padding: 9px 8px 10px;
    }

    .po-rail .po-condition .condition-rating-summary-badge {
        width: 34px;
        height: 34px;
        font-size: 0.68rem;
    }

    .po-rail .po-condition .condition-rating-summary-label {
        font-size: 0.58rem;
    }

    .po-rail .po-condition .condition-rating-summary-card strong {
        font-size: 1.28rem;
    }
}

.po-condition .po-card-head {
    margin-bottom: 14px;
}

.po-metrics {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.po-metric {
    min-height: 72px;
    padding: 0.72rem 0.8rem;
}

.po-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(27, 90, 249, 0.08);
    color: #1b5af9;
}

.po-metric-icon::before {
    content: none !important;
}

.po-metric strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.po-metric span {
    font-size: 0.74rem;
}

.po-media-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.po-media-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
}

.po-media-summary svg {
    width: 15px;
    height: 15px;
}

.po-media-thumb,
.po-media-more {
    width: 70px;
    height: 70px;
    border-radius: 10px;
}

.po-cr-strip {
    grid-template-columns: repeat(4, minmax(86px, 1fr));
}

.po-cr-box {
    padding: 0.72rem 0.45rem;
}

.po-cr-box strong {
    font-size: 1.2rem;
}

.po-workflow-row {
    grid-template-columns: minmax(0, 1fr) auto 1.25rem;
}

.po-wf-date {
    display: none;
}

.po-wf-tick svg {
    width: 16px;
    height: 16px;
    color: var(--po-green);
}

.po-action-row {
    align-items: center;
}

.po-doc-cat {
    padding: 0.5rem 0.55rem;
}

.po-doc-cat-stats {
    white-space: nowrap;
}

.po-act-icon {
    background: rgba(27, 90, 249, 0.08);
    color: #1b5af9;
}

.po-act-icon::after {
    content: none !important;
}

.po-act-icon--ok {
    color: var(--po-green);
    background: rgba(22, 163, 74, 0.1);
}

.po-act-icon--warn {
    color: var(--po-amber);
    background: rgba(234, 88, 12, 0.1);
}

.po-act-icon--err {
    color: var(--po-red);
    background: rgba(220, 38, 38, 0.1);
}

@media (max-width: 1100px) {
    .po-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .po-hero {
        grid-template-columns: 1fr;
    }

    .po-hero-media,
    .po-hero-img,
    .po-hero-placeholder {
        min-height: 210px;
    }

    .po-job-sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .po-cr-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .po-job-sheet,
    .po-metrics {
        grid-template-columns: 1fr;
    }

    .po-media-thumb,
    .po-media-more {
        width: 64px;
        height: 64px;
    }
}

/* --- Client / Parties Profile workspace (client-profile.php) --- */
.client-profile-page {
    --cp-navy: #0b1321;
    --cp-border: rgba(15, 23, 42, 0.1);
    --cp-shadow: 0 10px 32px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --cp-green: #16a34a;
    --cp-blue: #1b5af9;
    --cp-amber: #ea580c;
    --cp-red: #dc2626;
}

.client-profile-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cp-border);
}

.client-profile-reference {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 700;
}

.client-profile-form {
    display: grid;
    gap: 1rem;
}

.client-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.client-profile-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.client-profile-card {
    padding: 1rem 1.1rem;
    border-color: var(--cp-border);
    border-radius: 12px;
    box-shadow: var(--cp-shadow);
}

.client-profile-card.is-empty {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.client-profile-wide-card {
    margin-top: 1rem;
}

.client-profile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.client-profile-card-head h2 {
    margin: 0;
    color: var(--cp-navy);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
}

.client-profile-card-head .form-note {
    max-width: 780px;
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
}

.client-profile-toggle {
    display: inline-flex;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.45rem;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid rgba(27, 90, 249, 0.16);
    border-radius: 999px;
    background: rgba(27, 90, 249, 0.06);
    color: var(--cp-navy);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.client-profile-toggle input {
    width: 16px;
    min-height: 16px;
    accent-color: var(--cp-green);
}

.client-profile-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.client-profile-detail-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #f8fafc;
}

.client-profile-detail-row dt {
    margin: 0 0 0.12rem;
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.client-profile-detail-row dd {
    margin: 0;
    color: var(--cp-navy);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.client-profile-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--cp-blue);
    background: rgba(27, 90, 249, 0.08);
}

.client-profile-row-icon svg,
.client-profile-warning svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.client-profile-name-row {
    grid-template-columns: minmax(76px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 0.8rem;
}

.client-profile-full {
    grid-column: 1 / -1;
}

.client-profile-card label {
    gap: 5px;
    font-weight: 650;
}

.client-profile-card label span {
    color: #475569;
    font-size: 0.78rem;
}

.client-profile-card input,
.client-profile-card select,
.client-profile-card textarea {
    border-radius: 8px;
    font-size: 0.92rem;
}

.client-profile-card input,
.client-profile-card select {
    min-height: 42px;
}

.client-profile-alert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0 0 1rem;
}

.client-profile-warning {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(234, 88, 12, 0.24);
    border-radius: 12px;
    background: rgba(234, 88, 12, 0.08);
    color: #9a3412;
}

.client-profile-warning.is-high {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

.client-profile-warning > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
}

.client-profile-warning strong {
    display: block;
    color: currentColor;
    font-size: 0.88rem;
    line-height: 1.3;
}

.client-profile-warning p {
    margin: 0.18rem 0 0;
    color: currentColor;
    font-size: 0.8rem;
    opacity: 0.86;
}

.client-profile-party-list,
.client-profile-history-list,
.client-profile-change-list {
    display: grid;
    gap: 0.5rem;
}

.client-profile-party-row,
.client-profile-history-row,
.client-profile-change-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto);
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #f8fafc;
}

.client-profile-party-row strong,
.client-profile-history-row strong,
.client-profile-change-list strong {
    display: block;
    color: var(--cp-navy);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.client-profile-party-row span,
.client-profile-history-row span,
.client-profile-history-row em,
.client-profile-change-list span,
.client-profile-party-row a {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    overflow-wrap: anywhere;
}

.client-profile-party-row a {
    color: var(--cp-blue);
    text-align: right;
}

.client-profile-additional-editor {
    display: grid;
    gap: 0.85rem;
}

.client-profile-additional-row {
    display: grid;
    grid-template-columns: 78px minmax(130px, 0.85fr) repeat(3, minmax(130px, 1fr));
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
}

.client-profile-additional-row input[type='checkbox'] {
    width: 18px;
    min-height: 18px;
    accent-color: var(--cp-green);
}

.client-profile-document-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.client-profile-document-buckets span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
}

.client-profile-document-buckets strong {
    color: var(--cp-navy);
}

.client-profile-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.client-profile-history-row {
    grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.4fr) minmax(110px, auto);
}

.client-profile-history-row:hover,
.client-profile-party-row:hover {
    border-color: rgba(27, 90, 249, 0.18);
    background: #ffffff;
}

.client-profile-change-list > div {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1180px) {
    .client-profile-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-profile-secondary-grid .client-profile-card:last-child {
        grid-column: 1 / -1;
    }

    .client-profile-additional-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .client-profile-grid,
    .client-profile-secondary-grid,
    .client-profile-alert-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .client-profile-detail-list,
    .client-profile-form-grid,
    .client-profile-name-row,
    .client-profile-additional-row {
        grid-template-columns: 1fr;
    }

    .client-profile-card-head,
    .client-profile-header {
        align-items: flex-start;
    }

    .client-profile-party-row,
    .client-profile-history-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .client-profile-party-row a,
    .client-profile-history-row em {
        grid-column: 2;
        text-align: left;
    }
}

.desk-study-context-hero {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0b1321;
}

.desk-study-status-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
}

.desk-study-status-strip span {
    color: var(--muted);
    font-size: 0.86rem;
}

.desk-study-status-strip strong {
    display: block;
    color: var(--navy);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.desk-study-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.desk-study-main-column {
    min-width: 0;
}

/**
 * Desk Study: strip extra form inset so cards match cover width; card header typography.
 */
.desk-study-page .main-panel form.desk-study-form.report-form {
    padding: 0;
    gap: 0;
}

.desk-study-page .section-head {
    margin-top: 2px;
}

.desk-study-page .section-head .card-title {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.2;
    color: #0f172a;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.desk-study-page .section-head .card-title:last-child {
    margin-bottom: 0;
}

.desk-study-page .section-head .card-subtitle {
    font-size: 0.875rem;
    line-height: 1.45;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.desk-study-page .section-head .card-subtitle + .card-subtitle {
    margin-top: 0.5rem;
}

.desk-study-page .section-head .card-title + .card-subtitle {
    margin-top: 0;
}

.field-source-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 800;
}

.field-source-badge--sprift {
    color: #166534;
    background: #dcfce7;
}

.field-source-badge--manual {
    color: #92400e;
    background: #fef3c7;
}

.field-source-badge--unavailable {
    color: #475569;
    background: #e2e8f0;
}

.desk-study-sprift-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
}

.sprift-review-list {
    display: grid;
    gap: 8px;
}

.sprift-review-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    font-size: 0.9rem;
}

.sprift-review-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

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

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

.sprift-sidebar-actions {
    display: grid;
    gap: 8px;
}

@media (max-width: 980px) {
    .desk-study-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desk-study-workspace {
        grid-template-columns: 1fr;
    }

    .desk-study-sprift-sidebar {
        position: static;
        order: -1;
    }
}

.desk-study-subtitle {
    font-weight: 600;
    color: #334155;
}

.workflow-file-drop {
    display: block;
    border: 1px dashed #94a3b8;
    border-radius: 12px;
    padding: 1rem 1rem 0.75rem;
    background: #f8fafc;
    cursor: pointer;
}

.workflow-file-drop input[type='file'] {
    margin-top: 0.5rem;
}

.desk-study-uploaded-maps {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.desk-study-uploaded-maps li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid #e5e7eb;
}

.desk-study-image-preview {
    margin: 0.75rem 0 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
}

.desk-study-image-preview img {
    display: block;
    max-width: 100%;
    height: auto;
}

.desk-study-map-grid {
    display: grid;
    gap: 1rem 1.25rem;
}

@media (min-width: 900px) {
    .desk-study-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.desk-study-thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.5rem 0 1rem;
}

.desk-study-thumb {
    margin: 0;
    flex: 1 1 120px;
    max-width: 200px;
}

.desk-study-floorplan-list {
    margin: 0.35rem 0 1rem;
    padding-left: 1.25rem;
}

.desk-study-json-field {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
}

body.desk-study-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

@supports selector(html:has(body.desk-study-page)) {
    html:has(body.desk-study-page) {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }
}

.desk-study-page .app-shell,
.desk-study-page .main-panel,
.desk-study-page .workflow-page-header,
.desk-study-page .workflow-nav,
.desk-study-page .wizard-progress,
.desk-study-page .workflow-page-card,
.desk-study-page .desk-study-status-strip,
.desk-study-page .desk-study-main-column,
.desk-study-page .desk-study-form,
.desk-study-page .capture-cover-layout,
.desk-study-page .context-grid,
.desk-study-page .pill-grid,
.desk-study-page .room-area-picker,
.desk-study-page .workflow-footer-card {
    min-width: 0;
    max-width: 100%;
}

.desk-study-page .desk-study-current-address,
.desk-study-page .desk-study-floorplan-list,
.desk-study-page .desk-study-json-field,
.desk-study-page input,
.desk-study-page select,
.desk-study-page textarea {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .desk-study-page .main-panel {
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    .desk-study-page .workflow-page-header .header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        justify-content: stretch;
    }

    .desk-study-page .workflow-page-header .header-actions > *,
    .desk-study-page .workflow-page-header .inline-action-form,
    .desk-study-page .workflow-page-header .btn {
        width: 100%;
        min-width: 0;
    }

    .desk-study-page .wizard-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desk-study-page .capture-cover-layout,
    .desk-study-page .context-grid,
    .desk-study-page .desk-study-map-grid,
    .desk-study-page .workflow-dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .desk-study-page .room-area-picker,
    .desk-study-page .pill-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
        align-items: stretch;
    }

    .desk-study-page .room-area-pill,
    .desk-study-page .pill-toggle,
    .desk-study-page .pill-toggle .pill-label {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .desk-study-page .room-area-pill,
    .desk-study-page .pill-toggle .pill-label {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .desk-study-page .desk-study-thumb-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    }

    .desk-study-page .desk-study-thumb {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .desk-study-page .workflow-page-header .header-actions,
    .desk-study-page .wizard-progress,
    .desk-study-page .desk-study-status-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .desk-study-page .workflow-footer-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .desk-study-page .workflow-footer-card .btn {
        width: 100%;
    }
}

.workflow-dl {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.workflow-dl dt {
    margin: 0;
    font-weight: 600;
    color: #475569;
}

.workflow-dl dd {
    margin: 0;
}

.workflow-footer-card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.capture-workflow-intro {
    margin-bottom: 12px;
}

.capture-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
}

.capture-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    padding: 16px 16px 14px;
    border-radius: 12px;
    border: 1px solid #d9e2ee;
    background: #ffffff;
    text-decoration: none;
    color: #0b1321;
    min-height: 11rem;
    height: 100%;
    box-sizing: border-box;
}

.capture-method-card .capture-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-bottom: 10px;
    color: var(--navy, #0b1321);
}

.capture-method-card .capture-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.capture-method-card span {
    font-size: 0.85rem;
    color: #5c6b82;
}

.capture-method-card.is-primary {
    border-color: #0b1321;
    box-shadow: 0 8px 22px rgba(11, 18, 32, 0.12);
}

.capture-intro-back {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
    padding-bottom: 4px;
}

@media (min-width: 921px) {
    .capture-workflow-intro .capture-intro-back {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .capture-method-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 640px) {
    .capture-workflow-intro {
        margin-bottom: 16px;
        padding: 4px 0 2px;
        border-radius: 14px;
    }

    .capture-workflow-intro .workflow-page-header {
        margin-bottom: 1rem;
    }

    .capture-workflow-intro .workflow-page-guidance {
        font-size: 0.94rem;
        line-height: 1.45;
    }

    .capture-method-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 10px;
    }

    .capture-method-card {
        min-height: 10.5rem;
        height: auto;
        padding: 16px 14px;
        border-radius: 12px;
    }

    .capture-intro-back .btn {
        width: 100%;
        max-width: 100%;
    }

    .capture-method-card .capture-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
    }
}

@media (max-width: 639px) {
    .capture-mode-body .wizard-progress {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: var(--workflow-progress-bottom-gap, 1.5rem);
    }
}

.capture-topbar-title {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.processing-log-list-page .processing-log-entry {
    margin-bottom: 0.65rem;
}

/* Costing Builder */
.cost-settings-form .costing-form-grid,
.cost-line-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.cost-line-form-grid .cost-line-span-2 {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .cost-line-form-grid .cost-line-span-2 {
        grid-column: span 1;
    }
}

.cost-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.75rem;
}

.cost-summary-card {
    border: 1px solid #d9e2ee;
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    background: #fafbfc;
}

.cost-summary-card--essential {
    border-left: 4px solid #c0392b;
    background: #fdf5f4;
}

.cost-summary-card--improvement {
    border-left: 4px solid #2980b9;
    background: #f4f9fc;
}

.cost-summary-card--provisional {
    border-left: 4px solid #d68910;
    background: #fffbf4;
}

.cost-summary-card--communal {
    border-left: 4px solid #6c5ce7;
    background: #f7f6fd;
}

.cost-summary-card--contingency {
    border-left: 4px solid #1e3a5f;
    background: #f4f6f9;
}

.cost-summary-card--grand {
    border-left: 4px solid #0b1321;
    font-weight: 600;
}

.cost-summary-label {
    display: block;
    font-size: 0.78rem;
    color: #5c6b82;
    margin-bottom: 0.25rem;
}

.cost-summary-mid {
    font-size: 1.05rem;
}

.cost-summary-range {
    display: block;
    font-size: 0.8rem;
    color: #5c6b82;
    margin-top: 0.2rem;
}

.cost-inline-success {
    color: #1e6b3a;
}

.cost-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    margin-right: 0.35rem;
    font-weight: 600;
}

.cost-badge--essential {
    background: #fadbd8;
    color: #922b21;
}

.cost-badge--improvement {
    background: #d6eaf8;
    color: #1f618d;
}

.cost-badge--provisional {
    background: #fdebd0;
    color: #9a7b0a;
}

.cost-badge--communal {
    background: #e8daef;
    color: #512e5f;
}

.cost-badge--contingency {
    background: #d6dbdf;
    color: #1e3a5f;
}

.cost-ai-draft-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cost-ai-draft-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #edf1f5;
}

.costing-lines-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.costing-line-card {
    border: 1px solid #d9e2ee;
    border-radius: 6px;
    padding: 1rem;
    background: #fff;
}

.cost-line-derived {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.85rem;
    color: #5c6b82;
}

.cost-source-pill {
    background: #eef1f5;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.cost-line-actions {
    grid-column: 1 / -1;
}

.cost-line-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #edf1f5;
}

.cost-db-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.cost-db-row-form .section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cost-db-row-form .h4 {
    font-size: 1rem;
    margin: 0;
}

/* --- Property lifecycle dashboard (report workspace) --- */
.lifecycle-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.lifecycle-summary-value {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.lifecycle-summary-stat {
    font-size: 1.35rem;
    font-weight: 700;
}

.lifecycle-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.lifecycle-cost-forecast {
    margin-top: 1rem;
}

.lifecycle-cost-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lifecycle-cost-head h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
}

.lifecycle-forecast-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem;
    border-radius: 999px;
    background: var(--surface-muted, #f8fafc);
}

.lifecycle-forecast-controls label {
    padding-left: 0.45rem;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lifecycle-forecast-controls select {
    min-height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-main, #0f172a);
    font-weight: 800;
    padding: 0 0.8rem;
}

.lifecycle-cost-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.lifecycle-cost-summary div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.lifecycle-cost-summary span {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lifecycle-cost-summary strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--text-main, #0f172a);
    font-size: 1.25rem;
    line-height: 1.1;
}

.lifecycle-cost-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lifecycle-cost-chart {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 18px;
    background: #ffffff;
}

.lifecycle-cost-chart--split {
    grid-column: 1 / -1;
}

.lifecycle-cost-chart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.lifecycle-cost-chart-title h3,
.lifecycle-forecast-events h3 {
    margin: 0;
    font-size: 1rem;
}

.lifecycle-cost-chart-title span {
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lifecycle-cost-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lifecycle-cost-grid line,
.lifecycle-cost-axis {
    stroke: #e5e7eb;
    stroke-width: 1;
}

.lifecycle-cost-grid text,
.lifecycle-cost-xlabels text {
    fill: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.lifecycle-cost-xlabels .x-label {
    text-anchor: middle;
}

.lifecycle-cost-line {
    fill: none;
    stroke: #0b1321;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lifecycle-cost-bars rect {
    fill: #1b5af9;
    rx: 5;
}

.lifecycle-cost-donut-wrap {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.lifecycle-cost-donut {
    width: min(220px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lifecycle-cost-donut::after {
    content: "";
    position: absolute;
    inset: 23%;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lifecycle-cost-donut span {
    position: relative;
    z-index: 1;
    color: var(--text-main, #0f172a);
    font-size: 1.15rem;
    font-weight: 900;
}

.lifecycle-cost-legend {
    display: grid;
    gap: 0.55rem;
}

.lifecycle-cost-legend div {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    color: var(--text-main, #0f172a);
    font-weight: 750;
}

.lifecycle-cost-legend i {
    width: 14px;
    height: 14px;
    border-radius: 999px;
}

.lifecycle-cost-legend strong {
    font-weight: 900;
}

.lifecycle-forecast-events {
    margin-top: 1rem;
}

.lifecycle-forecast-event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.lifecycle-forecast-event {
    padding: 0.85rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 14px;
    background: var(--surface-muted, #f8fafc);
}

.lifecycle-forecast-event span,
.lifecycle-forecast-event small {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 800;
}

.lifecycle-forecast-event strong,
.lifecycle-forecast-event em {
    display: block;
}

.lifecycle-forecast-event strong {
    margin-top: 0.2rem;
    color: var(--text-main, #0f172a);
}

.lifecycle-forecast-event em {
    margin: 0.25rem 0;
    color: #0b1321;
    font-style: normal;
    font-weight: 900;
}

.lifecycle-forecast-disclaimer {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.55;
}

.lifecycle-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .lifecycle-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .lifecycle-cost-head,
    .lifecycle-cost-donut-wrap {
        grid-template-columns: 1fr;
        display: grid;
    }

    .lifecycle-cost-summary,
    .lifecycle-cost-charts {
        grid-template-columns: 1fr;
    }

    .lifecycle-forecast-controls {
        align-items: stretch;
        border-radius: 16px;
        flex-wrap: wrap;
    }
}

.lifecycle-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lifecycle-card-head {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.lifecycle-gauge-wrap {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
}

.lifecycle-gauge-svg {
    display: block;
    width: 120px;
    height: auto;
}

.lifecycle-gauge-pct {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.9rem;
}

.lifecycle-card-titles h2 {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}

.lifecycle-dl {
    margin: 0;
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: 1fr;
    font-size: 0.88rem;
}

.lifecycle-dl div {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: 0.5rem;
}

.lifecycle-dl dt {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.lifecycle-dl dd {
    margin: 0;
}

.lifecycle-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lifecycle-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lifecycle-badge--suggested {
    background: #fef3c7;
    color: #92400e;
}

.lifecycle-badge--approved {
    background: #dcfce7;
    color: #166534;
}

.lifecycle-notes {
    margin: 0;
}

.lifecycle-update-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.lifecycle-subhead {
    font-size: 0.95rem;
    margin: 0.75rem 0 0.5rem;
}

.lifecycle-mini-form {
    margin-bottom: 0.5rem;
}

.lifecycle-mini-form .span-2 {
    grid-column: 1 / -1;
}

@media (min-width: 560px) {
    .lifecycle-mini-form.form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.lifecycle-history {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.lifecycle-history-list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.lifecycle-gauge--green .lifecycle-gauge-pct strong {
    color: #16a34a;
}

.lifecycle-gauge--amber .lifecycle-gauge-pct strong {
    color: #d97706;
}

.lifecycle-gauge--red .lifecycle-gauge-pct strong {
    color: #dc2626;
}

.lifecycle-gauge--grey .lifecycle-gauge-pct {
    color: #6b7280;
}

.lifecycle-disclaimer {
    margin-top: 1.25rem;
}

.lifecycle-disclaimer p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* QC bulk approve modal (report builder) */
.qc-approve-all-dialog {
    border: none;
    padding: 0;
    max-width: calc(100vw - 2rem);
    width: 420px;
    background: transparent;
}

.qc-approve-all-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.qc-approve-all-dialog__inner {
    margin: 0;
    padding: 1.25rem 1.35rem;
}

.qc-approve-all-dialog__title {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.qc-approve-all-dialog__warn {
    color: #b45309;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.qc-approve-all-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.qc-approve-all-dialog__err {
    color: #b91c1c;
    margin: 0.75rem 0 0;
}

/* Desk study — correct survey address */
.desk-study-address-dialog {
    border: none;
    padding: 0;
    max-width: calc(100vw - 2rem);
    width: min(32rem, 100vw - 2rem);
    background: transparent;
}

.desk-study-address-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.desk-study-address-dialog__inner {
    margin: 0;
    padding: 1.25rem 1.35rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.desk-study-address-dialog__title {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.desk-study-address-dialog__warn {
    color: #b45309;
    font-weight: 600;
    margin: 0 0 1rem;
    line-height: 1.45;
}

.desk-study-address-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.desk-study-address-dialog__actions--stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.desk-study-address-dialog__actions--stack .btn {
    width: 100%;
    justify-content: center;
}

/* KPI dashboard */
.main-panel.kpi-dashboard {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.kpi-dashboard .page-header {
    margin-bottom: 0;
}

.kpi-dashboard .alert {
    margin: 0;
}

.kpi-dashboard .card {
    min-width: 0;
    box-sizing: border-box;
    padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 3vw, 1.5rem);
}

.kpi-dashboard .kpi-header {
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.kpi-header-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.kpi-export-form {
    display: inline-block;
    margin: 0;
}

.kpi-scope-note {
    margin: 0.35rem 0 0;
    color: #4b5563;
    font-size: 0.95rem;
}

.kpi-filters-card {
    margin-bottom: 0;
}

.kpi-filters {
    margin: 0;
}

.kpi-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.kpi-filter-grid label span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: #374151;
}

.kpi-filter-grid select,
.kpi-filter-grid input[type="date"],
.kpi-filter-grid input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.kpi-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.kpi-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
    margin-bottom: 0;
}

.kpi-metric-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
    box-sizing: border-box;
}

.kpi-metric-card h3 {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-metric-value {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    word-break: break-word;
}

.kpi-metric-hint {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.35;
}

.kpi-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(0.85rem, 2vw, 1.35rem);
    margin-bottom: 0;
    min-width: 0;
    align-items: start;
}

.kpi-panel {
    overflow-x: auto;
}

.kpi-panel h2 {
    margin: 0 0 0.65rem;
    font-size: 1.15rem;
    line-height: 1.25;
    padding-right: 0.25rem;
}

.kpi-panel > .form-note:first-of-type {
    margin: 0 0 1rem;
    line-height: 1.45;
}

.kpi-subhead {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.3;
}

.kpi-panel h2 + .kpi-subhead {
    margin-top: 0.25rem;
}

.kpi-bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.kpi-bar-row {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) 2fr auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    font-size: 0.92rem;
    padding: 0.15rem 0;
    min-width: 0;
}

.kpi-bar-label {
    color: #374151;
    word-break: break-word;
    hyphens: auto;
}

.kpi-bar-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}

.kpi-bar-fill {
    display: block;
    height: 100%;
    background: #1b5af9;
    border-radius: 4px;
}

.kpi-bar-count {
    font-weight: 600;
    color: #111827;
    text-align: right;
    min-width: 2.5rem;
    font-variant-numeric: tabular-nums;
}

.kpi-mini-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.85rem 1.1rem;
}

.kpi-mini-metrics--wrap {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.kpi-mini-metrics > div {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 0.95rem;
    background: #fafafa;
    min-width: 0;
    box-sizing: border-box;
}

.kpi-mini-metrics span {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.35;
}

.kpi-mini-metrics strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.1rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.kpi-mini-metrics em {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: normal;
    margin-top: 0.15rem;
}

.kpi-dashboard .table-wrap {
    margin-top: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap .kpi-table {
    width: 100%;
    min-width: 0;
}

.kpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 0;
}

.kpi-table th,
.kpi-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.kpi-table thead th {
    font-weight: 700;
    background: #f9fafb;
    color: #374151;
}

.kpi-table tbody tr:last-child th,
.kpi-table tbody tr:last-child td {
    border-bottom: none;
}

.kpi-table td:not(:first-child),
.kpi-table th:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

.kpi-table th[scope="row"] {
    font-weight: 600;
    white-space: nowrap;
}

.kpi-table--wide {
    min-width: 36rem;
}

.kpi-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kpi-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.15rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    min-width: 0;
}

.kpi-list li span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kpi-list li strong {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .kpi-header-actions {
        margin-left: 0;
        width: 100%;
    }

    .kpi-export-form .btn {
        width: 100%;
    }

    .kpi-mini-metrics,
    .kpi-mini-metrics--wrap {
        grid-template-columns: 1fr;
    }

    .kpi-table--wide {
        min-width: 28rem;
    }
}

@media (max-width: 640px) {
    .kpi-bar-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .kpi-bar-track {
        grid-column: 1 / -1;
    }

    .kpi-bar-count {
        text-align: left;
    }

    .kpi-dashboard .card {
        padding: 1rem 1rem;
    }

    .kpi-metric-value {
        font-size: 1.45rem;
    }
}

@media (max-width: 400px) {
    .kpi-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Desk Study Output Controls (admin) */
.desk-output-controls-intro {
    max-width: 62rem;
}

.desk-output-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.desk-output-section-toggle-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.desk-output-section-card--off .desk-output-fieldset,
.desk-output-section-card--off .desk-output-field-advanced {
    opacity: 0.58;
    pointer-events: none;
}

.desk-output-page fieldset.desk-output-fieldset {
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.desk-output-select-all-row {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface-muted, #f8fafc);
}

.desk-output-select-all {
    margin: 0;
    cursor: pointer;
}

.desk-output-mapping-select-all-label {
    display: flex;
    margin: 0 0 0.65rem;
    cursor: pointer;
    font-weight: 600;
}

.desk-output-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
}

.desk-output-switch__text {
    font-size: 0.9rem;
    font-weight: 600;
}

.desk-output-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.desk-output-switch__slider {
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--border, #cbd5e1);
    position: relative;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.desk-output-switch__slider::after {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    top: 0.15rem;
    left: 0.15rem;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.desk-output-switch__input:checked + .desk-output-switch__slider {
    background: var(--accent, #1b5af9);
}

.desk-output-switch__input:checked + .desk-output-switch__slider::after {
    transform: translateX(1.1rem);
}

.desk-output-switch__input:focus-visible + .desk-output-switch__slider {
    outline: 2px solid var(--accent, #1b5af9);
    outline-offset: 2px;
}

/*
 * Global `input { width: 100%; min-height: 46px }` makes checkboxes enormous inside labels;
 * reset here and on .check-row for this admin page only.
 */
.desk-output-page .desk-output-field-check input[type='checkbox'],
.desk-output-page .check-row input[type='checkbox'] {
    width: 1.08rem;
    height: 1.08rem;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--line, #c8d8ec);
    background: #fff;
    box-shadow: none;
    appearance: auto;
    accent-color: var(--accent, #1b5af9);
    align-self: flex-start;
    margin-top: 0.12rem;
}

.desk-output-page .desk-output-field-check input[type='hidden'] {
    display: none;
}

.desk-output-field-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.desk-output-field-list__item {
    margin: 0;
    padding: 0.5rem 0.75rem;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 32%);
    gap: 0.5rem 1rem;
    align-items: start;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: #fff;
    border-radius: 0;
}

.desk-output-field-list__item:last-child {
    border-bottom: none;
}

.desk-output-field-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    min-width: 0;
}

.desk-output-field-check span {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink, #0f172a);
}

.desk-output-field-key {
    display: block;
    margin: 0;
    padding: 0.05rem 0 0;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    color: var(--muted, #64748b);
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 720px) {
    .desk-output-field-list__item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .desk-output-field-key {
        text-align: left;
        padding-top: 0;
    }
}

/* SurvAI Cam final override: keep the live action rail clean after all shared mobile rules. */
@media (max-width: 920px) {
    .capture-pause-recording-button,
    .capture-video-record-button,
    .capture-control-tray.is-video-mode .capture-video-record-button {
        display: none !important;
    }

    .capture-control-tray.is-video-mode .capture-record-toggle {
        position: relative;
        left: auto;
        transform: none;
    }

    .capture-control-tray.is-video-mode .capture-photo-button:not(.capture-video-record-button) {
        display: grid !important;
        margin-left: 0;
    }

    .capture-recorder-controls {
        grid-template-columns: repeat(2, 68px);
        justify-content: center;
        justify-items: center;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-top-camera-tools {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
    }

    .capture-top-camera-tools .capture-torch-cluster {
        width: 70px;
    }

    .capture-control-tray {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
        min-width: 70px;
    }

    .capture-recorder-controls {
        width: 70px;
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 11px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .capture-record-toggle .capture-record-icon,
    .capture-photo-button .capture-photo-icon,
    .capture-toolbar-button > span {
        transform: rotate(90deg);
        transform-origin: center;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-top-camera-tools,
    .capture-top-camera-tools .capture-torch-cluster,
    .capture-control-tray,
    .capture-recorder-controls {
        width: 64px;
        min-width: 64px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
}

/* SurvAI Cam: scoped live camera layout refinements. */
@media (max-width: 920px) {
    .capture-preview {
        isolation: isolate;
    }

    .capture-screen .capture-preview-video.live-camera-preview,
    .capture-screen .capture-preview-video {
        z-index: 1;
    }

    .capture-preview-shade {
        z-index: 2;
    }

    .capture-preview-touch-layer {
        bottom: 0;
        z-index: 3;
    }

    .capture-training-reticle {
        z-index: 4;
        width: 68px;
        height: 68px;
        pointer-events: auto;
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .capture-training-reticle.is-dragging {
        cursor: grabbing;
    }

    .capture-training-reticle-ring {
        border-width: 1.5px;
        border-color: rgba(255, 214, 10, 0.9);
        background: rgba(0, 0, 0, 0.03);
    }

    .capture-training-reticle-cross::before {
        left: 24%;
        width: 52%;
        height: 1.5px;
    }

    .capture-training-reticle-cross::after {
        top: 24%;
        width: 1.5px;
        height: 52%;
    }

    .capture-training-hint {
        z-index: 5;
        pointer-events: auto;
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .capture-training-hint.is-dragging {
        cursor: grabbing;
    }

    .capture-training-hint.is-positioned {
        right: auto !important;
        bottom: auto !important;
        margin: 0;
    }

    .capture-training-reset {
        justify-self: center;
        min-height: 30px;
        margin-top: 4px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        padding: 0 12px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        font-size: 0.72rem;
        font-weight: 850;
    }

    .capture-overlay-top,
    .capture-top-camera-tools,
    .capture-zoom-control,
    .capture-control-tray,
    .capture-tabbar,
    .capture-tabbar-handle {
        z-index: 6;
    }

    .capture-header {
        z-index: 8;
    }

    .capture-live-sync-message {
        z-index: 9;
    }

    .capture-record-toggle {
        position: relative;
        overflow: visible;
    }

    .capture-record-toggle.is-recording .capture-record-icon,
    .capture-record-toggle.btn-record--active.is-recording .capture-record-icon {
        display: none !important;
    }

    .capture-record-toggle.is-recording .capture-record-icon::before,
    .capture-record-toggle.btn-record--active.is-recording .capture-record-icon::before {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }

    .capture-record-toggle.is-recording::after,
    .capture-record-toggle.btn-record--active.is-recording::after {
        position: absolute;
        inset: -8px;
        border: 2px solid rgba(255, 59, 48, 0.42);
        border-radius: 999px;
        content: "";
        opacity: 0.75;
        animation: survai-record-pulse 1.35s ease-out infinite;
        pointer-events: none;
    }
}

@keyframes survai-record-pulse {
    0% {
        opacity: 0.72;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen {
        --capture-tabbar-h: calc(48px + env(safe-area-inset-bottom));
    }

    .capture-header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: calc(54px + env(safe-area-inset-top));
        min-height: calc(54px + env(safe-area-inset-top));
        grid-template-columns: minmax(74px, 124px) minmax(0, 1fr) minmax(130px, auto) !important;
        padding: calc(7px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 7px calc(24px + env(safe-area-inset-left));
        pointer-events: auto;
    }

    .capture-header h2 {
        font-size: clamp(0.98rem, 3vw, 1.24rem);
    }

    .capture-header-actions {
        gap: 8px;
    }

    .capture-header-actions .capture-training-toggle {
        height: 38px;
        min-height: 38px;
        padding: 0 14px;
        font-size: 0.82rem;
    }

    .capture-header-actions .capture-refresh-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .capture-preview {
        position: absolute;
        inset: 0;
    }

    .capture-live-sync-message {
        top: calc(60px + env(safe-area-inset-top));
        right: calc(118px + env(safe-area-inset-right));
        left: calc(118px + env(safe-area-inset-left));
        padding: 8px 12px;
        border-radius: 14px;
        font-size: 0.76rem;
    }

    .capture-overlay-top {
        top: calc(68px + env(safe-area-inset-top));
        right: auto;
        left: calc(16px + env(safe-area-inset-left));
        display: flex;
        width: 88px;
        max-width: 88px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        pointer-events: none;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count {
        width: 88px;
        min-width: 88px;
        min-height: 48px;
        box-sizing: border-box;
        justify-content: center;
        overflow: hidden;
        border-radius: 16px;
        padding: 6px;
    }

    .capture-recording-badge,
    .capture-photo-count {
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .capture-recording-badge strong {
        display: none;
    }

    .capture-recording-badge .recording-dot {
        margin: 0;
    }

    .capture-audio-pill {
        min-height: 62px;
        flex-direction: column;
        gap: 5px;
    }

    .capture-audio-meter {
        width: 58px;
        max-width: 58px;
        height: 22px;
        justify-content: center;
        overflow: hidden;
        transform: none;
    }

    .capture-audio-meter i {
        width: 3px;
        height: 18px;
        flex: 0 0 3px;
    }

    .capture-photo-count .capture-image-icon {
        margin: 0 auto;
    }

    .capture-photo-count span {
        font-size: 0.56rem;
    }

    .capture-top-camera-tools {
        position: fixed;
        top: calc(70px + env(safe-area-inset-top));
        right: calc(20px + env(safe-area-inset-right));
        left: auto;
        display: block;
        width: 64px;
        max-width: none;
        height: calc(100dvh - 148px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        pointer-events: none;
    }

    .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-top-camera-tools .capture-flip-button,
    .capture-top-camera-tools .capture-torch-cluster {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        pointer-events: auto;
    }

    .capture-top-camera-tools .capture-flip-button {
        top: 0 !important;
    }

    .capture-top-camera-tools .capture-torch-cluster {
        bottom: 0 !important;
        width: 64px;
    }

    .capture-top-camera-tools .capture-torch-auto-chip {
        display: none;
    }

    .capture-control-tray {
        position: fixed;
        top: calc(142px + env(safe-area-inset-top));
        right: calc(18px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 74px);
        left: auto;
        display: flex;
        width: 70px;
        min-width: 70px;
        height: auto;
        max-height: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        overflow: visible;
        padding: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        pointer-events: none;
    }

    .capture-control-tray .live-capture-mode-row {
        position: fixed;
        top: 50%;
        right: calc(100px + env(safe-area-inset-right));
        display: flex;
        width: 82px;
        flex-direction: column;
        gap: 7px;
        margin: 0;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .capture-control-tray .live-capture-mode-btn {
        width: 82px;
        max-width: none;
        min-height: 42px;
        padding: 4px 7px;
        font-size: 0.66rem;
        line-height: 1.05;
    }

    .capture-recorder-controls {
        display: flex;
        width: 70px;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        overflow: visible;
        pointer-events: auto;
    }

    .capture-pause-recording-button {
        display: none !important;
    }

    .capture-toolbar-button,
    .capture-photo-button,
    .capture-record-toggle,
    .capture-control-tray.is-video-mode .capture-video-record-button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        padding: 0 !important;
    }

    .capture-record-toggle {
        order: 1;
    }

    .capture-photo-button:not(.capture-video-record-button) {
        order: 2;
    }

    .capture-video-record-button {
        order: 3;
        font-size: 0.58rem !important;
    }

    .capture-zoom-control {
        top: 50%;
        right: calc(192px + env(safe-area-inset-right));
        padding: 4px;
        transform: translateY(-50%);
    }

    .capture-zoom-control button {
        min-width: 38px;
        min-height: 38px;
        font-size: 0.78rem;
    }

    .capture-gallery {
        position: fixed;
        right: calc(120px + env(safe-area-inset-right));
        bottom: calc(var(--capture-tabbar-h) + 8px);
        left: calc(16px + env(safe-area-inset-left));
        min-height: 46px;
        padding: 0;
    }

    .capture-gallery figure {
        width: 58px;
        height: 44px;
        flex-basis: 58px;
    }

    .capture-tabbar {
        bottom: -5px;
        width: min(430px, calc(100vw - 220px));
        min-height: var(--capture-tabbar-h);
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .capture-tabbar button {
        min-height: 42px;
    }

    .capture-tabbar-handle {
        bottom: calc(var(--capture-tabbar-h) + 7px);
    }

    .capture-training-hint:not(.is-positioned) {
        top: calc(76px + env(safe-area-inset-top));
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(360px, 44vw);
        max-width: min(360px, 44vw);
        padding: 8px 10px;
        transform: translateX(-50%);
    }

    .capture-training-hint strong {
        font-size: 0.9rem;
    }

    .capture-training-hint span {
        display: block;
        font-size: 0.7rem;
    }

    .capture-training-reset {
        min-height: 26px;
        font-size: 0.64rem;
    }

    audio[data-live-audio-preview]:not([hidden]) {
        bottom: calc(var(--capture-tabbar-h) + 24px);
        width: min(360px, calc(100vw - 250px));
        max-width: calc(100vw - 250px);
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-header {
        height: calc(48px + env(safe-area-inset-top));
        min-height: calc(48px + env(safe-area-inset-top));
        padding-top: calc(5px + env(safe-area-inset-top));
        padding-bottom: 5px;
    }

    .capture-header h2 {
        font-size: 0.98rem;
    }

    .capture-header-actions .capture-training-toggle {
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.72rem;
    }

    .capture-header-actions .capture-refresh-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .capture-live-sync-message {
        top: calc(52px + env(safe-area-inset-top));
        right: calc(104px + env(safe-area-inset-right));
        left: calc(104px + env(safe-area-inset-left));
        padding: 7px 10px;
    }

    .capture-overlay-top {
        top: calc(56px + env(safe-area-inset-top));
        width: 78px;
        max-width: 78px;
        gap: 6px;
    }

    .capture-recording-badge,
    .capture-audio-pill,
    .capture-photo-count {
        width: 78px;
        min-width: 78px;
        min-height: 42px;
    }

    .capture-audio-pill {
        min-height: 50px;
    }

    .capture-audio-meter {
        width: 50px;
    }

    .capture-top-camera-tools {
        top: calc(58px + env(safe-area-inset-top));
        height: calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .capture-control-tray {
        top: calc(116px + env(safe-area-inset-top));
        bottom: calc(var(--capture-tabbar-h) + 58px);
    }

    .capture-toolbar-button,
    .capture-photo-button,
    .capture-record-toggle,
    .capture-control-tray.is-video-mode .capture-video-record-button {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    .capture-control-tray .live-capture-mode-row {
        right: calc(88px + env(safe-area-inset-right));
        width: 72px;
    }

    .capture-control-tray .live-capture-mode-btn {
        width: 72px;
        min-height: 36px;
        font-size: 0.6rem;
    }

    .capture-zoom-control {
        right: calc(170px + env(safe-area-inset-right));
    }

    .capture-gallery {
        right: calc(106px + env(safe-area-inset-right));
    }

    .capture-training-hint:not(.is-positioned) {
        top: calc(58px + env(safe-area-inset-top));
        width: min(330px, 42vw);
        max-width: min(330px, 42vw);
        padding: 7px 9px;
    }

    .capture-training-hint span {
        display: none;
    }
}

/* SurvAI Cam final override: keep the live action rail clean after all shared mobile rules. */
@media (max-width: 920px) {
    .capture-pause-recording-button,
    .capture-video-record-button,
    .capture-control-tray.is-video-mode .capture-video-record-button {
        display: none !important;
    }

    .capture-control-tray.is-video-mode .capture-record-toggle {
        position: relative;
        left: auto;
        transform: none;
    }

    .capture-control-tray.is-video-mode .capture-photo-button:not(.capture-video-record-button) {
        display: grid !important;
        margin-left: 0;
    }

    .capture-recorder-controls {
        grid-template-columns: repeat(2, 68px);
        justify-content: center;
        justify-items: center;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-top-camera-tools {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
    }

    .capture-top-camera-tools .capture-torch-cluster {
        width: 70px;
    }

    .capture-control-tray {
        right: calc(18px + env(safe-area-inset-right));
        width: 70px;
        min-width: 70px;
    }

    .capture-recorder-controls {
        width: 70px;
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 11px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .capture-record-toggle .capture-record-icon,
    .capture-photo-button .capture-photo-icon,
    .capture-toolbar-button > span {
        transform: rotate(90deg);
        transform-origin: center;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-top-camera-tools,
    .capture-top-camera-tools .capture-torch-cluster,
    .capture-control-tray,
    .capture-recorder-controls {
        width: 64px;
        min-width: 64px;
    }

    .capture-record-toggle,
    .capture-photo-button:not(.capture-video-record-button),
    .capture-toolbar-button {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
}
/* Live Survey Capture final authoritative control positions. This block intentionally follows all older camera overrides. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: calc(12px + env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button,
    .capture-screen.is-main-camera .capture-flash-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.34) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-refresh-button svg,
    .capture-screen.is-main-camera .capture-flash-button span {
        width: 18px !important;
        height: 18px !important;
    }

    .capture-screen.is-main-camera .capture-torch-cluster {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 44px !important;
        min-width: 44px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-torch-auto-chip,
    .capture-screen.is-main-camera .capture-flip-button,
    .capture-screen.is-main-camera .live-capture-mode-row,
    .capture-screen.is-main-camera audio[data-live-audio-preview] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(64px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recording-badge {
        display: inline-flex !important;
        width: auto !important;
        min-width: 72px !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        padding: 7px 10px !important;
        background: rgba(0, 0, 0, 0.38) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge strong,
    .capture-screen.is-main-camera .capture-recording-badge em {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge span:not(.recording-dot) {
        color: #ffffff !important;
        font-size: 0.86rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge .recording-dot:not(.is-recording) {
        opacity: 0.45;
        background: rgba(255, 255, 255, 0.75);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        place-items: center !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, 64px) !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        gap: 22px !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border-width: 4px !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-top-camera-tools {
        top: calc(62px + env(safe-area-inset-top)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: translateY(56px);
    }

    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(18px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 74px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 74px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 64px) !important;
        gap: 30px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        transform: rotate(-45deg) !important;
        transform-origin: center !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon,
    .capture-screen.is-main-camera .capture-toolbar-button > span {
        transform: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: auto !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        grid-template-rows: repeat(2, 58px) !important;
        gap: 24px !important;
    }
}

/* Live Survey Capture request override. This block must remain at physical EOF. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: auto !important;
        min-width: 0 !important;
        grid-template-columns: repeat(2, 96px) !important;
        gap: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        max-width: 96px !important;
        max-height: 96px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        border: 6px solid rgba(255, 255, 255, 0.96) !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        box-shadow:
            inset 0 0 0 8px rgba(255, 255, 255, 0.96),
            inset 0 0 0 11px rgba(8, 12, 18, 0.12),
            0 10px 24px rgba(0, 0, 0, 0.28) !important;
    }

    .capture-screen.is-main-camera .capture-photo-icon,
    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle {
        right: calc(14px + env(safe-area-inset-right)) !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: none !important;
        z-index: 74 !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar {
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, calc(100% + 22px)) !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar button {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(6px + env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 108px !important;
        min-width: 108px !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 108px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, 90px) !important;
        gap: 26px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        order: 1 !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle {
        order: 2 !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle,
    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        right: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 94px !important;
        grid-template-rows: repeat(2, 78px) !important;
        gap: 16px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button),
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
    }
}

/* SurvAI Main Capture Camera - mobile operational camera layer. Keep at EOF. */
@media (max-width: 920px) {
    .capture-screen.is-main-camera {
        --camera-safe-top: env(safe-area-inset-top, 0px);
        --camera-safe-right: env(safe-area-inset-right, 0px);
        --camera-safe-bottom: env(safe-area-inset-bottom, 0px);
        --camera-safe-left: env(safe-area-inset-left, 0px);
        --camera-lime: #c8f34a;
        --camera-red: #ff3b30;
        --camera-glass: rgba(7, 12, 22, 0.58);
        overflow: hidden !important;
        background: #000 !important;
    }

    .capture-screen.is-main-camera .capture-header,
    .capture-screen.is-main-camera .capture-tag-bar,
    .capture-screen.is-main-camera .capture-training-toggle,
    .capture-screen.is-main-camera .capture-training-reticle,
    .capture-screen.is-main-camera .capture-training-tap-chip,
    .capture-screen.is-main-camera .capture-training-hint,
    .capture-screen.is-main-camera .capture-audio-pill,
    .capture-screen.is-main-camera .capture-photo-count,
    .capture-screen.is-main-camera audio[data-live-audio-preview] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-preview {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #000 !important;
    }

    .capture-screen.is-main-camera .capture-preview-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform-origin: center !important;
    }

    .capture-screen.is-main-camera .capture-preview-shade {
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08) 22%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.78)) !important;
    }

    .capture-screen.is-main-camera .survai-camera-tech-pill,
    .capture-screen.is-main-camera .capture-top-camera-tools,
    .capture-screen.is-main-camera .survai-camera-settings-panel,
    .capture-screen.is-main-camera .survai-camera-flash-panel,
    .capture-screen.is-main-camera .capture-overlay-top,
    .capture-screen.is-main-camera .capture-zoom-control,
    .capture-screen.is-main-camera .capture-control-tray,
    .capture-screen.is-main-camera .capture-tabbar-handle {
        z-index: 90 !important;
    }

    .capture-screen.is-main-camera .survai-camera-tech-pill {
        position: fixed !important;
        top: calc(14px + var(--camera-safe-top)) !important;
        left: calc(14px + var(--camera-safe-left)) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        color: #fff !important;
        background: var(--camera-glass) !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .survai-camera-tech-pill[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .survai-camera-tech-pill span + span {
        padding-left: 7px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools {
        position: fixed !important;
        top: calc(12px + var(--camera-safe-top)) !important;
        right: calc(12px + var(--camera-safe-right)) !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: calc(100vw - 28px) !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-torch-cluster {
        position: relative !important;
        display: inline-grid !important;
        width: 42px !important;
        min-width: 42px !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button,
    .capture-screen.is-main-camera .capture-flash-button,
    .capture-screen.is-main-camera .survai-camera-settings-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #fff !important;
        background: var(--camera-glass) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-refresh-button svg,
    .capture-screen.is-main-camera .capture-flash-button svg,
    .capture-screen.is-main-camera .survai-camera-settings-button svg,
    .capture-screen.is-main-camera .capture-pause-recording-button svg,
    .capture-screen.is-main-camera .capture-flip-button svg,
    .capture-screen.is-main-camera .capture-thumbnail-button svg {
        width: 19px !important;
        height: 19px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .capture-screen.is-main-camera .capture-flash-button.active {
        color: var(--camera-lime) !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel,
    .capture-screen.is-main-camera .survai-camera-flash-panel {
        position: fixed !important;
        top: calc(62px + var(--camera-safe-top)) !important;
        right: calc(12px + var(--camera-safe-right)) !important;
        left: auto !important;
        display: grid !important;
        gap: 8px !important;
        width: min(310px, calc(100vw - 24px)) !important;
        padding: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 20px !important;
        color: #fff !important;
        background: rgba(8, 12, 22, 0.78) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34) !important;
        backdrop-filter: blur(20px) saturate(140%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .survai-camera-flash-panel {
        right: calc(58px + var(--camera-safe-right)) !important;
        width: auto !important;
        grid-template-columns: repeat(3, minmax(54px, auto)) !important;
        border-radius: 999px !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel[hidden],
    .capture-screen.is-main-camera .survai-camera-flash-panel[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel > div {
        display: grid !important;
        grid-template-columns: minmax(86px, 1fr) repeat(3, auto) !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel > div:first-child {
        grid-template-columns: minmax(86px, 1fr) repeat(2, auto) !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel span {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel button,
    .capture-screen.is-main-camera .survai-camera-flash-panel button {
        min-width: 44px !important;
        height: 34px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 10px !important;
        color: rgba(255, 255, 255, 0.86) !important;
        background: transparent !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel button.active,
    .capture-screen.is-main-camera .survai-camera-flash-panel button.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        position: fixed !important;
        top: calc(12px + var(--camera-safe-top)) !important;
        right: auto !important;
        left: 50% !important;
        width: auto !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera:not(.is-live-recording) .capture-recording-badge {
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge {
        display: inline-flex !important;
        min-width: 104px !important;
        height: 36px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        color: #fff !important;
        background: rgba(225, 37, 31, 0.96) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
        transition: opacity 0.18s ease, transform 0.18s ease !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge > div {
        display: contents !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge strong,
    .capture-screen.is-main-camera .capture-recording-badge em {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge span:not(.recording-dot) {
        color: #fff !important;
        font-size: 0.86rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-recording-badge .recording-dot {
        width: 8px !important;
        height: 8px !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        position: fixed !important;
        right: auto !important;
        bottom: calc(154px + var(--camera-safe-bottom)) !important;
        left: 50% !important;
        display: inline-flex !important;
        min-width: 0 !important;
        width: auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 4px !important;
        background: rgba(0, 0, 0, 0.32) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
        transform: translateX(-50%) !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        place-items: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
    }

    .capture-screen.is-main-camera .capture-control-tray {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(16px + var(--camera-safe-bottom)) !important;
        left: 0 !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        padding: 0 calc(18px + var(--camera-safe-right)) 0 calc(18px + var(--camera-safe-left)) !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        display: grid !important;
        width: min(360px, calc(100vw - 36px)) !important;
        min-width: 0 !important;
        grid-template-columns: 76px 96px 76px !important;
        grid-template-areas: "left center right" !important;
        align-items: center !important;
        justify-content: center !important;
        justify-items: center !important;
        gap: 22px !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-thumbnail-button,
    .capture-screen.is-main-camera .capture-pause-recording-button,
    .capture-screen.is-main-camera .capture-flip-button {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        place-items: center !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        color: #fff !important;
        background: rgba(7, 12, 22, 0.56) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-thumbnail-button {
        grid-area: left !important;
        overflow: hidden !important;
    }

    .capture-screen.is-main-camera .capture-thumbnail-button img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .capture-screen.is-main-camera .capture-pause-recording-button {
        grid-area: left !important;
    }

    .capture-screen.is-main-camera .capture-flip-button {
        grid-area: right !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        grid-area: right !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        grid-area: center !important;
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        min-height: 92px !important;
        max-width: 92px !important;
        max-height: 92px !important;
        place-items: center !important;
        border: 5px solid rgba(255, 255, 255, 0.92) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon {
        display: block !important;
        width: 70px !important;
        height: 70px !important;
        border-radius: 999px !important;
        background: var(--camera-red) !important;
        box-shadow: none !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon::before,
    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon::after {
        display: none !important;
        content: none !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle.is-recording .capture-record-icon,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active .capture-record-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: var(--camera-red) !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle.is-photo-shutter {
        border-color: rgba(255, 255, 255, 0.94) !important;
        background: rgba(0, 0, 0, 0.18) !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle.is-photo-shutter .capture-record-icon {
        width: 72px !important;
        height: 72px !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow:
            inset 0 0 0 3px rgba(8, 12, 18, 0.1),
            0 8px 18px rgba(0, 0, 0, 0.22) !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        place-items: center !important;
        border: 5px solid rgba(255, 255, 255, 0.94) !important;
        border-radius: 999px !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow:
            inset 0 0 0 5px rgba(255, 255, 255, 0.94),
            inset 0 0 0 8px rgba(8, 12, 18, 0.12),
            0 10px 24px rgba(0, 0, 0, 0.28) !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-photo-button[hidden],
    .capture-screen.is-main-camera .capture-pause-recording-button[hidden] {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-photo-icon,
    .capture-screen.is-main-camera .capture-photo-button .capture-photo-icon {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-control-tray.is-survey-recording .capture-thumbnail-button,
    .capture-screen.is-main-camera .capture-control-tray.is-survey-recording .capture-flip-button {
        display: none !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-row {
        position: relative !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 999px !important;
        padding: 4px !important;
        background: rgba(0, 0, 0, 0.46) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-row[hidden] {
        display: inline-flex !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        height: 32px !important;
        min-width: 70px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        font-size: 0.76rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
    }

    .capture-screen.is-main-camera.is-live-recording .live-capture-mode-row,
    .capture-screen.is-main-camera.is-live-recording .capture-zoom-control {
        opacity: 0.96 !important;
    }

    .capture-screen.is-main-camera .capture-focus-square {
        width: 82px !important;
        height: 82px !important;
        border: 2px solid var(--camera-lime) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 18px rgba(200, 243, 74, 0.26) !important;
    }

    .capture-screen.is-main-camera .capture-exposure-overlay {
        border: 1px solid rgba(200, 243, 74, 0.28) !important;
        border-radius: 999px !important;
        color: #fff !important;
        background: rgba(0, 0, 0, 0.54) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26) !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle,
    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        position: fixed !important;
        right: calc(14px + var(--camera-safe-right)) !important;
        bottom: calc(14px + var(--camera-safe-bottom)) !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 999px !important;
        background: rgba(7, 12, 22, 0.62) !important;
        transform: none !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-live-info-panel {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-items: stretch !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        pointer-events: none !important;
    }

    .capture-screen.is-main-camera .capture-live-info-item {
        display: grid !important;
        min-width: 0 !important;
        min-height: 46px !important;
        align-content: center !important;
        gap: 2px !important;
        border-radius: 10px !important;
        padding: 6px 4px !important;
        color: rgba(255, 255, 255, 0.74) !important;
        background: rgba(255, 255, 255, 0.07) !important;
        text-align: center !important;
    }

    .capture-screen.is-main-camera .capture-live-info-item span {
        overflow: hidden !important;
        font-size: 0.56rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.04em !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .capture-screen.is-main-camera .capture-live-info-item strong {
        color: #ffffff !important;
        font-size: 0.84rem !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar {
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, calc(100% + 22px)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .survai-camera-tech-pill {
        top: calc(12px + var(--camera-safe-top)) !important;
        left: calc(12px + var(--camera-safe-left)) !important;
    }

    .capture-screen.is-main-camera .capture-top-camera-tools {
        top: calc(12px + var(--camera-safe-top)) !important;
        right: calc(12px + var(--camera-safe-right)) !important;
    }

    .capture-screen.is-main-camera .capture-overlay-top {
        top: calc(12px + var(--camera-safe-top)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-control-tray {
        top: 50% !important;
        right: calc(14px + var(--camera-safe-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 104px !important;
        min-width: 104px !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 94px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 58px 84px 58px !important;
        grid-template-areas:
            "left"
            "center"
            "right" !important;
        gap: 26px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        max-width: 84px !important;
        max-height: 84px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle.is-recording .capture-record-icon,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active .capture-record-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle.is-photo-shutter .capture-record-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
    }

    .capture-screen.is-main-camera .capture-thumbnail-button,
    .capture-screen.is-main-camera .capture-pause-recording-button,
    .capture-screen.is-main-camera .capture-flip-button {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        right: calc(118px + var(--camera-safe-right)) !important;
        bottom: calc(14px + var(--camera-safe-bottom)) !important;
        left: auto !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        right: calc(118px + var(--camera-safe-right)) !important;
        bottom: calc(66px + var(--camera-safe-bottom)) !important;
        left: auto !important;
        transform: none !important;
    }

    .capture-screen.is-main-camera .survai-camera-settings-panel {
        top: calc(58px + var(--camera-safe-top)) !important;
        right: calc(12px + var(--camera-safe-right)) !important;
    }

    .capture-screen.is-main-camera .survai-camera-flash-panel {
        top: calc(58px + var(--camera-safe-top)) !important;
        right: calc(58px + var(--camera-safe-right)) !important;
    }

    .capture-screen.is-main-camera .capture-tabbar-handle,
    .capture-screen.is-main-camera.is-live-toolbar-collapsed .capture-tabbar-handle {
        right: auto !important;
        bottom: calc(14px + var(--camera-safe-bottom)) !important;
        left: calc(14px + var(--camera-safe-left)) !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-control-tray {
        right: calc(8px + var(--camera-safe-right)) !important;
        width: 92px !important;
        min-width: 92px !important;
    }

    .capture-screen.is-main-camera .capture-recorder-controls {
        width: 82px !important;
        grid-template-rows: 46px 74px 46px !important;
        gap: 16px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--idle,
    .capture-screen.is-main-camera .capture-record-toggle.btn-record--active {
        width: 74px !important;
        height: 74px !important;
        min-width: 74px !important;
        min-height: 74px !important;
        max-width: 74px !important;
        max-height: 74px !important;
    }

    .capture-screen.is-main-camera .capture-record-toggle .capture-record-icon,
    .capture-screen.is-main-camera .capture-record-toggle.is-photo-shutter .capture-record-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .capture-screen.is-main-camera .capture-photo-button:not(.capture-video-record-button) {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .capture-screen.is-main-camera .capture-thumbnail-button,
    .capture-screen.is-main-camera .capture-pause-recording-button,
    .capture-screen.is-main-camera .capture-flip-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-row {
        right: calc(102px + var(--camera-safe-right)) !important;
        bottom: calc(10px + var(--camera-safe-bottom)) !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        right: calc(102px + var(--camera-safe-right)) !important;
        bottom: calc(58px + var(--camera-safe-bottom)) !important;
    }
}

/* Final camera-first app-mode overrides. Keep these last so older responsive camera rules cannot reveal URL handoff panels. */
.capture-mode-body.is-camera-first-launch {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .sidebar,
.capture-mode-body.is-camera-first-launch .capture-workflow-intro,
.capture-mode-body.is-camera-first-launch .capture-desktop-handoff,
.capture-mode-body.is-camera-first-launch .mobile-capture-link-field,
.capture-mode-body.is-camera-first-launch .mobile-capture-copy-link {
    display: none !important;
}

.capture-mode-body.is-camera-first-launch .app-shell {
    display: block !important;
    min-height: 100dvh !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .main-panel {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-shell {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.capture-mode-body.is-camera-first-launch .capture-panel.active.live-capture-panel,
.capture-mode-body.is-camera-first-launch .live-capture-panel .capture-screen {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-desktop-handoff .mobile-capture-link-field,
    .capture-desktop-handoff .mobile-capture-copy-link {
        display: none !important;
    }

    .survaicam-main {
        align-items: end !important;
        padding: calc(82px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    }

    .survaicam-permission-card,
    .survaicam-selected-card {
        width: min(520px, calc(100vw - 24px)) !important;
        border-radius: 24px !important;
        padding: 18px !important;
    }

    .survaicam-permission-card h1,
    .survaicam-selected-card h2 {
        font-size: clamp(22px, 6vw, 31px) !important;
        line-height: 1.08 !important;
    }

    .survaicam-actions {
        grid-template-columns: 1fr !important;
    }

    .survaicam-btn {
        width: 100% !important;
        min-height: 54px !important;
        border-radius: 18px !important;
    }
}
/* Final SurvAI Camera zoom rail placement. This must stay at the end of the stylesheet. */
@media (max-width: 920px), (pointer: coarse) {
    .capture-screen.is-main-camera .capture-filter-button svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .capture-screen.is-main-camera .capture-filter-button span {
        display: none !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control {
        position: fixed !important;
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;
        right: calc(8px + var(--camera-safe-right)) !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 188px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 38px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 999px !important;
        padding: 6px 4px !important;
        background: rgba(6, 12, 20, 0.34) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
        transform: translateY(-50%) !important;
        backdrop-filter: blur(12px) saturate(125%) !important;
        pointer-events: auto !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 0.76rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button.active {
        color: #0b1321 !important;
        background: var(--camera-lime) !important;
        box-shadow: 0 4px 12px rgba(200, 243, 74, 0.22) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .capture-zoom-control {
        right: auto !important;
        left: calc(8px + var(--camera-safe-left)) !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .capture-zoom-control {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 164px !important;
        grid-auto-rows: 32px !important;
        gap: 4px !important;
        padding: 5px 3px !important;
    }

    .capture-screen.is-main-camera .capture-zoom-control button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.7rem !important;
    }
}
/* Final SurvAI Camera landscape mode selector placement. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: 50% !important;
        right: calc(12px + var(--camera-safe-right)) !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        width: 48px !important;
        min-width: 48px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 5px !important;
        transform: translateY(-50%) !important;
        transform-origin: center !important;
        z-index: 52 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 92px !important;
        min-height: 92px !important;
        padding: 0 !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: calc(10px + var(--camera-safe-right)) !important;
        width: 44px !important;
        min-width: 44px !important;
        padding: 4px !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 78px !important;
        min-height: 78px !important;
    }
}

/* Final correction: in landscape keep the portrait mode selector shape and let it sit sideways on the right edge. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: 50% !important;
        right: calc(-42px + var(--camera-safe-right)) !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 4px !important;
        transform: translateY(-50%) rotate(90deg) !important;
        transform-origin: center !important;
        z-index: 54 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 70px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: calc(-38px + var(--camera-safe-right)) !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        min-width: 64px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
    }
}
/* Final override: keep VIDEO/PHOTO in the same bottom-centre position in landscape as portrait. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: calc(14px + var(--camera-safe-bottom)) !important;
        left: 50% !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 4px !important;
        transform: translateX(-50%) !important;
        transform-origin: center !important;
        z-index: 52 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 70px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: auto !important;
        bottom: calc(10px + var(--camera-safe-bottom)) !important;
        left: 50% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 4px !important;
        transform: translateX(-50%) !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 64px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
    }
}
/* Absolute final correction: landscape keeps the portrait selector shape, sideways on the right edge. */
@media (max-width: 920px) and (orientation: landscape) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        position: fixed !important;
        top: 50% !important;
        right: calc(-48px + var(--camera-safe-right) - 120px) !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 4px !important;
        transform: translateY(-50%) rotate(90deg) !important;
        transform-origin: center !important;
        z-index: 56 !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        width: auto !important;
        min-width: 70px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 390px) {
    .capture-screen.is-main-camera .live-capture-mode-row {
        right: calc(-43px + var(--camera-safe-right) - 120px) !important;
    }

    .capture-screen.is-main-camera .live-capture-mode-btn {
        min-width: 64px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
    }
}

/* Absolute final capture navigation override. Keep after camera layout rules. */
.capture-mode-body .sidebar-brand,
.capture-mode-body .sidebar-brand:hover,
.capture-mode-body .sidebar-brand:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.capture-mode-body .brand-logo-sidebar {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.capture-dashboard-link {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 95;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--theme-text, #0f1b2f);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.capture-dashboard-link svg,
.capture-mobile-survey-shortcut svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capture-dashboard-link:hover,
.capture-dashboard-link:focus-visible {
    color: var(--theme-accent, #1b5af9);
    background: rgba(27, 90, 249, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.capture-mobile-survey-shortcut {
    position: fixed;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid rgba(27, 90, 249, 0.32);
    border-radius: 999px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(7, 17, 31, 0.86);
    box-shadow: 0 18px 40px rgba(7, 17, 31, 0.28);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(16px) saturate(130%);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.capture-mobile-survey-shortcut:hover,
.capture-mobile-survey-shortcut:focus-visible {
    color: #0b1321;
    border-color: var(--theme-accent, #1b5af9);
    background: var(--theme-accent, #1b5af9);
    outline: none;
    transform: translateY(-2px);
}

html[data-theme="light"] .capture-mobile-survey-shortcut {
    color: #0b1321;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(7, 17, 31, 0.18);
}

@media (max-width: 920px), (pointer: coarse) {
    .capture-dashboard-link {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        color: #ffffff;
        background: rgba(7, 12, 22, 0.42);
        backdrop-filter: blur(14px) saturate(130%);
    }

    .capture-mobile-survey-shortcut {
        display: inline-flex;
    }

    .capture-mode-body.capture-live-active .capture-mobile-survey-shortcut,
    .capture-mode-body.is-camera-first-launch .capture-mobile-survey-shortcut {
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        min-height: 42px;
        padding: 0 12px;
        font-size: 0.8rem;
    }
}

/* Final SurvAI Cam launcher containment. Keep at the true end of the stylesheet. */
html:has(body.survaicam-page),
body.survaicam-page,
.survaicam-page .survaicam-shell {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.survaicam-page .survaicam-main {
    height: 100dvh !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
}

.survaicam-page .survaicam-shell:has(.survaicam-selected-card:not([hidden])) .survaicam-topbar--close-only {
    display: none !important;
}

.survaicam-page .survaicam-selected-card {
    width: min(430px, calc(100vw - 24px)) !important;
    height: min(720px, calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: clamp(28px, 6vw, 46px) !important;
    padding: clamp(42px, 6vh, 56px) 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
}

.survaicam-page .survaicam-card-logo {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.survaicam-page .survaicam-selected-card h2 {
    color: #ffffff !important;
    font-size: clamp(13px, 2.4vw, 16px) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.survaicam-page .survaicam-selected-card h2 span {
    color: #f8fbff !important;
    font-size: clamp(22px, 4.8vw, 32px) !important;
    line-height: 1.05 !important;
}

.survaicam-page .survaicam-permission-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 30 !important;
    width: min(390px, calc(100vw - 44px)) !important;
    max-height: min(680px, calc(100dvh - 44px)) !important;
    margin: 0 !important;
    overflow: auto !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) !important;
}

.survaicam-page .survaicam-permission-card[hidden] {
    display: none !important;
}

@media (max-height: 720px) {
    .survaicam-page .survaicam-selected-card {
        justify-content: center !important;
        padding-top: clamp(34px, 5vh, 44px) !important;
    }

    .survaicam-page .survaicam-card-logo {
        width: min(132px, 46%) !important;
        margin-bottom: 12px !important;
    }

    .survaicam-page .survaicam-selected-card h2 {
        margin: 6px 0 12px !important;
        font-size: clamp(12px, 2.8vw, 15px) !important;
    }

    .survaicam-page .survaicam-selected-card h2 span {
        font-size: clamp(20px, 4.8vw, 27px) !important;
    }

    .survaicam-page .survaicam-selected-card dl {
        gap: 8px !important;
        margin: 12px 0 !important;
    }

    .survaicam-page .survaicam-selected-card dl div {
        padding: 10px 12px !important;
    }

    .survaicam-page .survaicam-actions {
        gap: 10px !important;
    }

    .survaicam-page .survaicam-btn {
        min-height: 48px !important;
    }
}

/* Report workspace scroll containment: keep fixed toolbars anchored and remove page bounce. */
html:has(body .sidebar--workspace),
body:has(.sidebar--workspace) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body:has(.sidebar--workspace) .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    --sidebar-width: var(--survai-app-rail-width);
}

body:has(.sidebar--workspace) .main-panel {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body:has(.sidebar--workspace) .sidebar--workspace,
body:has(.sidebar--workspace) .sidebar--workspace .sidebar-nav {
    overscroll-behavior: contain;
}

/* Camera capture mode should be a true full-screen tool with no shared white app header. */
body.capture-mode-body.capture-live-active .mobile-app-header,
body.capture-mode-body.capture-live-active .mobile-menu-toggle,
body.capture-mode-body.capture-live-active .mobile-menu-overlay,
body.capture-mode-body.capture-live-active .capture-workflow-intro,
body.capture-mode-body.is-camera-first-launch .mobile-app-header,
body.capture-mode-body.is-camera-first-launch .mobile-menu-toggle,
body.capture-mode-body.is-camera-first-launch .mobile-menu-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.capture-mode-body.capture-live-active .app-shell,
body.capture-mode-body.capture-live-active .main-panel {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

/* Capture AI guidance mode: a non-recording helper state beside the record control. */
.capture-ai-mode-button {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
    max-width: 92px;
    max-height: 92px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    color: var(--camera-lime, #c8f34a);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
    pointer-events: auto;
}

.capture-ai-mode-button svg {
    display: block;
    width: 58px;
    height: 58px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capture-ai-mode-button:hover,
.capture-ai-mode-button:focus-visible,
.capture-ai-mode-button.is-active {
    color: var(--camera-lime, #c8f34a);
    background: transparent;
    box-shadow: 0 0 0 1px rgba(200, 243, 74, 0.45), 0 0 28px rgba(200, 243, 74, 0.24);
    outline: none;
}

.capture-ai-mode-button[hidden] {
    display: none !important;
}

.capture-screen.is-main-camera .capture-ai-mode-button,
.capture-screen.is-training-camera .capture-ai-mode-button {
    grid-area: right !important;
}

.capture-screen.is-main-camera .capture-recorder-controls,
.capture-screen.is-training-camera .capture-recorder-controls {
    grid-template-columns: 76px 96px 96px !important;
}

.capture-screen.is-training-camera .capture-control-tray {
    position: fixed !important;
    right: 0 !important;
    bottom: calc(16px + var(--camera-safe-bottom, 0px)) !important;
    left: 0 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    padding: 0 calc(18px + var(--camera-safe-right, 0px)) 0 calc(18px + var(--camera-safe-left, 0px)) !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.capture-screen.is-training-camera .capture-recorder-controls {
    display: grid !important;
    width: min(360px, calc(100vw - 36px)) !important;
    grid-template-columns: 76px 96px 76px !important;
    grid-template-areas: "left center right" !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 22px !important;
    pointer-events: auto !important;
}

.capture-screen.is-training-camera .capture-record-toggle,
.capture-screen.is-training-camera .capture-pause-recording-button,
.capture-screen.is-training-camera .capture-photo-button:not(.capture-video-record-button),
.capture-screen.is-training-camera .live-capture-mode-row,
.capture-screen.is-training-camera [data-live-saved-state],
.capture-screen.is-training-camera .capture-gallery,
.capture-screen.is-training-camera .capture-live-summary {
    display: none !important;
}

.capture-screen.is-training-camera .capture-ai-mode-button {
    display: grid !important;
}

/* ==========================================================
   SurvAI Premium SaaS Design System Layer
   Dark navy navigation + bright operational workspaces.
   Visual refinement only: no workflow or data changes.
   ========================================================== */

:root {
    --sai-navy: #0b1321;
    --sai-navy-deep: #08101c;
    --sai-workspace: #ffffff;
    --sai-workspace-soft: #f8fafc;
    --sai-card-border: #e6ebf2;
    --sai-text-main: #111827;
    --sai-text-secondary: #667085;
    --sai-card-radius: 18px;
    --sai-control-radius: 999px;
    --sai-elevation-soft: 0 18px 50px rgba(11, 19, 33, 0.07);
    --sai-elevation-hover: 0 22px 62px rgba(11, 19, 33, 0.11);
    --sai-focus-ring: 0 0 0 4px rgba(27, 90, 249, 0.22);

    --navy: var(--sai-navy);
    --navy-2: var(--sai-navy-deep);
    --ink: var(--sai-text-main);
    --muted: var(--sai-text-secondary);
    --line: var(--sai-card-border);
    --panel: var(--sai-workspace);
    --surface: var(--sai-workspace-soft);
    --theme-bg: var(--sai-workspace-soft);
    --theme-bg-strong: var(--sai-workspace);
    --theme-panel: var(--sai-workspace);
    --theme-panel-soft: #f3f6fa;
    --theme-text: var(--sai-text-main);
    --theme-muted: var(--sai-text-secondary);
    --theme-border: var(--sai-card-border);
    --theme-sidebar: var(--sai-navy);
    --theme-sidebar-panel: rgba(255, 255, 255, 0.075);
    --theme-input: var(--sai-workspace);
    --theme-input-text: var(--sai-text-main);
    --survai-brand-blue: var(--sai-navy);
    --survai-brand-blue-hover: var(--sai-navy-deep);
    --shadow: var(--sai-elevation-soft);
}

html {
    background: var(--sai-workspace-soft);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) {
    background:
        radial-gradient(circle at 82% -12%, rgba(27, 90, 249, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, var(--sai-workspace-soft) 46%, #f4f7fb 100%);
    color: var(--sai-text-main);
    font-feature-settings: "kern", "liga", "calt";
    text-rendering: optimizeLegibility;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .app-shell {
    background: transparent;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel {
    color: var(--sai-text-main);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) h1,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) h2,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) h3,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) h4 {
    color: var(--sai-text-main);
    letter-spacing: -0.025em;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) p,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .form-note,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .subtitle,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .ops-subtitle {
    color: var(--sai-text-secondary);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar {
    color: #ffffff;
    /* No blue radial here — keeps active menu glyphs the same flat #1b5af9 as the logo */
    background: linear-gradient(180deg, var(--sai-navy) 0%, var(--sai-navy-deep) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 22px 0 60px rgba(11, 19, 33, 0.16);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav {
    gap: 8px;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a {
    border: 1px solid transparent;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    font-weight: 400;
    transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a.active {
    color: #ffffff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar-nav a.active::before {
    display: none !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .user-pill {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .page-header {
    align-items: center;
    margin-bottom: clamp(24px, 3vw, 36px);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .page-header h1 {
    font-size: clamp(2rem, 3.3vw, 3.5rem);
    line-height: 0.98;
    font-weight: 850;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .eyebrow {
    color: var(--sai-text-secondary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.055em;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .table-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .toolbar,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .supporting-upload,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .workflow-nav.card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .section-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .dashboard-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .ops-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .ops-dashboard-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .property-overview-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .lifecycle-card,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .cost-card {
    border: 1px solid var(--sai-card-border) !important;
    border-radius: var(--sai-card-radius) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--sai-elevation-soft) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .card:hover,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .ops-dashboard-card:hover,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .dashboard-card:hover {
    box-shadow: var(--sai-elevation-hover) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) input,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) select,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) textarea {
    border: 1px solid var(--sai-card-border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--sai-text-main) !important;
    box-shadow: inset 0 1px 0 rgba(11, 19, 33, 0.02);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) input:focus,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) select:focus,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) textarea:focus,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) button:focus-visible,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) a:focus-visible {
    outline: none;
    box-shadow: var(--sai-focus-ring) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn {
    min-height: 42px;
    border: 0 !important;
    border-radius: var(--sai-control-radius) !important;
    padding-inline: 18px;
    box-shadow: 0 10px 26px rgba(11, 19, 33, 0.07);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(11, 19, 33, 0.11);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn-primary {
    background: var(--theme-accent) !important;
    color: var(--sai-navy) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn-secondary,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn-outline {
    background: #ffffff !important;
    color: var(--sai-text-main) !important;
    box-shadow: inset 0 0 0 1px var(--sai-card-border), 0 10px 24px rgba(11, 19, 33, 0.04);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .btn-danger {
    background: #fff1f3 !important;
    color: #b42318 !important;
    box-shadow: inset 0 0 0 1px #ffd6db;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .reports-create-survey,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .ops-create-survey-btn {
    background: var(--sai-navy) !important;
    color: #ffffff !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) table {
    border-collapse: separate;
    border-spacing: 0;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) th {
    color: var(--sai-text-secondary);
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) td {
    color: var(--sai-text-main);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .alert {
    border-radius: 16px;
    border-width: 1px;
    box-shadow: 0 12px 32px rgba(11, 19, 33, 0.05);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .status,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .badge,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .pill {
    border-radius: 999px;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .mobile-app-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(230, 235, 242, 0.9);
    box-shadow: 0 14px 36px rgba(11, 19, 33, 0.08);
    backdrop-filter: blur(18px);
}

@media (max-width: 900px) {
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel {
        padding-inline: clamp(16px, 4vw, 24px);
    }

    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .page-header {
        gap: 14px;
        align-items: flex-start;
    }

    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .page-header h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }
}

/* ==========================================================
   SurvAI Official Premium SaaS Colour System
   Final cascade layer. Keep this block at the true end of
   style.css so older page-specific rules cannot override it.
   ========================================================== */

:root {
    --survai-navy: #0b1321;
    --survai-navy-deep: #08101c;
    /* Same as `--survai-logo-blue` — must match sidebar wordmark PNG, not an arbitrary hex */
    --survai-logo-blue: #1b5af9;
    --survai-blue: var(--survai-logo-blue);
    --survai-blue-hover: #1648d4;
    --survai-menu-icon-blue: var(--survai-logo-blue);
    --survai-green: #22c55e;
    --survai-amber: #f59e0b;
    --survai-red: #ef4444;
    --survai-bg: #f8fafc;
    --survai-card: #ffffff;
    --survai-border: #e6ebf2;
    --survai-text: #111827;
    --survai-secondary: #667085;
    --survai-muted: #98a2b3;
    --survai-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    --survai-shadow-hover: 0 18px 44px rgba(16, 24, 40, 0.10);
    --survai-focus: 0 0 0 4px rgba(27, 90, 249, 0.18);

    --navy: var(--survai-navy);
    --navy-2: var(--survai-navy-deep);
    --ink: var(--survai-text);
    --muted: var(--survai-secondary);
    --line: var(--survai-border);
    --panel: var(--survai-card);
    --surface: var(--survai-bg);
    --accent: var(--survai-blue);
    --accent-dark: var(--survai-blue-hover);
    --success: var(--survai-green);
    --warning: var(--survai-amber);
    --danger: var(--survai-red);

    --theme-bg: var(--survai-bg);
    --theme-bg-strong: #ffffff;
    --theme-panel: #ffffff;
    --theme-panel-soft: #f8fafc;
    --theme-text: var(--survai-text);
    --theme-muted: var(--survai-secondary);
    --theme-border: var(--survai-border);
    --theme-accent: var(--survai-blue);
    --theme-accent-ink: #ffffff;
    --theme-sidebar: var(--survai-navy);
    --theme-sidebar-panel: rgba(27, 90, 249, 0.14); /* derived from --survai-logo-blue */
    --theme-input: #ffffff;
    --theme-input-text: var(--survai-text);

    --sai-navy: var(--survai-navy);
    --sai-navy-deep: var(--survai-navy-deep);
    --sai-workspace: var(--survai-card);
    --sai-workspace-soft: var(--survai-bg);
    --sai-card-border: var(--survai-border);
    --sai-text-main: var(--survai-text);
    --sai-text-secondary: var(--survai-secondary);
    --sai-focus-ring: var(--survai-focus);
    --survai-brand-blue: var(--survai-blue);
    --survai-brand-blue-hover: var(--survai-blue-hover);
}

.card,
.table-card,
.toolbar,
.supporting-upload,
.workflow-nav.card,
.section-card,
.dashboard-card,
.ops-kpi-card,
.ops-card,
.ops-dashboard-card,
.ops-donut-block,
.ops-condition,
.ops-action-row,
.ops-diary-row,
.ops-activity-row,
.ops-region-row,
.ops-team-table,
.sai-report-card,
.po-card,
.po-metric,
.cost-item-card,
.cost-category-card,
.lifecycle-component-card,
.transcript-document-card,
.documents-carousel-card,
.documents-files-card,
.upload-card,
.ai-settings-card,
.settings-card {
    border-color: var(--survai-border) !important;
    background: var(--survai-card) !important;
    box-shadow: var(--survai-shadow) !important;
}

.card:hover,
.ops-kpi-card:hover,
.ops-card:hover,
.po-card:hover {
    box-shadow: var(--survai-shadow-hover) !important;
}

h1,
h2,
h3,
h4,
.page-header h1,
.ops-hero h1,
.po-topbar h1,
.po-hero-address,
.ops-kpi-card__value,
.ops-card h2,
.card h2 {
    color: var(--survai-text) !important;
}

p,
.form-note,
.po-subtitle,
.ops-subtitle,
.po-muted,
.ops-empty,
.secondary,
.muted {
    color: var(--survai-secondary) !important;
}

.eyebrow,
label span,
th,
.po-hero-grid dt,
.po-doc-cat-stats,
.ops-card-meta,
.ops-kpi-card__label {
    color: var(--survai-muted) !important;
}

a:not(.btn):not(.sidebar-nav a),
.ops-card-link,
.table-card a:not(.btn),
.card a:not(.btn) {
    color: var(--survai-blue) !important;
}

.btn,
button.btn,
a.btn,
.button,
button[type="submit"],
button[type="button"] {
    border-radius: 999px !important;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.btn-primary,
.reports-create-survey,
.ops-create-survey-btn,
button.btn-primary,
a.btn-primary {
    background: var(--survai-blue) !important;
    border-color: var(--survai-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.18) !important;
}

.btn-primary:hover,
.reports-create-survey:hover,
.ops-create-survey-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--survai-blue-hover) !important;
    border-color: var(--survai-blue-hover) !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline,
a.btn-secondary,
button.btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--survai-border) !important;
    color: var(--survai-text) !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #d8e0ea !important;
    color: var(--survai-text) !important;
}

.btn-danger,
button.btn-danger,
a.btn-danger {
    background: #fff1f2 !important;
    border-color: rgba(239, 68, 68, 0.24) !important;
    color: var(--survai-red) !important;
}

input,
select,
textarea,
.input,
.form-control {
    border-color: var(--survai-border) !important;
    background: #ffffff !important;
    color: var(--survai-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus {
    border-color: var(--survai-blue) !important;
    box-shadow: var(--survai-focus) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--survai-muted) !important;
}

table {
    background: #ffffff !important;
}

thead,
thead tr,
th {
    background: #f8fafc !important;
}

td {
    color: var(--survai-text) !important;
    border-color: var(--survai-border) !important;
}

tbody tr:hover {
    background: rgba(27, 90, 249, 0.035) !important;
}

.badge,
.status,
.pill {
    border-radius: 999px !important;
}

.status-completed,
.badge-success,
.pill-success,
.is-success {
    background: rgba(34, 197, 94, 0.11) !important;
    color: #15803d !important;
}

.status-assigned,
.status-in-progress,
.badge-info,
.pill-info,
.is-active {
    background: rgba(27, 90, 249, 0.11) !important;
    color: var(--survai-blue) !important;
}

.badge-warning,
.pill-warning,
.is-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
}

.badge-danger,
.pill-danger,
.is-danger,
.status-overdue {
    background: rgba(239, 68, 68, 0.11) !important;
    color: var(--survai-red) !important;
}

.badge-muted,
.pill-muted,
.is-muted {
    background: #f2f4f7 !important;
    color: var(--survai-secondary) !important;
}

.ops-dashboard-controls,
.dashboard-toolbar,
.mobile-app-header {
    border-color: var(--survai-border) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 12px 34px rgba(16, 24, 40, 0.06) !important;
    backdrop-filter: blur(18px);
}

.ops-dashboard-customize-btn:hover:not(:disabled),
.ops-dashboard-dropzone.is-dashboard-drag-over {
    border-color: rgba(27, 90, 249, 0.38) !important;
    background: rgba(27, 90, 249, 0.06) !important;
}

.ops-dashboard-draggable.is-dashboard-dragging {
    border-color: rgba(27, 90, 249, 0.42) !important;
    box-shadow: 0 24px 70px rgba(27, 90, 249, 0.16) !important;
}

.ops-progress-track span,
.ops-bar span,
.progress-bar,
.progress-fill {
    background: var(--survai-blue) !important;
}

.ops-coverage-filters button:hover,
.ops-coverage-filters button.is-active,
.tab.is-active,
.nav-tab.is-active {
    border-color: rgba(27, 90, 249, 0.30) !important;
    background: rgba(27, 90, 249, 0.10) !important;
    color: var(--survai-blue) !important;
}

.output-workspace-tabs .output-workspace-tab.is-active {
    border-color: transparent !important;
    background: transparent !important;
    color: #3d4861 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.condition-badge.cr1,
.rating-cr1 {
    background: var(--survai-green) !important;
    color: #ffffff !important;
}

.condition-badge.cr2,
.rating-cr2 {
    background: var(--survai-amber) !important;
    color: #ffffff !important;
}

.condition-badge.cr3,
.rating-cr3 {
    background: var(--survai-red) !important;
    color: #ffffff !important;
}

.condition-badge.na,
.condition-badge.ni,
.rating-na,
.rating-ni {
    background: var(--survai-muted) !important;
    color: #ffffff !important;
}

.media-bulk-toolbar,
.photo-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--survai-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.04);
}

.media-bulk-toolbar .check-row,
.photo-bulk-toolbar .check-row {
    width: auto;
    margin: 0;
}

.media-select-check,
.photo-select-check {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 12px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(230, 235, 242, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.10);
    cursor: pointer;
}

.media-select-check input,
.photo-select-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.media-select-check span,
.photo-select-check span {
    width: 16px;
    height: 16px;
    border: 2px solid var(--survai-muted);
    border-radius: 999px;
}

.media-select-check input:checked + span,
.photo-select-check input:checked + span {
    border-color: var(--survai-menu-icon-blue);
    background: var(--survai-menu-icon-blue);
}

.progress-media-item,
.progress-video-item,
.evidence-upload-item,
.evidence-video-item,
.supporting-document-item,
.workflow-photo-roll figure {
    position: relative;
}

.progress-media-item.is-selected,
.progress-video-item.is-selected,
.evidence-upload-item.is-selected,
.evidence-video-item.is-selected,
.supporting-document-item.is-selected,
.workflow-photo-roll figure.is-selected {
    outline: 2px solid rgba(27, 90, 249, 0.42);
    box-shadow: 0 12px 34px rgba(27, 90, 249, 0.12) !important;
}

.workflow-photo-roll:not(.is-photo-selecting) .photo-select-check {
    opacity: 0.86;
}

.po-upload-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.image-manager-page {
    gap: 18px;
}

.image-manager-toolbar {
    align-items: center;
    background: #ffffff;
}

.image-manager-toolbar .workflow-title-meta {
    min-height: 34px;
}

.image-manager-icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--survai-border);
    border-radius: 10px;
    color: var(--survai-navy);
    background: #ffffff;
    cursor: pointer;
}

.image-manager-icon-button:hover,
.image-manager-icon-button:focus-visible {
    border-color: rgba(27, 90, 249, 0.42);
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.08);
}

.image-manager-icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.image-manager-filter-button {
    border-color: rgba(15, 23, 42, 0.12);
    background: var(--survai-navy);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.image-manager-filter-button:hover,
.image-manager-filter-button:focus-visible,
.image-manager-filter-button[aria-expanded="true"] {
    border-color: rgba(27, 90, 249, 0.42);
    background: #1b5af9;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(27, 90, 249, 0.22);
}

.image-manager-cta-card .section-head {
    align-items: center;
}

.image-manager-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}

.image-manager-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--survai-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--survai-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.image-manager-tab:hover,
.image-manager-tab:focus-visible,
.image-manager-tab.is-active {
    border-color: rgba(27, 90, 249, 0.45);
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.08);
}

.image-manager-tab.is-active {
    background: #f6f9ff;
}

.image-manager-tab strong {
    display: inline-flex;
    min-width: 30px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--survai-blue);
    color: #ffffff;
    font-size: 0.78rem;
}

.image-manager-filter-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
}

.image-manager-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(213, 222, 235, 0.94);
    border-radius: 999px;
    background: #ffffff;
    color: var(--survai-navy);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.image-manager-filter-trigger:hover,
.image-manager-filter-trigger:focus-visible,
.image-manager-filter-trigger[aria-expanded="true"],
.image-manager-filter-trigger.is-active {
    border-color: rgba(27, 90, 249, 0.36);
    color: var(--survai-blue);
    box-shadow: 0 14px 30px rgba(27, 90, 249, 0.12);
}

.image-manager-filter-trigger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.image-manager-filter-trigger strong {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: var(--survai-blue);
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1;
}

.image-manager-filter-panel {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 10px);
    left: 0;
    width: min(360px, calc(100vw - 36px));
    border: 1px solid rgba(213, 222, 235, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.image-manager-filter-panel[hidden] {
    display: none;
}

.image-manager-filter-panel__head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(213, 222, 235, 0.82);
    color: var(--survai-navy);
}

.image-manager-filter-options {
    display: grid;
    gap: 4px;
    padding: 8px;
}

.image-manager-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--survai-text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.image-manager-filter-option:hover,
.image-manager-filter-option:focus-visible,
.image-manager-filter-option.is-active {
    border-color: rgba(27, 90, 249, 0.22);
    background: rgba(246, 249, 255, 0.96);
}

.image-manager-filter-option.is-active {
    color: var(--survai-blue);
    font-weight: 700;
}

.image-manager-filter-option strong {
    display: inline-grid;
    min-width: 30px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: rgba(27, 90, 249, 0.1);
    color: var(--survai-blue);
    font-size: 0.76rem;
}

.image-manager-filter-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(213, 222, 235, 0.82);
    background: rgba(248, 250, 252, 0.82);
}

@media (max-width: 720px) {
    .image-manager-filter-menu {
        width: 100%;
    }

    .image-manager-filter-trigger {
        width: 100%;
        justify-content: center;
    }

    .image-manager-filter-panel {
        position: fixed;
        inset: auto 12px calc(12px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(72vh, 520px);
        overflow-y: auto;
        border-radius: 18px;
    }

    .image-manager-filter-panel__actions {
        position: sticky;
        bottom: 0;
    }
}

.media-manager-main {
    gap: 20px;
}

.media-manager-tabs .media-manager-tab {
    text-decoration: none;
}

.media-manager-shell-card .section-head {
    align-items: flex-start;
}

.media-manager-panel {
    margin-top: 14px;
}

.media-manager-list {
    display: grid;
    gap: 12px;
}

.media-manager-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.media-manager-item__thumb {
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(27, 90, 249, 0.1), rgba(15, 23, 42, 0.04));
    color: var(--survai-blue, #1b5af9);
    font-weight: 850;
    letter-spacing: 0.04em;
}

.media-manager-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-manager-item__body {
    min-width: 0;
}

.media-manager-item__body h3 {
    margin: 0;
    overflow: hidden;
    color: var(--survai-text, #0b1321);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-item__body p {
    margin: 0.25rem 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.media-manager-item__meta span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.media-manager-empty-state {
    padding: clamp(24px, 5vw, 42px);
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 18px;
    background: #fbfdff;
    text-align: center;
}

.media-manager-empty-state h3 {
    margin: 0;
    color: var(--survai-text, #0b1321);
    font-size: 1.05rem;
    font-weight: 850;
}

.media-manager-empty-state p {
    max-width: 34rem;
    margin: 0.45rem auto 0;
    color: #667085;
    line-height: 1.45;
}

.media-manager-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fbfdff;
}

.media-manager-bulk-actions > div {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.media-manager-select-all,
.media-manager-card-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 0.9rem;
    font-weight: 800;
}

.media-manager-select-all input,
.media-manager-card-select input {
    width: 18px;
    height: 18px;
    accent-color: var(--survai-blue, #1b5af9);
}

.media-manager-card-select {
    justify-content: center;
}

.media-manager-video-list {
    display: grid;
    gap: 14px;
}

.media-manager-video-card {
    display: grid;
    grid-template-columns: 32px minmax(180px, 260px) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.media-manager-video-card__preview {
    display: flex;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: #0b1321;
    color: #ffffff;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.media-manager-video-card__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-manager-video-card__copy {
    min-width: 0;
}

.media-manager-video-card__copy h3 {
    margin: 0;
    overflow: hidden;
    color: var(--survai-text, #0b1321);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-video-card__copy p {
    margin: 0.3rem 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-video-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 12px 0 0;
}

.media-manager-video-card__details div {
    min-width: 0;
}

.media-manager-video-card__details dt {
    color: #98a2b3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.media-manager-video-card__details dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: #344054;
    font-size: 0.88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-video-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.media-manager-audio-list {
    display: grid;
    gap: 14px;
}

.media-manager-audio-card {
    display: grid;
    grid-template-columns: 32px 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.media-manager-audio-card__icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(27, 90, 249, 0.08);
    color: var(--survai-blue, #1b5af9);
}

.media-manager-audio-card__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.media-manager-audio-card__copy {
    min-width: 0;
}

.media-manager-audio-card__copy h3 {
    margin: 0;
    overflow: hidden;
    color: var(--survai-text, #0b1321);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-audio-card__copy p {
    margin: 0.3rem 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-audio-card__copy audio {
    width: min(100%, 520px);
    margin-top: 10px;
}

.media-manager-audio-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 12px 0 0;
}

.media-manager-audio-card__details div {
    min-width: 0;
}

.media-manager-audio-card__details dt {
    color: #98a2b3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.media-manager-audio-card__details dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: #344054;
    font-size: 0.88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-audio-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.media-manager-transcription-shell {
    display: grid;
    gap: 18px;
}

.media-manager-transcription-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.media-manager-transcription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.media-manager-transcription-list {
    display: grid;
    gap: 10px;
}

.media-manager-transcription-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.media-manager-transcription-select {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.media-manager-transcription-select input {
    width: 18px;
    height: 18px;
    accent-color: #3d4861;
}

.media-manager-transcription-row > div {
    min-width: 0;
}

.media-manager-transcription-row strong {
    display: block;
    overflow: hidden;
    color: var(--survai-text, #0b1321);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-transcription-row span:not(.media-manager-transcription-pill) {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-manager-transcription-pill {
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.15;
}

.media-manager-transcription-pill--ready {
    border-color: rgba(16, 185, 129, 0.24);
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
}

.media-manager-transcription-pill--processing {
    border-color: rgba(27, 90, 249, 0.2);
    background: rgba(239, 246, 255, 0.92);
    color: var(--survai-blue, #1b5af9);
}

.media-manager-transcription-pill--needs-attention {
    border-color: rgba(244, 63, 94, 0.22);
    background: rgba(255, 241, 242, 0.92);
    color: #be123c;
}

.media-manager-transcription-pill--not-started {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.96);
    color: #475467;
}

@media (max-width: 720px) {
    .media-manager-tabs.image-manager-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-manager-item {
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 12px;
    }

    .media-manager-item__thumb {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        font-size: 0.78rem;
    }

    .media-manager-item__meta {
        gap: 6px;
    }

    .media-manager-item__meta span {
        max-width: 100%;
    }

    .media-manager-video-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .media-manager-card-select {
        justify-content: flex-end;
    }

    .media-manager-video-card__details {
        grid-template-columns: 1fr;
    }

    .media-manager-video-card__actions {
        justify-content: stretch;
    }

    .media-manager-video-card__actions .btn {
        flex: 1 1 150px;
    }

    .media-manager-audio-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .media-manager-bulk-actions,
    .media-manager-bulk-actions > div {
        align-items: stretch;
        flex-direction: column;
    }

    .media-manager-bulk-actions .btn {
        width: 100%;
    }

    .media-manager-audio-card__icon {
        width: 52px;
        height: 52px;
    }

    .media-manager-audio-card__details {
        grid-template-columns: 1fr;
    }

    .media-manager-audio-card__actions {
        justify-content: stretch;
    }

    .media-manager-audio-card__actions .btn {
        flex: 1 1 150px;
    }

    .media-manager-transcription-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-manager-transcription-actions .btn {
        width: 100%;
    }

    .media-manager-transcription-row {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .media-manager-transcription-pill {
        width: 100%;
    }
}

.image-manager-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
}

.image-manager-view-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(213, 222, 235, 0.92);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.image-manager-selection-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.image-manager-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--survai-border);
    border-radius: 999px;
    background: #ffffff;
}

.image-manager-zoom-controls span {
    min-width: 142px;
    color: var(--survai-muted);
    font-size: 0.84rem;
    text-align: center;
}

.image-manager-filterbar label {
    display: grid;
    gap: 5px;
}

.image-manager-filterbar label {
    width: min(380px, 100%);
}

.image-manager-bulk-toolbar {
    display: inline-flex;
    flex: 1 1 640px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: min(100%, 520px);
    margin: 0;
    border-left: 1px solid rgba(213, 222, 235, 0.9);
    padding: 4px 0 4px 12px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.image-manager-bulk-toolbar[hidden] {
    display: none !important;
}

.image-manager-bulk-toolbar > strong {
    min-width: 132px;
    color: var(--survai-navy);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.image-manager-bulk-toolbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(213, 222, 235, 0.78);
}

.image-manager-bulk-toolbar__group:first-of-type {
    padding-left: 0;
    border-left: 0;
}

.image-manager-bulk-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 999px;
}

.image-manager-bulk-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

@media (max-width: 720px) {
    .image-manager-view-controls {
        align-items: stretch;
    }

    .image-manager-zoom-controls {
        width: 100%;
        justify-content: space-between;
    }

    .image-manager-bulk-toolbar {
        flex: 1 1 100%;
        min-width: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-left: 0;
        border-top: 1px solid rgba(213, 222, 235, 0.9);
        padding: 10px 0 2px;
        -webkit-overflow-scrolling: touch;
    }

    .image-manager-bulk-toolbar > strong {
        min-width: max-content;
    }

    .image-manager-bulk-toolbar__group {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
}

.image-manager-bulk-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 8, 23, 0.52);
}

.image-manager-bulk-edit-modal[hidden] {
    display: none;
}

.image-manager-bulk-edit-modal__panel {
    width: min(560px, 100%);
    border: 1px solid rgba(213, 222, 235, 0.98);
    border-radius: 12px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(2, 8, 23, 0.34);
}

.image-manager-bulk-edit-modal__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.image-manager-bulk-edit-modal__head h2 {
    margin: 0;
    color: var(--survai-navy);
    font-size: 1.18rem;
}

.image-manager-bulk-edit-modal__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.image-manager-bulk-edit-modal__body label {
    display: grid;
    gap: 6px;
}

.image-manager-bulk-edit-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.image-manager-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--image-manager-card-min, 220px), 1fr));
    margin-top: 18px;
}

.image-manager-grid-state {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin-top: 18px;
}

.image-manager-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--image-manager-card-min, 220px), 1fr));
    gap: 18px;
    width: 100%;
}

.image-manager-skeleton-grid[hidden] {
    display: none;
}

.image-manager-skeleton-grid span {
    display: block;
    min-height: 190px;
    border: 1px solid rgba(213, 222, 235, 0.95);
    background:
        linear-gradient(90deg, rgba(245, 248, 252, 0.95), rgba(232, 238, 247, 0.92), rgba(245, 248, 252, 0.95));
    background-size: 220% 100%;
    animation: image-manager-skeleton 1.2s ease-in-out infinite;
}

.image-manager-load-error {
    max-width: 520px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(220, 38, 38, 0.16);
    border-radius: 12px;
    background: rgba(254, 242, 242, 0.86);
    color: #9f1d1d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

@keyframes image-manager-skeleton {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.image-manager-card {
    align-content: start;
    padding: 0;
    overflow: visible;
    border-radius: 0 !important;
    border-color: rgba(213, 222, 235, 0.95);
    box-shadow: 0 10px 26px rgba(16, 24, 40, 0.04);
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.image-manager-card[hidden] {
    display: none !important;
}

.image-manager-card.is-deleting,
[data-photo-card].is-deleting {
    opacity: 0.45;
    pointer-events: none;
}

[data-photo-card].is-deleting[hidden] {
    display: none !important;
}

.image-manager-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
    text-align: inherit;
}

.image-manager-card .image-manager-thumb > .image-manager-photo-image,
.image-manager-card .image-manager-thumb > img[data-photo-preview-img],
.image-manager-card .image-manager-thumb > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: contain;
    background: #f3f6fa;
}

.image-manager-thumb-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.7);
    color: var(--survai-muted);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    background: #f8fafc;
}

img.image-manager-photo-image,
.image-manager-card img[data-photo-preview-img] {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: contain !important;
}

.image-manager-photo-form {
    padding: 14px;
}

.image-manager-panel:not([data-display-mode="full"]) .image-manager-photo-form,
.image-manager-panel:not([data-display-mode="full"]):not([data-select-mode="cover"]) .image-manager-cover-form {
    display: none;
}

.image-manager-meta {
    padding-bottom: 2px;
}

.image-manager-meta strong {
    color: var(--survai-navy);
    font-size: 0.95rem;
    line-height: 1.35;
}

.image-manager-meta .image-manager-quarantine-badge {
    margin-top: 2px;
}

.image-manager-meta span,
.image-manager-meta em {
    color: var(--survai-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.image-manager-card .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.image-manager-card textarea {
    min-height: 84px;
}

.image-manager-actions {
    align-items: center;
    gap: 8px;
}

.image-manager-cover-form {
    display: flex;
    justify-content: flex-end;
    padding: 0 14px 14px;
}

.media-manager-cover-selection-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    padding: 16px;
    background: #f8fbff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.media-manager-cover-selection-banner div {
    display: grid;
    gap: 4px;
}

.media-manager-cover-selection-banner strong {
    color: var(--survai-navy);
    font-size: 1rem;
    font-weight: 800;
}

.media-manager-cover-selection-banner span {
    color: var(--survai-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.image-manager-settings-panel {
    position: fixed;
    z-index: 2200;
    top: 86px;
    right: 24px;
    width: min(330px, calc(100vw - 32px));
    max-height: calc(100dvh - 110px);
    overflow: auto;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
}

.image-manager-settings-panel[hidden] {
    display: none;
}

.image-manager-settings-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.image-manager-settings-panel__head .eyebrow {
    margin: 0 0 5px;
    color: var(--survai-muted);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.image-manager-settings-panel__head h2 {
    margin: 0;
    color: var(--survai-navy);
    font-size: 1.02rem;
    line-height: 1.1;
}

.image-manager-settings-options {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 14px;
    border: 0;
}

.image-manager-settings-options legend {
    margin: 0 0 4px;
    color: var(--survai-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.image-manager-settings-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #ffffff;
    color: var(--survai-navy);
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.image-manager-settings-options label:hover,
.image-manager-settings-options label:focus-within {
    border-color: rgba(27, 90, 249, 0.32);
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(27, 90, 249, 0.08);
}

.image-manager-settings-options input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #1b5af9;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .image-manager-settings-panel {
        top: auto;
        right: 10px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        width: auto;
        max-height: min(520px, calc(100dvh - 32px));
        border-radius: 18px;
    }
}

.image-manager-selection-box {
    position: fixed;
    z-index: 2100;
    border: 1px solid rgba(27, 90, 249, 0.86);
    border-radius: 8px;
    background: rgba(27, 90, 249, 0.12);
    pointer-events: none;
}

.image-manager-selection-box[hidden] {
    display: none;
}

.image-manager-modal {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 8, 23, 0.74);
}

.image-manager-modal[hidden] {
    display: none;
}

.image-manager-modal__dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    width: min(1320px, 100%);
    height: min(860px, calc(100dvh - 36px));
    overflow: hidden;
    border-radius: 0 !important;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(2, 8, 23, 0.42);
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.image-manager-modal__media {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    background: #060b14;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.image-manager-modal__media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: contain;
}

.image-manager-modal__panel {
    display: grid;
    grid-template-rows: auto auto minmax(90px, 1fr) auto;
    gap: 14px;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.image-manager-modal__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.image-manager-modal__head h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.image-manager-modal__details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.image-manager-modal__details div {
    display: grid;
    gap: 3px;
}

.image-manager-modal__details dt,
.image-manager-modal__notes h3 {
    color: var(--survai-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.image-manager-modal__details dd {
    margin: 0;
    color: var(--survai-text);
    overflow-wrap: anywhere;
}

.image-manager-modal__notes {
    min-height: 0;
}

.image-manager-modal__notes p {
    margin: 6px 0 0;
    color: var(--survai-text);
    white-space: pre-wrap;
}

.image-manager-modal__actions {
    align-self: end;
}

.image-delete-dialog {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 8, 23, 0.58);
}

.image-delete-dialog[hidden] {
    display: none;
}

.image-delete-dialog__panel {
    width: min(520px, 100%);
    border: 1px solid rgba(213, 222, 235, 0.98);
    border-radius: 12px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(2, 8, 23, 0.34);
}

.image-delete-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.image-delete-dialog__head h2 {
    margin: 0;
    color: var(--survai-navy);
    font-size: 1.25rem;
}

.image-delete-dialog__progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin: 16px 0 0;
}

.image-delete-dialog__progress[hidden] {
    display: none;
}

.image-delete-dialog__bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef7;
}

.image-delete-dialog__bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--survai-blue);
    transition: width 180ms ease;
}

.image-delete-dialog__progress .form-note {
    grid-column: 1 / -1;
    margin: 0;
}

.image-delete-dialog.is-error .image-delete-dialog__bar span {
    background: #dc2626;
}

.image-delete-dialog__actions {
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .po-upload-cta-actions,
    .image-manager-cta-card .section-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .image-manager-grid {
        grid-template-columns: 1fr;
    }

    .image-manager-card .form-grid {
        grid-template-columns: 1fr;
    }

    .image-manager-bulk-toolbar {
        width: 100%;
        max-width: 100%;
    }

    .image-manager-bulk-toolbar > strong {
        min-width: 78px;
    }

    .image-manager-bulk-icon-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .image-manager-bulk-edit-modal__body {
        grid-template-columns: 1fr;
    }

    .image-manager-modal__dialog {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .image-manager-modal__panel {
        max-height: 46dvh;
    }
}

/* Final contrast audit guard: blue actions must always carry white content. */
.btn-primary,
.reports-create-survey,
.ops-create-survey-btn,
.dashboard-create-survey,
.button-primary,
button.btn-primary,
a.btn-primary,
[class*="primary-btn"],
[class*="create-survey"] {
    background: var(--survai-blue) !important;
    border-color: var(--survai-blue) !important;
    color: #ffffff !important;
}

.btn-primary *,
.reports-create-survey *,
.ops-create-survey-btn *,
.dashboard-create-survey *,
.button-primary *,
button.btn-primary *,
a.btn-primary *,
[class*="primary-btn"] *,
[class*="create-survey"] * {
    color: inherit !important;
}

.btn-primary svg,
.reports-create-survey svg,
.ops-create-survey-btn svg,
.dashboard-create-survey svg,
.button-primary svg,
button.btn-primary svg,
a.btn-primary svg,
[class*="primary-btn"] svg,
[class*="create-survey"] svg {
    color: inherit !important;
    fill: none;
    stroke: currentColor !important;
}

.btn-primary:hover,
.reports-create-survey:hover,
.ops-create-survey-btn:hover,
.dashboard-create-survey:hover,
.button-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
[class*="primary-btn"]:hover,
[class*="create-survey"]:hover {
    background: var(--survai-blue-hover) !important;
    border-color: var(--survai-blue-hover) !important;
    color: #ffffff !important;
}

/* Blue surface contrast guard: any interactive SurvAI-blue control must remain white-on-blue. */
button[style*="#2563eb"],
a[style*="#2563eb"],
.btn[style*="#2563eb"],
button[style*="#1b5af9"],
a[style*="#1b5af9"],
.btn[style*="#1b5af9"],
button[style*="#1d4ed8"],
a[style*="#1d4ed8"],
.btn[style*="#1d4ed8"],
button[style*="--survai-blue"],
a[style*="--survai-blue"],
.btn[style*="--survai-blue"],
[class*="blue-btn"],
[class*="blue-button"],
[class*="blue-action"],
[class*="action-blue"] {
    color: #ffffff !important;
}

button[style*="#2563eb"] *,
a[style*="#2563eb"] *,
.btn[style*="#2563eb"] *,
button[style*="#1b5af9"] *,
a[style*="#1b5af9"] *,
.btn[style*="#1b5af9"] *,
button[style*="#1d4ed8"] *,
a[style*="#1d4ed8"] *,
.btn[style*="#1d4ed8"] *,
button[style*="--survai-blue"] *,
a[style*="--survai-blue"] *,
.btn[style*="--survai-blue"] *,
[class*="blue-btn"] *,
[class*="blue-button"] *,
[class*="blue-action"] *,
[class*="action-blue"] * {
    color: inherit !important;
}

button[style*="#2563eb"] svg,
a[style*="#2563eb"] svg,
.btn[style*="#2563eb"] svg,
button[style*="#1b5af9"] svg,
a[style*="#1b5af9"] svg,
.btn[style*="#1b5af9"] svg,
button[style*="#1d4ed8"] svg,
a[style*="#1d4ed8"] svg,
.btn[style*="#1d4ed8"] svg,
button[style*="--survai-blue"] svg,
a[style*="--survai-blue"] svg,
.btn[style*="--survai-blue"] svg,
[class*="blue-btn"] svg,
[class*="blue-button"] svg,
[class*="blue-action"] svg,
[class*="action-blue"] svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* ==========================================================
   Sidebar nav: compact square icon tiles (premium accent behind glyphs).
   ========================================================== */

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a,
body.dashboard-body .sidebar .sidebar-nav a,
body.ops-dashboard-page .sidebar .sidebar-nav a,
body.survey-workflow-surface .sidebar .sidebar-nav a,
body.progress-page .sidebar .sidebar-nav a {
    border-radius: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 400 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active,
body.dashboard-body .sidebar .sidebar-nav a.active,
body.ops-dashboard-page .sidebar .sidebar-nav a.active,
body.survey-workflow-surface .sidebar .sidebar-nav a.active,
body.progress-page .sidebar .sidebar-nav a.active {
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    font-weight: 400 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav-icon,
body.dashboard-body .sidebar .sidebar-nav-icon,
body.ops-dashboard-page .sidebar .sidebar-nav-icon,
body.survey-workflow-surface .sidebar .sidebar-nav-icon,
body.progress-page .sidebar .sidebar-nav-icon {
    position: relative;
    z-index: 0;
    /* Prevent ::after backgrounds from sinking under ancestor layers (blue halo / rail reads as a gradient tile) */
    isolation: isolate;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav-icon svg,
body.dashboard-body .sidebar .sidebar-nav-icon svg,
body.ops-dashboard-page .sidebar .sidebar-nav-icon svg,
body.survey-workflow-surface .sidebar .sidebar-nav-icon svg,
body.progress-page .sidebar .sidebar-nav-icon svg {
    position: relative;
    z-index: 1;
}

/* Sidebar rail: flat icon backing on every menu item; solid accent when active (no gradient). */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a .sidebar-nav-icon::after,
body.dashboard-body .sidebar .sidebar-nav a .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar .sidebar-nav a .sidebar-nav-icon::after,
body.survey-workflow-surface .sidebar .sidebar-nav a .sidebar-nav-icon::after,
body.progress-page .sidebar .sidebar-nav a .sidebar-nav-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: none;
    z-index: 0;
    mix-blend-mode: normal;
    pointer-events: none;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
body.dashboard-body .sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
body.survey-workflow-surface .sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
body.progress-page .sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.16);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
body.dashboard-body .sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
body.survey-workflow-surface .sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
body.progress-page .sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(27, 90, 249, 0.38);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active .sidebar-nav-icon::after,
body.dashboard-body .sidebar .sidebar-nav a.active .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar .sidebar-nav a.active .sidebar-nav-icon::after,
body.survey-workflow-surface .sidebar .sidebar-nav a.active .sidebar-nav-icon::after,
body.progress-page .sidebar .sidebar-nav a.active .sidebar-nav-icon::after {
    /* Flat fill = `--survai-logo-blue` (sampled from `survai-wordmark-menu.png`) */
    background: var(--survai-logo-blue, #1b5af9);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
    opacity: 1;
    mix-blend-mode: normal;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    .sidebar
    .sidebar-nav
    a.active:focus-visible
    .sidebar-nav-icon::after,
body.dashboard-body .sidebar .sidebar-nav a.active:focus-visible .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar .sidebar-nav a.active:focus-visible .sidebar-nav-icon::after,
body.survey-workflow-surface .sidebar .sidebar-nav a.active:focus-visible .sidebar-nav-icon::after,
body.progress-page .sidebar .sidebar-nav a.active:focus-visible .sidebar-nav-icon::after {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.52);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active .sidebar-nav-icon,
body.dashboard-body .sidebar .sidebar-nav a.active .sidebar-nav-icon,
body.ops-dashboard-page .sidebar .sidebar-nav a.active .sidebar-nav-icon,
body.survey-workflow-surface .sidebar .sidebar-nav a.active .sidebar-nav-icon,
body.progress-page .sidebar .sidebar-nav a.active .sidebar-nav-icon {
    color: #ffffff;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active .sidebar-nav-label,
body.dashboard-body .sidebar .sidebar-nav a.active .sidebar-nav-label,
body.ops-dashboard-page .sidebar .sidebar-nav a.active .sidebar-nav-label,
body.survey-workflow-surface .sidebar .sidebar-nav a.active .sidebar-nav-label,
body.progress-page .sidebar .sidebar-nav a.active .sidebar-nav-label {
    color: rgba(255, 255, 255, 0.96) !important;
    font-weight: 400 !important;
}

@media (min-width: 901px) {
    body.sidebar-desktop-collapsed:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
        .sidebar
        .sidebar-nav
        a
        .sidebar-nav-icon::after,
    body.sidebar-desktop-collapsed.dashboard-body .sidebar .sidebar-nav a .sidebar-nav-icon::after,
    body.sidebar-desktop-collapsed.ops-dashboard-page .sidebar .sidebar-nav a .sidebar-nav-icon::after,
    body.sidebar-desktop-collapsed.survey-workflow-surface .sidebar .sidebar-nav a .sidebar-nav-icon::after,
    body.sidebar-desktop-collapsed.progress-page .sidebar .sidebar-nav a .sidebar-nav-icon::after {
        width: 42px;
        height: 42px;
        border-radius: 9px;
    }
}

/*
 * Menu / app-chrome CTAs only: flat fills (no tinted lift shadow that reads like a gradient).
 * Main-panel primary buttons keep default elevation from earlier .btn-primary rules.
 */
.sidebar .btn-primary,
.sidebar a.btn-primary,
.sidebar button.btn-primary,
.sidebar .reports-create-survey,
.sidebar .ops-create-survey-btn,
.sidebar .dashboard-create-survey,
.sidebar .button-primary,
.mobile-app-header .btn-primary,
.mobile-app-header a.btn-primary,
.mobile-app-header button.btn-primary,
.workspace-topbar .btn-primary,
.workspace-topbar a.btn-primary,
.workspace-topbar button.btn-primary {
    background-color: #1b5af9 !important;
    background-image: none !important;
    border-color: #1b5af9 !important;
    box-shadow: none !important;
}

.sidebar .btn-primary:hover,
.sidebar a.btn-primary:hover,
.sidebar button.btn-primary:hover,
.sidebar .reports-create-survey:hover,
.sidebar .ops-create-survey-btn:hover,
.sidebar .dashboard-create-survey:hover,
.sidebar .button-primary:hover,
.mobile-app-header .btn-primary:hover,
.mobile-app-header a.btn-primary:hover,
.mobile-app-header button.btn-primary:hover,
.workspace-topbar .btn-primary:hover,
.workspace-topbar a.btn-primary:hover,
.workspace-topbar button.btn-primary:hover {
    background-color: var(--survai-blue-hover, #1648d4) !important;
    border-color: var(--survai-blue-hover, #1648d4) !important;
    box-shadow: none !important;
}

/* Mobile: flatten main-panel gradient (late cascade wins over premium SaaS hero blob). */
@media (max-width: 900px) {
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel,
    body.dashboard-body .main-panel,
    body.ops-dashboard-page .main-panel,
    body.survey-workflow-surface .main-panel,
    body.progress-page .main-panel {
        background: linear-gradient(180deg, #ffffff 0%, var(--survai-bg) 46%, #eef2f7 100%) !important;
    }
}

/* Workspace sidebar: keep the actual logo visible after JS restores the collapsed desktop rail. */
@media (min-width: 901px) {
    body.sidebar-desktop-collapsed .sidebar--workspace .sidebar-brand::before {
        display: none !important;
        content: none !important;
    }

    body.sidebar-desktop-collapsed .sidebar--workspace .brand-logo-sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 76px !important;
        max-height: 78px !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center !important;
        background-color: transparent !important;
    }
}

/* Standard white page/header title: shared by Dashboard topbar and all page headers. */
.page-header-title {
    margin: 0 !important;
    color: var(--survai-text, #0b1321) !important;
    font-size: clamp(1.45rem, 2vw, 1.65rem) !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

.page-header .page-header-title,
.workflow-page-header .page-header-title,
.workspace-topbar .page-header-title,
.transcript-workspace-header .page-header-title {
    overflow: hidden;
    max-width: min(72vw, 920px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-address {
    margin: 0.22rem 0 0;
    overflow: hidden;
    max-width: min(78vw, 960px);
    color: #7a8699;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-topbar .page-header-address {
    max-width: min(72vw, 920px);
    font-size: 0.76rem;
    line-height: 1.2;
}

@media (max-width: 700px) {
    .page-header-title {
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
    }

    .page-header-address {
        max-width: 100%;
        font-size: 0.8rem;
    }
}

/* SurvAI sidebar colour standard: light toolbar rail with slate glyphs/text. */
:root {
    --survai-sidebar-surface: #fafcfe;
    --survai-sidebar-ink: #3d4861;
    --theme-sidebar: var(--survai-sidebar-surface);
    --theme-sidebar-panel: var(--survai-sidebar-surface);
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar,
body.dashboard-body .sidebar,
body.ops-dashboard-page .sidebar,
body.survey-workflow-surface .sidebar,
body.progress-page .sidebar,
body.has-mobile-sidebar .sidebar {
    border-right: 1px solid rgba(61, 72, 97, 0.1) !important;
    background: var(--survai-sidebar-surface) !important;
    color: var(--survai-sidebar-ink) !important;
    box-shadow: 18px 0 48px rgba(61, 72, 97, 0.08) !important;
}

.sidebar .sidebar-nav a,
.sidebar .sidebar-nav a:hover,
.sidebar .sidebar-nav a:focus-visible,
.sidebar .sidebar-nav a.active,
.sidebar .sidebar-nav-label,
.sidebar .sidebar-footer,
.sidebar .sidebar-footer *,
.sidebar .user-pill,
.sidebar .user-pill *,
.sidebar a:not(.btn) {
    color: var(--survai-sidebar-ink) !important;
}

.sidebar .sidebar-nav-icon,
.sidebar .sidebar-nav-icon svg {
    color: var(--survai-sidebar-ink) !important;
    stroke: currentColor !important;
}

.sidebar .sidebar-nav-icon svg *,
.sidebar .sidebar-nav-icon svg .sai-icon-accent {
    stroke: currentColor !important;
}

.sidebar .sidebar-nav a .sidebar-nav-icon::after,
.sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
.sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
.sidebar .sidebar-nav a.active .sidebar-nav-icon::after,
.sidebar .sidebar-nav a.active:focus-visible .sidebar-nav-icon::after {
    background: rgba(61, 72, 97, 0.06) !important;
    border-color: rgba(61, 72, 97, 0.12) !important;
    box-shadow: none !important;
}

.sidebar .sidebar-nav a:hover:not(.active) .sidebar-nav-icon::after,
.sidebar .sidebar-nav a:focus-visible:not(.active) .sidebar-nav-icon::after,
.sidebar .sidebar-nav a.active .sidebar-nav-icon::after {
    background: rgba(61, 72, 97, 0.1) !important;
}

.sidebar .sidebar-nav {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sidebar .sidebar-nav a {
    overflow: hidden !important;
}

.sidebar .sidebar-nav a .sidebar-nav-label,
.sidebar .sidebar-nav-label {
    display: block !important;
    max-width: 100% !important;
    min-width: 0;
    overflow: visible !important;
    color: currentColor !important;
    opacity: 1 !important;
    text-align: center;
    text-overflow: clip !important;
    visibility: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* Final sidebar label guard: every menu item must keep its visible name in desktop,
   collapsed desktop and mobile drawers. Earlier legacy rail styles sometimes clip
   or visually collapse label spans. */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 10px 8px 12px !important;
    overflow: hidden !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: normal !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:has(.sidebar-nav-icon) {
    min-height: 78px !important;
    justify-content: flex-start !important;
    padding-top: 13px !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon {
    position: relative !important;
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-label {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: hidden !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-overflow: clip !important;
    transform: none !important;
    visibility: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav {
        max-height: calc(100dvh - 190px);
    }

    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a {
        min-height: 62px !important;
    }

    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:has(.sidebar-nav-icon) {
        min-height: 82px !important;
    }
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active > .sidebar-nav-label {
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
}

.sidebar-logout-form {
    margin: 0;
}

.sidebar-logout-button {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid rgba(61, 72, 97, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--survai-sidebar-ink, #3d4861);
    background: rgba(61, 72, 97, 0.04);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.sidebar-logout-button:hover,
.sidebar-logout-button:focus-visible {
    border-color: rgba(61, 72, 97, 0.18);
    background: rgba(61, 72, 97, 0.08);
    outline: none;
}

.sidebar-logout-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    place-items: center;
}

.sidebar-logout-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Final sidebar rhythm: consistent spacing and text weight across ops/workflow/settings rails. */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 4px 2px !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a {
    display: grid !important;
    grid-template-rows: auto;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 11px 8px !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a:has(.sidebar-nav-icon),
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a:has(.sidebar-nav-icon),
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a:has(.sidebar-nav-icon) {
    grid-template-rows: 34px auto;
    min-height: 78px !important;
    padding: 12px 8px 11px !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a > .sidebar-nav-icon,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon {
    align-self: center !important;
    justify-self: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a > .sidebar-nav-icon::after,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon::after,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon::after {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a > .sidebar-nav-label,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-label,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-label {
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-nav a.active > .sidebar-nav-label,
body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a.active > .sidebar-nav-label,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a.active > .sidebar-nav-label {
    font-weight: 600 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .user-pill,
body.dashboard-body .sidebar.sidebar--ops .user-pill,
body.ops-dashboard-page .sidebar.sidebar--ops .user-pill {
    gap: 4px !important;
    border-color: rgba(61, 72, 97, 0.12) !important;
    padding: 12px !important;
    background: rgba(61, 72, 97, 0.04) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .user-pill strong,
body.dashboard-body .sidebar.sidebar--ops .user-pill strong,
body.ops-dashboard-page .sidebar.sidebar--ops .user-pill strong {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .user-pill span,
body.dashboard-body .sidebar.sidebar--ops .user-pill span,
body.ops-dashboard-page .sidebar.sidebar--ops .user-pill span {
    color: rgba(61, 72, 97, 0.72) !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar:not(.sidebar--workspace) .sidebar-logout-button,
body.dashboard-body .sidebar.sidebar--ops .sidebar-logout-button,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-logout-button {
    min-height: 42px !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Sidebar symmetry lock: one exact icon cell and one exact label cell per menu item. */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav {
    align-content: start !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-rows: 42px minmax(18px, auto) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 8px !important;
    min-height: 80px !important;
    padding: 10px 8px 12px !important;
    text-align: center !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:not(:has(.sidebar-nav-icon)) {
    grid-template-rows: minmax(24px, auto) !important;
    min-height: 52px !important;
    padding: 12px 8px !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon {
    position: relative !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    transform: translate(-50%, -50%) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    overflow: visible !important;
    transform: none !important;
}

body.dashboard-body .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon svg *,
body.ops-dashboard-page .sidebar.sidebar--ops .sidebar-nav a > .sidebar-nav-icon svg * {
    vector-effect: non-scaling-stroke;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-label {
    align-self: center !important;
    justify-self: center !important;
    min-height: 18px !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
}

/* Report workspace toolbar: fixed geometry for perfectly centred icon rows. */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav {
    display: grid !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    align-content: start !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a {
    display: grid !important;
    width: 100% !important;
    min-height: 88px !important;
    box-sizing: border-box !important;
    grid-template-rows: 42px 28px !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    border-radius: 12px !important;
    padding: 9px 8px 10px !important;
    text-align: center !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon {
    position: relative !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    transform: translate(-50%, -50%) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    overflow: visible !important;
    transform: none !important;
    transform-box: view-box !important;
    transform-origin: center !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon svg *,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon svg path,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon svg circle,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-icon svg rect {
    vector-effect: non-scaling-stroke !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar.sidebar--workspace .sidebar-nav a > .sidebar-nav-label {
    display: -webkit-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 28px !important;
    max-height: 28px !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* ==========================================================
   Global SurvAI Navigation Design System
   Central visual layer for ops, workspace and admin sidebars.
   Keeps existing widths, routes, collapse behaviour and markup.
   ========================================================== */
:root {
    --sidebar-padding: 12px;
    --sidebar-brand-padding-block-start: 24px;
    --sidebar-brand-padding-block-end: 20px;
    --sidebar-brand-padding-inline: 24px;
    --sidebar-nav-padding-inline: 6px;
    --sidebar-nav-gap: 4px;
    --sidebar-group-gap: 8px;
    --sidebar-item-height: 82px;
    --sidebar-item-padding-inline: 8px;
    --sidebar-item-gap: 7px;
    --sidebar-font-size: 12.5px;
    --sidebar-line-height: 15px;
    --sidebar-icon-size: 28px;
    --sidebar-icon-cell-size: 34px;
    --sidebar-logout-icon-size: 18px;
    --sidebar-radius: 12px;
    --sidebar-ink-muted: rgba(61, 72, 97, 0.68);
    --sidebar-hover-bg: rgba(61, 72, 97, 0.055);
    --sidebar-active-bg: rgba(27, 90, 249, 0.082);
    --sidebar-active-ink: #1b5af9;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar,
body.dashboard-body .sidebar,
body.ops-dashboard-page .sidebar,
body.survey-workflow-surface .sidebar,
body.progress-page .sidebar,
body.has-mobile-sidebar .sidebar {
    gap: var(--sidebar-group-gap) !important;
    padding: 0 var(--sidebar-padding) 16px !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    background: var(--survai-sidebar-surface, #fafcfe) !important;
    scrollbar-width: thin;
}

.sidebar-desktop-header-row,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar > .sidebar-brand,
body.dashboard-body .sidebar > .sidebar-brand,
body.ops-dashboard-page .sidebar > .sidebar-brand,
body.survey-workflow-surface .sidebar > .sidebar-brand,
body.progress-page .sidebar > .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    margin: 0 calc(var(--sidebar-padding) * -1) !important;
    padding: var(--sidebar-brand-padding-block-start) var(--sidebar-brand-padding-inline)
        var(--sidebar-brand-padding-block-end) !important;
}

.sidebar-desktop-header-row .sidebar-brand,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar > .sidebar-brand,
body.dashboard-body .sidebar > .sidebar-brand,
body.ops-dashboard-page .sidebar > .sidebar-brand,
body.survey-workflow-surface .sidebar > .sidebar-brand,
body.progress-page .sidebar > .sidebar-brand {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0 !important;
}

.sidebar .sidebar-brand img.brand-logo-sidebar {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav,
body.dashboard-body .sidebar .sidebar-nav,
body.ops-dashboard-page .sidebar .sidebar-nav,
body.survey-workflow-surface .sidebar .sidebar-nav,
body.progress-page .sidebar .sidebar-nav {
    display: grid !important;
    align-content: start !important;
    gap: var(--sidebar-nav-gap) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 var(--sidebar-nav-padding-inline) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a,
body.dashboard-body .sidebar .sidebar-nav a,
body.ops-dashboard-page .sidebar .sidebar-nav a,
body.survey-workflow-surface .sidebar .sidebar-nav a,
body.progress-page .sidebar .sidebar-nav a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--sidebar-icon-cell-size) minmax(16px, auto) !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-height: var(--sidebar-item-height) !important;
    box-sizing: border-box !important;
    gap: var(--sidebar-item-gap) !important;
    margin: 0 !important;
    border-radius: var(--sidebar-radius) !important;
    padding: 8px var(--sidebar-item-padding-inline) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    background: transparent !important;
    font-size: var(--sidebar-font-size) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: var(--sidebar-line-height) !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:has(.sidebar-nav-icon),
body.dashboard-body .sidebar .sidebar-nav a:has(.sidebar-nav-icon),
body.ops-dashboard-page .sidebar .sidebar-nav a:has(.sidebar-nav-icon),
body.survey-workflow-surface .sidebar .sidebar-nav a:has(.sidebar-nav-icon),
body.progress-page .sidebar .sidebar-nav a:has(.sidebar-nav-icon) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--sidebar-icon-cell-size) minmax(16px, auto) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:hover,
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a:focus-visible,
body.dashboard-body .sidebar .sidebar-nav a:hover,
body.dashboard-body .sidebar .sidebar-nav a:focus-visible,
body.ops-dashboard-page .sidebar .sidebar-nav a:hover,
body.ops-dashboard-page .sidebar .sidebar-nav a:focus-visible,
body.survey-workflow-surface .sidebar .sidebar-nav a:hover,
body.survey-workflow-surface .sidebar .sidebar-nav a:focus-visible,
body.progress-page .sidebar .sidebar-nav a:hover,
body.progress-page .sidebar .sidebar-nav a:focus-visible {
    background: var(--sidebar-hover-bg) !important;
    outline: none !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active,
body.dashboard-body .sidebar .sidebar-nav a.active,
body.ops-dashboard-page .sidebar .sidebar-nav a.active,
body.survey-workflow-surface .sidebar .sidebar-nav a.active,
body.progress-page .sidebar .sidebar-nav a.active {
    color: var(--survai-sidebar-ink, #3d4861) !important;
    background: var(--sidebar-active-bg) !important;
    box-shadow: inset 0 0 0 1px rgba(27, 90, 249, 0.08) !important;
    font-weight: 600 !important;
}

.sidebar .sidebar-nav a::before,
.sidebar .sidebar-nav a > .sidebar-nav-icon::after {
    display: none !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon,
body.dashboard-body .sidebar .sidebar-nav a > .sidebar-nav-icon,
body.ops-dashboard-page .sidebar .sidebar-nav a > .sidebar-nav-icon,
body.survey-workflow-surface .sidebar .sidebar-nav a > .sidebar-nav-icon,
body.progress-page .sidebar .sidebar-nav a > .sidebar-nav-icon {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--sidebar-icon-cell-size) !important;
    height: var(--sidebar-icon-cell-size) !important;
    min-width: var(--sidebar-icon-cell-size) !important;
    min-height: var(--sidebar-icon-cell-size) !important;
    flex: 0 0 var(--sidebar-icon-cell-size) !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    line-height: 1 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active > .sidebar-nav-icon,
body.dashboard-body .sidebar .sidebar-nav a.active > .sidebar-nav-icon,
body.ops-dashboard-page .sidebar .sidebar-nav a.active > .sidebar-nav-icon,
body.survey-workflow-surface .sidebar .sidebar-nav a.active > .sidebar-nav-icon,
body.progress-page .sidebar .sidebar-nav a.active > .sidebar-nav-icon {
    color: var(--sidebar-active-ink) !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-icon svg,
body.dashboard-body .sidebar .sidebar-nav a > .sidebar-nav-icon svg,
body.ops-dashboard-page .sidebar .sidebar-nav a > .sidebar-nav-icon svg,
body.survey-workflow-surface .sidebar .sidebar-nav a > .sidebar-nav-icon svg,
body.progress-page .sidebar .sidebar-nav a > .sidebar-nav-icon svg {
    display: block !important;
    width: var(--sidebar-icon-size) !important;
    height: var(--sidebar-icon-size) !important;
    max-width: var(--sidebar-icon-size) !important;
    max-height: var(--sidebar-icon-size) !important;
    overflow: visible !important;
    stroke: currentColor !important;
    stroke-width: 1.55 !important;
    transform: none !important;
    transform-box: view-box !important;
    transform-origin: center !important;
}

.sidebar .sidebar-nav a > .sidebar-nav-icon svg *,
.sidebar .sidebar-nav a > .sidebar-nav-icon svg path,
.sidebar .sidebar-nav a > .sidebar-nav-icon svg circle,
.sidebar .sidebar-nav a > .sidebar-nav-icon svg rect {
    vector-effect: non-scaling-stroke !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a > .sidebar-nav-label,
body.dashboard-body .sidebar .sidebar-nav a > .sidebar-nav-label,
body.ops-dashboard-page .sidebar .sidebar-nav a > .sidebar-nav-label,
body.survey-workflow-surface .sidebar .sidebar-nav a > .sidebar-nav-label,
body.progress-page .sidebar .sidebar-nav a > .sidebar-nav-label,
.sidebar .sidebar-nav-label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: hidden !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: initial !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: var(--sidebar-font-size) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: var(--sidebar-line-height) !important;
    opacity: 1 !important;
    text-align: center !important;
    text-overflow: clip !important;
    transform: none !important;
    visibility: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .sidebar .sidebar-nav a.active > .sidebar-nav-label,
body.dashboard-body .sidebar .sidebar-nav a.active > .sidebar-nav-label,
body.ops-dashboard-page .sidebar .sidebar-nav a.active > .sidebar-nav-label,
body.survey-workflow-surface .sidebar .sidebar-nav a.active > .sidebar-nav-label,
body.progress-page .sidebar .sidebar-nav a.active > .sidebar-nav-label {
    font-weight: 600 !important;
}

.sidebar-nav a.sidebar-nav-follow-settings {
    margin-top: var(--sidebar-group-gap) !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(61, 72, 97, 0.1) !important;
}

.sidebar-footer {
    display: grid !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding: 8px 10px 0 !important;
}

.user-pill {
    display: grid !important;
    gap: 5px !important;
    border: 1px solid rgba(61, 72, 97, 0.1) !important;
    border-radius: var(--sidebar-radius) !important;
    padding: 13px 14px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
}

.user-pill strong {
    color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 18px !important;
}

.user-pill span {
    color: var(--sidebar-ink-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 16px !important;
    overflow-wrap: anywhere !important;
}

.sidebar-logout-form {
    margin: 0 !important;
}

.sidebar-logout-button {
    display: grid !important;
    grid-template-columns: var(--sidebar-logout-icon-size) minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    gap: 10px !important;
    border: 1px solid rgba(61, 72, 97, 0.1) !important;
    border-radius: var(--sidebar-radius) !important;
    padding: 9px 14px !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 20px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.sidebar-logout-button:hover,
.sidebar-logout-button:focus-visible {
    border-color: rgba(61, 72, 97, 0.16) !important;
    background: var(--sidebar-hover-bg) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    outline: none !important;
}

.sidebar-logout-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--sidebar-logout-icon-size) !important;
    height: var(--sidebar-logout-icon-size) !important;
    min-width: var(--sidebar-logout-icon-size) !important;
    min-height: var(--sidebar-logout-icon-size) !important;
}

.sidebar-logout-icon svg {
    display: block !important;
    width: var(--sidebar-logout-icon-size) !important;
    height: var(--sidebar-logout-icon-size) !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
}

body.sidebar-desktop-collapsed .brand-logo-sidebar {
    display: none !important;
}

body.sidebar-desktop-collapsed .user-pill {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    body.has-mobile-sidebar .sidebar .sidebar-nav {
        padding-inline: var(--sidebar-nav-padding-inline) !important;
    }

    body.has-mobile-sidebar .sidebar .sidebar-nav a {
        min-height: var(--sidebar-item-height) !important;
        padding-inline: var(--sidebar-item-padding-inline) !important;
    }
}

/* Global flash notices: float briefly over the workspace instead of pushing page layout. */
@keyframes survai-flash-toast {
    0% {
        opacity: 0;
        transform: translate3d(12px, -8px, 0) scale(0.985);
    }

    10%,
    76% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(12px, -8px, 0) scale(0.985);
        visibility: hidden;
    }
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel > .alert,
body.dashboard-body .main-panel > .alert,
body.ops-dashboard-page .main-panel > .alert,
body.survey-workflow-surface .main-panel > .alert,
body.progress-page .main-panel > .alert {
    position: fixed !important;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 18px)) !important;
    right: max(18px, calc(env(safe-area-inset-right, 0px) + 18px)) !important;
    z-index: 12000 !important;
    width: min(420px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 14px !important;
    padding: 12px 15px !important;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.16) !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
    animation: survai-flash-toast 5.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@media (max-width: 900px) {
    body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body) .main-panel > .alert,
    body.dashboard-body .main-panel > .alert,
    body.ops-dashboard-page .main-panel > .alert,
    body.survey-workflow-surface .main-panel > .alert,
    body.progress-page .main-panel > .alert {
        top: max(72px, calc(env(safe-area-inset-top, 0px) + 72px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Absolute sidebar alignment lock: applies to report-overview/property workspace and every sidebar rail. */
.sidebar .sidebar-nav {
    display: grid !important;
    align-content: start !important;
    gap: var(--sidebar-nav-gap, 4px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 var(--sidebar-nav-padding-inline, 6px) !important;
}

.sidebar .sidebar-nav a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--sidebar-icon-cell-size, 34px) minmax(16px, auto) !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: var(--sidebar-item-height, 82px) !important;
    box-sizing: border-box !important;
    gap: var(--sidebar-item-gap, 7px) !important;
    border-radius: var(--sidebar-radius, 12px) !important;
    padding: 8px var(--sidebar-item-padding-inline, 8px) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: var(--sidebar-font-size, 12.5px) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: var(--sidebar-line-height, 15px) !important;
    text-align: center !important;
}

.sidebar .sidebar-nav a > .sidebar-nav-icon {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--sidebar-icon-cell-size, 34px) !important;
    height: var(--sidebar-icon-cell-size, 34px) !important;
    min-width: var(--sidebar-icon-cell-size, 34px) !important;
    min-height: var(--sidebar-icon-cell-size, 34px) !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    line-height: 1 !important;
}

.sidebar .sidebar-nav a > .sidebar-nav-icon svg {
    display: block !important;
    width: var(--sidebar-icon-size, 28px) !important;
    height: var(--sidebar-icon-size, 28px) !important;
    max-width: var(--sidebar-icon-size, 28px) !important;
    max-height: var(--sidebar-icon-size, 28px) !important;
}

.sidebar .sidebar-nav a > .sidebar-nav-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: var(--sidebar-font-size, 12.5px) !important;
    font-weight: 500 !important;
    line-height: var(--sidebar-line-height, 15px) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.sidebar .sidebar-nav a.active > .sidebar-nav-label {
    font-weight: 600 !important;
}

/* Property/workspace toolbar final lock: exact selector for the report-overview sidebar rail. */
body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav {
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 0 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav
    a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 40px minmax(28px, auto) !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    min-height: 88px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    padding: 9px 6px 10px !important;
    text-align: center !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav
    a
    > .sidebar-nav-icon {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav
    a
    > .sidebar-nav-icon
    svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    overflow: visible !important;
    transform: none !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav
    a
    > .sidebar-nav-label {
    display: -webkit-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 28px !important;
    max-height: 30px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body:not(.login-body):not(.survaicam-page):not(.capture-mode-body):not(.pdf-viewer-body)
    aside.sidebar.sidebar--workspace#appSidebar
    .sidebar-nav
    a.active
    > .sidebar-nav-label {
    font-weight: 600 !important;
}

/* ID-level toolbar alignment: the final source of truth for every rendered SurvAI sidebar. */
#appSidebar.sidebar .sidebar-nav {
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 0 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#appSidebar.sidebar .sidebar-nav a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 42px minmax(28px, auto) !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 90px !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    padding: 9px 6px 10px !important;
    text-align: center !important;
}

#appSidebar.sidebar .sidebar-nav a > .sidebar-nav-icon {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

#appSidebar.sidebar .sidebar-nav a > .sidebar-nav-icon::after {
    display: none !important;
}

#appSidebar.sidebar .sidebar-nav a > .sidebar-nav-icon svg {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    overflow: visible !important;
    transform: none !important;
}

#appSidebar.sidebar .sidebar-nav a > .sidebar-nav-label {
    display: -webkit-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 28px !important;
    max-height: 30px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#appSidebar.sidebar .sidebar-nav a.active > .sidebar-nav-label {
    font-weight: 600 !important;
}

/* Sidebar footer polish: compact premium account block and balanced logout control. */
#appSidebar.sidebar .sidebar-footer,
.sidebar .sidebar-footer {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    padding: 10px 7px 14px !important;
}

#appSidebar.sidebar .user-pill,
.sidebar .user-pill {
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(61, 72, 97, 0.1) !important;
    border-radius: 14px !important;
    padding: 10px 7px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    text-align: center !important;
}

#appSidebar.sidebar .user-pill strong,
.sidebar .user-pill strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    -webkit-text-fill-color: var(--survai-sidebar-ink, #3d4861) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 15px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#appSidebar.sidebar .user-pill span,
.sidebar .user-pill span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: rgba(61, 72, 97, 0.62) !important;
    -webkit-text-fill-color: rgba(61, 72, 97, 0.62) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#appSidebar.sidebar .sidebar-logout-form,
.sidebar .sidebar-logout-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

#appSidebar.sidebar .sidebar-logout-button,
.sidebar .sidebar-logout-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 20px 14px !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    border: 1px solid rgba(61, 72, 97, 0.1) !important;
    border-radius: 14px !important;
    padding: 7px 6px !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 13px !important;
    text-align: center !important;
    cursor: pointer !important;
}

#appSidebar.sidebar .sidebar-logout-button:hover,
#appSidebar.sidebar .sidebar-logout-button:focus-visible,
.sidebar .sidebar-logout-button:hover,
.sidebar .sidebar-logout-button:focus-visible {
    border-color: rgba(27, 90, 249, 0.18) !important;
    background: rgba(27, 90, 249, 0.06) !important;
    color: var(--survai-sidebar-ink, #3d4861) !important;
    outline: none !important;
}

#appSidebar.sidebar .sidebar-logout-icon,
.sidebar .sidebar-logout-icon {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
}

#appSidebar.sidebar .sidebar-logout-icon svg,
.sidebar .sidebar-logout-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
}

#appSidebar.sidebar .sidebar-logout-button > span:last-child,
.sidebar .sidebar-logout-button > span:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}