@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
  :root {
  --ink:#4b261c;
  --ink-deep:#331c17;
  --brown:#8b472f;
  --copper:#bf734a;
  --peach:#f7dac5;
  --cream:#fbf5ed;
  --cream-dark:#eee1d2;
  --white:#fffdf9;
  --line:#e8d9cc;
  --font:'DM Sans',Arial,sans-serif;
  --serif:'EB Garamond',Georgia,serif;
}

* {
  box-sizing:border-box
}

html {
  height:100%;
  background:#f1e4d8
}
body {
  margin:0;
  color:var(--ink);
  font-family:var(--font);
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
/* ===== App shell & landing page ===== */
.shell {
  display:flex;
  min-height:100vh;
  justify-content:center;
  align-items:center;
  gap:clamp(38px,6vw,128px);
  background:radial-gradient(circle at 90% 10%,#fae9d8 0,transparent 38%),radial-gradient(circle at 16% 90%,#e3bda1 0,transparent 41%),#f1e6db;
  padding:36px 24px
}
.intro {
  width:min(500px,43vw);
  min-height:670px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:32px 0
}
.intro-top {
  font-size:11px;
  letter-spacing:.25em;
  display:flex;
  align-items:center;
  gap:15px;
  color:#956c58
}
.mini-sun {
  font-size:27px;
  color:#ae603d
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#1f2b4c;
  letter-spacing:-.06em;
  font-size:24px;
  line-height:.85
}
.brand strong {
  display:block;
  font-weight:700;
  letter-spacing:-.06em
}
.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:42px;
  color:#2750b7;
  background:linear-gradient(130deg,#315bda,#5a7de7 52%,#233b88);
  font-size:31px;
  font-weight:900;
  letter-spacing:-.12em;
  border-radius:10px 3px 10px 3px;
  transform:skew(-6deg);
  font-family:var(--font)
}
.brand-big {
  font-size:30px
}
.brand-big .brand-mark {
  width:60px;
  height:56px;
  font-size:39px
}
.eyebrow,.share-kicker {
  display:block;
  letter-spacing:.24em;
  color:#aa6d4a;
  font-size:11px;
  font-weight:700
}
.intro-copy .eyebrow {
  margin-top:53px
}
.intro h1 {
  font:normal clamp(55px,5.3vw,84px)/1.05 var(--serif);
  letter-spacing:-.045em;
  margin:18px 0 22px
}
.intro h1 em {
  font-style:italic;
  color:#b86d48
}
.intro p {
  max-width:380px;
  font-size:16px;
  line-height:1.85;
  color:#805f52
}
.intro-steps {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:36px
}
.intro-steps span {
  font-size:12px;
  padding:12px 14px;
  background:#fff7efb8;
  border:1px solid #ead2bf;
  border-radius:100px
}
.intro-steps b {
  color:#b86e4b;
  margin-right:6px
}
.intro-bottom {
  display:flex;
  gap:14px;
  align-items:center;
  letter-spacing:.01em;
  font-size:12px;
  color:#86695d
}
.intro-bottom strong {
  color:var(--ink)
}
.intro-bottom span:nth-child(2) {
  font-size:23px;
  color:#c58d68
}

/* ===== Phone frame ===== */
.phone {
  position:relative;
  isolation:isolate;
  width:min(100%,420px);
  height:min(860px,calc(100dvh - 36px));
  min-height:680px;
  flex-shrink:0;
  background:var(--cream);
  border:8px solid #282323;
  border-radius:47px;
  box-shadow:0 35px 75px #50332530,0 0 0 2px #beb2a5;
  overflow:hidden
}
.phone:before {
  content:'';
  position:absolute;
  top:8px;
  left:calc(50% - 46px);
  z-index:12;
  width:92px;
  height:22px;
  background:#292422;
  border-radius:0 0 17px 17px;
  opacity:.97
}
.phone:after {
  content:'';
  position:absolute;
  bottom:6px;
  left:calc(50% - 43px);
  width:86px;
  height:4px;
  background:#4d4038;
  border-radius:99px;
  z-index:15
}
.screen {
  display:none;
  position:absolute;
  inset:0;
  overflow-y:auto;
  scrollbar-width:none;
  background:var(--cream);
  padding-bottom:27px
}
.screen::-webkit-scrollbar {
  display:none
}
.screen.active {
  display:block
}
.home {
  background:#fff9f3;
  background-image:radial-gradient(#eecdb65c 0.75px,transparent .75px);
  background-size:11px 11px
}
.home-heading {
  height:78px;
  display:flex;
  align-items:end;
  padding:0 22px 8px;
  justify-content:space-between;
  position:relative;
  z-index:2
}
.home-top-title {
  font-size:10px;
  letter-spacing:.23em;
  color:#9a735e;
  font-weight:700;
  padding-bottom:14px
}
.icon-button {
  border:0;
  background:none;
  color:var(--ink);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:37px;
  height:37px
}
.icon-button svg {
  height:27px;
  width:27px
}
.home-visual {
  margin-top: 20px;
  height:clamp(210px,33%,278px);
  position:relative;
  overflow:hidden
}
.arch {
  position:absolute;
  width:72%;
  left:14%;
  top:26px;
  height:300px;
  border:2px solid #dba674aa;
  border-radius:48% 48% 0 0;
  pointer-events:none
}
.couple-photo {
  position:absolute;
  bottom:-18px;
  left:10%;
  width:80%;
  height:112%;
  object-fit:cover;
  object-position:50% 34%;
  border-radius:45% 45% 0 0;
  mask-image:linear-gradient(#000 0%,#000 65%,transparent 98%);
  -webkit-mask-image:linear-gradient(#000 0%,#000 65%,transparent 98%)
}
.floral {
  position:absolute;
  font-family:Georgia,serif;
  font-size:48px;
  line-height:1;
  color:#cea86d;
  z-index:1;
  top:45px;
  pointer-events:none;
  text-shadow:2px 4px 12px #fff9
}
.floral span {
  display:block;
  color:#d79680;
  font-size:31px;
  margin-left:34px
}
.floral-left {
  left:0;
  transform:rotate(-27deg)
}
.floral-right {
  right:8px;
  transform:rotate(30deg)
}
.home-copy {
  position:relative;
  text-align:center;
  z-index:2;
  margin:-4px 16px 0
}
.small-divider {
  color:#d69b66;
  font-size:19px;
  height:24px
}
.script-pretitle {
  font-size:15px;
  margin:0 0 3px
}
.home-copy h2 {
  font:normal 33px/1.04 var(--serif);
  letter-spacing:-.035em;
  margin:0;
  color:#4b261c
}
.home-copy h2 span {
  font-style:italic;
  color:#bd7448
}
.wedding-date {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  font-size:13px;
  margin:14px 0 10px;
  color:#563228;
  font-weight:600
}
.wedding-date svg {
  height:17px;
  width:17px
}
.home-description {
  font-size:11px;
  line-height:1.6;
  color:#98796b;
  max-width:280px;
  margin:0 auto 18px
}
.home-actions {
  margin:0 22px;
  display:grid;
  gap:11px
}
.button {
  border:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:15px;
  min-height:58px;
  padding:11px 20px;
  font-weight:700;
  font-size:15px;
  box-shadow:0 3px 6px #774a2717
}
.button svg {
  width:28px;
  height:28px
}
.button .small-arrow {
  height:19px;
  width:19px;
  margin-left:auto
}
.button-primary {
  background:linear-gradient(105deg,#a35e3c,#72351f);
  color:#fff
}
.button-secondary {
  background:#fffaf6;
  border:1px solid #e9d6c9;
  color:var(--ink)
}
.home-footer {
  margin:12px auto 18px;
  text-align:center;
  color:#d89e69
}
.roof-ornament {
  font-family:Georgia;
  font-size:38px;
  line-height:1
}
.home-footer span {
  font-size:9px;
  letter-spacing:.23em;
  color:#a67961
}
.bottom-brand {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:6px;
  align-items:center;
  font-size:9px;
  white-space:nowrap;
  color:#b4a096;
  pointer-events:none;
  bottom: 30px!important

}
.bottom-brand .brand-mark {
  height:16px;
  width:18px;
  border-radius:3px;
  font-size:11px;
}
.bottom-brand b {
  color:#9a6652
}
/* ===== Camera ===== */
.camera-screen {
  background:#100f0d;
  color:white;
  padding-bottom:0
}
.camera-top {
  height:90px;
  padding:40px 16px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#101010
}
.camera-icon {
  border:0;
  color:#fff;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px
}
.camera-label {
  font-size:12px;
  letter-spacing:.06em;
  color:#e6ded5
}
.viewfinder {
  position:relative;
  height:49%;
  background:#26211a;
  overflow:hidden
}
.viewfinder video,.camera-placeholder,.camera-placeholder img {
  width:100%;
  height:100%;
  object-fit:cover
}
.viewfinder video {
  position:absolute;
  inset:0;
  z-index:1;
  display:none
}
.camera-placeholder {
  position:absolute;
  inset:0
}
.camera-placeholder img {
  opacity:.88
}
.permission-tip {
  position:absolute;
  bottom:25px;
  left:25px;
  right:25px;
  text-align:center;
  background:#000a;
  color:white;
  border:1px solid #fff4;
  border-radius:10px;
  padding:10px;
  font-size:13px
}
.permission-tip small {
  font-size:10px;
  color:#ddd
}
.viewfinder-outline {
  position:absolute;
  inset:17px;
  pointer-events:none;
  z-index:3
}
.viewfinder-outline span {
  position:absolute;
  width:23px;
  height:23px;
  border-color:#fff9;
  border-style:solid
}
.viewfinder-outline span:nth-child(1) {
  top:0;
  left:0;
  border-width:2px 0 0 2px
}
.viewfinder-outline span:nth-child(2) {
  top:0;
  right:0;
  border-width:2px 2px 0 0
}
.viewfinder-outline span:nth-child(3) {
  bottom:0;
  left:0;
  border-width:0 0 2px 2px
}
.viewfinder-outline span:nth-child(4) {
  bottom:0;
  right:0;
  border-width:0 2px 2px 0
}
.record-indicator {
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  background:#b62327;
  color:#fff;
  border-radius:30px;
  padding:7px 14px;
  z-index:4;
  font-size:12px;
  font-weight:700
}
.record-indicator[hidden] {
  display:none
}
.camera-panel {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:calc(51% - 90px);
  min-height:250px;
  padding:13px 15px 26px;
  background:linear-gradient(#151414,#0c0c0c)
}
.filter-carousel {
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  justify-content:space-between
}
.filter-carousel::-webkit-scrollbar {
  display:none
}
.filter-option {
  min-width:58px;
  background:none;
  border:0;
  color:#f5e9e3;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:6px;
  padding:0
}
.filter-image {
  width:55px;
  height:49px;
  display:block;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:10px
}
.filter-option.selected .filter-image {
  border-color:#fff
}
.filter-option img {
  width:100%;
  height:100%;
  object-fit:cover
}
.filter-option small {
  font-size:10px
}
.filter-option.selected small {
  font-weight:700
}
.filter-option[data-filter=warm] img {
  filter:sepia(.38) saturate(1.32) brightness(1.07)
}
.filter-option[data-filter=bright] img {
  filter:brightness(1.3) saturate(1.07)
}
.filter-option[data-filter=soft] img {
  filter:brightness(1.13) contrast(.82) saturate(.8)
}
.filter-option[data-filter=film] img {
  filter:sepia(.38) contrast(1.2) saturate(.62)
}
.mode-switch {
  margin:13px auto 0;
  display:flex;
  gap:7px
}
.mode-switch button {
  background:transparent;
  border:0;
  color:#e6e3e0;
  padding:7px 20px;
  border-radius:30px;
  font-size:12px
}
.mode-switch button.active {
  background:#f7e4d8;
  color:#3e2119;
  font-weight:700
}
.framing-tools {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin:8px auto 0;
  color:#d8c8bf
}
.framing-tools[hidden] {
  display:none
}
.framing-templates {
  display:flex;
  gap:6px;
}
.framing-templates button {
  border:1px solid #80665a;
  background:transparent;
  color:#e9ded8;
  border-radius:999px;
  padding:5px 10px;
  font-size:10px;
}
.framing-templates button.active {
  background:#f7e4d8;
  border-color:#f7e4d8;
  color:#3e2119;
  font-weight:700;
}
.framing-tools small {
  font-size:9px;
}
.shutter-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 23px
}
.thumbnail-button {
  width:48px;
  height:48px;
  border:1px solid #fff7;
  border-radius:10px;
  overflow:hidden;
  padding:0;
  background:none
}
.thumbnail-button img {
  width:100%;
  height:100%;
  object-fit:cover
}
.shutter {
  height:71px;
  width:71px;
  border:4px solid #fff;
  background:transparent;
  border-radius:50%;
  padding:5px;
  display:grid;
  place-items:center
}
.shutter span {
  background:#fff;
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
  transition:.2s
}
.shutter.recording span {
  background:#e43a40;
  border-radius:12px;
  transform:scale(.65)
}
.camera-note {
  text-align:center;
  font-size:10px;
  color:#b2a49b;
  margin:0 0 7px
}

/* Native-camera-like view: keep the full sensor image visible and reveal effects on demand. */
.camera-screen.active {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.camera-top-actions {
  display:flex;
  align-items:center;
  gap:4px;
}
.effect-toggle {
  color:#f7e4d8;
  font-size:25px;
  line-height:1;
}
.camera-screen .viewfinder {
  flex:1 1 auto;
  min-height:0;
  height:auto;
}
.camera-screen .viewfinder video,
.camera-screen .camera-placeholder,
.camera-screen .camera-placeholder img {
  object-fit:contain;
  background:#050505;
}
.camera-screen .camera-panel {
  flex:0 0 246px;
  height:auto;
  min-height:0;
  padding-top:10px;
}
.camera-screen .filter-carousel {
  display:none;
  justify-content:flex-start!important;
}
.camera-screen.effects-open .filter-carousel {
  display:flex;
}
.camera-screen.effects-open .camera-panel {
  flex-basis:320px;
}
.camera-screen .face-ar-overlay {
  pointer-events:none;
}
@media(max-width:390px) {
  .camera-screen .camera-panel {
    flex-basis:224px;
    padding-left:10px;
    padding-right:10px;
  }
  .camera-screen.effects-open .camera-panel {
    flex-basis:300px;
  }
  .camera-screen .shutter {
    width:64px;
    height:64px;
  }
}
/* ===== Album ===== */
.album-screen {
  background:#fbf7f3
}
.album-head,.simple-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:46px 19px 12px
}
.album-head h2,.simple-head h2 {
  margin:0;
  font:normal 22px var(--serif);
  display:flex;
  gap:8px;
  align-items:center
}
.album-title-icon {
  font-size:26px;
  color:#8b4831
}
.album-tabs {
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 19px 18px
}
.album-tabs button:not(.layout-button) {
  border-radius:30px;
  padding:9px 16px;
  background:#fff9f5;
  border:1px solid #ecddd2;
  color:#6b4637;
  font-size:12px
}
.album-tabs button.active {
  background:linear-gradient(125deg,#a15e3d,#6e331f);
  border-color:#9b5b3c;
  color:white;
  font-weight:700
}
.tabs-spacer {
  flex:1
}
.album-tabs .layout-button {
  border:0;
  background:none;
  color:#723c2a;
  padding:5px
}
.album-tabs .layout-button svg {
  height:21px
}
.album-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 22px 13px
}
.album-meta strong {
  font-size:15px;
  display:block
}
.album-meta small {
  display:block;
  font-size:11px;
  color:#977e72;
  margin-top:4px
}
.album-upload {
  border:0;
  background:none;
  color:#81452f
}
.album-upload svg {
  height:28px;
  width:28px
}
.mode-notice {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 21px 14px;
  padding:9px 11px;
  border-radius:10px;
  background:#f3e6d9;
  color:#8d614d;
  font-size:10px;
  line-height:1.4
}
.notice-dot {
  background:#b37752;
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:0 19px
}
.gallery-grid.list-layout {
  grid-template-columns:1fr
}
.gallery-card {
  position:relative;
  border:0;
  padding:0;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:12px;
  background:#e7d8c9;
  text-align:left;
  color:#fff
}
.gallery-grid.list-layout .gallery-card {
  aspect-ratio:2.6/1
}
.gallery-card img,.gallery-card video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s
}
.gallery-card:hover img {
  transform:scale(1.04)
}
.gallery-card .play-overlay {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid #fff9;
  border-radius:50%;
  background:#0005;
  width:38px;
  height:38px;
  display:grid;
  place-items:center
}
.play-overlay svg {
  width:17px;
  height:17px;
  fill:white
}
.sample-tag {
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 6px;
  background:#462b20b8;
  color:#fff;
  border-radius:5px;
  font-size:9px;
  letter-spacing:.04em
}
.gallery-card .guest-tag {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:22px 9px 8px;
  background:linear-gradient(transparent,#0008);
  font-size:11px;
  font-weight:700
}
.album-spacer {
  height:95px
}
.fab {
  position:sticky;
  bottom:23px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:white;
  border:0;
  border-radius:100px;
  box-shadow:0 8px 20px #37201938;
  padding:13px 20px;
  font-size:12px;
  font-weight:700
}
.fab svg {
  height:19px;
  width:19px
}
.empty-gallery {
  grid-column:1/-1;
  text-align:center;
  border:1px dashed #dfc3b0;
  border-radius:16px;
  background:#fffaf6;
  padding:36px 15px;
  color:#8b6b59
}
.empty-gallery .emoji {
  font-size:38px;
  display:block;
  margin-bottom:14px
}
.empty-gallery .empty-icon {
  width:42px;
  height:42px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  color:#a7785c;
  border:1px solid #dcbda7;
  border-radius:12px;
  background:#fffaf5
}
.empty-gallery .empty-icon svg {
  width:24px;
  height:24px
}
.empty-gallery strong {
  font:22px var(--serif);
  color:var(--ink)
}
.empty-gallery p {
  font-size:12px;
  line-height:1.7
}
/* ===== Share screen & overlays ===== */
.share-screen {
  background:radial-gradient(circle at 90% 20%,#f5d7c2 0,transparent 30%),#fff8f1
}
.share-body {
  text-align:center;
  padding:28px 27px 40px
}
.share-kicker {
  font-size:10px
}
.share-body h2 {
  font:normal 40px var(--serif);
  margin:12px 0 8px
}
.share-body>p {
  font-size:12px;
  line-height:1.7;
  color:#927362;
  margin:0 auto 23px;
  max-width:280px
}
.qr-frame {
  width:250px;
  height:250px;
  margin:auto;
  padding:16px;
  background:#fff;
  border:6px solid #c28f6d;
  border-radius:23px;
  box-shadow:0 15px 28px #805a4126;
  display:grid;
  place-items:center
}
.qr-frame img {
  width:100%;
  height:100%;
  object-fit:contain
}
.qr-fallback {
  font-size:12px;
  line-height:1.6;
  color:#967362
}
.share-body .share-url {
  margin:20px auto 23px;
  color:#985c3e;
  background:#f1e1d5;
  border-radius:8px;
  padding:10px;
  max-width:300px;
  word-break:break-all;
  font-size:10px
}
.share-body .button {
  margin:0 auto 10px;
  width:100%;
  max-width:340px;
  min-height:52px
}
.share-footnote {
  font-size:10px!important;
  margin-top:19px!important
}
.simple-head>span {
  width:37px
}

.overlay {
  position:fixed;
  inset:0;
  z-index:40;
  background:#1b100d99;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(6px)
}
.overlay[hidden] {
  display:none
}
.dialog {
  position:relative;
  width:min(100%,395px);
  background:#fffaf5;
  border-radius:25px;
  padding:30px;
  box-shadow:0 25px 60px #0003;
  color:var(--ink)
}
.dialog-close {
  position:absolute;
  right:19px;
  top:17px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  background:none;
  color:var(--ink)
}
.dialog-close svg {
  width:19px
}
.dialog h3 {
  font:normal 28px var(--serif);
  margin:20px 0 13px
}
.menu-dialog>button[data-go] {
  width:100%;
  border:0;
  border-bottom:1px solid #e8d9cc;
  background:none;
  text-align:left;
  display:flex;
  justify-content:space-between;
  color:var(--ink);
  font-size:14px;
  padding:15px 0
}
.menu-dialog>button[data-go] span {
  font-size:22px;
  color:#bd805c
}
.menu-dialog>small {
  display:block;
  margin-top:22px;
  color:#93796c;
  font-size:11px
}
.modal-emoji {
  font-size:30px;
  color:#bf7f56
}
.upload-dialog h3 {
  margin:9px 0 6px
}
.upload-dialog p {
  font-size:12px;
  line-height:1.6;
  color:#886e62;
  margin:0 0 16px
}
.upload-dialog label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin:11px 0 7px
}
.upload-dialog input {
  width:100%;
  border:1px solid #ddcabb;
  padding:12px;
  border-radius:10px;
  background:white;
  font-size:13px
}
.upload-dialog input[type=file] {
  font-size:11px
}
.upload-dialog .file-hint {
  font-size:10px;
  color:#9a8073;
  display:block;
  line-height:1.5;
  margin:7px 0 19px
}
.upload-dialog .button {
  width:100%;
  justify-content:center;
  min-height:48px
}
.upload-dialog .upload-status {
  margin:10px 0 0;
  color:#6a8a48;
  font-size:11px
}
.preview-overlay {
  background:#080606ed
}
.preview-dialog {
  position:relative;
  width:min(92vw,760px);
  height:min(92vh,820px);
  max-height:92vh;
  min-height:0;
  padding:0 12px 12px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px
}
.preview-close {
  align-self:end;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border:0;
  background:none;
  color:#fff;
  padding:0
}
.preview-media {
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.preview-media img,.preview-media video {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:13px
}
.preview-actions {
  flex:0 0 auto;
  min-height:52px;
  padding:0 8px;
  color:white;
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:space-between
}
.preview-actions strong {
  display:block;
  font-size:14px
}
.preview-actions small {
  font-size:11px;
  color:#cdbdb1
}
.preview-action-button {
  background:#fff3;
  border:0;
  border-radius:50%;
  width:43px;
  height:43px;
  color:white;
  display:grid;
  place-items:center
}
.preview-actions .save-shot {
  min-height:43px;
  border-radius:12px;
  font-size:12px;
  padding:10px 18px
}
.preview-actions .save-shot[hidden] {
  display:none
}
.toast {
  position:fixed;
  z-index:100;
  bottom:30px;
  left:50%;
  transform:translate(-50%,20px);
  background:#412720;
  color:white;
  border-radius:12px;
  padding:12px 18px;
  max-width:min(92vw,440px);
  font-size:12px;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 14px 30px #35211645
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0);
  margin-top:100px;
}

/* ===== Responsive layout ===== */
@media(max-width:860px) {
  .intro {
  display:none
}
.shell {
  min-height:100dvh;
  padding:0;
  background:var(--cream)
}
.phone {
  width:100%;
  max-width:none;
  height:100dvh;
  min-height:0;
  border:0;
  border-radius:0;
  box-shadow:none
}
.phone:before,.phone:after {
  display:none
}
.home-heading {
  padding-top:env(safe-area-inset-top)
}
.album-head,.simple-head {
  padding-top:max(30px,env(safe-area-inset-top))
}
.camera-top {
  padding-top:max(22px,env(safe-area-inset-top))
}
.camera-panel {
  padding-bottom:max(22px,env(safe-area-inset-bottom))
}
.screen {
  padding-bottom:max(24px,env(safe-area-inset-bottom))
}
.home-visual {
  height:clamp(210px,36vh,370px)
}
.home-copy h2 {
  font-size:clamp(30px,8vw,39px)
}
.home-actions {
  max-width:420px;
  margin:auto;
  padding:0 20px
}
.home-footer {
  margin-top:16px
}
.bottom-brand {
  bottom:10px
}
.album-spacer {
  height:100px
}

}

@media(max-width:375px) {
  .home-visual {
  height:29vh;
  min-height:170px
}
.home-heading {
  height:57px
}
.home-copy h2 {
  font-size:30px
}
.home-description {
  margin-bottom:10px
}
.button {
  min-height:52px
}
.camera-panel {
  padding-left:6px;
  padding-right:6px
}
.filter-option {
  min-width:52px
}
.filter-image {
  width:49px;
  height:46px
}
.album-tabs {
  padding-left:10px;
  padding-right:10px
}
.album-tabs button:not(.layout-button) {
  padding:8px 12px
}

}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important
}

}

:root {
  --filter-beauty:brightness(1.08) contrast(.88) saturate(1.08) blur(.35px)
}

.album-head,.simple-head {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(251,247,243,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 5px 14px rgba(91,55,36,.08)
}

.filter-carousel {
  justify-content:flex-start!important;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  cursor:grab;
  padding-bottom:5px
}
.filter-carousel.dragging {
  cursor:grabbing;
  user-select:none
}
.filter-option {
  flex:0 0 58px;
  scroll-snap-align:start
}

.shell {
  min-height:100dvh
}

@media(min-width:861px) {
  html,body {
  height:100%;
  overflow:hidden
}
.shell {
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding:24px 32px;
  align-items:center
}
.intro {
  height:min(100%,720px);
  min-height:0;
  padding:24px 0
}
.phone {
  width:min(390px,34vw,calc((100dvh - 48px)*.462));
  height:min(844px,calc(100dvh - 48px));
  min-height:0;
  aspect-ratio:390/844;
  border-width:8px;
  border-radius:43px
}
.phone:before {
  top:8px;
  width:92px;
  height:23px;
  border-radius:0 0 18px 18px
}
.phone:after {
  bottom:6px
}

}

@media(min-width:861px) {
  .phone .home-heading {
  height:58px;
  padding:0 15px 5px
}
.phone .home-top-title {
  font-size:8px;
  padding-bottom:10px
}
.phone .home-visual {
  height:30%
}
.phone .home-copy {
  margin:-2px 13px 0
}
.phone .small-divider {
  height:14px;
  font-size:14px
}
.phone .script-pretitle {
  font-size:11px;
  margin-bottom:1px
}
.phone .home-copy h2 {
  font-size:clamp(23px,2.35vw,31px)
}
.phone .wedding-date {
  font-size:10px;
  margin:7px 0 5px
}
.phone .home-description {
  font-size:8px;
  line-height:1.35;
  max-width:245px;
  margin-bottom:9px
}
.phone .home-actions {
  margin:0 13px;
  gap:7px
}
.phone .button {
  min-height:45px;
  padding:8px 13px;
  font-size:11px;
  gap:9px
}
.phone .button svg {
  width:21px;
  height:21px
}
.phone .button .small-arrow {
  height:16px;
  width:16px
}
.phone .home-footer {
  margin:7px auto 10px
}
.phone .roof-ornament {
  font-size:26px
}
.phone .home-footer span {
  font-size:7px
}

}

@media(max-width:860px) and (max-height:700px) {
  .home-heading {
  height:58px
}
.home-visual {
  height:28vh;
  min-height:165px
}
.home-copy {
  margin:-2px 14px 0
}
.small-divider {
  height:14px;
  font-size:14px
}
.script-pretitle {
  font-size:12px;
  margin-bottom:1px
}
.home-copy h2 {
  font-size:clamp(25px,7vw,32px)
}
.wedding-date {
  font-size:11px;
  margin:7px 0 5px
}
.home-description {
  font-size:9px;
  line-height:1.4;
  margin-bottom:9px
}
.home-actions {
  gap:7px
}
.home-actions .button {
  min-height:46px;
  padding:8px 15px;
  font-size:12px
}
.home-actions .button svg {
  width:22px;
  height:22px
}
.home-footer {
  margin:7px auto 10px
}
.roof-ornament {
  font-size:28px
}
.home-footer span {
  font-size:7px
}

}

.intro h1,.home-copy h2,.share-body h2,.album-head h2,.simple-head h2 {
  font-family:var(--serif)
}

@media(max-width:860px) {
  .home-heading {
  height:66px;
  align-items:center;
  padding:env(safe-area-inset-top) 18px 0
}
.home-top-title {
  padding:0;
  font-size:9px;
  letter-spacing:.2em
}
.home-visual {
  height:clamp(230px,34vh,330px)
}
.couple-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 23%
}
.home-copy {
  margin:-6px 20px 0;
  padding:0 12px
}
.home-copy h2 {
  font-size:clamp(31px,9vw,40px);
  line-height:.94;
  letter-spacing:-.045em
}
.script-pretitle {
  font-size:13px;
  letter-spacing:.08em
}
.wedding-date {
  margin:11px 0 8px
}
.home-description {
  max-width:300px;
  margin-bottom:17px
}
.home-actions {
  padding:0 18px;
  gap:9px
}
.home-actions .button {
  min-height:53px;
  border-radius:13px
}
.home-footer {
  margin:12px auto 18px
}

}

@media(min-width:861px) {
  .phone .couple-photo {
  object-fit:cover;
  object-position:center 23%
}
.phone .home-copy h2 {
  font-family:var(--serif);
  font-size:clamp(25px,2.6vw,34px)
}

}

@media(max-width:860px) and (max-height:700px) {
  .home-visual {
  height:clamp(185px,28vh,235px)
}
.home-copy {
  margin:-3px 14px 0;
  padding:0 7px
}
.home-copy h2 {
  font-size:clamp(27px,8vw,34px)
}
.home-description {
  font-size:9px;
  line-height:1.35;
  margin-bottom:10px
}
.home-actions {
  padding:0 14px;
  gap:7px
}
.home-actions .button {
  min-height:46px;
  padding:8px 14px;
  font-size:12px
}
.home-footer {
  margin:7px auto 10px
}

}

/* ===== Wedding visual theme overrides ===== */
.home.active ~ #bottom-brand {
  display:flex;
  bottom:34px
}
.home-footer {
  position:relative;
  z-index:3;
  padding-bottom:8px;
  margin-bottom:38px
}
.phone .couple-photo,.couple-photo {
  object-fit:contain;
  object-position:center bottom
}
.bottom-brand {
  bottom:20px;
  z-index:14;
  line-height:1.2
}
.shell {
  justify-content:center
}
.phone {
  align-self:center
}

@media(max-width:860px) {
  .home-visual .couple-photo {
  margin-top:20px;
  height:calc(100% - 20px)
}

}

.home {
  background-color:#f8efdf;
  background-image:url('./assets/xbanner/xbanner-top-ornament.png'),url('./assets/xbanner/xbanner-bottom-ornament.png'),url('./assets/xbanner/xbanner-background.png');
  background-position:top center,bottom center,center;
  background-repeat:no-repeat;
  background-size:100% auto,100% auto,cover;
  background-attachment:scroll
}
.home-heading {
  background:linear-gradient(#f8efdfcc,transparent)
}
.home-top-title {
  color:#8f623d
}
.home-visual {
  height:clamp(285px,38%,370px)
}
.home-visual .arch,.home-visual .floral {
  display:none
}
.couple-photo {
  position:relative;
  inset:auto;
  display:block;
  width:94%;
  height:100%;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  mask-image:none;
  -webkit-mask-image:none
}
.home-copy {
  margin:-2px 22px 0
}
.small-divider {
  color:#9b683d
}
.script-pretitle {
  font-family:Georgia,serif;
  color:#7d5637
}
.home-copy h2 {
  color:#3d2418
}
.home-copy h2 span {
  color:#a66c3b
}
.home-description {
  color:#795c45
}
.home-actions .button-primary {
  background:linear-gradient(105deg,#6a3b24,#3b2116);
  border:1px solid #a87545
}
.home-actions .button-secondary {
  background:#fffaf0e8;
  border-color:#c89b63
}
.home-footer {
  color:#9e6b3c
}
.home-footer span {
  color:#7d5a3f
}

.filter-option[data-filter=flower] img,.filter-option[data-filter=veil] img,.filter-option[data-filter=bowtie] img {
  filter:saturate(1.22) brightness(1.08)
}
.face-ar-overlay[data-ar=flower] strong {
  font-size:1em
}
.face-ar-overlay[data-ar=flower] .ar-left,.face-ar-overlay[data-ar=flower] .ar-right {
  color:#ffd36e
}
.face-ar-overlay[data-ar=veil] {
  color:#fff5f0;
  text-shadow:0 2px 9px #000a
}
.face-ar-overlay[data-ar=veil] strong {
  font-size:1.35em;
  color:#fff
}
.face-ar-overlay[data-ar=veil] .ar-left,.face-ar-overlay[data-ar=veil] .ar-right {
  top:47%;
  font-size:.8em
}
.face-ar-overlay[data-ar=bowtie] {
  color:#e95d68
}
.face-ar-overlay[data-ar=bowtie] strong {
  top:60%;
  font-size:1.05em;
  color:#d83d4d
}
.face-ar-overlay[data-ar=bowtie] .ar-left,.face-ar-overlay[data-ar=bowtie] .ar-right {
  display:none
}

.filter-option[data-filter=beauty] img {
  filter:var(--filter-beauty)
}
.filter-option[data-filter=glow] img {
  filter:brightness(1.16) saturate(1.22) contrast(.92)
}
.filter-option[data-filter=peach] img {
  filter:sepia(.18) hue-rotate(-8deg) saturate(1.35) brightness(1.08)
}
.filter-option[data-filter=mono] img {
  filter:grayscale(1) contrast(1.12)
}
.filter-option[data-filter=hearts] img,.filter-option[data-filter=crown] img {
  filter:saturate(1.25) brightness(1.08)
}

.face-ar-overlay {
  display:none;
  position:absolute;
  z-index:4;
  left:50%;
  top:35%;
  width:30%;
  aspect-ratio:1.1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  color:#ffb4c8;
  text-shadow:0 2px 8px #0008;
  font-family:Georgia,serif;
  font-size:clamp(26px,8vw,58px)
}
.face-ar-overlay.active {
  display:block
}
.face-ar-overlay .ar-left,.face-ar-overlay .ar-right {
  position:absolute;
  top:34%;
  font-size:.55em
}
.face-ar-overlay .ar-left {
  left:0;
  transform:rotate(-18deg)
}
.face-ar-overlay .ar-right {
  right:0;
  transform:rotate(18deg)
}
.face-ar-overlay strong {
  position:absolute;
  left:50%;
  top:-20%;
  transform:translateX(-50%);
  font-size:.8em;
  color:#ffe5a4
}
.face-ar-overlay[data-ar=crown] strong {
  font-size:1.15em;
  color:#ffd36e
}
.face-ar-overlay[data-ar=crown] .ar-left,.face-ar-overlay[data-ar=crown] .ar-right {
  color:#fff0a8
}
.camera-note.ar-note {
  color:#ffd8c5
}

@media(max-width:860px) {
.home.active {
  min-height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  padding-bottom:0
}

/* ===== Fixed album chrome, scrollable gallery only ===== */
.album-screen.active {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  position:relative;
}
.album-screen .album-head,
.album-screen .album-tabs,
.album-screen .album-meta,
.album-screen .mode-notice,
.album-screen .fab {
  flex:0 0 auto;
}
.album-screen .gallery-grid {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  padding-bottom:104px;
}
.album-screen .album-spacer {
  display:none;
}
.album-screen .fab {
  position:absolute;
  left:50%;
  bottom:58px;
  z-index:12;
  transform:translateX(-50%);
  margin:0;
}
.home-heading {
  flex:0 0 auto
}
.home-visual {
  height:clamp(250px,32vh,320px);
  flex:0 0 auto
}
.home-copy {
  flex:0 0 auto
}
.home-actions {
  flex:0 0 auto
}
.home-footer {
  margin-top:auto;
  margin-bottom:54px;
  padding-bottom:0
}
.bottom-brand {
  bottom:30px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  line-height:1.2
}

}

@media(max-width:520px) {
  .preview-overlay {
    padding:12px
  }
  .preview-dialog {
    width:100%;
    height:100%;
    padding:0 4px 8px;
    gap:8px
  }
  .preview-actions {
    gap:8px;
    padding:0 4px
  }
  .preview-actions > div:first-child {
    min-width:0;
    flex:1 1 auto
  }
  .preview-actions strong,.preview-actions small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .preview-action-button {
    flex:0 0 43px
  }
  .preview-actions .save-shot {
    flex:0 0 auto;
    padding:10px 13px
  }
}

/* Mobile landing stays inside one viewport; only album/camera content may scroll. */
@media(max-width:860px) {
  html,
  body {
    width:100%;
    height:100%;
    overflow:hidden;
  }

  .shell {
    width:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  .phone {
    width:100%;
    height:100dvh;
    min-height:0;
    max-height:100dvh;
  }

  .screen.home.active {
    height:100%;
    min-height:0;
    max-height:100%;
    overflow:hidden;
  }
}

/* Compact phones such as iPhone SE: keep the complete landing composition visible. */
@media(max-width:860px) and (max-height:700px) {
  .screen.home.active {
    height:100%;
  }

  .home-heading {
    height:54px;
    padding-bottom:4px;
  }

  .home-visual {
    height:clamp(175px,28vh,205px);
    min-height:0;
    margin-top:12px;
  }

  .home-visual .couple-photo {
    margin-top:14px;
    height:calc(100% - 14px);
  }

  .home-copy {
    margin:-2px 14px 0;
  }

  .small-divider {
    height:16px;
    font-size:15px;
  }

  .script-pretitle {
    font-size:13px;
    margin:0 0 2px;
  }

  .home-copy h2 {
    font-size:28px;
    line-height:1;
  }

  .wedding-date {
    font-size:11px;
    margin:8px 0 5px;
  }

  .wedding-date svg {
    width:15px;
    height:15px;
  }

  .home-description {
    font-size:10px;
    line-height:1.35;
    max-width:260px;
    margin-bottom:10px;
  }

  .home-actions {
    gap:8px;
    padding:0 16px;
  }

  .home-actions .button {
    min-height:47px;
    padding:8px 15px;
    border-radius:15px;
    font-size:13px;
  }

  .home-actions .button svg {
    width:23px;
    height:23px;
  }

  .home-footer {
    margin-top:auto;
    margin-bottom:44px;
  }

  .roof-ornament {
    font-size:28px;
  }

  .home-footer span {
    font-size:8px;
  }

  .bottom-brand {
    bottom:24px !important;
  }
}

/* Keep the phone frame readable when a desktop viewport gets narrow. */
@media(min-width:861px) and (max-width:1180px) {
  .shell {
    gap:0;
    padding:24px
  }
  .intro {
    display:none
  }
  .phone {
    width:min(390px,calc(100vw - 48px));
    height:min(844px,calc(100dvh - 48px));
    min-height:0;
  }
}

/* Album scrolling also applies to desktop phone preview. */
.album-screen.active {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  position:relative;
}
.album-screen .album-head,
.album-screen .album-tabs,
.album-screen .album-meta,
.album-screen .mode-notice,
.album-screen .fab {
  flex:0 0 auto;
}
.album-screen .gallery-grid {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  padding-bottom:104px;
}
.album-screen .album-spacer {
  display:none;
}
.album-screen .fab {
  position:absolute;
  left:50%;
  bottom:58px;
  z-index:12;
  transform:translateX(-50%);
  margin:0;
}


/* Camera viewport and controls alignment */
.camera-screen .camera-top {
  flex:0 0 90px;
}
.camera-screen .viewfinder video,
.camera-screen .camera-placeholder img {
  object-fit:cover;
  object-position:center;
}
.camera-screen .mode-switch {
  width:min(100%, 390px);
  margin:13px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  align-items:center;
}
.camera-screen .mode-switch button {
  justify-self:center;
  min-width:96px;
  padding:9px 12px;
  text-align:center;
}
.camera-screen .shutter-row {
  width:min(100%, 390px);
  margin:0 auto;
  padding:4px 0;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  justify-items:center;
}
.camera-screen .shutter-row > :first-child {
  grid-column:1;
  justify-self:center;
}
.camera-screen .shutter-row .shutter {
  grid-column:2;
  grid-row:1;
  justify-self:center;
}
.camera-screen .shutter-row > :last-child {
  grid-column:3;
  grid-row:1;
  justify-self:center;
}
.camera-screen .camera-icon svg {
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.camera-screen .effect-toggle svg {
  width:25px;
  height:25px;
}
@media(max-width:390px) {
  .camera-screen .mode-switch button {
    min-width:0;
    width:100%;
  }
}

/* Wedding AR overlays use face-aligned vector shapes instead of emoji stickers. */
.face-ar-overlay[data-ar="beauty"] .beauty-glow {
  position:absolute;
  inset:-10%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,230,220,.2),rgba(255,230,220,0) 72%);
  filter:blur(5px);
}
.ar-glasses {
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:auto;
  overflow:visible;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 1px 2px #27170d66);
}
.ar-glasses .glasses-lens,.ar-glasses .glasses-arm,.ar-glasses .glasses-bridge {
  fill:rgba(247,231,218,.16);
  stroke:#bd8d72;
  stroke-width:2.8;
}
.ar-glasses .glasses-arm,.ar-glasses .glasses-bridge { fill:none; }
.face-ar-overlay {
  transform:translate(-50%,-50%) rotateZ(var(--ar-roll,0deg)) scaleX(var(--ar-depth-x,1)) scaleY(var(--ar-depth-y,1));
  transform-style:preserve-3d;
  transform-origin:center;
}
.ar-wedding-label {
  position:absolute;
  left:50%;
  top:-28%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:190%;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:linear-gradient(135deg,#fff9eced,#f3dfc9ed);
  color:#68442e;
  box-shadow:0 3px 12px #1e130c66;
  font:600 clamp(8px,2.8vw,14px)/1 var(--font);
  letter-spacing:.08em;
  white-space:nowrap;
}
.face-ar-overlay .ar-wedding-label strong {
  position:static;
  left:auto;
  top:auto;
  transform:none;
  color:#965f41;
  font-size:inherit;
}
.ar-wedding-label small { font:inherit; }
.ar-wedding-label i { color:#cc816e; font-style:normal; }
.ar-flower-crown {
  position:absolute;
  left:50%;
  top:-21%;
  width:165%;
  height:auto;
  transform:translateX(-50%);
  overflow:visible;
  filter:drop-shadow(0 2px 3px #25180f88);
}
.ar-flower-crown .crown-stem { fill:none; stroke:#718b63; stroke-width:5; stroke-linecap:round; }
.ar-flower-crown .crown-flower { fill:#f7e8dc; stroke:#c88a83; stroke-width:2; }
.ar-flower-crown .crown-flower circle:first-child { fill:#d8ad5e; stroke:none; }
.ar-veil {
  position:absolute;
  left:50%;
  top:-20%;
  width:170%;
  height:150%;
  transform:translateX(-50%);
  overflow:visible;
  filter:drop-shadow(0 2px 3px #25180f55);
}
.ar-veil path { fill:rgba(255,248,244,.18); stroke:rgba(255,248,244,.82); stroke-width:2; }
.ar-veil path.veil-edge { fill:none; stroke-width:3; }
.ar-bowtie {
  position:absolute;
  left:50%;
  top:91%;
  width:60%;
  height:auto;
  transform:translateX(-50%);
  overflow:visible;
  filter:drop-shadow(0 2px 3px #25180f77);
}
.ar-bowtie path { fill:#bd704f; stroke:#fff4e8; stroke-width:3; }
.ar-bowtie circle { fill:#f8dfc8; }

.save-confirm-overlay { z-index:60; }
.save-confirm-dialog {
  width:min(100%,420px);
  padding:28px;
  border:1px solid #f0dfce;
  border-radius:24px;
  background:linear-gradient(145deg,#fffaf3,#f8eee4);
}
.save-confirm-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:16px;
  background:#f0dfcf;
  color:#80513a;
}
.save-confirm-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.save-confirm-dialog h3 { margin:16px 0 8px; font-size:27px; }
.save-confirm-dialog p { margin:0; color:#745a49; font-size:14px; line-height:1.55; }
.save-confirm-dialog .save-confirm-private { margin-top:14px; padding:12px 14px; border-radius:14px; background:#f1e6d9; font-size:12px; }
.save-confirm-private strong { color:#4d3326; }
.save-confirm-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.save-confirm-actions .button { min-height:46px; border-radius:13px; padding:10px 14px; font-size:12px; }
.save-confirm-actions .button-secondary { background:#fffaf3; border:1px solid #decab7; color:#644834; }
.save-confirm-actions .button-primary { background:linear-gradient(110deg,#6a3b24,#3b2116); border:1px solid #a87545; color:#fffaf5; }
@media(max-width:420px) {
  .save-confirm-dialog { padding:23px 20px; }
  .save-confirm-actions { flex-direction:column-reverse; }
  .save-confirm-actions .button { width:100%; }
}

/* Gallery uses one reliable page scroll area on touch screens. */
.album-screen.active {
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
}
.album-screen .album-head {
  position:sticky;
  top:0;
  z-index:22;
  min-height:72px;
  padding:max(14px,env(safe-area-inset-top)) 16px 10px;
  background:#fbf7f3;
  border-bottom:1px solid #eee2d8;
}
.album-head h2 { font-size:clamp(18px,5vw,22px); }
.album-title-icon { font-size:22px; }
.album-screen .album-tabs {
  position:sticky;
  top:max(72px,calc(env(safe-area-inset-top) + 36px));
  z-index:21;
  gap:5px;
  padding:10px 16px 12px;
  background:#fbf7f3;
  box-shadow:0 5px 10px #60402c0a;
}
.album-screen .album-tabs button:not(.layout-button) { padding:8px 13px; }
.album-screen .album-meta { margin:8px 18px 13px; }
.album-screen .gallery-grid {
  display:grid;
  flex:none;
  min-height:0;
  overflow:visible;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:0 16px 18px;
  align-content:start;
}
.album-screen .gallery-grid.list-layout { grid-template-columns:1fr; }
.album-screen .gallery-card { aspect-ratio:4/5; border-radius:14px; }
.album-screen .gallery-grid.list-layout .gallery-card { aspect-ratio:2.6/1; }
.album-screen .album-spacer { display:none; }
.album-screen .fab {
  position:absolute;
  left:50%;
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:24;
  transform:translateX(-50%);
  margin:0;
  padding:13px 21px;
  border:1px solid #d6b79f;
  background:linear-gradient(120deg,#713b27,#51291d);
  box-shadow:0 8px 24px #351a1740;
  white-space:nowrap;
}
.album-screen.active ~ .bottom-brand { display:none!important; }
@media(max-width:360px) {
  .album-screen .album-head { padding-left:11px; padding-right:11px; }
  .album-head h2 { gap:5px; font-size:18px; }
  .album-screen .album-tabs { padding-left:12px; padding-right:12px; }
  .album-screen .album-tabs button:not(.layout-button) { padding:8px 10px; }
}

/* Keep capture previews phone-sized and give their actions a clean mobile layout. */
.preview-dialog {
  width:min(92vw,430px);
  height:min(92dvh,844px);
}
@media(max-width:520px) {
  .preview-overlay { padding:12px; }
  .preview-dialog {
    width:min(100%,430px);
    height:100%;
    padding:0 8px 10px;
    gap:10px;
  }
  .preview-media { min-height:0; }
  .preview-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) 43px minmax(0,1fr);
    gap:8px;
    padding:4px 2px max(8px,env(safe-area-inset-bottom));
    align-items:center;
  }
  .preview-actions > div:first-child {
    grid-column:1 / -1;
    min-width:0;
  }
  .preview-actions strong { font-size:14px; }
  .preview-actions small {
    display:block;
    overflow:visible;
    white-space:normal;
    line-height:1.4;
  }
  .preview-action-button { grid-column:2; grid-row:2; }
  .preview-actions .save-shot {
    grid-column:3;
    grid-row:2;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:9px 8px;
    white-space:normal;
    line-height:1.15;
  }
}