/* ===========================================================================
   Lumaa — global stylesheet.

   Structure:
     1. Reset + design tokens          6. Shared UI (grid, cards, selects…)
     2. Base elements                  7. Login
     3. App chrome (sidebar/top bar)   8. MOBILE BLOCK (one place, ≤768px)
     4. Mobile chrome (tab bar/FAB)    9. Hover-capable devices only
     5. Sliders

   Every mobile rule lives in section 8 so there is exactly one place to look.
   Layout offsets come from the custom properties in section 1 — never
   hard-code the sidebar width or page padding again (the batch page's
   negative-margin breakout depends on this).
   =========================================================================== */

/* --- 1. Reset + design tokens -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Safety net: nothing should ever cause sideways scroll.
   NOTE: this also disables position:sticky — every pinned bar in this app is
   position:fixed deliberately. */
html, body { overflow-x: hidden; }

:root {
    --bg-color: #f5f5f5;
    --card-bg: #FFFFFF;
    --text-color: #1A202C;
    --text-secondary: #718096;
    --accent-color: #F5C842;
    --accent-hover: #E5B832;
    --accent-text: #1A202C;
    --border-color: #E2E8F0;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Layout geometry — overridden once, in the mobile block. */
    --sidebar-width: 300px;
    --topbar-h: 60px;
    --tabbar-h: 0px;            /* desktop has no bottom tab bar */
    --page-pad-x: 40px;
    --page-pad-y: 32px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* --- 2. Base elements ----------------------------------------------------- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 15px 0;
    font-weight: 800;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--text-color);
    letter-spacing: -1px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Login entrance -------------------------------------------------------
   Elements rise in sequence (--d staggers each one) rather than the whole
   page appearing at once, and the wrapper lifts away on submit so the wait
   for the dashboard reads as progress. All decoration — everything is
   usable with animations off (see the reduced-motion block at the end). */
.auth-body { overflow: hidden; }
.auth-glow {
    position: fixed; inset: -30vmax; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 22% 18%, rgba(245,200,66,0.20), transparent 62%),
        radial-gradient(32vmax 32vmax at 80% 78%, rgba(245,200,66,0.13), transparent 60%);
    animation: authDrift 22s ease-in-out infinite alternate;
}
@keyframes authDrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.auth-wrapper { position: relative; z-index: 1; transition: opacity .45s ease, transform .45s ease; }
.auth-rise { opacity: 0; animation: authRise .62s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes authRise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.auth-logo { opacity: 0; animation: authLogo .8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes authLogo {
    from { opacity: 0; transform: translateY(-8px) scale(.94); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}
/* Submitted: the whole page eases out as the next one loads. */
.auth-leaving { opacity: 0; transform: translateY(-10px) scale(.99); }
.auth-spinner {
    display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid rgba(26,32,44,0.25); border-top-color: #1a202c; border-radius: 50%;
    animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* --- 3. App chrome: sidebar, top bar, user menu ---------------------------- */
.app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    background: #ffffff; color: #1a202c;
    display: flex; flex-direction: column;
    z-index: 1000; border-right: 1px solid var(--border-color);
    overflow: hidden;
}
.sidebar-header { padding: 24px 20px; }
.sidebar-content { flex: 1; padding: 20px 16px; overflow-y: auto; overflow-x: hidden; }
.sidebar-logo-img { height: 30px; width: auto; display: block; }
.btn-new-shoot-compact {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px;
    background: var(--accent-color); color: #1a202c; border-radius: 10px;
    font-size: 0.9rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: all 0.2s; margin-bottom: 20px;
}
.btn-new-shoot-compact:hover { background: var(--accent-hover); transform: translateX(2px); }
.btn-new-shoot-compact i { font-size: 0.85rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    color: #718096; text-decoration: none; border-radius: 8px;
    font-size: 0.95rem; transition: all 0.2s;
}
.nav-item i { width: 20px; font-size: 1.1rem; text-align: center; }
.nav-item:hover { background: #f7fafc; color: #1a202c; }
.nav-item.active { background: #edf2f7; color: #1a202c; font-weight: 600; }

.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-h);
    padding: var(--page-pad-y) var(--page-pad-x);
    /* Reserve room for the mobile tab bar + home indicator (both 0 on desktop). */
    padding-bottom: calc(var(--page-pad-y) + var(--tabbar-h) + var(--safe-b) + 24px);
    background: var(--bg-color);
    min-height: calc(100vh - var(--topbar-h));   /* fallback for older Safari */
    min-height: calc(100dvh - var(--topbar-h));  /* must come second */
    transition: margin-left 0.1s ease;
}

.top-bar {
    position: fixed; top: 0; left: var(--sidebar-width); right: 0;
    height: var(--topbar-h);
    background: var(--bg-color);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 var(--page-pad-x);
    z-index: 900; overflow: hidden;
    transition: left 0.1s ease;
}
.top-bar-center { position: absolute; left: 50%; transform: translateX(-50%); }
.top-bar-right { display: flex; align-items: center; gap: 20px; }

.user-menu {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px 12px; border-radius: 8px; transition: background 0.2s; position: relative;
}
.user-menu:hover { background: #f7fafc; }
.user-avatar-top {
    width: 36px; height: 36px; border-radius: 50%; background: #edf2f7;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 600; color: #1a202c; flex-shrink: 0;
}
.user-name-top { font-size: 0.95rem; color: #1a202c; font-weight: 500; }

.user-dropdown {
    position: absolute; top: var(--topbar-h); right: var(--page-pad-x);
    background: white; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 320px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s; z-index: 1000;
}
.user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.user-dropdown-header {
    display: flex; align-items: center; gap: 12px; padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.user-dropdown-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: #edf2f7;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; color: #1a202c;
}
.user-dropdown-name { font-size: 1rem; font-weight: 600; color: #1a202c; }
.user-dropdown-divider { height: 1px; background: var(--border-color); margin: 0; }
.user-dropdown-logout {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    color: #e53e3e; text-decoration: none; font-weight: 500;
    transition: background 0.2s; border-radius: 0 0 12px 12px;
}
.user-dropdown-logout:hover { background: #fff5f5; }

/* Page "···" overflow menu — the single home for a page's occasional and
   destructive actions, so the page body itself stays free of chrome. */
.of-wrap { position: relative; }
.of-trigger {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: none;
    color: #718096; font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.of-trigger:hover { background: #edf2f7; color: #1a202c; }
.of-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
    background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 6px; min-width: 220px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.of-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.of-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 14px; background: none; border: none; border-radius: 8px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; color: #1a202c;
    text-align: left; text-decoration: none; cursor: pointer;
}
.of-item i { width: 18px; text-align: center; color: #a0aec0; font-size: 0.9rem; }
.of-item:hover { background: #f7fafc; }
.of-item-danger { color: #e53e3e; }
.of-item-danger i { color: #e53e3e; }
.of-item-danger:hover { background: #fff5f5; }

/* --- 4. Mobile chrome: bottom tab bar + New Shoot FAB ---------------------- */
/* Hidden on desktop; the mobile block turns them on. */
.tab-bar, .fab-new-shoot { display: none; }

/* --- 5. Sliders ----------------------------------------------------------- */
/* Any page can drop in .slider-container > .slider-btn-left/right +
   .slider-content#id and app.js wires it automatically. */
.slider-container { position: relative; padding: 0 60px; margin: 0 -20px; }
.slider-content {
    display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 4px 20px 12px;
}
.slider-content::-webkit-scrollbar { display: none; }
.slider-btn {
    position: absolute; top: 45%; transform: translateY(-50%); background: white;
    border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 1; transition: all 0.2s; color: #1a202c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 0.9rem;
}
.slider-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-50%) scale(1.05); }
.slider-btn-left { left: 5px; }
.slider-btn-right { right: 5px; }

/* --- 6. Shared UI --------------------------------------------------------- */

/* Stacked-photo project card — Home, Projects, studio project picker. */
.pj-card {
    position: relative; text-decoration: none; color: inherit; display: block;
    background: white; border: 1.5px solid var(--border-color); border-radius: 14px;
    padding: 16px; transition: box-shadow 0.2s, border-color 0.15s;
    width: 240px; flex-shrink: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.pj-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.pj-card-selected { border-color: var(--accent-color); background: #fffbea; }
.pj-card-check {
    position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-color); color: #1a202c; font-size: 0.75rem;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15); z-index: 4;
}
.pj-card-selected .pj-card-check { display: flex; }
.project-photo-stack { position: relative; aspect-ratio: 3/4; margin-bottom: 14px; }
.stack-photo {
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
    background: #f7fafc; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.stack-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stack-back-2 { z-index: 1; }
.stack-back-1 { z-index: 2; }
.stack-front { z-index: 3; }
.stack-empty { display: flex; align-items: center; justify-content: center; color: #cbd5e0; font-size: 2rem; box-shadow: none; }
.pj-card-name { margin: 0 0 3px; font-weight: 700; font-size: 0.92rem; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-card-meta { margin: 0 0 2px; font-size: 0.76rem; color: #a0aec0; }
.pj-card-date { margin: 0; font-size: 0.7rem; color: #cbd5e0; }

/* Card widths live here (not in the page templates) so the mobile block can
   override them — page <style> blocks render after this file and would win. */
.md-card { width: 160px; }
.home-model-card { width: 130px; }
.st-pick-card { width: 120px; }
.st-model-option { width: 100px; }

/* Pose picker (studio wizard's Configure step, and the project page's
   "+ Add poses" modal — see macros/pose_picker.html). Lives here, not in
   either template's own <style>, since it's now shared by both. */
.pose-card { position: relative; width: 120px; flex-shrink: 0; cursor: pointer; display: block; }
.pose-card input { position: absolute; top: 8px; right: 8px; z-index: 1; width: 18px; height: 18px; accent-color: var(--accent-color); }
.pose-card-img { aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: #f7fafc; border: 2px solid var(--border-color); margin-bottom: 6px; }
.pose-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pose-card input:checked ~ .pose-card-img { border-color: var(--accent-color); }
.pose-card-label { font-size: 0.76rem; color: #4a5568; text-align: center; display: block; }
.pose-card input:checked ~ .pose-card-label { color: #1a202c; font-weight: 700; }

/* Modals. On mobile these become bottom sheets (section 8). */
.pj-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.pj-modal { background: white; padding: 28px; border-radius: 16px; width: 400px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
.pj-input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border-color); border-radius: 8px; font-size: 0.9rem; font-family: inherit; }
.pj-input:focus { border-color: var(--accent-color); outline: none; }

/* Background-colour swatch picker — batch upload + studio configure. */
.ws-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-swatch { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-color); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.ws-swatch-active { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--accent-color); }
.ws-swatch-custom { background: #f7fafc; display: flex; align-items: center; justify-content: center; color: #a0aec0; font-size: 0.7rem; }
.ws-swatch-del { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: white; font-size: 0.7rem; transition: opacity 0.12s; }

/* Breadcrumbs (top bar). .bc-back is the mobile-only parent link. */
.bc { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; min-width: 0; }
.bc-back { display: none; }
.bc-trail { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bc-link { color: #718096; text-decoration: none; font-weight: 600; white-space: nowrap; }
.bc-link:hover { color: #1a202c; }
.bc-current { color: #1a202c; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.bc-sep { color: #cbd5e0; font-size: 0.6rem; display: flex; align-items: center; }

/* Photo grid (project page galleries). */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pg-tile { position: relative; display: block; width: 100%; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: #f7fafc; border: 1px solid var(--border-color); text-decoration: none; color: inherit; padding: 0; font: inherit; text-align: inherit; cursor: pointer; }
.pg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
/* Visible by default — on touch there is no hover to reveal it (section 9
   restores the fade-in for mouse users). */
.pg-tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); transition: opacity 0.15s; display: flex; flex-direction: column; }
.pg-tile-name { color: white; font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tile-type { color: rgba(255,255,255,0.85); font-size: 0.68rem; }
.pg-tile-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #cbd5e0; font-size: 1.4rem; border-style: dashed; }
.pg-tile-state-label { font-size: 0.72rem; color: #a0aec0; text-align: center; line-height: 1.5; }

/* Remove-photo × on a small thumbnail (shot-detail modal's "Original
   photos" row) — mobile bump lives in section 8. */
.asset-clear { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.6); color: white; font-size: 0.68rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
.asset-clear:hover { background: #e53e3e; }

/* Remove-chip × on the studio wizard's "Style it with" picker
   (studio/upload_garment.html) — lives here, not in that template's own
   <style>, so the section-8 mobile bump below can actually win (a
   page-local <style> block renders after this file and would otherwise
   override it at equal specificity). */
.ug-style-chip-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.6); color: white; font-size: 0.55rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }

/* Section headers + page headers (shared across pages). */
.dash-section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.dash-section-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1a202c; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Custom select (iOS-style; see initSelect in app.js). */
.cs-wrap { position: relative; width: 100%; }
.cs-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 10px 12px; background: white; border: 1.5px solid var(--border-color); border-radius: 8px;
    font-size: 0.88rem; font-family: inherit; color: #1a202c; cursor: pointer; text-align: left;
    transition: border-color 0.12s; }
.cs-trigger:hover { border-color: #cbd5e0; }
.cs-trigger:focus { outline: none; border-color: var(--accent-color); }
.cs-open .cs-trigger { border-color: var(--accent-color); }
.cs-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.cs-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-placeholder { color: #a0aec0; }
.cs-chev { font-size: 0.68rem; color: #a0aec0; flex-shrink: 0; transition: transform 0.15s; }
.cs-open .cs-chev { transform: rotate(180deg); }
.cs-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 6px; max-height: 260px; overflow-y: auto;
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.12s, transform 0.12s; }
.cs-open .cs-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cs-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 12px; background: none; border: none; border-radius: 7px; font-size: 0.88rem;
    font-family: inherit; color: #1a202c; cursor: pointer; text-align: left; }
.cs-option:hover, .cs-option-active { background: #f7fafc; }
.cs-option-selected { font-weight: 600; }
.cs-option-disabled { color: #cbd5e0; cursor: default; }
.cs-check { font-size: 0.7rem; color: var(--accent-color); flex-shrink: 0; }

/* List-row card (unsorted products, models shortcut). */
.list-row { display: flex; align-items: center; gap: 14px; background: white; border: 1.5px solid var(--border-color);
    border-radius: 12px; padding: 14px 18px; text-decoration: none; color: inherit; max-width: 560px;
    transition: border-color 0.15s, box-shadow 0.15s; }
.list-row:hover { border-color: var(--accent-color); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.list-row-icon { width: 40px; height: 40px; border-radius: 10px; background: #fffbea; color: var(--accent-color);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.list-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-row-title { font-size: 0.9rem; font-weight: 700; color: #1a202c; }
.list-row-sub { font-size: 0.78rem; color: #a0aec0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-chev { margin-left: auto; color: #cbd5e0; font-size: 0.75rem; }

.card-selected {
    border-color: var(--accent-color) !important;
    border-width: 2.5px !important;
    box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.2) !important;
}

/* --- 7. Login + form elements --------------------------------------------- */
.auth-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 40px 20px;
    margin-left: 0 !important;
}
.login-card {
    background: var(--card-bg); padding: 50px; border-radius: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    width: 100%; max-width: 400px; text-align: left;
}

.form-group { margin-bottom: 25px; }
label {
    display: block; margin-bottom: 8px; color: var(--text-secondary);
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
input[type="text"], input[type="password"], select, textarea {
    width: 100%; padding: 15px; background-color: #F7FAFC;
    border: 1px solid var(--border-color); color: var(--text-color);
    border-radius: 8px; font-family: var(--font-body); font-size: 1rem; transition: all 0.2s;
}
input:focus { outline: none; background-color: white; border-color: var(--text-color); }

.btn-primary {
    background-color: var(--accent-color); color: var(--accent-text); border: none;
    padding: 18px 30px; font-size: 0.85rem; font-weight: 700; border-radius: 24px;
    cursor: pointer; letter-spacing: 0.02em; transition: all 0.2s; width: 100%;
}
.btn-primary:hover { background-color: var(--accent-hover); transform: translateY(-1px); }

/* ===========================================================================
   8. MOBILE (≤768px) — the single canonical block.
   =========================================================================== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
        --tabbar-h: 56px;
        --page-pad-x: 16px;
        --page-pad-y: 20px;
    }

    /* Chrome: sidebar out, bottom tab bar in. */
    .app-sidebar { display: none; }

    .tab-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        height: calc(var(--tabbar-h) + var(--safe-b));
        padding-bottom: var(--safe-b);
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border-color);
    }
    .tab-item {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; min-height: 44px; color: #a0aec0; text-decoration: none;
        font-size: 0.65rem; font-weight: 600; -webkit-tap-highlight-color: transparent;
    }
    /* Five tabs at 320px leaves ~64px each — labels must never wrap to a
       second line (it would push the icons out of the fixed-height bar). */
    .tab-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tab-item i { font-size: 1.15rem; }
    .tab-item.active { color: #1a202c; }
    .tab-item.active i { color: var(--accent-color); }

    .fab-new-shoot {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; z-index: 1001;
        bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
        width: 56px; height: 56px; border-radius: 50%;
        background: var(--accent-color); color: #1a202c; font-size: 1.15rem;
        text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    }
    .fab-new-shoot:active { transform: scale(0.94); }

    /* Top bar: back-link + title + avatar, no absolute centring. */
    .top-bar {
        justify-content: flex-start; gap: 10px;
        background: rgba(245, 245, 245, 0.92);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        padding-left: max(var(--page-pad-x), env(safe-area-inset-left));
        padding-right: max(var(--page-pad-x), env(safe-area-inset-right));
    }
    .top-bar-center { position: static; transform: none; flex: 1; min-width: 0; }
    .top-bar-right { margin-left: auto; flex-shrink: 0; gap: 0; }
    .user-name-top, .user-menu-chev { display: none; }
    .user-menu { padding: 4px; min-width: 44px; min-height: 44px; justify-content: center; }
    .user-dropdown { left: var(--page-pad-x); right: var(--page-pad-x); min-width: 0; }
    .of-trigger { min-width: 44px; min-height: 44px; }
    .asset-clear { width: 36px; height: 36px; }
    /* Small round controls added by the vibe/brand/campaign surfaces. */
    .vb-card-del, .vbp-pose-redo, .ug-slot-clear { width: 36px; height: 36px; }

    /* Breadcrumbs: parent back-link + current page only. */
    .bc { gap: 6px; }
    .bc-back {
        display: inline-flex; align-items: center; gap: 4px;
        min-height: 44px; margin: -10px 0; padding-right: 4px;
        color: #718096; text-decoration: none; font-weight: 600; font-size: 0.85rem;
        max-width: 110px; white-space: nowrap; overflow: hidden; flex-shrink: 0;
    }
    .bc-trail { flex: 1; min-width: 0; }
    .bc-trail .bc-link, .bc-trail .bc-sep { display: none; }
    .bc-current { max-width: none; flex: 1; min-width: 0; font-size: 0.95rem; }

    /* Every form control at 16px — under that iOS zooms on focus and leaves
       the page panned. (Do NOT "fix" this by disabling zoom in the viewport.) */
    input, select, textarea,
    .ws-input, .st-input, .md-input, .pj-input,
    .ws-tile-name, .ws-tile-select, .ws-tile-other,
    .cs-trigger, .cs-option { font-size: 16px; }
    .cs-option { min-height: 44px; }

    /* Header/action rows stack to full-width, thumb-sized buttons. */
    .page-header { flex-direction: column; align-items: stretch; margin-bottom: 24px; }
    .page-header .action-row { width: 100%; }
    .action-row > * { flex: 1; min-height: 44px; justify-content: center; }
    /* Buttons sitting directly in a header (Delete product, New model). */
    .page-header > button, .page-header > a { min-height: 44px; }

    /* Small pill/text buttons that were 17-22px tall. */
    .pd-change-project { min-height: 32px; padding: 6px 12px; font-size: 0.75rem; }
    .ug-existing-link, .results-create-more { min-height: 44px; }
    .md-card-del { width: 36px; height: 36px; }
    .md-profile-close { width: 44px; height: 44px; }

    /* Grids whose min track was wider than the phone. */
    .pd-card-grid, .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

    /* Sliders: edge-to-edge, swipe + snap, no arrow gutters. */
    .slider-container { padding: 0; margin: 0 calc(var(--page-pad-x) * -1); }
    .slider-content {
        padding: 4px var(--page-pad-x) 12px; gap: 12px;
        scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    }
    .slider-content > * { scroll-snap-align: start; }

    /* Modals become bottom sheets that can actually scroll. */
    .pj-overlay { align-items: flex-end; }
    .pj-modal, .md-modal, .st-pp-modal {
        width: 100%; max-width: none; border-radius: 18px 18px 0 0;
        max-height: 88vh; max-height: 88dvh; overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 22px 16px calc(22px + var(--safe-b));
    }

    /* Two photos per row instead of one 280px monster. */
    .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    /* Touch-sized controls. */
    .ws-swatches { gap: 10px; }
    .ws-swatch { width: 40px; height: 40px; }
    .list-row { width: 100%; }

    /* Cards sized off the viewport instead of fixed pixels. */
    .pj-card { width: min(78vw, 260px); }
    .md-card { width: min(44vw, 180px); }
    .home-model-card { width: min(38vw, 150px); }
    .st-pick-card, .pose-card, .st-model-option { width: min(34vw, 130px); }

    .login-card { padding: 32px 24px; }
}

/* ===========================================================================
   9. Hover-capable devices only.
   Everything that reveals on hover lives here — on touch these elements are
   visible by default (see .pg-tile-overlay, .ws-swatch-del above), because a
   hover-only affordance is simply unreachable with a finger.
   =========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .pg-tile-overlay { opacity: 0; }
    .pg-tile:hover .pg-tile-overlay { opacity: 1; }
    .pg-tile:hover img { transform: scale(1.03); }

    .ws-swatch-del { opacity: 0; }
    .ws-swatch-saved:hover .ws-swatch-del { opacity: 1; }

    /* Photo-stack fan-out: on touch the first tap applies :hover and the card
       visibly jumps before navigating, so it stays desktop-only. */
    .pj-card:hover .stack-back-2 { transform: rotate(-12deg) translateX(-22px) !important; }
    .pj-card:hover .stack-back-1 { transform: rotate(8deg) translateX(22px) !important; }
}

@media (hover: none) {
    .slider-btn { display: none; }
}

/* ===========================================================================
   10. REDUCED MOTION — respect the OS setting. Entrance animations are
   decoration; with them off, everything must still be immediately visible
   (never left at the opacity:0 an interrupted animation would freeze).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .auth-rise, .auth-logo { opacity: 1 !important; transform: none !important; filter: none !important; }
    .auth-glow { animation: none !important; }
}