.moment-section{
  background:
    radial-gradient(circle at top left, rgba(210,187,150,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,253,248,.82), rgba(248,242,232,.95));
}
.moment-panel{max-width:1080px;margin:auto}
.moment-launch-card{
  background:rgba(255,253,248,.92);
  border:1px solid rgba(125,92,58,.14);
  border-radius:34px;
  padding:28px 22px 24px;
  box-shadow:0 18px 48px rgba(71,48,28,.08);
}
.moment-launch-copy{max-width:660px;margin:0 auto 18px;text-align:center}
.moment-launch-copy strong{display:block;margin-bottom:8px;font-family:'Cormorant Garamond',serif;font-size:34px;color:#3f2a18}
.moment-launch-copy p{margin:0;color:#6b6259;line-height:1.7}
.moment-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.moment-button-icon{width:20px;height:20px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.moment-actions .btn{min-height:48px;border-color:rgba(73,46,24,.22);color:#402616;background:#fffdfa}
.moment-actions .btn.primary{background:linear-gradient(135deg,#1d120b,#5a351a 65%,#7c4a22);color:#fff;border-color:transparent}
.moment-refresh{min-width:160px}
.moment-live-count{margin:0 0 14px;text-align:center;color:#8e7866;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.moment-status{min-height:22px;margin:12px 0 22px;text-align:center;color:#656878;font-size:13px;line-height:1.6}
.moment-status.error,.moment-modal-status.error{color:#d25b5b}.moment-status.success,.moment-modal-status.success{color:#78c28d}
.moment-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.moment-card{align-self:start;overflow:hidden;border-radius:26px;background:var(--white);border:1px solid rgba(73,46,24,.12);box-shadow:0 12px 34px rgba(71,48,28,.08)}
.moment-image-wrap{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:var(--moment-aspect,4/5);background:#f1ece4;overflow:hidden}
.moment-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#f1ece4;transform:none;transition:opacity .2s ease}
.moment-card img:not(.is-loaded){opacity:.01}
.moment-card img.is-loaded{opacity:1}
.moment-card:hover img{transform:none}
.moment-owner-badge{position:absolute;top:12px;right:12px;padding:7px 10px;border-radius:999px;background:rgba(38,24,14,.74);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.moment-meta{padding:15px}.moment-meta strong{display:block;color:#402616;font-family:'Cormorant Garamond',serif;font-size:24px;overflow-wrap:anywhere}.moment-meta time{display:block;margin-top:4px;color:#8c7f73;font-size:11px}
.moment-card-actions{display:flex;gap:8px;margin-top:13px}.moment-card-actions .btn{min-height:38px;padding:0 14px;font-size:11px;flex:1;border-color:rgba(73,46,24,.14);color:#4b2f1b}.moment-delete{border-color:#a52b2b!important;color:#a52b2b!important}
.moment-empty{padding:48px 20px;text-align:center;border:1px dashed rgba(73,46,24,.2);border-radius:28px;background:rgba(255,253,248,.58)}.moment-empty span{display:block;font-size:44px}.moment-empty strong{display:block;margin-top:8px;color:#402616;font-family:'Cormorant Garamond',serif;font-size:26px}.moment-empty p{margin:6px 0 0;color:#747787;font-size:13px}

.moment-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:10px;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.moment-modal.open{opacity:1;visibility:visible}
.moment-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
.moment-sheet{position:relative;width:min(980px,100%);max-height:calc(100svh - 20px);overflow:hidden;background:transparent;padding:0;box-shadow:none}
.moment-sheet .modal-close{display:none}
.moment-shell{display:grid;place-items:center;gap:12px;width:100%;height:100%}
.moment-step{width:100%}
.moment-step[hidden],.moment-stage-card [hidden]{display:none!important}

.moment-intro-card{width:min(520px,100%);margin:0 auto;background:#fbf7ef;border:1px solid rgba(155,128,97,.18);border-radius:34px;padding:28px 22px 22px;box-shadow:0 16px 44px rgba(88,64,41,.08);text-align:center}
.moment-monogram{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:22px;background:linear-gradient(180deg,#f3e7d3,#efe1c8);color:#b08a56;border:1px solid rgba(176,138,86,.18);box-shadow:0 8px 18px rgba(176,138,86,.15);font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;letter-spacing:.04em}
.moment-intro-card h2{margin:0;color:#23150d;font-family:'Cormorant Garamond',serif;font-size:clamp(40px,6vw,58px);font-style:italic;line-height:.98}
.moment-intro-copy{margin:10px auto 20px;max-width:340px;color:#7b7269;line-height:1.65}
.moment-field{display:grid;gap:8px;margin-bottom:14px;text-align:left}.moment-field span{color:#9b846a;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.moment-field input{width:100%;height:56px;padding:0 18px;border:1px solid rgba(176,138,86,.24);border-radius:18px;background:#fffdfa;font:inherit;color:#2b1d15;outline:none;text-align:center;font-size:18px}
.moment-field input:focus{border-color:#987349;box-shadow:0 0 0 3px rgba(152,115,73,.12)}
.moment-intro-actions,.moment-intro-actions-secondary{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.moment-intro-actions .btn,.moment-intro-actions-secondary .btn{min-height:48px}.moment-intro-actions .btn.primary{background:linear-gradient(135deg,#1d120b,#5a351a 65%,#7c4a22);color:#fff;border-color:transparent}

/* Clean camera interface */
.moment-stage-card{
  position:relative;
  width:min(430px,100%);
  height:min(860px,calc(100svh - 20px));
  margin:0 auto;
  overflow:hidden;
  border-radius:30px;
  background:#000;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}
.camera-stage{display:grid;grid-template-rows:minmax(0,1fr) clamp(150px,19svh,178px);width:100%;height:100%;background:#000}
.camera-viewport{position:relative;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;background:#000;place-self:center}
.camera-viewport video,.camera-viewport img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#000;
  transform-origin:center;
}
.moment-stage-card.orientation-landscape .camera-viewport{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
  aspect-ratio:4/3;
}
.moment-stage-card.has-photo .camera-viewport{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--preview-aspect,3/4);
}
.moment-stage-card.has-photo .camera-grid{display:none}
.camera-viewport.is-user-camera video,.camera-stage.is-user-camera video{transform:scaleX(-1)}
.camera-placeholder{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:rgba(255,255,255,.68);background:#000}
.camera-placeholder svg{width:50px;height:50px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}

.camera-grid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.52}
.camera-grid span{position:absolute;display:block;background:rgba(255,255,255,.62);box-shadow:0 0 1px rgba(0,0,0,.35)}
.camera-grid-v{top:0;bottom:0;width:1px}.camera-grid-v1{left:33.333%}.camera-grid-v2{left:66.666%}
.camera-grid-h{left:0;right:0;height:1px}.camera-grid-h1{top:33.333%}.camera-grid-h2{top:66.666%}

.moment-stage-top{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,0))}
.moment-icon-button,.moment-ghost-button,.moment-review-button{appearance:none;-webkit-appearance:none;border:0;outline:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.moment-icon-button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(20,20,20,.58);color:#fff;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.moment-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.moment-orientation-button{transition:background .2s ease,transform .2s ease}
.moment-icon-button:disabled,.moment-ghost-button:disabled,.moment-capture-btn:disabled{opacity:.45;cursor:wait}
.moment-orientation-button:active{transform:scale(.94)}
.moment-orientation-frame{display:block;width:13px;height:21px;border:2px solid currentColor;border-radius:3px;transition:transform .22s ease}
.moment-stage-card.orientation-landscape .moment-orientation-frame{transform:rotate(90deg)}

.moment-stage-bottom{position:relative;display:grid;place-items:center;align-content:center;padding:14px 20px max(18px,env(safe-area-inset-bottom));background:#050505}
.moment-modal-status{display:none;margin:0;text-align:center;font-size:12px;line-height:1.45}
.moment-modal-status.error:not(:empty){position:absolute;left:14px;right:14px;top:8px;display:block;padding:7px 10px;border-radius:999px;background:rgba(160,31,31,.84);color:#fff;backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment-camera-controls{display:grid;grid-template-columns:62px 92px 62px;align-items:center;justify-content:center;gap:28px;width:100%}
.moment-ghost-button{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.moment-ghost-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.moment-capture-btn{appearance:none;-webkit-appearance:none;width:88px;height:88px;padding:0;border-radius:50%;display:grid;place-items:center;background:transparent;border:4px solid rgba(255,255,255,.5);cursor:pointer;-webkit-tap-highlight-color:transparent}
.moment-capture-btn span{display:block;width:70px;height:70px;border-radius:50%;background:#fff;transition:transform .12s ease}
.moment-capture-btn:active span{transform:scale(.92)}

.moment-review-panel{display:grid;grid-template-columns:repeat(3,58px);align-items:center;justify-content:center;gap:30px;width:100%}
.moment-review-button{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.1)}
.moment-review-button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.moment-review-button-primary{background:#fff;color:#111}

.moment-card-loading{min-height:320px;border-radius:24px;background:linear-gradient(90deg,rgba(155,173,222,.08),rgba(155,173,222,.2),rgba(155,173,222,.08));background-size:220% 100%;animation:momentShimmer 1.5s infinite}@keyframes momentShimmer{to{background-position:-220% 0}}

@media(max-width:820px){.moment-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .moment-launch-card{padding:22px 14px}
  .moment-gallery{grid-template-columns:1fr}
  .moment-card{border-radius:22px}
  .moment-actions .btn{flex:1 1 42%}
  .moment-refresh{flex-basis:100%!important}

  .moment-modal{padding:0}
  .moment-backdrop{background:#000;backdrop-filter:none}
  .moment-sheet{width:100%;height:100svh;height:100dvh;max-height:none}
  .moment-shell{height:100%}
  .moment-step[data-step="intro"]{padding:14px}
  .moment-step[data-step="stage"]{height:100%}
  .moment-intro-card{padding:24px 16px 18px;border-radius:28px}
  .moment-intro-card h2{font-size:46px}
  .moment-monogram{width:58px;height:58px;font-size:30px;border-radius:18px}
  .moment-intro-actions .btn,.moment-intro-actions-secondary .btn{flex:1 1 calc(50% - 10px)}

  .moment-stage-card{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  .camera-stage{grid-template-rows:minmax(0,1fr) calc(150px + env(safe-area-inset-bottom))}
  .moment-stage-top{padding:max(12px,env(safe-area-inset-top)) 12px 12px}
  .moment-icon-button{width:40px;height:40px}
  .moment-stage-bottom{padding:10px 16px max(14px,env(safe-area-inset-bottom))}
  .moment-camera-controls{grid-template-columns:58px 86px 58px;gap:26px}
  .moment-ghost-button{width:56px;height:56px}
  .moment-capture-btn{width:84px;height:84px}
  .moment-capture-btn span{width:68px;height:68px}
  .moment-review-panel{grid-template-columns:repeat(3,56px);gap:28px}
  .moment-review-button{width:56px;height:56px}
}

@media(max-width:900px) and (orientation:landscape){
  .camera-stage{grid-template-columns:minmax(0,1fr) 132px;grid-template-rows:1fr}
  .moment-stage-card.orientation-landscape .camera-viewport{width:100%;height:auto;max-width:100%;max-height:100%;aspect-ratio:4/3}
  .moment-stage-bottom{padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) 12px}
  .moment-camera-controls{grid-template-columns:1fr;grid-template-rows:56px 84px 56px;gap:12px}
  .moment-review-panel{grid-template-columns:1fr;grid-template-rows:repeat(3,56px);gap:14px}
}


/* Colour-mode compatibility for Moment module */
html[data-theme="dark"] .moment-panel,
html[data-theme="dark"] .moment-launch-card,
html[data-theme="dark"] .moment-card,
html[data-theme="dark"] .moment-empty,
html[data-theme="dark"] .moment-intro-card{background:#171b2c;color:#f8f2e8;border-color:rgba(200,212,255,.16)}
html[data-theme="dark"] .moment-launch-copy strong,
html[data-theme="dark"] .moment-intro-card h2{color:#f8f2e8}
html[data-theme="dark"] .moment-intro-copy,
html[data-theme="dark"] .moment-live-count,
html[data-theme="dark"] .moment-status,
html[data-theme="dark"] .moment-empty p{color:#c5c1bb}
html[data-theme="dark"] .moment-field input{background:#101525;color:#f8f2e8;border-color:rgba(200,212,255,.18)}
.moment-intro-actions-secondary{margin-top:12px}


/* 20260719 hotfix: make Moment section fully theme-aware */
.moment-section{
  background:
    radial-gradient(circle at top left, rgba(210,187,150,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,253,248,.82), rgba(248,242,232,.95));
  color:var(--text-main, #15151a);
  transition:background-color .25s ease,color .25s ease;
}
.moment-section .section-head,
.moment-section .section-head p,
.moment-section .section-head h2{
  transition:color .25s ease;
}
html[data-theme="dark"] .moment-section{
  background:
    radial-gradient(circle at 15% 0%, rgba(142,162,232,.18), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(217,197,143,.10), transparent 30%),
    linear-gradient(180deg, #0f1323 0%, #111525 48%, #0c1020 100%) !important;
  color:#f8f2e8;
}
html[data-theme="dark"] .moment-section .overline{
  color:#d9c58f;
}
html[data-theme="dark"] .moment-section .section-head h2,
html[data-theme="dark"] .moment-section .section-head p:last-child{
  color:#c8d4ff;
}
html[data-theme="dark"] .moment-launch-card,
html[data-theme="dark"] .moment-intro-card,
html[data-theme="dark"] .moment-card,
html[data-theme="dark"] .moment-empty{
  background:linear-gradient(180deg, rgba(23,27,44,.96), rgba(15,19,35,.96)) !important;
  color:#f8f2e8;
  border-color:rgba(200,212,255,.18) !important;
  box-shadow:0 22px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html[data-theme="dark"] .moment-launch-copy strong,
html[data-theme="dark"] .moment-empty strong,
html[data-theme="dark"] .moment-meta strong,
html[data-theme="dark"] .moment-intro-card h2{
  color:#f8f2e8 !important;
}
html[data-theme="dark"] .moment-launch-copy p,
html[data-theme="dark"] .moment-empty p,
html[data-theme="dark"] .moment-live-count,
html[data-theme="dark"] .moment-status,
html[data-theme="dark"] .moment-intro-copy,
html[data-theme="dark"] .moment-meta time{
  color:#c5c1bb !important;
}
html[data-theme="dark"] .moment-actions .btn,
html[data-theme="dark"] .moment-card-actions .btn,
html[data-theme="dark"] .moment-intro-actions .btn,
html[data-theme="dark"] .moment-intro-actions-secondary .btn{
  background:#111525;
  border-color:rgba(200,212,255,.26) !important;
  color:#f8f2e8 !important;
}
html[data-theme="dark"] .moment-actions .btn.primary,
html[data-theme="dark"] .moment-intro-actions .btn.primary{
  background:linear-gradient(135deg, #8ea2e8, #c8d4ff) !important;
  color:#0f1323 !important;
  border-color:transparent !important;
}
html[data-theme="dark"] .moment-image-wrap,
html[data-theme="dark"] .moment-card img{
  background:#0b0f1d !important;
}
html[data-theme="dark"] .moment-owner-badge{
  background:rgba(8,11,20,.78);
  color:#f8f2e8;
  border:1px solid rgba(200,212,255,.18);
}
html[data-theme="dark"] .moment-field span{
  color:#d9c58f;
}
html[data-theme="dark"] .moment-field input{
  background:#0f1323 !important;
  color:#f8f2e8 !important;
  border-color:rgba(200,212,255,.24) !important;
}
html[data-theme="dark"] .moment-field input::placeholder{
  color:rgba(248,242,232,.55);
}
html[data-theme="dark"] .moment-monogram{
  background:linear-gradient(180deg, rgba(200,212,255,.16), rgba(142,162,232,.10));
  color:#d9c58f;
  border-color:rgba(217,197,143,.20);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
html[data-theme="dark"] .moment-card-loading{
  background:linear-gradient(90deg,rgba(200,212,255,.05),rgba(200,212,255,.15),rgba(200,212,255,.05));
  background-size:220% 100%;
}

/* 20260719 v3: uniform dark-mode background alignment
   Keep the Moment area on the same dark canvas as other sections. */
html[data-theme="dark"] .moment-section,
html[data-theme="dark"] section.moment-section,
html[data-theme="dark"] .section.moment-section{
  background:#111525 !important;
  background-image:none !important;
  color:var(--text-main,#f8f2e8) !important;
}
html[data-theme="dark"] .moment-panel{
  background:transparent !important;
}
html[data-theme="dark"] .moment-launch-card,
html[data-theme="dark"] .moment-card,
html[data-theme="dark"] .moment-empty,
html[data-theme="dark"] .moment-intro-card{
  background:var(--surface,#171b2c) !important;
  background-image:none !important;
  border-color:var(--border-soft,rgba(200,212,255,.18)) !important;
  box-shadow:var(--shadow-card,0 24px 80px rgba(0,0,0,.42)) !important;
}
html[data-theme="dark"] .moment-section .section-head h2{
  color:var(--brand-main,#c8d4ff) !important;
}
html[data-theme="dark"] .moment-section .overline{
  color:var(--accent,#d9c58f) !important;
}
html[data-theme="dark"] .moment-section .section-head p:last-child,
html[data-theme="dark"] .moment-launch-copy p,
html[data-theme="dark"] .moment-live-count,
html[data-theme="dark"] .moment-status{
  color:var(--text-muted,#c5c1bb) !important;
}
@media(max-width:720px){
  html[data-theme="dark"] .moment-section{
    background:#111525 !important;
    background-image:none !important;
  }
}


/* Production guard: prevent double-tap duplicate uploads on the Moment tick button */
.moment-review-button.is-uploading {
  pointer-events: none;
  position: relative;
  opacity: .78;
}
.moment-review-button.is-uploading svg {
  opacity: .26;
}
.moment-review-button.is-uploading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: momentUploadSpin .75s linear infinite;
}
.moment-stage-card.is-uploading .moment-review-button:not([data-upload-moment]) {
  opacity: .42;
}
@keyframes momentUploadSpin {
  to { transform: rotate(360deg); }
}