:root {
  --bg: #faf6ef;
  --ink: #2e2a26;
  --muted: #8a8178;
  --accent: #c26d5d;
  --accent-dark: #a55547;
  --card: #ffffff;
  --line: #e8e0d4;
  --shadow: 0 10px 30px rgba(46, 42, 38, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.textured {
  background-image: radial-gradient(rgba(194, 109, 93, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 80px; }
.wrap.narrow { max-width: 480px; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
h1 { font-size: 2rem; }
.script { font-family: "Caveat", cursive; color: var(--accent); font-weight: 600; }

p.lead { color: var(--muted); margin: 0 0 24px; font-size: 1.05rem; }
a { color: var(--accent-dark); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: rgba(250, 246, 239, 0.9); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.topbar nav a { margin-left: 16px; font-size: 0.92rem; text-decoration: none; color: var(--ink); }
.topbar nav a:hover { color: var(--accent-dark); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; box-shadow: 0 4px 14px rgba(46, 42, 38, 0.06);
}

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 14px 0 6px; font-family: system-ui, sans-serif; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], textarea, select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 1rem; font-family: system-ui, sans-serif; background: #fff; color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid rgba(194, 109, 93, 0.35); border-color: var(--accent); }

.btn {
  display: inline-block; background: var(--button, var(--accent)); color: var(--button-text, #fff); border: none;
  padding: 13px 22px; border-radius: 999px; font-size: 1rem; font-weight: 600;
  font-family: system-ui, sans-serif; cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(0.9); }
.btn:active { transform: scale(0.98); }
.btn.block { display: block; width: 100%; text-align: center; }
.btn.ghost { background: transparent; color: var(--accent-dark); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: rgba(194, 109, 93, 0.08); }
.btn.small { padding: 8px 14px; font-size: 0.85rem; }
.btn.danger { background: #b0463b; }
.btn:disabled { opacity: 0.5; cursor: default; }
.iconbtn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.camera-page { margin: 0; background: #080808; }
.camera-page .wrap { max-width: none; min-height: 100vh; padding: 0; }
.camera-page.camera-review { background: var(--bg); }
.camera-page.camera-review .wrap { max-width: 480px; padding: 24px 20px 80px; }
.camera-start { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: #080808; color: #fff; text-align: center; font-family: system-ui,sans-serif; }
.camera-start > svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.camera-start h1 { font: 600 1.4rem system-ui,sans-serif; }
.camera-start a { color: rgba(255,255,255,.7); font-size: .9rem; }

.msg { padding: 12px 14px; border-radius: 9px; font-family: system-ui, sans-serif; font-size: 0.92rem; margin-bottom: 16px; }
.msg.err { background: #f7e5e2; color: #8c3a30; }
.msg.ok { background: #e8f0e3; color: #3d5c33; }

/* ---- Polaroid frames ---- */
.polaroid {
  background: #fff; padding: 12px 12px 14px; border-radius: 3px;
  box-shadow: var(--shadow); display: inline-block; width: 100%;
}
.polaroid img { width: 100%; display: block; border-radius: 1px; aspect-ratio: 1 / 1.05; object-fit: cover; }
.polaroid video { width: 100%; display: block; border-radius: 1px; background: #111; }
.polaroid .cap {
  font-family: "Caveat", cursive; font-size: 1.35rem; text-align: center;
  padding: 10px 4px 2px; color: #3a352f; line-height: 1.15; min-height: 1.2em;
  overflow-wrap: anywhere;
}
.polaroid .who { font-family: system-ui, sans-serif; font-size: 0.72rem; color: var(--muted); text-align: center; padding-top: 2px; }

.style-vintage img, .style-vintage video { filter: sepia(0.45) contrast(0.92) saturate(0.85) brightness(1.03); }
.style-noir img, .style-noir video { filter: grayscale(1) contrast(1.08); }
.style-golden img, .style-golden video { filter: sepia(0.25) saturate(1.25) brightness(1.05); }
.style-fade img, .style-fade video { filter: saturate(0.75) contrast(0.85) brightness(1.1); }
.style-pop img, .style-pop video { filter: saturate(1.4) contrast(1.15); }
.style-original.polaroid { padding: 0; background: transparent; box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; }
.style-original.polaroid img { aspect-ratio: auto; border-radius: 0; }
.style-original .cap { background: rgba(255,255,255,0.92); margin: 0; font-size: 1.25rem; padding: 8px 10px; }
.style-original .who { background: rgba(255,255,255,0.92); padding-bottom: 8px; }

/* Gallery grid stays in true row/time order */
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
@media (min-width: 700px) { .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width: 1000px) { .gallery { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.gallery .tile { min-width:0; }
.gallery .tile:nth-child(3n)   { transform: rotate(1.2deg); }
.gallery .tile:nth-child(3n+1) { transform: rotate(-1.4deg); }
.gallery .tile:nth-child(5n)   { transform: rotate(0.6deg); }
.gallery-pretty { padding: 10px 4px 30px; }
.gallery-pretty .tile { transition: transform .2s ease, filter .2s ease; }
.gallery-pretty .polaroid { border: 1px solid rgba(73,55,40,.07); box-shadow: 0 12px 34px rgba(55,39,27,.16); }
.gallery-pretty .saverow { opacity: .82; }
.gallery-pretty .tile:hover { position: relative; z-index: 2; transform: rotate(0deg) translateY(-3px); }
.gallery .polaroid img { aspect-ratio: auto; object-fit: contain; height: auto; max-height: 70vh; background: rgba(0,0,0,.035); }
.gallery-actions { display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 22px; font: .9rem system-ui,sans-serif; color:var(--muted); }
.gallery-media { position:relative; cursor:zoom-in; }
.gallery .timestamp { padding-top:6px; color:var(--muted); text-align:center; font:.62rem system-ui,sans-serif; }
.expand-media { position:absolute; top:18px; right:18px; width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.62); color:#fff; backdrop-filter:blur(8px); }
.video-preview-badge { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.52); color:#fff; pointer-events:none; }
.video-preview-badge svg { width:23px; height:23px; fill:currentColor; stroke:none; }
.expand-media svg,.gallery-viewer svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gallery-viewer { position:fixed; inset:0; z-index:200; background:rgba(8,8,10,.97); color:#fff; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; grid-template-rows:minmax(0,1fr) auto; align-items:center; padding:max(12px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom)); touch-action:pan-y; }
.gallery-viewer[hidden] { display:none; }
.viewer-stage { width:100%; height:100%; min-height:0; display:grid; place-items:center; overflow:hidden; }
.viewer-stage img,.viewer-stage video { display:block; max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; filter:none; }
.viewer-note { width:min(88vw,560px); min-height:min(70vw,420px); padding:34px; display:grid; place-items:center; border-radius:5px; background:#fff; color:#3a352f; box-shadow:0 18px 60px rgba(0,0,0,.4); text-align:center; font:700 clamp(1.8rem,6vw,3.2rem) "Caveat",cursive; line-height:1.2; overflow-wrap:anywhere; transform:rotate(-1deg); }
.viewer-nav,.viewer-close { border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; width:46px; height:46px; }
.viewer-close { position:absolute; z-index:2; top:max(14px,env(safe-area-inset-top)); right:14px; }
.viewer-prev { justify-self:center; }.viewer-next{justify-self:center}.viewer-meta{grid-column:1/-1;text-align:center;min-height:72px;padding:8px 60px 0;font-family:system-ui,sans-serif}.viewer-meta small{display:block;opacity:.68;margin-top:3px}.viewer-meta time{display:block;opacity:.5;font-size:.68rem;margin-top:4px}.viewer-meta span{position:absolute;left:18px;bottom:max(18px,env(safe-area-inset-bottom));font-size:.75rem;opacity:.6}
@media (max-width: 520px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .gallery { gap:10px; }
  .gallery .tile { transform: none !important; }
  .gallery .polaroid { padding: 7px 7px 10px; }
  .gallery .polaroid .cap { font-size: 1.05rem; padding-top: 7px; }
  .gallery .saverow { gap: 5px; }
  .gallery .saverow .btn, .gallery .heartbtn { padding: 7px 9px; font-size: .78rem; }
  .gallery-viewer { grid-template-columns:44px minmax(0,1fr) 44px; }
  .viewer-nav { width:38px;height:38px; }
  .viewer-meta { padding-left:42px;padding-right:42px; }
}

/* Countdown lock screen */
.lockbox { text-align: center; padding: 60px 20px; }
.lockbox .padlock { font-size: 3rem; }
.countdown { display: flex; gap: 12px; justify-content: center; margin: 26px 0; }
.countdown .unit { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; min-width: 72px; box-shadow: 0 4px 14px rgba(46,42,38,0.06); }
.countdown .num { font-size: 1.9rem; font-weight: 600; }
.countdown .lbl { font-family: system-ui, sans-serif; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.return-reminder { max-width:480px; margin:20px auto; padding:18px; border:2px solid var(--accent); border-radius:14px; background:rgba(255,255,255,.82); color:var(--ink); box-shadow:0 8px 24px rgba(46,42,38,.1); text-align:center; font-family:system-ui,sans-serif; }
.return-reminder strong { display:block; font-size:1.05rem; }
.return-reminder p { margin:7px 0 14px; color:var(--muted); font-size:.88rem; line-height:1.45; }
.return-reminder > div { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }

/* Style picker on guest page — horizontally scrollable strip */
.stylepick {
  display: flex; gap: 10px; margin: 10px 0 4px; overflow-x: auto;
  padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.stylepick::-webkit-scrollbar { display: none; }
.stylepick button {
  flex: 0 0 78px; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 4px;
  font-family: system-ui, sans-serif; font-size: 0.72rem; cursor: pointer; color: var(--ink);
}
.stylepick button.sel { border-color: var(--accent); background: rgba(194, 109, 93, 0.08); font-weight: 600; }
.stylepick .swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; margin-bottom: 6px; background: linear-gradient(135deg, #d8b28f, #a67c5b); }
.stylepick .sw-vintage { filter: sepia(0.5) saturate(0.8); }
.stylepick .sw-noir { filter: grayscale(1); }
.stylepick .sw-golden { filter: sepia(0.25) saturate(1.3) brightness(1.05); }
.stylepick .sw-fade { filter: saturate(0.7) contrast(0.85) brightness(1.12); }
.stylepick .sw-pop { filter: saturate(1.6) contrast(1.15); }
.stylepick button:not([data-style="original"]) .swatch {
  border: 4px solid #fff; border-bottom-width: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.swipehint { text-align: center; font-family: system-ui, sans-serif; font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; }

/* Save-as-polaroid button under gallery tiles */
.tile .saverow { text-align: center; margin-top: 8px; display: flex; gap: 8px; justify-content: center; align-items: center; }

/* Reveal-mode radio options */
.lockopts { display: grid; gap: 8px; }
.lockopts label {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-family: system-ui, sans-serif; font-size: 0.88rem; color: var(--ink);
}
.lockopts label:has(input:checked) { border-color: var(--accent); background: rgba(194, 109, 93, 0.07); }
.lockopts input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.unlockwrap { margin-top: 4px; }

/* Heart reactions */
.heartbtn {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 12px; font-family: system-ui, sans-serif; font-size: 0.85rem;
  cursor: pointer; color: var(--ink); transition: transform 0.12s;
}
.heartbtn em { font-style: normal; }
.heartbtn.did { border-color: var(--accent); transform: scale(1.05); }
.heartbtn:active { transform: scale(0.94); }

/* Guestbook note polaroids */
.polaroid.note { padding: 18px 14px; }
.polaroid.note .notetext {
  font-family: "Caveat", cursive; font-size: 1.5rem; color: #3a352f; text-align: center;
  min-height: 140px; display: flex; align-items: center; justify-content: center;
  line-height: 1.25; overflow-wrap: anywhere; padding: 10px 6px;
}

/* Admin photo grid */
.admingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.admingrid .item { position: relative; }
.admingrid form { position: absolute; top: 6px; right: 6px; }

.eventrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; text-decoration: none; color: var(--ink);
  transition: box-shadow 0.15s;
}
.eventrow:hover { box-shadow: 0 6px 18px rgba(46,42,38,0.1); }
.eventrow .meta { font-family: system-ui, sans-serif; font-size: 0.82rem; color: var(--muted); }
.eventrow .code { font-family: ui-monospace, monospace; background: var(--bg); padding: 3px 8px; border-radius: 6px; font-size: 0.85rem; }

.qrbox { text-align: center; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.qrbox #qrcode { display: inline-block; padding: 12px; background: #fff; }
.qrbox #qrcode img, .qrbox #qrcode canvas { margin: 0 auto; }

.progressbar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progressbar > div { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width 0.2s; }

.footer-note { text-align: center; color: var(--muted); font-family: system-ui, sans-serif; font-size: 0.78rem; margin-top: 48px; }

/* Event banner hero */
.eventbanner {
  width: auto; max-width: 100%; height: auto; max-height: min(70vh, 680px); object-fit: contain; border-radius: 16px;
  box-shadow: var(--shadow); margin: 0 auto 18px; display: block; background: rgba(255,255,255,.45);
}

/* ---- Full-screen, phone-style camera ---- */
body.camera-open { overflow: hidden; background: #000; }
body.camera-open .wrap > :not(#step-camera) { display: none !important; }
#step-camera { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; }
#step-camera[hidden] { display: none; }
.camera-ui { position: relative; height: 100%; height: 100dvh; background: #000; overflow: hidden; touch-action:none; overscroll-behavior:none; }
.camera-ui button { touch-action:manipulation; }
.cammodes { display: flex; justify-content: center; gap: 22px; margin: 0; }
.cammodes button {
  border: 0; background: transparent; padding: 8px 5px; font-family: system-ui, sans-serif;
  font-size: .78rem; letter-spacing: .09em; cursor: pointer; color: rgba(255,255,255,.62);
}
.cammodes button.sel { color: #ffd44a; font-weight: 700; }
.aspectcontrols { display:flex; justify-content:center; gap:6px; overflow-x:auto; margin:0 auto 2px; scrollbar-width:none; }
.aspectcontrols[hidden] { display:none; }.aspectcontrols::-webkit-scrollbar{display:none}
.aspectcontrols button { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 10px; background:rgba(0,0,0,.25); color:rgba(255,255,255,.75); font:600 .68rem system-ui,sans-serif; white-space:nowrap; }
.aspectcontrols button.sel { border-color:#ffd44a; color:#ffd44a; background:rgba(0,0,0,.5); }
.rectimer {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55);
  color: #ff5a4e; font-family: system-ui, sans-serif; font-weight: 700; font-size: 0.95rem;
  padding: 5px 12px; border-radius: 999px;
}
.shutter.vid { border-color: #d33; }
.shutter.vid::after {
  content: ''; display: block; width: 26px; height: 26px; margin: 0 auto;
  background: #d33; border-radius: 50%; transition: border-radius 0.15s;
}
.shutter.vid.rec::after { border-radius: 5px; }
.camwrap {
  position: absolute; inset: 0; overflow: hidden; background: #080808;
}
.camwrap video { width: 100%; height: 100%; display: block; object-fit: cover; }
.camera-error { position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:10px; padding:28px; background:#080808; color:#fff; text-align:center; font-family:system-ui,sans-serif; }
.camera-error[hidden] { display:none; }
.camera-error p { margin:0 0 8px; color:rgba(255,255,255,.7); }
.camera-error .btn { min-width:190px; }
.camflash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.camflash.on { opacity: 0.85; transition: none; }
.camcontrols {
  display: grid; grid-template-columns: 1fr 92px 1fr; align-items: center; justify-items: center;
  width: min(100%, 390px); margin: 3px auto;
}
.shutter {
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer; padding: 0;
  background: #fff; border: 5px solid #111; outline: 4px solid #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.45); transition: transform 0.1s;
}
.shutter:active { transform: scale(0.88); }
.camside {
  width: 58px; min-height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.13); font-size: 1.55rem; cursor: pointer; position: relative;
  font-family: system-ui, sans-serif; color: #fff; backdrop-filter: blur(12px); display: grid; place-content: center;
}
.camside small { display: block; font-size: .58rem; line-height: 1; margin-top: 1px; }
.camside svg { width: 25px; height: 25px; margin: 0 auto 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.camside.done { background: rgba(194,109,93,.82); }
.cambottom { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 54px 14px max(10px, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.58) 24%, rgba(0,0,0,.76)); }
.cambottom #camHint { margin: 2px 0 4px; color: rgba(255,255,255,.58); font: .73rem system-ui,sans-serif; }
.camclose { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 3; border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(0,0,0,.5); color: #fff; font: 600 .8rem system-ui,sans-serif; display: flex; align-items: center; gap: 5px; }
.camclose svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.viewcount { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.62); border: 2px solid rgba(255,255,255,.85); color: #fff; display: grid; place-content: center; text-align: center; font: 700 1.05rem system-ui,sans-serif; }
.viewcount[hidden] { display: none; }
.viewcount small { font-size: .5rem; line-height: .8; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.zoomcontrols { position: absolute; z-index: 3; bottom: 190px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.zoomcontrols[hidden] { display: none; }
.zoomcontrols button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(35,35,35,.8); color: #fff; font: 700 .72rem system-ui,sans-serif; padding: 0; }
.zoomcontrols button.sel { background: #ffd44a; color: #111; }
.focus-reticle { position:absolute; z-index:4; width:68px; height:68px; margin:-34px 0 0 -34px; border:2px solid #ffd44a; border-radius:8px; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.2); animation:focus-in .22s ease-out; }
.focus-reticle[hidden] { display:none; }
.focus-reticle::before,.focus-reticle::after { content:''; position:absolute; background:#ffd44a; }
.focus-reticle::before { width:10px;height:2px;left:27px;top:31px; }.focus-reticle::after{width:2px;height:10px;left:31px;top:27px}
.focus-reticle.focused { border-color:#7dff8c; }.focus-reticle.focused::before,.focus-reticle.focused::after{background:#7dff8c}
.focus-hint { position:absolute; z-index:4; left:50%; top:max(76px,calc(env(safe-area-inset-top) + 62px)); transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(0,0,0,.5); color:#fff; font:600 .72rem system-ui,sans-serif; pointer-events:none; white-space:nowrap; }
.focus-hint[hidden] { display:none; }
@keyframes focus-in { from { transform:scale(1.35); opacity:.4; } to { transform:scale(1); opacity:1; } }
.frame-guide { position:absolute; z-index:2; left:50%; top:calc(50% - 70px); transform:translate(-50%,-50%); border:1.5px solid rgba(255,255,255,.8); border-radius:3px; pointer-events:none; box-shadow:0 0 0 200vmax rgba(0,0,0,.15); }
.frame-guide[hidden] { display:none; }
@media (orientation: landscape) and (max-height: 520px) {
  .cambottom { left: auto; top: 0; width: 150px; padding: 20px 8px; display: grid; align-content: center; background: linear-gradient(to right, transparent, rgba(0,0,0,.75) 22%); }
  .camcontrols { grid-template-columns: 1fr; gap: 8px; }
  .shutter { width: 62px; height: 62px; }
  .camside { width: 44px; min-height: 44px; }
  .zoomcontrols { bottom: 12px; }
}

/* ---- Save chooser sheet ---- */
.savesheet {
  position: fixed; inset: 0; background: rgba(46, 42, 38, 0.45); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.savesheet[hidden] { display: none; }
.savesheet .sheetcard {
  background: var(--bg); border-radius: 18px 18px 0 0; padding: 22px 20px 30px;
  width: 100%; max-width: 480px; box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.savesheet .sheetcard .btn { margin-top: 10px; }
.savesheet .sheettitle { font-size: 1.15rem; font-weight: 600; text-align: center; }
.savesheet .sheethint {
  font-family: system-ui, sans-serif; font-size: 0.78rem; color: var(--muted);
  text-align: center; margin: 12px 0 0;
}