/* Web Album — editorial wedding gallery + admin studio */
:root {
    color-scheme: dark;
    --bg: #0f0e0d;
    --surface: #1a1916;
    --surface-2: #242220;
    --surface-3: #2d2a27;
    --text: #f0ece6;
    --muted: #a7a096;
    --muted-2: #756f67;
    --gold: #c9a96e;
    --gold-soft: #e2c895;
    --line: rgba(240, 236, 230, .13);
    --line-strong: rgba(240, 236, 230, .22);
    --danger: #d88478;
    --success: #92b99b;
    --shadow: 0 24px 70px rgba(0,0,0,.28);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page: min(100% - 48px, 1380px);
    --nav-height: 78px;
    --ease: cubic-bezier(.2,.75,.25,1);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3efe8;
    --surface: #fbf8f2;
    --surface-2: #e8e1d6;
    --surface-3: #ddd4c7;
    --text: #1c1916;
    --muted: #625c54;
    --muted-2: #8a8278;
    --line: rgba(28,25,22,.12);
    --line-strong: rgba(28,25,22,.22);
    --shadow: 0 24px 70px rgba(70,55,38,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 16px; transform: translateY(-150%); background: var(--text); color: var(--bg); border-radius: 999px; font-weight: 600; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* Public album */
.album-page { overflow-x: clip; }
.hero { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; background: #181512; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.86) contrast(.98); transform: scale(1.012); }
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,7,6,.36) 0%, rgba(8,7,6,.08) 30%, rgba(8,7,6,.22) 58%, rgba(8,7,6,.78) 100%), linear-gradient(90deg, rgba(10,8,6,.18), transparent 45%); }
.hero-grain { position: absolute; inset: 0; z-index: 2; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-copy { position: absolute; z-index: 3; left: 50%; bottom: 96px; width: min(720px, calc(100% - 48px)); transform: translateX(-50%); display: grid; justify-items: center; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.72); font-size: clamp(9px, .72vw, 11px); line-height: 1.4; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.hero-kicker span { color: var(--gold-soft); }
.hero h1 { margin: 12px 0 0; max-width: 100%; font: 500 clamp(34px, 4.2vw, 58px)/.95 var(--serif); letter-spacing: -.025em; color: #fffaf2; text-wrap: balance; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 4px 8px; color: rgba(255,255,255,.64); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.scroll-cue i { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 1px; height: 8px; background: #fff; transform: translateX(-50%); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: translate(-50%,0); opacity:.45 } 50%{ transform: translate(-50%,5px); opacity:1 } }
.reveal { animation: rise .9s var(--ease) both; }
.hero h1.reveal { animation-delay: .08s; }
.hero-meta.reveal { animation-delay: .16s; }
@keyframes rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }

.icon-btn { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface-2) 78%, transparent); cursor: pointer; transition: transform .25s var(--ease), border-color .25s, background .25s; }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-3); }

.album-nav { position: sticky; top: 0; z-index: 50; min-height: var(--nav-height); display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 0 max(24px, 4vw); background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.nav-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 600 18px/1 var(--serif); letter-spacing: .03em; color: var(--gold-soft); }
.category-tabs { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tab { flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 999px; padding: 0 15px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 500; transition: color .2s, background .2s; }
.category-tab span { margin-left: 5px; color: var(--muted-2); font-size: 10px; }
.category-tab:hover { color: var(--text); background: var(--surface); }
.category-tab.is-active { color: var(--bg); background: var(--text); }
.category-tab.is-active span { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.nav-tools { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.nav-tools .icon-btn { flex:0 0 auto; background:transparent; }
.nav-tools .icon-btn:hover { background:var(--surface); }

.gallery-shell { width: var(--page); margin: 0 auto; padding: clamp(72px, 9vw, 140px) 0 0; }
.gallery-heading { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: start; gap: 0; margin-bottom: clamp(42px, 6vw, 78px); text-align: center; }
.gallery-heading h2 { margin: 10px 0 0; font: 500 clamp(46px, 7vw, 96px)/.9 var(--serif); letter-spacing: -.045em; text-wrap: balance; word-break: normal; overflow-wrap: normal; }
.gallery-heading p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 390px; }
.masonry { --masonry-gap:clamp(8px, .82vw, 12px); position:relative; width:100%; min-height:320px; }
.photo-card { position:absolute; top:0; left:0; width:calc((100% - (3 * var(--masonry-gap))) / 4); min-width:0; max-width:100%; display:block; margin:0; padding:0; overflow:hidden; border:0; border-radius:3px; background:var(--surface); cursor:zoom-in; aspect-ratio:var(--ratio, 1 / 1); opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.photo-card.is-visible { opacity:1; transform:none; }
.photo-card [data-lazy-image] { position:absolute; inset:0; display:block; background:linear-gradient(110deg, var(--surface) 18%, var(--surface-2) 42%, var(--surface) 66%); background-size:220% 100%; animation:photo-placeholder 1.6s ease-in-out infinite; }
@keyframes photo-placeholder { from { background-position:120% 0; } to { background-position:-120% 0; } }
.photo-card img { width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .2s ease, transform .75s var(--ease), filter .35s; }
.photo-card.is-aspect-ready img { opacity:1; }
.photo-card:hover img { transform:scale(1.025); filter:brightness(.84); }
.photo-overlay { position: absolute; inset: auto 12px 12px 12px; display:flex; justify-content:space-between; align-items:flex-end; color:#fff; opacity:0; transform:translateY(6px); transition:.25s var(--ease); pointer-events:none; }
.photo-overlay span { font-size:10px; letter-spacing:.15em; }
.photo-overlay svg { width:26px; height:26px; padding:6px; border:1px solid rgba(255,255,255,.45); border-radius:50%; }
.photo-card:hover .photo-overlay, .photo-card:focus-visible .photo-overlay { opacity:1; transform:none; }
.gallery-empty { min-height: 360px; display:grid; place-content:center; justify-items:center; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gallery-empty p { color:var(--muted); max-width:460px; line-height:1.7; }
.album-footer { margin-top: clamp(90px, 12vw, 180px); padding: 42px 0 52px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.footer-mark { display:inline-grid; place-items:center; width:56px; height:56px; border:1px solid var(--line); border-radius:50%; font:600 21px var(--serif); color:var(--gold); }
.album-footer p { margin:14px 0 0; color:var(--muted); font-size:12px; }
.album-footer a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--muted); }
.album-footer a span { margin-left:8px; color:var(--gold); }

.lightbox { position:fixed; inset:0; z-index:100; background:rgba(8,7,6,.96); color:#f6f0e8; }
.lightbox-backdrop { position:absolute; inset:0; }
.lightbox-chrome { position:absolute; z-index:3; top:20px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; }
.lightbox-counter { color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.18em; }
.lightbox-actions { display:flex; gap:8px; }
.lightbox .icon-btn { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; }
.lightbox-stage { position:absolute; inset:74px 82px 50px; z-index:2; margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; gap:16px; pointer-events:none; }
.lightbox-stage img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.lightbox-stage figcaption { color:rgba(255,255,255,.58); font-size:11px; letter-spacing:.08em; }
.lightbox-arrow { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:58px; border:0; background:transparent; color:rgba(255,255,255,.62); font:300 46px/1 var(--serif); cursor:pointer; transition:color .2s; }
.lightbox-arrow:hover { color:#fff; }
.lightbox-prev { left:20px; } .lightbox-next { right:20px; }

.modal { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(5,4,3,.8); backdrop-filter:blur(8px); }
.qr-card { position:relative; z-index:1; width:min(430px,100%); padding:38px; text-align:center; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.qr-close { position:absolute; top:14px; right:14px; }
.qr-card h2 { margin:12px 0 24px; font:500 42px/1 var(--serif); }
.qr-frame { width:236px; height:236px; margin:0 auto; padding:8px; background:#fff; }
.qr-frame img { width:100%; height:100%; display:block; }
.qr-card p { margin:22px auto; max-width:310px; color:var(--muted); font-size:12px; line-height:1.7; }
.copy-link, .primary-link { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line-strong); border-radius:999px; padding:0 20px; background:var(--text); color:var(--bg); font-weight:600; font-size:12px; cursor:pointer; }
.toast { position:fixed; z-index:150; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); box-shadow:var(--shadow); font-size:12px; transition:.25s var(--ease); }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

/* Setup / access pages */
.setup-page { min-height:100svh; display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 42%), var(--bg); }
.empty-shell { width:min(760px,100%); padding:clamp(42px,7vw,82px); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); text-align:center; }
.empty-shell .eyebrow { justify-content:center; }
.empty-shell h1 { margin:18px 0; font:500 clamp(48px,8vw,86px)/.86 var(--serif); letter-spacing:-.045em; }
.empty-shell p { width:min(500px,100%); margin:0 auto 28px; color:var(--muted); font-size:13px; line-height:1.8; }

/* Admin studio */
.admin-page { min-height:100svh; background:#11100f; color:#ece7df; }
.admin-page, .admin-page input, .admin-page textarea, .admin-page select, .admin-page button { font-family:var(--sans); }
.admin-shell { min-height:100svh; display:grid; grid-template-columns:260px minmax(0,1fr); }
.admin-sidebar { position:sticky; top:0; height:100svh; padding:26px 22px; border-right:1px solid rgba(255,255,255,.08); background:#151412; display:flex; flex-direction:column; }
.admin-brand { display:flex; gap:12px; align-items:center; padding:6px 4px 28px; }
.admin-brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(201,169,110,.38); border-radius:50%; font:600 18px var(--serif); color:#d9bd87; }
.admin-brand strong { display:block; font:600 18px var(--serif); letter-spacing:.01em; }
.admin-brand span { color:#77716a; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.admin-menu { display:grid; gap:5px; }
.admin-menu a { min-height:44px; display:flex; align-items:center; gap:11px; padding:0 12px; border-radius:10px; color:#928b82; font-size:12px; font-weight:500; touch-action:manipulation; }
.admin-menu a:hover, .admin-menu a.is-active { background:#201e1b; color:#f0ece6; }
.admin-menu svg { width:17px; height:17px; }
.admin-sidebar-bottom { margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); }
.admin-user { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#27231e; color:#d9bd87; font:600 13px var(--serif); }
.admin-user div { min-width:0; }
.admin-user strong, .admin-user span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.admin-user strong { font-size:11px; } .admin-user span { margin-top:2px; color:#77716a; font-size:9px; }
.admin-logout { margin-top:14px; display:inline-flex; color:#8a8279; font-size:10px; }
.admin-main { min-width:0; padding:clamp(28px,4vw,58px); }
.admin-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:36px; }
.admin-heading .eyebrow { color:#b99b65; }
.admin-heading h1 { margin:9px 0 6px; font:500 clamp(38px,4.5vw,62px)/.92 var(--serif); letter-spacing:-.035em; }
.admin-heading p { margin:0; color:#77716a; font-size:11px; line-height:1.7; }
.admin-primary, .admin-secondary, .admin-danger { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border-radius:10px; border:1px solid rgba(255,255,255,.1); cursor:pointer; font-size:11px; font-weight:600; }
.admin-primary { background:#d0b173; color:#17130f; border-color:#d0b173; }
.admin-secondary { background:#1b1917; color:#d8d2ca; }
.admin-danger { background:transparent; color:#d88478; border-color:rgba(216,132,120,.25); }
.admin-primary svg, .admin-secondary svg, .admin-danger svg { width:16px; height:16px; }
.admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid rgba(255,255,255,.08); margin-bottom:28px; }
.admin-stat { min-width:0; padding:22px; background:#171614; }
.admin-stat + .admin-stat { border-left:1px solid rgba(255,255,255,.08); }
.admin-stat span { color:#77716a; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.admin-stat strong { display:block; margin-top:9px; font:500 34px/1 var(--serif); }
.admin-panel { border:1px solid rgba(255,255,255,.08); background:#171614; }
.admin-panel-head { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-panel-head h2 { margin:0; font:600 18px var(--serif); }
.album-list { display:grid; }
.album-row { display:grid; grid-template-columns:minmax(210px,1.3fr) minmax(160px,.7fr) 110px 126px 180px; align-items:center; gap:16px; min-height:88px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.album-row:last-child { border-bottom:0; }
.album-row:hover { background:#1b1917; }
.album-title { min-width:0; }
.album-title strong { display:block; font:600 17px var(--serif); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.album-title span { display:block; margin-top:4px; color:#77716a; font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.album-meta { color:#8d867e; font-size:10px; line-height:1.6; }
.album-count { color:#aaa39a; font-size:10px; }
.status-pill { width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:6px; min-height:27px; padding:0 9px; border-radius:999px; background:#24211e; color:#9b948b; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.status-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:#756e65; }
.status-pill.is-live::before, .status-pill.is-synced::before { background:#84a88d; } .status-pill.is-live, .status-pill.is-synced { color:#a8c5ae; }
.status-pill.is-cache::before, .status-pill.is-failed::before, .status-pill.is-error::before { background:#d0b173; } .status-pill.is-cache, .status-pill.is-failed, .status-pill.is-error { color:#d9bd87; }
.status-pill.is-waiting::before, .status-pill.is-pending::before, .status-pill.is-stale::before, .status-pill.is-not_synced::before { background:#b59a69; } .status-pill.is-waiting, .status-pill.is-pending, .status-pill.is-stale, .status-pill.is-not_synced { color:#cdb886; }
.status-pill.is-unconfigured::before { background:#756e65; } .status-pill.is-unconfigured { color:#9b948b; }
.row-actions { display:flex; justify-content:flex-end; gap:7px; }
.row-actions a, .row-actions button { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:#1b1917; color:#aaa39a; cursor:pointer; }
.row-actions a:hover, .row-actions button:hover { color:#f0ece6; border-color:rgba(255,255,255,.18); }
.row-actions svg { width:15px; height:15px; }
.admin-empty { padding:70px 28px; text-align:center; }
.admin-empty h3 { margin:10px 0 8px; font:500 32px var(--serif); } .admin-empty p { color:#77716a; font-size:11px; }

.flash { margin-bottom:20px; padding:13px 15px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#1a1917; color:#b9b1a8; font-size:11px; line-height:1.5; }
.flash.success { border-color:rgba(120,172,132,.22); color:#a5c1ac; }
.flash.error { border-color:rgba(216,132,120,.24); color:#df9a90; }

.admin-form-shell { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.admin-form-card, .admin-side-card { border:1px solid rgba(255,255,255,.08); background:#171614; }
.admin-form-card { padding:clamp(22px,3vw,36px); }
.form-section + .form-section { margin-top:34px; padding-top:30px; border-top:1px solid rgba(255,255,255,.07); }
.form-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.form-section-head h2 { margin:0; font:600 20px var(--serif); }
.form-section-head p { margin:0; color:#736d65; font-size:9px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.form-field { min-width:0; }
.form-field.is-full { grid-column:1/-1; }
.form-field label { display:block; margin-bottom:8px; color:#938c83; font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.form-field input, .form-field textarea { width:100%; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#11100f; color:#ece7df; padding:0 12px; transition:border-color .2s, background .2s; }
.form-field input { min-height:46px; }
.form-field textarea { min-height:116px; padding-top:12px; resize:vertical; line-height:1.6; }
.form-field input:focus, .form-field textarea:focus { outline:0; border-color:rgba(201,169,110,.55); background:#141311; }
.form-field small { display:block; margin-top:7px; color:#6e675f; font-size:9px; line-height:1.5; }
.field-error { margin-top:7px; color:#dc8f85; font-size:9px; }
.switch-row { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 2px; }
.switch-row strong { display:block; font-size:11px; } .switch-row span { display:block; margin-top:3px; color:#706a62; font-size:9px; }
.switch { position:relative; width:44px; height:25px; flex:0 0 auto; }
.switch input { position:absolute; opacity:0; }
.switch i { position:absolute; inset:0; border-radius:999px; background:#2b2824; border:1px solid rgba(255,255,255,.08); transition:.2s; }
.switch i::after { content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; border-radius:50%; background:#817970; transition:.2s; }
.switch input:checked + i { background:#c9a96e; } .switch input:checked + i::after { transform:translateX(19px); background:#17130f; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); }
.admin-side-card { padding:20px; }
.admin-side-card + .admin-side-card { margin-top:16px; }
.admin-side-card h3 { margin:0 0 14px; font:600 17px var(--serif); }
.admin-side-card p { margin:0; color:#77716a; font-size:10px; line-height:1.7; }
.side-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.side-metric { padding:13px; background:#1d1b18; border-radius:8px; }
.side-metric span { color:#716a62; font-size:8px; text-transform:uppercase; letter-spacing:.1em; } .side-metric strong { display:block; margin-top:5px; font:500 23px var(--serif); }
.public-url { margin-top:14px; padding:11px; border:1px dashed rgba(255,255,255,.11); color:#908980; font-size:9px; line-height:1.6; word-break:break-all; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* Admin identity / settings */
.admin-brand-mark-image { overflow:hidden; padding:0; border-radius:11px; background:#11100f; }
.admin-brand-mark-image img { width:100%; height:100%; display:block; object-fit:cover; }
.admin-sidebar-bottom { position:relative; }
.admin-user-button { width:100%; min-height:54px; display:flex; align-items:center; gap:10px; padding:7px 8px; border:1px solid transparent; border-radius:11px; background:transparent; color:#d8d2ca; text-align:left; cursor:pointer; touch-action:manipulation; transition:background .2s,border-color .2s; }
.admin-user-button:hover, .admin-user-button[aria-expanded="true"] { background:#1d1b18; border-color:rgba(255,255,255,.08); }
.admin-user-copy { min-width:0; flex:1; }
.admin-user-copy strong, .admin-user-copy span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.admin-user-copy strong { font-size:11px; font-weight:600; }
.admin-user-copy span { margin-top:3px; color:#736d65; font-size:9px; }
.admin-user-chevron { flex:0 0 auto; width:15px; height:15px; color:#6f6961; transition:transform .2s; }
.admin-user-button[aria-expanded="true"] .admin-user-chevron { transform:rotate(180deg); }
.admin-profile-menu { position:absolute; z-index:80; left:0; right:0; bottom:calc(100% + 10px); padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#1b1917; box-shadow:0 18px 46px rgba(0,0,0,.4); }
.admin-profile-menu-head { padding:9px 10px 11px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:5px; }
.admin-profile-menu-head span, .admin-profile-menu-head strong { display:block; }
.admin-profile-menu-head span { color:#6f6961; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.admin-profile-menu-head strong { margin-top:4px; font-size:11px; }
.admin-profile-menu a, .admin-profile-menu button { width:100%; min-height:48px; display:flex; align-items:center; gap:10px; padding:7px 9px; border:0; border-radius:9px; background:transparent; color:#bbb4ab; text-align:left; cursor:pointer; }
.admin-profile-menu a:hover, .admin-profile-menu button:hover { background:#24211e; color:#f0ece6; }
.admin-profile-menu svg { width:17px; height:17px; flex:0 0 auto; }
.admin-profile-menu a span, .admin-profile-menu button span { min-width:0; }
.admin-profile-menu a strong, .admin-profile-menu a small, .admin-profile-menu button strong, .admin-profile-menu button small { display:block; }
.admin-profile-menu a strong, .admin-profile-menu button strong { font-size:10px; }
.admin-profile-menu a small, .admin-profile-menu button small { margin-top:2px; color:#706a62; font-size:8px; }
.admin-profile-menu .is-danger { color:#df9185; }
.admin-confirm-modal { position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:20px; }
.admin-confirm-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(5,4,3,.78); backdrop-filter:blur(8px); cursor:default; }
.admin-confirm-card { position:relative; z-index:1; width:min(430px,100%); padding:30px; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:#171614; box-shadow:0 28px 80px rgba(0,0,0,.45); }
.admin-confirm-card h2 { margin:12px 0 8px; font:500 35px/1 var(--serif); }
.admin-confirm-card p { margin:0; color:#817a72; font-size:10px; line-height:1.7; }
.admin-confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.admin-confirm-actions form { margin:0; }
.admin-danger-solid { background:rgba(216,132,120,.12); }
.settings-main { max-width:1420px; width:100%; }
.settings-topbar { margin-bottom:28px; }
.settings-workspace { max-width:1080px; }
.settings-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; padding:6px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#151412; }
.settings-tab { min-height:66px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:#858078; text-align:left; cursor:pointer; touch-action:manipulation; transition:background .2s,border-color .2s,color .2s; }
.settings-tab:hover { color:#d8d2ca; background:#1a1816; }
.settings-tab.is-active { border-color:rgba(201,169,110,.22); background:#211e1a; color:#eee8df; }
.settings-tab-icon { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:#1d1b18; color:#a78c5a; }
.settings-tab-icon svg { width:17px; height:17px; }
.settings-tab strong, .settings-tab small { display:block; }
.settings-tab strong { font-size:11px; }
.settings-tab small { margin-top:3px; color:#716a62; font-size:8px; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; }
.settings-card { border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#171614; }
.settings-form-card { padding:clamp(22px,3vw,34px); }
.settings-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.settings-card-head h2 { margin:9px 0 0; font:600 24px/1 var(--serif); }
.security-badge { min-height:26px; display:inline-flex; align-items:center; padding:0 9px; border:1px solid rgba(126,166,137,.18); border-radius:999px; background:rgba(126,166,137,.08); color:#91b49a; font-size:8px; letter-spacing:.06em; text-transform:uppercase; }
.settings-lead { max-width:650px; margin:0 0 24px; color:#77716a; font-size:10px; line-height:1.7; }
.settings-form-grid { padding-top:22px; border-top:1px solid rgba(255,255,255,.07); }
.settings-form-actions { display:flex; justify-content:flex-end; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); }
.settings-note-card { padding:22px; }
.settings-note-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(201,169,110,.15); border-radius:10px; background:#1f1c18; color:#b99b65; }
.settings-note-icon svg { width:19px; height:19px; }
.settings-note-card h3 { margin:16px 0 8px; font:600 19px/1 var(--serif); }
.settings-note-card p { margin:0; color:#77716a; font-size:9px; line-height:1.7; }
.settings-note-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); color:#6e675f; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.settings-note-row strong { color:#aaa39a; font-size:9px; text-transform:none; letter-spacing:0; }
.brand-preview { display:flex; align-items:center; gap:14px; margin:20px 0 24px; padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:#131210; }
.brand-preview-logo { width:58px; height:58px; flex:0 0 auto; overflow:hidden; border-radius:12px; border:1px solid rgba(201,169,110,.22); background:#0f0e0d; }
.brand-preview-logo img { width:100%; height:100%; display:block; object-fit:cover; }
.brand-preview > div:last-child { min-width:0; }
.brand-preview span, .brand-preview strong, .brand-preview small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.brand-preview span { color:#716a62; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.brand-preview strong { margin-top:4px; font:600 18px var(--serif); }
.brand-preview small { margin-top:2px; color:#756f67; font-size:8px; }
.upload-field { position:relative; min-height:72px; display:flex!important; align-items:center; gap:12px; padding:12px; overflow:hidden; border:1px dashed rgba(201,169,110,.3); border-radius:10px; background:#131210; cursor:pointer; touch-action:manipulation; text-transform:none!important; letter-spacing:0!important; }
.upload-field:hover { border-color:rgba(201,169,110,.55); background:#171512; }
.upload-field:focus-within { outline:2px solid var(--gold); outline-offset:3px; border-color:rgba(201,169,110,.55); }
.upload-icon { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:#201c17; color:#b99b65; }
.upload-icon svg { width:17px; height:17px; }
.upload-field strong, .upload-field small { display:block; }
.upload-field strong { color:#c8c1b8; font-size:10px; }
.upload-field small { margin-top:3px!important; color:#706a62!important; font-size:8px!important; }
.visually-hidden-file { position:absolute!important; inset:0!important; z-index:2; width:100%!important; height:100%!important; min-height:0!important; padding:0!important; margin:0!important; opacity:0; cursor:pointer; clip:auto!important; white-space:normal!important; border:0!important; }
.settings-checkbox { min-height:44px; display:flex!important; align-items:center; gap:9px; margin:0!important; color:#8b847b!important; text-transform:none!important; letter-spacing:0!important; cursor:pointer; }
.settings-checkbox input { width:16px!important; min-height:16px!important; height:16px; flex:0 0 auto; accent-color:#c9a96e; }
.settings-checkbox span { font-size:9px; line-height:1.5; }

/* Login */
.login-page { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); background:#0f0e0d; color:#eee8df; }
.login-art { position:relative; overflow:hidden; min-height:100svh; background:radial-gradient(circle at 30% 25%, rgba(201,169,110,.16), transparent 26%), radial-gradient(circle at 72% 65%, rgba(255,255,255,.055), transparent 30%), #161411; }
.login-art::before, .login-art::after { content:""; position:absolute; border:1px solid rgba(201,169,110,.16); border-radius:50%; }
.login-art::before { width:70vw; aspect-ratio:1; left:-24vw; top:-20vw; }
.login-art::after { width:44vw; aspect-ratio:1; right:-16vw; bottom:-18vw; }
.login-art-copy { position:absolute; z-index:2; left:clamp(34px,6vw,88px); bottom:clamp(50px,9vw,110px); max-width:680px; }
.login-art-copy .eyebrow { color:#c9a96e; }
.login-art-copy h1 { margin:18px 0 20px; font:500 clamp(56px,8vw,118px)/.79 var(--serif); letter-spacing:-.052em; }
.login-art-copy p { max-width:440px; color:#847d74; font-size:11px; line-height:1.8; }
.login-panel { min-height:100svh; display:grid; place-items:center; padding:40px; border-left:1px solid rgba(255,255,255,.08); background:#12110f; }
.login-card { width:min(390px,100%); }
.login-card .admin-brand { padding:0 0 48px; }
.login-card h2 { margin:0 0 8px; font:500 42px var(--serif); }
.login-card > p { margin:0 0 28px; color:#77716a; font-size:10px; line-height:1.7; }
.login-card .form-field { margin-bottom:15px; }
.login-submit { width:100%; margin-top:8px; }
.login-note { margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); color:#615c55; font-size:9px; line-height:1.7; }

@media (max-width: 1100px) {
    .admin-shell { grid-template-columns:220px minmax(0,1fr); }
    .admin-form-shell { grid-template-columns:minmax(0,1fr) 280px; }
    .album-row { grid-template-columns:minmax(200px,1.1fr) 120px 90px 120px 150px; gap:10px; }
}
@media (max-width: 860px) {
    :root { --page:min(100% - 32px, 1380px); }
    .album-nav { grid-template-columns:52px minmax(0,1fr) auto; gap:8px; padding:0 16px; }
    .gallery-heading { grid-template-columns:1fr; gap:22px; align-items:start; }
    .admin-shell { display:block; }
    .admin-sidebar { position:relative; height:auto; padding:18px 20px; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); flex-direction:row; align-items:center; gap:16px; }
    .admin-brand { padding:0; margin-right:auto; }
    .admin-brand div:last-child { display:none; }
    .admin-menu { display:flex; }
    .admin-menu a { min-width:44px; justify-content:center; padding:0 10px; }
    .admin-menu a span { display:none; }
    .admin-sidebar-bottom { margin:0; padding:0; border:0; }
    .admin-user { display:none; }
    .admin-user-button { width:auto; min-width:48px; padding:6px; }
    .admin-user-copy { display:none; }
    .admin-user-chevron { margin-left:2px; }
    .admin-profile-menu { left:auto; right:0; bottom:auto; top:calc(100% + 10px); width:min(280px,calc(100vw - 40px)); }
    .settings-grid { grid-template-columns:1fr; }
    .settings-note-card { display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:14px; align-items:start; }
    .settings-note-card h3, .settings-note-card p { grid-column:2; }
    .settings-note-row { grid-column:1/-1; }
    .admin-logout { margin:0; min-height:44px; align-items:center; }
    .admin-main { padding:30px 22px 44px; }
    .admin-stats { grid-template-columns:repeat(2,1fr); }
    .admin-stat:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,.08); }
    .admin-stat:nth-child(4) { border-top:1px solid rgba(255,255,255,.08); }
    .album-row { grid-template-columns:minmax(180px,1fr) 100px 125px 150px; }
    .album-meta { display:none; }
    .admin-form-shell { grid-template-columns:1fr; }
    .admin-side { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .admin-side-card + .admin-side-card { margin-top:0; }
    .login-page { grid-template-columns:1fr; }
    .login-art { display:none; }
    .login-panel { border-left:0; }
}
@media (max-width: 620px) {
    :root { --page:min(100% - 24px, 1380px); --nav-height:68px; }
    .hero-copy { left:50%; bottom:86px; width:min(100% - 40px, 520px); }
    .hero-kicker { font-size:9px; letter-spacing:.16em; }
    .hero h1 { margin-top:10px; font-size:clamp(32px,10vw,44px); line-height:.98; }
    .scroll-cue { bottom:18px; font-size:8px; letter-spacing:.1em; }
    .scroll-cue i { width:20px; height:20px; }
    .scroll-cue i::after { top:5px; height:7px; }
    .album-nav {
        grid-template-columns:42px minmax(0,1fr) auto;
        grid-template-areas:
            "mark . tools"
            "tabs tabs tabs";
        column-gap:10px;
        row-gap:8px;
        padding:8px 12px 10px;
    }
    .nav-mark { grid-area:mark; width:42px; height:42px; font-size:16px; }
    .nav-tools { grid-area:tools; }
    .category-tabs {
        grid-area:tabs;
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        justify-items:stretch;
        gap:6px;
        overflow:visible;
        padding:0;
    }
    .category-tab {
        width:100%;
        min-width:0;
        min-height:46px;
        padding:7px 9px;
        border:1px solid var(--line);
        border-radius:15px;
        background:color-mix(in srgb, var(--surface) 62%, transparent);
        font-size:10px;
        font-weight:600;
        line-height:1.25;
        text-align:center;
        white-space:normal;
        overflow-wrap:anywhere;
        text-wrap:balance;
    }
    .category-tab span { margin-left:3px; font-size:9px; }
    .category-tab.is-active { border-color:transparent; }
    .gallery-shell { padding-top:66px; }
    .gallery-heading { margin-bottom:28px; }
    .gallery-heading h2 {
        width:min(100%, 340px);
        margin-top:7px;
        margin-left:auto;
        margin-right:auto;
        font-size:clamp(29px, 8vw, 32px);
        line-height:.98;
        letter-spacing:-.03em;
        text-wrap:balance;
    }
    .gallery-heading p { font-size:11px; }
    .masonry { --masonry-gap:7px; }
    .photo-overlay { display:none; }
    .album-footer { align-items:flex-start; flex-direction:column; margin-top:80px; }
    .lightbox-chrome { left:14px; right:14px; top:12px; }
    .lightbox-stage { inset:70px 12px 42px; }
    .lightbox-arrow { top:auto; bottom:4px; width:54px; height:44px; background:rgba(255,255,255,.05); border-radius:999px; }
    .lightbox-prev { left:calc(50% - 62px); } .lightbox-next { right:calc(50% - 62px); }
    .qr-card { padding:34px 20px 24px; }
    .qr-frame { width:210px; height:210px; }
    .admin-sidebar { padding:12px 14px; }
    .admin-brand { min-width:44px; min-height:44px; justify-content:center; }
    .admin-brand-mark { width:44px; height:44px; }
    .admin-menu a { min-width:44px; padding:0; justify-content:center; }
    .admin-user-button { min-width:44px; min-height:44px; }
    .admin-user-chevron { display:none; }
    .admin-profile-menu { width:min(286px,calc(100vw - 28px)); right:0; }
    .settings-topbar { align-items:flex-start; flex-direction:column; gap:14px; }
    .settings-tabs { grid-template-columns:1fr; }
    .settings-tab { min-height:58px; }
    .settings-card-head { flex-direction:column; align-items:flex-start; }
    .settings-form-card, .settings-note-card { padding:20px; }
    .settings-form-actions .admin-primary { width:100%; }
    .brand-preview { align-items:flex-start; }
    .admin-confirm-actions { flex-direction:column-reverse; }
    .admin-confirm-actions > *, .admin-confirm-actions form, .admin-confirm-actions button { width:100%; }
    .admin-logout { font-size:0; width:40px; justify-content:center; }
    .admin-logout::after { content:"↗"; font-size:14px; }
    .admin-main { padding:24px 14px 38px; }
    .admin-topbar { align-items:flex-end; margin-bottom:24px; }
    .admin-heading h1 { font-size:40px; }
    .admin-heading p { display:none; }
    .admin-primary { padding:0 13px; }
    .admin-primary .button-label-mobile { display:none; }
    .admin-stat { padding:16px; }
    .admin-stat strong { font-size:28px; }
    .album-row { grid-template-columns:minmax(0,1fr) 96px; min-height:86px; padding:14px; }
    .album-count, .status-pill { grid-column:1; }
    .album-count { display:none; }
    .row-actions { grid-column:2; grid-row:1/3; align-self:center; }
    .form-grid { grid-template-columns:1fr; gap:15px; }
    .form-field.is-full { grid-column:auto; }
    .form-section-head { align-items:flex-start; flex-direction:column; gap:5px; }
    .form-actions { flex-direction:column-reverse; }
    .form-actions > * { width:100%; }
    .admin-side { grid-template-columns:1fr; }
    .login-panel { padding:24px; }
    .login-card .admin-brand { padding-bottom:38px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .photo-card { opacity:1; transform:none; }
}