/* hadir. Premium UI system - loaded after component styles. */

html { background: var(--ink); }
body {
  color: var(--paper);
  font-family: var(--font-sans);
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(216, 184, 130, 0.12), transparent 72%),
    var(--ink);
}

button, input, textarea { font: inherit; }
button { -webkit-font-smoothing: antialiased; }
button:focus-visible, textarea:focus-visible, .sheet-slot.empty:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.app, .page { max-width: 560px; margin-inline: auto; }
.app { gap: 14px; }

.topbar { min-height: 44px; }
.icon-btn, .flash-btn, .flip-btn, .lightbox-close, .sub-view-head button {
  border: 1px solid var(--line);
  background: rgba(18, 18, 21, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 7px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(14px);
  transition: transform 180ms var(--ease-out), background 180ms ease, border-color 180ms ease;
}
.icon-btn:hover, .flash-btn:hover, .flip-btn:hover, .lightbox-close:hover, .sub-view-head button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.22);
}
.icon-btn:active, .flash-btn:active, .flip-btn:active, .lightbox-close:active, .sub-view-head button:active { transform: scale(.93); }
.event-title { font-size: 14px; letter-spacing: .01em; }
.event-sub { color: var(--paper-muted); }

.viewfinder-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.viewfinder-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(216, 184, 130, 0.10);
}
.placeholder-bg {
  color: var(--paper-muted);
  line-height: 1.5;
  background:
    radial-gradient(circle at 50% 45%, rgba(216, 184, 130, 0.12), transparent 35%),
    #080809;
}
.card-scrim-top { height: 130px; background: linear-gradient(to bottom, rgba(0, 0, 0, .62), transparent); }
.odometer-wrap {
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(10, 10, 12, .42);
  backdrop-filter: blur(12px);
}
.odometer-num.current { color: var(--gold-soft); }
.odometer-label { color: rgba(255, 255, 255, .78); }

.control-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(37, 37, 40, .96), rgba(19, 19, 22, .98));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.zoom-pill { border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .27); }
.zoom-opt { transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-out); }
.zoom-opt:hover { color: var(--paper); }
.zoom-opt.active { background: var(--paper); box-shadow: 0 3px 10px rgba(0, 0, 0, .22); }
.flash-btn.on { color: var(--gold); border-color: rgba(216, 184, 130, .45); }
.mini-gallery .stack-img { border-color: rgba(255, 255, 255, .86); box-shadow: 0 5px 14px rgba(0, 0, 0, .30); }
.mini-gallery .stack-empty { border-color: rgba(216, 184, 130, .45); }
.shutter {
  width: 66px;
  height: 66px;
  border: 4px solid rgba(255, 255, 255, .23);
  box-shadow: 0 0 0 2px var(--paper) inset, 0 8px 22px rgba(0, 0, 0, .30);
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.shutter:hover { box-shadow: 0 0 0 2px var(--paper) inset, 0 0 0 5px rgba(216, 184, 130, .22), 0 8px 22px rgba(0, 0, 0, .30); }

#splash-screen {
  background:
    radial-gradient(circle at 50% 43%, rgba(216, 184, 130, .15), transparent 25%),
    radial-gradient(ellipse 80% 70% at 50% 0%, #201d1a, #080809 68%);
}
.splash-content { position: relative; }
.logo-circle {
  width: 76px;
  height: 76px;
  background: var(--paper);
  box-shadow: 0 0 0 10px rgba(216, 184, 130, .11), 0 14px 42px rgba(0, 0, 0, .45);
}
.logo-text { font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; }
.from-text { color: var(--paper-muted); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.brand-text { color: var(--gold-soft); letter-spacing: .01em; }

#welcome-screen { background: radial-gradient(ellipse 90% 60% at 50% 5%, #24211e, var(--ink) 65%); }
.welcome-content { padding: max(34px, env(safe-area-inset-top)) 28px max(30px, env(safe-area-inset-bottom)); }
.welcome-logo { margin-bottom: 34px; }
.welcome-logo h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; }
.welcome-event-name { margin: 0 0 13px; color: var(--gold); font-size: 10px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.welcome-content h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.045em; font-size: clamp(38px, 10vw, 50px); }
.welcome-content p { color: var(--paper-muted); font-size: 15px; max-width: 310px; margin-inline: auto; }
.login-card { margin-top: 42px; gap: 11px; }
.login-btn {
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease;
}
.login-btn:hover { transform: translateY(-2px); }
.login-btn:active { transform: scale(.98); }
.apple { background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .23); }
.google { background: rgba(255, 255, 255, .08); border-color: var(--line); }
.guest { color: var(--paper-muted); }
.guest:hover { color: var(--gold-soft); background: rgba(216, 184, 130, .08); }
.terms { color: var(--muted); font-size: 12px; }
.terms span { color: var(--paper-muted); }
.install-app-btn { margin: 18px auto 0; border: 0; background: transparent; color: rgba(255, 255, 255, .52); font-size: 12px; cursor: pointer; }
.install-app-btn:hover { color: var(--gold-soft); }

#gallery-view { background: radial-gradient(ellipse 80% 35% at 50% 0%, #2b241e, #121112 63%); }
.page { padding-inline: 20px; }
.gallery-title { font-family: var(--font-display); font-size: 32px; letter-spacing: -.04em; }
.avatar-thumb { border: 1px solid rgba(216, 184, 130, .35); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }
.stat-item { color: var(--paper-muted); }
.action-row { gap: 9px; }
.action-btn { border: 1px solid var(--line); border-radius: 999px; transition: transform 180ms var(--ease-out), background 180ms ease; }
.action-btn:hover { transform: translateY(-1px); }
.action-btn:active { transform: scale(.97); }
.action-btn.ghost { background: rgba(255, 255, 255, .07); }
.action-btn.primary { background: var(--paper); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.photo-grid { gap: 10px; }
.photo-card { border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 9px 22px rgba(0, 0, 0, .20); transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.photo-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .30); }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .30), transparent 35%); pointer-events: none; }
.photo-tag { z-index: 1; }

/* Editorial shared album: deliberately calm, photo-first, and tactile. */
#gallery-view { background: radial-gradient(ellipse 90% 35% at 50% 0%, #28231f, #0c0c0e 62%); }
#gallery-view .page { min-height: 100dvh; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 30px); }
#gallery-view .gallery-topbar { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-bottom: 28px; }
#gallery-view .gallery-wordmark { color: rgba(255, 255, 255, .70); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-align: center; }
#gallery-view .gallery-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 26px; }
#gallery-view .gallery-eyebrow { margin: 0 0 9px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
#gallery-view .gallery-title { max-width: 270px; font-size: clamp(32px, 9vw, 43px); line-height: .99; }
#gallery-view .gallery-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: rgba(255, 255, 255, .54); font-size: 11px; font-weight: 600; }
#gallery-view .gallery-meta span:nth-child(2) { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
#gallery-view .avatar-thumb { width: 62px; height: 78px; border-radius: 2px; background: linear-gradient(145deg, #504034, #1b1919); transform: rotate(3deg); }
#gallery-view .avatar-thumb:not([src]) { opacity: .42; }
#gallery-view .gallery-tabs {
  display: inline-flex;
  width: 100%;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  margin-bottom: 13px;
}
#gallery-view .gallery-tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
#gallery-view .gallery-tab.active { color: #171616; background: var(--paper); box-shadow: 0 3px 10px rgba(0, 0, 0, .20); }
#gallery-view .action-row { display: grid; grid-template-columns: 40px 40px 1fr; gap: 8px; margin: 0 0 29px; }
#gallery-view .action-btn { height: 40px; padding: 0; font-size: 12px; }
#gallery-view .action-btn.ghost { color: var(--paper-muted); background: rgba(255, 255, 255, .065); }
#gallery-view .action-btn.primary { justify-content: center; color: #161515; font-weight: 750; }
#gallery-view .gallery-collection { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 15px; }
#gallery-view .collection-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; color: var(--paper); font-size: 13px; font-weight: 700; }
#gallery-view .collection-heading span:last-child { color: rgba(255, 255, 255, .42); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
#gallery-view .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; }
#gallery-view .photo-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  aspect-ratio: .84;
  background: #201c1b;
  animation: gallery-card-in 480ms var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
#gallery-view .photo-card::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 32%, rgba(0, 0, 0, .12)); }
#gallery-view .photo-card-0, #gallery-view .photo-card-3 { grid-column: span 2; aspect-ratio: 1.48; }
#gallery-view .photo-card-1 { aspect-ratio: .76; }
#gallery-view .photo-card-2 { aspect-ratio: 1.05; }
#gallery-view .photo-card-4 { aspect-ratio: .90; }
#gallery-view .photo-card img { transition: transform 500ms var(--ease-out), filter 500ms ease; }
#gallery-view .photo-card:hover img { transform: scale(1.035); filter: saturate(1.08); }
#gallery-view .photo-tag { top: auto; bottom: 9px; left: 10px; color: rgba(255, 255, 255, .88); font-size: 9px; letter-spacing: .04em; }
#gallery-view .empty-state { display: grid; justify-items: center; gap: 9px; padding: 72px 24px; border: 1px dashed rgba(216, 184, 130, .25); border-radius: 4px; background: rgba(255, 255, 255, .02); color: var(--paper-muted); }
#gallery-view .empty-state strong { color: var(--paper); font-family: var(--font-display); font-size: 24px; font-weight: 500; }
#gallery-view .empty-state p { max-width: 220px; margin: 0; line-height: 1.5; }
#gallery-view .empty-state-mark { color: var(--gold); font-size: 42px; line-height: .8; }
#gallery-view .lightbox { background: rgba(7, 7, 8, .98); }
#gallery-view .lightbox.open img { animation: lightbox-in 300ms var(--ease-out) both; }
#gallery-view .lightbox-tag { left: 22px; bottom: calc(env(safe-area-inset-bottom, 16px) + 20px); color: var(--paper); }
@keyframes gallery-card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }

.sheet-backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(4px); }
.sheet { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(145deg, #29292c, #18181b); box-shadow: 0 -16px 48px rgba(0, 0, 0, .30); }
.sheet-handle { background: rgba(255, 255, 255, .34); }
.sheet-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.sheet-slot { border-radius: var(--radius-xs); }
.sheet-slot.empty { background: rgba(255, 255, 255, .025); border-color: rgba(216, 184, 130, .32); color: var(--paper-muted); }
.sheet-btn { border: 1px solid var(--line); border-radius: 14px; transition: transform 180ms var(--ease-out), background 180ms ease; }
.sheet-btn:hover { background: rgba(255, 255, 255, .16); }
.sheet-btn:active { transform: scale(.985); }
.sheet-btn.done { background: var(--paper); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.settings-menu-item { border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .065); transition: transform 180ms var(--ease-out), background 180ms ease; }
.settings-menu-item:hover { background: rgba(255, 255, 255, .12); transform: translateX(2px); }
.report-textarea { border-color: var(--line); background: rgba(0, 0, 0, .18); }
.report-textarea:focus { border-color: rgba(216, 184, 130, .70); outline: none; }
.gallery-toast { background: var(--paper); box-shadow: var(--shadow-soft); }
.lightbox { background: rgba(7, 7, 9, .96); backdrop-filter: blur(12px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (min-width: 600px) {
  body { background: radial-gradient(ellipse 50% 60% at 50% 50%, #292622 0%, var(--ink) 70%); }
  #camera-view, #gallery-view { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 80px rgba(0, 0, 0, .35); }
}

/* Edge-to-edge 2:3 portrait camera with a full-width control dock. */
#camera-view .app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100vh;
  gap: 0;
  padding: 0;
  background: var(--ink);
}
#camera-view .topbar {
  position: absolute;
  z-index: 12;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 16px;
  right: 16px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}
#camera-view .top-right-stack { flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; align-self: start; }
#camera-view .icon-btn { width: 38px; height: 38px; }
#camera-view .topbar-flash {
  display: flex;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  color: var(--paper-muted);
  font-size: 7px;
  letter-spacing: .04em;
}
#camera-view .topbar-flash.on { color: var(--gold-soft); border-color: rgba(216, 184, 130, .55); background: rgba(216, 184, 130, .15); }
#camera-view .event-title-wrap {
  min-width: 0;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
#camera-view .event-title { font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
#camera-view .event-sub { font-size: 9px; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
#camera-view .viewfinder-card {
  flex: none;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#camera-view .viewfinder-card::after { border-radius: 0; }
#camera-view .card-scrim-top { height: 128px; }
#camera-view .odometer-wrap {
  top: auto;
  bottom: 15px;
  left: 14px;
  min-width: 78px;
  padding: 6px 9px 6px 6px;
}
#camera-view .odometer { height: 52px; width: 25px; }
#camera-view .odometer-label { font-size: 8.5px; }
#camera-view .control-panel {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-radius: 0;
  background: linear-gradient(155deg, #232326, #111113 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#camera-view .zoom-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 13px; }
#camera-view .zoom-pill { padding: 3px; background: rgba(255, 255, 255, .07); }
#camera-view .zoom-opt { padding: 6px 12px; }
#camera-view .shutter-row { min-height: 70px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
#camera-view .flash-btn, #camera-view .flip-btn { width: 42px; height: 42px; }
#camera-view .flip-btn { font-size: 20px; }
#camera-view .top-right-stack .topbar-flash { width: 38px; height: 38px; min-width: 38px; font-size: 7px; }
#camera-view .side-control.right { gap: 10px; }
#camera-view .mini-gallery { width: 42px; height: 42px; }
#camera-view .mini-gallery .stack-img, #camera-view .mini-gallery .stack-empty { width: 38px; height: 38px; }
#camera-view .shutter {
  width: 68px;
  height: 68px;
  box-shadow: 0 0 0 3px var(--paper) inset, 0 0 0 4px rgba(216, 184, 130, .28), 0 10px 28px rgba(0, 0, 0, .30);
}
#camera-view .camera-live-badge {
  position: absolute;
  z-index: 6;
  top: 15px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(7, 7, 8, .44);
  color: rgba(255, 255, 255, .86);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  backdrop-filter: blur(10px);
}
#camera-view .camera-live-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f26d64;
  box-shadow: 0 0 0 4px rgba(242, 109, 100, .14);
  animation: live-pulse 1.8s ease-in-out infinite;
}
#camera-view .film-stamp {
  position: absolute;
  z-index: 6;
  bottom: 13px;
  right: 14px;
  display: grid;
  gap: 2px;
  color: rgba(255, 255, 255, .78);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-align: right;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
#camera-view .film-stamp span:last-child { color: rgba(255, 255, 255, .48); font-size: 7px; }
#camera-view .capture-flash {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: #fff8e9;
}
#camera-view .capture-flash.fire { animation: camera-flash 420ms var(--ease-out); }
#camera-view .capture-preview {
  position: absolute;
  z-index: 9;
  right: 15px;
  bottom: 42px;
  width: 54px;
  height: 68px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(12px) rotate(3deg) scale(.88);
  pointer-events: none;
}
#camera-view .capture-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
#camera-view .capture-preview.show { animation: photo-reveal 1.25s var(--ease-out); }

@keyframes camera-flash { 0%, 100% { opacity: 0; } 18% { opacity: .82; } }
@keyframes photo-reveal { 0% { opacity: 0; transform: translateY(12px) rotate(3deg) scale(.88); } 18%, 72% { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); } 100% { opacity: 0; transform: translateY(-5px) rotate(3deg) scale(.96); } }
@keyframes live-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Keep the viewfinder calm: event context is enough; live status is redundant. */
#camera-view .camera-live-badge { display: none; }

/* Camera states make permission, processing, and recovery feel intentional. */
#camera-view .placeholder-bg[data-state="loading"] { background: radial-gradient(circle at 50% 48%, rgba(216, 184, 130, .16), transparent 30%), #080809; }
#camera-view .camera-state { display: grid; justify-items: center; gap: 10px; max-width: 260px; color: var(--paper-muted); text-align: center; }
#camera-view .camera-state-mark { width: 34px; height: 34px; border: 1px solid rgba(216, 184, 130, .55); border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(216, 184, 130, .08); }
#camera-view .placeholder-bg[data-state="loading"] .camera-state-mark { border-top-color: var(--gold-soft); animation: camera-state-spin 1s linear infinite; }
#camera-view .camera-state strong { color: var(--paper); font-family: var(--font-display); font-size: 20px; font-weight: 500; }
#camera-view .camera-state p { margin: 0; font-size: 12px; line-height: 1.5; }
.camera-retry-btn { margin-top: 4px; padding: 10px 16px; border: 1px solid rgba(216, 184, 130, .50); border-radius: 999px; background: rgba(216, 184, 130, .12); color: var(--gold-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
#camera-view .shutter.is-processing { pointer-events: none; animation: shutter-processing 700ms ease-in-out infinite; }
@keyframes camera-state-spin { to { transform: rotate(360deg); } }
@keyframes shutter-processing { 50% { transform: scale(.91); opacity: .75; } }

/* Theme palette is event-driven through the active event theme. */
:root[data-theme="garden"] { --gold: #a9b887; --gold-soft: #e4ead1; --ink: #10130e; --ink-raised: #1b2118; }
:root[data-theme="modern"] { --gold: #aeb5bd; --gold-soft: #edf0f2; --ink: #101114; --ink-raised: #1a1c20; }
:root[data-theme="luxury"] { --gold: #caa56a; --gold-soft: #f2dfbd; --ink: #090909; --ink-raised: #151310; }

@media (max-height: 700px) {
  #camera-view .control-panel { padding-block: 8px 9px; }
  #camera-view .zoom-row { margin-bottom: 6px; }
  #camera-view .shutter { width: 60px; height: 60px; }
}

/* hadir. Supabase edition overrides */
#welcome-screen { overflow-y: auto; }
#welcome-screen .welcome-copy { margin-top: 14px; }
#welcome-screen .login-card { margin-top: 26px; }
#welcome-screen .login-btn.primary-guest { background: var(--paper); color: #171515; border-color: transparent; }
#welcome-screen .login-btn.primary-guest:hover { background: #fffaf3; color: #171515; }
#welcome-screen .guest-name-input { font-family: var(--font-ui); }
#camera-view .shutter.quota-locked { background: #4a4745; }
#camera-view .shutter.quota-locked:hover { box-shadow: none; }
#camera-view .quota-summary { display: block; }