/* ==========================================================================
   Scan3D Studio — Design System v3 ("porcelain & graphite")
   Loaded after style.css. Presentation only: element visibility, every id and
   every onclick stay in index.html / app.js.

   Identity: warm porcelain canvas, graphite "stages" for anything that shows a
   3D object (hero, viewer, camera), one ember accent. Dark stages re-declare
   the same tokens, so components inside them adapt without separate rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces (canvas → raised) */
    --s-0: #f3f0ea;
    --s-1: #ebe7df;
    --s-2: #fbfaf7;
    --s-3: #ffffff;
    --s-4: #e1dcd2;

    /* Lines */
    --line-1: rgba(23, 24, 28, 0.08);
    --line-2: rgba(23, 24, 28, 0.14);
    --line-3: rgba(23, 24, 28, 0.28);

    /* Text */
    --t-1: #17181c;
    --t-2: #4d4e55;
    --t-3: #65635d;

    /* Graphite (fixed, used for stages and inverse buttons) */
    --ink-0: #0f1012;
    --ink-1: #17181c;
    --ink-2: #202227;
    --ink-3: #2c2e34;
    --bone: #f3f0ea;

    /* Accent: burgundy */
    --a-1: #a3213f;
    --a-2: #7a1530;
    --a-hi: #bf3a58;
    --a-text: #7d1731;
    --a-soft: rgba(163, 33, 63, 0.09);
    --a-line: rgba(163, 33, 63, 0.40);
    --a-glow: rgba(163, 33, 63, 0.32);
    --grad: linear-gradient(120deg, #d4566f 0%, #a3213f 55%, #7a1530 100%);

    /* Status */
    --ok: #13754f;    --ok-fill: #1b8f61;   --ok-soft: #e0efe6;   --ok-line: rgba(19, 117, 79, 0.30);
    --warn: #875400;  --warn-fill: #e8a317; --warn-soft: #f8ecd0; --warn-line: rgba(160, 104, 0, 0.34);
    --bad: #b8232b;   --bad-fill: #c4262e;  --bad-soft: #f9e4e2;  --bad-line: rgba(184, 35, 43, 0.30);
    --info: #2c5494;  --info-soft: #e4eaf4; --info-line: rgba(44, 84, 148, 0.28);

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Geist", "Segoe UI", Roboto, sans-serif;
    --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Geist Mono", Menlo, monospace;
    --fs-2xs: 0.75rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.5rem;
    --fs-display: clamp(2.75rem, 5.8vw, 4.875rem);

    /* Shape & depth */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;
    --hair: 0 0 0 0 transparent;
    --elev-1: 0 1px 2px rgba(23, 24, 28, 0.05);
    --elev-2: 0 1px 2px rgba(23, 24, 28, 0.04), 0 14px 32px -18px rgba(23, 24, 28, 0.22);
    --elev-3: 0 2px 4px rgba(23, 24, 28, 0.04), 0 32px 70px -32px rgba(23, 24, 28, 0.42);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --d-fast: 140ms;
    --d-base: 220ms;
    --d-slow: 420ms;

    color-scheme: light;
}

/* Graphite stages: same token names, dark values */
.viewer-section, .home-stage, .hp3d-stage, .scan-recorder, .alert-container {
    --s-0: #0f1012;
    --s-1: #151619;
    --s-2: #1b1c20;
    --s-3: #25272c;
    --s-4: #31333a;
    --line-1: rgba(243, 240, 234, 0.08);
    --line-2: rgba(243, 240, 234, 0.14);
    --line-3: rgba(243, 240, 234, 0.28);
    --t-1: #f3f0ea;
    --t-2: #b9b6ad;
    --t-3: #908d85;
    --a-1: #c8405f;
    --a-hi: #e07a90;
    --a-text: #e07a90;
    --a-soft: rgba(200, 64, 95, 0.18);
    --ok: #5fcf98;   --ok-soft: rgba(95, 207, 152, 0.14);  --ok-line: rgba(95, 207, 152, 0.34);
    --warn: #f0b849; --warn-soft: rgba(240, 184, 73, 0.14); --warn-line: rgba(240, 184, 73, 0.34);
    --bad: #ff8379;  --bad-soft: rgba(255, 131, 121, 0.14); --bad-line: rgba(255, 131, 121, 0.36);
    --info: #9bb8ee; --info-soft: rgba(155, 184, 238, 0.14); --info-line: rgba(155, 184, 238, 0.32);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
    --elev-3: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    color: var(--t-1);
    color-scheme: dark;
}

/* Legacy names used by style.css → mapped onto the palette (declared in every scope so they follow it) */
:root, .viewer-section, .home-stage, .hp3d-stage, .scan-recorder, .alert-container {
    --bg-base: var(--s-0);
    --bg-surface: var(--s-2);
    --bg-surface-elevated: var(--s-1);
    --bg-surface-hover: var(--s-4);
    --border-subtle: var(--line-1);
    --border-strong: var(--line-2);
    --border-focus: var(--a-1);
    --text-main: var(--t-1);
    --text-muted: var(--t-2);
    --text-dim: var(--t-3);
    --primary: var(--a-text);
    --primary-hover: var(--a-2);
    --primary-glow: var(--a-glow);
    --accent: var(--a-1);
    --success: var(--ok);
    --success-hover: var(--ok);
    --success-glow: transparent;
    --danger: var(--bad);
    --danger-hover: var(--bad);
    --danger-bg: var(--bad-soft);
    --warning: var(--warn);
    --warning-bg: var(--warn-soft);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --shadow-card: var(--elev-1);
    --shadow-elevated: var(--elev-2);
    --transition: all var(--d-base) var(--ease-out);
    --brand-gradient: var(--grad);
    --card-shadow: var(--elev-1);
    --hairline-top: var(--hair);
}

/* --------------------------------------------------------------------------
   2. Canvas, typography, base elements
   -------------------------------------------------------------------------- */
html {
    background: var(--s-0);
    scrollbar-color: var(--s-4) transparent;
}

html body {
    /* the light pool at the top lives on body::before: a fixed background (background-attachment)
       makes Chrome repaint the whole page on the main thread for every scrolled frame */
    background: var(--s-0);
    color: var(--t-1);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html body::after { content: none; }
html body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(80rem 34rem at 50% -12rem, rgba(255, 255, 255, 0.75), transparent 70%);
}

::selection { background: rgba(163, 33, 63, 0.24); color: var(--ink-1); }

h1, h2, h3, h4 { letter-spacing: -0.022em; color: var(--t-1); font-weight: 700; }

a { color: var(--a-text); }

strong { font-weight: 700; }

kbd {
    font-family: var(--font-mono);
    font-size: 0.72em;
    padding: 0.12em 0.45em;
    border-radius: 5px;
    background: var(--s-3);
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    color: var(--t-1);
}

/* Numbers & identifiers read as instrument readouts */
.stat-value, .metric-value, .bbox-value, .hud-val, .geom-score-number,
.item-job-id, .download-filename, .size-panel-dims,
.url-text, .spec-val, .breakdown-val, .meta-code, .meta-timer, .total-val,
.info-val, .storage-hero-main-stat, .active-job-percent {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

:focus-visible {
    outline: 2px solid var(--a-1);
    outline-offset: 2px;
    border-radius: 6px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s-4); border-radius: 10px; border: 3px solid var(--s-0); }
::-webkit-scrollbar-thumb:hover { background: #cfc9bd; }

.ui-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    vertical-align: -0.16em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* Shared eyebrow / caption style */
.home-eyebrow, .view-nav-step-title, .proc-header-category, .meta-label, .timeline-title,
.analysis-subheading, .history-category, .storage-hero-label, .url-label, .camera-ribbon-label,
.stat-label, .bbox-label, .spec-label, .breakdown-label, .vdeb-label, .hud-label {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-3);
}

/* --------------------------------------------------------------------------
   3. App frame, brand & navigation
   -------------------------------------------------------------------------- */
.app-wrapper {
    max-width: 1240px;
    padding: 0 1.5rem 4rem;
    gap: 1.75rem;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0 -1.5rem;
    padding: 0.8rem 1.5rem;
    border: none;
    border-bottom: 1px solid var(--line-1);
    border-radius: 0;
    background: rgba(243, 240, 234, 0.82);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: none;
}

.brand { gap: 0.6rem; border-radius: var(--r-sm); transition: opacity var(--d-fast) var(--ease); }
.brand:hover { opacity: 0.82; }

.brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: none;
    color: var(--t-1);
    box-shadow: none;
}

/* Logo mark: an "S" drawn as a scan orbit, with the sensor as a dot */
.brand-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-mark path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.brand-mark .bm-a { stroke: currentColor; }
.brand-mark .bm-b { stroke: var(--a-1); }
.brand-mark .bm-dot { fill: var(--a-1); }

.brand-title {
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--t-1);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.brand-title-soft { font-weight: 500; color: var(--t-3); letter-spacing: -0.02em; }
.brand-subtitle { display: none; }

.nav-actions { gap: 0.15rem; }

.nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: color var(--d-fast) var(--ease), background var(--d-base) var(--ease), border-color var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
}

.nav-menu-btn svg, .nav-action-btn svg, .nav-history-btn svg, .nav-connect-btn svg, .nav-storage-btn svg { opacity: 0.6; }

.nav-menu-btn:hover, .nav-action-btn:hover, .nav-history-btn:hover, .nav-connect-btn:hover, .nav-storage-btn:hover {
    color: var(--t-1);
    background: rgba(23, 24, 28, 0.05);
    border-color: transparent;
}

.nav-menu-btn:active, .nav-action-btn:active, .nav-history-btn:active, .nav-connect-btn:active, .nav-storage-btn:active {
    transform: scale(0.97);
}

.nav-menu-btn.active, .nav-action-btn.active, .nav-history-btn.active, .nav-connect-btn.active, .nav-storage-btn.active {
    color: var(--t-1);
    background: var(--s-3);
    border-color: var(--line-2);
    box-shadow: var(--elev-1);
}

.nav-menu-btn.active svg, .nav-action-btn.active svg, .nav-history-btn.active svg,
.nav-connect-btn.active svg, .nav-storage-btn.active svg { color: var(--a-1); opacity: 1; }

.engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.35rem 0.65rem;
    border-radius: var(--r-pill);
    color: var(--t-2);
    background: transparent;
    border: 1px solid var(--line-2);
    box-shadow: none;
}

.engine-badge::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--a-1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.connection-pill {
    border-radius: var(--r-pill);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    color: var(--t-1);
    font-weight: 600;
    font-size: var(--fs-xs);
    box-shadow: var(--elev-1);
    transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}

.connection-pill:hover { border-color: var(--line-3); background: var(--s-3); }
.connection-pill .chevron-icon { color: var(--t-3); }

.status-indicator { background: var(--t-3); }
.status-indicator.connected { background: var(--ok-fill); color: var(--ok-fill); box-shadow: 0 0 0 3px rgba(27, 143, 97, 0.16); }
.status-indicator.disconnected { background: var(--bad-fill); color: var(--bad-fill); box-shadow: 0 0 0 3px rgba(196, 38, 46, 0.14); }

/* Settings drawer */
.settings-drawer {
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-3);
    animation: ui-pop-in var(--d-slow) var(--ease-out);
}

.drawer-header h3 { font-size: var(--fs-md); }
.server-config-form label { color: var(--t-2); font-size: var(--fs-sm); }

/* Scan stepper: a quiet inline trail, no box */
.step-stepper {
    padding: 0.25rem 0 0;
    gap: 0.75rem;
    justify-content: flex-start;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.step-item { color: var(--t-3); font-weight: 600; font-size: var(--fs-sm); transition: color var(--d-slow) var(--ease); }

.step-number {
    background: transparent;
    border: 1px solid var(--line-3);
    color: var(--t-3);
    font-family: var(--font-mono);
    font-weight: 600;
    box-shadow: none;
    transition: all var(--d-slow) var(--ease-out);
}

.step-item.active { color: var(--t-1); }
.step-item.active .step-number {
    background: var(--ink-1);
    border-color: var(--ink-1);
    color: var(--bone);
    box-shadow: none;
}

.step-item.completed, .step-item.done { color: var(--t-2); }
.step-item.completed .step-number, .step-item.done .step-number {
    background: var(--ok-soft);
    border-color: var(--ok-line);
    color: var(--ok);
}

.step-divider { background: var(--line-2); max-width: 3rem; }

/* View header strip */
.view-nav-strip { gap: 0.75rem; }
.view-nav-strip .nav-back-menu-btn { background: transparent; border-color: transparent; box-shadow: none; color: var(--t-2); padding-left: 0.5rem; }
.view-nav-strip .nav-back-menu-btn:hover:not(:disabled) { background: rgba(23, 24, 28, 0.05); border-color: transparent; color: var(--t-1); transform: none; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    isolation: isolate;
    font-family: inherit;
    font-weight: 650;
    letter-spacing: -0.01em;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    text-shadow: none;
    transition: transform var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}

.btn-sm { border-radius: var(--r-sm); font-size: var(--fs-sm); padding: 0.5rem 0.9rem; }
.btn-lg { border-radius: var(--r-md); }
.btn-xl { padding: 0.95rem 1.5rem; font-size: var(--fs-md); border-radius: 14px; gap: 0.7rem; }

.btn:active:not(:disabled) { transform: translateY(0) scale(0.975); }

/* Primary = inverse of the surface it sits on (graphite on porcelain, porcelain on graphite) */
.btn-primary {
    color: var(--s-0);
    background: var(--t-1);
    border-color: var(--t-1);
    box-shadow: var(--elev-1);
}

.btn-primary:hover:not(:disabled) {
    color: var(--s-0);
    background: var(--t-1);
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(23, 24, 28, 0.6);
}

/* Accent = the one ember action per screen */
.btn-accent, .btn-success {
    color: var(--ink-1);
    background: var(--a-1);
    border-color: var(--a-1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 26px -14px var(--a-glow);
}

.btn-accent:hover:not(:disabled), .btn-success:hover:not(:disabled) {
    color: var(--ink-1);
    background: var(--a-hi);
    border-color: var(--a-hi);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 34px -16px var(--a-glow);
}

.btn-accent .ui-icon { transition: transform var(--d-base) var(--ease-out); }
.btn-accent:hover .ui-icon { transform: translateX(3px); }

.btn-secondary, .btn-md.btn-secondary {
    color: var(--t-1);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-1);
}

.btn-secondary:hover:not(:disabled) {
    color: var(--t-1);
    background: var(--s-3);
    border-color: var(--line-3);
    transform: translateY(-1px);
}

.viewer-section .btn-secondary, .alert-container .btn-secondary, .scan-recorder .btn-secondary { background: var(--s-3); }

.btn-danger {
    color: #fff;
    background: var(--bad-fill);
    border-color: var(--bad-fill);
    box-shadow: var(--elev-1);
}

.btn-danger:hover:not(:disabled) { background: #ad1f27; border-color: #ad1f27; transform: translateY(-1px); }

.btn-outline-danger, .btn-storage-delete, .btn-secondary.btn-storage-delete {
    color: var(--bad);
    background: transparent;
    border: 1px solid var(--bad-line);
    box-shadow: none;
}

.btn-outline-danger:hover:not(:disabled), .btn-storage-delete:hover:not(:disabled) {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad);
}

.btn-warning {
    color: var(--ink-1);
    background: var(--warn-fill);
    border-color: var(--warn-fill);
    box-shadow: var(--elev-1);
}

.btn-warning:hover:not(:disabled) { background: #f0b02c; transform: translateY(-1px); }

.btn:disabled, .btn[disabled] { opacity: 0.42; filter: saturate(0.5); cursor: not-allowed; }

.btn-icon {
    border-radius: var(--r-sm);
    color: var(--t-2);
    transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.btn-icon:hover { background: rgba(23, 24, 28, 0.06); color: var(--t-1); }


.btn, .viewer-btn, .menu-card, .cam-preset-btn { overflow: hidden; }
.btn > *, .viewer-btn > *, .menu-card > *, .cam-preset-btn > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. Surfaces, pills, inputs
   -------------------------------------------------------------------------- */
/* Screen-level wrappers are plain canvas: sections are separated by type and space, not boxes */
.processing-card, .completion-card, .error-state-card, .history-card-container {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.pill-badge, .meta-tag, .pill-badge-mini, .badge-neutral, .file-format-badge, .timeline-engine-pill, .history-count-badge, .storage-section-badge, .storage-badge, .qr-badge {
    border-radius: var(--r-pill);
    font-weight: 600;
    letter-spacing: 0;
}

.pill-badge, .meta-tag, .storage-section-badge, .storage-badge, .qr-badge, .timeline-engine-pill, .history-count-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--t-2);
    background: transparent;
    border: 1px solid var(--line-2);
    box-shadow: none;
    text-transform: none;
}

.pill-badge.pill-success, .pill-badge.success, .pill-badge-mini.success { color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); }
.pill-badge.pill-warning, .pill-badge.warning, .pill-badge-mini.warning { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.pill-badge.pill-danger, .pill-badge.danger, .pill-badge-mini.danger { color: var(--bad); background: var(--bad-soft); border: 1px solid var(--bad-line); }
.pill-badge.pill-info, .pill-badge.info { color: var(--info); background: var(--info-soft); border: 1px solid var(--info-line); }
.pill-badge.pill-neutral { color: var(--t-2); }
.pill-badge-mini { font-size: var(--fs-2xs); padding: 0.1rem 0.5rem; }

input[type="text"], input[type="number"], input[type="url"], select, textarea,
.manual-conn-input, .size-panel-input, .size-panel-select {
    font-family: inherit;
    color: var(--t-1);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: none;
    transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease);
}

input::placeholder { color: var(--t-3); opacity: 0.8; }

input[type="text"]:focus, input[type="number"]:focus, input[type="url"]:focus, select:focus, textarea:focus,
.manual-conn-input:focus, .size-panel-input:focus, .size-panel-select:focus {
    outline: none;
    border-color: var(--a-1);
    box-shadow: 0 0 0 4px var(--a-soft);
    background: var(--s-3);
}

input[type="checkbox"] { accent-color: var(--a-1); }

/* --------------------------------------------------------------------------
   6. Notifications → floating graphite toast
   -------------------------------------------------------------------------- */
.alert-container {
    position: fixed;
    z-index: 2000;
    top: 4.75rem;
    left: 50%;
    width: min(520px, calc(100vw - 2rem));
    transform: translateX(-50%);
    animation: none;
    pointer-events: none;
}

.alert-container .alert-box {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 0.85rem 0.9rem 1rem;
    border-radius: var(--r-md);
    color: var(--t-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
    background: var(--ink-1);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-3);
    animation: ui-toast-in 420ms var(--ease-spring) both;
}

.alert-container.is-leaving .alert-box { animation: ui-toast-out 220ms var(--ease) both; }

.alert-container .alert-box::before { content: none; }

.alert-container .alert-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--toast-c, var(--warn));
    background: var(--toast-soft, var(--warn-soft));
    flex-shrink: 0;
}

.alert-container .alert-text { padding-top: 0.15rem; color: var(--t-1); }

.alert-container .alert-dismiss {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--t-3);
    opacity: 1;
    font-size: 0.85rem;
    transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.alert-container .alert-dismiss:hover { background: rgba(243, 240, 234, 0.1); color: var(--t-1); }

.alert-box.toast-success { --toast-c: var(--ok); --toast-soft: var(--ok-soft); }
.alert-box.toast-warning { --toast-c: var(--warn); --toast-soft: var(--warn-soft); }
.alert-box.toast-error, .alert-box.alert-error { --toast-c: var(--bad); --toast-soft: var(--bad-soft); }
.alert-box.toast-info { --toast-c: var(--info); --toast-soft: var(--info-soft); }

.alert-box .toast-timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--toast-c, var(--warn));
    opacity: 0.7;
    transform-origin: left center;
    animation: ui-toast-timer var(--toast-ms, 6000ms) linear forwards;
}

.alert-container:hover .toast-timer { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   7. View transitions & scroll reveal
   -------------------------------------------------------------------------- */
.view-panel { animation: none; }

.view-panel.ui-enter { animation: ui-view-in 420ms var(--ease-out) backwards; }

.view-panel.ui-enter > * { animation: ui-rise-in 520ms var(--ease-out) both; }
.view-panel.ui-enter > *:nth-child(2) { animation-delay: 50ms; }
.view-panel.ui-enter > *:nth-child(3) { animation-delay: 100ms; }
.view-panel.ui-enter > *:nth-child(n+4) { animation-delay: 140ms; }

/* The home screen choreographs its own entrance */
#viewMainMenu.ui-enter > * { animation: none; }

.ui-stagger > * { animation: ui-rise-in 520ms var(--ease-out) both; }
.ui-stagger > *:nth-child(1) { animation-delay: 40ms; }
.ui-stagger > *:nth-child(2) { animation-delay: 90ms; }
.ui-stagger > *:nth-child(3) { animation-delay: 140ms; }
.ui-stagger > *:nth-child(4) { animation-delay: 190ms; }
.ui-stagger > *:nth-child(5) { animation-delay: 240ms; }
.ui-stagger > *:nth-child(n+6) { animation-delay: 280ms; }

/* Scroll reveal: only active once the UI module has confirmed IntersectionObserver works */
.ui-reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.ui-reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   8. Home
   -------------------------------------------------------------------------- */
.menu-container { gap: clamp(2rem, 5vw, 3.5rem); }

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding-top: clamp(0.5rem, 2.5vw, 2rem);
}

.home-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem; min-width: 0; }

.menu-badge-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; max-width: 100%; }

.menu-app-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    color: var(--t-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}

.menu-connection-pill {
    padding: 0.32rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    color: var(--t-1);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.home-headline {
    margin: 0;
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.048em;
    color: var(--t-1);
    text-wrap: balance;
}

.home-headline em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--a-text);
    padding-right: 0.04em;
}

.home-lede {
    margin: 0;
    max-width: 33rem;
    color: var(--t-2);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
}

.home-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }

.home-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 0;
    margin: 0.75rem 0 0;
    padding: 1.1rem 0 0;
    list-style: none;
    border-top: 1px solid var(--line-2);
    width: 100%;
}

.home-facts li { display: flex; flex-direction: column; gap: 0.15rem; padding-right: 1.5rem; margin-right: 1.5rem; border-right: 1px solid var(--line-1); }
.home-facts li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.home-facts strong { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.02em; color: var(--t-1); }
.home-facts span { font-size: var(--fs-xs); color: var(--t-3); }

/* Hero stage: one object, half photographed surface, half reconstructed mesh */
.home-stage {
    position: relative;
    aspect-ratio: 640 / 600;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 50% 28%, #2f3137 0%, #1b1c20 55%, #121316 100%);
    box-shadow: var(--elev-3), inset 0 0 0 1px rgba(243, 240, 234, 0.06);
    perspective: 1100px;
}

.hs-tilt {
    position: absolute;
    inset: 0;
    transform: rotateX(var(--hs-rx, 0deg)) rotateY(var(--hs-ry, 0deg));
    transition: transform 500ms var(--ease-out);
    will-change: transform;
}

.hs-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hs-floor ellipse { stroke: rgba(243, 240, 234, 0.10); stroke-width: 1; }
.hs-orbit ellipse { stroke: rgba(243, 240, 234, 0.30); stroke-dasharray: 3 7; }
.hs-cams circle { fill: rgba(243, 240, 234, 0.45); }
.hs-frustum path { fill: none; stroke: var(--a-1); stroke-width: 1; opacity: 0.55; }
.hs-frustum circle { fill: var(--a-1); }
.hs-mesh-back { stroke: rgba(243, 240, 234, 0.10); stroke-width: 1; }
.hs-mesh-diag { stroke: rgba(243, 240, 234, 0.16); stroke-width: 0.8; }
.hs-mesh-line { stroke: rgba(243, 240, 234, 0.62); stroke-width: 1; }
.hs-dots circle { fill: var(--a-1); }

/* The photographed half is wiped back and forth, uncovering the mesh underneath */
.hs-solid { clip-path: inset(0 50% 0 0); animation: hs-wipe 9s var(--ease) infinite alternate; }

.hs-scanline {
    position: absolute;
    top: 20%;
    bottom: 14%;
    left: 50%;
    width: 1.5px;
    margin-left: -0.75px;
    background: linear-gradient(180deg, transparent, var(--a-1) 18%, var(--a-1) 82%, transparent);
    box-shadow: 0 0 18px 1px rgba(163, 33, 63, 0.55);
    animation: hs-line 9s var(--ease) infinite alternate;
}

@keyframes hs-wipe { from { clip-path: inset(0 61% 0 0); } to { clip-path: inset(0 37% 0 0); } }
@keyframes hs-line { from { left: 39%; } to { left: 63%; } }

.hs-tag {
    position: absolute;
    bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-2);
    padding: 0.3rem 0.65rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: rgba(15, 16, 18, 0.5);
}

.hs-tag-a { left: 1.1rem; }
.hs-tag-b { right: 1.1rem; }
.hs-tag-b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.45rem; border-radius: 50%; background: var(--a-1); vertical-align: 0.05em; }

/* Home entrance */
#viewMainMenu.ui-enter .home-hero-copy > * { animation: ui-rise-in 700ms var(--ease-out) both; }
#viewMainMenu.ui-enter .home-hero-copy > *:nth-child(2) { animation-delay: 70ms; }
#viewMainMenu.ui-enter .home-hero-copy > *:nth-child(3) { animation-delay: 140ms; }
#viewMainMenu.ui-enter .home-hero-copy > *:nth-child(4) { animation-delay: 210ms; }
#viewMainMenu.ui-enter .home-hero-copy > *:nth-child(5) { animation-delay: 280ms; }
#viewMainMenu.ui-enter .home-stage { animation: hs-stage-in 900ms var(--ease-out) 80ms both; }
@keyframes hs-stage-in { from { opacity: 0; transform: translateY(18px) scale(0.975); } to { opacity: 1; transform: none; } }

/* Secondary destinations: slim rows, not feature cards */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }

.menu-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
    transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease);
}

.menu-card::before, .menu-card::after { content: none; }

.menu-card:hover {
    transform: translateY(-2px);
    background: var(--s-3);
    border-color: var(--line-2);
    box-shadow: var(--elev-2);
}

.menu-card:active { transform: translateY(0) scale(0.99); }

.menu-grid .menu-card-icon-box[class] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--t-1);
    background: var(--s-1);
    border: none;
    box-shadow: none;
    transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.menu-grid .menu-card:hover .menu-card-icon-box[class] { background: var(--ink-1); color: var(--bone); transform: none; }

.menu-card-content { min-width: 0; flex: 1; }
.menu-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.menu-card-title { font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.015em; color: var(--t-1); }
.menu-card-desc { margin-top: 0.1rem; color: var(--t-2); font-size: var(--fs-sm); line-height: 1.45; }

.menu-card-arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--t-3);
    transition: transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease);
}

.menu-card:hover .menu-card-arrow { transform: translate(2px, -2px); color: var(--a-1); border: none; background: none; }

.menu-card-pill {
    border-radius: var(--r-pill);
    padding: 0.12rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--t-2);
    background: var(--s-1);
    border: 1px solid var(--line-1);
}

/* How it works */
.home-process { display: flex; flex-direction: column; gap: 1.75rem; padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line-2); }

.home-section-head { display: flex; flex-direction: column; gap: 0.6rem; max-width: 40rem; }

.home-section-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; }

.process-step { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.process-figure {
    display: grid;
    place-items: center;
    margin-bottom: 0.85rem;
    padding: 1.25rem;
    border-radius: var(--r-xl);
    background: var(--s-1);
    color: var(--t-1);
    transition: background var(--d-slow) var(--ease), transform var(--d-slow) var(--ease-out);
}

.process-step:hover .process-figure { background: var(--s-4); transform: translateY(-3px); }

.process-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--a-text); }
.process-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.025em; }
.process-desc { margin: 0; color: var(--t-2); font-size: var(--fs-base); line-height: 1.55; max-width: 24rem; }

/* Line illustrations (inline SVG, drawn from the same object as the hero) */
.ill { display: block; width: 100%; max-width: 260px; height: auto; color: inherit; overflow: visible; }
.ill-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ill-thin { stroke-width: 1; }
.ill-layers { stroke-width: 2; }
.ill-dash { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 5; opacity: 0.45; }
.ill-fill { fill: currentColor; opacity: 0.07; }
.ill-accent { fill: var(--a-1); }
.ill-accent-line { fill: none; stroke: var(--a-1); stroke-width: 1.2; opacity: 0.85; }
.ill-phone { fill: var(--ink-1); }
.ill-frame { fill: var(--s-2); stroke: currentColor; stroke-width: 1.6; }
.ill-text { font: 600 10px var(--font-mono); fill: currentColor; }

.menu-browser-card, .mobile-browser-card {
    padding: 1.1rem 0 0;
    border: none;
    border-top: 1px solid var(--line-1);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.browser-icon, .mobile-browser-icon { color: var(--t-3); font-size: 1.15rem; }
.browser-title { font-size: var(--fs-sm); font-weight: 700; color: var(--t-1); }
.browser-desc, .mobile-browser-text p { color: var(--t-3); font-size: var(--fs-sm); }
.browser-desc strong, .mobile-browser-text strong { color: var(--t-1); }

/* Active background job card */
.menu-active-job-card {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.25rem 1.15rem 1.5rem;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-2);
}

.menu-active-job-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--a-1); }

.active-job-title { font-weight: 700; letter-spacing: -0.015em; color: var(--t-1); }
.active-job-notice { color: var(--t-2); font-size: var(--fs-sm); }
.active-job-percent { color: var(--t-1); font-weight: 600; }

.active-job-pulse-dot { color: var(--a-1); animation: ui-pulse-ring 1.8s var(--ease) infinite; }

.active-job-stage-badge {
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    background: var(--a-soft);
    color: var(--a-text);
    border: 1px solid var(--a-line);
}

.active-job-bar-container, .progress-track, .scan-rec-progress {
    position: relative;
    overflow: hidden;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line-2);
    border: none;
    box-shadow: none;
}

.active-job-bar-fill, .progress-fill, .scan-rec-progress-fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: inherit;
    background: var(--a-1);
    box-shadow: none;
    transition: width 700ms var(--ease-out);
}

.active-job-bar-fill::after, .progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: ui-shimmer 2.2s linear infinite;
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   9. New scan (video upload)
   -------------------------------------------------------------------------- */
.upload-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; }

.drop-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3rem) 1.5rem;
    border-radius: var(--r-xl);
    background: var(--s-2);
    border: 1.5px dashed var(--line-3);
    box-shadow: none;
    transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease);
}

.drop-card::before, .drop-card::after { content: none; }

.drop-card:hover { border-color: var(--t-1); background: var(--s-3); transform: none; box-shadow: none; }

.drop-card.drag-over, .drop-card.dragover {
    border-style: solid;
    border-color: var(--a-1);
    background: #fff4ee;
    transform: scale(1.005);
    box-shadow: 0 0 0 5px var(--a-soft);
}

.drop-illustration { width: min(250px, 70%); margin: 0 auto 0.75rem; color: var(--t-1); }
.drop-card.dragover .drop-illustration, .drop-card.drag-over .drop-illustration { color: var(--a-text); }

.drop-heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.035em; color: var(--t-1); }
.drop-subtext { color: var(--t-2); max-width: 30rem; }

.drop-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.7rem;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.btn-video-camera-action, .btn-video-hero-action {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    text-align: left;
}

.btn-action-col { display: flex; flex-direction: column; min-width: 0; }

.btn-action-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 1.1rem;
    background: rgba(243, 240, 234, 0.14);
    box-shadow: none;
}

.btn-video-hero-action .btn-action-icon { background: var(--s-1); color: var(--t-1); }

.btn-action-title { font-size: var(--fs-base); font-weight: 700; color: inherit; }
.btn-action-sub { font-weight: 500; opacity: 0.72; font-size: var(--fs-xs); color: inherit; white-space: normal; line-height: 1.3; }

.scan-tips { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); background: var(--s-1); }
.scan-tips-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.025em; }
.scan-tips-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.scan-tips-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.scan-tips-list strong { display: block; font-size: var(--fs-base); color: var(--t-1); }
.scan-tips-list p { margin: 0.15rem 0 0; color: var(--t-2); font-size: var(--fs-sm); line-height: 1.5; }
.tip-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--a-text); padding-top: 0.2rem; }
.scan-tips-foot { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--t-3); letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   10. In-app scan recorder (camera) — overlays only, the live video is untouched
   -------------------------------------------------------------------------- */
.scan-recorder-top, .scan-recorder-bottom { z-index: 2; }

.scan-recorder-top { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); }
.scan-recorder-bottom { background: linear-gradient(0deg, rgba(15, 16, 18, 0.88) 30%, rgba(15, 16, 18, 0)); }

.scan-rec-pill, .scan-rec-icon-btn {
    background: rgba(15, 16, 18, 0.55);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(243, 240, 234, 0.14);
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.scan-rec-icon-btn { transition: transform var(--d-fast) var(--ease), background var(--d-base) var(--ease); }
.scan-rec-icon-btn:active { transform: scale(0.92); }

.scan-rec-time { font-family: var(--font-mono); }

.scan-rec-record.recording ~ * , .scan-rec-dot { transition: background var(--d-base) var(--ease); }

.scan-recorder-reticle {
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 28%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.12);
    animation: ui-reticle 3.4s var(--ease) infinite;
}

@keyframes ui-reticle { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; } 50% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; } }

.scan-rec-record {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
    transition: transform var(--d-fast) var(--ease);
}

.scan-rec-record:active:not(:disabled) { transform: scale(0.94); }

.scan-rec-record > span {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #f0453a;
    transition: inset var(--d-slow) var(--ease-spring), border-radius var(--d-slow) var(--ease-spring);
}

.scan-rec-record.recording > span { inset: 21px; border-radius: 9px; }
.scan-rec-record.recording { box-shadow: 0 0 0 6px rgba(240, 69, 58, 0.24), 0 10px 30px -8px rgba(0, 0, 0, 0.7); }

.scan-rec-finish {
    border-radius: var(--r-md);
    font-weight: 700;
    background: var(--a-1);
    color: var(--ink-1);
    border: none;
    box-shadow: 0 12px 30px -10px var(--a-glow);
    transition: transform var(--d-fast) var(--ease), opacity var(--d-base) var(--ease), filter var(--d-base) var(--ease);
}

.scan-rec-finish:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); box-shadow: none; }
.scan-rec-finish:active:not(:disabled) { transform: scale(0.97); }

.scan-rec-status { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.scan-rec-res { font-family: var(--font-mono); color: rgba(255, 255, 255, 0.65); }

/* --------------------------------------------------------------------------
   11. Processing screen
   -------------------------------------------------------------------------- */
.processing-card { gap: 1.5rem; max-width: 960px; margin: 0 auto; }

.processing-card-header { width: 100%; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-2); }

.proc-header-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bone);
    background: var(--ink-1);
    border: none;
    font-size: 1.15rem;
}

.proc-header-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.035em; text-transform: none; color: var(--t-1); }

.live-status-pill {
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ok);
    background: var(--ok-soft);
    border: 1px solid var(--ok-line);
}

.live-dot { color: var(--ok-fill); background: var(--ok-fill); animation: ui-pulse-ring 1.6s var(--ease) infinite; }

.proc-centerpiece { gap: 0.5rem; padding-top: 0.75rem; }

/* Circular dial: real backend progress drives the ring (--p set by the UI module) */
.proc-dial {
    --p: 0;
    position: relative;
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--s-2);
    box-shadow: var(--elev-2), inset 0 0 0 1px var(--line-1);
}

.proc-dial .orb-outer-glow {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed var(--line-3);
    background: none;
    filter: none;
    opacity: 0.7;
    animation: ui-spin 50s linear infinite;
}

.proc-ring {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    transform: rotate(-90deg);
    overflow: visible;
}

.proc-ring circle { fill: none; }
.proc-ring-track { stroke: var(--line-2); stroke-width: 6; }
.proc-ring-ticks { display: none; }

.proc-ring-fill {
    stroke: url(#procRingGradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p));
    filter: none;
    transition: stroke-dashoffset 900ms var(--ease-out);
}

/* Legacy decorative cube: superseded by the dial itself */
.proc-scan-stage, .hero-visual, .scan-stage { display: none; }

.proc-dial .progress-number-display {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    line-height: 1;
}

.proc-dial .progress-big-number {
    font-family: var(--font-sans);
    font-size: 4.25rem;
    font-weight: 700;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--t-1);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

.proc-dial .progress-percent-symbol {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--a-text);
}

.processing-stage-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.035em; color: var(--t-1); transition: opacity var(--d-base) var(--ease); }
.processing-subtext { color: var(--t-2); font-size: var(--fs-md); }

.stage-detailed-hint {
    max-width: 34rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--t-3);
    font-size: var(--fs-sm);
}

.ui-text-swap { animation: ui-text-swap 420ms var(--ease-out); }
@keyframes ui-text-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.proc-centerpiece .progress-track { width: min(420px, 100%); height: 4px; margin-top: 0.9rem; }

/* Meta row: a ruled strip instead of a box */
.processing-meta-row {
    max-width: none;
    padding: 1rem 0;
    gap: 1rem 2.5rem;
    border: none;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.meta-val { font-weight: 600; color: var(--t-1); }
.meta-code { color: var(--t-1); font-size: var(--fs-sm); background: none; }
.meta-timer { color: var(--t-1); }

.meta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--a-text) !important;
    text-decoration: none;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--a-line);
    cursor: pointer;
}

.meta-link:hover { color: var(--a-2) !important; border-bottom-color: var(--a-1); }

.btn-copy-id, .btn-copy-id-mini {
    border-radius: 7px;
    border: 1px solid var(--line-2);
    background: var(--s-3);
    color: var(--t-2);
    transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}

.btn-copy-id:hover, .btn-copy-id-mini:hover { color: var(--t-1); border-color: var(--line-3); background: var(--s-3); }
.btn-copy-id.copied { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }

/* Video diagnostics */
.video-debug-card {
    width: 100%;
    margin: 0;
    padding: 1.1rem 1.25rem;
    text-align: left;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
}

.vdeb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.vdeb-title { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: var(--fs-sm); color: var(--t-1); }
.vdeb-title .ui-icon { color: var(--a-1); }
.vdeb-method { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; color: var(--t-2); background: transparent; border: 1px solid var(--line-2); padding: 0.15rem 0.55rem; border-radius: var(--r-pill); }
.vdeb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem 1rem; font-size: var(--fs-sm); color: var(--t-1); }
.vdeb-grid > div { display: flex; flex-direction: column; gap: 0.15rem; }
.vdeb-grid strong { font-family: var(--font-mono); font-weight: 600; }
.vdeb-sub { color: var(--t-3); font-size: var(--fs-xs); }
.vdeb-foot { grid-column: 1 / -1; flex-direction: row !important; flex-wrap: wrap; gap: 0.3rem !important; padding-top: 0.7rem; border-top: 1px solid var(--line-1); color: var(--t-3); font-size: var(--fs-xs); }
.vdeb-ok { color: var(--ok); }
.vdeb-bad { color: var(--bad); }
.vdeb-warn { color: var(--warn); }

/* Stage timeline: five columns side by side on wide screens, a vertical list on phones */
.stage-timeline-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

.stage-timeline-container > .timeline-heading-row { grid-column: 1 / -1; border: none; padding-bottom: 0; margin-bottom: 1rem; }

.stage-timeline-container .timeline-step { flex-direction: column; gap: 0.65rem; }
.stage-timeline-container .step-marker-col { flex-direction: row; width: 100%; }
.stage-timeline-container .step-connector { flex: 1; height: 1.5px; width: auto; margin: 0 0.35rem; }

.timeline-step { position: relative; gap: 0.9rem; background: none; border: none; }

.step-marker-col { position: relative; align-items: center; }

.step-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0 !important;
    color: transparent;
    background: var(--s-2);
    border: 1.5px solid var(--line-3);
    box-shadow: none;
    transition: background var(--d-slow) var(--ease), border-color var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}

.step-marker::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-3);
    opacity: 0.5;
}

.timeline-step.active .step-marker {
    background: var(--s-3);
    border-color: transparent;
    box-shadow: 0 0 0 4px var(--a-soft);
}

.timeline-step.active .step-marker::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    border: 2px solid var(--line-2);
    border-top-color: var(--a-1);
    animation: ui-spin 1s linear infinite;
}

.timeline-step.active .step-marker::after { background: var(--a-1); opacity: 1; }

.timeline-step.done .step-marker { background: var(--ink-1); border-color: var(--ink-1); }
.timeline-step.done .step-marker::after {
    width: 12px;
    height: 12px;
    border-radius: 0;
    opacity: 1;
    background: var(--bone);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: ui-pop 380ms var(--ease-spring);
}

.timeline-step.error .step-marker { background: var(--bad-soft); border-color: var(--bad-line); }
.timeline-step.error .step-marker::after {
    width: 11px;
    height: 11px;
    border-radius: 0;
    opacity: 1;
    background: var(--bad);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes ui-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.step-connector { background: var(--line-2); width: 1.5px; border-radius: 2px; transition: background var(--d-slow) var(--ease); }
.timeline-step.done .step-connector { background: var(--ink-1); }

.step-content { gap: 0.1rem; }
.step-code { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--t-3); letter-spacing: 0.04em; }
.step-title { font-weight: 700; color: var(--t-3); transition: color var(--d-slow) var(--ease); }
.step-desc { font-size: var(--fs-xs); color: var(--t-3); }
.timeline-step.active .step-title { color: var(--t-1); }
.timeline-step.active .step-desc { color: var(--a-text); }
.timeline-step.done .step-title { color: var(--t-1); }
.timeline-step.done .step-desc { color: var(--t-2); opacity: 1; }
.timeline-step.error .step-desc { color: var(--bad); }

/* Cancel */
.cancel-confirm-box {
    border-radius: var(--r-md);
    background: var(--bad-soft);
    border: 1px solid var(--bad-line);
    animation: ui-pop-in var(--d-slow) var(--ease-out);
}

.cancel-confirm-text { color: var(--bad); font-weight: 600; font-size: var(--fs-sm); }

/* Connection loss banner */
.connection-loss-banner {
    width: 100%;
    border-radius: var(--r-md);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
    animation: ui-pop-in var(--d-slow) var(--ease-out);
}

.conn-loss-icon { color: var(--warn); }
.conn-loss-title { color: var(--t-1); font-weight: 700; }
.conn-loss-detail { color: var(--t-2); }

/* --------------------------------------------------------------------------
   12. Result screen
   -------------------------------------------------------------------------- */
.completion-card { display: flex; flex-direction: column; gap: 1.25rem; text-align: left; align-items: stretch; }

.completion-card > * { width: 100%; max-width: none; align-self: stretch; }
.completion-card > .view-nav-strip { order: 0; }
.completion-card > .success-header { order: 1; }
.completion-card > .viewer-section { order: 2; }
.completion-card > .primary-download-box { order: 3; }
.completion-card > .secondary-downloads-row { order: 4; }
.completion-card > .download-feedback { order: 5; }
.completion-card > .analysis-card { order: 6; }
.completion-card > .restart-row { order: 7; }

.success-header { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; padding: 0; text-align: left; }

.success-icon-badge {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0;
    background: var(--ok-fill);
    box-shadow: 0 0 0 6px var(--ok-soft);
    animation: ui-pop 520ms var(--ease-spring) both;
}

.success-icon-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    clip-path: inset(0 100% 0 0);
    animation: ui-draw-check 520ms var(--ease-out) 280ms forwards;
}

@keyframes ui-draw-check { to { clip-path: inset(0 0 0 0); } }

.completion-title { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; color: var(--t-1); }
.completion-subtext { flex-basis: 100%; margin: 0; color: var(--t-2); }

/* --------------------------------------------------------------------------
   13. 3D viewer (graphite stage)
   -------------------------------------------------------------------------- */
.viewer-section {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--s-1);
    border: none;
    box-shadow: 0 2px 4px rgba(23, 24, 28, 0.06), 0 40px 80px -40px rgba(23, 24, 28, 0.55);
}

.viewer-toolbar {
    gap: 0.6rem 1rem;
    padding: 0.7rem 0.8rem;
    background: var(--s-1);
    border-bottom: 1px solid var(--line-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.viewer-title-badge { font-weight: 700; font-size: var(--fs-sm); color: var(--t-1); gap: 0.5rem; background: none; border: none; }

.viewer-badge-dot { background: var(--a-1); color: var(--a-1); animation: ui-pulse-ring 2.4s var(--ease) infinite; }

.viewer-meta-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--t-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}

.viewer-controls-group {
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: var(--r-md);
    background: var(--s-0);
    border: 1px solid var(--line-1);
    flex-wrap: wrap;
}

.viewer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 34px;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-2);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}

.viewer-btn svg { width: 15px; height: 15px; }
.viewer-btn:hover { color: var(--t-1); background: rgba(243, 240, 234, 0.07); border-color: transparent; }
.viewer-btn:active { transform: scale(0.95); }

.viewer-btn.active { color: var(--t-1); background: rgba(243, 240, 234, 0.10); border-color: var(--line-2); }
.viewer-btn.active svg { color: var(--a-1); }

/* Visual grouping: camera | display | fullscreen */
#btnToggleRotate, #btnToggleFullscreen { margin-left: 0.55rem; }
#btnToggleRotate::before, #btnToggleFullscreen::before {
    content: "";
    position: absolute;
    left: -0.38rem;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: var(--line-2);
}

.viewer-camera-ribbon {
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: var(--s-1);
    border-bottom: 1px solid var(--line-1);
}

.camera-ribbon-btns {
    display: inline-flex;
    gap: 0.1rem;
    padding: 0.2rem;
    border-radius: var(--r-pill);
    background: var(--s-0);
    border: 1px solid var(--line-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.camera-ribbon-btns::-webkit-scrollbar { display: none; }

.cam-preset-btn {
    position: relative;
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    color: var(--t-2);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--d-fast) var(--ease), background var(--d-base) var(--ease);
}

.cam-preset-btn:hover { color: var(--t-1); background: none; }

.cam-preset-btn.active { color: var(--ink-1); background: var(--bone); box-shadow: none; }

/* Studio backdrop behind the transparent WebGL canvas */
.viewer-canvas-wrapper {
    position: relative;
    background: radial-gradient(120% 90% at 50% 14%, #45464c 0%, #25262b 42%, #101113 100%);
}

.viewer-canvas-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(130% 110% at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.45) 100%);
}

.viewer-canvas-container canvas { display: block; outline: none; }

/* HUD */
.viewer-hud-overlay {
    z-index: 3;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-md);
    background: rgba(15, 16, 18, 0.62);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--line-2);
    box-shadow: none;
    animation: ui-pop-in var(--d-slow) var(--ease-out);
}

.viewer-hud-overlay .hud-label { letter-spacing: 0.04em; }
.hud-val { color: var(--t-1); font-size: var(--fs-xs); }

.viewer-hint-bar {
    z-index: 3;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-pill);
    background: rgba(15, 16, 18, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line-1);
    color: var(--t-3);
    font-size: var(--fs-2xs);
}

/* Loading: orbit spinner + real download progress */
.viewer-loading-overlay {
    z-index: 4;
    gap: 1rem;
    background: radial-gradient(circle at 50% 45%, rgba(37, 38, 43, 0.9), rgba(15, 16, 18, 0.96));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ui-fade var(--d-base) var(--ease);
}

.viewer-spinner {
    position: relative;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 30%, var(--a-1) 75%, transparent 76%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: ui-spin 0.9s linear infinite;
}

.viewer-loading-title { font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-md); color: var(--t-1); text-transform: none; }
.viewer-loading-subtext { color: var(--t-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.viewer-load-bar {
    width: 200px;
    height: 3px;
    margin: 0.7rem auto 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--line-2);
}

.viewer-load-bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--a-1);
    transition: width 240ms var(--ease);
}

.viewer-load-bar.indeterminate .viewer-load-bar-fill { animation: ui-indeterminate 1.3s var(--ease) infinite; }
@keyframes ui-indeterminate { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.viewer-error-overlay {
    z-index: 4;
    gap: 0.6rem;
    background: radial-gradient(circle at 50% 45%, rgba(48, 26, 26, 0.85), rgba(15, 16, 18, 0.96));
}

.viewer-error-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: var(--bad);
    background: var(--bad-soft);
    border: 1px solid var(--bad-line);
    font-size: 1.35rem;
}

.viewer-error-title { font-weight: 700; font-size: var(--fs-md); color: var(--t-1); }
.viewer-error-text { color: var(--t-2); font-size: var(--fs-sm); }

/* Real-size panel */
.viewer-size-panel {
    gap: 0.75rem 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--s-1);
    border-top: 1px solid var(--line-1);
}

.size-panel-title { font-weight: 700; font-size: var(--fs-sm); color: var(--t-1); }
.size-panel-dims { color: var(--t-1); font-size: var(--fs-sm); }
.size-panel-unit { color: var(--t-3); }

.size-panel-source {
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 0.18rem 0.6rem;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
}

.size-panel-source.is-measured { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }

.size-panel-input, .size-panel-select { height: 38px; padding: 0 0.7rem; }
.viewer-section .size-panel-input, .viewer-section .size-panel-select { background: var(--s-0); }
.viewer-section .size-panel-input:focus, .viewer-section .size-panel-select:focus { background: var(--s-0); }
.size-panel-hint { color: var(--t-3); font-size: var(--fs-xs); }

.viewer-section #btnApplyRealSize { color: var(--ink-1); background: var(--bone); border-color: var(--bone); }

/* Fullscreen viewer */
.viewer-section:fullscreen, .viewer-section.viewer-fullscreen-fallback { border-radius: 0; border: none; }

/* --------------------------------------------------------------------------
   14. Downloads
   -------------------------------------------------------------------------- */
.primary-download-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    width: 100%;
    max-width: none;
    padding: 1.15rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-2);
}

.download-info { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }

.file-format-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.6rem;
    color: var(--bone);
    background: var(--ink-1);
    border: none;
}

.download-filename { color: var(--t-1); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.download-filesize { color: var(--t-3); font-size: var(--fs-sm); font-family: var(--font-mono); }

.btn-download-pulse { animation: none; }
.btn-download-pulse::after { display: none; }

.secondary-downloads-row { justify-content: flex-start; gap: 0.6rem; margin-top: -0.35rem; }
.secondary-downloads-row .btn { flex: 1; justify-content: center; }
.secondary-downloads-row .btn small { color: var(--t-3); font-family: var(--font-mono); font-weight: 500; }

.download-feedback {
    border-radius: var(--r-md);
    background: var(--ok-soft);
    border: 1px solid var(--ok-line);
    color: var(--ok);
    font-size: var(--fs-sm);
    animation: ui-pop-in var(--d-slow) var(--ease-out);
}

.restart-row { gap: 0.6rem; flex-wrap: wrap; justify-content: flex-start; padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.restart-row .btn-lg { padding: 0.7rem 1.1rem; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. Analysis report: ruled sections, not nested boxes
   -------------------------------------------------------------------------- */
.analysis-card {
    gap: 0;
    padding: 0;
    margin-top: 1.25rem;
    border: none;
    border-top: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.analysis-header { padding: 1.5rem 0 1.25rem; border-bottom: none; gap: 0.75rem 1rem; flex-wrap: wrap; }
.analysis-icon { display: none; }
.analysis-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.035em; color: var(--t-1); }

.analysis-overall-badge {
    max-width: 100%;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: normal;
    text-align: left;
}

.analysis-overall-badge.badge-success { color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); }
.analysis-overall-badge.badge-info { color: var(--info); background: var(--info-soft); border: 1px solid var(--info-line); }
.analysis-overall-badge.badge-warning { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.analysis-overall-badge.badge-danger { color: var(--bad); background: var(--bad-soft); border: 1px solid var(--bad-line); }
.analysis-overall-badge.badge-neutral { color: var(--t-2); background: transparent; border: 1px solid var(--line-2); }
.analysis-overall-badge .status-indicator-dot { background: currentColor; }

.analysis-block { padding: 1.4rem 0; border-top: 1px solid var(--line-1); }

.geom-score-banner {
    padding: 0;
    margin-bottom: 1.25rem;
    border: none;
    border-radius: 0;
    background: none;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
}

.geom-score-number {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 6vw, 4.25rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 0.9;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--t-1);
    -webkit-text-fill-color: currentColor;
}

.geom-score-max { color: var(--t-3); font-family: var(--font-mono); }
.geom-score-desc { color: var(--t-2); font-size: var(--fs-sm); }

/* Stats read as a ruled table row */
.analysis-stats-grid, .bbox-cards-grid { gap: 0; }

.stat-card, .bbox-card {
    padding: 0.2rem 1.25rem 0.2rem 0;
    margin-right: 1.25rem;
    border: none;
    border-right: 1px solid var(--line-1);
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 0.35rem;
    transition: none;
}

.stat-card:last-child, .bbox-card:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.stat-card:hover, .bbox-card:hover { border-color: var(--line-1); transform: none; background: none; }

.stat-value { font-size: var(--fs-lg); font-weight: 600; color: var(--t-1); overflow-wrap: anywhere; }
.bbox-value { font-size: var(--fs-xl); font-weight: 600; color: var(--t-1); }
.bbox-card:nth-child(1) .bbox-label { color: #b8232b; }
.bbox-card:nth-child(2) .bbox-label { color: #13754f; }
.bbox-card:nth-child(3) .bbox-label { color: #2c5494; }

.surface-card {
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
}

.surface-card-title { font-weight: 700; font-size: var(--fs-base); color: var(--t-1); }
.surface-card-desc { color: var(--t-2); font-size: var(--fs-sm); }
.surface-card-note { padding: 0.75rem 0 0; border: none; border-top: 1px solid var(--line-1); border-radius: 0; background: none; color: var(--t-3); font-size: var(--fs-xs); }

.quality-checklist { gap: 0; padding: 0; border: none; background: none; }

.check-item {
    padding: 0.8rem 0;
    border: none;
    border-bottom: 1px solid var(--line-1);
    border-radius: 0;
    background: none;
}

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

.check-badge {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--t-2);
    background: var(--s-1);
    border: 1px solid var(--line-2);
}

.check-item.check-pass .check-badge { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.check-item.check-warn .check-badge, .check-item.check-warning .check-badge { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.check-item.check-fail .check-badge { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.check-title { font-weight: 700; font-size: var(--fs-sm); color: var(--t-1); }
.check-meta { color: var(--t-3); font-size: var(--fs-xs); }

.hallucination-warning-box {
    border-radius: var(--r-md);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
    color: var(--warn);
}

.hallucination-icon { color: var(--warn); }

/* Wide screens: the model on the left, the result summary and downloads beside it */
@media (min-width: 1100px) {
    .completion-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto auto auto auto auto 1fr auto;
        column-gap: 1.75rem;
        row-gap: 1rem;
        align-items: start;
    }

    .completion-card > .view-nav-strip { grid-column: 1 / -1; grid-row: 1; }
    .completion-card > .viewer-section { grid-column: 1; grid-row: 2 / span 5; }
    .completion-card > .success-header { grid-column: 2; grid-row: 2; padding-top: 0.5rem; }
    .completion-card > .primary-download-box { grid-column: 2; grid-row: 3; flex-direction: column; align-items: stretch; margin-top: 0.5rem; }
    .completion-card > .primary-download-box .btn { width: 100%; justify-content: center; }
    .completion-card > .secondary-downloads-row { grid-column: 2; grid-row: 4; margin-top: 0; }
    .completion-card > .download-feedback { grid-column: 2; grid-row: 5; }
    .completion-card > .analysis-card { grid-column: 1 / -1; grid-row: 7; }
    .completion-card > .restart-row { grid-column: 2; grid-row: 6; align-self: end; flex-direction: column; align-items: stretch; gap: 0; padding-top: 0.5rem; }
    .completion-card > .restart-row .btn { justify-content: flex-start; padding: 0.8rem 0.25rem; border: none; border-bottom: 1px solid var(--line-1); border-radius: 0; background: none; box-shadow: none; color: var(--t-2); }
    .completion-card > .restart-row .btn:last-child { border-bottom: none; }
    .completion-card > .restart-row .btn:hover:not(:disabled) { color: var(--t-1); background: none; transform: translateX(3px); }
    .viewer-canvas-wrapper { height: clamp(460px, 62vh, 680px); }
}

@media (min-width: 921px) and (max-width: 1099px) {
    .viewer-canvas-wrapper { height: clamp(440px, 60vh, 640px); }
}

/* Icon-only toolbar: every button keeps its title tooltip and aria-label */
.viewer-btn > span { display: none; }
.viewer-btn #shadingModeLabel { display: inline; }
.viewer-btn { padding: 0 0.6rem; min-width: 36px; }

@media (max-width: 600px) {
    .viewer-toolbar { flex-direction: column; align-items: stretch; }
    .viewer-controls-group { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; }
    .viewer-btn { height: 40px; padding: 0 0.3rem; min-width: 0; }
    .viewer-btn #shadingModeLabel { display: none; }
    #btnToggleRotate, #btnToggleFullscreen { margin-left: 0; }
    #btnToggleRotate::before, #btnToggleFullscreen::before { content: none; }
    .viewer-camera-ribbon { padding: 0.45rem 0.6rem; }
    .camera-ribbon-label { display: none; }
    .camera-ribbon-btns { width: 100%; justify-content: space-between; }
    .cam-preset-btn { padding: 0.35rem 0.55rem; }
    .viewer-hint-bar { display: none; }
    .viewer-hud-overlay { padding: 0.4rem 0.55rem; gap: 0; max-width: 62%; }
    .viewer-hud-overlay .hud-label, .viewer-hud-overlay .hud-val { font-size: 0.62rem; }
    .viewer-canvas-wrapper { height: min(62vh, 440px); }
    .viewer-section { border-radius: var(--r-lg); }
    .primary-download-box { flex-direction: column; align-items: stretch; }
    .primary-download-box .btn { width: 100%; justify-content: center; }
    .secondary-downloads-row { margin-top: 0; }
    .restart-row .btn-lg { flex: 1 1 100%; justify-content: center; }
    .stat-card, .bbox-card { border-right: none; margin-right: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--line-1); }
    .analysis-stats-grid .stat-card:nth-last-child(-n+2), .bbox-card:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   16. History
   -------------------------------------------------------------------------- */
.history-header { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); }

.history-icon-box { display: none; }

.history-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; text-transform: none; color: var(--t-1); }
.history-subtitle { color: var(--t-2); font-size: var(--fs-base); }

.history-grid { gap: 1rem; padding-top: 1.5rem; }

.history-grid > * {
    position: relative;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
    transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease);
}

.history-grid > *:hover { transform: translateY(-2px); background: var(--s-3); border-color: var(--line-2); box-shadow: var(--elev-2); }

.item-thumb-badge {
    border-radius: 12px;
    color: var(--bone);
    background: var(--ink-1);
    border: none;
    box-shadow: none;
}

.item-job-id { font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); background: none; }
.item-date { color: var(--t-3); font-size: var(--fs-xs); }

.item-status-pill, .storage-status-pill {
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.22rem 0.6rem;
}

.item-status-pill.completed, .storage-status-pill.completed { color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); }
.item-status-pill.failed, .storage-status-pill.failed { color: var(--bad); background: var(--bad-soft); border: 1px solid var(--bad-line); }
.item-status-pill.processing, .storage-status-pill.processing { color: var(--a-text); background: var(--a-soft); border: 1px solid var(--a-line); }
.item-status-pill.cancelled, .storage-status-pill.cancelled { color: var(--t-2); background: var(--s-1); border: 1px solid var(--line-2); }
.item-status-dot { background: currentColor; }
.item-status-pill.processing .item-status-dot { animation: ui-pulse-ring 1.6s var(--ease) infinite; color: var(--a-1); }

.item-specs-grid { padding: 0.85rem 0; border: none; border-top: 1px solid var(--line-1); border-radius: 0; background: none; }

.spec-val { font-size: var(--fs-sm); color: var(--t-1); }

.item-actions-row { border-top: 1px solid var(--line-1); }

.btn-download-mini {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    border-radius: 7px;
    color: var(--t-1);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}

.btn-download-mini:hover { color: var(--bone); background: var(--ink-1); border-color: var(--ink-1); transform: translateY(-1px); }

.btn-delete-job { border-radius: 8px; color: var(--t-3); background: transparent; border: 1px solid var(--line-2); }
.btn-delete-job:hover:not(:disabled) { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }

.history-state-box { color: var(--t-2); }
.history-state-title { color: var(--t-1); font-weight: 700; letter-spacing: -0.02em; }
.history-state-text { color: var(--t-2); }

.history-spinner {
    border: none;
    background: conic-gradient(from 0deg, transparent 0 30%, var(--a-1) 75%, transparent 76%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: ui-spin 0.9s linear infinite;
}

.history-empty-icon {
    display: grid;
    place-items: center;
    width: 220px;
    height: auto;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: var(--r-xl);
    background: var(--s-1);
    color: var(--t-1);
    animation: none;
}

.empty-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: var(--t-1);
    background: var(--s-1);
    border: none;
    font-size: 1.5rem;
    animation: none;
}

.history-error-icon { color: var(--bad); }

/* --------------------------------------------------------------------------
   17. Storage
   -------------------------------------------------------------------------- */
.storage-screen-container { max-width: none; }

.storage-hero-card {
    position: relative;
    padding: 0 0 1.5rem;
    border: none;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.storage-hero-main-stat { font-family: var(--font-sans); font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.95; color: var(--t-1); }
.storage-hero-job-count { color: var(--t-2); }
.storage-last-sync { color: var(--t-3); font-size: var(--fs-xs); font-family: var(--font-mono); }

.storage-metrics-grid { gap: 0; }

.storage-metric-card {
    padding: 0.25rem 1.25rem 0.25rem 0;
    margin-right: 1.25rem;
    border: none;
    border-right: 1px solid var(--line-1);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: none;
}

.storage-metric-card:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.storage-metric-card:hover { transform: none; border-color: var(--line-1); background: none; }
.storage-metric-card.highlight-cleanable { background: none; border-color: var(--line-1); }

.metric-icon-box, .metric-icon-box.photos, .metric-icon-box.models, .metric-icon-box.cleanable, .metric-icon-box.mac-disk {
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1.05rem;
    color: var(--t-1);
    background: var(--s-1);
    border: none;
}

.metric-icon-box.cleanable { color: var(--ok); background: var(--ok-soft); }

.metric-title { color: var(--t-2); font-size: var(--fs-xs); font-weight: 600; }
.metric-value { font-size: var(--fs-xl); font-weight: 600; color: var(--t-1); }
.metric-hint { color: var(--t-3); font-size: var(--fs-2xs); }

.storage-action-banner {
    border-radius: var(--r-lg);
    background: var(--s-1);
    border: none;
    box-shadow: none;
}

.action-banner-icon { color: var(--t-1); font-size: 1.2rem; }
.action-banner-content strong { color: var(--t-1); }
.action-banner-content p { color: var(--t-2); }
.bulk-select-label { color: var(--t-1); }

.storage-section-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.03em; color: var(--t-1); }

.storage-jobs-list > *, #storageJobsContainer > * {
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
    transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}

.storage-jobs-list > *:hover, #storageJobsContainer > *:hover { border-color: var(--line-2); box-shadow: var(--elev-2); }

.storage-card-title { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.02em; color: var(--t-1); }
.storage-card-date { color: var(--t-3); font-size: var(--fs-xs); }

.storage-breakdown-grid { padding: 0.85rem 0; border: none; border-top: 1px solid var(--line-1); border-radius: 0; background: none; }
.breakdown-val { color: var(--t-1); font-size: var(--fs-sm); }
.breakdown-sub { color: var(--t-3); font-size: var(--fs-2xs); }
.total-label { color: var(--t-3); font-size: var(--fs-xs); }
.total-val { font-size: var(--fs-md); font-weight: 600; color: var(--t-1); }
.storage-total-row { border-top: 1px solid var(--line-1); }

.job-clean-chk { width: 18px; height: 18px; }

.storage-empty-state { color: var(--t-2); }
.empty-title { color: var(--t-1); font-weight: 700; }
.empty-desc { color: var(--t-2); }

/* --------------------------------------------------------------------------
   18. Modals
   -------------------------------------------------------------------------- */
.modal-backdrop {
    background: rgba(23, 24, 28, 0.46);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: ui-fade var(--d-base) var(--ease) both;
    z-index: 3000;
}

.modal-card {
    border-radius: var(--r-xl);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-3);
    animation: ui-modal-in 420ms var(--ease-spring) both;
}

@keyframes ui-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

.modal-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.03em; color: var(--t-1); }
.modal-desc { color: var(--t-2); font-size: var(--fs-sm); }
.modal-desc strong { color: var(--t-1); }

.modal-icon-badge {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1.05rem;
}

.modal-icon-badge.warning { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.modal-icon-badge.danger { color: var(--bad); background: var(--bad-soft); border: 1px solid var(--bad-line); }

.modal-info-box { border-radius: var(--r-md); background: var(--s-1); border: none; }
.modal-info-row { border-color: var(--line-1); }
.info-label { color: var(--t-2); font-size: var(--fs-xs); }
.info-val { color: var(--t-1); font-size: var(--fs-sm); background: none; }
.info-val.highlight { color: var(--ok); }
.info-val.danger-text, .danger-text { color: var(--bad); }

.modal-caution-note { display: flex; align-items: flex-start; gap: 0.4rem; color: var(--warn); font-size: var(--fs-xs); font-weight: 600; background: none; border: none; }
.modal-caution-note .ui-icon { margin-top: 0.1em; }
.modal-footer { border-top: 1px solid var(--line-1); gap: 0.6rem; }

/* --------------------------------------------------------------------------
   19. Connection
   -------------------------------------------------------------------------- */
.connection-screen-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 1.75rem; align-items: start; }
.connection-screen-container > .view-nav-strip, .connection-screen-container > .connection-status-card, .connection-screen-container > .mobile-browser-card { grid-column: 1 / -1; }
.connection-screen-container > .qr-connection-box { grid-row: span 2; }

.connection-status-card, .qr-connection-box, .manual-connection-card {
    border-radius: var(--r-xl);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
}

.conn-status-headline { font-weight: 700; letter-spacing: -0.02em; color: var(--t-1); }
.conn-status-subtext { color: var(--t-2); font-size: var(--fs-sm); }

.qr-box-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.035em; color: var(--t-1); }
.qr-box-subtitle { color: var(--t-2); }

.qr-display-wrapper { background: none; border: none; box-shadow: none; }

.qr-code-container {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-2);
}

.server-url-display-box { border-radius: var(--r-md); background: var(--s-1); border: none; }
.url-copy-row { border-radius: var(--r-sm); background: var(--s-3); border: 1px solid var(--line-2); }
.url-text { color: var(--t-1); background: none; }

.https-cert-notice-box {
    border-radius: var(--r-md);
    background: var(--info-soft);
    border: 1px solid var(--info-line);
}

.cert-icon, .cert-title { color: var(--info); }
.cert-notice-text { color: var(--t-2); }
.cert-notice-text strong, .cert-notice-text em { color: var(--t-1); }
.manual-conn-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.03em; color: var(--t-1); }
.manual-conn-desc { color: var(--t-2); font-size: var(--fs-sm); }
.manual-feedback-msg { border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   20. Error screen
   -------------------------------------------------------------------------- */
.error-state-card { text-align: center; max-width: 620px; margin: 0 auto; padding: clamp(2rem, 8vw, 5rem) 0; }

.error-state-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 20px;
    font-size: 1.7rem;
    color: var(--bad);
    background: var(--bad-soft);
    border: 1px solid var(--bad-line);
    box-shadow: none;
    animation: ui-pop 520ms var(--ease-spring) both;
}

.error-state-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; color: var(--t-1); }

.error-state-desc {
    color: var(--t-1);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.9rem 1.1rem;
    border-radius: var(--r-md);
    background: var(--s-2);
    border: 1px solid var(--line-2);
    font-size: var(--fs-sm);
}

/* Buttons wrap on phones instead of widening the card past the screen */
.error-action-buttons { flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   21. Keyframes
   -------------------------------------------------------------------------- */
@keyframes ui-view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ui-pulse-ring {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
/* a light band that slides across on the compositor (moving background-position repainted it) */
@keyframes ui-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   22. Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-stage { max-width: 560px; margin: 0 auto; }
    .upload-layout { grid-template-columns: 1fr; }
    .menu-grid { grid-template-columns: 1fr; }
    .connection-screen-container { grid-template-columns: 1fr; }
    .connection-screen-container > .qr-connection-box { grid-row: auto; }
    .engine-badge { display: none; }
}

@media (min-width: 601px) and (max-width: 980px) {
    .nav-menu-btn span, .nav-action-btn span, .nav-history-btn span, .nav-connect-btn span, .nav-storage-btn span { display: none; }
    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn { padding: 0.55rem 0.7rem; }
    .nav-menu-btn svg, .nav-action-btn svg, .nav-history-btn svg, .nav-connect-btn svg, .nav-storage-btn svg { width: 17px; height: 17px; opacity: 0.8; }
    .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .menu-grid .menu-card { flex-direction: column; align-items: flex-start; }
    .menu-grid .menu-card-arrow { position: absolute; top: 0.9rem; right: 0.9rem; }
}

@media (max-width: 860px) {
    .storage-metrics-grid { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
    .storage-metric-card:nth-child(2n) { border-right: none; margin-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   23. Phones: stacked layouts, graphite bottom tab bar
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .app-wrapper {
        padding: 0 1rem calc(6rem + env(safe-area-inset-bottom));
        gap: 1.25rem;
    }

    /* backdrop-filter on .navbar would become the containing block of the fixed tab bar,
       so on phones the blur lives on a pseudo-element instead */
    .navbar {
        margin: 0 -1rem;
        padding: 0.7rem 1rem;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
        isolation: isolate;
    }

    .navbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(243, 240, 234, 0.86);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
    }

    .brand-icon { width: 30px; height: 30px; }

    /* Navigation buttons move into a fixed bottom tab bar */
    .nav-actions {
        position: fixed;
        z-index: 900;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 0.1rem;
        padding: 0.3rem;
        margin: 0;
        border-radius: 20px;
        background: transparent;
        border: 1px solid rgba(243, 240, 234, 0.1);
        box-shadow: 0 18px 40px -14px rgba(23, 24, 28, 0.6);
        width: auto;
        isolation: isolate;
    }

    .nav-actions::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: rgba(23, 24, 28, 0.94);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
    }

    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn {
        flex-direction: column;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.45rem 0.15rem;
        border-radius: 15px;
        font-size: 0.66rem;
        font-weight: 600;
        min-height: 52px;
        width: 100%;
        color: #a9a69d;
    }

    .nav-menu-btn svg, .nav-action-btn svg, .nav-history-btn svg, .nav-connect-btn svg, .nav-storage-btn svg { width: 19px; height: 19px; opacity: 0.9; }

    .nav-menu-btn:hover, .nav-action-btn:hover, .nav-history-btn:hover, .nav-connect-btn:hover, .nav-storage-btn:hover { color: var(--bone); background: transparent; }

    .nav-menu-btn.active, .nav-action-btn.active, .nav-history-btn.active, .nav-connect-btn.active, .nav-storage-btn.active {
        color: var(--bone);
        background: rgba(243, 240, 234, 0.1);
        border-color: transparent;
        box-shadow: none;
    }

    .engine-badge { display: none !important; }

    /* Connection status stays at the top right of the header */
    .connection-pill {
        position: fixed;
        z-index: 61;
        top: 0.72rem;
        right: 1rem;
        padding: 0.4rem 0.6rem;
    }

    .connection-pill .connection-label { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .alert-container { top: 4.1rem; }

    .step-stepper { justify-content: space-between; gap: 0.4rem; }
    .step-divider { flex: 1; max-width: none; }

    /* Home */
    .menu-container { gap: 2rem; }
    .home-hero { gap: 1.75rem; padding-top: 0.75rem; }
    .home-hero-copy { gap: 1.1rem; }
    .home-headline { font-size: clamp(2.35rem, 11.5vw, 3rem); }
    .home-cta-row, .home-cta-row .btn { width: 100%; }
    .home-cta-row .btn { justify-content: center; }
    .home-facts { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
    .home-facts li { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 0; margin: 0; border-right: none; }
    .home-stage { border-radius: 22px; }
    .hs-tag { bottom: 0.8rem; font-size: 0.62rem; }
    .hs-tag-a { left: 0.8rem; }
    .hs-tag-b { right: 0.8rem; }
    .process-steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .process-step { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
    .process-figure { grid-row: 1 / span 3; margin: 0; padding: 0.75rem; border-radius: var(--r-lg); }
    .process-title { font-size: var(--fs-md); }
    .process-desc { font-size: var(--fs-sm); }

    /* New scan */
    .drop-action-group { grid-template-columns: 1fr; }
    .drop-illustration { width: 180px; }
    .drop-badges { display: none; }

    /* Processing */
    .proc-dial { width: 208px; height: 208px; }
    .proc-dial .progress-big-number { font-size: 3.5rem; }
    .proc-header-actions { width: 100%; justify-content: space-between; }
    .processing-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
    .processing-meta-row .meta-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
    .processing-meta-row .meta-job-box { grid-column: 1 / -1; }
    .stage-timeline-container { grid-template-columns: 1fr; }
    .stage-timeline-container .timeline-step { flex-direction: row; gap: 0.85rem; }
    .stage-timeline-container .step-marker-col { flex-direction: column; width: 26px; align-self: stretch; flex-shrink: 0; }
    .stage-timeline-container .step-connector { width: 1.5px; height: auto; flex: 1; margin: 0.3rem 0; min-height: 14px; }
    .step-content { padding-bottom: 1rem; padding-top: 0.1rem; }

    /* Lists & dialogs */
    .history-header, .storage-hero-header { gap: 0.75rem; }
    .history-header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .history-header-actions .btn { flex: 1 1 auto; }
    .storage-card-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .storage-card-actions .btn { width: 100%; }
    .storage-card-actions .btn-storage-delete { grid-column: 1 / -1; }
    .modal-card { border-radius: var(--r-lg); }
    .modal-footer .btn { flex: 1; }
    .view-nav-step-title { display: none; }
}

/* --------------------------------------------------------------------------
   24. Reduced motion: keep feedback, drop movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .hs-solid { animation: none; clip-path: inset(0 50% 0 0); }
    .hs-scanline { animation: none; left: 50%; }
    .hs-tilt { transform: none; }
}

/* --------------------------------------------------------------------------
   25. Overrides for legacy decorative styles in style.css
   -------------------------------------------------------------------------- */
.storage-hero-main-stat, .history-title, .completion-title, .drop-heading, .qr-box-title, .error-state-title, .proc-header-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

.action-banner-content p strong { display: inline; font-size: inherit; }
.breakdown-val-group .pill-badge-mini { align-self: flex-start; width: fit-content; }

/* --------------------------------------------------------------------------
   26. Upload phase on the processing dial
   The upload percentage is data transfer only: it is labelled and drawn in graphite, not ember, so it
   does not read as reconstruction progress. While the server prepares the upload there is no
   measurable percentage, so the dial and bar turn indeterminate.
   -------------------------------------------------------------------------- */
.progress-phase-label {
    position: absolute;
    bottom: 26%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-3);
    white-space: nowrap;
}

body.is-uploading .proc-ring-fill { stroke: var(--t-2); }
body.is-uploading .proc-centerpiece .progress-fill { background: var(--t-2); }
body.is-uploading .proc-dial .progress-percent-symbol { color: var(--t-3); }

.proc-centerpiece.is-indeterminate .progress-number-display { visibility: hidden; }
.proc-centerpiece.is-indeterminate .proc-ring { animation: ui-ring-spin 1.4s linear infinite; }
.proc-centerpiece.is-indeterminate .proc-ring-fill { stroke-dashoffset: 72; transition: none; }
.proc-centerpiece.is-indeterminate .progress-fill {
    width: 35% !important;
    transition: none;
    animation: ui-indeterminate 1.3s var(--ease) infinite;
}

@keyframes ui-ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

@media (prefers-reduced-motion: reduce) {
    .proc-centerpiece.is-indeterminate .proc-ring,
    .proc-centerpiece.is-indeterminate .progress-fill { animation: none; }
}

/* --------------------------------------------------------------------------
   27. Motion v4: livelier transitions
   Every effect here is decoration layered on top of the existing UI; the
   reduced-motion block in section 24 still neutralises all of it.
   -------------------------------------------------------------------------- */

/* Ambient canvas: two slow ember/warm glows drifting behind everything */
.ui-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.ui-ambient i {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.16;
    will-change: transform;
}
.ui-ambient i:nth-child(1) { top: -18vmax; left: -12vmax; background: radial-gradient(circle, var(--a-1), transparent 65%); animation: ui-drift-a 26s var(--ease) infinite alternate; }
.ui-ambient i:nth-child(2) { bottom: -22vmax; right: -14vmax; background: radial-gradient(circle, #eaa2b2, transparent 65%); opacity: 0.2; animation: ui-drift-b 32s var(--ease) infinite alternate; }
@keyframes ui-drift-a { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes ui-drift-b { to { transform: translate(-16vw, -18vh) scale(0.9); } }

/* Top hairline: scroll progress */
.ui-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1200;
    pointer-events: none;
    transform-origin: left center;
}
.ui-scroll-progress { background: var(--a-1); opacity: 0.55; transform: scaleX(var(--sp, 0)); }

/* Directional view transitions: the old view leaves as a ghost, the new one slides in */
.ui-view-ghost {
    position: fixed !important;
    z-index: 40;
    margin: 0 !important;
    overflow: hidden;
    pointer-events: none;
    animation: ui-ghost-out 300ms var(--ease) forwards;
}
.ui-view-ghost * { animation: none !important; transition: none !important; }
body[data-nav-dir="back"] .ui-view-ghost { animation-name: ui-ghost-out-back; }
@keyframes ui-ghost-out { to { opacity: 0; transform: translateX(-3.5%) scale(0.985); } }
@keyframes ui-ghost-out-back { to { opacity: 0; transform: translateX(3.5%) scale(0.985); } }

/* backwards, not both: once finished the panel keeps no transform, so things inside it can be
   fixed to the window */
.view-panel.ui-enter { animation: ui-view-slide-in 560ms var(--ease-out) backwards; }
body[data-nav-dir="back"] .view-panel.ui-enter { animation-name: ui-view-slide-in-back; }
@keyframes ui-view-slide-in { from { opacity: 0; transform: translateX(4%); } to { opacity: 1; transform: none; } }
@keyframes ui-view-slide-in-back { from { opacity: 0; transform: translateX(-4%); } to { opacity: 1; transform: none; } }

/* Navbar: one pill slides between the active destinations */
@media (min-width: 601px) {
    .nav-actions.has-indicator { position: relative; isolation: isolate; }
}
.nav-actions.has-indicator > button { z-index: 1; }
.nav-actions.has-indicator > button.active { background: transparent; border-color: transparent; box-shadow: none; }
.ui-nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: var(--r-pill);
    background: var(--s-3);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-1);
    opacity: 0;
    pointer-events: none;
}
.ui-nav-indicator.is-visible { opacity: 1; }
@media (max-width: 600px) {
    .ui-nav-indicator { background: rgba(243, 240, 234, 0.1); border-color: transparent; box-shadow: none; }
}
.nav-actions.has-indicator > button.active svg { animation: ui-icon-pop 520ms var(--ease-spring); }
@keyframes ui-icon-pop { 0% { transform: scale(0.6) rotate(-12deg); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* Brand: the S draws itself once, the sensor dot keeps breathing */
.brand-mark .bm-a, .brand-mark .bm-b { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ui-brand-draw 1100ms var(--ease-out) 150ms forwards; }
.brand-mark .bm-b { animation-delay: 450ms; }
/* a few breaths, then still: an SVG child cannot animate on the compositor, so an endless
   breath would repaint the header on every frame */
.brand-mark .bm-dot { transform-origin: 25.3px 9.2px; animation: ui-dot-breathe 2.8s var(--ease) 1.2s 3; }
.brand:hover .brand-mark { animation: ui-brand-spin 900ms var(--ease-spring); }
@keyframes ui-brand-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-dot-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.7; } }
@keyframes ui-brand-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.navbar > .brand, .navbar > .nav-actions { animation: ui-nav-drop 700ms var(--ease-out) both; }
.navbar > .nav-actions { animation-delay: 120ms; }
/* On phones .nav-actions is the fixed tab bar and contains the fixed connection pill: a transform
   animation there would make it the pill's containing block (pill lands inside the tab bar) */
@media (max-width: 600px) {
    .navbar > .nav-actions { animation: ui-fade 600ms var(--ease) 120ms both; }
}
@keyframes ui-nav-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Hero headline: words rise from behind a mask, the serif phrase gets an ember underline */
.ui-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ui-word > span { display: inline-block; }
#viewMainMenu.ui-enter .ui-word > span { animation: ui-word-rise 900ms var(--ease-out) both; animation-delay: calc(120ms + var(--w, 0) * 65ms); }
@keyframes ui-word-rise { from { transform: translateY(110%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

.home-headline em { position: relative; }
.home-headline em::after {
    content: "";
    position: absolute;
    left: 0.02em;
    right: 0.08em;
    bottom: 0.02em;
    height: 0.07em;
    border-radius: 1em;
    background: currentColor;
    opacity: 0.35;
    transform-origin: left center;
    transform: scaleX(1);
}
#viewMainMenu.ui-enter .home-headline em::after { animation: ui-underline 1000ms var(--ease-out) 800ms both; }
@keyframes ui-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero facts and CTA arrive with a little bounce */
#viewMainMenu.ui-enter .home-facts li { animation: ui-rise-in 700ms var(--ease-spring) both; }
#viewMainMenu.ui-enter .home-facts li:nth-child(1) { animation-delay: 420ms; }
#viewMainMenu.ui-enter .home-facts li:nth-child(2) { animation-delay: 500ms; }
#viewMainMenu.ui-enter .home-facts li:nth-child(3) { animation-delay: 580ms; }

/* Primary buttons: light sweep on hover, magnetic pull handled in JS via --mx/--my */
.btn-accent { overflow: hidden; translate: var(--mag-x, 0) var(--mag-y, 0); transition-property: transform, box-shadow, background, border-color, color, opacity, translate; }
.btn-accent::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-accent:hover::after { animation: ui-shine 900ms var(--ease-out); }
@keyframes ui-shine { to { transform: translateX(120%); } }
/* (the hero button's glow is still: an endless box-shadow pulse repainted it on every frame) */

/* Cursor spotlight + gentle tilt on cards */
.menu-card, .history-item-card, .process-figure, .storage-metric-card, .manual-connection-card {
    --spot-x: 50%;
    --spot-y: 50%;
}
.ui-spot-on .menu-card, .ui-spot-on .history-item-card, .ui-spot-on .process-figure {
    background-image: radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(163, 33, 63, var(--spot-a, 0)), transparent 70%);
    transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background-color var(--d-base) var(--ease), --spot-a var(--d-slow) var(--ease);
}
.ui-spot-on .menu-card:hover, .ui-spot-on .history-item-card:hover, .ui-spot-on .process-figure:hover { --spot-a: 0.09; }
@property --spot-a { syntax: "<number>"; inherits: true; initial-value: 0; }

.menu-card { transform-style: preserve-3d; }
.menu-card.is-tilting {
    transform: perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px);
    transition: transform 120ms linear, border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.menu-card-icon-box { transition: transform var(--d-slow) var(--ease-spring); }
.menu-card:hover .menu-card-icon-box { transform: scale(1.1) rotate(-6deg); }
.menu-card-arrow { transition: transform var(--d-base) var(--ease-spring); }
.menu-card:hover .menu-card-arrow { transform: translate(3px, -3px); }

.history-item-card { transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.history-item-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }

/* Process illustrations draw themselves when they scroll into view */
.ui-draw-ready .ill-line, .ui-draw-ready .ill-accent-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ui-draw-ready:not(.is-drawn) .ill-dash, .ui-draw-ready:not(.is-drawn) .ill-frame, .ui-draw-ready:not(.is-drawn) .ill-fill,
.ui-draw-ready:not(.is-drawn) .ill-phone, .ui-draw-ready:not(.is-drawn) .ill-text { opacity: 0; }
.ui-draw-ready .ill-accent, .ui-draw-ready .ill-accent circle { transform-box: fill-box; transform-origin: center; }
.ui-draw-ready:not(.is-drawn) .ill-accent, .ui-draw-ready:not(.is-drawn) .ill-accent circle { opacity: 0; transform: scale(0.2); }
.ui-draw-ready.is-drawn .ill-line, .ui-draw-ready.is-drawn .ill-accent-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out) var(--draw-delay, 0ms); }
.ui-draw-ready.is-drawn .ill-dash, .ui-draw-ready.is-drawn .ill-frame, .ui-draw-ready.is-drawn .ill-fill,
.ui-draw-ready.is-drawn .ill-phone, .ui-draw-ready.is-drawn .ill-text { transition: opacity 700ms var(--ease) calc(var(--draw-delay, 0ms) + 400ms); }
.ui-draw-ready.is-drawn .ill-accent, .ui-draw-ready.is-drawn .ill-accent circle {
    transition: opacity 300ms var(--ease) calc(var(--draw-delay, 0ms) + 700ms + var(--i, 0) * 14ms), transform 500ms var(--ease-spring) calc(var(--draw-delay, 0ms) + 700ms + var(--i, 0) * 14ms);
}
.process-num { display: inline-block; transition: transform var(--d-slow) var(--ease-spring), letter-spacing var(--d-slow) var(--ease); }
.process-step:hover .process-num { transform: translateX(4px); letter-spacing: 0.08em; }

/* Stepper: the divider fills as a step is completed */
.step-divider { position: relative; overflow: hidden; }
.step-divider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--a-1);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms var(--ease-out);
}
.step-item.done + .step-divider::after { transform: scaleX(1); }
/* the active step's ring: a layer that grows and fades (a box-shadow pulse repainted every frame) */
.step-item.active .step-number { position: relative; }
.step-item.active .step-number::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 3px rgba(163, 33, 63, 0.35);
    animation: ui-step-pulse 2.2s var(--ease) infinite;
}
@keyframes ui-step-pulse { 0% { transform: scale(0.9); opacity: 1; } 60%, 100% { transform: scale(1.45); opacity: 0; } }

/* Completion: ember particle burst */
.ui-burst { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }

/* Status dots breathe while connected */
.status-indicator { transition: background var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .ui-ambient, .ui-view-ghost, .ui-burst { display: none !important; }
    .brand-mark .bm-a, .brand-mark .bm-b { stroke-dashoffset: 0; }
    .btn-accent { translate: none; }
}

/* --------------------------------------------------------------------------
   28. Print readiness card, unit select, render export
   -------------------------------------------------------------------------- */
.completion-card > .print-card { order: 5; }
.secondary-downloads-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.secondary-downloads-row .btn { min-width: 0; white-space: nowrap; }

.print-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--s-2);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
    animation: ui-rise-in 520ms var(--ease-out) both;
}
.print-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.print-card-title { margin: 0; font-size: var(--fs-md, 1rem); font-weight: 700; letter-spacing: -0.02em; }
.print-card-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    color: var(--t-2);
}
.print-card-badge.is-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.print-card-badge.is-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }

.print-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.print-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.print-stat-label { font-size: var(--fs-xs); color: var(--t-3); }
.print-stat-value { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--t-1); }

.print-beds { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.print-beds li {
    font-size: var(--fs-xs);
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--s-1);
    border: 1px solid var(--line-1);
    color: var(--t-2);
}
.print-beds li.fits { color: var(--ok); border-color: var(--ok-line); }
.print-beds li.no-fit { color: var(--t-3); text-decoration: line-through; }

.print-warnings { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.print-warnings:empty { display: none; }
.print-warnings li {
    font-size: var(--fs-sm);
    line-height: 1.45;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-md);
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
}
.print-note { font-size: var(--fs-xs); color: var(--t-3); line-height: 1.45; }

.size-panel-unit-select { width: auto; min-width: 4.2rem; }

.viewer-btn.is-recording { color: var(--a-1); }
.viewer-btn.is-recording svg { animation: ui-spin 1.2s linear infinite; }

/* --------------------------------------------------------------------------
   29. Home hero: live 3D scan story (canvas + viewfinder HUD)
   -------------------------------------------------------------------------- */
.home-stage canvas.hs3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-stage.is-3d .hs-tilt, .home-stage.is-3d .hs-tag { display: none; }
.hs3d-hud[hidden] { display: none; }
.hs3d-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); color: var(--t-1); }

.hs3d-corner { position: absolute; width: 18px; height: 18px; border-color: rgba(243, 240, 234, 0.35); border-style: solid; border-width: 0; }
.hs3d-corner.tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 6px; }
.hs3d-corner.tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 6px; }
.hs3d-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 6px; }
.hs3d-corner.br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }

.hs3d-top { position: absolute; top: 1.15rem; left: 1.6rem; right: 1.6rem; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-2xs); letter-spacing: 0.08em; }
.hs3d-rec { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--t-2); }
.hs3d-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-1); box-shadow: 0 0 10px rgba(163, 33, 63, 0.9); animation: hs3d-blink 1.2s steps(2, jump-none) infinite; }
.hs3d-rec b { font-weight: 600; color: var(--t-1); font-variant-numeric: tabular-nums; }
.hs3d-brand { color: var(--t-3); }
@keyframes hs3d-blink { 50% { opacity: 0.25; } }

.hs3d-caption { position: absolute; left: 1.6rem; bottom: 3.6rem; display: flex; align-items: flex-end; gap: 0.75rem; }
.hs3d-step { font-size: 2.6rem; line-height: 0.9; font-weight: 600; color: var(--a-1); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hs3d-caption-text { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.15rem; }
.hs3d-title { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--t-1); }
.hs3d-metric { font-size: var(--fs-xs); color: var(--t-2); font-variant-numeric: tabular-nums; }
.hs3d-caption.is-swapping .hs3d-step, .hs3d-caption.is-swapping .hs3d-caption-text { animation: hs3d-swap 520ms var(--ease-out); }
@keyframes hs3d-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hs3d-steps { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.3rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.hs3d-steps li { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); transition: color 300ms var(--ease); }
.hs3d-steps li i { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(243, 240, 234, 0.14); overflow: hidden; }
.hs3d-steps li i::after { content: ""; position: absolute; inset: 0; background: var(--a-1); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.hs3d-steps li.is-active { color: var(--t-1); }
.hs3d-steps li.is-done { color: var(--t-2); }

.hs3d-done {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    padding: 0.55rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(15, 16, 18, 0.72);
    border: 1px solid rgba(163, 33, 63, 0.5);
    box-shadow: 0 0 30px -4px rgba(163, 33, 63, 0.5);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 300ms var(--ease), transform 400ms var(--ease-spring);
}
.hs3d-done b { color: var(--a-1); }
.hs3d-done.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hs3d-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.hs3d-flash.is-on { animation: hs3d-shutter 420ms var(--ease) both; }
@keyframes hs3d-shutter { 0% { opacity: 0; } 25% { opacity: 0.55; } 100% { opacity: 0; } }

@media (max-width: 600px) {
    .hs3d-step { font-size: 1.6rem; }
    .hs3d-title { font-size: var(--fs-md, 1rem); }
    .hs3d-metric { font-size: var(--fs-2xs); }
    .hs3d-caption { bottom: 2.6rem; left: 1.2rem; gap: 0.5rem; }
    .hs3d-top { left: 1.2rem; right: 1.2rem; }
    .hs3d-steps { left: 1.2rem; right: 1.2rem; }
    .hs3d-steps li span { display: none; }
}

/* Connection screen: one-time phone setup QR */
.setup-qr-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; }
.setup-qr-row[hidden] { display: none; }
.setup-qr-container { flex-shrink: 0; padding: 0.35rem; border-radius: var(--r-md); background: #fff; line-height: 0; }
.setup-qr-container { width: 116px; }
.setup-qr-container > * { display: block; width: 100% !important; height: auto !important; max-width: 100%; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.setup-qr-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.setup-qr-step { font-size: var(--fs-sm); font-weight: 700; color: var(--t-1); }
.setup-qr-hint { font-size: var(--fs-xs); color: var(--t-3); }
.setup-qr-info .url-text { overflow-wrap: anywhere; }

/* Upload: full-resolution photo scan is the recommended path (spans the row above the video options) */
.btn-photo-hero-action {
    grid-column: 1 / -1;
    flex: none;
    width: 100%;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    text-align: left;
}
.btn-photo-hero-action .btn-action-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.scan-mat-btn { align-self: flex-start; }
.scan-tips-list p em { font-style: normal; font-weight: 700; color: var(--t-1); }

/* --------------------------------------------------------------------------
   31. Home: recent models, studio numbers, what scans well, FAQ, footer
   -------------------------------------------------------------------------- */
.home-recent[hidden], .home-stats[hidden] { display: none; }
.home-section-head-row { max-width: none; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.home-recent, .home-suit, .home-faq { display: flex; flex-direction: column; gap: 1.25rem; }

.home-recent-list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0.9rem; }
.recent-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    background: var(--s-2);
    box-shadow: var(--elev-1);
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.recent-card:hover { transform: translateY(-3px); box-shadow: var(--elev-2); border-color: var(--line-2); }
.recent-card:focus-visible { outline: 2px solid var(--a-1); outline-offset: 2px; }
.recent-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: radial-gradient(90% 80% at 50% 35%, #2f3137 0%, #1b1c20 60%, #131417 100%);
    overflow: hidden;
}
.recent-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), opacity 400ms var(--ease); }
.recent-thumb img:not([src]) { opacity: 0; }
.recent-card:hover .recent-thumb img { transform: scale(1.06) rotate(-1deg); }
.recent-thumb.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(243, 240, 234, 0.08) 50%, transparent 70%);
    animation: ui-shimmer 1.4s linear infinite;
}
.recent-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.95rem 0.95rem; }
.recent-body strong { font-size: var(--fs-sm); font-weight: 700; }
.recent-body span { font-size: var(--fs-xs); color: var(--t-3); font-family: var(--font-mono); }
.recent-tag { align-self: flex-start; margin-top: 0.35rem; padding: 0.12rem 0.5rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-family: var(--font-sans) !important; }
.recent-tag.is-measured { color: var(--ok) !important; border-color: var(--ok-line); background: var(--ok-soft); }

.home-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 1.4rem 0.5rem;
    border-radius: var(--r-xl, 22px);
    background: radial-gradient(120% 160% at 0% 0%, #2f3137 0%, #1b1c20 55%, #131417 100%);
    box-shadow: var(--elev-2);
    color: #f3f0ea;
}
.home-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.2rem 1.2rem; border-right: 1px solid rgba(243, 240, 234, 0.1); min-width: 0; }
.home-stat:last-child { border-right: none; }
.home-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.home-stat:first-child .home-stat-value { color: #e07a90; }
.home-stat-label { font-size: var(--fs-xs); color: rgba(243, 240, 234, 0.6); line-height: 1.4; }

.home-suit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.suit-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem 1.35rem; border-radius: var(--r-xl, 22px); background: var(--s-2); border: 1px solid var(--line-1); }
.suit-title { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: var(--fs-md, 1rem); font-weight: 700; }
.suit-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok-fill, #1b8f61); box-shadow: 0 0 0 4px var(--ok-soft); }
.suit-hard .suit-dot { background: var(--a-1); box-shadow: 0 0 0 4px rgba(163, 33, 63, 0.14); }
.suit-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.suit-list li { display: flex; flex-direction: column; gap: 0.15rem; padding-left: 1.1rem; border-left: 2px solid var(--line-2); }
.suit-good .suit-list li { border-left-color: var(--ok-line); }
.suit-hard .suit-list li { border-left-color: rgba(163, 33, 63, 0.35); }
.suit-list strong { font-size: var(--fs-sm); }
.suit-list span { font-size: var(--fs-sm); color: var(--t-2); line-height: 1.5; }

.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-1); }
.faq-item { border-bottom: 1px solid var(--line-1); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: color var(--d-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    font-weight: 500;
    color: var(--t-2);
    transition: transform var(--d-base) var(--ease-spring), background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--a-1); color: #fff; border-color: transparent; }
.faq-item summary:hover { color: var(--a-text); }
.faq-item p { margin: 0 0 1rem; padding: 0 2.6rem 0 0.2rem; color: var(--t-2); line-height: 1.6; animation: ui-rise-in 360ms var(--ease-out) both; }
.faq-item p a { color: var(--a-text); }


@media (max-width: 980px) {
    .home-recent-list { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); }
    .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; }
    .home-stat:nth-child(2n) { border-right: none; }
}

/* Phone: compact shortcuts, swipeable recent models, 2×2 numbers */
@media (max-width: 600px) {
    .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .menu-grid .menu-card { flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.9rem 0.4rem; text-align: center; }
    .menu-grid .menu-card-desc, .menu-grid .menu-card-arrow { display: none; }
    .menu-grid .menu-card-title { font-size: var(--fs-xs); line-height: 1.25; }
    .menu-grid .menu-card-title-row { flex-direction: column; align-items: center; gap: 0.3rem; }
    .menu-grid .menu-card-pill { display: none; }

    .home-section-head-row { align-items: center; }
    .home-recent-list {
        display: flex;
        gap: 0.7rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        margin: 0 -1rem;
        padding: 0.2rem 1rem 0.6rem;
        scrollbar-width: none;
    }
    .home-recent-list::-webkit-scrollbar { display: none; }
    .recent-card { flex: 0 0 72%; scroll-snap-align: start; }

    .home-stats { padding: 1.1rem 0.2rem; }
    .home-stat { padding: 0.2rem 0.9rem; }
    .home-suit-grid { grid-template-columns: 1fr; }
    .faq-item p { padding-right: 0.2rem; }
}

/* --------------------------------------------------------------------------
   32. Header & footer
   -------------------------------------------------------------------------- */
.navbar {
    transition: padding 260ms var(--ease-out), background 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
/* The bar changes height when it compacts. With scroll anchoring the browser shifts the page by
   that height, which pushes it back across the threshold and the bar flickers open and closed. */
html { overflow-anchor: none; }
.navbar.is-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: rgba(243, 240, 234, 0.92);
    border-bottom-color: var(--line-2);
    box-shadow: 0 10px 30px -22px rgba(23, 24, 28, 0.55);
}
.brand-icon { transition: transform 260ms var(--ease-out); }
.navbar.is-scrolled .brand-icon { transform: scale(0.9); }
@media (min-width: 1180px) {
    .brand-text { display: flex; flex-direction: column; gap: 0.05rem; }
    .brand-subtitle {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--t-3);
        transition: opacity 200ms var(--ease), max-height 260ms var(--ease);
        max-height: 1rem;
        overflow: hidden;
    }
    .navbar.is-scrolled .brand-subtitle { opacity: 0; max-height: 0; }
}

/* "New scan" is the primary action: an ember button on wider screens */
@media (min-width: 601px) {
    .nav-actions > #btnNavNewScan,
    .nav-actions.has-indicator > #btnNavNewScan.active {
        background: var(--a-1);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px -10px rgba(163, 33, 63, 0.8);
        margin: 0 0.2rem;
    }
    .nav-actions > #btnNavNewScan svg { color: #fff; opacity: 1; }
    .nav-actions > #btnNavNewScan:hover { background: #bf3a58; color: #fff; transform: translateY(-1px); }
}

/* Background scan chip */
.nav-job-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: 1rem;
    margin-right: auto;
    padding: 0.3rem 0.8rem 0.3rem 0.35rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(163, 33, 63, 0.35);
    background: rgba(163, 33, 63, 0.08);
    color: var(--t-1);
    font: inherit;
    cursor: pointer;
    transition: background var(--d-base) var(--ease), transform var(--d-base) var(--ease-out);
}
.nav-job-chip[hidden] { display: none; }
.nav-job-chip:hover { background: rgba(163, 33, 63, 0.14); transform: translateY(-1px); }
.nav-job-chip.is-entering { animation: ui-pop-in 420ms var(--ease-spring) both; }
.nav-job-ring { width: 28px; height: 28px; transform: rotate(-90deg); flex-shrink: 0; }
.nav-job-track { fill: none; stroke: rgba(163, 33, 63, 0.18); stroke-width: 3.5; }
.nav-job-fill { fill: none; stroke: var(--a-1); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease-out); }
.nav-job-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.nav-job-text strong { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--a-text); }
.nav-job-text small { font-size: 0.66rem; color: var(--t-3); white-space: nowrap; }


@media (max-width: 860px) {
}
@media (max-width: 600px) {
    .navbar { flex-direction: row; flex-wrap: nowrap; align-items: center; }
    /* sits between the logo and the fixed connection pill on the right */
    .nav-job-chip { margin-left: auto; margin-right: 3.6rem; padding: 0.22rem 0.6rem 0.22rem 0.25rem; }
    .nav-job-ring { width: 24px; height: 24px; }
    .nav-job-text small { display: none; }
}

/* style.css hides horizontal overflow with `overflow-x: hidden`, which turns html/body (and the phone
   wrapper) into scroll containers and silently breaks the sticky header. `clip` cuts the overflow the
   same way without creating a scroll container. */
html, body { overflow-x: clip; overflow-y: visible; }
@media (max-width: 640px) {
    .app-wrapper { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   33. Floating header on scroll, footer joined to the bottom edge
   -------------------------------------------------------------------------- */
.navbar {
    transition: padding 280ms var(--ease-out), background 280ms var(--ease), box-shadow 280ms var(--ease),
                border-color 280ms var(--ease), margin 320ms var(--ease-out), border-radius 320ms var(--ease-out),
                top 320ms var(--ease-out);
}
/* Scrolled: the bar lifts off the page as a rounded, floating panel */
.navbar.is-scrolled {
    top: 0.65rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.1rem;
    padding-right: 0.7rem;
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background: rgba(250, 248, 244, 0.86);
    box-shadow: 0 18px 40px -24px rgba(23, 24, 28, 0.55), 0 2px 6px -2px rgba(23, 24, 28, 0.08);
}


@media (max-width: 600px) {
    .navbar.is-scrolled {
        top: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        border-radius: 18px;
    }
    /* phones keep the blur on ::before (see section 23); give it the same rounded shape */
    .navbar::before { border-radius: inherit; transition: border-radius 320ms var(--ease-out); }
    .navbar.is-scrolled::before { background: rgba(250, 248, 244, 0.9); }
    /* the fixed connection pill follows the floating bar */
    .connection-pill { transition: top 320ms var(--ease-out), right 320ms var(--ease-out), transform 320ms var(--ease-out); transform-origin: top right; }
    .navbar.is-scrolled .connection-pill { top: 0.78rem; right: 1.5rem; transform: scale(0.82); }

}

/* --------------------------------------------------------------------------
   34. Type: iPhone-like (SF Pro, "Bold Text" weight)
   -------------------------------------------------------------------------- */
html body { font-weight: 500; letter-spacing: -0.003em; }
/* SF Pro Display carries its own optical tracking; Geist-era tight tracking is relaxed a little */
.home-headline { letter-spacing: -0.035em; }
.home-section-title, .print-card-title, .hs3d-title { letter-spacing: -0.02em; }
/* Larger type: give compact buttons room instead of clipping their labels */
.secondary-downloads-row { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.secondary-downloads-row .btn { padding-left: 0.75rem; padding-right: 0.75rem; }
.secondary-downloads-row .btn small { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .btn-storage-clean { white-space: normal; line-height: 1.25; height: auto; min-height: 38px; }
    .connection-status-card .btn { flex-shrink: 0; }
}
@media (max-width: 600px) {
    /* two metric columns must fit a phone: let the cards shrink and the numbers scale with the screen */
    .storage-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .storage-metric-card { min-width: 0; }
    .storage-metric-card .metric-value { font-size: clamp(1.15rem, 5.4vw, 1.5rem); white-space: nowrap; }
    .storage-metric-card .metric-hint, .storage-metric-card .metric-label { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   35. Loading screen (opening and page changes) and pull-to-refresh
   The name rises out of a mask, splits apart, and a dark window opens between its halves where
   the user's own scans flick past; then the window grows into the page's dark card (home: the
   hero) while the paper curtain fades, and the page takes over (app.js). Everything that moves
   animates transform or opacity only, so it stays smooth while the page is still loading.
   -------------------------------------------------------------------------- */
.intro-splash {
    --win: clamp(132px, 20vw, 300px);        /* the window between the halves (4:3) */
    --gap: clamp(12px, 1.5vw, 24px);
    --fs: clamp(60px, 12vw, 196px);          /* the name; app.js shrinks it to fit a long page name */
    --j: 0px;                                /* centres the joined word before it splits */
    --enter: 0ms;                            /* page changes: until the curtain is down */
    /* timeline (opening) */
    --rise-at: 80ms;  --rise: 620ms;
    --split-at: 680ms; --split: 560ms;
    --pics-at: 1080ms; --slot: 120ms;
    position: fixed;
    inset: 0;
    z-index: 5000;
    overflow: hidden;
    color: #17181c;
    cursor: pointer;
    /* safety net: never stays up, even if scripts fail */
    animation: intro-fallback-hide 500ms var(--ease) 5s forwards;
}
@keyframes intro-fallback-hide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* the curtain: the pages' living background. motion.js paints a copy of it into the canvas, which
   is why the page appears under the curtain without a seam; until then, these still clouds */
.ld-curtain {
    position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity;
    background:
        radial-gradient(48% 52% at 16% 24%, rgba(224, 174, 183, 0.75), transparent 72%),
        radial-gradient(44% 56% at 86% 76%, rgba(233, 205, 208, 0.9), transparent 72%),
        linear-gradient(160deg, #f3f0ea 0%, #efe6d8 100%);
}
.ld-flow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease); }
.ld-flow.is-on { opacity: 1; }
.is-page-loader .ld-flow { transition: none; }
.intro-splash.is-leaving { pointer-events: none; }

.ld-top { position: absolute; top: clamp(18px, 3.2vh, 34px); left: 50%; translate: -50% 0; animation: ld-fade 600ms var(--ease) calc(var(--enter) + 120ms) both; }
.ld-logo { display: block; width: 26px; height: 26px; overflow: visible; }
.ld-logo path, .ld-win-mark path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.ld-logo .bm-a { stroke: #17181c; }
.ld-logo .bm-b, .ld-win-mark .bm-b { stroke: #a3213f; }
.ld-logo .bm-dot, .ld-win-mark .bm-dot { fill: #a3213f; }
@keyframes ld-fade { from { opacity: 0; } }

/* the name: two halves meeting at the window */
.ld-half {
    position: absolute; top: 50%; translate: 0 -50%;
    font-family: var(--font-sans); font-size: var(--fs); font-weight: 800; line-height: 0.86;
    letter-spacing: -0.06em; white-space: nowrap;
    animation: ld-split var(--split) cubic-bezier(0.76, 0, 0.24, 1) calc(var(--enter) + var(--split-at)) both;
}
.ld-a { right: calc(50% + var(--win) / 2 + var(--gap)); --from: calc(var(--win) / 2 + var(--gap) + var(--j)); }
.ld-b { left: calc(50% + var(--win) / 2 + var(--gap)); color: #a3213f; --from: calc(var(--win) / -2 - var(--gap) + var(--j)); }
@keyframes ld-split { from { transform: translateX(var(--from)); } }
.ld-mask { display: block; overflow: hidden; padding: 0.16em 0.03em 0.12em; }
.ld-text { display: block; animation: ld-rise var(--rise) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--enter) + var(--rise-at)) both; }
.ld-b .ld-text { animation-delay: calc(var(--enter) + var(--rise-at) + 70ms); }
/* far enough down that the dots over İ and the cedillas stay hidden too */
@keyframes ld-rise { from { transform: translateY(150%); } }

/* the window */
.ld-win { position: absolute; left: 50%; top: 50%; width: var(--win); aspect-ratio: 4 / 3; translate: -50% -50%; }
.ld-win-box {
    position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
    background: radial-gradient(90% 80% at 70% 15%, rgba(163, 33, 63, 0.38), transparent 62%), #0e0f11;
    box-shadow: 0 24px 50px -28px rgba(23, 24, 28, 0.7);
    animation: ld-win-in var(--split) cubic-bezier(0.76, 0, 0.24, 1) calc(var(--enter) + var(--split-at)) both;
}
@keyframes ld-win-in { from { transform: scale(0.08); opacity: 0; } }
.ld-win-mark { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%; overflow: visible; }
.ld-win-mark .bm-a { stroke: #f3f0ea; }
.has-pics .ld-win-mark { display: none; }
/* the user's scans, one after another; the last one stays */
.ld-pics img {
    position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; opacity: 0;
    animation: ld-pic var(--slot) linear calc(var(--enter) + var(--pics-at) + var(--i) * var(--slot));
}
.ld-pics img.is-last { animation-fill-mode: forwards; }
@keyframes ld-pic { from, to { opacity: 1; } }

.ld-foot {
    position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px); bottom: clamp(16px, 3vh, 32px);
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 24, 28, 0.55);
    animation: ld-fade 600ms var(--ease) calc(var(--enter) + 200ms) both;
}
.ld-cap em { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.35em; color: #a3213f; }
.ld-count { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; color: #17181c; font-variant-numeric: tabular-nums; }

/* leaving: the scans fade, the window grows into the page's dark card (--tx/--ty/--sx/--sy from
   app.js), the halves part and fade, the curtain fades, and the window dissolves into the card */
.intro-splash.is-leaving .ld-pics, .intro-splash.is-leaving .ld-win-mark { animation: ld-out-fade 160ms var(--ease) both; }
.intro-splash.is-leaving .ld-win-box { animation: ld-win-out 560ms cubic-bezier(0.76, 0, 0.24, 1) both, ld-out-fade 220ms var(--ease) 500ms both; }
@keyframes ld-win-out { to { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1.2), var(--sy, 1.2)); } }
.intro-splash.is-leaving .ld-a { animation: ld-part-a 460ms cubic-bezier(0.76, 0, 0.24, 1) both; }
.intro-splash.is-leaving .ld-b { animation: ld-part-b 460ms cubic-bezier(0.76, 0, 0.24, 1) both; }
@keyframes ld-part-a { to { transform: translateX(-30vw); opacity: 0; } }
@keyframes ld-part-b { to { transform: translateX(30vw); opacity: 0; } }
.intro-splash.is-leaving .ld-top, .intro-splash.is-leaving .ld-foot { animation: ld-out-fade 240ms var(--ease) both; }
.intro-splash.is-leaving .ld-curtain { animation: ld-out-fade 280ms var(--ease) 360ms both; }
@keyframes ld-out-fade { to { opacity: 0; } }
/* nothing dark to grow into: the window just swells a little and fades with the curtain */
.intro-splash.is-leaving.no-target .ld-win-box { animation: ld-win-out 560ms cubic-bezier(0.76, 0, 0.24, 1) both, ld-out-fade 260ms var(--ease) 260ms both; }

/* page changes: the curtain comes down over the page being left with a scan line on its edge,
   then the page's name splits around the window, quicker */
.intro-splash.is-page-loader {
    --enter: 300ms;
    --rise-at: 0ms; --rise: 360ms;
    --split-at: 200ms; --split: 380ms;
    --pics-at: 440ms; --slot: 70ms;
    animation-delay: 3s;
}
.intro-splash.is-page-loader:not(.is-leaving) .ld-curtain { animation: ld-curtain-in 300ms cubic-bezier(0.45, 0, 0.1, 1) both; }
.intro-splash::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2px; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, #e07a90 20%, #c8405f 50%, #e07a90 80%, transparent);
    box-shadow: 0 0 18px 2px rgba(200, 64, 95, 0.45);
}
.intro-splash.is-page-loader:not(.is-leaving)::after { animation: ld-scan-in 300ms cubic-bezier(0.45, 0, 0.1, 1) both; }
@keyframes ld-curtain-in { from { transform: translateY(-100%); } }
@keyframes ld-scan-in { 0% { opacity: 1; transform: translateY(-100vh); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2px); } }

@media (max-width: 600px) {
    .intro-splash { --win: clamp(108px, 30vw, 160px); --fs: clamp(44px, 15vw, 96px); --gap: 10px; }
    .ld-win-box { border-radius: 7px; }   /* it grows a lot taller than wide into the phone's cards */
    .ld-cap { display: none; }
    .ld-foot { justify-content: flex-end; }
}

/* the header logo is already drawn when the loader leaves */
body.has-intro .navbar .brand-mark .bm-a, body.has-intro .navbar .brand-mark .bm-b { animation: none; stroke-dashoffset: 0; }

/* Pull to refresh */
.ptr {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1300;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1b1c20;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
    transform: translateY(calc(-60px + var(--ptr-y, 0px))) rotate(calc(var(--ptr, 0) * 270deg));
    opacity: var(--ptr-o, 0);
    pointer-events: none;
}
.ptr.is-settling { transition: transform 380ms var(--ease-spring), opacity 280ms var(--ease); }
.ptr-ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.ptr-track { fill: none; stroke: rgba(243, 240, 234, 0.14); stroke-width: 3; }
.ptr-fill { fill: none; stroke: var(--a-1); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 88; stroke-dashoffset: calc(88 - 88 * var(--ptr, 0)); }
.ptr-mark { width: 18px; height: 18px; overflow: visible; }
.ptr-mark path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.ptr-mark .bm-a { stroke: #f3f0ea; }
.ptr-mark .bm-b { stroke: var(--a-1); }
.ptr-mark .bm-dot { fill: var(--a-1); }
.ptr.is-refreshing .ptr-ring { animation: ptr-spin 900ms linear infinite; }
.ptr.is-refreshing .ptr-fill { stroke-dashoffset: 60; }
.ptr.is-done .ptr-fill { stroke: var(--ok-fill, #1b8f61); stroke-dashoffset: 0; }
@keyframes ptr-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (hover: none) and (pointer: coarse) {
    html { overscroll-behavior-y: none; }   /* the custom pull replaces the browser's own */
}

@media (prefers-reduced-motion: reduce) {
    .intro-splash { display: none; }
}

/* --------------------------------------------------------------------------
   36. History: roomy cards with a 3D preview
   -------------------------------------------------------------------------- */
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; gap: 1.4rem; }
.hcard {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 22px;
}
.hcard-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: radial-gradient(90% 80% at 50% 35%, #2f3137 0%, #1b1c20 60%, #131417 100%);
    overflow: hidden;
}
.hcard-thumb.is-clickable { cursor: pointer; }
.hcard-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 400ms var(--ease); }
.hcard-thumb img:not([src]) { opacity: 0; }
.hcard:hover .hcard-thumb img { transform: scale(1.05); }
.hcard-thumb.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(243, 240, 234, 0.08) 50%, transparent 70%);
    animation: ui-shimmer 1.4s linear infinite;
}
.hcard-thumb.is-empty { display: grid; place-items: center; }
.hcard-placeholder { width: 44px; height: 44px; color: rgba(243, 240, 234, 0.35); }
.hcard-status { position: absolute; top: 0.85rem; left: 0.85rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hcard-delete {
    position: absolute !important;
    top: 0.7rem;
    right: 0.7rem;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: rgba(15, 16, 18, 0.55) !important;
    border: 1px solid rgba(243, 240, 234, 0.14) !important;
    color: #f3f0ea !important;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-out), background var(--d-fast) var(--ease) !important;
}
.hcard:hover .hcard-delete, .hcard-delete:focus-visible { opacity: 1; transform: none; }
.hcard-delete:hover:not(:disabled) { background: rgba(196, 38, 46, 0.85) !important; }
.hcard-delete:disabled { opacity: 0.4 !important; transform: none; }

.hcard-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem 1.35rem 1.35rem; }
.hcard-head { display: flex; flex-direction: column; gap: 0.3rem; }
.hcard-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.hcard-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-xs); color: var(--t-3); }
.hcard-sub .item-job-id { font-size: var(--fs-2xs); color: var(--t-3); background: none; padding: 0; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-dot { opacity: 0.6; }

.hcard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
.hcard-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--s-1); border: 1px solid var(--line-1); min-width: 0; }
.hcard-stat dt { font-size: var(--fs-2xs); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); }
.hcard-stat dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.hcard-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.hcard-view { width: 100%; justify-content: center; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.hcard-downloads { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.45rem !important; }
.hcard-downloads .btn-download-mini { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 12px; font-size: var(--fs-xs); }

/* Header: one tidy row; on phones the tab bar already offers "Ana Menü" */
.history-header-actions { flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 600px) {
    .history-grid { grid-template-columns: 1fr !important; gap: 1.1rem; }
    .history-header { gap: 1rem; }
    .history-header-actions { width: 100%; flex-wrap: nowrap; }
    #btnHistoryBackToMenu { display: none; }
    #btnRefreshHistory { flex: 0 0 auto; }
    #btnNewScanFromHistory { flex: 1; justify-content: center; }
    .history-count-badge { flex: 0 0 auto; }
    .hcard-delete { opacity: 1; transform: none; }
    .hcard-body { padding: 1.1rem 1.1rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   37. Hero: cinematic graphite stage
   A dark, full-width panel: drifting burgundy light over a perspective build plate, film grain and
   a cursor spotlight; the live 3D scan story sits inside it (no card of its own) with glass readouts
   floating around it, and a ticker of scannable things along the bottom.
   -------------------------------------------------------------------------- */
.home-hero {
    --t-1: #f3f0ea;
    --t-2: #c4c0b7;
    --t-3: #8f8b83;
    --s-3: rgba(243, 240, 234, 0.07);
    --line-1: rgba(243, 240, 234, 0.08);
    --line-2: rgba(243, 240, 234, 0.14);
    --a-1: #c8405f;
    --a-text: #e07a90;
    --mx: 0.62;
    --my: 0.4;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(2.5rem, 5vw, 4.75rem) clamp(1.5rem, 4.5vw, 4.25rem) 0;
    min-height: min(820px, calc(100vh - 110px));
    border-radius: 36px;
    background: #0e0f11;
    color: var(--t-1);
    box-shadow: 0 40px 90px -50px rgba(14, 15, 17, 0.75), inset 0 0 0 1px rgba(243, 240, 234, 0.06);
}

/* Backdrop */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.hero-aurora-1 {
    width: 60%; aspect-ratio: 1; right: -12%; top: -24%;
    background: radial-gradient(circle, rgba(200, 64, 95, 0.75) 0%, rgba(122, 21, 48, 0.35) 45%, transparent 70%);
    animation: hero-drift-1 18s ease-in-out infinite alternate;
}
.hero-aurora-2 {
    width: 46%; aspect-ratio: 1; left: -14%; bottom: -28%;
    background: radial-gradient(circle, rgba(122, 21, 48, 0.7) 0%, rgba(80, 14, 32, 0.3) 50%, transparent 72%);
    animation: hero-drift-2 22s ease-in-out infinite alternate;
}
@keyframes hero-drift-1 { to { transform: translate(-14%, 12%) scale(1.12); } }
@keyframes hero-drift-2 { to { transform: translate(18%, -10%) scale(0.92); } }
/* the build plate: a perspective grid fading into the dark */
.hero-plate {
    position: absolute; left: -30%; right: -30%; bottom: -8%; height: 62%;
    overflow: hidden;
    transform: perspective(700px) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 85%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 85%);
}
/* the grid is one cell taller than the plate and slides by one cell, on the compositor */
.hero-plate::before {
    content: ""; position: absolute; left: 0; right: 0; top: -56px; bottom: 0;
    background-image:
        linear-gradient(rgba(243, 240, 234, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 240, 234, 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    animation: hero-plate-move 9s linear infinite;
}
@keyframes hero-plate-move { to { transform: translateY(56px); } }
.hero-spot {
    position: absolute; inset: 0;
    background: radial-gradient(520px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(224, 122, 144, 0.13), transparent 60%);
    transition: background 120ms linear;
}
.hero-grain {
    position: absolute; inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.09;
    mix-blend-mode: overlay;
    animation: hero-grain 1.2s steps(6) infinite;
}
@keyframes hero-grain {
    0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
    60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* Copy */
.home-hero .home-hero-copy { gap: 1.5rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); align-self: center; }
.home-hero .menu-app-tag { color: var(--t-2); border-color: var(--line-2); background: rgba(243, 240, 234, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.home-hero .menu-connection-pill { background: rgba(243, 240, 234, 0.06); border-color: var(--line-2); color: var(--t-1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.home-hero .home-headline {
    font-size: clamp(2.9rem, 5.7vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: var(--t-1);
}
/* gradient on each word: the headline's word reveal wraps them in transformed spans, which a
   background-clip on the <em> itself would not paint through */
.home-hero .home-headline em { display: block; white-space: nowrap; color: #e07a90; padding-right: 0.08em; }
.home-hero .home-headline em .ui-word > span {
    background: linear-gradient(100deg, #f6b9c6 0%, #e07a90 45%, #c8405f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-right: 0.06em;
}
.home-hero .home-headline em::after { background: linear-gradient(90deg, #c8405f, transparent) !important; }
.home-hero .home-lede { color: var(--t-2); max-width: 31rem; font-size: clamp(1.02rem, 1.25vw, 1.15rem); }
/* CTAs */
.home-hero .btn-accent { box-shadow: 0 18px 40px -16px rgba(200, 64, 95, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.hero-ghost {
    color: var(--t-1) !important;
    background: rgba(243, 240, 234, 0.06) !important;
    border: 1px solid rgba(243, 240, 234, 0.16) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-ghost:hover { background: rgba(243, 240, 234, 0.12) !important; border-color: rgba(243, 240, 234, 0.28) !important; }
.hero-ghost .ui-icon { transition: transform var(--d-base) var(--ease-out); }
.hero-ghost:hover .ui-icon { transform: translateY(3px); }

/* Readouts: glass chips */
.home-hero .home-facts { border-top: none; padding-top: 0; margin-top: 0.25rem; gap: 0.6rem; }
.home-hero .home-facts li {
    flex-direction: column;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    padding: 0.7rem 0.95rem;
    margin: 0;
    background: rgba(243, 240, 234, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.home-hero .home-facts li:last-child { padding-right: 0.95rem; border-right: 1px solid var(--line-2); }
.home-hero .home-facts strong { color: var(--t-1); }
.home-hero .home-facts span { color: var(--t-3); }
.home-hero .home-facts .hero-live { border-color: rgba(200, 64, 95, 0.45); background: rgba(200, 64, 95, 0.1); }
.home-hero .home-facts .hero-live strong { color: #f2a7b8; font-size: var(--fs-md); font-family: var(--font-sans); letter-spacing: -0.03em; }

/* Visual: the 3D story without a card, glass readouts floating around it */
.hero-art {
    position: relative;
    align-self: center;
    width: 110%;
    margin-right: -10%;
    transform: translate3d(calc((var(--mx) - 0.5) * -14px), calc((var(--my) - 0.5) * -10px), 0);
    transition: transform 400ms var(--ease-out);
}
.home-hero .home-stage {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    aspect-ratio: 640 / 610;
}
.home-hero .home-stage::before {
    /* soft pool of light under the object */
    content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%; height: 30%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(200, 64, 95, 0.28), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.home-hero .hs3d-corner { opacity: 0.55; }
.hero-float {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.95rem;
    border-radius: 16px;
    background: rgba(24, 25, 29, 0.55);
    border: 1px solid rgba(243, 240, 234, 0.12);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--t-1);
    font-size: var(--fs-xs);
    animation: hero-bob 6s ease-in-out infinite;
    pointer-events: none;
}
.hero-float b { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.02em; }
.hero-float .hf-k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); }
.hero-float-1 { top: 14%; left: -4%; animation-delay: -1s; }
.hero-float-2 { top: 40%; right: -2%; flex-direction: row; align-items: center; gap: 0.55rem; animation-delay: -3s; }
.hero-float-2 .hf-k { display: none; }
.hero-float-3 { bottom: 22%; left: 2%; animation-delay: -4.5s; }
.hf-dot { width: 9px; height: 9px; border-radius: 50%; background: #5fcf98; box-shadow: 0 0 0 4px rgba(95, 207, 152, 0.18), 0 0 12px rgba(95, 207, 152, 0.7); }
.hf-bar { display: block; width: 92px; height: 4px; margin-top: 0.35rem; border-radius: 4px; background: rgba(243, 240, 234, 0.1); overflow: hidden; }
.hf-bar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #9b2442, #e07a90); transform-origin: left center; animation: hf-fill 3.2s var(--ease) infinite; }
@keyframes hf-fill { 0% { transform: scaleX(0.06); } 70%, 100% { transform: none; } }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
#viewMainMenu.ui-enter .hero-float { animation: hero-float-in 900ms var(--ease-out) backwards, hero-bob 6s ease-in-out 900ms infinite; }
#viewMainMenu.ui-enter .hero-float-1 { animation-delay: 420ms, 1.3s; }
#viewMainMenu.ui-enter .hero-float-2 { animation-delay: 560ms, 1.5s; }
#viewMainMenu.ui-enter .hero-float-3 { animation-delay: 700ms, 1.7s; }
/* scale and opacity only: a second transform animation beside the bob would push both off the compositor */
@keyframes hero-float-in { from { opacity: 0; scale: 0.9; } }

/* Ticker along the bottom edge */
.hero-marquee {
    grid-column: 1 / -1;
    margin: 0 calc(-1 * clamp(1.5rem, 4.5vw, 4.25rem));
    padding: 1rem 0;
    border-top: 1px solid rgba(243, 240, 234, 0.08);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-marquee-track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: hero-marquee 38s linear infinite; }
.hero-marquee span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 240, 234, 0.5); white-space: nowrap; }
.hero-marquee i { width: 5px; height: 5px; border-radius: 50%; background: #c8405f; box-shadow: 0 0 10px rgba(200, 64, 95, 0.8); }
@keyframes hero-marquee { to { transform: translateX(-50%); } }

@media (max-width: 1100px) {
    .home-hero { grid-template-columns: 1fr; min-height: 0; }
    .home-hero .home-hero-copy { padding-bottom: 0; }
    .hero-art { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
    .home-hero { border-radius: 26px; padding: 2rem 1.25rem 0; gap: 1.25rem; }
    .home-hero .home-headline { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
    .home-hero .home-cta-row { width: 100%; }
    .home-hero .home-cta-row .btn { flex: 1 1 100%; justify-content: center; }
    .home-hero .home-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .home-hero .home-facts .hero-fact-formats { display: none; }
    .home-hero .home-facts li { min-width: 0; }
    .home-hero .home-facts li:last-child { grid-column: auto; }
    .hero-float { padding: 0.55rem 0.7rem; border-radius: 13px; }
    .hero-float b { font-size: var(--fs-sm); }
    .hero-float-1 { top: 16%; left: 0; }
    .hero-float-2 { top: auto; bottom: 30%; right: 0; }
    .hero-float-3 { display: none; }
    .hero-marquee { margin: 0 -1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-aurora, .hero-plate::before, .hero-grain, .hero-float, .hf-bar i, .hero-marquee-track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   38. Site-wide polish in the hero's language
   Numbered section heads, bento quick cards, gallery-style recent models, a burgundy stats band,
   connected process steps, two-column FAQ, a glass header and a footer with a CTA and wordmark.
   -------------------------------------------------------------------------- */
/* Section heads: "01 — STÜDYONDAN" with a burgundy rule */
#viewMainMenu .menu-container { counter-reset: home-sec; }
#viewMainMenu .home-section-head { counter-increment: home-sec; }
#viewMainMenu .home-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--t-3); letter-spacing: 0.14em;
}
#viewMainMenu .home-eyebrow::before {
    content: counter(home-sec, decimal-leading-zero);
    color: var(--a-text); font-weight: 700; letter-spacing: 0.04em;
}
#viewMainMenu .home-eyebrow::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--a-1), transparent); order: -1; display: none; }
#viewMainMenu .home-section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.02; }
#viewMainMenu .menu-container > * + * { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
#viewMainMenu .home-process { border-top: none !important; padding-top: 0 !important; }
#viewMainMenu .menu-container > .menu-grid { margin-top: 1.1rem; }

/* Quick cards: bento tiles */
.menu-grid { gap: 1rem; }
.menu-grid .menu-card {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.4rem;
    border-radius: 24px;
    background: linear-gradient(180deg, var(--s-1), var(--s-2));
    border: 1px solid var(--line-1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -32px rgba(23, 24, 28, 0.5);
    transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}
.menu-grid .menu-card::after {
    content: ""; position: absolute; right: -30%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(163, 33, 63, 0.16), transparent 70%);
    opacity: 0; transition: opacity 500ms var(--ease);
    pointer-events: none;
}
.menu-grid .menu-card:hover { transform: translateY(-5px); border-color: rgba(163, 33, 63, 0.28); box-shadow: 0 30px 50px -30px rgba(122, 21, 48, 0.45); }
.menu-grid .menu-card:hover::after { opacity: 1; }
.menu-grid .menu-card-icon-box[class] {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(140deg, #c8405f, #7a1530) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -10px rgba(163, 33, 63, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.menu-grid .menu-card:hover .menu-card-icon-box[class] { background: linear-gradient(140deg, #d4566f, #8e1b36) !important; color: #fff !important; transform: rotate(-6deg) scale(1.05); }
.menu-grid .menu-card-arrow { transition: transform 380ms var(--ease-spring), color var(--d-base) var(--ease); }
.menu-grid .menu-card:hover .menu-card-arrow { transform: translate(3px, -3px); color: var(--a-text); }

/* Recent models: gallery cards */
.recent-card { border-radius: 22px; overflow: hidden; transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease), border-color 420ms var(--ease); }
.recent-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(23, 24, 28, 0.6); border-color: rgba(163, 33, 63, 0.25); }
.recent-thumb::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(122, 21, 48, 0.35), transparent);
    opacity: 0; transition: opacity 420ms var(--ease);
}
.recent-card:hover .recent-thumb::before { opacity: 1; }

/* Stats: a burgundy band with the hero's build plate */
.home-stats {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem);
    background: radial-gradient(120% 140% at 0% 0%, #b52a4b 0%, #7a1530 45%, #3a0a17 100%);
    box-shadow: 0 40px 80px -50px rgba(122, 21, 48, 0.85);
}
.home-stats::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(80% 120% at 100% 100%, #000, transparent 70%);
            mask-image: radial-gradient(80% 120% at 100% 100%, #000, transparent 70%);
}
.home-stat { border-right-color: rgba(255, 255, 255, 0.14); }
.home-stat-value { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -0.05em; color: #fff; }
.home-stat:first-child .home-stat-value { color: #fff; }
.home-stat-label { color: rgba(255, 235, 240, 0.72); }

/* Process: connected steps */
.process-steps { position: relative; }
.process-figure {
    position: relative;
    border-radius: 26px;
    background: radial-gradient(120% 100% at 50% 0%, var(--s-1), var(--s-3));
    border: 1px solid var(--line-1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.process-step:hover .process-figure { background: radial-gradient(120% 100% at 50% 0%, var(--s-1), var(--s-3)); transform: translateY(-5px); border-color: rgba(163, 33, 63, 0.25); box-shadow: 0 30px 50px -34px rgba(122, 21, 48, 0.5); }
@media (min-width: 761px) {
    .process-step:not(:last-child) .process-figure::after {
        /* dashed connector to the next step, with a burgundy bead travelling along it */
        content: ""; position: absolute; top: 50%; left: 100%; width: clamp(1rem, 2.5vw, 2rem); height: 2px;
        background: repeating-linear-gradient(90deg, rgba(163, 33, 63, 0.5) 0 4px, transparent 4px 8px);
    }
}
.process-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2.4rem;
    line-height: 1;
    margin-top: 0.6rem;
    color: transparent;
    -webkit-text-stroke: 1px var(--a-1);
}
.process-step:hover .process-num { color: var(--a-1); letter-spacing: 0; }
.process-title { font-size: var(--fs-lg); letter-spacing: -0.03em; }

/* What scans well: tinted cards with a colour edge */
.suit-card { position: relative; overflow: hidden; border-radius: 26px; padding: 1.6rem 1.6rem 1.7rem; gap: 1.1rem; box-shadow: 0 20px 40px -34px rgba(23, 24, 28, 0.45); }
.suit-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.suit-good { background: linear-gradient(180deg, rgba(27, 143, 97, 0.06), var(--s-2) 40%); }
.suit-good::before { background: linear-gradient(90deg, #1b8f61, rgba(27, 143, 97, 0.1)); }
.suit-hard { background: linear-gradient(180deg, rgba(163, 33, 63, 0.06), var(--s-2) 40%); }
.suit-hard::before { background: linear-gradient(90deg, #a3213f, rgba(163, 33, 63, 0.1)); }
.suit-title { font-size: var(--fs-lg); letter-spacing: -0.02em; }

/* FAQ: two columns, a help card on the left */
.home-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.faq-aside { display: flex; flex-direction: column; gap: 1.6rem; position: sticky; top: 6rem; }
.faq-help {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
    padding: 1.4rem; border-radius: 24px;
    background: radial-gradient(120% 120% at 0% 0%, #2a2c31, #141518);
    color: #f3f0ea;
    box-shadow: 0 30px 60px -40px rgba(14, 15, 17, 0.8);
}
.faq-help strong { font-size: var(--fs-md); letter-spacing: -0.02em; }
.faq-help p { margin: 0 0 0.4rem; font-size: var(--fs-sm); line-height: 1.55; color: rgba(243, 240, 234, 0.68); }
.faq-help-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(140deg, #c8405f, #7a1530); color: #fff; margin-bottom: 0.3rem; }
.faq-help-icon .ui-icon { width: 20px; height: 20px; }
.faq-list { border-top: none; gap: 0.6rem; }
.faq-item { border: 1px solid var(--line-1); border-radius: 18px; background: var(--s-1); padding: 0 1rem; transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease); }
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: rgba(163, 33, 63, 0.3); background: var(--s-2); box-shadow: 0 20px 40px -32px rgba(122, 21, 48, 0.5); }
.faq-item summary { padding-top: 1.05rem; padding-bottom: 1.05rem; }

/* Header: glass bar with a burgundy hairline when it floats. Desktop only: on phones the bottom tab
   bar is a fixed child of the header, and a backdrop-filter here would make the header its containing
   block, pulling the tab bar up to the top (phones keep their blur on ::before, section 23). */
@media (min-width: 601px) {
    .navbar.is-scrolled {
        background: rgba(250, 248, 244, 0.72);
        backdrop-filter: blur(22px) saturate(170%);
        -webkit-backdrop-filter: blur(22px) saturate(170%);
    }
}
.navbar.is-scrolled::after {
    content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(163, 33, 63, 0.55), transparent);
}
@media (min-width: 761px) {
    .nav-actions > button:not(#btnNavNewScan):hover { background: rgba(163, 33, 63, 0.07); color: var(--a-text); }
}


/* Mobile browser note: a slim glass strip */
.mobile-browser-card { border-radius: 20px; }

@media (max-width: 760px) {
    .home-faq { grid-template-columns: 1fr; }
    .faq-aside { position: static; }
    .process-num { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   39. Inner screens in the hero's language
   The main card of each screen (upload drop zone, processing, QR, storage total) becomes the same
   cinematic graphite stage as the home hero; the rest gets bento cards and glass controls.
   -------------------------------------------------------------------------- */

/* Shared stage: dark tokens + burgundy light + build-plate grid */
.drop-card, #viewProcessing .processing-card, .qr-connection-box, .storage-hero-card, .error-state-card, .primary-download-box {
    --t-1: #f3f0ea; --t-2: #c4c0b7; --t-3: #8f8b83;
    --s-1: rgba(243, 240, 234, 0.04); --s-2: rgba(243, 240, 234, 0.06); --s-3: rgba(243, 240, 234, 0.08); --s-4: rgba(243, 240, 234, 0.12);
    --line-1: rgba(243, 240, 234, 0.08); --line-2: rgba(243, 240, 234, 0.14); --line-3: rgba(243, 240, 234, 0.26);
    --a-1: #c8405f; --a-text: #e07a90;
    --text-main: var(--t-1); --text-muted: var(--t-2); --text-dim: var(--t-3);
    --bg-surface: var(--s-2); --bg-surface-elevated: var(--s-1); --border-subtle: var(--line-1); --border-strong: var(--line-2);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--t-1);
    border: none !important;
    border-radius: 32px !important;
    background:
        radial-gradient(55% 70% at 88% -5%, rgba(200, 64, 95, 0.38), transparent 62%),
        radial-gradient(50% 60% at -5% 105%, rgba(122, 21, 48, 0.42), transparent 66%),
        linear-gradient(rgba(243, 240, 234, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(243, 240, 234, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        #0e0f11 !important;
    box-shadow: 0 40px 90px -50px rgba(14, 15, 17, 0.75), inset 0 0 0 1px rgba(243, 240, 234, 0.06) !important;
}

/* Glass buttons inside a stage */
.drop-card .btn-secondary, .drop-card .btn-primary, .error-state-card .btn-secondary,
#viewProcessing .processing-card .btn-secondary, .qr-connection-box .btn-secondary, .storage-hero-card .btn-secondary {
    color: var(--t-1) !important;
    background: rgba(243, 240, 234, 0.07) !important;
    border: 1px solid rgba(243, 240, 234, 0.16) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.drop-card .btn-secondary:hover, .drop-card .btn-primary:hover,
#viewProcessing .processing-card .btn-secondary:hover, .qr-connection-box .btn-secondary:hover, .storage-hero-card .btn-secondary:hover {
    background: rgba(243, 240, 234, 0.13) !important;
    border-color: rgba(243, 240, 234, 0.28) !important;
}
.drop-card .btn-accent { box-shadow: 0 18px 40px -16px rgba(200, 64, 95, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; }
.drop-card .btn-action-icon { background: rgba(243, 240, 234, 0.1) !important; color: #fff !important; }
.drop-card .btn-action-sub { color: rgba(243, 240, 234, 0.62) !important; }
.drop-card .pill-badge, .qr-connection-box .qr-badge, .storage-hero-card .storage-badge {
    color: var(--t-2) !important; background: rgba(243, 240, 234, 0.05) !important; border-color: var(--line-2) !important;
}

/* Upload */
.drop-card { padding: clamp(2rem, 4vw, 3.25rem) !important; }
.drop-card:hover { box-shadow: 0 50px 100px -50px rgba(122, 21, 48, 0.7), inset 0 0 0 1px rgba(224, 122, 144, 0.25) !important; }
.drop-card .drop-heading { font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.05em; }
.drop-card .drop-subtext { color: var(--t-2); }
.drop-card .ill .ill-line, .drop-card .ill .ill-dash { stroke: rgba(243, 240, 234, 0.75); }
.drop-card .ill .ill-fill { fill: rgba(243, 240, 234, 0.08); stroke: rgba(243, 240, 234, 0.75); }
.drop-card .ill .ill-phone { fill: #f3f0ea; }
.drop-card .drop-illustration { filter: drop-shadow(0 20px 30px rgba(200, 64, 95, 0.25)); }
.scan-tips { border-radius: 32px !important; padding: clamp(1.6rem, 3vw, 2.2rem) !important; background: linear-gradient(180deg, var(--s-1), var(--s-2)) !important; border: 1px solid var(--line-1) !important; box-shadow: 0 30px 60px -45px rgba(23, 24, 28, 0.5); }
.scan-tips-title { font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important; letter-spacing: -0.04em; }
.scan-tips .tip-num {
    font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--a-1); min-width: 2.1rem;
}

/* Processing: the ring glows on the stage */
#viewProcessing .processing-card { padding: clamp(1.6rem, 3vw, 2.4rem) !important; }
#viewProcessing .proc-header-icon { background: linear-gradient(140deg, #c8405f, #7a1530) !important; color: #fff !important; }
#viewProcessing .proc-ring { filter: drop-shadow(0 0 30px rgba(200, 64, 95, 0.35)); }
#viewProcessing .proc-ring-track { stroke: rgba(243, 240, 234, 0.1) !important; }
#viewProcessing .proc-ring-fill { stroke: #e07a90 !important; }
#viewProcessing .progress-big-number { color: #fff !important; }
#viewProcessing .progress-track { background: rgba(243, 240, 234, 0.1) !important; }

/* Connection */
.qr-connection-box { padding: clamp(1.6rem, 3vw, 2.4rem) !important; }
.qr-connection-box .qr-display-wrapper { position: relative; }
.qr-connection-box .qr-display-wrapper::before {
    content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 64, 95, 0.45), transparent 65%);
    filter: blur(10px);
    animation: qr-pulse 3.6s ease-in-out infinite;
}
@keyframes qr-pulse { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
.qr-connection-box .server-url-display-box { background: rgba(243, 240, 234, 0.05) !important; border: 1px solid var(--line-2) !important; }
.qr-connection-box .url-copy-row { background: rgba(0, 0, 0, 0.25) !important; border-color: var(--line-2) !important; }
.qr-connection-box .url-text { color: var(--t-1) !important; }
.qr-connection-box .https-cert-notice-box { background: rgba(243, 240, 234, 0.05) !important; border: 1px solid rgba(224, 122, 144, 0.3) !important; color: var(--t-2) !important; }
.qr-connection-box .https-cert-notice-box strong, .qr-connection-box .cert-title { color: var(--t-1) !important; }
.qr-connection-box .cert-icon { color: #e07a90 !important; }
.connection-status-card, .manual-connection-card { border-radius: 26px !important; }

/* Storage: the total as a stage, metrics as bento tiles */
.storage-hero-card { padding: clamp(1.6rem, 3vw, 2.4rem) !important; }
.storage-hero-card .storage-hero-main-stat { color: #fff !important; letter-spacing: -0.06em; }
.storage-hero-card .storage-hero-job-count, .storage-hero-card .storage-last-sync, .storage-hero-card .storage-hero-label { color: var(--t-2) !important; }
.storage-hero-card .storage-metrics-grid { gap: 0.8rem; border-top: none !important; }
.storage-hero-card .storage-metric-card {
    border-radius: 20px !important; padding: 1rem 1.1rem !important;
    background: rgba(243, 240, 234, 0.05) !important; border: 1px solid var(--line-1) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.storage-hero-card .storage-metric-card + .storage-metric-card { border-left: 1px solid var(--line-1) !important; }
.storage-hero-card .metric-value { color: #fff !important; }
.storage-hero-card .metric-title, .storage-hero-card .metric-hint { color: var(--t-2) !important; }
.storage-hero-card .metric-icon-box { background: linear-gradient(140deg, #c8405f, #7a1530) !important; color: #fff !important; }

/* Result screen: bento download + analysis cards */
.completion-card .success-icon-badge { box-shadow: 0 0 0 8px rgba(27, 143, 97, 0.12), 0 12px 30px -10px rgba(27, 143, 97, 0.6); }
.completion-title { letter-spacing: -0.05em !important; }

/* Storage: metric tiles and per-scan cards */
#viewStorage .storage-metrics-grid { gap: 0.9rem; border: none !important; margin-top: 1rem; }
#viewStorage .storage-metric-card {
    border: 1px solid var(--line-1) !important;
    border-radius: 22px !important;
    padding: 1.1rem 1.2rem !important;
    background: linear-gradient(180deg, var(--s-1), var(--s-2)) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -32px rgba(23, 24, 28, 0.5);
    transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}
#viewStorage .storage-metric-card:hover { transform: translateY(-4px); border-color: rgba(163, 33, 63, 0.25) !important; box-shadow: 0 26px 46px -30px rgba(122, 21, 48, 0.45); }
#viewStorage .metric-icon-box:not(.cleanable) { background: linear-gradient(140deg, #c8405f, #7a1530) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(163, 33, 63, 0.8); }
#viewStorage .metric-value { letter-spacing: -0.04em; }
.storage-job-card {
    border-radius: 24px !important;
    box-shadow: 0 20px 44px -36px rgba(23, 24, 28, 0.5);
    transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}
.storage-job-card:hover { transform: translateY(-3px); border-color: rgba(163, 33, 63, 0.22) !important; box-shadow: 0 28px 50px -34px rgba(122, 21, 48, 0.4); }

/* Error: same stage, the failed state reads calm rather than alarming */
.error-state-card { max-width: 760px; margin: clamp(1rem, 4vw, 3rem) auto 0; padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem) !important; }
.error-state-card .error-state-icon { background: linear-gradient(140deg, #c8405f, #7a1530) !important; color: #fff !important; border: none !important; box-shadow: 0 0 0 10px rgba(200, 64, 95, 0.12), 0 16px 36px -12px rgba(200, 64, 95, 0.7) !important; }
.error-state-card .error-state-title { color: #fff; letter-spacing: -0.05em; }
.error-state-card .error-state-desc { color: var(--t-2) !important; background: rgba(243, 240, 234, 0.05) !important; border: 1px solid var(--line-2) !important; }
.error-state-card .btn-primary { background: linear-gradient(140deg, #c8405f, #8e1b36) !important; color: #fff !important; border: none !important; box-shadow: 0 18px 40px -16px rgba(200, 64, 95, 0.75) !important; }
@media (max-width: 600px) {
    #viewStorage .storage-metric-card { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.95rem !important; }
    #viewStorage .storage-metric-card .metric-value { font-size: clamp(1.05rem, 5.2vw, 1.35rem) !important; white-space: nowrap; }
    #viewStorage .storage-metric-card .metric-data-group { min-width: 0; width: 100%; }
}

/* Result: the STL download is the focal point, on the same stage */
.primary-download-box { padding: 1.3rem 1.4rem !important; }
.primary-download-box .file-format-badge { background: rgba(243, 240, 234, 0.1) !important; color: #f3f0ea !important; border: 1px solid var(--line-2) !important; }
.primary-download-box .download-filename { color: #f3f0ea !important; }
.primary-download-box .download-size, .primary-download-box small, .primary-download-box span:not(.file-format-badge):not(.download-filename) { color: var(--t-2); }
.primary-download-box .btn { background: linear-gradient(140deg, #c8405f, #8e1b36) !important; color: #fff !important; border: none !important; box-shadow: 0 18px 40px -16px rgba(200, 64, 95, 0.8) !important; }

/* --------------------------------------------------------------------------
   40. Phones: navigation in the top header (no bottom tab bar)
   Row 1: brand + connection status; row 2: the five destinations as a light segmented strip.
   Scrolled: the header keeps floating at the top, the connection status fades away and the
   strip drops its labels to stay compact.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .app-wrapper { padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important; }

    .navbar { flex-wrap: wrap !important; row-gap: 0.55rem; }
    .navbar > .brand { flex: 1 1 auto; min-height: 36px; }

    .nav-actions {
        position: relative !important;
        order: 2;
        flex: 1 1 100%;
        left: auto; right: auto; bottom: auto;
        z-index: auto;
        padding: 0.25rem;
        border-radius: 16px;
        border: 1px solid var(--line-1);
        background: rgba(23, 24, 28, 0.045);
        box-shadow: none;
    }
    .nav-actions::before { display: none; }

    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn {
        min-height: 46px;
        padding: 0.35rem 0.1rem;
        border-radius: 12px;
        color: var(--t-2);
        transition: min-height 260ms var(--ease-out), color var(--d-fast) var(--ease);
    }
    .nav-menu-btn span, .nav-action-btn span, .nav-history-btn span, .nav-connect-btn span, .nav-storage-btn span {
        max-height: 1.2em; overflow: hidden; transition: max-height 240ms var(--ease), opacity 200ms var(--ease);
    }
    .nav-menu-btn:hover, .nav-action-btn:hover, .nav-history-btn:hover, .nav-connect-btn:hover, .nav-storage-btn:hover { color: var(--t-1); }
    .nav-menu-btn.active, .nav-action-btn.active, .nav-history-btn.active, .nav-connect-btn.active, .nav-storage-btn.active { color: var(--a-text); }
    .nav-actions > #btnNavNewScan { color: var(--a-text); }
    .ui-nav-indicator { background: #fff; border: 1px solid var(--line-1); box-shadow: 0 6px 16px -10px rgba(23, 24, 28, 0.45); border-radius: 12px; }

    /* Connection status: top right of row 1, gone once the page scrolls */
    .connection-pill {
        position: absolute !important;
        top: -3.05rem;
        right: 0.1rem;
        transition: opacity 240ms var(--ease), transform 320ms var(--ease-out) !important;
    }
    .navbar.is-scrolled .connection-pill { opacity: 0; transform: translateY(-10px) scale(0.9) !important; pointer-events: none; }

    /* Scrolled: icon-only strip */
    .navbar.is-scrolled { row-gap: 0.4rem; }
    .navbar.is-scrolled .nav-actions { margin-top: 0; }
    .navbar.is-scrolled .nav-menu-btn, .navbar.is-scrolled .nav-action-btn, .navbar.is-scrolled .nav-history-btn,
    .navbar.is-scrolled .nav-connect-btn, .navbar.is-scrolled .nav-storage-btn { min-height: 36px; gap: 0; }
    .navbar.is-scrolled .nav-actions button span { max-height: 0; opacity: 0; }

    .alert-container { top: 8.4rem; }

}

/* 40b. Phones: one compact header row (~52px) — logo mark, icon tabs, connection dot */
@media (max-width: 600px) {
    .navbar { flex-wrap: nowrap !important; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem !important; row-gap: 0; }
    .navbar > .brand { flex: 0 0 auto; min-height: 0; }
    .navbar .brand-text { display: none !important; }
    .navbar .brand-icon { width: 28px; height: 28px; }

    .nav-actions {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr)) auto !important;
        align-items: center;
        padding: 0.2rem;
        border-radius: 14px;
    }
    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn,
    .navbar.is-scrolled .nav-menu-btn, .navbar.is-scrolled .nav-action-btn, .navbar.is-scrolled .nav-history-btn,
    .navbar.is-scrolled .nav-connect-btn, .navbar.is-scrolled .nav-storage-btn { min-height: 36px; padding: 0.2rem 0; gap: 0; border-radius: 10px; }
    .nav-actions button span { display: none; }
    .ui-nav-indicator { border-radius: 10px; }

    /* connection: just the status dot, as the strip's last cell; collapses away when scrolled */
    .connection-pill {
        position: static !important;
        top: auto; right: auto;
        width: 30px; height: 30px; min-width: 0; max-width: 30px;
        margin-left: 0.15rem;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50% !important;
        overflow: hidden;
        transition: max-width 300ms var(--ease-out), margin 300ms var(--ease-out), opacity 220ms var(--ease) !important;
    }
    .connection-pill .connection-label, .connection-pill .chevron-icon { display: none !important; }
    .navbar.is-scrolled .connection-pill { max-width: 0; margin-left: 0; opacity: 0; border-width: 0 !important; transform: none !important; }

    /* the background-scan chip hangs just below the bar instead of squeezing the row */
    .nav-job-chip { position: absolute !important; top: calc(100% + 0.4rem); right: 0.8rem; }

    .alert-container { top: 4.6rem; }
}
@media (max-width: 600px) {
    .navbar .connection-pill {
        display: inline-flex !important;
        align-items: center;
        align-self: center;
        height: 30px !important;
        min-height: 0 !important;
        line-height: 1;
        box-sizing: border-box;
    }
    .navbar .connection-pill .status-indicator { display: block !important; flex: 0 0 auto; width: 9px; height: 9px; margin: 0 !important; }
    .navbar.is-scrolled .connection-pill { height: 30px !important; }
}

/* iOS must not inflate text on rotation (it breaks the phone layouts) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   41. In-app photo camera (shutter mode) and the new upload choices
   -------------------------------------------------------------------------- */
/* Photo mode: a white shutter instead of the red record button, no record timer */
.scan-recorder.is-photo-mode .scan-rec-record > span { background: #fff; }
.scan-recorder.is-photo-mode .scan-rec-record:active:not(:disabled) > span { transform: scale(0.86); background: #f2d6dd; }
.scan-recorder.is-photo-mode .scan-rec-time { display: none; }
.scan-recorder-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.scan-recorder-flash.on { animation: scan-flash 260ms ease-out; }
@keyframes scan-flash { 0% { opacity: 0.75; } 100% { opacity: 0; } }
.scan-rec-sent { font-weight: 500; opacity: 0.75; }

/* Upload choices: shutter first, then automatic capture and gallery side by side, video as a link */
.drop-action-group .btn-video-camera-action, .drop-action-group .btn-video-hero-action { min-width: 0; }
.drop-video-link {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 0.15rem;
    padding: 0.3rem 0.5rem;
    border: none;
    background: none;
    color: var(--t-2);
    font: inherit;
    font-size: var(--fs-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.drop-video-link:hover { color: var(--t-1); }
@media (max-width: 600px) {
    .drop-action-group { grid-template-columns: 1fr 1fr !important; }
    .drop-action-group .btn-action-sub { display: none; }
    .drop-action-group .btn-photo-hero-action .btn-action-sub { display: block; }
}
@media (max-width: 600px) {
    .drop-action-group .btn-video-camera-action, .drop-action-group .btn-video-hero-action {
        flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
        padding: 0.9rem 0.6rem; text-align: center;
    }
    .drop-action-group .btn-video-camera-action .btn-action-col, .drop-action-group .btn-video-hero-action .btn-action-col { align-items: center; }
    .drop-action-group .btn-video-camera-action .btn-action-title, .drop-action-group .btn-video-hero-action .btn-action-title { font-size: 0.95rem; white-space: nowrap; }
}

/* Result: surface choice (detailed / smooth), styled like the real-size row */
.viewer-surface-panel {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem 1.2rem; padding: 0.9rem 1rem;
    background: var(--s-1); border-top: 1px solid var(--line-1);
}
.viewer-surface-panel .size-panel-hint { flex-basis: 100%; }
.surface-toggle { display: inline-flex; padding: 0.2rem; border-radius: 12px; background: rgba(243, 240, 234, 0.06); border: 1px solid var(--line-1); }
.surface-toggle button {
    border: none; background: none; color: var(--t-2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
    padding: 0.45rem 0.9rem; border-radius: 9px; cursor: pointer; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.surface-toggle button:hover { color: var(--t-1); }
.surface-toggle button.is-active { background: linear-gradient(140deg, #c8405f, #8e1b36); color: #fff; box-shadow: 0 8px 18px -10px rgba(200, 64, 95, 0.8); }
.viewer-surface-panel.is-busy .surface-toggle { opacity: 0.55; pointer-events: none; }
.viewer-surface-panel.is-busy #surfacePanelState { animation: ui-fade 900ms ease-in-out infinite alternate; }

/* Live coaching chip in the camera (Vision on the Mac): object name + share of the frame */
.scan-rec-object[data-tone="ok"] { background: rgba(27, 143, 97, 0.85) !important; color: #fff; }
.scan-rec-object[data-tone="warn"] { background: rgba(200, 64, 95, 0.9) !important; color: #fff; }
.scan-rec-object { text-transform: capitalize; transition: background 300ms var(--ease); }

/* --------------------------------------------------------------------------
   42. Full-width page: header, content and footer all span the screen
   One slim gutter on both sides of everything, no centred column with empty bands beside it.
   -------------------------------------------------------------------------- */
:root { --gx: clamp(1rem, 2.2vw, 2.5rem); }
@media (min-width: 601px) {
    .app-wrapper {
        max-width: none;
        padding-left: var(--gx);
        padding-right: var(--gx);
    }
    /* Header: the bar spans the page, its contents line up with the content's edges */
    .navbar {
        margin-left: calc(-1 * var(--gx));
        margin-right: calc(-1 * var(--gx));
        padding-left: var(--gx);
        padding-right: var(--gx);
    }
    /* floating (scrolled) header: a panel as wide as the content */
    .navbar.is-scrolled {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 1.1rem;
        padding-right: 0.7rem;
    }
    .menu-container, .view-panel { max-width: none; }
}
@media (min-width: 1400px) {
    /* the hero is wide enough: keep the 3D story and its glass readouts inside the panel */
    .hero-art { width: 100%; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   43. Recent models: a scrolling strip whose edge cards turn sideways
   -------------------------------------------------------------------------- */
.home-recent .home-section-head-row { align-items: flex-end; }
.recent-controls { display: flex; align-items: center; gap: 0.45rem; }
.recent-nav {
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line-2); background: var(--s-1); color: var(--t-1);
    cursor: pointer; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.recent-nav .ui-icon { width: 18px; height: 18px; }
.recent-nav:hover:not(:disabled) { background: linear-gradient(140deg, #c8405f, #8e1b36); color: #fff; border-color: transparent; transform: scale(1.06); }
.recent-nav:disabled { opacity: 0.35; cursor: default; }
.recent-controls.no-scroll .recent-nav { display: none; }

.home-recent-list {
    display: flex !important;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    perspective: 1400px;
    padding: 0.6rem clamp(1rem, 2.2vw, 2.5rem) 2.4rem;   /* room for the card shadows */
    margin: 0 calc(-1 * clamp(1rem, 2.2vw, 2.5rem));
    scroll-padding-inline: clamp(1rem, 2.2vw, 2.5rem);
    cursor: grab;
}
.home-recent-list::-webkit-scrollbar { display: none; }
.home-recent-list.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.home-recent-list.is-dragging .recent-card { pointer-events: none; }
/* Each scan is one graphite object, like the hero and "how it works" stages. The cards stand
   straight and never move vertically (no lean, no hover lift), so the row stays still while the
   page scrolls past it. */
.home-recent-list .recent-card {
    position: relative;
    flex: 0 0 clamp(240px, 21vw, 300px);
    scroll-snap-align: start;
    transform: none;
    border: 1px solid rgba(243, 240, 234, 0.08);
    background: linear-gradient(180deg, #1d1e22 0%, #141518 100%);
    color: #f3f0ea;
    box-shadow: 0 16px 30px -22px rgba(23, 24, 28, 0.7);
    transition: box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.home-recent-list .recent-card:hover { transform: none; border-color: rgba(200, 64, 95, 0.5); box-shadow: 0 18px 34px -22px rgba(122, 21, 48, 0.6); }
.home-recent-list .recent-card:focus-visible { outline: 2px solid #c8405f; outline-offset: 3px; }
.home-recent-list.is-dragging .recent-card { transition: none; }
.home-recent-list .recent-thumb { aspect-ratio: 5 / 4; background: radial-gradient(70% 58% at 50% 44%, #393b42 0%, #222327 58%, rgba(29, 30, 34, 0) 100%); }
.home-recent-list .recent-card:hover .recent-thumb img { transform: scale(1.04); }
/* the hover glow sits under the model and fades out before the picture's edges */
.home-recent-list .recent-thumb::before { inset: 0; height: auto; background: radial-gradient(55% 32% at 50% 82%, rgba(200, 64, 95, 0.3), transparent 72%); }
.home-recent-list .recent-body { gap: 0.25rem; padding: 0.15rem 3.6rem 1.1rem 1.1rem; }
.home-recent-list .recent-date { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.02em; color: #f3f0ea; }
.home-recent-list .recent-dims { font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: rgba(243, 240, 234, 0.58); }
.home-recent-list .recent-tag.is-measured { margin-top: 0.4rem; color: #8fd8ae !important; border-color: rgba(143, 216, 174, 0.35); background: rgba(143, 216, 174, 0.08); }
.recent-new {
    position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
    padding: 0.22rem 0.6rem; border-radius: var(--r-pill);
    background: linear-gradient(140deg, #c8405f, #8e1b36); color: #fff;
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.01em;
    box-shadow: 0 6px 14px -6px rgba(122, 21, 48, 0.8);
}
.recent-go {
    position: absolute; right: 1rem; bottom: 1.1rem;
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(243, 240, 234, 0.16); color: #f3f0ea;
    transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.recent-go .ui-icon { width: 16px; height: 16px; transition: transform 380ms var(--ease-spring); }
.recent-card:hover .recent-go { background: linear-gradient(140deg, #c8405f, #8e1b36); border-color: transparent; }
.recent-card:hover .recent-go .ui-icon { transform: translate(2px, -2px); }
/* fade the edges where more cards wait beyond them */
.home-recent-list.is-more-left, .home-recent-list.is-more-right {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.home-recent-list.is-more-left { --fade-l: 64px; }
.home-recent-list.is-more-right { --fade-r: 64px; }
@media (max-width: 600px) {
    .home-recent-list.is-more-left { --fade-l: 28px; }
    .home-recent-list.is-more-right { --fade-r: 36px; }
}
/* progress of the strip, like a timeline under it */
.recent-progress { position: relative; height: 2px; margin-top: 0.2rem; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.recent-progress i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0.06);
    background: linear-gradient(90deg, #c8405f, #7a1530); transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.recent-card img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 600px) {
    .home-recent-list .recent-card { flex: 0 0 72%; }
    .home-recent-list { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scroll-padding-inline: 1rem; }
}
/* the entrance animation must let go afterwards, or its final transform stays on the cards */
.home-recent-list.ui-stagger > .recent-card { animation-fill-mode: backwards; }

/* --------------------------------------------------------------------------
   44. How it works: the newest scan from photos to print (motion.js)
   Only with .is-scrolly (set by motion.js once WebGL and a scan exist); otherwise the
   illustrated cards above stay as they are.
   -------------------------------------------------------------------------- */
#homeProcess.is-scrolly .hp3d-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
#homeProcess.is-scrolly .process-steps { display: flex; flex-direction: column; gap: 0; padding: 12vh 0 18vh; }
#homeProcess.is-scrolly .process-step {
    min-height: 62vh;
    justify-content: center;
    gap: 0.6rem;
    opacity: 0.28;
    transform: translateX(-6px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
#homeProcess.is-scrolly .process-step.is-current { opacity: 1; transform: none; }
#homeProcess.is-scrolly .process-step.is-current .process-num { color: var(--a-1); }
#homeProcess.is-scrolly .process-figure { display: none; }
#homeProcess.is-scrolly .process-num { font-size: clamp(2.6rem, 4vw, 3.6rem); }
#homeProcess.is-scrolly .process-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; }
#homeProcess.is-scrolly .process-desc { font-size: var(--fs-md); max-width: 30rem; }

.hp3d { position: sticky; top: 96px; height: min(calc(100vh - 128px), 760px); }
.hp3d-stage {
    position: relative;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(90% 70% at 50% 30%, #2f3137 0%, #1b1c20 55%, #121316 100%);
    box-shadow: var(--elev-3), inset 0 0 0 1px rgba(243, 240, 234, 0.06);
}
.hp3d-stage::before {
    content: ""; position: absolute; left: 14%; right: 14%; bottom: 10%; height: 30%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(200, 64, 95, 0.24), transparent 70%);
    filter: blur(22px);
    pointer-events: none;
}
.hp3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp3d-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); color: var(--t-1); }
.hp3d-hud .hs3d-corner { opacity: 0.55; }
.hp3d-top { position: absolute; top: 1.15rem; left: 1.6rem; right: 1.6rem; display: flex; justify-content: space-between; font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--t-3); }
.hp3d-rec { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--t-2); }
.hp3d-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-1); box-shadow: 0 0 10px rgba(163, 33, 63, 0.9); }
.hp3d-caption { position: absolute; left: 1.6rem; bottom: 3.6rem; display: flex; align-items: flex-end; gap: 0.75rem; }
.hp3d-step { font-size: 2.6rem; line-height: 0.9; font-weight: 600; color: var(--a-1); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hp3d-caption-text { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.15rem; }
.hp3d-title { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.hp3d-metric { font-size: var(--fs-xs); color: var(--t-2); font-variant-numeric: tabular-nums; }
.hp3d-caption.is-swapping .hp3d-caption-text { animation: hs3d-swap 520ms var(--ease-out); }
.hp3d-bar { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.hp3d-bar li i { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(243, 240, 234, 0.14); overflow: hidden; }
.hp3d-bar li i::after { content: ""; position: absolute; inset: 0; background: var(--a-1); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.hp3d-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--t-2); animation: hp3d-pulse 1.4s var(--ease) infinite; }
.hp3d-stage.is-ready .hp3d-loading { display: none; }
@keyframes hp3d-pulse { 50% { opacity: 0.35; } }

/* Tablets and phones: the stage sticks under the header, the steps scroll beneath it */
@media (max-width: 900px) {
    #homeProcess.is-scrolly .hp3d-layout { grid-template-columns: 1fr; gap: 0; }
    #homeProcess.is-scrolly .hp3d { order: -1; z-index: 2; top: calc(var(--hp3d-top, 76px)); height: 46vh; min-height: 300px; }
    #homeProcess.is-scrolly .process-steps { padding: 4vh 0 12vh; }
    #homeProcess.is-scrolly .process-step { display: flex; min-height: 50vh; justify-content: flex-start; padding-top: 6vh; }
    /* while the stage is stuck (motion.js sets .is-stuck), a frosted band between the header and
       the stage hides the step passing behind; before that the band is not there, so the
       section's heading above the stage stays readable */
    #homeProcess.is-scrolly .hp3d::before {
        content: ""; position: absolute; left: -1rem; right: -1rem; bottom: 100%; height: var(--hp3d-top, 76px);
        background: rgba(243, 240, 234, 0.72); -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
        opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none;
    }
    #homeProcess.is-scrolly .hp3d.is-stuck::before { opacity: 1; }
    #homeProcess.is-scrolly .process-step:not(.is-current) { opacity: 0.38; }
    .hp3d-stage { border-radius: 22px; }
}
@media (max-width: 600px) {
    .hp3d-step { font-size: 1.6rem; }
    .hp3d-title { font-size: var(--fs-md); }
    .hp3d-metric { font-size: var(--fs-2xs); }
    .hp3d-caption { bottom: 2.6rem; left: 1.2rem; gap: 0.5rem; }
    .hp3d-top, .hp3d-bar { left: 1.2rem; right: 1.2rem; }
}

/* --------------------------------------------------------------------------
   45. Recent models: live model in the card, flight into the viewer (motion.js)
   -------------------------------------------------------------------------- */
.recent-live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 360ms var(--ease); pointer-events: none; }
.recent-live.is-on { opacity: 1; }
.hcard-thumb .hcard-status { z-index: 1; }
.recent-flight {
    position: fixed;
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
    border-radius: 22px;
    background: radial-gradient(90% 80% at 50% 35%, #2f3137 0%, #1b1c20 60%, #131417 100%);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.recent-flight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Processing: GSAP drives the ring and the bar frame by frame, so their CSS easing steps aside */
.proc-dial.is-gsap .proc-ring-fill, .progress-fill.is-gsap { transition: none; }

/* --------------------------------------------------------------------------
   47. Cinematic layer and live app screens (motion.js)
   -------------------------------------------------------------------------- */
/* Studio numbers: digit drums */
.odo-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.odo-strip { display: block; white-space: pre; line-height: 1; }
.odo-static { display: inline-block; height: 1em; line-height: 1; vertical-align: top; white-space: pre; }

/* Living background (motion.js): a fixed WebGL field behind every screen. html and body both
   paint a background, so body becomes its own stacking context for the field to sit between its
   background and the content; the old ambient glow layer stays out of sight. The canvas is drawn
   at half size and stretched, grain included. */
body { isolation: isolate; }
.ui-ambient { display: none; }
.bg-flow { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease); }
.bg-flow.is-on { opacity: 1; }
.bg-flow canvas { display: block; width: 100%; height: 100%; }

/* Magnetic buttons (translate composes with their own transforms) */
.is-magnet { translate: var(--mx, 0px) var(--my, 0px); }

/* Hero: the band is driven by GSAP; HUD chips drift in depth */
.motion-marquee .hero-marquee-track { animation: none; will-change: transform; }
.hero-float.is-depth { translate: calc(var(--fx, 0) * 1px) calc(var(--fy, 0) * 1px); }

/* Upload area pulses */
#dropZone { position: relative; overflow: hidden; }
.dz-pulse { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(200, 64, 95, 0.7); background: radial-gradient(circle, rgba(200, 64, 95, 0.18), transparent 70%); }
.dz-pulse.is-strong { border-width: 3px; }

/* Cards do not react to a resting mouse while the page scrolls under it (motion.js) */
.is-page-scrolling .home-recent-list,
.is-page-scrolling .menu-grid,
.is-page-scrolling #historyGrid { pointer-events: none; }

/* --------------------------------------------------------------------------
   48. Page not found: a large "404" that fades out downward behind a short line and two ways on
   -------------------------------------------------------------------------- */
#viewNotFound { justify-content: center; min-height: calc(100svh - var(--nav-h)); }
.nf-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(2rem, 8vh, 5rem) 0 clamp(3rem, 10vh, 6rem); }
.nf-code {
    position: relative; margin: 0;
    font-size: clamp(9.5rem, 24vw, 17rem); font-weight: 700; line-height: 0.82; letter-spacing: -0.055em;
    color: var(--t-1); user-select: none;
    /* solid at the top, gone at the foot: the line below reads over the faded bottom */
    -webkit-mask-image: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.55) 52%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.55) 52%, transparent 90%);
}
.nf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nf-desc {
    position: relative; margin: -0.6em 0 0; max-width: 34ch;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; text-wrap: balance; color: var(--t-2);
}
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; }
.nf-actions .btn { gap: 0.55rem; }
.nf-ghost { color: var(--t-1); background: transparent; border: 1px solid var(--line-3, var(--line-2)); }
.nf-ghost:hover:not(:disabled) { color: var(--t-1); background: var(--s-2); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   50. Scan wall (motion.js): the user's scans on a curved strip, drawn in WebGL. The section is
   taller than the window by the held stretch; the stage sticks to the top meanwhile. With reduced
   motion or without WebGL the list below is the wall: a plain row that scrolls sideways.
   -------------------------------------------------------------------------- */
.home-morph[hidden] { display: none; }
.home-morph { position: relative; margin: 0 calc(-1 * clamp(1rem, 2.2vw, 2.5rem)); height: calc(100vh + var(--morph-run, 900px)); height: calc(100svh + var(--morph-run, 900px)); }
.morph-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.morph-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.morph-head { position: absolute; left: 50%; top: clamp(5rem, 12vh, 7rem); translate: -50% 0; z-index: 1; width: min(38rem, 100%); padding: 0 1rem; text-align: center; pointer-events: none; }
.morph-title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--t-1); text-wrap: balance; }
.morph-title em { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: #a3213f; }
.morph-head p { margin: 0.6rem auto 0; font-size: var(--fs-md); line-height: 1.5; color: var(--t-2); }
.morph-caption {
    position: absolute; left: 50%; bottom: clamp(1.5rem, 6vh, 3.5rem); translate: -50% 0; z-index: 1; margin: 0; padding: 0.45rem 0.95rem;
    border-radius: 999px; white-space: nowrap; pointer-events: none;
    font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: #f3f0ea; background: rgba(17, 18, 20, 0.86);
}
/* the list: for keyboards and screen readers over the canvas */
.morph-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.morph-item:focus-visible { outline: none; }
.morph-stage:has(.morph-item:focus-visible) .morph-caption { outline: 2px solid #c8405f; outline-offset: 2px; }
/* no WebGL or reduced motion: the list is the wall */
.home-morph.is-flat { height: auto; }
.is-flat .morph-stage { position: static; height: auto; overflow: visible; padding: clamp(3rem, 8vh, 5rem) 0; }
.is-flat .morph-head { position: static; translate: none; margin: 0 auto 1.5rem; }
.is-flat .morph-caption { display: none; }
.is-flat .morph-list {
    position: static; width: auto; height: auto; clip-path: none; overflow-x: auto; display: flex; gap: 0.75rem;
    padding: 0.25rem clamp(1rem, 2.2vw, 2.5rem); scroll-snap-type: x proximity;
}
.is-flat .morph-item { flex: none; width: min(70vw, 340px); padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--t-2); cursor: pointer; scroll-snap-align: center; }
.is-flat .morph-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--r-lg); background: #17181c; }
.is-flat .morph-item span { display: block; margin-top: 0.5rem; font-size: var(--fs-sm); }
.is-flat .morph-item:focus-visible img { outline: 2px solid var(--a-1); outline-offset: 2px; }
@media (max-width: 600px) {
    .home-morph { margin: 0 -1rem; }
    .morph-title { font-size: clamp(1.25rem, 6vw, 1.7rem); }
    .morph-head p { font-size: var(--fs-sm); }
}

/* --------------------------------------------------------------------------
   51. Site footer: a full-width ink band under a build-plate strip (the call to scan, link
   columns, quick actions), a wordmark that fills the width, the status line. On wide screens it
   is a screen tall. Every screen; pushed to the bottom of short pages.
   -------------------------------------------------------------------------- */
.site-foot {
    --fx: clamp(1.25rem, 3.5vw, 4rem);          /* the footer's side padding */
    position: relative; display: flex; flex-direction: column;
    margin-top: auto;
    margin-bottom: -4rem;                       /* cancels .app-wrapper's bottom padding */
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    color: #f3f0ea;
}
.sf-band { height: clamp(7rem, 12vw, 10rem); flex: none; }
.sf-main { background: #111214; }
.sf-strip {
    height: 16px; flex: none;
    background: repeating-conic-gradient(#f3f0ea 0 25%, #111214 0 50%) 0 0 / 16px 16px;
}
.sf-main { flex: 1; display: flex; flex-direction: column; padding: clamp(3rem, 6vw, 5.5rem) var(--fx) 1.6rem; }
@media (min-width: 900px) {
    .sf-main { min-height: min(100svh, 1000px); }
}
.sf-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) auto; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.sf-title { margin: 0; max-width: 15ch; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: #f3f0ea; text-wrap: balance; }
.sf-title em {
    font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: #f3f0ea;
    background: linear-gradient(transparent 72%, #a3213f 72%, #a3213f 92%, transparent 92%);
    padding: 0 0.06em;
}
.sf-brand p { margin: 1.1rem 0 0; max-width: 30rem; font-size: var(--fs-md); line-height: 1.6; color: rgba(243, 240, 234, 0.66); }
.sf-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.sf-actions .btn-accent { color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; box-shadow: 0 18px 40px -16px rgba(200, 64, 95, 0.75); }
.sf-ghost { color: #f3f0ea !important; background: transparent !important; border: 1px solid rgba(243, 240, 234, 0.3) !important; }
.sf-ghost:hover { background: rgba(243, 240, 234, 0.08) !important; }
.sf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sf-col { display: flex; flex-direction: column; gap: 0.95rem; }
.sf-col h5, .sf-quick h5 { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 240, 234, 0.5); }
.sf-col a { width: fit-content; font-size: var(--fs-md); font-weight: 600; color: #f3f0ea; text-decoration: none; transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.sf-col a[hidden] { display: none; }
.sf-col a:hover { color: #e07a90; transform: translateX(3px); }
.sf-quick { display: flex; flex-direction: column; align-items: flex-end; }
.sf-quick-row { display: flex; gap: 0.6rem; }
.sf-round {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid rgba(243, 240, 234, 0.85); color: #f3f0ea;
    transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sf-round .ui-icon { width: 18px; height: 18px; }
.sf-round:hover { background: #a3213f; border-color: #a3213f; transform: translateY(-2px); }

/* the wordmark: cream letters on a burgundy offset, the logo's dot after the D */
.sf-wordmark { flex: 1; display: flex; align-items: flex-end; margin: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); pointer-events: none; user-select: none; }
.sf-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-wordmark text { font-family: var(--font-sans); font-size: 260px; font-weight: 800; letter-spacing: -14px; }
.sf-word { fill: #f3f0ea; }
.sf-word-shadow { fill: #a3213f; }
.sf-word-dot { fill: #c8405f; }

.sf-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding-top: 1.3rem; border-top: 1px dashed rgba(243, 240, 234, 0.28);
    font-size: var(--fs-xs);
}
.sf-status { display: inline-flex; align-items: center; gap: 0.55rem; color: rgba(243, 240, 234, 0.75); font-family: var(--font-mono); }
.sf-meta { color: rgba(243, 240, 234, 0.5); }
.sf-up {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px;
    border: 1px solid rgba(243, 240, 234, 0.18); background: transparent; color: #f3f0ea; font: inherit; font-size: var(--fs-xs); cursor: pointer;
    transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sf-up:hover { background: rgba(243, 240, 234, 0.08); border-color: rgba(243, 240, 234, 0.3); }
.sf-up .ui-icon { width: 14px; height: 14px; }

@media (max-width: 1080px) {
    .sf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sf-quick { grid-column: 1 / -1; align-items: flex-start; }
}
@media (max-width: 760px) {
    .sf-top { grid-template-columns: 1fr; gap: 2.4rem; }
    .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .sf-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .site-foot { margin-bottom: calc(-2rem - env(safe-area-inset-bottom)); }
    .sf-main { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
    .sf-bottom { flex-direction: column; align-items: flex-start; }
    .sf-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   52. Hero, plainer: no fake recording bar, no floating readouts, no eyebrow tag, a solid accent
   instead of the gradient text, and a single line of real facts instead of the stat boxes
   -------------------------------------------------------------------------- */
.home-hero .home-headline em {
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important; color: #e8a3b2 !important;
}
.home-hero .home-headline em::after { display: none !important; }
.home-hero .home-headline em .ui-word > span { background: none !important; color: #e8a3b2 !important; -webkit-text-fill-color: #e8a3b2; }
.home-hero .home-lede { max-width: 34rem; }
.hero-note { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0; font-size: var(--fs-sm); color: var(--t-2); }
.hero-note > span + span::before { content: "·"; margin: 0 0.6rem; color: var(--t-3); }
.hero-note strong { font-weight: 700; color: var(--t-1); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .hero-note > span + span::before { display: none; } .hero-note { flex-direction: column; } }
.home-hero .menu-connection-pill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* --------------------------------------------------------------------------
   53. Full-screen film hero: a real printer printing behind the words. Edge to edge, as tall as
   the window under the header; a dark shade from the left keeps the words readable over the
   bright workshop shot at the end of the clip.
   -------------------------------------------------------------------------- */
.home-hero.is-film {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    margin-top: calc(-1 * clamp(0.5rem, 1.6vw, 1.75rem));
    min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
    padding: clamp(6rem, 12vh, 9rem) calc(var(--gx, 1.5rem) + clamp(0.5rem, 3vw, 3.5rem)) clamp(3.5rem, 9vh, 6rem);
    border-radius: 0; overflow: hidden; isolation: isolate;
    background: #0e0f11; box-shadow: none;
    grid-template-columns: none;
}
.hero-film { position: absolute; inset: 0; z-index: -1; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; background: #0e0f11 url("media/hero-print-poster.jpg") center / cover; }
.hero-shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 12, 14, 0.94) 0%, rgba(12, 12, 14, 0.82) 30%, rgba(12, 12, 14, 0.4) 58%, rgba(12, 12, 14, 0.12) 100%),
        linear-gradient(0deg, rgba(12, 12, 14, 0.75) 0%, rgba(12, 12, 14, 0) 42%),
        linear-gradient(180deg, rgba(12, 12, 14, 0.45) 0%, rgba(12, 12, 14, 0) 22%);
}
.home-hero.is-film .home-hero-copy { max-width: min(46rem, 100%); gap: 1.4rem; align-self: flex-start; }
.home-hero.is-film .home-headline { font-size: clamp(3rem, 7.4vw, 7rem); line-height: 0.95; letter-spacing: -0.055em; }
.home-hero.is-film .home-lede { max-width: 36rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: rgba(243, 240, 234, 0.82); }
.home-hero.is-film .hero-note { color: rgba(243, 240, 234, 0.72); }
.home-hero.is-film .btn-accent { color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; }
.home-hero.is-film .menu-connection-pill { background: rgba(14, 15, 17, 0.45) !important; }
.hero-scroll {
    position: absolute; right: calc(var(--gx, 1.5rem) + clamp(0.5rem, 3vw, 3.5rem)); bottom: clamp(3.5rem, 9vh, 6rem);
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(243, 240, 234, 0.7); text-decoration: none;
}
.hero-scroll i { position: relative; width: 1px; height: 54px; background: rgba(243, 240, 234, 0.25); overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #f3f0ea; animation: hero-scroll-line 1.8s var(--ease) infinite; }
@keyframes hero-scroll-line { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@media (max-width: 760px) {
    .home-hero.is-film { min-height: calc(100svh - 56px); padding: 5rem 1.25rem 3rem; margin-top: -0.5rem; }
    .hero-video { object-position: 50% 50%; }
    .hero-shade {
        background:
            linear-gradient(0deg, rgba(12, 12, 14, 0.92) 0%, rgba(12, 12, 14, 0.7) 45%, rgba(12, 12, 14, 0.25) 75%, rgba(12, 12, 14, 0.35) 100%);
    }
    .hero-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll i::after { animation: none; }
}

/* --------------------------------------------------------------------------
   54. Film band before the FAQ: a printer's nozzle at work, edge to edge. The words sit at the
   lower right, clear of the nozzle (left of centre in the shot), over a shade from that corner;
   the film settles from a slight zoom as the band scrolls in (motion.js).
   -------------------------------------------------------------------------- */
.home-reel {
    position: relative; display: flex; align-items: flex-end; justify-content: flex-end;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    min-height: clamp(30rem, 82vh, 54rem); min-height: clamp(30rem, 82svh, 54rem);
    padding: clamp(3rem, 8vh, 5.5rem) calc(var(--gx, 1.5rem) + clamp(0.5rem, 3vw, 3.5rem));
    overflow: hidden; isolation: isolate; background: #0e0f11; color: #f3f0ea;
}
.reel-film { position: absolute; inset: 0; z-index: -2; transform-origin: 42% 60%; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; background: #0e0f11 url("media/nozzle-print-poster.jpg") center / cover; }
.reel-shade {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(270deg, rgba(12, 12, 14, 0.9) 0%, rgba(12, 12, 14, 0.7) 28%, rgba(12, 12, 14, 0.15) 58%, rgba(12, 12, 14, 0) 75%),
        linear-gradient(0deg, rgba(12, 12, 14, 0.7) 0%, rgba(12, 12, 14, 0) 45%),
        linear-gradient(180deg, rgba(12, 12, 14, 0.35) 0%, rgba(12, 12, 14, 0) 20%);
}
.reel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: min(30rem, 100%); }
.reel-title { margin: 0; font-size: clamp(2.6rem, 5.6vw, 5.2rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; color: #f3f0ea; text-wrap: balance; }
.reel-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: #e7a3b3; }
.reel-lede { margin: 0; max-width: 28rem; font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.55; color: rgba(243, 240, 234, 0.82); }
.home-reel .btn-accent { color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; border-color: transparent !important; }
@media (max-width: 760px) {
    /* phones: the film takes the upper part, the words sit under the nozzle on the dark ground */
    .home-reel { min-height: 40rem; padding: 2.5rem 1.25rem; justify-content: flex-start; }
    .reel-film { bottom: auto; height: 62%; transform-origin: 45% 70%; }
    .reel-video { object-position: 44% 50%; }
    .reel-shade { background: linear-gradient(0deg, #0e0f11 0%, #0e0f11 40%, rgba(14, 15, 17, 0.55) 50%, rgba(14, 15, 17, 0) 64%); }
}


/* --------------------------------------------------------------------------
   55. Phone connection: the way there on the left (three steps, the live status, help folded
   away), the code itself large on an ink stage at the right, framed like a camera's viewfinder
   whose corners breathe. Phones: one column, the code after the steps.
   -------------------------------------------------------------------------- */
.cx { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); width: 100%; }
.cx-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.cx-main { display: flex; flex-direction: column; gap: 1.25rem; padding-top: clamp(0rem, 2vw, 1.5rem); }
.cx-title { margin: 0; font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 700; line-height: 0.96; letter-spacing: -0.05em; color: var(--t-1); }
.cx-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--a-1); }
.cx-lede { margin: 0 0 0.5rem; max-width: 34rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.55; color: var(--t-2); }

.cx-steps { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; }
.cx-steps li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line-2); }
.cx-steps li:last-child { border-bottom: 1px solid var(--line-2); }
.cx-step-n {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--a-1); background: rgba(163, 33, 63, 0.09); border: 1px solid rgba(163, 33, 63, 0.22);
}
.cx-steps b { display: block; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; color: var(--t-1); }
.cx-steps span:not(.cx-step-n) { display: block; margin-top: 0.15rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--t-2); }

.cx-status {
    display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0.9rem 0.9rem 1.1rem;
    border-radius: var(--r-lg); background: var(--s-2); border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px rgba(23, 24, 28, 0.04), 0 10px 24px -18px rgba(23, 24, 28, 0.35);
}
.cx-status .status-indicator { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.cx-status-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cx-status-head { font-weight: 650; color: var(--t-1); }
.cx-status-sub { font-size: var(--fs-sm); color: var(--t-2); overflow-wrap: anywhere; }

.cx-more { border-radius: var(--r-lg); background: color-mix(in srgb, var(--s-2) 70%, transparent); border: 1px solid var(--line-2); }
.cx-more summary {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--t-1); border-radius: var(--r-lg);
}
.cx-more summary::-webkit-details-marker { display: none; }
.cx-more summary > span { flex: 1; }
.cx-more summary em { font-style: normal; color: var(--a-text); }
.cx-more summary .ui-icon { flex: none; width: 18px; height: 18px; color: var(--t-3); }
.cx-more summary:focus-visible { outline: 2px solid var(--a-1); outline-offset: 2px; }
.cx-chev { transition: transform var(--d-base, 200ms) var(--ease-out, ease); }
.cx-more[open] .cx-chev { transform: rotate(180deg); }
.cx-more-body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.cx-more-body p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--t-2); }
.cx-setup { display: flex; align-items: center; gap: 1rem; }
.cx-setup[hidden] { display: none; }
.cx-setup-qr { flex: none; width: 112px; padding: 6px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line-2); line-height: 0; }
.cx-setup-qr > svg { display: block; width: 100% !important; height: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.cx-setup-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: var(--fs-sm); color: var(--t-2); }
.cx-setup-info b { color: var(--t-1); }
.cx-setup-info code, .cx-addr code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.cx-setup-info code { color: var(--t-1); }
.cx-manual { display: flex; gap: 0.6rem; }
.cx-input {
    flex: 1; min-width: 0; padding: 0.7rem 0.9rem; border-radius: var(--r-md);
    font: 500 var(--fs-sm) / 1.2 var(--font-mono); color: var(--t-1); background: var(--s-3); border: 1px solid var(--line-2);
}
.cx-input:focus { outline: none; border-color: var(--a-1); box-shadow: 0 0 0 3px rgba(163, 33, 63, 0.16); }
.cx-browser { margin: 0.25rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--t-3); }
.cx-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--a-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.cx-stage {
    position: sticky; top: calc(var(--nav-h) + 1.5rem);
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
    border-radius: 28px; color: #f3f0ea;
    background: radial-gradient(120% 80% at 50% 0%, #3a1220 0%, #16171a 55%, #111214 100%);
    box-shadow: 0 30px 60px -36px rgba(17, 18, 20, 0.7);
}
.cx-finder { position: relative; width: min(100%, 340px); padding: 18px; }
.cx-qr { width: 100%; aspect-ratio: 1; padding: 6px; border-radius: 18px; background: #fff; line-height: 0; overflow: hidden; }
.cx-qr > svg { display: block; width: 100% !important; height: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; }
.cx-corner { position: absolute; width: 34px; height: 34px; border: 3px solid #e7a3b3; animation: cx-breathe 2.6s var(--ease, ease-in-out) infinite alternate; }
.cx-corner.is-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; --cx: 4px; --cy: 4px; }
.cx-corner.is-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; --cx: -4px; --cy: 4px; }
.cx-corner.is-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; --cx: 4px; --cy: -4px; }
.cx-corner.is-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; --cx: -4px; --cy: -4px; }
@keyframes cx-breathe { from { transform: translate(0, 0); } to { transform: translate(var(--cx), var(--cy)); } }
.cx-stage-hint { margin: 0; font-family: var(--font-mono); font-size: var(--fs-2xs, 0.72rem); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 240, 234, 0.6); }
.cx-addr {
    display: flex; align-items: center; gap: 0.5rem; width: min(100%, 380px);
    padding: 0.4rem 0.4rem 0.4rem 0.9rem; border-radius: 999px;
    background: rgba(243, 240, 234, 0.06); border: 1px solid rgba(243, 240, 234, 0.14);
}
.cx-addr code { flex: 1; min-width: 0; font-size: var(--fs-sm); color: #f3f0ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-copy { border-radius: 999px !important; color: #111214 !important; background: #f3f0ea !important; border-color: transparent !important; }
.cx-copy:hover:not(:disabled) { background: #fff !important; }
@media (max-width: 900px) {
    .cx-grid { grid-template-columns: 1fr; }
    .cx-stage { position: relative; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-corner { animation: none; }
}

/* --------------------------------------------------------------------------
   56. The stats band answers the pointer: the others step back from the number under it. The
   light that follows it, the lean, the growth and the spin are in motion.js.
   -------------------------------------------------------------------------- */
.home-stat-value, .home-stat-label { position: relative; z-index: 1; width: fit-content; }
.home-stat-value { line-height: 1; margin: 0.28rem 0 0.42rem; transform-origin: left center; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms var(--ease); }
.home-stat-label { transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms var(--ease), opacity 300ms var(--ease); }
.is-pointing .home-stat-value, .is-pointing .home-stat-label { will-change: transform; }
.stats-glow {
    position: absolute; left: -210px; top: -210px; z-index: 0; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 196, 208, 0.34), rgba(255, 196, 208, 0.12) 55%, transparent);
    opacity: 0; transition: opacity 350ms var(--ease);
}
.is-pointing > .stats-glow { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .home-stat:hover .home-stat-label { color: #fff; }
    .home-stats:has(.home-stat:hover) .home-stat:not(:hover) .home-stat-value { opacity: 0.55; }
    .home-stats:has(.home-stat:hover) .home-stat:not(:hover) .home-stat-label { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   57. Scan finished (motion.js): the glass reveal over the pages' living background
   -------------------------------------------------------------------------- */
.glass-reveal {
    position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
    cursor: pointer; opacity: 0; transition: opacity 220ms var(--ease);
}
.glass-reveal.is-on { opacity: 1; }
.glass-reveal.is-leaving { opacity: 0; pointer-events: none; transition-duration: 400ms; }
.glass-reveal .ld-flow { transition: none; }
.glass-canvas { position: relative; display: block; width: min(68vmin, 560px); height: min(68vmin, 560px); }
.glass-caption {
    position: relative; margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 700; letter-spacing: -0.04em; color: var(--t-1);
    animation: glass-caption-in 500ms var(--ease-out, ease) 1150ms both;
}
.glass-caption em { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: #a3213f; }
@keyframes glass-caption-in { from { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------------------
   58. Admin: visitors see the finished models; scanning, editing and deleting are the admin's.
   html.is-admin is set by app.js from the server's answer (the server enforces it either way).
   -------------------------------------------------------------------------- */
html:not(.is-admin) .admin-only { display: none !important; }
html.is-admin .public-only { display: none !important; }
html:not(.is-admin) .menu-grid { grid-template-columns: minmax(0, 1fr); }
.nav-admin-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px;
    font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--t-2); background: transparent; border: 1px solid var(--line-2); cursor: pointer;
}
.nav-admin-btn:hover { color: var(--t-1); border-color: var(--line-3); }
.sf-admin { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

#viewAdmin { justify-content: center; min-height: calc(100svh - var(--nav-h)); }
.adm { display: grid; place-items: center; padding: clamp(2rem, 8vh, 5rem) 0; }
.adm-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; width: min(100%, 26rem);
    padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: 24px; background: var(--s-2); border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px rgba(23, 24, 28, 0.04), 0 30px 60px -40px rgba(23, 24, 28, 0.45);
}
.adm-card[hidden] { display: none; }
.adm-mark { width: 34px; height: 34px; overflow: visible; }
.adm-mark path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.adm-mark .bm-a { stroke: var(--t-1); }
.adm-mark .bm-b { stroke: #a3213f; }
.adm-mark .bm-dot { fill: #a3213f; }
.adm-title { margin: 0.25rem 0 0; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; color: var(--t-1); }
.adm-title em { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; color: #a3213f; }
.adm-lede { margin: 0 0 0.5rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--t-2); }
.adm-label { font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); }
.adm-field { position: relative; }
.adm-field input {
    width: 100%; padding: 0.85rem 3rem 0.85rem 1rem; border-radius: var(--r-md); font: 500 1rem/1.2 var(--font-sans);
    color: var(--t-1); background: var(--s-3); border: 1px solid var(--line-2);
}
.adm-field input:focus { outline: none; border-color: var(--a-1); box-shadow: 0 0 0 3px rgba(163, 33, 63, 0.16); }
.adm-field input[aria-invalid="true"] { border-color: var(--bad-fill, #c4262e); }
.adm-eye {
    position: absolute; right: 0.4rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
    border: 0; border-radius: 8px; background: none; color: var(--t-3); cursor: pointer;
}
.adm-eye:hover, .adm-eye[aria-pressed="true"] { color: var(--t-1); }
.adm-eye:focus-visible { outline: 2px solid var(--a-1); outline-offset: 1px; }
.adm-error { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--bad, #a8212a); }
.adm-error[hidden] { display: none; }
.adm-submit { width: 100%; justify-content: center; padding-block: 0.85rem; }
.adm-back { align-self: center; padding: 0.3rem; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--t-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.adm-back:hover { color: var(--t-1); }

/* --------------------------------------------------------------------------
   59. A taller header, the visitors' pages in it (Modeller, Blog, Hakkında, İletişim), and the
   blog, about and contact pages. --nav-h is the header's height where the page needs it.
   -------------------------------------------------------------------------- */
:root { --nav-h: 76px; }
@media (min-width: 601px) {
    .navbar { padding-top: 1.05rem; padding-bottom: 1.05rem; }
    .navbar.is-scrolled { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .brand-icon { width: 38px; height: 38px; }
    .brand-title { font-size: 1.24rem; }
    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn { padding: 0.55rem 0.85rem; }
}
/* the admin's bar is long: Hakkında and İletişim stay in the footer for them on narrower screens */
@media (max-width: 1360px) { html.is-admin .nav-extra { display: none !important; } }
@media (max-width: 600px) {
    :root { --nav-h: 64px; }
    html.is-admin .nav-extra { display: none !important; }
}

.pg { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); width: min(100%, 1200px); margin: 0 auto; padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(3rem, 8vh, 5rem); }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pg-title { margin: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; color: var(--t-1); }
.pg-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--a-1); }
.pg-lede { margin: 0.75rem 0 0; max-width: 40rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.55; color: var(--t-2); }
.pg-empty { margin: 0; padding: 2rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); text-align: center; color: var(--t-2); }
.pg-empty[hidden] { display: none; }
.pg-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--t-2); text-decoration: none; }
.pg-back .ui-icon { width: 16px; height: 16px; }
.pg-back:hover { color: var(--t-1); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.post-card { border-radius: 22px; background: var(--s-2); border: 1px solid var(--line-2); overflow: hidden; transition: transform 300ms var(--ease-out, ease), box-shadow 300ms var(--ease); }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px rgba(23, 24, 28, 0.55); }
.post-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card-link:focus-visible { outline: 2px solid var(--a-1); outline-offset: -2px; border-radius: 22px; }
.post-card-cover { display: block; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 30% 20%, #3a1220, #16171a 70%); overflow: hidden; }
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out, ease); }
.post-card:hover .post-card-cover img { transform: scale(1.04); }
.post-card-meta { padding: 1.1rem 1.25rem 0; font-family: var(--font-mono); font-size: var(--fs-2xs, 0.72rem); letter-spacing: 0.06em; color: var(--t-3); }
.post-draft { color: var(--a-text); font-weight: 600; }
.post-card-title { padding: 0.45rem 1.25rem 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--t-1); }
.post-card-summary { padding: 0.5rem 1.25rem 1.35rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--t-2); }

.article { width: min(100%, 760px); gap: 1rem; }
.article-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.article-meta { margin: 1rem 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--t-3); }
.article-title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; color: var(--t-1); text-wrap: balance; }
.article-lede { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--t-2); }
.article-lede:empty { display: none; }
.article-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: 22px; margin: 0.5rem 0; }
.article-cover[hidden] { display: none; }

.md { font-size: 1.06rem; line-height: 1.75; color: var(--t-1); }
.md > * { margin: 0 0 1.1em; max-width: 68ch; }
.md h2 { margin-top: 1.6em; font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.03em; }
.md h3 { margin-top: 1.4em; font-size: 1.22rem; letter-spacing: -0.02em; }
.md ul, .md ol { padding-left: 1.3em; }
.md li { margin: 0.3em 0; }
.md li::marker { color: var(--a-1); }
.md a { color: var(--a-text); text-underline-offset: 3px; }
.md code { padding: 0.1em 0.35em; border-radius: 6px; background: var(--s-1); font-family: var(--font-mono); font-size: 0.88em; }
.md strong { font-weight: 700; }

.editor { width: min(100%, 860px); gap: 0.6rem; }
.ed-label { margin-top: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); }
.ed-label span { font-weight: 400; color: var(--t-3); }
.ed-input { width: 100%; padding: 0.8rem 1rem; border-radius: var(--r-md); font: 500 1rem/1.5 var(--font-sans); color: var(--t-1); background: var(--s-3); border: 1px solid var(--line-2); resize: vertical; }
.ed-input:focus { outline: none; border-color: var(--a-1); box-shadow: 0 0 0 3px rgba(163, 33, 63, 0.16); }
.ed-body { min-height: 18rem; line-height: 1.65; }
.ed-hint { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--t-3); }
.ed-hint code { font-family: var(--font-mono); color: var(--t-2); }
.ed-cover { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.ed-cover img { width: 160px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); }
.ed-cover img[hidden] { display: none; }
.ed-switch { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: var(--fs-sm); color: var(--t-1); cursor: pointer; }
.ed-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--a-1); }
.ed-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.ed-delete { margin-left: auto; color: var(--bad, #a8212a) !important; }
.ed-preview { margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--s-2); border: 1px solid var(--line-2); }
.ed-preview[hidden], .editor[hidden] { display: none; }

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.about-text .md { margin-top: 0.5rem; }
.about-photo { position: sticky; top: calc(var(--nav-h) + 1.5rem); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 44% 50%; border-radius: 28px; }
.about-editor { width: 100%; }
@media (max-width: 860px) {
    .about { grid-template-columns: 1fr; }
    .about-photo { position: static; aspect-ratio: 16 / 10; order: -1; }
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.contact-grid[hidden] { display: none; }
.ct-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem; border-radius: 22px; background: var(--s-2); border: 1px solid var(--line-2); color: inherit; text-decoration: none; transition: transform 250ms var(--ease-out, ease), border-color 250ms var(--ease); }
a.ct-card:hover { transform: translateY(-2px); border-color: var(--a-1); }
.ct-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.4rem; border-radius: 50%; color: var(--a-1); background: rgba(163, 33, 63, 0.09); }
.ct-icon .ui-icon { width: 20px; height: 20px; }
.ct-label { font-family: var(--font-mono); font-size: var(--fs-2xs, 0.72rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); }
.ct-value { font-size: 1.1rem; font-weight: 600; color: var(--t-1); overflow-wrap: anywhere; }
.contact-editor { width: min(100%, 560px); }

/* light text on the accent, like the hero's buttons */
.pg .btn-accent { color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; border-color: transparent !important; }

/* --------------------------------------------------------------------------
   60. Speed and a taller, centred header.
   Blur behind an element is recomputed every time what is behind it changes, and behind
   everything here is the living background: so no backdrop blur on the page (dialogs keep
   theirs, they are brief), near-opaque grounds instead.
   -------------------------------------------------------------------------- */
*:not(.modal-backdrop), *:not(.modal-backdrop)::before, *:not(.modal-backdrop)::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:root { --nav-h: 88px; }
@media (min-width: 601px) {
    .navbar { background: rgba(243, 240, 234, 0.96) !important; padding-top: 1.35rem; padding-bottom: 1.35rem; }
    .navbar.is-scrolled { background: rgba(243, 240, 234, 0.97) !important; padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .brand-icon { width: 42px; height: 42px; }
    .brand-title { font-size: 1.32rem; }
    .nav-menu-btn, .nav-action-btn, .nav-history-btn, .nav-connect-btn, .nav-storage-btn { padding: 0.62rem 1rem; font-size: 0.95rem; }
}
/* the menu in the middle, the brand on the left */
@media (min-width: 1024px) {
    .navbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "brand nav chip";
        align-items: center;
        column-gap: 1rem;
    }
    .navbar > .brand { grid-area: brand; justify-self: start; }
    .navbar > .nav-actions { grid-area: nav; justify-self: center; }
    .navbar > .nav-job-chip { grid-area: chip; justify-self: end; }
}
@media (max-width: 600px) {
    :root { --nav-h: 64px; }
    .navbar::before { background: rgba(243, 240, 234, 0.96) !important; }
}

/* the admin's bar is too long to centre: brand left, menu right; icons only where it would crowd */
@media (min-width: 1024px) {
    html.is-admin .navbar { display: flex !important; justify-content: space-between; }
}
@media (min-width: 601px) and (max-width: 1560px) {
    html.is-admin .nav-actions > button:not(#btnNavNewScan):not(#btnConnectionSettings) > span { display: none; }
    html.is-admin .nav-actions > button:not(#btnNavNewScan):not(#btnConnectionSettings) { padding-inline: 0.7rem; }
    html.is-admin #btnConnectionSettings .connection-label { display: none; }
}

/* --------------------------------------------------------------------------
   61. Header with weight on both sides (brand and tagline left, one action right), the
   home page's layer section, and the about page as a story.
   -------------------------------------------------------------------------- */
.brand-text { display: flex; flex-direction: column; gap: 0.3rem; }
.brand-tag { font-size: 0.78rem; font-weight: 500; line-height: 1; letter-spacing: 0.005em; color: var(--t-3); white-space: nowrap; transition: opacity 240ms var(--ease), max-height 280ms var(--ease-out); max-height: 1.2em; }
.navbar.is-scrolled .brand-tag { opacity: 0; max-height: 0; }
@media (min-width: 601px) {
    .brand { gap: 0.8rem; }
    .brand-icon { width: 46px; height: 46px; }
    .brand-title { font-size: 1.45rem; }
}
.nav-end { display: flex; align-items: center; justify-content: flex-end; }
/* The header's button: it leans toward the pointer (motion.js), the label rolls over to a fresh
   copy, the arrow leaves and a new one comes in, and a light sweeps across. One sweep on arrival. */
.nav-cta {
    --mx: 0px; --my: 0px; --lift: 0px; --press: 1;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.78rem 1.25rem 0.78rem 1.35rem;
    border: 0; border-radius: var(--r-pill); cursor: pointer;
    font: 600 0.95rem/1 var(--font-sans); color: #fff;
    background-image: linear-gradient(115deg, #df6a84 0%, #b8304f 30%, #8e1b36 62%, #6d1229 100%);
    background-size: 220% 100%; background-position: 100% 0;
    box-shadow: 0 12px 26px -16px rgba(122, 21, 48, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translate(var(--mx), calc(var(--my) - var(--lift))) scale(var(--press));
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms var(--ease), background-position 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-cta::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
    transform: translateX(-130%);
}
.nav-cta:hover { --lift: 2px; background-position: 0% 0; box-shadow: 0 20px 34px -16px rgba(122, 21, 48, 1), 0 0 0 4px rgba(163, 33, 63, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.nav-cta:hover::after, .nav-cta.is-intro::after { transform: translateX(130%); transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav-cta:active { --press: 0.95; transition-duration: 120ms; }
.nav-cta:focus-visible { outline: 2px solid var(--a-1); outline-offset: 3px; }
.nav-cta .ui-icon { width: 16px; height: 16px; }
.nav-cta-label { display: inline-block; height: 1.25em; overflow: hidden; line-height: 1.25em; }
.nav-cta-label > span { position: relative; display: block; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav-cta-label > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.nav-cta:hover .nav-cta-label > span { transform: translateY(-100%); }
.nav-cta-arrows { position: relative; display: inline-block; width: 16px; height: 16px; overflow: hidden; }
.nav-cta-arrows .nav-cta-arrow { position: absolute; inset: 0; transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav-cta-arrows .nav-cta-arrow-in { transform: translateX(-150%); }
.nav-cta:hover .nav-cta-arrows .nav-cta-arrow { transform: translateX(150%); }
.nav-cta:hover .nav-cta-arrows .nav-cta-arrow-in { transform: translateX(0); transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
    .nav-cta, .nav-cta::after, .nav-cta-label > span, .nav-cta-arrows .nav-cta-arrow { transition: none !important; }
    .nav-cta:hover .nav-cta-label > span { transform: none; }
}
@media (min-width: 1024px) {
    .navbar > .nav-end { grid-area: chip; justify-self: end; }
}
/* narrower screens: the tagline goes first, then the button keeps only its arrow */
@media (max-width: 1180px) { .brand-tag { display: none; } }
@media (max-width: 1023px) {
    .nav-cta { padding: 0.7rem; }
    .nav-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 600px) {
    .nav-end { flex: 0 0 auto; }
    .nav-cta { padding: 0.55rem; }
}

/* About: the claim and the nozzle, the story beside an object's path, real models, one invitation */
.about { display: flex !important; flex-direction: column; align-items: stretch !important; gap: clamp(3rem, 9vh, 6.5rem); }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.about-title { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 0.95; text-wrap: balance; }
.about-lede { margin: 1.5rem 0 0; max-width: 34rem; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--t-2); }
.about-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.about-link { background: transparent !important; border: 1px solid var(--line-3) !important; color: var(--t-1) !important; }
.about-link:hover { border-color: var(--t-1) !important; }
.about-hero-media { display: flex; flex-direction: column; gap: 0.8rem; margin: 0; }
.about .about-photo { position: static; width: 100%; aspect-ratio: 4 / 5; max-height: min(72vh, 640px); object-fit: cover; object-position: 44% 50%; border-radius: 30px; box-shadow: 0 40px 80px -50px rgba(23, 24, 28, 0.7); }
.about-hero-media figcaption { font-size: var(--fs-xs); line-height: 1.45; color: var(--t-3); }

.about-story {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
    padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line-2);
}
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.about-text .md { margin-top: 0; }
.about-text .md > :first-child { margin-top: 0; }
.about-text .md h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.about-flow { position: sticky; top: calc(var(--nav-h) + 2rem); display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.about-flow li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line-2); }
.about-flow li:first-child { border-top: 1px solid var(--line-2); }
.about-flow strong { font-family: var(--font-serif); font-size: 2.3rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--a-1); }
.about-flow span { font-size: var(--fs-sm); line-height: 1.55; color: var(--t-2); }

.about-archive[hidden] { display: none; }
.about-archive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.about-h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; color: var(--t-1); }
.about-h2 em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--a-1); }
.about-archive-head .pg-back { border: 0; background: none; padding: 0.3rem 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; }
.about-archive-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.about-model { display: flex; flex-direction: column; gap: 0.7rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.about-model img {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px;
    background: radial-gradient(90% 80% at 50% 35%, #2b2d34, #141518 75%);
    transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease);
}
.about-model:hover img { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(23, 24, 28, 0.8); }
.about-model:focus-visible { outline: none; }
.about-model:focus-visible img { outline: 2px solid var(--a-1); outline-offset: 3px; }
.about-model strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); font-variant-numeric: tabular-nums; }
.about-model small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--t-3); }

.about-cta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
    padding: clamp(2rem, 5vw, 3.75rem); border-radius: 32px;
    background: radial-gradient(120% 150% at 88% 0%, #4a1426 0%, #1d1b20 52%, #141518 100%);
    color: var(--bone);
}
.about-cta-title { margin: 0; max-width: 17ch; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; color: var(--bone); text-wrap: balance; }
.about-cta-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: #ec93a8; }
.about-cta p { margin: 0 0 0.6rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.55; color: rgba(243, 240, 234, 0.76); }
@media (max-width: 860px) {
    .about-hero, .about-story { grid-template-columns: 1fr; }
    .about .about-photo { aspect-ratio: 4 / 3; }
    .about-flow { position: static; }
    .about-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the material guide: two families, not good and bad; filament in graphite, resin in the accent */
.home-suit .suit-good { background: linear-gradient(180deg, rgba(23, 24, 28, 0.05), var(--s-2) 40%); }
.home-suit .suit-good::before { background: linear-gradient(90deg, #2c2e34, rgba(23, 24, 28, 0.08)); }
.home-suit .suit-good .suit-dot { background: var(--ink-2); box-shadow: 0 0 0 4px rgba(23, 24, 28, 0.1); }
.home-suit .suit-good .suit-list li { border-left-color: var(--line-3); }
.nav-cta-mail { display: none; }
@media (max-width: 1023px) {
    .nav-cta .nav-cta-arrows { display: none; }
    .nav-cta .nav-cta-mail { display: block; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
    .nav-cta:hover .nav-cta-mail { transform: rotate(-10deg) scale(1.08); }
}

/* --------------------------------------------------------------------------
   62. The questions page (/sss) and the legal pages (/kvkk, /cerez-politikasi, /gizlilik)
   -------------------------------------------------------------------------- */
.faq-item .faq-answer { padding: 0 2.6rem 0.2rem 0.2rem; }
.faq-item .faq-answer > * { margin: 0 0 0.9rem; max-width: 68ch; color: var(--t-2); line-height: 1.6; }
.faq-item .faq-answer p { padding: 0; }
.faq-item .faq-answer a { color: var(--a-text); text-underline-offset: 3px; }
.faq-item[hidden] { display: none; }
.faq-all { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); text-decoration: none; }
.faq-all .ui-icon { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.faq-all:hover { color: var(--a-text); }
.faq-all:hover .ui-icon { transform: translateX(3px); }
@media (min-width: 861px) { .home-faq > .faq-all { grid-column: 2; justify-self: start; } }

.faqpg-head { max-width: 46rem; }
.faqpg-head .pg-lede a, .faqpg-ask a { color: var(--a-text); text-underline-offset: 3px; }
.faqpg-body { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.faqpg-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.faqpg-search { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0 0.95rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s-3); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.faqpg-search[hidden] { display: none; }
.faqpg-search:focus-within { border-color: var(--a-1); box-shadow: 0 0 0 3px rgba(163, 33, 63, 0.14); }
.faqpg-search .ui-icon { width: 18px; height: 18px; color: var(--t-3); }
.faqpg-search input { flex: 1; min-width: 0; padding: 0.8rem 0; border: 0; outline: none; background: none; font: 500 1rem/1.3 var(--font-sans); color: var(--t-1); }
.faqpg-count { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--t-3); }
.faqpg-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 1.3rem; border-radius: 22px; color: var(--bone); background: radial-gradient(120% 140% at 90% 0%, #4a1426 0%, #1d1b20 55%, #141518 100%); }
.faqpg-ask strong { font-size: 1.1rem; letter-spacing: -0.02em; }
.faqpg-ask p { margin: 0 0 0.4rem; font-size: var(--fs-sm); line-height: 1.5; color: rgba(243, 240, 234, 0.74); }
.faqpg-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.faqpg-main .faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
.faqpg-main .faq-list[hidden] { display: none; }
.faq-editor { width: 100%; }
.faq-ed-list { display: flex; flex-direction: column; gap: 0.8rem; }
.faq-ed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.9rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--s-2); }
.faq-ed-fields { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-ed-q { font-weight: 600; }
.faq-ed-tools { display: flex; flex-direction: column; gap: 0.35rem; }
.faq-ed-btn { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s-3); color: var(--t-2); cursor: pointer; }
.faq-ed-btn .ui-icon { width: 16px; height: 16px; }
.faq-ed-btn:hover { color: var(--t-1); border-color: var(--line-3); }
.faq-ed-btn.is-danger:hover { color: var(--bad); border-color: var(--bad-line); }
@media (max-width: 860px) {
    .faqpg-body { grid-template-columns: 1fr; }
    .faqpg-aside { position: static; }
    .faqpg-ask { order: 3; }
}

.legal { width: min(100%, 1080px); }
.legal-head { display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: clamp(1.25rem, 3vh, 2rem); border-bottom: 1px solid var(--line-2); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.legal-tab { padding: 0.5rem 0.95rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--t-2); text-decoration: none; transition: border-color 200ms var(--ease), color 200ms var(--ease), background 200ms var(--ease); }
.legal-tab:hover { color: var(--t-1); border-color: var(--line-3); }
.legal-tab[aria-current="page"] { color: #fff; border-color: transparent; background: var(--ink-1); }
.legal-tab:focus-visible { outline: 2px solid var(--a-1); outline-offset: 2px; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.legal-layout:has(.legal-toc[hidden]) { grid-template-columns: minmax(0, 1fr); }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: flex; flex-direction: column; gap: 0.15rem; padding-left: 0.9rem; border-left: 1px solid var(--line-2); }
.legal-toc[hidden] { display: none; }
.legal-toc a { padding: 0.35rem 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--t-2); text-decoration: none; }
.legal-toc a:hover { color: var(--a-text); }
.legal-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; min-width: 0; }
.legal-body h2 { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body[hidden], .legal-editor[hidden] { display: none; }
.legal-editor { width: 100%; }
@media (max-width: 860px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); }
    .legal-toc { position: static; }
}

/* --------------------------------------------------------------------------
   63. "Odanda gör": the room view button under the STL download (phones and tablets)
   -------------------------------------------------------------------------- */
.ar-btn {
    flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; gap: 0.85rem; width: 100%; margin-top: 0.2rem; padding: 0.8rem 1rem 0.8rem 0.8rem;
    border: 0; border-radius: 18px; cursor: pointer; text-align: left; color: var(--bone);
    background: radial-gradient(120% 160% at 0% 0%, #4a1426 0%, #1d1b20 55%, #141518 100%);
    box-shadow: 0 18px 34px -22px rgba(23, 24, 28, 0.9);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms var(--ease);
}
.ar-btn[hidden] { display: none; }
.ar-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -22px rgba(23, 24, 28, 1); }
.ar-btn:focus-visible { outline: 2px solid var(--a-1); outline-offset: 3px; }
.ar-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: #fff; background: linear-gradient(140deg, #d4566f, #8e1b36); }
.ar-icon .ui-icon { width: 20px; height: 20px; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.ar-btn:hover .ar-icon .ui-icon { transform: rotate(-20deg) scale(1.08); }
.ar-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.ar-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.ar-text small { font-size: var(--fs-xs); color: rgba(243, 240, 234, 0.68); }
.ar-arrow { width: 18px; height: 18px; color: rgba(243, 240, 234, 0.7); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.ar-btn:hover .ar-arrow { transform: translateX(3px); color: #fff; }
/* inside the dark download card: the room view reads as its second action, a step quieter */
.primary-download-box .ar-btn { background: rgba(243, 240, 234, 0.07); border: 1px solid rgba(243, 240, 234, 0.14); box-shadow: none; }
.primary-download-box .ar-btn:hover { background: rgba(243, 240, 234, 0.12); box-shadow: none; }
.primary-download-box .ar-text small { color: rgba(243, 240, 234, 0.66) !important; }

/* --------------------------------------------------------------------------
   64. Phones: a header you can read — the studio's name and the page you are on on the left,
   a labelled "Menü" button on the right — and the menu sheet it opens. Wider screens keep the
   menu in the header and never show the sheet.
   -------------------------------------------------------------------------- */
.brand-where, .nav-burger, .nav-sheet { display: none; }
@media (max-width: 600px) {
    .navbar { justify-content: space-between; }
    .navbar > .nav-actions, .navbar > .nav-end { display: none !important; }
    .navbar .brand-text { display: flex !important; flex-direction: column; gap: 0.18rem; min-width: 0; }
    .navbar .brand-tag { display: none !important; }
    .navbar .brand-icon { width: 32px; height: 32px; }
    .navbar .brand-title { font-size: 1.05rem; }
    .brand-where {
        display: block; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 0.74rem; font-weight: 600; line-height: 1.1; color: var(--a-text);
    }
    .nav-burger {
        display: inline-flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; height: 40px; padding: 0 0.95rem 0 0.85rem;
        border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--s-3); color: var(--t-1);
        font: 600 0.92rem/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: background 200ms var(--ease), border-color 200ms var(--ease);
    }
    .nav-burger:focus-visible { outline: 2px solid var(--a-1); outline-offset: 2px; }
    .nav-burger-lines { position: relative; display: inline-block; width: 16px; height: 10px; }
    .nav-burger-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), top 320ms cubic-bezier(0.22, 1, 0.36, 1); }
    .nav-burger-lines i:first-child { top: 0; }
    .nav-burger-lines i:last-child { top: 8px; }
    .nav-burger[aria-expanded="true"] { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
    .nav-burger[aria-expanded="true"] .nav-burger-lines i:first-child { top: 4px; transform: rotate(45deg); }
    .nav-burger[aria-expanded="true"] .nav-burger-lines i:last-child { top: 4px; transform: rotate(-45deg); }
    /* the scan chip (admin) sits left of the menu button */
    .nav-job-chip { position: static !important; margin-left: auto; margin-right: 0.4rem; }

    .nav-sheet { display: block; position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; }
    .nav-sheet.is-open { visibility: visible; pointer-events: auto; }
    .nav-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 16, 18, 0.42); opacity: 0; transition: opacity 260ms var(--ease); }
    .nav-sheet.is-open .nav-sheet-backdrop { opacity: 1; }
    .nav-sheet-panel {
        position: absolute; left: 0.6rem; right: 0.6rem; top: calc(var(--nav-h) + 0.4rem);
        max-height: calc(100svh - var(--nav-h) - 1.2rem); overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem;
        border-radius: 22px; background: #fbfaf7; border: 1px solid var(--line-2);
        box-shadow: 0 30px 60px -30px rgba(23, 24, 28, 0.6);
        opacity: 0; transform: translateY(-10px) scale(0.985); transform-origin: top center;
        transition: opacity 240ms var(--ease), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav-sheet.is-open .nav-sheet-panel { opacity: 1; transform: none; }
    .nav-sheet-list { display: flex; flex-direction: column; gap: 0.15rem; }
    .nav-sheet-heading { padding: 0.6rem 0.75rem 0.2rem; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-3); }
    .nav-sheet-admin { padding-top: 0.3rem; border-top: 1px solid var(--line-1); }
    .nav-sheet-item {
        display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 56px; padding: 0.55rem 0.75rem;
        border: 0; border-radius: 14px; background: none; color: var(--t-1); text-align: left; text-decoration: none;
        font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 160ms var(--ease);
    }
    .nav-sheet-item:active { background: var(--s-1); }
    .nav-sheet-item:focus-visible { outline: 2px solid var(--a-1); outline-offset: -2px; }
    .nav-sheet-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--s-1); color: var(--t-2); }
    .nav-sheet-icon .ui-icon { width: 19px; height: 19px; }
    .nav-sheet-label { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
    .nav-sheet-label strong { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
    .nav-sheet-label small { font-size: var(--fs-xs); color: var(--t-3); }
    .nav-sheet-item[aria-current="page"] { background: rgba(163, 33, 63, 0.08); }
    .nav-sheet-item[aria-current="page"] .nav-sheet-icon { background: linear-gradient(140deg, #c8405f, #8e1b36); color: #fff; }
    .nav-sheet-item[aria-current="page"] strong { color: var(--a-text); }
    .nav-sheet-out strong { color: var(--bad); }
    .nav-sheet-cta { justify-content: center; width: 100%; min-height: 50px; color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; border: 0 !important; }
    html.nav-sheet-open, html.nav-sheet-open body { overflow: hidden; }
}


/* --------------------------------------------------------------------------
   66. Under the hero: a real print on film through four tall columns, the words beside it
   -------------------------------------------------------------------------- */
.home-film {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
    gap: clamp(2rem, 6vw, 5.5rem); padding-block: clamp(3rem, 9vh, 6rem) clamp(1.5rem, 5vh, 3rem);
}
.film-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); height: clamp(420px, 68vh, 620px); }
.film-src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.film-col {
    position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; background: #1a1b20;
    box-shadow: 0 30px 60px -36px rgba(23, 24, 28, 0.75); will-change: transform;
}
.film-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.film-title { margin: 0; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; color: var(--t-1); }
.film-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--a-1); }
.film-lede { margin: 0; max-width: 32rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--t-2); }
.film-points { display: flex; flex-direction: column; width: 100%; max-width: 32rem; margin: 0.4rem 0 0; }
.film-points > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line-2); }
.film-points > div:last-child { border-bottom: 1px solid var(--line-2); }
.film-points dt { font-weight: 650; color: var(--t-1); }
.film-points dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--t-2); }
.film-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 0.6rem; }
.film-actions .btn-accent { color: #fff !important; background: linear-gradient(140deg, #c8405f, #8e1b36) !important; border-color: transparent !important; }
.film-link { font-size: var(--fs-sm); font-weight: 600; color: var(--t-1); text-underline-offset: 4px; }
.film-link:hover { color: var(--a-text); }
@media (max-width: 860px) {
    .home-film { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.5rem; }
    .film-cols { height: clamp(320px, 52vh, 440px); }
    .film-points > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* the brand name is a line of text now (each page has its own h1) */
.brand-title { display: block; margin: 0; }

/* --------------------------------------------------------------------------
   67. A model's page for visitors: its name, a line of facts, a few words, the printed piece
   -------------------------------------------------------------------------- */
.model-head { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0.55rem !important; }
.model-head > * { flex: 0 0 auto !important; max-width: 100%; }
.model-head .success-icon-badge { margin-bottom: 0.2rem; }
.model-head .completion-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-wrap: balance; overflow-wrap: anywhere; }
.model-meta { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--a-text); font-variant-numeric: tabular-nums; }
.model-meta[hidden], .model-description[hidden], .model-photo[hidden], .model-edit[hidden], .model-edit-btn[hidden] { display: none !important; }
.model-description { max-width: 40ch; font-size: 1rem; line-height: 1.6; white-space: pre-line; }
.model-photo { position: relative; width: 100%; margin: 0.4rem 0 0; }
.model-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--s-1); box-shadow: 0 24px 46px -30px rgba(23, 24, 28, 0.6); }
.model-photo figcaption {
    position: absolute; left: 0.7rem; bottom: 0.7rem; padding: 0.3rem 0.65rem; border-radius: var(--r-pill);
    font-size: var(--fs-2xs); font-weight: 600; color: #fff; background: rgba(15, 16, 18, 0.62);
}
.model-edit { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; padding: 1rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--s-2); }
.model-edit .ed-actions { margin-top: 0.4rem; }
.model-edit #modelPhotoRemove { align-self: flex-start; }
#modelPhotoRemove[hidden] { display: none !important; }

/* the studio in numbers: three of them */
.home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 600px) { .home-stats { grid-template-columns: 1fr !important; } .home-stat { border-right: none !important; } }

/* the film under the hero on phones: the columns drift less and keep clear of the words below */
@media (max-width: 600px) {
    .film-cols { margin-bottom: 3.6rem; }
}
}