:root {
    --workbench-width: 1400px;
    --workbench-gutter: 80px;
    --workbench-sidebar: 380px;
    --workbench-gap: 18px;
    --workbench-radius: 16px;
    --workbench-line: rgba(72, 96, 117, 0.16);
    --workbench-panel: rgba(255, 255, 255, 0.88);
    --workbench-muted: #64727d;
    --workbench-shadow: 0 20px 54px rgba(38, 57, 75, 0.10);
}

body.analysis-zscore-page,
body.clip-aesthetic-page,
body.platform-page {
    min-height: 100vh;
    color: #172126;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 139, 127, 0.12), transparent 29%),
        radial-gradient(circle at 92% 12%, rgba(222, 103, 77, 0.10), transparent 27%),
        linear-gradient(135deg, #f6faf8 0%, #f7f8f4 48%, #fff8f6 100%) !important;
}

body.analysis-zscore-page .page-shell,
body.clip-aesthetic-page > header,
body.clip-aesthetic-page > main,
body.platform-page .platform {
    width: min(var(--workbench-width), calc(100% - var(--workbench-gutter))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.analysis-zscore-page .hero,
body.clip-aesthetic-page > header,
body.platform-page .topbar {
    min-height: 190px !important;
    padding: 30px 32px !important;
    border: 1px solid var(--workbench-line) !important;
    border-radius: var(--workbench-radius) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at 14% 10%, rgba(14, 139, 127, 0.12), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(222, 103, 77, 0.09), transparent 31%) !important;
    box-shadow: var(--workbench-shadow) !important;
    backdrop-filter: none;
}

body.analysis-zscore-page .hero,
body.platform-page .topbar {
    margin: 24px 0 18px !important;
}

body.clip-aesthetic-page > header {
    margin: 24px auto 18px !important;
}

body.analysis-zscore-page .hero,
body.clip-aesthetic-page > header,
body.platform-page .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 28px !important;
    align-items: center !important;
    text-align: left !important;
}

.workbench-heading {
    min-width: 0;
}

.workbench-kicker,
body.analysis-zscore-page .kicker {
    width: fit-content;
    margin: 0 0 14px !important;
    padding: 7px 11px;
    border: 1px solid rgba(14, 139, 127, 0.24);
    border-radius: 999px;
    color: #08786f;
    background: rgba(14, 139, 127, 0.08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workbench-back,
body.analysis-zscore-page .hero-back {
    display: inline-flex !important;
    margin: 0 0 14px !important;
    color: #276d68 !important;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none !important;
}

body.analysis-zscore-page .hero h1,
body.clip-aesthetic-page > header h1,
body.platform-page .topbar h1 {
    margin: 0 !important;
    font-size: clamp(34px, 4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    color: #172126 !important;
}

body.analysis-zscore-page .hero p,
body.clip-aesthetic-page > header p,
body.platform-page .topbar p {
    max-width: 760px !important;
    margin: 14px 0 0 !important;
    color: var(--workbench-muted) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.workbench-header-metrics,
body.analysis-zscore-page .hero-metrics {
    width: min(420px, 36vw);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.workbench-header-stat,
body.analysis-zscore-page .hero-stat {
    min-height: 78px;
    padding: 15px !important;
    border: 1px solid var(--workbench-line) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

.workbench-header-stat strong,
body.analysis-zscore-page .hero-stat strong {
    display: block;
    color: #173d3a;
    font-size: 25px !important;
    line-height: 1 !important;
}

.workbench-header-stat span,
body.analysis-zscore-page .hero-stat span {
    display: block;
    margin-top: 7px;
    color: var(--workbench-muted);
    font-size: 12px;
}

body.analysis-zscore-page .workspace,
body.clip-aesthetic-page > main > .grid,
body.platform-page .layout {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 56px !important;
    display: grid !important;
    grid-template-columns: var(--workbench-sidebar) minmax(0, 1fr) !important;
    gap: var(--workbench-gap) !important;
    align-items: start !important;
}

body.clip-aesthetic-page > main {
    max-width: none !important;
    padding: 0 !important;
}

body.clip-aesthetic-page > main > .grid > *,
body.platform-page .layout > * {
    min-width: 0;
    grid-column: auto !important;
}

body.analysis-zscore-page .panel,
body.clip-aesthetic-page .glass-card,
body.platform-page .panel,
body.platform-page .sidebar,
body.platform-page .status-panel,
body.platform-page .result-box {
    border: 1px solid var(--workbench-line) !important;
    border-radius: var(--workbench-radius) !important;
    background: var(--workbench-panel) !important;
    box-shadow: var(--workbench-shadow) !important;
    backdrop-filter: none;
}

body.analysis-zscore-page .control-panel,
body.platform-page .sidebar,
body.clip-aesthetic-page > main > .grid > :first-child {
    position: sticky !important;
    top: 86px !important;
    align-self: start !important;
}

@media (min-width: 981px) {
    body.analysis-zscore-page .control-panel {
        max-height: var(--control-panel-max-height, calc(100dvh - 104px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(14, 139, 127, 0.34) transparent;
    }

    body.analysis-zscore-page .control-panel::-webkit-scrollbar {
        width: 7px;
    }

    body.analysis-zscore-page .control-panel::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(14, 139, 127, 0.28);
    }
}

body.analysis-zscore-page .drop-zone,
body.clip-aesthetic-page #uploadArea,
body.platform-page .file-zone {
    min-height: 250px;
    border-radius: 12px !important;
    border-color: rgba(14, 139, 127, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(242, 249, 247, 0.76)),
        radial-gradient(circle at 88% 88%, rgba(222, 103, 77, 0.09), transparent 32%) !important;
}

body.clip-aesthetic-page .glass-card {
    border-radius: var(--workbench-radius) !important;
}

body.clip-aesthetic-page #scoreContainer,
body.clip-aesthetic-page > main > .grid > :first-child {
    gap: var(--workbench-gap) !important;
}

body.platform-page .platform {
    min-height: 100vh;
    display: block !important;
}

body.platform-page .topbar {
    width: 100%;
}

body.platform-page .topbar .brand {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
}

body.platform-page .topbar .top-actions {
    max-width: 430px;
    justify-content: flex-end;
}

body.platform-page .status-panel {
    box-shadow: 0 10px 30px rgba(38, 57, 75, 0.08) !important;
}

@media (max-width: 1100px) {
    body.analysis-zscore-page .page-shell,
    body.clip-aesthetic-page > header,
    body.clip-aesthetic-page > main,
    body.platform-page .platform {
        width: min(var(--workbench-width), calc(100% - 36px)) !important;
    }
}

@media (max-width: 980px) {
    body.analysis-zscore-page .hero,
    body.clip-aesthetic-page > header,
    body.platform-page .topbar {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .workbench-header-metrics,
    body.analysis-zscore-page .hero-metrics {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.analysis-zscore-page .workspace,
    body.clip-aesthetic-page > main > .grid,
    body.platform-page .layout {
        grid-template-columns: 1fr !important;
    }

    body.analysis-zscore-page .control-panel,
    body.platform-page .sidebar,
    body.clip-aesthetic-page > main > .grid > :first-child {
        position: static !important;
    }

    body.analysis-zscore-page .control-panel {
        max-height: none;
        overflow: visible;
        scrollbar-gutter: auto;
    }
}

@media (max-width: 640px) {
    body.analysis-zscore-page .page-shell,
    body.clip-aesthetic-page > header,
    body.clip-aesthetic-page > main,
    body.platform-page .platform {
        width: min(calc(100% - 24px), var(--workbench-width)) !important;
    }

    body.analysis-zscore-page .hero,
    body.clip-aesthetic-page > header,
    body.platform-page .topbar {
        padding: 22px 20px !important;
    }

    body.analysis-zscore-page .hero {
        margin: 12px 0 18px !important;
    }

    body.clip-aesthetic-page > header {
        margin: 12px auto 18px !important;
    }

    body.platform-page .topbar {
        width: 100% !important;
        margin: 12px 0 18px !important;
    }

    .workbench-header-metrics,
    body.analysis-zscore-page .hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.analysis-zscore-page .hero h1,
    body.clip-aesthetic-page > header h1,
    body.platform-page .topbar h1 {
        font-size: 32px !important;
    }
}

/* The landmark analysis page uses a three-column workbench and lets the
   global face artwork remain visible through its quieter surfaces. */
@media (min-width: 1181px) {
    body.analysis-zscore-page .workspace {
        grid-template-columns:
            minmax(220px, 0.62fr)
            minmax(430px, 1.5fr)
            minmax(300px, 0.98fr) !important;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    body.analysis-zscore-page .workspace {
        grid-template-columns:
            minmax(220px, 0.7fr)
            minmax(430px, 1.3fr) !important;
    }

    body.analysis-zscore-page .results-panel {
        grid-column: 1 / -1;
    }
}

body.analysis-zscore-page .hero {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.78) 54%,
            rgba(255, 255, 255, 0.38) 100%
        ),
        radial-gradient(circle at 14% 10%, rgba(14, 139, 127, 0.12), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(222, 103, 77, 0.09), transparent 31%) !important;
}

body.analysis-zscore-page .panel {
    background: rgba(255, 255, 255, 0.72) !important;
}

body.analysis-zscore-page .desktop-metric-selector,
body.analysis-zscore-page .photo-panel {
    background: rgba(255, 255, 255, 0.84) !important;
}

body.analysis-zscore-page .results-panel {
    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.84) 0%,
            rgba(255, 255, 255, 0.70) 60%,
            rgba(255, 255, 255, 0.54) 100%
        ) !important;
}

@media (max-width: 720px) {
    body.analysis-zscore-page .hero {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.93) 0%,
                rgba(255, 255, 255, 0.78) 72%,
                rgba(255, 255, 255, 0.62) 100%
            ),
            radial-gradient(circle at 12% 12%, rgba(14, 139, 127, 0.10), transparent 30%) !important;
    }

    body.analysis-zscore-page .panel,
    body.analysis-zscore-page .photo-panel,
    body.analysis-zscore-page .results-panel {
        background: rgba(255, 255, 255, 0.86) !important;
    }

    body.analysis-zscore-page .results-panel {
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}