:root {
  color-scheme: light;
  --canvas: #fff9f7;
  --surface: #fff;
  --surface-warm: #fff4f0;
  --surface-muted: #f7f1ef;
  --ink: #321722;
  --ink-muted: #725f66;
  --ink-subtle: #9a868d;
  --border: #e9ddda;
  --border-strong: #a57e75;
  --pink: #ff96b2;
  --pink-soft: #ffd6e1;
  --gold: #ffd678;
  --gold-soft: #fff0bf;
  --burgundy: #461528;
  --success: #2f7d63;
  --warning: #9a6517;
  --danger: #a43e4a;
  --info: #436a84;
  --danger-border: #c0707a;
  --viewer-canvas: #170e12;
  --viewer-surface: #24171d;
  --viewer-surface-raised: #302027;
  --viewer-ink: #fff8f5;
  --viewer-ink-muted: #cfbec4;
  --viewer-border: #8c6877;
  --viewer-focus: #d7c6ff;
  --scrim: rgba(31, 13, 20, 0.58);
  --primary: linear-gradient(100deg, #ff96b2 0%, #ffd678 100%);
  --halo: radial-gradient(circle, rgba(255, 150, 178, 0.3) 0%, rgba(255, 214, 120, 0.22) 45%, rgba(255, 249, 247, 0) 74%);
  --font: Inter, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0 8px 28px rgba(70, 21, 40, 0.08);
  --shadow-raised: 0 16px 48px rgba(70, 21, 40, 0.14);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --header-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; overflow-anchor: none; background: var(--canvas); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100dvh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); font: 400 16px/24px var(--font); }
body::before { position: fixed; inset: -20vh -20vw auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; pointer-events: none; background: var(--halo); content: ""; opacity: 0.44; z-index: -1; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: var(--burgundy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
h2 { margin-bottom: 12px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; }
h3 { margin-bottom: 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
p { margin-bottom: 16px; }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-raised); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.site-header { position: sticky; top: 0; z-index: 20; height: var(--header-height); border-bottom: 1px solid var(--border); background: var(--canvas); }
.header-inner { width: min(1184px, calc(100% - 32px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-word { font-size: 14px; font-weight: 600; letter-spacing: 0.22em; }
.brand-mark { position: relative; width: 34px; height: 34px; flex: 0 0 34px; }
.brand-mark span { position: absolute; width: 21px; height: 21px; border: 1px solid var(--surface); border-radius: 999px; mix-blend-mode: multiply; }
.brand-mark .circle-a { top: 1px; left: 7px; background: var(--pink); }
.brand-mark .circle-b { bottom: 1px; left: 1px; background: var(--pink); }
.brand-mark .circle-c { right: 1px; bottom: 1px; background: var(--gold); }
.brand-mark::after { position: absolute; left: 12px; top: 13px; width: 10px; height: 9px; background: var(--surface); border-radius: 6px 6px 8px 8px; clip-path: polygon(50% 100%, 5% 43%, 8% 18%, 28% 5%, 50% 24%, 72% 5%, 92% 18%, 95% 43%); content: ""; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; }
.header-link:hover { color: var(--burgundy); background: var(--surface-warm); }
.product-header-link { font-size: 14px; font-weight: 600; }

.fixture-banner { border-bottom: 1px solid var(--border); background: var(--gold-soft); color: var(--burgundy); }
.fixture-banner-inner { width: min(1184px, calc(100% - 32px)); min-height: 40px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.fixture-banner button { min-height: 44px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.local-locator-banner { border-bottom: 1px solid var(--border); background: var(--gold-soft); color: var(--burgundy); }
.local-locator-banner-inner { width: min(1184px, calc(100% - 32px)); min-height: 44px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.local-locator-banner-inner span::before { content: "· "; }
.temporary-access-banner { border-bottom: 1px solid var(--border-strong); background: var(--gold-soft); color: var(--ink); }
.temporary-access-banner-inner { width: min(1184px, calc(100% - 32px)); min-height: 52px; margin: 0 auto; display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 20px; }
.temporary-access-banner-inner strong { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--burgundy); }
.temporary-access-banner-inner span { color: var(--ink-muted); }

.page { width: min(1184px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 96px; }
.axis-wide { width: 100%; }
.axis-narrow { width: min(100%, 560px); }
.axis-copy { width: min(100%, 68ch); }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading p { margin: 4px 0 0; color: var(--ink-muted); }
.eyebrow { margin-bottom: 8px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.muted { color: var(--ink-muted); }
.fine { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.stack { display: grid; gap: 16px; }
.stack-tight { display: grid; gap: 8px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.spacer { flex: 1; }
.divider { height: 1px; margin: 8px 0; background: var(--border); }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--burgundy); font-weight: 600; line-height: 24px; text-decoration: none; box-shadow: none; }
.button:hover { background: var(--surface-warm); }
.button-primary { min-height: 52px; border-color: var(--burgundy); background: var(--primary); box-shadow: var(--shadow-card); }
.button-primary:hover { filter: saturate(1.04); }
.button-danger { border-color: var(--danger-border); color: var(--danger); }
.button-quiet { border-color: transparent; background: transparent; color: var(--ink-muted); font-weight: 500; }
.button-icon { width: 44px; min-width: 44px; padding: 0; border-radius: 999px; }
.button[disabled] { cursor: not-allowed; opacity: 0.58; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 4px; border: 0; background: transparent; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

.field { display: grid; gap: 8px; }
.field label, .field-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.field textarea { min-height: 112px; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border: 2px solid var(--danger); }
.field-error { color: var(--danger); font-size: 14px; line-height: 20px; }
.check-row { min-height: 44px; display: flex; align-items: flex-start; gap: 10px; }
.check-row input { width: 20px; height: 20px; margin: 12px 0 0; accent-color: var(--burgundy); }
.check-row label { flex: 1; padding: 10px 0; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }
.segmented button, .segmented label { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); text-align: center; }
.segmented a { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-muted); text-align: center; text-decoration: none; }
.segmented [aria-selected="true"], .segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.view-tabs { width: min(100%, 360px); }

.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.card-body { padding: 20px; }
.interactive-card { transition: border-color 120ms cubic-bezier(.2,.8,.2,1), transform 120ms cubic-bezier(.2,.8,.2,1); }
.interactive-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.status-pill { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 600; }
.status-pill::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.status-success { color: var(--success); }
.status-warning { color: var(--warning); }
.status-danger { color: var(--danger); }
.status-info { color: var(--info); }

.home-page { padding-top: 24px; }
.home-hero { min-height: min(720px, calc(100dvh - 128px)); display: grid; align-items: center; gap: 32px; }
.home-copy { position: relative; z-index: 1; }
.home-copy h1 { max-width: 11ch; font-size: 44px; line-height: 52px; letter-spacing: -0.03em; }
.home-copy h1, .space-title-row h1, .photo-detail-panel h1 { font-family: "Iowan Old Style", "Songti SC", STSong, Georgia, serif; font-weight: 500; }
.home-copy .lead { max-width: 30ch; color: var(--ink-muted); font-size: 18px; line-height: 28px; }
.home-actions { display: grid; width: min(100%, 360px); gap: 12px; margin-top: 32px; }
.hero-frame { position: relative; height: 56dvh; min-height: 420px; max-height: 640px; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-warm); box-shadow: var(--shadow-raised); }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; filter: saturate(0.82) sepia(0.07); }
.hero-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, var(--burgundy) 100%); content: ""; opacity: 0.72; }
.hero-caption { position: absolute; right: 20px; bottom: 20px; left: 20px; z-index: 1; color: var(--viewer-ink); font-size: 14px; line-height: 20px; }

.home-banner { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); background: var(--surface-warm); }
.home-banner img { display: block; width: 100%; height: 34dvh; min-height: 220px; max-height: 380px; object-fit: cover; object-position: 50% 45%; filter: saturate(0.86) sepia(0.05); }
.home-banner::after { position: absolute; inset-inline: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, var(--burgundy)); opacity: 0.55; content: ""; pointer-events: none; }
.nav-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.nav-card { display: flex; align-items: center; gap: 16px; padding: 20px; text-decoration: none; color: inherit; }
.nav-card-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--primary); font-size: 26px; box-shadow: var(--shadow-card); }
.nav-card-body { display: grid; min-width: 0; gap: 4px; }
.nav-card-body strong { font-size: 18px; line-height: 24px; }

.open-card { margin: 8dvh auto 0; }
.open-card .brand-mark { width: 58px; height: 58px; transform: scale(1.6); transform-origin: top left; margin-bottom: 30px; }
.invitation-preview { position: relative; min-height: 220px; overflow: hidden; border-radius: var(--radius-lg); }
.invitation-preview img { width: 100%; height: 220px; object-fit: cover; }
.invitation-preview::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--ink)); content: ""; opacity: 0.78; }
.invitation-preview-copy { position: absolute; right: 16px; bottom: 16px; left: 16px; z-index: 1; color: var(--viewer-ink); }

.space-shell { min-width: 0; display: grid; gap: 24px; }
.space-title-row { min-width: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cap-tabs { min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cap-tabs a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; }
.cap-tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-card { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-muted); aspect-ratio: 4 / 3; }
.photo-card:nth-child(5n + 1) { grid-row: span 2; aspect-ratio: auto; min-height: 420px; }
.photo-card a { position: absolute; inset: 0; color: var(--viewer-ink); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.photo-card:hover img { transform: scale(1.015); }
.photo-card::after { position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--ink)); content: ""; opacity: 0.72; }
.photo-card-copy { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.photo-card-copy span:first-child { font-weight: 600; }
.product-journey { display: flex; align-items: center; gap: 8px; overflow-x: auto; color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.product-journey a, .product-journey span { min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 11px; color: inherit; text-decoration: none; }
.product-journey span[aria-current="step"] { border: 1px solid var(--border-strong); background: var(--surface); color: var(--burgundy); }
.product-journey > * + *::before { margin-right: 8px; color: var(--pink); content: "→"; }

.empty-state, .state-panel { min-height: 280px; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.state-panel-inner { max-width: 440px; }
.state-symbol { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-warm); color: var(--burgundy); }
.loading-line { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.loading-line::after { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--primary); animation: loading 1.2s ease-in-out infinite; content: ""; }
@keyframes loading { from { transform: translateX(-110%); } to { transform: translateX(360%); } }

.photo-detail-layout { display: grid; gap: 24px; }
.photo-detail-media { min-height: 460px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-muted); }
.photo-detail-media img { width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; }
.photo-detail-panel { align-self: start; }
.memory-bridge { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 16px; }
.memory-bridge p { margin: 0; }
.memory-bridge > p:first-child { color: var(--danger); font-size: 12px; line-height: 18px; }
.metadata-list { display: grid; gap: 0; margin: 0; }
.metadata-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.metadata-row:last-child { border-bottom: 0; }
.metadata-row dt { color: var(--ink-muted); }
.metadata-row dd { margin: 0; text-align: right; }

.viewer-wrap { overflow: hidden; border-radius: var(--radius-lg); background: var(--viewer-canvas); color: var(--viewer-ink); box-shadow: var(--shadow-raised); }
.viewer-toolbar { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--viewer-border); background: var(--viewer-surface); }
.viewer-toolbar .button { border-color: var(--viewer-border); background: var(--viewer-surface-raised); color: var(--viewer-ink); }
.viewer-muted { color: var(--viewer-ink-muted); }
.viewer-fixture, [data-viewer-root], .viewer-render-host { min-height: 520px; }
.viewer-render-host { position: relative; z-index: 1; }
.viewer-photo-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--viewer-border); background: var(--viewer-surface); }
.viewer-photo-button { border-color: var(--viewer-border); background: var(--viewer-surface-raised); color: var(--viewer-ink); }
.viewer-stage { min-height: 520px; overflow: hidden; background-image: linear-gradient(180deg, transparent 64%, var(--viewer-canvas)), var(--viewer-image); background-size: auto 100%; background-position: center; }
.qr-video { width: 100%; border-radius: var(--radius-md); background: var(--viewer-canvas); }

.upload-layout { display: grid; gap: 24px; }
.notice-box { padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-warm); }
.drop-zone { min-height: 220px; display: grid; place-items: center; padding: 32px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.drop-zone input { max-width: 100%; }
.batch-list { display: grid; gap: 12px; }
.batch-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px; }
.batch-thumb { width: 88px; height: 72px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-muted); }
.batch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.batch-item-copy { display: grid; justify-items: start; gap: 4px; }
.batch-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.placement-editor { display: grid; gap: 24px; }
.placement-viewer { min-width: 0; }
.placement-target { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.placement-target img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted); }
.ai-candidates { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-warm); }
.ai-candidates .cluster { gap: 8px; }
.candidate-chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--burgundy); font-weight: 600; font-size: 13px; line-height: 20px; }
.candidate-chip:hover { background: var(--surface-warm); }
.candidate-chip[aria-pressed="true"] { border-color: var(--burgundy); background: var(--primary); }
.direction-control { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--halo), var(--surface); }
.direction-control::before, .direction-control::after { position: absolute; inset: 50% 12%; height: 1px; background: var(--border); content: ""; }
.direction-control::after { transform: rotate(90deg); }
.direction-knob { position: absolute; left: 50%; top: 12%; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 2px solid var(--burgundy); border-radius: 999px; background: var(--primary); box-shadow: var(--shadow-card); }
.range-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.range-row input { width: 100%; min-height: 44px; accent-color: var(--burgundy); }

.spaces-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.space-card { overflow: hidden; }
.space-card-cover { height: 180px; background: var(--surface-warm); }
.space-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.space-card .card-body { display: grid; gap: 12px; }

.manage-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.manage-nav { position: sticky; top: 88px; padding: 8px; }
.manage-nav a { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; }
.manage-nav a[aria-current="page"] { background: var(--surface-warm); color: var(--burgundy); font-weight: 600; }
.manage-content { min-width: 0; }
.queue-layout { display: grid; gap: 16px; }
.review-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); overflow: hidden; }
.review-card-media { min-height: 210px; background: var(--surface-muted); }
.review-card-media img { width: 100%; height: 100%; object-fit: cover; }
.review-card .card-body { display: grid; align-content: center; gap: 16px; }
.settings-list { display: grid; gap: 12px; }
.setting-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; }
.setting-copy { min-width: 0; }
.setting-copy strong { display: block; }
.setting-copy span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.member-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: var(--pink-soft); color: var(--burgundy); font-weight: 700; }

.qr-wrap { width: min(100%, 320px); margin: 0 auto; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.qr-canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.campaign-card { padding: 16px; }
.campaign-link { overflow-wrap: anywhere; }

.account-layout { display: grid; gap: 24px; }
.account-summary { display: flex; align-items: center; gap: 16px; }
.account-summary .avatar { width: 56px; height: 56px; }
.danger-zone { border-color: var(--danger-border); }

.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: min(360px, calc(100% - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-raised); color: var(--ink); }
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--danger-border); }

.dialog-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.dialog { width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 0; }
.dialog-body { padding: 20px; }
.dialog-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 0 20px 20px; }

.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: none; min-height: calc(64px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--border); background: var(--canvas); }
.bottom-nav a { min-width: 64px; min-height: 56px; flex: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 12px; line-height: 16px; text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--burgundy); background: var(--surface-warm); }

@media (min-width: 1248px) {
  .header-inner, .fixture-banner-inner, .local-locator-banner-inner, .temporary-access-banner-inner, .page { width: min(1184px, calc(100% - 64px)); }
  .page { padding-top: 40px; }
  .home-hero { grid-template-columns: minmax(320px, 4fr) minmax(480px, 7fr); gap: 64px; }
  .nav-card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .home-banner img { height: 40dvh; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .photo-detail-layout { grid-template-columns: minmax(0, 2fr) 320px; }
  .upload-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .placement-editor { grid-template-columns: minmax(0, 1fr) 320px; }
  .account-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1247px) {
  .site-header .header-link .label { display: none; }
  .product-header-link { display: none; }
  .page { padding-top: 24px; padding-bottom: 48px; }
  .fixture-banner-inner, .local-locator-banner-inner { min-height: 48px; }
  .temporary-access-banner-inner { min-height: 0; align-items: flex-start; flex-direction: column; gap: 6px; padding: 12px 0; }
  .home-page { padding-top: 16px; }
  .home-hero { align-content: start; }
  .home-hero .home-copy { order: 2; }
  .home-copy h1 { max-width: 12ch; font-size: 32px; line-height: 40px; }
  .home-actions { width: 100%; margin-top: 24px; }
  .hero-frame { height: 44dvh; min-height: 300px; max-height: 460px; }
  .space-title-row, .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .cap-tabs { width: 100%; overflow-x: auto; }
  .cap-tabs a { min-width: 0; flex: 1; justify-content: center; padding-inline: 4px; white-space: nowrap; }
  .photo-card:nth-child(5n + 1) { min-height: 320px; }
  .photo-detail-media { min-height: 0; aspect-ratio: 4 / 3; }
  .photo-detail-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
  .viewer-fixture, .viewer-stage, [data-viewer-root], .viewer-render-host { min-height: min(58dvh, 520px); }
  .batch-item { grid-template-columns: 72px minmax(0, 1fr); }
  .batch-thumb { width: 72px; height: 64px; }
  .batch-item-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .spaces-grid { grid-template-columns: 1fr; }
  .manage-shell { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .manage-nav { position: static; min-width: 0; max-width: 100%; display: flex; overflow-x: auto; white-space: nowrap; }
  .manage-nav a { flex: 0 0 auto; }
  .review-card { grid-template-columns: 1fr; }
  .review-card-media { min-height: 240px; }
  .toast-region { bottom: 16px; }
  .product-journey { margin-inline: -16px; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .photo-card:hover img, .interactive-card:hover { transform: none; }
}