:root{
  --gold:#d4af37;
  --gold-light:#f4d77a;
  --gold-soft:rgba(212,175,55,0.18);
  --bg:#1a0f2e;
  --bg-deep:#0f0820;
  --danger:#e57373;
  --danger-deep:#7a2222;
  --ink:#f4d77a;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg-deep);color:var(--gold-light);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
body{min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden}

.bg-sparkles{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5;
  background-image:
    radial-gradient(circle at 10% 12%, var(--gold) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 8%, var(--gold-light) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 86%, var(--gold) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 92% 76%, var(--gold-light) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 3%, var(--gold) 0 1px, transparent 1.5px),
    radial-gradient(circle at 96% 42%, var(--gold) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 4% 52%, var(--gold-light) 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 95%, var(--gold) 0 1px, transparent 1.5px);
}

/* ==== Views ==== */
.view{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:10}

/* Gallery is the always-rendered base layer */
.view-gallery{visibility:visible;opacity:1}

/* Modal-style views fade in/out smoothly */
.view-lightbox,.view-video,.view-slideshow,.view-progress,.view-success{
  background:#0a0418;
  z-index:30;
  opacity:0;
  visibility:hidden;
  transform:scale(0.96);
  pointer-events:none;
  transition:opacity 0.24s ease,transform 0.24s ease,visibility 0s linear 0.24s
}
.view-lightbox.active,.view-video.active,.view-slideshow.active,.view-progress.active,.view-success.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  pointer-events:auto;
  transition:opacity 0.24s ease,transform 0.24s ease
}
.view-slideshow{background:#000;z-index:38}
.view-progress,.view-success{z-index:40;background:var(--bg)}

/* ==== Gallery header ==== */
.g-header{padding:max(env(safe-area-inset-top),18px) 18px 12px;text-align:center;border-bottom:0.5px solid rgba(212,175,55,0.25);position:relative;flex-shrink:0;background:var(--bg);z-index:5}
.ornament{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold);font-size:13px}
.ornament-line{width:36px;height:0.5px;background:var(--gold)}
.title{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--gold-light);letter-spacing:0.5px;margin:6px 0 0;line-height:1.1}
.sub{font-size:11px;color:var(--gold);letter-spacing:2.8px;text-transform:uppercase;margin:4px 0 0;opacity:0.85}

.select-toggle,.refresh-btn{position:absolute;top:max(env(safe-area-inset-top),18px);width:38px;height:38px;border-radius:50%;background:transparent;border:0;color:var(--gold-light);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.select-toggle{right:10px}
.refresh-btn{left:10px}
.select-toggle:active,.refresh-btn:active{background:rgba(212,175,55,0.15)}

/* ==== Slideshow CTA ==== */
.slideshow-cta-wrap{padding:14px 18px 6px;display:flex;justify-content:center;flex-shrink:0;background:var(--bg);position:relative;z-index:4}
.slideshow-cta{background:linear-gradient(135deg,#1a0f2e 0%,#2a1a40 50%,#1a0f2e 100%);color:var(--gold-light);border:1px solid var(--gold);padding:11px 22px;border-radius:26px;font-size:14px;font-family:var(--serif);font-weight:500;display:flex;align-items:center;gap:10px;cursor:pointer;letter-spacing:0.5px;position:relative;overflow:hidden;transition:transform 0.15s}
.slideshow-cta:active{transform:scale(0.97)}
.slideshow-cta i.ti-wand{color:var(--gold);font-size:18px}
.slideshow-cta .slideshow-spark{color:var(--gold);font-size:13px;animation:gentleSparkle 2.5s ease-in-out infinite}
@keyframes gentleSparkle{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}
.slideshow-cta:disabled{opacity:0.4;cursor:not-allowed}

/* ==== Stats ==== */
.stats{display:flex;justify-content:space-around;padding:10px 14px;border-bottom:0.5px solid rgba(212,175,55,0.18);flex-shrink:0;background:var(--bg)}
.stat-num{font-family:var(--serif);font-size:20px;color:var(--gold-light);font-weight:500;line-height:1}
.stat-lbl{font-size:9px;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;opacity:0.75;margin-top:3px}
.stat{text-align:center;flex:1}

/* ==== Grid ==== */
.gallery-scroll{flex:1;overflow-y:auto;padding:3px 3px 100px;-webkit-overflow-scrolling:touch;position:relative;z-index:2}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
@media(min-width:600px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(6,1fr)}}

.tile{aspect-ratio:1;border-radius:4px;overflow:hidden;position:relative;cursor:pointer;background:#2a1f3a;transition:transform 0.15s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tile:active{transform:scale(0.96)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;background:#2a1f3a;pointer-events:none}
.tile.new{animation:fadeInTile 0.6s ease-out}
@keyframes fadeInTile{0%{transform:scale(0.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* long-press feedback */
.tile.pressing{animation:pressFeedback 0.45s ease-out}
@keyframes pressFeedback{0%{transform:scale(1);box-shadow:0 0 0 0 var(--gold)}80%{transform:scale(0.92);box-shadow:0 0 0 3px var(--gold)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}

.video-badge{position:absolute;top:5px;right:5px;background:rgba(15,8,32,0.8);color:var(--gold-light);font-size:10px;padding:2px 7px;border-radius:8px;display:flex;align-items:center;gap:3px;z-index:2}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;text-shadow:0 1px 5px rgba(0,0,0,0.6);pointer-events:none;z-index:1}

.check-badge{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:15px;border:1.5px solid var(--gold-light);z-index:3;opacity:0;transform:scale(0);transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1)}
.tile.selected .check-badge{opacity:1;transform:scale(1)}
.tile.selected{outline:3px solid var(--gold);outline-offset:-3px}
.tile.selected::after{content:'';position:absolute;inset:0;background:rgba(212,175,55,0.28);pointer-events:none;z-index:2}

/* selection mode visible hint on all tiles */
.gallery-scroll.select-mode .tile:not(.selected) .check-badge{opacity:0.3;transform:scale(0.85)}

/* ==== Empty state ==== */
.empty-state{padding:60px 30px;text-align:center;color:var(--gold)}
.empty-state.hidden{display:none}
.empty-state i{font-size:48px;color:var(--gold)}
.empty-title{font-family:var(--serif);font-size:22px;color:var(--gold-light);margin:14px 0 6px;font-weight:500}
.empty-sub{font-size:13px;opacity:0.75;margin:0}

.footer-note{text-align:center;color:var(--gold);font-size:10px;opacity:0.55;margin:24px 0 0;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--serif);font-style:italic}

/* ==== FAB ==== */
.fab{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:18px;width:62px;height:62px;border-radius:50%;background:var(--gold);color:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid var(--gold-light);cursor:pointer;z-index:42;transition:bottom 0.8s cubic-bezier(0.65,0,0.35,1),right 0.8s cubic-bezier(0.65,0,0.35,1),width 0.8s cubic-bezier(0.65,0,0.35,1),height 0.8s cubic-bezier(0.65,0,0.35,1),font-size 0.8s cubic-bezier(0.65,0,0.35,1),transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease}
.fab:active{transform:scale(0.92) !important;transition:transform 0.12s}
.fab::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(212,175,55,0.5);animation:pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.45);opacity:0}}

/* Welcome state: FAB starts huge & centered, then transitions to normal */
.fab.fab--welcome{bottom:calc(50vh - 65px) !important;right:calc(50% - 65px) !important;width:130px !important;height:130px !important;font-size:58px !important}

/* Dim layer during welcome */
.welcome-dim{position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:41;opacity:0;transition:opacity 0.5s ease;pointer-events:none}
.welcome-dim.show{opacity:1}

/* Centered "Add your moments" label during welcome */
.welcome-label{position:fixed;top:calc(50vh + 80px);left:50%;transform:translateX(-50%);color:var(--gold-light);font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:0.5px;opacity:0;transition:opacity 0.5s ease;pointer-events:none;z-index:42;text-shadow:0 1px 8px rgba(0,0,0,0.5)}
.welcome-label.show{opacity:1}

/* "Tap to upload" tooltip pointing at FAB */
.fab-tip{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));right:18px;background:var(--gold);color:var(--bg-deep);padding:8px 14px;border-radius:18px;font-size:13px;font-weight:500;opacity:0;transform:translateY(8px) scale(0.9);transition:opacity 0.35s ease,transform 0.35s ease;pointer-events:none;z-index:43;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.fab-tip.show{opacity:1;transform:translateY(0) scale(1)}
.fab-tip::after{content:'';position:absolute;bottom:-6px;right:24px;width:0;height:0;border:6px solid transparent;border-top-color:var(--gold);border-bottom:0}

/* ==== Bottom selection bar ==== */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--gold);padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;z-index:36;transform:translateY(110%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.bottom-bar.visible{transform:translateY(0)}

/* Hide FAB + tooltip when selection bar is visible */
.bottom-bar.visible ~ .fab{transform:translateY(120px) scale(0.5);opacity:0;pointer-events:none}
.bottom-bar.visible ~ .fab-tip{opacity:0 !important;transform:translateY(20px) scale(0.8) !important}

/* Hide FAB + tooltip when a modal overlay is active */
body.overlay-active .fab{opacity:0;pointer-events:none;transform:scale(0.7)}
body.overlay-active .fab-tip{opacity:0 !important}
.selection-info{color:var(--gold-light);font-size:14px}
.select-count{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:500;margin-right:4px}
.bb-actions{display:flex;gap:8px;align-items:center}
.dl-btn{background:var(--gold);color:var(--bg-deep);padding:11px 18px;border-radius:24px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:7px;border:0;cursor:pointer;font-family:inherit}
.dl-btn:active{transform:scale(0.96)}
.dl-btn:disabled{opacity:0.5;cursor:not-allowed}
.dl-btn i{font-size:16px}
.delete-btn{background:var(--danger);color:#fff;border:1px solid #fff}
.delete-btn:active{transform:scale(0.96)}

.icon-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:0;color:var(--gold-light);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:active{background:rgba(212,175,55,0.15)}

/* ==== Lightbox / Video ==== */
.lb-top{position:absolute;top:0;left:0;right:0;padding:max(env(safe-area-inset-top),14px) 12px 12px;display:flex;align-items:center;justify-content:space-between;z-index:5;background:linear-gradient(180deg,rgba(0,0,0,0.6),transparent)}
.lb-top-actions{display:flex;gap:4px}
.lb-title{color:var(--gold-light);font-size:14px;font-family:var(--serif);font-weight:500}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:50px 0;touch-action:none;overflow:hidden}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none;transition:none;will-change:transform,opacity}
.lb-stage.animating img{transition:transform 0.28s cubic-bezier(0.22,0.61,0.36,1),opacity 0.28s ease}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(15,8,32,0.7);border:1px solid rgba(212,175,55,0.3);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;z-index:5}
.nav-arrow:active{background:rgba(15,8,32,0.95)}
.nav-prev{left:10px}
.nav-next{right:10px}

.vid-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 0 70px;position:relative;touch-action:none;overflow:hidden}
.vid-stage video{max-width:100%;max-height:100%;background:#000;border-radius:6px;pointer-events:none}
.vid-stage.animating video{transition:transform 0.25s ease,opacity 0.25s ease}

.vid-play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:rgba(0,0,0,0.55);color:var(--gold-light);font-size:42px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.25s,transform 0.25s;z-index:3}
.vid-stage.paused .vid-play-overlay{opacity:1}

.vid-controls{position:absolute;bottom:18px;left:18px;right:18px;display:flex;align-items:center;gap:10px;z-index:4;opacity:1;transition:opacity 0.3s}
.vid-stage.playing .vid-controls{opacity:0.6}
.vid-stage.playing.controls-visible .vid-controls{opacity:1}
.vid-progress-track{flex:1;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;position:relative;cursor:pointer}
.vid-progress-fill{height:100%;background:var(--gold);border-radius:2px;width:0;position:relative}
.vid-progress-fill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(15,8,32,0.6)}
.vid-time{color:var(--gold-light);font-size:11px;min-width:78px;text-align:right;font-variant-numeric:tabular-nums}

/* ==== Slideshow (Instagram Stories style) ==== */
.ss-bars{position:absolute;top:max(env(safe-area-inset-top),12px);left:8px;right:8px;display:flex;gap:4px;z-index:5}
.ss-bar{flex:1;height:3px;background:rgba(255,255,255,0.25);border-radius:2px;overflow:hidden;position:relative}
.ss-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:2px}
.ss-bar.done .ss-bar-fill{width:100%;transition:none}
.ss-bar.active .ss-bar-fill{width:0;transition:width linear}
.ss-bar.active.playing .ss-bar-fill{width:100%}

.ss-close{position:absolute;top:max(calc(env(safe-area-inset-top) + 18px),26px);right:14px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.45);border:0;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6}

.ss-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.ss-stage img,.ss-stage video{max-width:100%;max-height:100%;object-fit:contain;display:none}
.ss-stage img.show,.ss-stage video.show{display:block}

.ss-paused-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;font-size:40px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;pointer-events:none}
.ss-paused .ss-paused-indicator{opacity:1}

.ss-tap-zone{position:absolute;top:50px;bottom:50px;width:35%;z-index:4;cursor:pointer}
.ss-tap-prev{left:0}
.ss-tap-next{right:0}

/* ==== Progress ==== */
.progress-wrap{padding:80px 18px 30px;flex:1;overflow-y:auto}
.progress-list{display:flex;flex-direction:column;gap:14px}
.pf-head{display:flex;justify-content:space-between;font-size:12px;color:var(--gold-light);margin-bottom:6px}
.pf-head .pf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.pf-bar{height:6px;background:var(--gold-soft);border-radius:3px;overflow:hidden}
.pf-fill{height:100%;background:var(--gold);width:0;transition:width 0.25s linear;border-radius:3px}
.pf-status.done{color:var(--gold)}
.pf-status.err{color:#e57373}
.summary{text-align:center;font-size:10px;color:var(--gold);opacity:0.7;margin:18px 0 0;letter-spacing:1.8px;text-transform:uppercase}

/* ==== Success ==== */
.success-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px;text-align:center;position:relative;z-index:2}
.success-circle{width:108px;height:108px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:56px;color:var(--bg-deep);border:3px solid var(--gold-light);margin-bottom:20px;animation:popIn 0.6s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes popIn{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.success-title{font-family:var(--serif);font-size:32px;color:var(--gold-light);margin:0 0 8px;font-weight:500}
.success-sub{font-size:14px;color:var(--gold);opacity:0.85;margin:0 0 32px}
.success-btn{background:transparent;border:1px solid var(--gold);color:var(--gold-light);padding:12px 26px;border-radius:26px;font-size:14px;cursor:pointer;font-family:inherit;letter-spacing:0.5px}
.success-btn:active{background:rgba(212,175,55,0.15)}

.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sparkle{position:absolute;color:var(--gold-light);animation:sparkleRise 2.4s ease-out forwards}
@keyframes sparkleRise{0%{transform:translateY(0) scale(0) rotate(0deg);opacity:0}20%{transform:translateY(-30px) scale(1) rotate(120deg);opacity:1}100%{transform:translateY(-200px) scale(0.2) rotate(540deg);opacity:0}}

/* ==== Confirm dialog ==== */
.confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:60;padding:30px;backdrop-filter:blur(4px)}
.confirm-backdrop[hidden]{display:none}
.confirm-dialog{background:var(--bg);border:1px solid var(--gold);border-radius:18px;padding:28px 24px;max-width:340px;width:100%;text-align:center}
.confirm-icon{width:60px;height:60px;border-radius:50%;background:rgba(229,115,115,0.18);color:var(--danger);font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.confirm-title{font-family:var(--serif);font-size:22px;color:var(--gold-light);margin:0 0 6px;font-weight:500}
.confirm-sub{color:var(--gold);opacity:0.85;font-size:13px;margin:0 0 22px}
.confirm-actions{display:flex;gap:10px}
.confirm-cancel,.confirm-ok{flex:1;padding:12px;border-radius:24px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:500}
.confirm-cancel{background:transparent;border:1px solid var(--gold);color:var(--gold-light)}
.confirm-ok{background:var(--danger);border:0;color:#fff}

/* ==== Admin badge ==== */
.admin-badge{position:fixed;top:max(env(safe-area-inset-top),14px);left:50%;transform:translateX(-50%);background:rgba(229,115,115,0.18);color:var(--danger);border:1px solid var(--danger);padding:4px 12px;border-radius:14px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;z-index:20;display:flex;align-items:center;gap:4px;pointer-events:none}
.admin-badge i{font-size:11px}

/* admin-only elements - hidden by default, shown only when body.admin */
.admin-only{display:none !important}
body.admin .admin-only{display:flex !important}
body.admin .admin-only-hide{display:none !important}
body.admin .g-header .title{color:var(--danger)}

/* ==== Toast ==== */
.toast{position:fixed;top:calc(20px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-20px);background:var(--bg);border:1px solid var(--gold);color:var(--gold-light);padding:11px 20px;border-radius:26px;font-size:13px;display:flex;align-items:center;gap:8px;z-index:100;opacity:0;transition:all 0.3s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}