/* ---- css/style.css ---- */
/* ============================================================
   PrintSphere - Design System & Global Styles
   ============================================================ */

/* ---------- Fonts ---------- */
/* Inter is self-hosted: @font-face rules live in tokens.css (static/fonts). The Google Fonts @import was removed (BRIEF D: no CDN references). */

/* ---------- Custom Properties ---------- */
:root {
    /* Surface colors */
    --bg-primary: #0a0f1e;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-card-solid: #1a2236;
    --bg-elevated: rgba(30, 41, 70, 0.6);
    --bg-glass: rgba(255, 255, 255, 0.04);
    --bg-glass-hover: rgba(255, 255, 255, 0.08);

    /* Accent */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --accent-glow: rgba(99, 102, 241, 0.25);

    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #a5b4fc;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.18);
    --border-accent: rgba(99, 102, 241, 0.4);

    /* Status */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #3b82f6;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--accent-glow);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Nav */
    --nav-height: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

::selection {
    background: var(--accent-primary);
    color: white;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------- Navigation ---------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    background: rgba(10, 15, 30, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-base);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    transition: opacity var(--transition-fast);
}
.nav__logo:hover { opacity: 0.85; }

.nav__logo-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.nav__logo-accent { color: var(--violet-300, #c4b5fd); }

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav__link {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.nav__link:hover {
    color: var(--text-primary);
    background: var(--bg-glass-hover);
}

.nav__link--accent {
    background: var(--accent-gradient);
    color: white;
}
.nav__link--accent:hover {
    opacity: 0.9;
    color: white;
    box-shadow: var(--shadow-glow);
}

.nav__link--subtle {
    color: var(--text-muted);
}

/* ---------- Main ---------- */
.main {
    min-height: 100vh;
    padding-top: var(--nav-height);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    /* A .btn with no colour variant used to fall back to the browser's light grey button face
       under light text. Default to the quiet secondary look; every variant below overrides it. */
    background: var(--color-glass);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.btn:hover {
    background-color: var(--color-glass-hover);
    border-color: var(--color-border-hover);
}

.btn--primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }

.btn--secondary {
    background: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.btn--secondary:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
}

.btn--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.btn--danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.45);
}

.btn--bambu {
    background: rgba(0, 174, 66, 0.15);
    color: #10b981;
    border: 1px solid rgba(0, 174, 66, 0.35);
    font-weight: 500;
    transition: all var(--transition-fast);
}
.btn--bambu:hover {
    background: rgba(0, 174, 66, 0.28);
    border-color: rgba(0, 174, 66, 0.65);
    color: #34d399;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 174, 66, 0.2);
}
.btn--bambu:active {
    transform: translateY(0);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.btn--ghost:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.btn--lg {
    padding: 14px 32px;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.btn--sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn--disabled, .btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn--link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.btn--link:hover {
    background: transparent !important;
}

.btn--full { width: 100%; }

/* ---------- Cards ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--transition-base);
}

.card--interactive:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card--glass {
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
}

.card__body {
    padding: var(--space-lg);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: capitalize;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.badge--accent {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.25);
}
.badge--neutral {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* ---------- Form Inputs ---------- */
.input {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition-fast);
}

.input:hover { border-color: var(--border-hover); }

.input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-elevated);
}

.input::placeholder { color: var(--text-muted); }

.input--sm {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: all var(--transition-fast);
}

.textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.textarea::placeholder { color: var(--text-muted); }

.select {
    padding: 12px 40px 12px 16px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.select:hover { border-color: var(--border-hover); }
.select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---------- Tables ---------- */
.table-wrap {
    overflow-x: auto;
    position: relative;   /* keeps hidden helper text (sr-only spans) inside the scroll box, not off the page */
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

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

.table thead th {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    background: rgba(0,0,0,0.15);
}

.table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--bg-glass-hover);
}

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

.table input,
.table select {
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    outline: none;
    transition: all var(--transition-fast);
}

.table input:focus,
.table select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ---------- Toast Notifications ---------- */
.toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 20px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    animation: toast-in 0.35s ease-out;
    backdrop-filter: blur(16px);
    max-width: 380px;
}

.toast--success { border-left: 3px solid var(--status-success); }
.toast--error { border-left: 3px solid var(--status-danger); }
.toast--info { border-left: 3px solid var(--status-info); }

.toast.hiding {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

/* ============================================================
   PAGE: Home / Upload
   ============================================================ */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height));
    overflow: hidden;
    padding: var(--space-2xl);
}

/* Animated background mesh */
.hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero__bg::before,
.hero__bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 12s ease-in-out infinite;
}

.hero__bg::before {
    width: 600px;
    height: 600px;
    background: var(--accent-primary);
    top: -10%;
    right: -5%;
}

.hero__bg::after {
    width: 500px;
    height: 500px;
    background: var(--accent-secondary);
    bottom: -15%;
    left: -10%;
    animation-delay: -6s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -25px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    width: 100%;
}

.hero__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.hero__title-accent {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    line-height: 1.7;
}

/* Drop Zone */
.dropzone {
    position: relative;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-glass);
}

.dropzone:hover,
.dropzone--active {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.06);
    box-shadow: var(--shadow-glow);
}

.dropzone--active {
    transform: scale(1.02);
}

.dropzone__icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    display: block;
    opacity: 0.7;
}

.dropzone__text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.dropzone__hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Loader */
.loader {
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
}

.loader.active { display: flex; }

.loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loader__text {
    margin-left: var(--space-md);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Wizard Steps */
.wizard {
    display: none;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.wizard.active { display: block; }

.wizard__progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.wizard__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-default);
    transition: all var(--transition-base);
}

.wizard__dot.active {
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-glow);
    transform: scale(1.2);
}

.wizard__dot.completed {
    background: var(--status-success);
}

.wizard__line {
    width: 40px;
    height: 2px;
    background: var(--border-default);
    transition: background var(--transition-slow);
}

.wizard__line.completed {
    background: var(--status-success);
}

.wizard__step {
    display: none;
    animation: fade-up 0.4s ease-out;
}

.wizard__step.active { display: block; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard__step-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.wizard__step-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

/* Material Selector */
.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.material-card {
    position: relative;
    padding: var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.material-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
    transform: translateY(-2px);
}

.material-card.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.material-card__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 auto var(--space-sm);
    border: 2px solid rgba(255,255,255,0.15);
}

.material-card__swatch--rainbow {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.material-card__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.material-card__meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Compact Material Picker Component */
.material-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.material-group-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-bottom: var(--space-xs);
}

.material-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.material-group-type {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.material-group-sep {
    opacity: 0.5;
}

.material-group-price {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.material-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.swatch-btn {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.swatch-btn:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.swatch-btn.selected {
    border-color: var(--accent-primary, #6366f1);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(99, 102, 241, 0.4));
}

.swatch-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.swatch-dot--rainbow {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.selected-colour-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.selected-colour-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.selected-colour-text strong {
    color: var(--text-primary);
}

/* Quantity Control */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.quantity-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-card, #232730);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    user-select: none;
}

.quantity-btn:hover {
    background: var(--bg-card-hover, #2c3240);
    border-color: var(--border-hover);
    color: var(--accent-primary, #6366f1);
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-input {
    width: 64px;
    height: 38px;
    text-align: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.05rem;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.quantity-unit {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Priority Selector */
.priority-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.priority-option {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    background: var(--bg-glass);
}

.priority-option:hover {
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
}

.priority-option.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.priority-option__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.priority-option__desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* What Express promises, under the Standard / Express choice */
.priority-note {
    margin: var(--space-xs, 6px) 0 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-3, var(--text-muted));
}

/* Queue Info */
.queue-info {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.queue-info__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.queue-info__count {
    font-weight: 700;
    color: var(--text-primary);
}

/* Cost Display */
.cost-display {
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.cost-display__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cost-display__value {
    font-size: 2rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Wizard Actions */
.wizard__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Mobile message */
.mobile-message {
    display: none;
    text-align: center;
    padding: var(--space-2xl);
}

.mobile-message__icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.mobile-message__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.mobile-message__desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ============================================================
   COMPONENT: User Active Projects (Homepage)
   ============================================================ */

.user-projects {
    margin-top: var(--space-2xl);
    text-align: left;
    width: 100%;
}

.user-projects__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding: 0 var(--space-xs);
}

.user-projects__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.user-projects__icon {
    font-size: 1.15rem;
}

.user-projects__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.user-projects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.user-project-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.user-project-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(99, 102, 241, 0.15);
}

.user-project-card--active {
    border-color: rgba(99, 102, 241, 0.3);
}

.user-project-card__preview {
    position: relative;
    width: 100%;
    height: 140px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.03));
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    pointer-events: none;
}

.user-project-card__preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
}

.user-project-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}

.user-project-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 10px;
}

.user-project-card__id-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.user-project-card__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.user-project-card__id {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-project-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.user-project-card__material {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.user-project-card__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.user-project-card__mat-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-project-card__priority-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.user-project-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.user-project-card__cost-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.user-project-card__cost {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-primary);
}

.user-project-card__weight {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.user-project-card__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.user-project-card:hover .user-project-card__link {
    color: var(--accent-primary);
}

.user-project-card__chat-dot {
    font-size: 0.9rem;
}

/* Pulsing indicator for active prints */
.badge__pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 4px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* ============================================================
   PAGE: Login
   ============================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height));
    padding: var(--space-lg);
}

.login-card {
    width: 100%;
    max-width: 400px;
}

.login-card .card__body {
    padding: var(--space-2xl);
}

.login-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.login-card__subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.login-card__form { display: flex; flex-direction: column; gap: var(--space-md); }

.login-card__error {
    display: none;
    padding: var(--space-sm) var(--space-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    color: #f87171;
    font-size: 0.85rem;
    animation: fade-up 0.3s ease-out;
}

/* ============================================================
   PAGE: Dashboard
   ============================================================ */

.dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.dashboard__title {
    font-size: 1.75rem;
    font-weight: 700;
}

.dashboard__greeting {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Stats Bar */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.stat-card {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.stat-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
}

.stat-card__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stat-card__value--accent {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card__note {
    margin-top: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: -1px;
}

.tab:hover { color: var(--text-secondary); }

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Queue Header */
.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.queue-header__title {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.queue-header__count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-glass);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* Job row status colours (applied as inline or via js) */
.status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

/* Materials admin section */
.materials-section {
    margin-top: var(--space-md);
}

.materials-section .table-wrap {
    margin-bottom: var(--space-lg);
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   PAGE: Print Job Detail
   ============================================================ */

.printjob-page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}

.printjob__header {
    margin-bottom: var(--space-xl);
}

.printjob__id {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
    word-break: break-all;
}

/* Progress Timeline */
.timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 80px;
    position: relative;
}

.timeline__step::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-default);
    z-index: 0;
}

.timeline__step:last-child::after { display: none; }

.timeline__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 2px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
    transition: all var(--transition-base);
}

.timeline__step.completed .timeline__dot {
    background: var(--status-success);
    border-color: var(--status-success);
    color: white;
}

.timeline__step.completed::after {
    background: var(--status-success);
}

.timeline__step.current .timeline__dot {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: 0 0 12px var(--accent-glow);
}

.timeline__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-sm);
    white-space: nowrap;
}

.timeline__step.completed .timeline__label,
.timeline__step.current .timeline__label {
    color: var(--text-primary);
}

/* Job Info Grid */
.job-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.job-detail {
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.job-detail__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
}

.job-detail__value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.job-detail--wide {
    grid-column: 1 / -1;
}

/* Accept / Reject */
.accept-card {
    padding: var(--space-xl);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-accent);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.accept-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.accept-card__subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--space-lg);
}

.accept-card__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

/* Preview Grid */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.preview-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

.preview-card .stl-viewer {
    width: 100%;
    min-height: 260px;
}

/* ---------- STL Carousel (Upload Wizard) ---------- */

.stl-carousel {
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: rgb(77, 77, 204);
}

.stl-carousel__viewport {
    position: relative;
    width: 100%;
    height: 320px;
}

.stl-carousel__slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.stl-carousel__slide .stl-viewer {
    width: 100%;
    height: 100%;
}

.stl-carousel__label {
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.stl-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    background: rgba(0, 0, 0, 0.15);
}

.stl-carousel__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stl-carousel__btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.stl-carousel__counter {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
}

/* ============================================================
   PAGE: Feedback
   ============================================================ */

.feedback-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height));
    padding: var(--space-lg);
}

.feedback-card {
    width: 100%;
    max-width: 480px;
}

.feedback-card .card__body {
    padding: var(--space-2xl);
}

.feedback-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.feedback-card__subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    font-size: 0.9rem;
}

.star-rating {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.star-rating__star {
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    user-select: none;
}

.star-rating__star:hover,
.star-rating__star.active {
    color: #fbbf24;
    transform: scale(1.15);
}

/* ============================================================
   PAGE: Error
   ============================================================ */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height));
    padding: var(--space-lg);
    text-align: center;
}

.error-page__code {
    font-size: 5rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-md);
}

.error-page__message {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 400px;
}

/* ============================================================
   Utilities
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--status-success); }
.text-danger { color: var(--status-danger); }
.text-accent { color: var(--text-accent); }
.font-bold { font-weight: 700; }
.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.hidden { display: none !important; }

.w-full { width: 100%; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    .hero {
        padding: var(--space-lg);
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .material-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .priority-group {
        grid-template-columns: 1fr;
    }

    .job-grid {
        grid-template-columns: 1fr;
    }

    .dashboard {
        padding: var(--space-md);
    }

    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .printjob-page {
        padding: var(--space-lg) var(--space-md);
    }

    .timeline {
        padding: var(--space-md);
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .desktop-only { display: none !important; }
    .mobile-message { display: block; }
    .dropzone { display: none; }
    .wizard { display: none !important; }
    .queue-info { flex-direction: column; }

    .stats-bar {
        grid-template-columns: 1fr;
    }

    .material-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .accept-card__actions {
        flex-direction: column;
    }
}

@media (min-width: 576px) {
    .mobile-message { display: none !important; }
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* ============================================================
   Dashboard Card Layout
   ============================================================ */
.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.job-card {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border-radius: var(--radius-lg) !important;
}

.job-card__body {
    padding: var(--space-lg);
}

.split-queues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 1100px) {
    .split-queues {
        grid-template-columns: 1fr;
    }
}

.job-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-md) var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    border-top-left-radius: calc(var(--radius-lg) - 1px);
    border-top-right-radius: calc(var(--radius-lg) - 1px);
    overflow: hidden;
}

.job-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-weight: 600;
}

.job-card__cost {
    font-weight: 700;
    color: #4ade80;
}

.job-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.job-card__grid--3 {
    grid-template-columns: 1fr 1fr;
}

.job-card__text {
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 6px 0;
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }

/* Better Numeric Inputs */
.number-input-wrapper {
    position: relative;
    width: 100%;
}

.number-input-wrapper input[type="number"] {
    width: 100%;
    text-align: center;
}

/* Hide native spinner arrows completely for cleaner look */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.select--full {
    width: 100%;
}

/* ============================================================
   Announcement Banner
   ============================================================ */
.announcement-bar {
    background: var(--accent-gradient);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 999;
}

/* Push main content down when banner is present */
body:has(.announcement-bar) .main {
    padding-top: calc(var(--nav-height) + 34px);
}

.announcement-bar__track {
    display: flex;
    width: max-content;
    animation: marquee 60s linear infinite;
    will-change: transform;
}

.announcement-bar__item {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.announcement-bar__item::after {
    content: '✦';
    margin-left: 2rem;
    opacity: 0.4;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   Notification Bell Dropdown
   ============================================================ */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell__btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.notif-bell__btn:hover {
    background: var(--bg-glass-hover);
}

.notif-bell__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--status-danger);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    line-height: 1;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 420px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.notif-dropdown.open {
    display: flex;
    animation: notifSlideIn 0.2s ease;
}

@keyframes notifSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.notif-dropdown__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.notif-dropdown__mark-read {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.notif-dropdown__mark-read:hover {
    background: var(--bg-glass-hover);
}

.notif-dropdown__list {
    overflow-y: auto;
    flex: 1;
}

.notif-dropdown__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.notif-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s;
}

.notif-card:hover {
    background: var(--bg-glass-hover);
}

.notif-card--unread {
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid var(--accent-primary);
}

.notif-card__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-card__content {
    flex: 1;
    min-width: 0;
}

.notif-card__message {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.notif-card__time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================================
   Feedback FAB & Modal
   ============================================================ */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-gradient);
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 6px 24px var(--accent-glow);
    z-index: 1000;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px var(--accent-glow);
}

.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.feedback-modal-overlay.open {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feedback-modal {
    width: 100%;
    max-width: 400px;
    margin: 20px;
}

.feedback-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.feedback-modal__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
}

.feedback-modal__close:hover {
    color: var(--text-primary);
    background: var(--bg-glass-hover);
}

.feedback-modal__body {
    padding: var(--space-lg);
}

/* ============================================================
   Payment Components
   ============================================================ */

/* --- Payment Card Form --- */
.payment-card {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.payment-card__header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.payment-card__form {
    min-height: 60px;
}

.payment-card__errors {
    color: var(--status-danger);
    font-size: 0.85rem;
    margin-top: var(--space-sm);
    min-height: 1.2em;
}

.payment-card__note {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-xs);
}

/* --- Return from Square checkout --- */
.checkout-notice {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.checkout-notice--paid {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--status-success);
    font-weight: 600;
}

/* --- Paid Status Card --- */
.payment-status-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.payment-status-card--paid {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.payment-status-card__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.payment-status-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--status-success);
}

.payment-status-card__date {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- Prepaid Badge (Dashboard) --- */
.badge--paid {
    background: rgba(34, 197, 94, 0.15);
    color: var(--status-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.15);
}

/* --- Task 2b: Visual State for Paid Project Cards --- */
.job-card--paid {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.05) 50%, rgba(6, 78, 59, 0.14) 100%), var(--bg-card-solid, #1a1d24) !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.22), inset 0 1px 0 0 rgba(52, 211, 153, 0.25) !important;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.job-card--paid:hover {
    box-shadow: 0 8px 26px -2px rgba(16, 185, 129, 0.35), inset 0 1px 0 0 rgba(52, 211, 153, 0.35) !important;
    border-color: #34d399 !important;
}

.job-card--paid .job-card__header {
    border-top: 4px solid #10b981 !important;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
}

.job-card--paid .job-card__id a {
    color: #f8fafc;
    font-weight: 700;
}

.job-card--paid .job-card__id a:hover {
    color: #34d399;
}

/* Green pill tag badge for explicit PAID identification */
.badge--paid-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #059669;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid #10b981;
    box-shadow: 0 1px 5px rgba(5, 150, 105, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--paid-pill .badge__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    margin-right: 2px;
}

/* --- Disabled/Locked Inputs --- */
.input:disabled,
.input[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-subtle);
}

/* --- Refund Button --- */
.refund-btn {
    border-color: var(--status-warning) !important;
    color: var(--status-warning) !important;
}

.refund-btn:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

/* ============================================================
   SEO Landing & Footer Components
   ============================================================ */

.seo-section {
    padding: var(--space-3xl) var(--space-xl);
    position: relative;
    z-index: 1;
}

.seo-section--alt {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.seo-container {
    max-width: 1100px;
    margin: 0 auto;
}

.seo-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-2xl) auto;
}

.seo-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: var(--space-sm) 0;
    letter-spacing: -0.02em;
}

.seo-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.seo-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

.seo-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.seo-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.seo-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.seo-card__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Steps */
.seo-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-xl);
}

.seo-step {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
}

.seo-step__num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}

.seo-step__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.seo-step__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* FAQ Grid */
.seo-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}

.seo-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.seo-faq-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.seo-faq-answer {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Footer */
.site-footer {
    background: #090d16;
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3xl) var(--space-xl) var(--space-xl) var(--space-xl);
    position: relative;
    z-index: 1;
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2xl);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xl);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.site-footer__link {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--accent-primary);
}

.site-footer__text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.site-footer__bottom {
    max-width: 1100px;
    margin: var(--space-2xl) auto 0 auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================================
   Mesh Diagnostics & Geometry Error Stage
   ============================================================ */

.mesh-error-stage {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
    animation: fadeIn 0.3s ease;
}

.mesh-alert-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.08);
}

.mesh-alert-header__icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
    flex-shrink: 0;
}

.mesh-alert-header__tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f87171;
    margin-bottom: 4px;
}

.mesh-alert-header__title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mesh-alert-header__desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
    line-height: 1.45;
}

.mesh-diag-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 820px) {
    .mesh-diag-grid {
        grid-template-columns: 1fr;
    }
}

.mesh-diag-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(12px);
}

.mesh-diag-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mesh-diag-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--border-subtle);
}

.mesh-diag-controls {
    display: flex;
    gap: 6px;
}

.btn--glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}

.btn--glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--border-hover);
}

.mesh-viewer-container {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #070b14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.mesh-diag-stats {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.mesh-stat-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 0.78rem;
    display: flex;
    gap: 6px;
    align-items: center;
}

.mesh-stat-label {
    color: var(--text-muted);
}

.mesh-stat-val {
    font-weight: 600;
    color: var(--text-primary);
}

.mesh-volume-section {
    margin-bottom: 20px;
}

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

.mesh-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mesh-volume-envelope {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.mesh-axes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mesh-axis-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}

.mesh-axis-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.mesh-axis-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.mesh-axis-val {
    font-weight: 700;
    color: var(--text-primary);
    font-family: monospace;
}

.mesh-bar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.mesh-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.mesh-bar-fill--ok {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.mesh-bar-fill--warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mesh-bar-fill--danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.mesh-axis-status {
    font-size: 0.75rem;
    margin-top: 6px;
    text-align: right;
    font-weight: 500;
}

.mesh-axis-status--ok {
    color: var(--status-success);
}

.mesh-axis-status--warning {
    color: var(--status-warning);
}

.mesh-axis-status--danger {
    color: var(--status-danger);
    font-weight: 700;
}

.mesh-issues-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.mesh-issue-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid;
    background: rgba(0, 0, 0, 0.2);
}

.mesh-issue-item--error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

.mesh-issue-item--warning {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.mesh-issue-item__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.mesh-issue-item__title {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.mesh-issue-item--error .mesh-issue-item__title {
    color: #fca5a5;
}

.mesh-issue-item--warning .mesh-issue-item__title {
    color: #fde68a;
}

.mesh-issue-item__desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mesh-confirm-box {
    background: var(--bg-card);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    text-align: left;
}

.mesh-confirm-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.mesh-confirm-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.mesh-confirm-text {
    text-align: left;
    flex: 1;
}

.mesh-confirm-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    text-align: left;
}

.mesh-confirm-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.mesh-confirm-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mesh-confirm-actions .btn {
    min-width: 220px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 600px) {
    .mesh-confirm-actions .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================================
   PrintSphere Redesign - Component Styles (BRIEF C2)
   ============================================================ */

/* ---------- CSS variable definition ---------- */
:root {
    --bg-card-hover: var(--color-surface-hover, #1d2342);
}

/* ---------- Focus Ring for Accessibility ---------- */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 2px var(--color-bg, #0a0d1c), 0 0 0 4px var(--color-focus-ring, #a5b4fc));
    border-radius: var(--radius-sm, 8px);
}

/* ---------- Skip Link ---------- */
.skip-link {
    position: absolute;
    left: var(--gutter, 16px);
    top: -100px;
    z-index: var(--z-toast, 9999);
    background: var(--color-surface-solid, #171c36);
    color: var(--color-text, #f3f4fb);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--color-border-accent, rgba(99, 102, 241, 0.45));
    text-decoration: none;
    font-weight: var(--weight-medium, 500);
    transition: top var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.skip-link:focus {
    top: var(--space-sm, 8px);
}

/* ---------- Nav Mobile Toggle & Overlay ---------- */
.nav__toggle {
    display: none;
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    border-radius: var(--radius-md, 12px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    color: var(--color-text, #f3f4fb);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.nav__toggle svg {
    width: 22px;
    height: 22px;
}
.nav__logo-text {
    color: var(--color-text, #f3f4fb);
    font-weight: 750;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .nav__toggle {
        display: inline-flex;
    }
    .nav__links {
        position: absolute;
        top: var(--nav-height, 56px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs, 2px);
        padding: var(--space-sm, 8px) var(--gutter, 16px) var(--space-md, 16px);
        background: var(--color-bg-raised, #10142a);
        border-bottom: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
        box-shadow: var(--elev-4);
        display: none;
    }
    .nav__links--open {
        display: flex;
    }
    .nav__link {
        justify-content: flex-start;
    }
    .nav__link--accent {
        justify-content: center;
    }
}

/* ---------- Announcement Marquee Controls ---------- */
.announcement-bar__pause, .marquee__pause {
    flex-shrink: 0;
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 20, 0.28);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
}
.announcement-bar__pause svg, .marquee__pause svg {
    width: 16px;
    height: 16px;
}
.announcement-bar__pause .icon-play, .marquee__pause .icon-play {
    display: none;
}
.announcement-bar__pause[aria-pressed="true"] .icon-play, .marquee__pause[aria-pressed="true"] .icon-play {
    display: block;
}
.announcement-bar__pause[aria-pressed="true"] .icon-pause, .marquee__pause[aria-pressed="true"] .icon-pause {
    display: none;
}

/* ---------- Journey Layout: Hero + Sections with Stage ---------- */
.ps-journey {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 64px);
    max-width: calc(var(--container, 1200px) + 2 * var(--gutter, 16px));
    margin: 0 auto;
    padding: 0 var(--gutter, 16px);
}
.ps-journey, #faq {
    position: relative;
    z-index: var(--z-base, 1);
}

/* Hero Content alignment */
.hero__content {
    will-change: transform, opacity;
}

/* Drop Zone: M6 Charging, Marching, Rejected, Upload Progress */
.dropzone {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(28px, 5vw, 48px) var(--space-lg, 24px);
    border-radius: var(--radius-2xl, 32px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    border: 2px dashed var(--color-border-hover, rgba(165, 180, 252, 0.26));
    text-align: center;
    cursor: pointer;
    transition: transform var(--dur-base, 250ms) var(--ease-spring, ease),
                border-color var(--dur-fast, 150ms) var(--ease-standard, ease),
                background-color var(--dur-fast, 150ms) var(--ease-standard, ease),
                box-shadow var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.dropzone:hover {
    border-color: var(--color-accent, #6366f1);
    box-shadow: var(--elev-glow);
    background-color: var(--color-accent-soft, rgba(99, 102, 241, 0.12));
}
.dropzone:focus-visible {
    border-radius: var(--radius-2xl, 32px);
}
.dropzone__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-md, 16px);
    color: var(--indigo-300, #a5b4fc);
    transition: transform var(--dur-base, 250ms) var(--ease-spring, ease);
}
.dropzone__text {
    font-size: var(--text-md, 1.125rem);
    font-weight: var(--weight-semibold, 600);
    margin-bottom: var(--space-xs, 4px);
}
.dropzone__text--charged {
    display: none;
}
.dropzone__hint {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-3, #8189a8);
}
.dropzone--active {
    border-style: solid;
    border-color: transparent;
    background:
        linear-gradient(90deg, var(--indigo-300, #a5b4fc) 50%, transparent 0) repeat-x top left / 18px 2px,
        linear-gradient(90deg, var(--indigo-300, #a5b4fc) 50%, transparent 0) repeat-x bottom left / 18px 2px,
        linear-gradient(0deg, var(--indigo-300, #a5b4fc) 50%, transparent 0) repeat-y top left / 2px 18px,
        linear-gradient(0deg, var(--indigo-300, #a5b4fc) 50%, transparent 0) repeat-y top right / 2px 18px,
        rgba(99, 102, 241, 0.14);
    animation: march 900ms linear infinite;
    transform: scale(1.015);
    box-shadow: var(--elev-glow);
}
.dropzone--active .dropzone__icon {
    transform: translateY(calc(var(--move-sm, 4px) * -2));
}
.dropzone--active .dropzone__text--idle {
    display: none;
}
.dropzone--active .dropzone__text--charged {
    display: block;
}
.dropzone--rejected {
    border-color: var(--color-danger, #ef4444) !important;
    animation: none;
}
@keyframes march {
    to { background-position: 18px 0, -18px 100%, 0 -18px, 100% 18px, 0 0; }
}

.dropzone__file {
    display: none;
    align-items: center;
    gap: var(--space-ms, 12px);
    text-align: left;
    margin-top: var(--space-md, 16px);
    padding: var(--space-ms, 12px) var(--space-md, 16px);
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-solid, #171c36);
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
}
.dropzone--has-file .dropzone__file {
    display: flex;
}
.dropzone__file svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-heat, #ffb86b);
}
.dropzone__file-name {
    font-weight: var(--weight-semibold, 600);
    overflow-wrap: anywhere;
}
.dropzone__file-meta {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-3, #8189a8);
}
.phone-hint {
    display: none;
    margin-top: var(--space-md, 16px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-3, #8189a8);
}
@media (pointer: coarse) {
    .phone-hint {
        display: block;
    }
}

/* Upload Progress Bar */
.upload-progress {
    width: 100%;
    max-width: 320px;
    height: 6px;
    border-radius: var(--radius-xs, 4px);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin: var(--space-sm, 8px) auto;
}
.upload-progress__fill {
    height: 100%;
    background: var(--gradient-brand);
    border-radius: var(--radius-xs, 4px);
    transition: width var(--dur-fast, 150ms) linear;
}

/* Slicer Stack Loader (M6 slice) */
.stack-loader {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    width: 44px;
    margin: 0 auto var(--space-sm, 8px);
}
.stack-loader i {
    display: block;
    height: 5px;
    border-radius: 2px;
    background: var(--color-border-hover, rgba(165, 180, 252, 0.26));
    animation: stack 1200ms steps(1, end) infinite;
}
.stack-loader i:nth-child(1) { animation-delay: 0ms; }
.stack-loader i:nth-child(2) { animation-delay: 200ms; }
.stack-loader i:nth-child(3) { animation-delay: 400ms; }
.stack-loader i:nth-child(4) { animation-delay: 600ms; }
.stack-loader i:nth-child(5) { animation-delay: 800ms; }
@keyframes stack {
    0% { background: var(--color-border-hover, rgba(165, 180, 252, 0.26)); }
    10% { background: var(--color-heat, #ffb86b); }
    25%, 85% { background: var(--indigo-400, #818cf8); }
    100% { background: var(--color-border-hover, rgba(165, 180, 252, 0.26)); }
}

/* Trust Strip (static, indexable) */
.trust-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-sm, 8px) var(--space-md, 16px);
    margin-top: var(--space-xl, 32px);
    text-align: left;
    padding: 0;
}
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-2, #aab1cc);
}
.trust-strip__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--indigo-400, #818cf8);
}

/* 3D Hero Stage (M1 + M2) */
.ps-journey__stage {
    padding-bottom: var(--space-2xl, 48px);
}
.ps-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 12;
    border-radius: var(--radius-2xl, 32px);
    overflow: hidden;
    background:
        radial-gradient(70% 55% at 50% 38%, rgba(165, 180, 252, 0.16), transparent 70%),
        linear-gradient(180deg, var(--viewer-bg-top, #2b2f74), var(--viewer-bg-bottom, #11132c));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    box-shadow: var(--elev-3);
    isolation: isolate;
}
.ps-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: var(--pattern-layers);
    opacity: 0.6;
    border-radius: inherit;
}
.ps-stage__canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-slow, 400ms) var(--ease-out, ease);
}
.ps-stage__canvas.is-ready {
    opacity: 1;
}
.ps-stage__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}
.ps-stage__hud {
    position: absolute;
    left: var(--space-md, 16px);
    right: var(--space-md, 16px);
    bottom: var(--space-md, 16px);
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
}
.ps-stage__readout, .ps-stage__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-2, #aab1cc);
    background: var(--viewer-label-bg, rgba(7, 9, 20, 0.55));
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ps-stage__readout b {
    color: var(--color-text, #f3f4fb);
    font-weight: 600;
}
.ps-stage__readout .is-hot {
    color: var(--color-heat, #ffb86b);
}
.ps-stage__label {
    position: absolute;
    top: var(--space-md, 16px);
    left: var(--space-md, 16px);
    z-index: 4;
}

/* Fallback Poster for Hero Stage */
.ps-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--dur-slow, 400ms) var(--ease-out, ease);
}
.ps-stage.is-webgl .ps-fallback {
    opacity: 0;
}
.ps-fallback__plate {
    position: absolute;
    left: 50%;
    top: 72%;
    width: 62%;
    height: 26%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        repeating-linear-gradient(90deg, rgba(165, 180, 252, 0.12) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(0deg, rgba(165, 180, 252, 0.12) 0 1px, transparent 1px 12px),
        radial-gradient(closest-side, rgba(7, 9, 20, 0.55), transparent);
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
    mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.ps-fallback__stack {
    position: absolute;
    left: 50%;
    top: 72%;
    width: 0;
    height: 0;
}
.ps-fallback__layer {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w);
    height: calc(var(--w) * 0.42);
    transform: translate(-50%, -50%) translateY(calc(var(--n) * -1 * var(--lh))) rotate(var(--r));
    border-radius: 46% 54% 50% 50% / 50% 50% 50% 50%;
    background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 38%, #c4b5fd 52%, #8b5cf6 66%, #3730a3 100%);
    box-shadow: inset 0 -2px 0 rgba(7, 9, 20, 0.35), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ps-stage[data-build="run"] .ps-fallback__layer {
    opacity: 0;
    animation: layer-in 420ms var(--ease-out, ease) forwards;
    animation-delay: calc(var(--n) * 80ms);
}
@keyframes layer-in {
    0% { opacity: 0; filter: brightness(1.6); background: var(--color-heat, #ffb86b); }
    30% { opacity: 1; background: var(--color-heat, #ffb86b); }
    100% { opacity: 1; }
}

/* Quote Card (M4 live price) */
.quote-card {
    margin-top: var(--space-lg, 24px);
    padding: var(--space-lg, 24px);
    border-radius: var(--radius-lg, 16px);
    background: linear-gradient(135deg, rgba(91, 94, 240, 0.14), rgba(124, 58, 237, 0.10)), var(--color-surface-solid, #171c36);
    border: 1px solid var(--color-border-accent, rgba(99, 102, 241, 0.45));
    transition: background-color var(--dur-base, 250ms) var(--ease-standard, ease),
                box-shadow var(--dur-base, 250ms) var(--ease-standard, ease);
}
.quote-card.is-updated {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.6), 0 0 36px -8px rgba(99, 102, 241, 0.6);
}
.quote-card__breakdown {
    list-style: none;
    display: grid;
    gap: var(--space-xs, 4px);
    padding: var(--space-ms, 12px) 0;
    margin: var(--space-sm, 8px) 0;
    border-top: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-bottom: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    font-size: var(--text-sm, 0.875rem);
}
.quote-card__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    color: var(--color-text-2, #aab1cc);
}
.quote-card__row span:last-child {
    color: var(--color-text, #f3f4fb);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.quote-card__row--note {
    color: var(--color-warning-text, #fbbf24);
}
.quote-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    margin-top: var(--space-ms, 12px);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-3, #8189a8);
}
.quote-card__foot svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
#cost-value {
    font-variant-numeric: tabular-nums;
}

/* Mobile Sticky Quote Bar */
.quote-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 900);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    padding: var(--space-sm, 8px) var(--gutter, 16px) calc(var(--space-sm, 8px) + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 20, 42, 0.94);
    border-top: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--elev-4);
}
.quote-bar__price {
    font-size: var(--text-xl, 1.5rem);
    font-weight: var(--weight-heavy, 800);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--color-text, #f3f4fb);
}
.quote-bar__label {
    font-size: var(--text-2xs, 0.6875rem);
    color: var(--color-text-3, #8189a8);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps, 0.06em);
}
@media (max-width: 959px) {
    .wizard.active ~ .quote-bar,
    .is-quoting .quote-bar {
        display: flex;
    }
}

/* 3D Viewer Toolbar & Controls */
.viewer-toolbar {
    position: absolute;
    right: var(--space-ms, 12px);
    bottom: var(--space-ms, 12px);
    z-index: 5;
    display: flex;
    gap: var(--space-2xs, 2px);
    padding: var(--space-2xs, 2px);
    background: var(--viewer-label-bg, rgba(7, 9, 20, 0.55));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-md, 12px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.viewer-toolbar__btn {
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    border-radius: var(--radius-sm, 8px);
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-2, #aab1cc);
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, ease),
                color var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.viewer-toolbar__btn svg {
    width: 20px;
    height: 20px;
}
.viewer-toolbar__btn:hover {
    background: var(--color-glass-hover, rgba(255, 255, 255, 0.08));
    color: var(--color-text, #f3f4fb);
}
.viewer-toolbar__btn[aria-pressed="true"],
.viewer-toolbar__btn--active {
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.12));
    color: var(--indigo-300, #a5b4fc);
    box-shadow: inset 0 0 0 1px var(--color-border-accent, rgba(99, 102, 241, 0.45));
}

/* Layer Scrubber */
.layer-scrubber {
    position: absolute;
    left: var(--space-md, 16px);
    bottom: var(--space-ms, 12px);
    z-index: 5;
    display: none;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: 0 var(--space-ms, 12px);
    min-height: 52px;
    width: min(320px, calc(100% - 2 * var(--space-md, 16px)));
    background: var(--viewer-label-bg, rgba(7, 9, 20, 0.55));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-md, 12px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.layer-scrubber.is-open {
    display: flex;
}

/* Inert / Touch Activation for Viewers on Mobile */
.viewer__touch {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.viewer__touch span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    min-height: var(--tap-min, 44px);
    padding: 0 var(--space-md, 16px);
    border-radius: var(--radius-full, 9999px);
    background: var(--viewer-label-bg, rgba(7, 9, 20, 0.55));
    border: 1px solid var(--color-border-hover, rgba(165, 180, 252, 0.26));
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #f3f4fb);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.viewer.is-inert .viewer__touch {
    display: flex;
}
.viewer.is-inert canvas {
    pointer-events: none;
}
.viewer__done {
    display: none;
    position: absolute;
    top: var(--space-ms, 12px);
    right: var(--space-ms, 12px);
    z-index: 5;
}
.viewer.is-touch-active .viewer__done {
    display: inline-flex;
}

/* Previously Unstyled Template Classes */
.badge--sm {
    font-size: var(--text-2xs, 0.6875rem);
    padding: 2px 6px;
    border-radius: var(--radius-full, 9999px);
}
.bambu-job-btn, .job-bambu-btn {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-paid, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.35);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 4px);
    padding: 4px 10px;
    border-radius: var(--radius-md, 12px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, ease),
                border-color var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.bambu-job-btn:hover, .job-bambu-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
}
.btn--outline {
    background: transparent;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    color: var(--color-text, #f3f4fb);
}
.btn--outline:hover {
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    border-color: var(--color-border-hover, rgba(165, 180, 252, 0.26));
}
.cancel-btn {
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    color: var(--color-text-2, #aab1cc);
    padding: 6px 14px;
    border-radius: var(--radius-md, 12px);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.cancel-btn:hover {
    background: var(--color-glass-hover, rgba(255, 255, 255, 0.08));
    color: var(--color-text, #f3f4fb);
}
.save-btn {
    background: var(--gradient-action, linear-gradient(135deg, #5b5ef0, #7c3aed));
    border: 1px solid transparent;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: var(--radius-md, 12px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    transition: box-shadow var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.save-btn:hover {
    box-shadow: var(--elev-glow);
}
.chat-container {
    display: flex;
    flex-direction: column;
    height: 380px;
    background: var(--color-surface, rgba(20, 24, 48, 0.72));
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
}
.chat-message, .chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.6);
    word-break: break-word;
}
.chat-message--self {
    align-self: flex-end;
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.12));
    border: 1px solid var(--color-border-accent, rgba(99, 102, 241, 0.45));
    color: var(--color-text, #f3f4fb);
    border-bottom-right-radius: 2px;
}
.chat-message--other {
    align-self: flex-start;
    background: var(--color-surface-solid, #171c36);
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    color: var(--color-text, #f3f4fb);
    border-bottom-left-radius: 2px;
}
.chat-input-area {
    display: flex;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    background: var(--color-bg-raised, #10142a);
    border-top: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
}
.create-user-container {
    margin-top: var(--space-xl, 32px);
    padding: var(--space-xl, 32px);
    background: var(--color-surface, rgba(20, 24, 48, 0.72));
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--elev-1);
}
.flex-1 {
    flex: 1 1 0%;
    min-width: 0;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
    margin-bottom: var(--space-md, 16px);
}
.h2 {
    font-size: var(--text-2xl, 1.875rem);
    font-weight: var(--weight-bold, 700);
    color: var(--color-text, #f3f4fb);
    line-height: var(--leading-snug, 1.3);
}
.h4 {
    font-size: var(--text-lg, 1.25rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #f3f4fb);
    line-height: var(--leading-snug, 1.3);
}
.h5 {
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #f3f4fb);
    line-height: var(--leading-snug, 1.3);
}
.hover-colour-name {
    margin-left: auto;
    font-size: var(--text-xs, 0.75rem);
    color: var(--indigo-300, #a5b4fc);
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.job-card__actions, .job-card__dynamic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 4px);
    align-items: center;
    margin-top: var(--space-sm, 8px);
}
.job-card__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-sm, 8px);
}
.mesh-alert-header__text {
    flex: 1;
    min-width: 0;
}
.mesh-diag-card--viewer {
    display: flex;
    flex-direction: column;
}
.mesh-diag-card--details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}
.mesh-issue-item__content {
    flex: 1;
    min-width: 0;
}
.mesh-issues-section {
    margin-top: var(--space-md, 16px);
}
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 3000);
    background: var(--color-scrim, rgba(5, 6, 16, 0.72));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter, 16px);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.payment-status-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
}
.pickup-agreement {
    margin-top: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
    padding: 14px 16px;
    background: var(--color-glass, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-md, 12px);
    text-align: left;
}
.printer-checkbox, .settings-printer-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent, #6366f1);
    cursor: pointer;
}
.printer-dropdown-wrapper {
    position: relative;
    width: 100%;
}
.printer-thumb-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs, 4px);
    object-fit: cover;
}
.queue-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
    max-width: 320px;
}
.text-secondary {
    color: var(--color-text-2, #aab1cc);
}
.text-warning {
    color: var(--color-warning-text, #fbbf24);
}
.verification-container {
    margin: var(--space-lg, 24px) 0;
    padding: var(--space-lg, 24px);
    background: var(--color-surface, rgba(20, 24, 48, 0.72));
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-lg, 16px);
}

/* ---------- Responsive Layout Overrides ---------- */

/* Desktop: 2-column journey layout with sticky stage */
@media (min-width: 960px) and (pointer: fine), (min-width: 1024px) {
    .ps-journey {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
    .ps-journey > .hero {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
    }
    .ps-journey > #toronto-3d-printing {
        grid-column: 1;
        grid-row: 2;
    }
    .ps-journey > #how-it-works {
        grid-column: 1;
        grid-row: 3;
    }
    .ps-journey__stage {
        grid-column: 2;
        grid-row: 1 / span 3;
        padding: 0 0 var(--space-4xl, 96px);
    }
    /* Pinned in the middle of the screen below the sticky nav, from scroll 0 to the end of the journey.
       The height leaves room for the 44px trust marquee plus a gap above and below, so at scroll 0 the
       centred stage already clears the marquee and sticky never has to push it down. */
    .ps-stage {
        --ps-stage-h: min(calc(100vh - var(--nav-height, 64px) - 2 * (44px + var(--space-md, 16px))), 760px);
        position: sticky;
        top: calc(var(--nav-height, 64px) + (100vh - var(--nav-height, 64px) - var(--ps-stage-h)) / 2);
        aspect-ratio: auto;
        height: var(--ps-stage-h);
    }
    .hero__subtitle {
        margin-left: 0;
    }
    .ps-journey .seo-header {
        text-align: left;
        margin-left: 0;
    }
    .hero {
        min-height: calc(100vh - var(--nav-height, 64px) - 44px);
    }
}

/* Quoting State: Collapse grid to 1-column when quoting begins */
.ps-journey.is-quoting {
    grid-template-columns: 1fr;
}
.ps-journey.is-quoting .ps-journey__stage {
    display: none;
}
.ps-journey.is-quoting > .hero {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
}

/* Mobile: Enable Uploads Below 576px (Overrides lines 1999-2001 in style.css) */
@media (max-width: 575px) {
    .dropzone {
        display: block !important;
    }
    .wizard.active {
        display: block !important;
    }
    .mobile-message {
        display: none !important;
    }
    @media (pointer: coarse) {
        .mobile-message {
            display: block !important;
        }
    }
}

/* ---------- Reduced Motion (WCAG AA Compliance) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero__bg, .hero__content {
        animation: none !important;
        transform: none !important;
    }
    .announcement-bar__track, .marquee__track {
        animation: none !important;
        transform: none !important;
    }
    .badge__pulse-dot {
        animation: none !important;
    }
    .loader__spinner {
        animation: none !important;
    }
    .dropzone--active {
        animation: none !important;
        transform: none !important;
    }
    .stack-loader i {
        animation: none !important;
        background: var(--indigo-400, #818cf8) !important;
    }
    .ps-stage[data-build="run"] .ps-fallback__layer {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   PrintSphere Redesign - Mockup parity (BRIEF D)
   ------------------------------------------------------------
   Brings the live templates up to mockup/index.html and
   mockup/quote.html, component by component. Rules that override
   an earlier rule say which one and why; they sit here because the
   override only works by cascade order.
   Nothing in this block animates an element into view on scroll:
   there is no [data-reveal], no .is-in and no stagger. Motion here
   belongs to interactions (hover, drag, quote tick, toasts) and to
   the marquee, which ps-motion.js drives.
   ============================================================ */

/* ---------- Base ---------- */
/* Overrides body (top of file): the token font stack with the metric-matched fallback, token type scale. */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    background-color: var(--color-bg);
    color: var(--color-text);
}
button { font: inherit; color: inherit; }
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
#hero-section, #toronto-3d-printing, #how-it-works, #faq {
    scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}

/* ---------- Nav (mockup Nav block) ---------- */
/* Overrides .nav position: fixed. The nav is sticky so the trust marquee sits under it in normal flow, as in the mockup. */
.nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: var(--z-nav);
    background: rgba(26, 11, 46, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border-subtle);
}
/* Overrides .main padding-top and body:has(.announcement-bar) .main: the sticky nav and the marquee now take their own space. */
.main {
    position: relative;
    padding-top: 0;
}
body:has(.announcement-bar) .main {
    padding-top: 0;
}
.nav__inner {
    max-width: calc(var(--container) + 2 * var(--gutter));
    padding: 0 var(--gutter);
    gap: var(--space-md);
}
.nav__logo {
    display: inline-flex;
    min-height: var(--tap-min);
    font-weight: 750;
    letter-spacing: -0.01em;
}
.nav__links { gap: var(--space-xs); }
.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover { color: var(--color-text); background: var(--color-glass); }
.nav__link--accent {
    background: var(--gradient-action);
    color: #fff;
    font-weight: var(--weight-semibold);
}
.nav__link--accent:hover {
    opacity: 1;
    color: #fff;
    background: var(--gradient-action);
    box-shadow: var(--elev-glow);
}
@media (max-width: 768px) {
    /* Phones: the notification dropdown becomes a full-width sheet under the nav instead of a 340px box that runs off-screen. */
    .notif-dropdown {
        position: fixed;
        top: calc(var(--nav-height) + var(--space-xs));
        left: var(--gutter);
        right: var(--gutter);
        width: auto;
    }
}

/* ---------- Trust marquee (scroll-reactive, pausable) ---------- */
/* .announcement-bar (fixed under the nav, 60s CSS keyframe loop) is overridden here: the same element is now the
   mockup marquee, in flow under the sticky nav, and ps-motion.js moves the track. */
.marquee,
.marquee.announcement-bar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--gradient-action);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    white-space: normal;
}
.marquee__viewport { overflow: hidden; flex: 1; min-width: 0; }
.marquee__track,
.marquee .announcement-bar__track {
    display: flex;
    width: max-content;
    animation: none;
    will-change: transform;
}
.marquee__group {
    display: flex;
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.marquee__item::after { content: "\25C8"; margin-left: var(--space-lg); opacity: 0.45; font-size: 0.75em; }
.marquee__pause:hover { background: rgba(7, 9, 20, 0.42); }

/* ---------- Hero ---------- */
/* Overrides .hero: the centred full-viewport flex box becomes a column of the journey grid. */
.hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: calc(100svh - var(--nav-height) - 44px);
    padding: clamp(32px, 6vh, 72px) 0 var(--space-2xl);
    overflow: visible;
    text-align: center;
}
/* Overrides .hero__bg: the two blurred 600px blobs are gone; the page is one solid --color-bg. */
.hero__bg { display: none; }
/* Overrides .hero__content max-width 640px and text-align: the journey column sets both. */
.hero__content {
    max-width: none;
    text-align: inherit;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--indigo-300);
    margin-bottom: var(--space-md);
}
.hero__title {
    font-size: var(--text-display);
    font-weight: var(--weight-heavy);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-md);
}
.hero__subtitle {
    font-size: var(--text-md);
    color: var(--color-text-2);
    line-height: var(--leading-relaxed);
    max-width: 34em;
    margin: 0 auto var(--space-xl);
}
/* Overrides .dropzone__icon opacity 0.7 (emoji era): the SVG icon is drawn at full strength. */
.dropzone__icon { opacity: 1; display: block; }
.dropzone__text { color: var(--color-text); }

/* Upload loader: progress bar, then the M6 layer-stack "slicing" loader.
   Overrides .loader__spinner (spinning ring): five bars that fill bottom to top, the newest layer hot. */
.loader.active {
    flex-direction: column;
    gap: var(--space-sm);
}
.loader__text { margin-left: 0; color: var(--color-text-2); }
.loader__spinner {
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(to top, var(--indigo-400) 0 calc(100% - 8px), var(--color-heat) calc(100% - 8px)) left bottom / 100% 0% no-repeat,
        var(--color-border-hover);
    -webkit-mask: repeating-linear-gradient(to top, #000 0 5px, transparent 5px 8px);
    mask: repeating-linear-gradient(to top, #000 0 5px, transparent 5px 8px);
    animation: ps-slice 1200ms steps(5, end) infinite;
}
@keyframes ps-slice {
    from { background-size: 100% 0%, auto; }
    to { background-size: 100% 100%, auto; }
}

/* Phone hint (mockup .phone-hint). .mobile-message keeps its classes; it becomes one quiet line shown on touch screens.
   The #upload-stage selector out-ranks the legacy display: none !important at 576px and up. */
.mobile-message {
    padding: 0;
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-align: inherit;
}
.mobile-message__icon,
.mobile-message__title,
.mobile-message__desc {
    display: inline;
    font-size: inherit;
    margin: 0;
}
.mobile-message__icon { margin-right: var(--space-2xs); }
.mobile-message__title { font-weight: var(--weight-semibold); color: var(--color-text-2); }
.mobile-message__desc { color: inherit; }
@media (pointer: coarse) {
    #upload-stage .mobile-message { display: block !important; }
}
@media (pointer: fine) {
    #upload-stage .mobile-message { display: none !important; }
}

/* ---------- Stage ---------- */
@media (min-width: 960px) and (pointer: fine), (min-width: 1024px) {
    /* Desktop hero is left-aligned in its column (repeats the BRIEF C2 margin-left: 0, which the rule above out-orders). */
    .ps-journey > .hero .hero__subtitle { margin-left: 0; }
}
@media (max-width: 959px) {
    .hero { min-height: 0; padding-top: var(--space-xl); }
    .ps-stage { aspect-ratio: 16 / 11; }
}
@media (max-width: 768px) {
    /* Overrides the 768px .hero padding and the 1.75rem .hero__title: the display token already scales down. */
    .hero { padding: var(--space-xl) 0 var(--space-2xl); }
    .hero__title { font-size: var(--text-display); }
}
@media (max-width: 480px) {
    .ps-stage { aspect-ratio: 1 / 1; }
}

/* ---------- Buttons ---------- */
/* Overrides .btn and its size variants: 44px minimum hit area, token radius, transitions on the properties that change. */
.btn {
    min-height: var(--tap-min);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--gradient-action); color: var(--color-text-on-accent); border: 0; box-shadow: var(--elev-1); }
.btn--primary:hover { box-shadow: var(--elev-glow); transform: translateY(calc(var(--move-sm) * -1)); }
.btn--primary:active { transform: none; }
.btn--ghost {
    background: var(--color-glass);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.btn--ghost:hover { background: var(--color-glass-hover); border-color: var(--color-border-hover); color: var(--color-text); }
.btn--lg { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-base); border-radius: var(--radius-md); }
.btn--sm { min-height: 36px; padding: 0 var(--space-ms); font-size: 0.8rem; }

/* ---------- SEO sections (local service, how it works, FAQ) ---------- */
/* Overrides .seo-section padding: the horizontal gutter now comes from .ps-journey or .seo-container. */
.seo-section { padding: clamp(56px, 9vw, var(--space-4xl)) 0; }
.ps-journey .seo-section { border-top: 1px solid var(--color-border-subtle); }
/* Overrides .seo-section--alt: a full-bleed band would cut across the pinned stage in the journey column. */
.ps-journey .seo-section--alt { background: none; border-bottom: 0; }
/* Overrides .seo-container 1100px: one container width site-wide. */
.seo-container { max-width: calc(var(--container) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.ps-journey .seo-container { max-width: none; padding: 0; }
.seo-header { max-width: var(--container-narrow); margin: 0 auto var(--space-2xl); }
.seo-header .badge {
    gap: var(--space-xs);
    padding: 4px 10px;
    background: var(--color-accent-soft);
    color: var(--indigo-300);
    border: 1px solid var(--color-border-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}
.seo-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-title);
    line-height: var(--leading-snug);
    margin: var(--space-sm) 0;
}
.seo-desc { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-2); }
.seo-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-md); }
.seo-card, .seo-step, .seo-faq-item {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--elev-1);
    transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
                background-color var(--dur-base) var(--ease-standard);
}
/* Overrides .seo-card:hover lift: the accent border and a deeper shadow carry the hover. */
.seo-card:hover { border-color: var(--color-border-accent); box-shadow: var(--elev-2); transform: none; }
.seo-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    background: var(--color-accent-soft);
    color: var(--indigo-300);
    border: 1px solid var(--color-border-accent);
}
.seo-card__icon svg { width: 22px; height: 22px; }
.seo-card__title, .seo-step__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
}
.seo-card__text, .seo-step__text, .seo-faq-answer {
    color: var(--color-text-2);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}
/* Overrides .seo-steps three-up grid: a vertical list that the pinned stage camera follows. */
.seo-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.seo-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
    align-items: start;
}
.seo-step__num {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    font-weight: var(--weight-heavy);
    font-size: var(--text-md);
    background: var(--gradient-action);
}
/* The step the reader is on (set by ps-motion.js from the scroll position, never on first view). A state change of
   an element that is already on screen; it does not move, fade or clip anything into view. */
.seo-step.is-current {
    border-color: var(--color-border-accent);
    background-color: var(--color-surface-elevated);
    box-shadow: var(--elev-glow);
}
.seo-step__bar {
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-border);
}
.seo-step.is-current .seo-step__bar { background: var(--gradient-brand); }
.seo-faq-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-md); }
.seo-faq-question {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
}
.cta-band {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(91, 94, 240, 0.18), rgba(124, 58, 237, 0.18)), var(--color-surface-solid);
    border: 1px solid var(--color-border-accent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.cta-band p { color: var(--color-text-2); max-width: 36em; }
.cta-band strong { display: block; color: var(--color-text); font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
@media (max-width: 480px) {
    .seo-step { grid-template-columns: 1fr; }
    .seo-step__num { grid-row: auto; margin-bottom: var(--space-sm); }
    .cta-band .btn { width: 100%; }
}

/* ---------- Footer ---------- */
/* Overrides .site-footer and children: container width, caps headings, 44px link targets, left-aligned legal line. */
.site-footer {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-3xl) var(--gutter) var(--space-xl);
}
.site-footer__inner { max-width: var(--container); gap: var(--space-2xl); }
.site-footer__brand p { font-size: var(--text-sm); color: var(--color-text-3); max-width: 320px; }
.site-footer__links { gap: var(--space-2xl); }
.site-footer__col { gap: var(--space-2xs); }
.site-footer__heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}
.site-footer__link, .site-footer__text {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-decoration: none;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.site-footer__link { min-height: var(--tap-min); }
.site-footer__link:hover { color: var(--color-text); }
.site-footer__bottom {
    max-width: var(--container);
    margin: var(--space-2xl) auto 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
    text-align: left;
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

/* ---------- Toasts ---------- */
/* Overrides .toast-container and .toast: full-width gutter rail on phones, toasts rise (translateY) instead of sliding 40px sideways. */
.toast-container {
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    align-items: flex-end;
    pointer-events: none;
    z-index: var(--z-toast);
}
.toast {
    pointer-events: auto;
    max-width: 420px;
    padding: var(--space-ms) var(--space-md);
    background: var(--color-surface-solid);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-4);
    font-size: var(--text-sm);
    animation: ps-toast-in var(--dur-slow) var(--ease-out);
}
.toast--error { border-color: rgba(239, 68, 68, 0.5); color: var(--color-danger-text); }
.toast.hiding { animation: ps-toast-out 300ms var(--ease-standard) forwards; }
@keyframes ps-toast-in { from { opacity: 0; transform: translateY(var(--move-md)); } }
@keyframes ps-toast-out { to { opacity: 0; transform: translateY(var(--move-md)); } }

/* ---------- Wizard (mockup quote.html) ---------- */
.wizard { text-align: left; }
/* Overrides .wizard max-width 560px once the customer's model is on screen: two columns, viewer left. */
.wizard:has(.stl-carousel__slide) { max-width: 1040px; }
.wizard:has(.stl-carousel__slide) #step-1,
.wizard:has(.stl-carousel__slide) #step-2 { max-width: 560px; margin: 0 auto; }
/* Overrides .wizard__progress dots: numbered steps with labels, the current one filled. */
.wizard__progress {
    counter-reset: ps-step;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}
.wizard__dot,
.wizard__dot.active,
.wizard__dot.completed {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-text-3);
}
.wizard__dot::before {
    counter-increment: ps-step;
    content: counter(ps-step);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border: 1px solid var(--color-border);
    background: var(--color-glass);
    color: var(--color-text-2);
}
.wizard__dot::after { content: attr(data-label); }
.wizard__dot.completed::before { background: var(--color-accent-soft); border-color: var(--color-border-accent); color: var(--indigo-300); }
.wizard__dot.active { color: var(--color-text); font-weight: var(--weight-semibold); }
.wizard__dot.active::before { background: var(--gradient-action); border-color: transparent; color: #fff; }
.wizard__line { width: clamp(16px, 4vw, 48px); height: 2px; border-radius: 2px; background: var(--color-border); }
.wizard__line.completed { background: var(--gradient-brand); }
@media (max-width: 480px) {
    .wizard__dot:not(.active)::after { content: none; }
}
.wizard__step-title:focus:not(:focus-visible) {
    outline: none;
}
.wizard__step-title {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-title);
    line-height: var(--leading-snug);
    margin-bottom: 0;
}
.wizard__step-desc { color: var(--color-text-2); font-size: var(--text-base); margin: var(--space-xs) 0 var(--space-lg); }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 960px) {
    .quote-layout:has(.stl-carousel__slide) {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: var(--space-xl);
        align-items: start;
    }
    .quote-layout:has(.stl-carousel__slide) .quote-viewer-col {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-lg));
    }
}
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(18px, 3vw, 28px);
    box-shadow: var(--elev-1);
}
.wizard .label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-2);
    margin: var(--space-lg) 0 var(--space-sm);
}
.quote-panel > .label:first-child { margin-top: 0; }
.wizard .input, .wizard .textarea, .wizard .select { background: var(--color-bg-raised); }

/* Material picker: overrides the boxed flex rows with the mockup label column and 44px swatch targets. */
.wizard .material-picker {
    background: none;
    border: 0;
    padding: 0;
    gap: 0;
    margin-bottom: 0;
}
.material-group-row {
    display: grid;
    grid-template-columns: minmax(96px, 128px) 1fr;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.material-group-label {
    display: block;
    min-width: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.material-group-type {
    display: block;
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: normal;
}
.material-group-sep { display: none; }
.material-group-price { color: var(--color-text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.material-swatches { gap: 2px; }
.swatch-btn,
.swatch-btn:hover,
.swatch-btn.selected {
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transform: none;
}
.swatch-btn:focus-visible { border-radius: 50%; }
.swatch-dot {
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.18);
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-standard);
}
.swatch-btn:hover .swatch-dot { transform: scale(1.08); }
.swatch-btn.selected .swatch-dot {
    transform: scale(1.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--indigo-300);
}
.swatch-dot--rainbow { background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #8b5cf6, #ec4899, #ef4444); }
.selected-colour-bar {
    flex-wrap: nowrap;
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-ms);
    border-top: 0;
    border-radius: var(--radius-md);
    background: var(--color-glass);
    font-size: var(--text-sm);
}
.selected-colour-dot { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* One line at a fixed size: the hover name only fills the space the selected name leaves, so nothing moves or wraps. */
.selected-colour-text,
.hover-colour-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.selected-colour-text { flex: 0 1 auto; }
.hover-colour-name { flex: 1 1 0; text-align: right; }

/* Priority: overrides the centred cards; left-aligned radio cards, accent fill when selected. */
.priority-group { margin-bottom: 0; }
.priority-option {
    text-align: left;
    padding: var(--space-ms) var(--space-md);
    min-height: 64px;
    border-color: var(--color-border);
    background: var(--color-glass);
    transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-base) var(--ease-spring);
}
.priority-option:hover { border-color: var(--color-border-hover); background: var(--color-glass); }
.priority-option.selected { border-color: var(--color-border-accent); background: var(--color-accent-soft); box-shadow: none; }
.priority-option.selected:active { transform: scale(0.98); }
.priority-option:focus-visible { border-radius: var(--radius-md); }
.priority-option__title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.priority-option__desc { font-size: var(--text-xs); color: var(--color-text-3); }

/* Quantity: 44px buttons, 76px field. */
.quantity-control { gap: var(--space-sm); margin-bottom: 0; }
.quantity-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    background: var(--color-glass);
    border-color: var(--color-border);
}
.quantity-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); color: var(--color-text); }
.quantity-input {
    width: 76px;
    height: var(--tap-min);
    background: var(--color-bg-raised);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}
.quantity-input:focus-visible { border-radius: var(--radius-md); }

/* Quote card (M4): overrides .cost-display centring and the gradient-clipped price. */
.cost-display.quote-card { text-align: left; margin: var(--space-lg) 0 0; }
.cost-display__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-2);
    margin-bottom: 0;
}
.cost-display__value {
    font-size: var(--text-hero-num);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin: var(--space-2xs) 0 var(--space-sm);
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-text);
    transition: opacity var(--dur-fast) var(--ease-standard);
}
.cost-display__value.is-tbd { color: var(--color-warning-text); }
.quote-panel .wizard__actions .btn--primary { width: 100%; }

/* Phone quote bar: never on desktop (guards the inline display:flex the wizard script sets), lifts the FAB and toasts. */
@media (min-width: 960px) {
    .quote-bar { display: none !important; }
}
.quote-bar__cta { flex-shrink: 0; }
body.has-quote-bar { padding-bottom: calc(var(--quote-bar-h) + var(--space-sm)); }
body.has-quote-bar .feedback-fab { bottom: calc(24px + var(--quote-bar-h)); }
body.has-quote-bar .toast-container { bottom: calc(var(--quote-bar-h) + var(--space-lg)); }

/* ---------- Viewer (wizard carousel, mockup .viewer) ---------- */
/* Overrides .stl-carousel and its 320px viewport: the studio gradient card from the mockup, taller on desktop. */
.stl-carousel {
    margin-bottom: 0;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: radial-gradient(70% 55% at 50% 38%, rgba(165, 180, 252, 0.16), transparent 70%),
                linear-gradient(180deg, var(--viewer-bg-top), var(--viewer-bg-bottom));
    box-shadow: var(--elev-3);
    isolation: isolate;
}
.stl-carousel__viewport { height: var(--viewer-height); }
@media (min-width: 960px) {
    .stl-carousel__viewport { height: clamp(300px, 56vh, 600px); }
}
.stl-carousel__slide:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus-ring, #a5b4fc); border-radius: var(--radius-2xl); }
.stl-carousel__slide:fullscreen { height: 100%; background: var(--viewer-bg-bottom); }
.stl-carousel__slide:fullscreen .stl-viewer { height: 100%; }
.stl-carousel__label {
    top: var(--space-md);
    bottom: auto;
    left: var(--space-md);
    z-index: 4;
    max-width: calc(100% - 2 * var(--space-md));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text);
    background: var(--viewer-label-bg);
    border: 1px solid var(--color-border-subtle);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.stl-carousel__nav { background: rgba(7, 9, 20, 0.35); border-top: 1px solid var(--color-border-subtle); }
.stl-carousel__btn { width: var(--tap-min); height: var(--tap-min); }
.viewer__meta {
    position: absolute;
    top: 52px;
    left: var(--space-md);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    pointer-events: none;
}
.viewer__readout, .viewer__dims {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-2);
    font-variant-numeric: tabular-nums;
    background: var(--viewer-label-bg);
    border: 1px solid var(--color-border-subtle);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.viewer__readout b { color: var(--color-text); font-weight: 600; }
.viewer__readout .is-hot { color: var(--color-heat); }
.viewer__dims.is-warn { color: var(--color-warning-text); border-color: rgba(245, 158, 11, 0.45); }
.viewer-toolbar__btn[hidden] { display: none; }
.viewer.has-scrubber .viewer-toolbar { bottom: calc(var(--space-ms) + 60px); }
.layer-scrubber label { font-size: var(--text-xs); color: var(--color-text-2); white-space: nowrap; }
.viewer__hint { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-3); }
.stl-carousel[style*="none"] ~ .viewer__hint { display: none; }
.range {
    width: 100%;
    height: var(--tap-min);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    accent-color: var(--indigo-500);
}
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--indigo-500) 0 var(--fill, 100%), var(--color-border) var(--fill, 100%)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-border); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--indigo-500); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--indigo-500); box-shadow: var(--elev-2); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--indigo-500); }
.range:focus-visible { box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }

/* ---------- Focus states ---------- */
.dropzone:focus-visible { border-radius: var(--radius-2xl); }
.nav__link:focus-visible, .btn:focus-visible { border-radius: var(--radius-md); }
.site-footer__link:focus-visible, .marquee__pause:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus-ring, #a5b4fc); }

/* ---------- Mesh error stage on phones ---------- */
@media (max-width: 575px) {
    .mesh-confirm-actions .btn { width: 100%; white-space: normal; }
}

/* ---------- Phones: 16px controls so iOS does not zoom on focus ---------- */
@media (pointer: coarse) {
    .input, .textarea, .select, .quantity-input { font-size: 16px; }
}

/* ---------- Reduced motion (everything added in this block) ---------- */
@media (prefers-reduced-motion: reduce) {
    .marquee__viewport { overflow-x: auto; scrollbar-width: thin; }
    .marquee__track { transform: none !important; }
    .marquee__group[aria-hidden="true"] { display: none; }
    .marquee__pause { display: none; }
    .loader__spinner { animation: none !important; background-size: 100% 100%, auto; }
    .toast, .toast.hiding { animation-duration: 0.01ms !important; }
    .swatch-btn:hover .swatch-dot, .swatch-btn.selected .swatch-dot { transition: none; }
    .btn--primary:hover { transform: none; }
}

/* ---------- UI audit fixes: contrast, focus and small-screen layout ---------- */
/* White text on the #6366f1 start of --gradient-brand is 4.47:1, just under AA.
   Filled controls with white text use the darker --gradient-action (4.88:1). */
.feedback-fab { background: var(--gradient-action); color: var(--color-text-on-accent); }
.timeline__step.current .timeline__dot { background: var(--indigo-600); border-color: var(--indigo-600); }
/* White on #22c55e is 2.3:1; dark ink on the same green is 8:1. */
.timeline__step.completed .timeline__dot { color: #052e16; }
/* White on #059669 is 3.8:1. */
.badge.badge--paid-pill { background: #047857; }

/* Red text on card surfaces needs the lighter danger tint. */
.text-danger,
.payment-card__errors,
.mesh-axis-status--danger { color: var(--color-danger-text); }

/* Input focus was a 25% alpha glow that was hard to see; use the site focus colour. */
.input:focus,
.textarea:focus,
.select:focus,
.table input:focus,
.table select:focus {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.35);
}
/* .btn--link turns off box-shadow with !important, which also hid the keyboard focus ring. */
.btn--link:focus-visible { box-shadow: var(--focus-ring) !important; }
/* The quote wizard's swatch and queue pickers reset box-shadow, which also removed their keyboard focus ring. */
.swatch-btn:focus-visible,
.priority-option:focus-visible { box-shadow: var(--focus-ring); }

/* Native checkboxes and radios pick up the brand colour instead of the OS default. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--color-accent); }

/* The five-step job timeline needs 400px at 80px a step, so on phones the last step was cut off behind a scroll. */
@media (max-width: 575px) {
    .timeline { padding: var(--space-md) var(--space-xs); }
    .timeline__step { min-width: 0; }
}

/* Native form controls (unchecked boxes, date pickers, select lists) render in their light theme on this dark site. */
input,
select,
textarea { color-scheme: dark; }

/* Phones: room under the last control so the fixed feedback button never covers it. */
@media (max-width: 768px) {
    .main:not(:has(.site-footer)) { padding-bottom: calc(52px + var(--space-xl)); }
}

/* Links inside FAQ answers (index.html FAQ, e.g. the materials guide link). */
.seo-faq-answer a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.seo-faq-answer a:hover { color: var(--color-text); }

/* ---------- Notification bell on the nav bar ---------- */
/* The bell sits outside the menu so phones show it next to the menu button.
   On wider screens it follows the links, as before. */
.nav__logo { margin-right: auto; }
.nav__bell { order: 2; }
.nav__links { order: 1; }
.nav__profile { order: 3; }
.nav__toggle { order: 4; }
@media (max-width: 768px) {
    .nav__bell .notif-bell__btn {
        width: var(--tap-min, 44px);
        height: var(--tap-min, 44px);
    }
}

/* ---------- Profile menu on the nav bar (Account and Sign out) ---------- */
.profile-menu {
    position: relative;
    display: flex;
    align-items: center;
}
.profile-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full, 999px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    color: var(--color-text, #f3f4fb);
    cursor: pointer;
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.profile-menu__btn:hover,
.profile-menu__btn[aria-expanded="true"] { background: var(--color-glass-hover); }
.profile-menu__icon { width: 20px; height: 20px; }
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 2 * var(--gutter, 16px));
    padding: var(--space-xs, 4px);
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    flex-direction: column;
}
.profile-dropdown[hidden] { display: none; }
.profile-dropdown form { margin: 0; }
.profile-dropdown__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    margin-bottom: var(--space-xs, 4px);
    border-bottom: 1px solid var(--color-border-subtle);
    min-width: 0;
}
.profile-dropdown__name {
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #f3f4fb);
    overflow-wrap: anywhere;
}
.profile-dropdown__sub {
    font-size: var(--text-sm, 0.85rem);
    color: var(--color-text-3);
    overflow-wrap: anywhere;
}
.profile-dropdown__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap-min, 44px);
    padding: 0 var(--space-md, 12px);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-2, var(--color-text));
    font: inherit;
    font-size: var(--text-sm, 0.9rem);
    font-weight: var(--weight-medium, 500);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.profile-dropdown__item:hover { color: var(--color-text); background: var(--color-glass); }
.profile-dropdown__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 768px) {
    .profile-menu__btn {
        width: var(--tap-min, 44px);
        height: var(--tap-min, 44px);
    }
    .profile-dropdown {
        position: fixed;
        top: calc(var(--nav-height) + var(--space-xs));
        right: var(--gutter);
    }
}

/* ---------- Phone layout: fields never spill into each other ---------- */
/* Grid and flex children default to min-width: auto, so a wide date or email pushes into the next column. */
.job-card__grid > *,
.mj-row > *,
.job-detail { min-width: 0; }
.job-detail__value { overflow-wrap: anywhere; }
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-width: 0;
    max-width: 100%;
}
/* iPhone Safari sizes date and time inputs to their text and ignores width until the native look is turned off. */
@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-height: var(--tap-min, 44px);
    }
    input::-webkit-date-and-time-value { text-align: left; }
}
/* Dashboard tabs wrap on phones instead of hiding the last ones behind the card or list toggle. */
@media (max-width: 600px) {
    .dash-toolbar .tabs {
        flex-wrap: wrap;
        overflow: visible;
    }
    .dash-toolbar .tab { padding: var(--space-sm) var(--space-sm); }
}

/* Pick up where you left off: an unfinished upload this browser remembers (upload_drafts.py) */
.resume-draft {
    display: flex;
    align-items: center;
    gap: var(--space-md, 16px);
    width: 100%;
    margin-top: var(--space-md, 16px);
    padding: 12px 16px 12px 12px;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border-accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 4px var(--color-accent-glow), var(--elev-2, 0 8px 24px rgba(0, 0, 0, 0.3));
    animation: resume-draft-in var(--dur-slow, 400ms) var(--ease-standard, ease) both;
}

.resume-draft[hidden] {
    display: none;
}

.resume-draft__preview {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 12px);
    background: var(--color-glass);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    pointer-events: none;
}

.resume-draft__body {
    flex: 1 1 auto;
    min-width: 0;
}

.resume-draft__title {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.resume-draft__file {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-draft__meta {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-2);
}

.resume-draft__meta:empty {
    display: none;
}

.resume-draft__actions {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
}

.resume-draft__continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 8px 8px;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: none;
    color: var(--color-accent-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.resume-draft__arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--dur-base, 250ms) var(--ease-standard, ease);
}

.resume-draft__continue:hover,
.resume-draft__continue:focus-visible {
    color: var(--color-text);
}

.resume-draft__continue:hover .resume-draft__arrow,
.resume-draft__continue:focus-visible .resume-draft__arrow {
    transform: translateX(5px);
}

.resume-draft__continue:disabled {
    opacity: 0.6;
    cursor: progress;
}

@keyframes resume-draft-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .resume-draft { animation: none; }
}

@media (max-width: 560px) {
    .resume-draft {
        gap: var(--space-sm, 8px);
        padding: 10px;
    }
    .resume-draft__preview {
        width: 64px;
        height: 64px;
    }
    .resume-draft__title {
        font-size: 0.92rem;
    }
}

/* ---- css/tokens.css ---- */
/* ============================================================
   PrintSphere - Design Tokens
   ------------------------------------------------------------
   Plain CSS custom properties. No build step, no preprocessor.
   Ported from the approved redesign mockup (mockup/tokens.css).

   Linked in base.html AFTER style.css, so the values in this
   :root win over the :root block at the top of style.css
   without editing those lines.

   Removed from the mockup token set on purpose:
     --dur-reveal and --stagger. They only existed for the M5
     "Build Up" scroll-entry reveal, which is not implemented:
     nothing on the site slides, fades or clips into view on scroll.
     --gradient-hero-wash. The home page background is one solid
     dark purple (--color-bg), with no wash or layer-line texture.

   LEGACY ALIASES KEPT (every variable name that style.css, an
   inline style="" attribute or template JS used before this file
   existed still resolves; each now points at a new token):
     --bg-primary        -> --color-bg
     --bg-secondary      -> --color-bg-raised
     --bg-card           -> --color-surface
     --bg-card-solid     -> --color-surface-solid
     --bg-card-hover     -> --color-surface-hover   (was referenced, never defined)
     --bg-elevated       -> --color-surface-elevated
     --bg-glass          -> --color-glass
     --bg-glass-hover    -> --color-glass-hover
     --accent-primary    -> --color-accent
     --accent-secondary  -> --color-accent-2
     --accent-gradient   -> --gradient-brand
     --accent-glow       -> --color-accent-glow
     --accent-light      -> --indigo-300             (was referenced, never defined)
     --accent-text       -> --color-accent-text      (was referenced, never defined)
     --text-primary      -> --color-text
     --text-secondary    -> --color-text-2
     --text-muted        -> --color-text-3
     --text-accent       -> --indigo-300
     --border-subtle     -> --color-border-subtle
     --border-default    -> --color-border
     --border-hover      -> --color-border-hover
     --border-accent     -> --color-border-accent
     --status-success    -> --color-success
     --status-warning    -> --color-warning
     --status-danger     -> --color-danger
     --status-info       -> --color-info
     --shadow-sm         -> --elev-1
     --shadow-md         -> --elev-2
     --shadow-lg         -> --elev-3
     --shadow-xl         -> --elev-4
     --shadow-glow       -> --elev-glow
     --transition-fast   -> --dur-fast + --ease-standard
     --transition-base   -> --dur-base + --ease-standard
     --transition-slow   -> --dur-slow + --ease-standard
   Kept under their own names with the same meaning:
     --space-xs .. --space-3xl (values unchanged), --radius-sm ..
     --radius-full, --nav-height (64px, 56px at 768px and below).
   ============================================================ */

/* ---------- Self-hosted Inter (static/fonts, latin subset) ---------- */
/* font-display: swap shows the metric-matched fallback below first,
   so the swap does not shift layout. Weight 800 is not self-hosted;
   it resolves to the nearest available face. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ---------- Metric-matched fallback font (cuts layout shift) ---------- */
/* Used while self-hosted Inter is loading under font-display: swap.
   Overrides are the published Inter-over-Arial metrics used by
   Next.js next/font; verify visually once Inter is self-hosted. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 107.06%;
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
}

:root {
    /* ========================================================
       COLOUR: surfaces (dark purple)
       ======================================================== */
    --color-bg: #1a0b2e;                               /* one solid dark purple page colour (was #0a0d1c navy; originally --bg-primary: #0a0f1e) */
    --color-bg-raised: #22103a;                        /* replaces --bg-secondary: #111827 */
    --color-bg-sunken: #13081f;                        /* replaces .site-footer background: #090d16 and .mesh-viewer-container #070b14 */
    --color-surface: rgba(40, 22, 70, 0.72);           /* replaces --bg-card: rgba(17, 24, 39, 0.7) */
    --color-surface-solid: #271645;                    /* replaces --bg-card-solid: #1a2236 */
    --color-surface-hover: #2f1c52;                    /* replaces undefined --bg-card-hover (fallback #2c3240 in .quantity-btn:hover) */
    --color-surface-elevated: rgba(52, 32, 92, 0.64);  /* replaces --bg-elevated: rgba(30, 41, 70, 0.6) */
    --color-glass: rgba(255, 255, 255, 0.04);          /* replaces --bg-glass: rgba(255, 255, 255, 0.04) (unchanged) */
    --color-glass-hover: rgba(255, 255, 255, 0.08);    /* replaces --bg-glass-hover: rgba(255, 255, 255, 0.08) (unchanged) */
    --color-scrim: rgba(10, 4, 20, 0.72);              /* replaces .feedback-modal-overlay rgba(0,0,0,0.6) and printjob modal rgba(0,0,0,0.8) */

    /* ========================================================
       COLOUR: brand indigo ramp (500 is today's accent, kept)
       ======================================================== */
    --indigo-50: #eef0ff;                              /* new, no current equivalent */
    --indigo-100: #e0e3ff;                             /* new, no current equivalent */
    --indigo-200: #c4c9ff;                             /* new, no current equivalent */
    --indigo-300: #a5b4fc;                             /* replaces --text-accent: #a5b4fc and .badge--accent color #a5b4fc */
    --indigo-400: #818cf8;                             /* new; replaces small-text uses of #6366f1 on dark (4.27:1, fails AA) */
    --indigo-500: #6366f1;                             /* replaces --accent-primary: #6366f1 (unchanged) */
    --indigo-600: #5b5ef0;                             /* new; button fill start, white text 4.88:1 (today #6366f1 gives 4.47:1) */
    --indigo-700: #4f46e5;                             /* new, no current equivalent */
    --indigo-800: #3730a3;                             /* new, no current equivalent */
    --indigo-900: #1e1b4b;                             /* new, no current equivalent */

    /* ========================================================
       COLOUR: brand violet ramp (500 is today's secondary, kept)
       ======================================================== */
    --violet-300: #c4b5fd;                             /* new, no current equivalent */
    --violet-400: #a78bfa;                             /* new, no current equivalent */
    --violet-500: #8b5cf6;                             /* replaces --accent-secondary: #8b5cf6 (unchanged) */
    --violet-600: #7c3aed;                             /* new; button fill end, white text 5.70:1 (today #8b5cf6 gives 4.23:1) */

    /* ========================================================
       COLOUR: accent roles
       ======================================================== */
    --color-accent: var(--indigo-500);                 /* replaces --accent-primary: #6366f1 */
    --color-accent-2: var(--violet-500);               /* replaces --accent-secondary: #8b5cf6 */
    --color-accent-text: #9aa5fb;                      /* replaces undefined --accent-text and small-text color: var(--accent-primary); was --indigo-400, which fell to 4.1:1 on accent-tinted badges and raised cards (now 5.4:1 or better) */
    --color-accent-soft: rgba(99, 102, 241, 0.12);     /* replaces rgba(99, 102, 241, 0.08) selected fills and rgba(99, 102, 241, 0.15) badge fill */
    --color-accent-glow: rgba(99, 102, 241, 0.28);     /* replaces --accent-glow: rgba(99, 102, 241, 0.25) */
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);          /* replaces --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6) (display text, unchanged look) */
    --gradient-action: linear-gradient(135deg, #5b5ef0 0%, #7c3aed 100%);         /* new; replaces --accent-gradient on .btn--primary, .nav__link--accent, .feedback-fab (AA-safe white text) */

    /* Layer-line texture: 1px faint line every 4px, the visual
       motif of FDM layers. Used on the 3D viewer stage at very
       low contrast. */
    --pattern-layers: repeating-linear-gradient(0deg, rgba(165, 180, 252, 0.035) 0 1px, transparent 1px 4px); /* new, no current equivalent */

    /* Signature "hot layer" colour: used ONLY for the freshly
       extruded layer line in the 3D build reveal, never for UI chrome. */
    --color-heat: #ffb86b;                             /* new, no current equivalent (11.33:1 on --color-bg) */

    /* ========================================================
       COLOUR: text (all AA on --color-bg and --color-surface-solid)
       ======================================================== */
    --color-text: #f3f4fb;                             /* replaces --text-primary: #f1f5f9 (17.61:1 on bg) */
    --color-text-2: #aab1cc;                           /* replaces --text-secondary: #94a3b8 (9.08:1 on bg) */
    --color-text-3: #959dbb;                           /* replaces --text-muted: #64748b; was #8189a8, which fell to 3.6:1 on raised cards and job cards (now 6.9:1 on bg, 4.6:1 or better on every card surface) */
    --color-text-on-accent: #ffffff;                   /* replaces color: white on .btn--primary, .nav__link--accent, .seo-step__num */

    /* ========================================================
       COLOUR: borders (violet-tinted instead of pure white)
       ======================================================== */
    --color-border-subtle: rgba(165, 180, 252, 0.08);  /* replaces --border-subtle: rgba(255, 255, 255, 0.06) */
    --color-border: rgba(165, 180, 252, 0.14);         /* replaces --border-default: rgba(255, 255, 255, 0.1) */
    --color-border-hover: rgba(165, 180, 252, 0.26);   /* replaces --border-hover: rgba(255, 255, 255, 0.18) */
    --color-border-accent: rgba(99, 102, 241, 0.45);   /* replaces --border-accent: rgba(99, 102, 241, 0.4) */
    --color-focus-ring: #a5b4fc;                       /* new; replaces focus box-shadow 0 0 0 3px var(--accent-glow) (25% alpha, too faint) */

    /* ========================================================
       COLOUR: status (hues unchanged; text tints formalised)
       ======================================================== */
    --color-success: #22c55e;                          /* replaces --status-success: #22c55e (unchanged) */
    --color-success-text: #4ade80;                     /* replaces hard-coded #4ade80 in .badge--success, .job-card__cost */
    --color-success-soft: rgba(34, 197, 94, 0.14);     /* replaces rgba(34, 197, 94, 0.15) in .badge--success, .badge--paid */
    --color-paid: #10b981;                             /* replaces hard-coded #10b981 in .job-card--paid, .btn--bambu */
    --color-warning: #f59e0b;                          /* replaces --status-warning: #f59e0b (unchanged) */
    --color-warning-text: #fbbf24;                     /* replaces hard-coded #fbbf24 in .badge--warning, .star-rating__star.active */
    --color-warning-soft: rgba(245, 158, 11, 0.14);    /* replaces rgba(245, 158, 11, 0.15) in .badge--warning */
    --color-danger: #ef4444;                           /* replaces --status-danger: #ef4444 (unchanged) */
    --color-danger-text: #f87171;                      /* replaces hard-coded #f87171 in .btn--danger, .badge--danger, .login-card__error */
    --color-danger-soft: rgba(239, 68, 68, 0.14);      /* replaces rgba(239, 68, 68, 0.15) in .btn--danger, .badge--danger */
    --color-info: #3b82f6;                             /* replaces --status-info: #3b82f6 (unchanged) */
    --color-info-text: #60a5fa;                        /* replaces hard-coded #60a5fa in .badge--info */
    --color-info-soft: rgba(59, 130, 246, 0.14);       /* replaces rgba(59, 130, 246, 0.15) in .badge--info */

    /* ========================================================
       COLOUR: 3D viewer studio
       ======================================================== */
    --viewer-bg-top: #2b2f74;                          /* replaces STL_VIEWER_BG 'rgb(77, 77, 204)' (#4d4dcc) in stl-viewer.js and .stl-carousel background */
    --viewer-bg-bottom: #11132c;                       /* replaces rgb(77, 77, 204) (flat fill becomes a vertical studio gradient) */
    --viewer-grid: rgba(165, 180, 252, 0.10);          /* new, no current equivalent (build-plate grid lines) */
    --viewer-label-bg: rgba(7, 9, 20, 0.55);           /* replaces .stl-carousel__label background rgba(0, 0, 0, 0.35) */

    /* ========================================================
       TYPE
       ======================================================== */
    --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* replaces body font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif */
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, monospace;                    /* replaces .font-mono: 'SF Mono', 'Fira Code', monospace and .mesh-axis-val monospace */

    /* Scale: 1.25 (major third) on a 16px base, fluid at the top. */
    --text-2xs: 0.6875rem;                             /* 11px; replaces 0.7rem / 0.72rem (.timeline__label, .badge--paid, .material-card__meta) */
    --text-xs: 0.75rem;                                /* 12px; replaces 0.75rem / 0.78rem (.badge, .stat-card__label, .mesh-stat-pill) */
    --text-sm: 0.875rem;                               /* 14px; replaces 0.8rem / 0.82rem / 0.85rem / 0.875rem (.btn, .nav__link, .table, .label) */
    --text-base: 1rem;                                 /* 16px; replaces 0.9rem / 0.9375rem (.input, .seo-card__text). 16px inputs stop iOS focus-zoom */
    --text-md: 1.125rem;                               /* 18px; replaces 1.05rem / 1.1rem (.hero__subtitle, .dropzone__text, .job-detail__value) */
    --text-lg: 1.25rem;                                /* 20px; replaces 1.15rem (.seo-card__title, .user-projects__title, .accept-card__title) */
    --text-xl: 1.5rem;                                 /* 24px; replaces 1.35rem / 1.45rem / 1.5rem (.wizard__step-title, .login-card__title) */
    --text-2xl: 1.875rem;                              /* 30px; replaces 1.75rem (.dashboard__title, .printjob__id, .stat-card__value) */
    --text-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); /* replaces .seo-title clamp(1.6rem, 3.5vw, 2.2rem) and .cost-display__value 2rem */
    --text-display: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); /* replaces .hero__title clamp(2rem, 5vw, 3.2rem) and the 1.75rem mobile override */
    --text-hero-num: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);  /* new; live quote price, replaces .cost-display__value 2rem */

    --weight-regular: 400;                             /* replaces font-weight 400 */
    --weight-medium: 500;                              /* replaces font-weight 500 */
    --weight-semibold: 600;                            /* replaces font-weight 600 */
    --weight-bold: 700;                                /* replaces font-weight 700 */
    --weight-heavy: 800;                               /* replaces font-weight 800 (300 is dropped: never used in style.css) */

    --leading-tight: 1.08;                             /* replaces .hero__title line-height 1.15 and .error-page__code 1 */
    --leading-snug: 1.3;                               /* replaces .notif-card__message 1.4 / .mesh-alert-header__desc 1.45 */
    --leading-normal: 1.6;                             /* replaces body line-height 1.6 (unchanged) */
    --leading-relaxed: 1.7;                            /* replaces .hero__subtitle line-height 1.7 */

    --tracking-display: -0.035em;                      /* replaces .hero__title letter-spacing -0.02em */
    --tracking-title: -0.02em;                         /* replaces .seo-title letter-spacing -0.02em (unchanged) */
    --tracking-caps: 0.06em;                           /* replaces 0.03em-0.08em spread across .label, .table th, .stat-card__label, .mesh-alert-header__tag */

    /* ========================================================
       SPACING (existing seven names and values kept exactly)
       ======================================================== */
    --space-2xs: 2px;                                  /* new; replaces hard-coded 2px gaps/margins (.material-card__name, .priority-option__desc) */
    --space-xs: 4px;                                   /* replaces --space-xs: 4px (unchanged) */
    --space-sm: 8px;                                   /* replaces --space-sm: 8px (unchanged) */
    --space-ms: 12px;                                  /* new; replaces hard-coded 10px/12px/14px paddings (.user-project-card__body 14px 16px, .notif-card 12px 16px) */
    --space-md: 16px;                                  /* replaces --space-md: 16px (unchanged) */
    --space-lg: 24px;                                  /* replaces --space-lg: 24px (unchanged) */
    --space-xl: 32px;                                  /* replaces --space-xl: 32px (unchanged) */
    --space-2xl: 48px;                                 /* replaces --space-2xl: 48px (unchanged) */
    --space-3xl: 64px;                                 /* replaces --space-3xl: 64px (unchanged) */
    --space-4xl: 96px;                                 /* new; replaces .seo-section padding var(--space-3xl) on wide screens */
    --space-5xl: 128px;                                /* new, no current equivalent (scroll-driven camera section height unit) */
    --gutter: clamp(16px, 4vw, 32px);                  /* new; replaces .nav__inner padding 0 var(--space-lg) and .hero padding var(--space-2xl) / var(--space-lg) */
    --container: 1200px;                               /* replaces .nav__inner max-width 1280px and .seo-container 1100px (unified) */
    --container-narrow: 720px;                         /* replaces .seo-header 720px and .printjob-page 860px */
    --tap-min: 44px;                                   /* new; replaces 32px .swatch-btn / .stl-carousel__btn and 38px .quantity-btn as minimum hit area */

    /* ========================================================
       RADII
       ======================================================== */
    --radius-xs: 4px;                                  /* new; replaces .mesh-bar-track / scrollbar thumb 4px */
    --radius-sm: 8px;                                  /* replaces --radius-sm: 6px */
    --radius-md: 12px;                                 /* replaces --radius-md: 10px */
    --radius-lg: 16px;                                 /* replaces --radius-lg: 16px (unchanged) */
    --radius-xl: 24px;                                 /* replaces --radius-xl: 24px (unchanged) */
    --radius-2xl: 32px;                                /* new; hero stage and drop zone, replaces .dropzone var(--radius-xl) */
    --radius-full: 9999px;                             /* replaces --radius-full: 9999px (unchanged) */

    /* ========================================================
       ELEVATION (shadow tint matched to --color-bg, plus a
       1px top highlight so cards read as lit from above)
       ======================================================== */
    --elev-0: none;                                                                                       /* new, no current equivalent */
    --elev-1: 0 1px 2px rgba(3, 4, 14, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04);                    /* replaces --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) */
    --elev-2: 0 4px 12px -2px rgba(3, 4, 14, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);              /* replaces --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35) */
    --elev-3: 0 12px 32px -8px rgba(3, 4, 14, 0.55), 0 2px 6px rgba(3, 4, 14, 0.30);                      /* replaces --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4) */
    --elev-4: 0 24px 56px -12px rgba(3, 4, 14, 0.65), 0 4px 12px rgba(3, 4, 14, 0.35);                    /* replaces --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5) and .notif-dropdown 0 20px 40px rgba(0,0,0,0.5) */
    --elev-glow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 8px 40px -8px rgba(99, 102, 241, 0.45);            /* replaces --shadow-glow: 0 0 30px var(--accent-glow) */
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);                          /* new; replaces 0 0 0 3px var(--accent-glow) on .input:focus, .select:focus, .textarea:focus */

    /* ========================================================
       MOTION: durations
       ======================================================== */
    --dur-instant: 80ms;                               /* new; replaces .notif-card transition 0.15s for press feedback */
    --dur-fast: 150ms;                                 /* replaces the 150ms inside --transition-fast */
    --dur-base: 250ms;                                 /* replaces the 250ms inside --transition-base */
    --dur-slow: 400ms;                                 /* replaces the 400ms inside --transition-slow and .wizard__step fade-up 0.4s */
    --dur-count: 420ms;                                /* new; live quote count-up, no current equivalent (price snaps today) */
    --dur-material: 320ms;                             /* new; 3D material swap tween, replaces instant colour set in updateAllViewerColours() */
    --dur-build: 2400ms;                               /* new; signature layer-by-layer build reveal */
    --dur-ambient: 18s;                                /* replaces .hero__bg float 12s ease-in-out infinite */
    --dur-marquee: 60s;                                /* replaces .announcement-bar__track marquee 60s (unchanged) */

    /* ========================================================
       MOTION: easings
       ======================================================== */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* replaces the curve inside --transition-fast/base/slow (unchanged) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);         /* new (expo-out); replaces ease-out in toast-in, fade-up */
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);          /* new (expo-in); replaces ease-in in toast-out */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* new; replaces ease-in-out in float, ease in fadeIn / notifSlideIn */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* new; small overshoot for swatch/priority selection, replaces plain scale(1.15) */
    --ease-linear: linear;                             /* replaces linear in spin and marquee (unchanged) */

    /* ========================================================
       MOTION: distances and switches
       ======================================================== */
    --move-sm: 4px;                                    /* new; replaces translateY(-1px)/(-2px) hover lifts */
    --move-md: 12px;                                   /* new; replaces fade-up translateY(16px) */
    --move-lg: 40px;                                   /* replaces toast-in translateX(40px) (unchanged) */
    --motion-ok: 1;                                    /* new; JS reads this (getComputedStyle) to decide whether to animate; 0 under reduced motion */

    /* ========================================================
       LAYERS (current literal z-index values, now named)
       ======================================================== */
    --z-base: 1;                                       /* replaces z-index: 1 on .hero__content, .seo-section, .site-footer */
    --z-sticky: 900;                                   /* new; mobile sticky quote bar */
    --z-banner: 999;                                   /* replaces .announcement-bar z-index: 999 */
    --z-nav: 1000;                                     /* replaces .nav z-index: 1000 and .feedback-fab z-index: 1000 */
    --z-dropdown: 2000;                                /* replaces .notif-dropdown z-index: 2000 */
    --z-modal: 3000;                                   /* replaces .feedback-modal-overlay z-index: 3000 */
    --z-toast: 9999;                                   /* replaces .toast-container z-index: 9999 and printjob .modal-overlay 9999 */

    /* ========================================================
       LAYOUT constants
       ======================================================== */
    --nav-height: 64px;                                /* replaces --nav-height: 64px (unchanged) */
    --banner-height: 34px;                             /* replaces the hard-coded 34px in body:has(.announcement-bar) .main */
    --viewer-height: clamp(260px, 42vh, 420px);        /* replaces .stl-carousel__viewport 320px and #mesh-error-viewer inline 320px */
    --quote-bar-h: 72px;                               /* new; height of the phone sticky quote bar, used to lift the feedback FAB */

    /* ========================================================
       LEGACY ALIASES
       Every variable name in use today keeps resolving, so
       style.css, inline style="" attributes and template JS
       need zero edits when this file lands.
       ======================================================== */
    --bg-primary: var(--color-bg);                     /* replaces --bg-primary: #0a0f1e */
    --bg-secondary: var(--color-bg-raised);            /* replaces --bg-secondary: #111827 */
    --bg-card: var(--color-surface);                   /* replaces --bg-card: rgba(17, 24, 39, 0.7) */
    --bg-card-solid: var(--color-surface-solid);       /* replaces --bg-card-solid: #1a2236 */
    --bg-card-hover: var(--color-surface-hover);       /* replaces undefined --bg-card-hover (used by .user-project-card:hover, .quantity-btn:hover) */
    --bg-elevated: var(--color-surface-elevated);      /* replaces --bg-elevated: rgba(30, 41, 70, 0.6) */
    --bg-glass: var(--color-glass);                    /* replaces --bg-glass: rgba(255, 255, 255, 0.04) */
    --bg-glass-hover: var(--color-glass-hover);        /* replaces --bg-glass-hover: rgba(255, 255, 255, 0.08) */

    --accent-primary: var(--color-accent);             /* replaces --accent-primary: #6366f1 */
    --accent-secondary: var(--color-accent-2);         /* replaces --accent-secondary: #8b5cf6 */
    --accent-gradient: var(--gradient-brand);          /* replaces --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6) */
    --accent-glow: var(--color-accent-glow);           /* replaces --accent-glow: rgba(99, 102, 241, 0.25) */
    --accent-light: var(--indigo-300);                 /* replaces undefined --accent-light (index.html #hover-colour-name, qty badge) */
    --accent-text: var(--color-accent-text);           /* replaces undefined --accent-text */

    --text-primary: var(--color-text);                 /* replaces --text-primary: #f1f5f9 */
    --text-secondary: var(--color-text-2);             /* replaces --text-secondary: #94a3b8 */
    --text-muted: var(--color-text-3);                 /* replaces --text-muted: #64748b */
    --text-accent: var(--indigo-300);                  /* replaces --text-accent: #a5b4fc */

    --border-subtle: var(--color-border-subtle);       /* replaces --border-subtle: rgba(255, 255, 255, 0.06) */
    --border-default: var(--color-border);             /* replaces --border-default: rgba(255, 255, 255, 0.1) */
    --border-hover: var(--color-border-hover);         /* replaces --border-hover: rgba(255, 255, 255, 0.18) */
    --border-accent: var(--color-border-accent);       /* replaces --border-accent: rgba(99, 102, 241, 0.4) */

    --status-success: var(--color-success);            /* replaces --status-success: #22c55e */
    --status-warning: var(--color-warning);            /* replaces --status-warning: #f59e0b */
    --status-danger: var(--color-danger);              /* replaces --status-danger: #ef4444 */
    --status-info: var(--color-info);                  /* replaces --status-info: #3b82f6 */

    --shadow-sm: var(--elev-1);                        /* replaces --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) */
    --shadow-md: var(--elev-2);                        /* replaces --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35) */
    --shadow-lg: var(--elev-3);                        /* replaces --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4) */
    --shadow-xl: var(--elev-4);                        /* replaces --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5) */
    --shadow-glow: var(--elev-glow);                   /* replaces --shadow-glow: 0 0 30px var(--accent-glow) */

    --transition-fast: var(--dur-fast) var(--ease-standard);  /* replaces --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1) */
    --transition-base: var(--dur-base) var(--ease-standard);  /* replaces --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1) */
    --transition-slow: var(--dur-slow) var(--ease-standard);  /* replaces --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1) */
}

/* ---------- Mobile layout constants ---------- */
@media (max-width: 768px) {
    :root {
        --nav-height: 56px;                            /* replaces the @media (max-width: 768px) --nav-height: 56px (unchanged) */
    }
}

/* ---------- Reduced motion: collapse every motion token ---------- */
/* Durations become effectively zero (not 0, so transitionend and
   animationend still fire for any JS that waits on them), distances
   become zero, and --motion-ok flips to 0 for JS-driven motion. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0.01ms;                         /* replaces 80ms */
        --dur-fast: 0.01ms;                            /* replaces 150ms */
        --dur-base: 0.01ms;                            /* replaces 250ms */
        --dur-slow: 0.01ms;                            /* replaces 400ms */
        --dur-count: 0.01ms;                           /* replaces 420ms */
        --dur-material: 0.01ms;                        /* replaces 320ms */
        --dur-build: 0.01ms;                           /* replaces 2400ms */
        --move-sm: 0px;                                /* replaces 4px */
        --move-md: 0px;                                /* replaces 12px */
        --move-lg: 0px;                                /* replaces 40px */
        --motion-ok: 0;                                /* replaces 1 */
    }
}

/* ---- css/live.css ---- */
/* ============================================================
   PrintSphere - Live chat, notifications and desktop alerts
   ============================================================ */

/* ---------- Notification bell ---------- */
.notif-bell__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-2, #c7cbe0);
    padding: 8px;
}
.notif-bell__btn:hover,
.notif-bell__btn[aria-expanded="true"] {
    color: var(--color-text, #f3f4fb);
}
.notif-bell__icon {
    width: 20px;
    height: 20px;
}
.notif-bell__badge {
    top: 0;
    right: 0;
}

.notif-dropdown {
    width: 360px;
    max-height: 480px;
}
.notif-dropdown__mark-read:disabled {
    opacity: 0.4;
    cursor: default;
    background: none;
}
.notif-dropdown__footer {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    display: flex;
    justify-content: flex-start;
}
.notif-dropdown__footer:has(> [hidden]:only-child) {
    display: none;
}

.notif-card {
    border-left: 3px solid transparent;
}
.notif-card--unread {
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.12));
    border-left-color: var(--accent-primary);
}
.notif-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    background: var(--bg-glass-hover);
    color: var(--color-text-2, #c7cbe0);
}
.notif-card__icon svg {
    width: 17px;
    height: 17px;
}
.notif-card--chat .notif-card__icon { color: var(--indigo-300, #a5b4fc); }
.notif-card--payment .notif-card__icon { color: var(--color-success-text, #4ade80); }
.notif-card--feedback .notif-card__icon { color: var(--color-warning-text, #fbbf24); }
.notif-card--job .notif-card__icon { color: var(--violet-400, #a78bfa); }
.notif-card--unread .notif-card__message {
    font-weight: 500;
}

/* ---------- Desktop alerts button ---------- */
.alerts-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    gap: 6px;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full, 999px);
    color: var(--color-text-2, #c7cbe0);
    font: inherit;
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alerts-btn[hidden] {
    display: none;
}
.alerts-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.alerts-btn:hover:not(:disabled) {
    background: var(--bg-glass-hover);
    color: var(--color-text, #f3f4fb);
}
.alerts-btn[data-state="default"] {
    border-color: var(--color-border-accent, rgba(99, 102, 241, 0.45));
    color: var(--indigo-300, #a5b4fc);
}
.alerts-btn[data-state="on"] {
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--color-success-text, #4ade80);
}
.alerts-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

/* ---------- Chat ---------- */
.chat-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
    max-width: 800px;
    margin-top: var(--space-xl, 32px);
    margin-bottom: var(--space-sm, 8px);
}
.chat-header__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}
.chat-header .alerts-btn {
    margin-left: auto;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--bg-glass);
}
.live-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}
.live-pill[data-state="live"] { color: var(--color-success-text, #4ade80); }
.live-pill[data-state="live"] .live-pill__dot {
    background: var(--status-success);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: live-pulse 2s infinite;
}
.live-pill[data-state="reconnecting"] { color: var(--color-warning-text, #fbbf24); }
.live-pill[data-state="reconnecting"] .live-pill__dot { background: var(--status-warning); }

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-pill[data-state="live"] .live-pill__dot { animation: none; }
}

.chat-message__meta {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 4px;
}
.chat-message__text {
    white-space: pre-wrap;
}

.job-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    max-width: 800px;
    padding: 10px 14px;
    margin-bottom: var(--space-sm, 8px);
    border: 1px solid var(--color-border-accent, rgba(99, 102, 241, 0.45));
    border-radius: var(--radius-md, 12px);
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.12));
    font-size: 0.875rem;
}
.job-update-banner[hidden] {
    display: none;
}

/* ---------- Dashboard unread dot ---------- */
.job-card__unread {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--status-danger);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .notif-dropdown {
        width: auto;
    }
    .chat-header .alerts-btn {
        margin-left: 0;
    }
}

/* ---- css/chat-photos.css ---- */
/* Photos in job chat: bubble thumbnails, the pre-send strip and the lightbox. */

.chat-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 320px;
    max-width: 100%;
    margin: 2px 0 6px;
}
.chat-photos--n1 { grid-template-columns: minmax(0, 1fr); }
.chat-photos--n3 .chat-photo:first-child { grid-column: 1 / -1; }

.chat-photo {
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-sunken, #0b0e1f);
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
}
.chat-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* One photo keeps its own shape. */
.chat-photos--n1 .chat-photo {
    justify-self: start;
    max-width: 100%;
}
.chat-photos--n1 .chat-photo img {
    width: auto;
    max-width: 100%;
    max-height: 260px;
    aspect-ratio: auto;
}
.chat-photos--n3 .chat-photo:first-child img {
    aspect-ratio: 2 / 1;
}
.chat-photo:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.chat-attach-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min, 44px);
    min-width: var(--tap-min, 44px);
    padding: 0;
}
.chat-attach-btn svg {
    width: 20px;
    height: 20px;
}
.chat-attach-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chat-attach-strip {
    display: flex;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px) 0;
    border-top: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    overflow-x: auto;
}
.chat-attach-strip[hidden] { display: none; }
.chat-attach-item {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
}
.chat-attach-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chat-attach-item__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 6, 16, 0.8);
    color: var(--color-text, #f3f4fb);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}
.chat-attach-item__remove:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.photo-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(5, 6, 16, 0.94);
    color: var(--color-text, #f3f4fb);
}
.photo-lightbox[open] {
    display: flex;
    flex-direction: column;
}
.photo-lightbox::backdrop {
    background: rgba(5, 6, 16, 0.6);
}
.photo-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
}
.photo-lightbox__count {
    margin-right: auto;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-2, #c7cbe0);
}
.photo-lightbox__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md, 16px) var(--space-md, 16px);
}
.photo-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm, 8px);
}
.photo-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    padding: 0;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: 50%;
    background: rgba(5, 6, 16, 0.7);
    color: var(--color-text, #f3f4fb);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.photo-lightbox__nav[hidden] { display: none; }
.photo-lightbox__nav--prev { left: var(--space-md, 16px); }
.photo-lightbox__nav--next { right: var(--space-md, 16px); }
.photo-lightbox__nav:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- css/part-size.css ---- */
/* Part size in mm: the tag over 3D viewers and the size line on dashboard cards. */

.part-size {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 1;
    max-width: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-sm, 8px);
    background: var(--viewer-label-bg, rgba(10, 13, 28, 0.72));
    color: var(--color-text-2, #c7cbe0);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    pointer-events: none;
}
.part-size__note {
    font-family: var(--font-sans, inherit);
    white-space: normal;
}
.part-size.is-warn,
.part-size.is-tiny {
    color: var(--color-warning-text, #fbbf24);
    border-color: rgba(245, 158, 11, 0.45);
}

.viewer__dims-note {
    margin-top: 2px;
    font-family: var(--font-sans, inherit);
    color: var(--color-warning-text, #fbbf24);
    white-space: normal;
}

.job-size {
    margin-bottom: var(--space-md, 16px);
}
.job-size__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.job-size__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 0.85rem;
    color: var(--color-text, #f3f4fb);
    min-width: 0;
}
.job-size__name {
    color: var(--color-text-3, #959dbb);
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-size__dims {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}
.job-size__note {
    flex-basis: 100%;
    font-size: 0.78rem;
}
.job-size__row.is-warn,
.job-size__row.is-tiny .job-size__note {
    color: var(--color-warning-text, #fbbf24);
}

/* ---- css/design-request.css ---- */
/* "No file? Request a design": the /request form, the home page link and the design tags. */

.dr-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-2xl, 48px) var(--gutter, 16px) var(--space-3xl, 64px);
}
.dr-hero { margin-bottom: var(--space-xl, 32px); }
.dr-hero__title {
    font-size: var(--text-3xl, 2rem);
    line-height: var(--leading-tight, 1.15);
    margin: 0 0 var(--space-sm, 8px);
}
.dr-hero__lead {
    color: var(--color-text-2, #c7cbe0);
    font-size: var(--text-md, 1rem);
    line-height: var(--leading-relaxed, 1.7);
    margin: 0;
}

.dr-form {
    padding: var(--space-xl, 32px);
}
.dr-form .textarea { width: 100%; resize: vertical; min-height: 120px; }
.dr-req { color: var(--color-accent-text, #9aa5fb); }
.dr-help {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-3, #959dbb);
}
.dr-link { color: var(--color-accent-text, #9aa5fb); align-self: flex-start; }

.dr-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-md, 16px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
}
.dr-size {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm, 8px);
}
.dr-size__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-2, #c7cbe0);
}
.dr-size__item .input { width: 100%; }

.dr-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-md, 16px);
}
.dr-row .input { width: 100%; }

.dr-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
}
.dr-photos__add {
    width: 88px;
    height: 88px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed var(--color-border-hover, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-md, 12px);
    background: var(--color-glass, rgba(255, 255, 255, 0.03));
    color: var(--color-text-2, #c7cbe0);
    font-size: var(--text-xs, 0.75rem);
    cursor: pointer;
}
.dr-photos__add[hidden] { display: none; }
.dr-photos__add svg { width: 24px; height: 24px; }
.dr-photos__add:hover { border-color: var(--color-border-accent, rgba(99, 102, 241, 0.45)); }
.dr-photo {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
}
.dr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-photo__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 6, 16, 0.8);
    color: var(--color-text, #f3f4fb);
    font-size: 16px;
    line-height: 26px;
    cursor: pointer;
}
.dr-photo__remove:focus-visible,
.dr-photos__add:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dr-error {
    margin: 0 0 var(--space-md, 16px);
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-danger-soft, rgba(239, 68, 68, 0.12));
    color: var(--color-danger-text, #fca5a5);
    font-size: var(--text-sm, 0.875rem);
}
.dr-error[hidden] { display: none; }
.dr-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 8px) var(--space-md, 16px);
}
.dr-note { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-2, #c7cbe0); }
.dr-alt {
    margin-top: var(--space-lg, 24px);
    text-align: center;
    color: var(--color-text-2, #c7cbe0);
    font-size: var(--text-sm, 0.875rem);
}
.dr-alt a { color: var(--color-accent-text, #9aa5fb); }

@media (max-width: 560px) {
    .dr-form { padding: var(--space-md, 16px); }
    .dr-row { grid-template-columns: minmax(0, 1fr); }
}

/* Home page: link under the upload box */
.dr-home-link {
    margin: var(--space-sm, 8px) 0 0;
    text-align: center;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-2, #c7cbe0);
}
.dr-home-link a { color: var(--color-accent-text, #9aa5fb); font-weight: 600; }

/* Job page: the request's details */
.design-brief {
    margin-bottom: var(--space-xl, 32px);
    padding: var(--space-lg, 24px);
}
.design-brief__text { white-space: pre-wrap; margin: 0 0 var(--space-sm, 8px); }
.design-brief__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--space-md, 16px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-2, #c7cbe0);
}

/* Dashboard card and list row tag */
.badge--design,
.job-row__badge--design {
    background: rgba(236, 72, 153, 0.15);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.45);
}

/* ---- css/reviews.css ---- */
/* Home page reviews (reviews.py): approved customer reviews and the Google rating badge. */

.reviews-section .seo-header {
    text-align: center;
}

.reviews-google {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-glass);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
}

a.reviews-google:hover {
    border-color: var(--color-border-hover);
    background: var(--color-glass-hover);
}

a.reviews-google:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.reviews-google__score {
    font-weight: var(--weight-bold);
}

.reviews-google__star {
    color: var(--color-warning-text);
}

.reviews-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    min-width: 0;
}

.review-card__stars {
    font-size: var(--text-md);
    letter-spacing: 2px;
    line-height: 1;
}

.review-card__stars .is-on {
    color: var(--color-warning-text);
}

.review-card__stars .is-off {
    color: var(--color-text-3);
    opacity: 0.45;
}

.review-card__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.review-card__meta {
    margin: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: var(--text-sm);
    color: var(--color-text-3);
}

.review-card__name {
    color: var(--color-text-2);
    font-weight: var(--weight-semibold);
}

/* Show on site toggle in Admin > Analytics */
.review-approve {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--space-md);
}

.review-approve__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 16px;
    background: var(--color-glass);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.review-approve__row.is-public {
    border-color: var(--color-border-accent);
}

.review-approve__stars {
    color: var(--color-warning-text);
    white-space: nowrap;
    min-width: 5.5em;
}

.review-approve__body {
    flex: 1;
    min-width: 0;
}

.review-approve__comment {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.review-approve__meta {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

.review-approve__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--color-text-2);
    cursor: pointer;
}

@media (max-width: 600px) {
    .review-approve__row {
        flex-wrap: wrap;
    }
    .review-approve__body {
        flex-basis: 100%;
        order: 3;
    }
}

.review-approve__toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ---- css/materials-guide.css ---- */
/* Material guide page (/materials, material_guide.py) and the "Which material?" link in the order step. */

.mg-page {
    max-width: calc(var(--container, 1100px) + 2 * var(--gutter));
    margin: 0 auto;
    padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}

.mg-hero {
    max-width: 720px;
    margin-bottom: var(--space-xl);
}

.mg-hero__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

.mg-hero__lead {
    color: var(--color-text-2);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-lg);
}

.mg-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.mg-jump__link {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-2);
    font-size: var(--text-sm);
    text-decoration: none;
    background: var(--color-glass);
}

.mg-jump__link:hover {
    color: var(--color-text);
    border-color: var(--color-border-hover);
}

.mg-jump__link--alt {
    color: var(--color-accent-text);
    border-color: var(--color-border-accent);
}

.mg-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--space-lg);
}

.mg-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    min-width: 0;
    scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
}

.mg-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.mg-card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.mg-card__price {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-success-text);
    white-space: nowrap;
}

.mg-card__summary {
    margin: var(--space-sm) 0 var(--space-md);
    color: var(--color-text-2);
    line-height: var(--leading-normal);
}

.mg-card__label {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-3);
}

.mg-card__uses {
    margin: 0;
    padding-left: 1.2em;
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.mg-card__facts {
    margin: var(--space-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-sm);
}

.mg-card__fact {
    display: grid;
    grid-template-columns: 9.5em 1fr;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border-subtle);
}

.mg-card__fact dt {
    color: var(--color-text-3);
}

.mg-card__fact dd {
    margin: 0;
    color: var(--color-text);
}

.mg-card__fact--caution dd {
    color: var(--color-warning-text);
}

.mg-dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.mg-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-2);
}

.mg-dot__swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex: none;
}

.mg-compare {
    margin-top: var(--space-2xl);
    scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
}

.mg-compare__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

.mg-compare__wrap:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.mg-compare__table thead th,
.mg-compare__table tbody td {
    vertical-align: top;
    min-width: 150px;
    white-space: normal;
}

.mg-compare__table tbody th {
    vertical-align: top;
    color: var(--color-text-3);
    font-weight: var(--weight-semibold);
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
    min-width: 0;
}

.mg-compare__table thead th {
    color: var(--color-text);
}

.mg-note,
.mg-empty {
    margin-top: var(--space-xl);
    color: var(--color-text-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    max-width: 720px;
}

@media (max-width: 480px) {
    .mg-card__fact {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* "Which material?" link next to the order step's material picker */
.mg-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.mg-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-accent-text);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
}

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

/* ---- css/promos.css ---- */
/* Promo codes: the "Have a promo code?" field (order form and job page), the discount lines,
 * the dashboard card and list badge, and the Settings section. See promos.py.
 */

.promo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Customer field --- */
.promo-field {
    margin-top: var(--space-sm);
    text-align: left;
}
.promo-field__toggle,
.promo-field__remove {
    padding: 6px 0;
    min-height: 32px;
    border: 0;
    background: none;
    color: var(--color-accent-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.promo-field__toggle:hover,
.promo-field__remove:hover { color: var(--indigo-300); }
.promo-field__toggle:focus-visible,
.promo-field__remove:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}
.promo-field__form {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}
.promo-field__form[hidden],
.promo-field__applied[hidden],
.promo-field__toggle[hidden] { display: none; }
.promo-field__input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.promo-field__input::placeholder { text-transform: none; letter-spacing: normal; }
.promo-field__applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.promo-field__chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.promo-field__msg {
    min-height: 0;
    margin: var(--space-xs) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-3);
}
.promo-field__msg:empty { display: none; }
.promo-field__msg[data-kind="error"] { color: var(--color-danger-text); }

.promo-field--job {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}

/* --- Discount lines --- */
.quote-card__row--promo { color: var(--color-success-text); }
.quote-card__row--promo span:last-child { color: var(--color-success-text); }

.promo-detail {
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-success-text);
}
.promo-detail--quote { margin-top: var(--space-xs); font-size: var(--text-sm); }

/* --- Dashboard card and list --- */
.job-promo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-subtle);
}
.job-promo__label { margin: 0; }
.job-promo__body {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}
.job-promo__input {
    flex: 1;
    min-width: 0;
    max-width: 180px;
    text-transform: uppercase;
}
.job-promo__input::placeholder { text-transform: none; }
.job-promo__chip {
    padding: 2px 8px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-row__badge--promo {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border: 1px solid rgba(34, 197, 94, 0.45);
}

/* --- Settings --- */
.promo-admin__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.promo-admin__title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
}
.promo-admin__intro {
    margin: 0;
    max-width: 70ch;
    font-size: 0.85rem;
}
.promo-form {
    max-width: 860px;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-glass);
}
.promo-form__title {
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
    font-weight: 600;
}
.promo-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}
.promo-form__grid .input { width: 100%; }
.promo-form__code { text-transform: uppercase; letter-spacing: 0.06em; }
.promo-form__code::placeholder { text-transform: none; letter-spacing: normal; }
.promo-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-sm) 0;
    font-size: 0.9rem;
    cursor: pointer;
}
.promo-form__check input { accent-color: var(--color-accent); width: 16px; height: 16px; }
.promo-form__error {
    margin: 0 0 var(--space-sm);
    color: var(--color-danger-text);
    font-size: 0.85rem;
}
.promo-form__error:empty { display: none; }
.promo-form__actions { display: flex; gap: var(--space-sm); }
.promo-form__actions [hidden] { display: none; }

.promo-admin__table { margin-bottom: var(--space-lg); }
.promo-admin__table .table { width: 100%; font-size: 0.85rem; }
.promo-code-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.promo-tag {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--color-accent-text);
    white-space: nowrap;
}
.promo-note-cell { min-width: 140px; max-width: 240px; white-space: normal !important; color: var(--color-text-3); }
.promo-actions { white-space: nowrap; }
.promo-actions .btn + .btn { margin-left: 6px; }
.promo-row--expired td,
.promo-row--disabled td,
.promo-row--used_up td { color: var(--color-text-3); }

.promo-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.promo-status--active { background: var(--color-success-soft); color: var(--color-success-text); border-color: rgba(34, 197, 94, 0.45); }
.promo-status--scheduled { background: var(--color-info-soft); color: var(--color-info-text); border-color: rgba(59, 130, 246, 0.45); }
.promo-status--expired { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: rgba(245, 158, 11, 0.45); }
.promo-status--disabled,
.promo-status--used_up { background: var(--color-glass-hover); color: var(--color-text-3); border-color: var(--color-border); }

.promo-referral {
    max-width: 860px;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}
.promo-referral__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: var(--space-sm) 0;
}
.promo-referral__row .label { margin: 0; }
.promo-referral__days { width: 90px; }

@media (max-width: 700px) {
    .promo-form__actions { flex-direction: column; }
    .promo-form__actions .btn { width: 100%; }

    /* Rows stack into small cards so nothing hides off the side of the screen */
    .promo-admin__table thead { display: none; }
    .promo-admin__table .table,
    .promo-admin__table tbody { display: block; }
    .promo-admin__table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px;
        border-bottom: 1px solid var(--color-border-subtle);
    }
    .promo-admin__table tbody td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
    }
    .promo-admin__table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-3);
    }
    .promo-admin__table .promo-code-cell { grid-column: 1 / -1; }
    .promo-admin__table .promo-note-cell { grid-column: 1 / -1; max-width: none; }
    .promo-admin__table .promo-note-cell--empty { display: none; }
    .promo-admin__table .promo-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .promo-actions .btn + .btn { margin-left: 0; }
}

/* ---- css/parts.css ---- */
/* Per-part material, colour and quantity on jobs with two or more model files.
 * Order form switch and rows (index), job page table (printjob), dashboard card table
 * and the New Job modal rows (dashboard).
 */

/* --- Order form: "Choose per part" switch --- */
.parts-mode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-glass);
}
.parts-mode[hidden], .parts-list[hidden] { display: none; }
.parts-mode__note { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-3); }

.parts-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-min, 44px);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.parts-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.parts-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border: 1px solid var(--color-border-hover);
    border-radius: 999px;
    background: var(--color-bg-raised);
    transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.parts-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-text-2);
    transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.parts-switch input:checked + .parts-switch__track { background: var(--indigo-600); border-color: var(--indigo-600); }
.parts-switch input:checked + .parts-switch__track::after { transform: translateX(18px); background: #fff; }
.parts-switch input:focus-visible + .parts-switch__track { outline: 2px solid var(--indigo-300); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .parts-switch__track, .parts-switch__track::after { transition: none; }
}

/* --- Order form: one row per part --- */
.parts-list {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.part-row {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    min-width: 0;
}
.part-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px var(--space-sm);
    min-width: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.part-row__head:focus-visible { outline: 2px solid var(--indigo-300); outline-offset: 2px; border-radius: var(--radius-sm); }
.part-row__dot, .parts-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    vertical-align: -2px;
}
.part-row__name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.part-row__size {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    font-variant-numeric: tabular-nums;
}
.part-row__size.is-oversize { color: var(--color-warning); }
.part-row__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
}
.part-row__material { width: 100%; min-width: 0; min-height: var(--tap-min, 44px); }
.part-row__qty { margin: 0; }
.part-row__qty .quantity-input { width: 52px; }
@media (max-width: 420px) {
    .part-row__controls { grid-template-columns: 1fr; }
}

/* Quote card: part lines keep long file names on one line */
.quote-card__row--part > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-card__part-name { color: var(--color-text); }

/* --- Job page: parts table --- */
.parts-block { margin-bottom: var(--space-xl); }
.parts-block__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--indigo-300);
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: middle;
}
.parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--color-text-2);
    table-layout: fixed;
}
.parts-table th, .parts-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
    vertical-align: middle;
}
.parts-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-3);
}
.parts-table thead th:first-child { width: 34%; }
.parts-table thead th.parts-table__num { width: 64px; }
.parts-table__name { font-weight: 600; color: var(--color-text); }
.parts-table__name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parts-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.parts-table__size { font-variant-numeric: tabular-nums; }
.parts-table small { font-size: 0.75rem; font-weight: 600; color: var(--indigo-300); }

@media (max-width: 600px) {
    .parts-table, .parts-table tbody, .parts-table tr, .parts-table th, .parts-table td { display: block; width: 100%; }
    .parts-table thead { display: none; }
    .parts-table tr {
        margin-bottom: var(--space-sm);
        padding: 8px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-glass);
    }
    .parts-table th, .parts-table td { padding: 4px 0; border: 0; }
    .parts-table td { display: flex; justify-content: space-between; gap: var(--space-sm); text-align: right; }
    .parts-table td::before { content: attr(data-label); color: var(--color-text-3); font-size: 0.8rem; text-align: left; }
    .parts-table__num { text-align: right !important; }
}

/* --- Dashboard card: parts table --- */
.job-parts {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-subtle);
}
.job-parts__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 6px;
}
.job-parts__title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-2); }
.job-parts__total { font-size: 0.75rem; color: var(--color-text-3); }
.job-parts__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.job-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-glass);
}
.job-part__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}
.job-part__name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-part__price { font-size: 0.8rem; font-weight: 600; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.job-part__meta { grid-column: 1 / -1; font-size: 0.72rem; color: var(--color-text-3); }
.job-part__fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 70px;
    gap: 6px;
}
.job-part__fields .select, .job-part__fields .input { width: 100%; min-width: 0; min-height: 34px; font-size: 0.8rem; }
.job-part__fields label { display: grid; gap: 2px; min-width: 0; font-size: 0.68rem; color: var(--color-text-3); }

/* --- New Job modal: per-part rows --- */
.mj-parts { display: grid; gap: 8px; margin-bottom: var(--space-md); }
.mj-parts[hidden] { display: none; }
.mj-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 84px;
    gap: 6px;
    align-items: end;
    padding: 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-glass);
}
.mj-part__name {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}
.mj-part label { display: grid; gap: 2px; min-width: 0; font-size: 0.7rem; color: var(--color-text-3); }
.mj-part .select, .mj-part .input { width: 100%; min-width: 0; }
.mj-parts.is-shared .mj-part__choice { display: none; }
.mj-parts.is-shared .mj-part { grid-template-columns: minmax(0, 1fr) 84px; }
@media (max-width: 480px) {
    .mj-part { grid-template-columns: minmax(0, 1fr) 64px; }
    .mj-part label:first-of-type { grid-column: 1 / -1; }
}

/* --- Dashboard list view: "N parts" badge --- */
.job-row__badge.job-row__badge--parts { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; border: 1px solid rgba(99, 102, 241, 0.45); }
.badge.badge--parts { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; border: 1px solid rgba(99, 102, 241, 0.45); font-weight: 700; }
.mj-parts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.mj-parts-head .label { margin: 0; }
#mj-parts-group[hidden], #mj-mass-group[hidden], #mj-cpg-group[hidden] { display: none; }
#mj-price-row.mj-row--single { grid-template-columns: 1fr; }
.material-picker[hidden], #uniform-qty[hidden] { display: none !important; }
.parts-table__mat { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- css/customer-docs.css ---- */
/* Job page: download buttons for the customer's current invoice and latest receipt (invoices.customer_documents).
 * Dashboard invoice modal: Current and Superseded tags, and the note shown when a paid job's invoice is final.
 */
.doc-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: calc(-1 * var(--space-md)) 0 var(--space-xl);
}
.doc-downloads__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-min, 44px);
    text-decoration: none;
}
@media (max-width: 480px) {
    .doc-downloads__btn { flex: 1 1 100%; justify-content: center; }
}

.inv-history__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: 1px;
}
.inv-history__tag--current { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.4); }
.inv-history__tag--superseded { background: rgba(148, 163, 184, 0.12); color: var(--color-text-3); border: 1px solid var(--color-border); }
.inv-locked {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-md);
    background: rgba(34, 197, 94, 0.08);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-text-2);
}
.inv-locked[hidden] { display: none; }

/* ---- css/courier.css ---- */
/* 1Courier delivery (courier.py): the pickup or delivery choice on the order form, the delivery
 * block on the job page and dashboard card, the tracking panel, and the development copy banner.
 */

.dev-banner {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-modal, 3000) - 1);
    padding: 6px var(--gutter, 16px);
    background: var(--color-warning, #f59e0b);
    color: #1a0b2e;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    text-align: center;
}

/* --- Order form --- */
.fulfil {
    margin: var(--space-md, 16px) 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.fulfil__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm, 8px);
}
.fulfil__choice {
    position: relative;
    display: block;
    cursor: pointer;
}
.fulfil__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fulfil__face {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-md, 12px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.fulfil__face strong {
    color: var(--color-text, #f5f3ff);
    font-size: 0.95rem;
}
.fulfil__face small {
    color: var(--color-text-3, #959dbb);
    font-size: 0.8rem;
    line-height: 1.35;
}
.fulfil__choice input:checked + .fulfil__face {
    border-color: var(--color-accent, #6366f1);
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.14));
}
.fulfil__choice input:focus-visible + .fulfil__face {
    outline: 2px solid var(--color-focus-ring, #a5b4fc);
    outline-offset: 2px;
}
.fulfil__choice[hidden] { display: none; }
/* Delivery while the "Delivery enabled" switch in Settings is off */
.fulfil__choice.is-off {
    cursor: not-allowed;
}
.fulfil__choice.is-off .fulfil__face {
    border-style: dashed;
    background: transparent;
}
.fulfil__choice.is-off .fulfil__face strong {
    color: var(--color-text-3, #959dbb);
    text-decoration: line-through;
}
.fulfil__delivery {
    margin-top: var(--space-md, 16px);
    text-align: left;
}
.fulfil__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-sm, 8px);
}
.fulfil__grid .fulfil__wide {
    grid-column: 1 / -1;
}
.fulfil__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fulfil__field .label {
    margin-bottom: 0;
}
.fulfil__timing {
    margin: 0 0 var(--space-sm, 8px);
    padding: 8px 10px;
    border-left: 3px solid var(--color-accent, #6366f1);
    border-radius: 4px;
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.14));
    color: var(--color-text-2, #aab1cc);
    font-size: 0.82rem;
    line-height: 1.4;
}

.fulfil__quote-btn {
    width: 100%;
    margin-top: var(--space-sm, 8px);
}
.fulfil__msg {
    min-height: 1.2em;
    margin: var(--space-xs, 4px) 0 0;
    color: var(--color-text-3, #959dbb);
    font-size: 0.82rem;
}
.fulfil__msg.is-error {
    color: var(--color-danger-text, #f87171);
}
.fulfil__options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-sm, 8px);
}
.fulfil__option {
    display: block;
    cursor: pointer;
}
.fulfil__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fulfil__option-face {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-sm, 8px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
}
.fulfil__option input:checked + .fulfil__option-face {
    border-color: var(--color-accent, #6366f1);
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.14));
}
.fulfil__option input:focus-visible + .fulfil__option-face {
    outline: 2px solid var(--color-focus-ring, #a5b4fc);
    outline-offset: 2px;
}
.fulfil__option-name {
    color: var(--color-text, #f5f3ff);
    font-weight: 600;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
.fulfil__option-price {
    color: var(--color-success-text, #4ade80);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.fulfil__option-sub {
    grid-column: 1 / -1;
    color: var(--color-text-3, #959dbb);
    font-size: 0.78rem;
}
.fulfil__total {
    margin-top: var(--space-sm, 8px);
    padding: 10px 12px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-sunken, rgba(0, 0, 0, 0.2));
    color: var(--color-text-2, #aab1cc);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.fulfil__total strong {
    color: var(--color-text, #f5f3ff);
}
.courier-sample {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-warning-soft, rgba(245, 158, 11, 0.14));
    color: var(--color-warning-text, #fbbf24);
    font-size: 0.72rem;
    font-weight: 600;
}

/* --- Job page and dashboard card --- */
.courier-block {
    margin: var(--space-lg, 24px) 0;
    padding: var(--space-lg, 24px);
}
.courier-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
}
.courier-block__label {
    display: block;
    color: var(--color-text-3, #959dbb);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.courier-block__value {
    color: var(--color-text, #f5f3ff);
    overflow-wrap: anywhere;
}
.courier-block__hint,
.courier-block__value small {
    display: block;
    color: var(--color-text-3, #959dbb);
}
.courier-order {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: var(--space-sm, 8px);
}
.courier-order .input {
    flex: 1 1 160px;
    min-width: 0;
}
.courier-card {
    margin-bottom: var(--space-md, 16px);
    padding: 10px 12px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-left: 3px solid var(--color-info, #38bdf8);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    font-size: 0.85rem;
}
.courier-card__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    color: var(--color-text, #f5f3ff);
}
.courier-card__fee {
    color: var(--color-success-text, #4ade80);
    font-variant-numeric: tabular-nums;
}
.courier-card__line {
    margin-top: 2px;
    color: var(--color-text-2, #aab1cc);
    overflow-wrap: anywhere;
}
.courier-card__addr {
    margin: 2px 0 8px;
    color: var(--color-text-3, #959dbb);
    overflow-wrap: anywhere;
}
.courier-card__status {
    margin-top: 6px;
    color: var(--color-text-3, #959dbb);
    font-size: 0.78rem;
}
.courier-track-btn {
    width: 100%;
}
.badge--delivery {
    background: var(--color-info-soft, rgba(56, 189, 248, 0.14));
    color: var(--color-info-text, #7dd3fc);
    border: 1px solid rgba(56, 189, 248, 0.4);
}
.badge--pickup {
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    color: var(--color-text-2, #aab1cc);
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
}
.job-row__badge--delivery {
    background: var(--color-info-soft, rgba(56, 189, 248, 0.14));
    color: var(--color-info-text, #7dd3fc);
}

/* --- Tracking panel (job page inline, dashboard modal) --- */
.courier-track {
    margin-top: var(--space-md, 16px);
    text-align: left;
}
.courier-track__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: var(--color-text, #f5f3ff);
}
.courier-track__pill {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-info-soft, rgba(56, 189, 248, 0.14));
    color: var(--color-info-text, #7dd3fc);
    font-size: 0.85rem;
    font-weight: 700;
}
.courier-track__pill.is-done {
    background: var(--color-success-soft, rgba(34, 197, 94, 0.14));
    color: var(--color-success-text, #4ade80);
}
.courier-track__pill.is-stopped {
    background: var(--color-danger-soft, rgba(239, 68, 68, 0.14));
    color: var(--color-danger-text, #f87171);
}
.courier-track__meta {
    margin: 6px 0 0;
    color: var(--color-text-3, #959dbb);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.courier-track__events {
    list-style: none;
    margin: var(--space-md, 16px) 0 0;
    padding: 0;
    border-left: 2px solid var(--color-border, rgba(165, 180, 252, 0.14));
}
.courier-track__events li {
    position: relative;
    padding: 0 0 12px 16px;
    color: var(--color-text-2, #aab1cc);
    font-size: 0.85rem;
}
.courier-track__events li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent, #6366f1);
}
.courier-track__events strong {
    color: var(--color-text, #f5f3ff);
}
.courier-track__events time {
    display: block;
    color: var(--color-text-3, #959dbb);
    font-size: 0.75rem;
}
.courier-track__error {
    color: var(--color-danger-text, #f87171);
    font-size: 0.85rem;
}
.courier-modal__card {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 0;
    padding: var(--space-lg, 24px);
}
.courier-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

@media (max-width: 480px) {
    .fulfil__grid {
        grid-template-columns: 1fr;
    }
    .courier-block {
        padding: var(--space-md, 16px);
    }
}

.courier-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- css/daniels.css ---- */
/* ============================================================
   Daniels theme: white pages with rubber-duck yellow accents.
   ------------------------------------------------------------
   On when <html data-theme="daniels">: the /daniels page, and every
   customer page after a visit to it until the main home page is
   opened again (daniels.py). Staff pages never set it.

   Mostly token overrides (tokens.css), so the rest of the site's
   CSS follows. The rules after the tokens fix the few places that
   hard-code a dark colour. Yellow is a fill colour only: text on
   white uses the dark amber --color-accent-text (AA), and text on
   yellow fills uses --color-text-on-accent (near black).
   ============================================================ */

html[data-theme="daniels"] {
    color-scheme: light;

    --duck-yellow: #ffd23f;
    --duck-yellow-deep: #ffbf1f;
    --duck-orange: #ff8c1a;
    --duck-ink: #1d1a14;

    --color-bg: #ffffff;
    --color-bg-raised: #fffaf0;
    --color-bg-sunken: #fff7e0;
    --color-surface: rgba(255, 255, 255, 0.9);
    --color-surface-solid: #ffffff;
    --color-surface-hover: #fff5d1;
    --color-surface-elevated: rgba(255, 251, 238, 0.94);
    --color-glass: rgba(60, 45, 0, 0.035);
    --color-glass-hover: rgba(60, 45, 0, 0.07);
    --color-scrim: rgba(29, 26, 20, 0.45);

    /* The indigo and violet ramps become amber and orange, keeping each step's job:
       300/400 are text accents (dark enough on white), 500/600 are fills. */
    --indigo-50: #fffbea;
    --indigo-100: #fff3c4;
    --indigo-200: #ffe58a;
    --indigo-300: #8a5300;
    --indigo-400: #9a5f00;
    --indigo-500: #f5b800;
    --indigo-600: #ffc82e;
    --indigo-700: #b87a00;
    --indigo-800: #8a5a00;
    --indigo-900: #5c3c00;
    --violet-300: #b45309;
    --violet-400: #c2560a;
    --violet-500: #ff8c1a;
    --violet-600: #ffb020;

    --color-accent: #f5b800;
    --color-accent-2: #ff8c1a;
    --color-accent-text: #8a5300;               /* 6.3:1 on white */
    --color-accent-soft: rgba(255, 210, 63, 0.24);
    --color-accent-glow: rgba(255, 190, 0, 0.32);
    --gradient-brand: linear-gradient(135deg, #b87a00 0%, #d9600a 100%);    /* display text on white, 3.3:1 or better */
    --gradient-action: linear-gradient(135deg, #ffd23f 0%, #ffbf1f 100%);   /* yellow buttons, dark text */
    --pattern-layers: repeating-linear-gradient(0deg, rgba(184, 122, 0, 0.06) 0 1px, transparent 1px 4px);
    --color-heat: #ff8c1a;

    --color-text: #1d1a14;
    --color-text-2: #4a4535;
    --color-text-3: #645d48;                    /* 6.2:1 on white */
    --color-text-on-accent: #1d1a14;

    --color-border-subtle: rgba(60, 45, 0, 0.08);
    --color-border: rgba(60, 45, 0, 0.14);
    --color-border-hover: rgba(60, 45, 0, 0.26);
    --color-border-accent: rgba(224, 161, 0, 0.7);
    --color-focus-ring: #8a5300;

    --color-success-text: #15803d;
    --color-success-soft: rgba(34, 197, 94, 0.14);
    --color-warning-text: #a16207;
    --color-danger-text: #b91c1c;
    --color-info-text: #1d4ed8;

    --viewer-bg-top: #fffaf0;
    --viewer-bg-bottom: #f6e7b8;
    --viewer-grid: rgba(184, 122, 0, 0.14);
    --viewer-label-bg: rgba(255, 255, 255, 0.8);

    --elev-1: 0 1px 2px rgba(80, 60, 0, 0.08);
    --elev-2: 0 4px 12px -2px rgba(80, 60, 0, 0.12);
    --elev-3: 0 12px 32px -8px rgba(80, 60, 0, 0.16), 0 2px 6px rgba(80, 60, 0, 0.08);
    --elev-4: 0 24px 56px -12px rgba(80, 60, 0, 0.2), 0 4px 12px rgba(80, 60, 0, 0.1);
    --elev-glow: 0 0 0 1px rgba(245, 184, 0, 0.5), 0 8px 40px -8px rgba(245, 184, 0, 0.5);
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-focus-ring);
}

html[data-theme="daniels"] body {
    background: #ffffff;
    color: var(--color-text);
}

/* ---------- Chrome that hard-codes dark colours ---------- */
html[data-theme="daniels"] .nav {
    background: rgba(255, 255, 255, 0.88);
    border-bottom-color: var(--color-border);
}
html[data-theme="daniels"] .nav__logo-text { color: var(--duck-ink); }
html[data-theme="daniels"] .nav__logo-accent { color: #b87a00; }
html[data-theme="daniels"] .profile-dropdown { box-shadow: var(--elev-3, 0 12px 24px rgba(0, 0, 0, 0.12)); }
html[data-theme="daniels"] .site-footer {
    background: var(--color-bg-sunken);
    border-top: 1px solid var(--color-border);
}
html[data-theme="daniels"] .hero__bg,
html[data-theme="daniels"] .hero__bg::before,
html[data-theme="daniels"] .hero__bg::after { background: none; }

html[data-theme="daniels"] .hero__title-accent {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="daniels"] .btn--primary,
html[data-theme="daniels"] .nav__link--accent,
html[data-theme="daniels"] .feedback-fab {
    color: var(--duck-ink);
    box-shadow: 0 2px 0 #e0a100, var(--elev-2);
}
html[data-theme="daniels"] .btn--primary:hover,
html[data-theme="daniels"] .nav__link--accent:hover {
    background: linear-gradient(135deg, #ffdc5e 0%, #ffc83a 100%);
}

html[data-theme="daniels"] .cta-band {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.32), rgba(255, 140, 26, 0.16)), #ffffff;
}

html[data-theme="daniels"] .quote-card {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.22), rgba(255, 140, 26, 0.08)), #ffffff;
}

/* Native controls follow the light page */
html[data-theme="daniels"] input,
html[data-theme="daniels"] select,
html[data-theme="daniels"] textarea { color-scheme: light; }
html[data-theme="daniels"] .input,
html[data-theme="daniels"] .select,
html[data-theme="daniels"] .textarea {
    background: #ffffff;
    color: var(--color-text);
    color-scheme: light;
}

/* ---------- Floating ducks (static/js/ducks.js) ---------- */
.duck-pond {
    position: fixed;
    inset: 0;
    z-index: -1;                /* inside .main's stacking context: behind the page content, above its background */
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
}
.duck-pond.is-ready { opacity: 1; }
/* Once a quote starts the form is the focus: the ducks would show through its see-through cards */
.main:has(.ps-journey.is-quoting) .duck-pond { opacity: 0; }
.duck-pond canvas { width: 100%; height: 100%; display: block; }
html[data-theme="daniels"] .main,
html[data-theme="daniels"] .site-footer { position: relative; z-index: 1; }
html[data-theme="daniels"] .ps-journey--daniels .seo-section,
html[data-theme="daniels"] .ps-journey--daniels .seo-section--alt { background: transparent; }

/* ---------- Daniels bits on the order form and job page ---------- */
.daniels-rate-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--duck-yellow, #ffd23f);
    color: #1d1a14;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}
.fulfil__daniels-to { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.daniels-detail {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--color-accent-text);
}
.badge--daniels,
.job-row__badge--daniels {
    background: #ffd23f;
    color: #1d1a14;
    border: 1px solid #e0a100;
}

/* "I am not a Daniels student": small, text only (hero line and footer) */
.hero__not-daniels {
    font-size: 0.5em;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hero__not-daniels:hover { color: var(--color-accent-text); }

/* Phones: the hero subtitle lines sit left-aligned on the Daniels page */
@media (max-width: 959px) {
    .ps-journey--daniels .hero__subtitle { text-align: left; }
}

.site-footer__not-daniels {
    display: inline-block;
    margin-left: var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-text-3);
    text-decoration: underline;
}
.site-footer__not-daniels:hover { color: var(--color-text); }

/* ---- css/customer-account.css ---- */
/* Customer accounts (customer_accounts.py): sign in, sign up, reset, /my-account and the order form choice */

.acct-card__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
    margin-top: var(--space-md, 16px);
    font-size: 0.88rem;
}
.acct-card__links a { color: var(--color-accent-text, #a5b4fc); display: inline-block; padding: 6px 0; }
.acct-note {
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-glass, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    font-size: 0.88rem;
    line-height: 1.45;
}
.acct-note--ok { border-color: rgba(52, 211, 153, 0.35); }
.acct-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.acct-code {
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 1.2rem;
}

/* /my-account */
.acct-page {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-xl, 32px) var(--gutter, 16px) var(--space-2xl, 48px);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 24px);
}
.acct-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md, 16px);
}
.acct-page__title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.acct-page__sub { color: var(--text-secondary); margin: 4px 0 0; overflow-wrap: anywhere; }
.acct-section .card__body { padding: var(--space-lg, 24px); }
.acct-section__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--space-xs, 4px); }
.acct-section__intro { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 var(--space-md, 16px); }
.acct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md, 16px);
}
.acct-grid__wide { grid-column: 1 / -1; }
.acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
    margin-top: var(--space-md, 16px);
}
.acct-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    background: rgba(251, 191, 36, 0.14);
    color: var(--color-warning-text, #fbbf24);
}
.acct-badge--ok { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.acct-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm, 8px); }
.acct-order {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md, 16px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-md, 12px);
    color: inherit;
    text-decoration: none;
}
.acct-order:hover { border-color: var(--color-border, rgba(165, 180, 252, 0.24)); }
.acct-order__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }
.acct-order__main { min-width: 0; }
.acct-order__id { font-weight: 600; overflow-wrap: anywhere; }
.acct-order__meta { font-size: 0.8rem; color: var(--text-muted); }
.acct-order__price { font-weight: 600; white-space: nowrap; text-align: right; }
.acct-order__status { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
.acct-keys { list-style: none; margin: 0 0 var(--space-md, 16px); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm, 8px); }
.acct-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    border: 1px solid var(--color-border-subtle, rgba(165, 180, 252, 0.08));
    border-radius: var(--radius-md, 12px);
}
.acct-key__meta { font-size: 0.8rem; color: var(--text-muted); }
.acct-secret {
    display: block;
    width: 100%;
    padding: var(--space-sm, 8px);
    margin: var(--space-sm, 8px) 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm, 8px);
    user-select: all;
}
.acct-danger { border-color: rgba(239, 68, 68, 0.3); }
.acct-danger .btn--danger, .acct-danger .acct-delete-btn { color: #f87171; border-color: rgba(239, 68, 68, 0.4); }

/* Order form: guest or account */
.acct-choice { border: 0; padding: 0; margin: var(--space-md, 16px) 0 0; }
.acct-choice__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm, 8px); }
.acct-choice__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    background: var(--color-glass, rgba(255, 255, 255, 0.03));
}
.acct-choice__option:has(input:checked) { border-color: var(--color-accent, #6366f1); }
.acct-choice__option input { margin-top: 3px; accent-color: var(--color-accent, #6366f1); }
.acct-choice__option small { display: block; color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; margin-top: 2px; }
.acct-choice__signin { margin-top: var(--space-sm, 8px); font-size: 0.85rem; color: var(--text-secondary); }
.acct-choice__signin button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-accent-text, #a5b4fc);
    text-decoration: underline;
    cursor: pointer;
}
.acct-choice__password { margin-top: var(--space-sm, 8px); }
.acct-signed {
    margin-top: var(--space-md, 16px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
}
.acct-modal {
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.acct-modal .card__body { padding: var(--space-xl, 32px); }
.acct-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm, 8px); }
.acct-modal__close {
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

@media (max-width: 560px) {
    .acct-choice__options { grid-template-columns: 1fr; }
    .acct-order { grid-template-columns: 12px minmax(0, 1fr); }
    .acct-order__price { grid-column: 2; text-align: left; }
    .acct-section .card__body { padding: var(--space-md, 16px); }
}

#acct-signin-modal[hidden], .acct-signed[hidden], .acct-choice__password[hidden], .acct-choice[hidden] { display: none; }
.acct-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm, 8px); flex-wrap: wrap; margin-bottom: var(--space-xs, 4px); }
.acct-section__head .acct-section__title { margin: 0; }

/* ---- css/section-nav.css ---- */
/* Section menu beside one open section, used by Settings and Analytics (js/section-nav.js).
   A sidebar on wide screens, a row of section buttons above the section on phones. */
.section-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  /* Clear the sticky top bar when the script scrolls to a section */
  scroll-margin-top: calc(var(--nav-height, 64px) + var(--space-md));
}
.section-nav {
  position: sticky;
  top: calc(var(--nav-height, 64px) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.section-nav__link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.section-nav__link:hover {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
}
.section-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.section-nav__link[aria-current] {
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.16);
  border-left-color: var(--accent-primary);
  font-weight: 600;
}
.section-panel[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .section-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .section-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
  }
  .section-nav__link {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-glass);
    font-size: 0.85rem;
  }
  .section-nav__link[aria-current] {
    background: var(--indigo-600);
    border-color: var(--indigo-600);
    color: #fff;
  }
}