:root{
    --bg:#0a0806;
    --bg2:#12100d;
    --bg3:#1a1714;
    --surface:#16140f;
    --ink:#ede8df;
    --ink2:#b5ad9e;
    --ink3:#6e6558;
    --gold:#c9a227;
    --gold2:#e0be4c;
    --gold-soft:rgba(201,162,39,.08);
    --gold-glow:rgba(201,162,39,.15);
    --gold-g:linear-gradient(135deg,#c9a227 0%,#e0be4c 50%,#c9a227 100%);
    --border:rgba(255,255,255,.05);
    --border2:rgba(255,255,255,.08);
    --border-gold:rgba(201,162,39,.25);
    --card:#13110e;
    --shadow-gold:0 4px 24px rgba(201,162,39,.12);
    --shadow-lg:0 16px 64px rgba(0,0,0,.5);
    --r:8px;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Inter',system-ui,sans-serif;
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
a{text-decoration:none;color:inherit}button{border:none;cursor:pointer;font-family:inherit;background:none}img{display:block;max-width:100%}

/* === NAVBAR === */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 32px;background:rgba(10,8,6,.92);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-bottom:1px solid var(--border);transition:box-shadow .3s}
#navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.4)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:1600px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2)}
.brand-name{font-family:var(--serif);font-size:1.35rem;font-weight:500;color:var(--ink);letter-spacing:.06em}
.brand-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);margin-left:2px;display:inline-block}
.nav-right{display:flex;align-items:center;gap:14px}

/* Filter toggle (mobile only) */
.filter-toggle{display:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.04);color:var(--ink2);align-items:center;justify-content:center;transition:all .2s}
.filter-toggle:hover,.filter-toggle.active{color:var(--gold);background:var(--gold-soft)}
.filter-toggle i{width:16px;height:16px}

.date-picker{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;transition:border-color .25s,box-shadow .25s}
.date-picker:focus-within{border-color:var(--border-gold);box-shadow:var(--shadow-gold)}
.dp-icon{width:14px;height:14px;color:var(--ink3);flex-shrink:0}
.date-picker input[type="date"]{font-family:var(--sans);font-size:.72rem;color:var(--ink2);background:none;border:none;outline:none;width:110px;cursor:pointer}
.date-picker input::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}
.dp-dash{color:var(--ink3);font-size:.6rem;user-select:none}
.dp-clear{display:flex;align-items:center;color:var(--ink3);padding:2px;border-radius:50%;transition:color .2s}
.dp-clear:hover{color:var(--gold)}
.dp-clear i{width:12px;height:12px}

.btn-upload{width:40px;height:40px;border-radius:50%;background:var(--gold-g);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-gold);transition:transform .2s var(--ease-out),box-shadow .3s;position:relative;overflow:hidden;flex-shrink:0}
.btn-upload::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 60%);border-radius:50%}
.btn-upload:hover{transform:scale(1.1);box-shadow:0 6px 32px rgba(201,162,39,.3)}
.btn-upload:active{transform:scale(.95)}
.btn-upload i{width:18px;height:18px;position:relative;z-index:1}

/* === COMBOBOX === */
.upload-modal{max-width:460px}
.combo-group{margin-bottom:12px}
.combo-label{display:block;font-size:.65rem;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px;font-weight:500}
.lbl-opt{color:var(--ink3);text-transform:none;letter-spacing:.04em;font-weight:400;opacity:.7}
.combo-wrap{position:relative}
.combo-input{width:100%;padding:10px 36px 10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-family:var(--sans);font-size:.8rem;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.combo-input:focus{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.combo-input::placeholder{color:var(--ink3)}
#catComboWrap .combo-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink3);border-radius:4px;transition:color .2s,background .2s}
#capComboWrap .combo-toggle{position:absolute;right:4px;bottom:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink3);border-radius:4px;transition:color .2s,background .2s}
.combo-toggle:hover{color:var(--gold);background:var(--gold-soft)}
.combo-toggle i{width:14px;height:14px}
.combo-toggle.open i{transform:rotate(180deg)}

/* Language tabs for captions */
.combo-lang-tabs{display:flex;gap:4px;margin-bottom:6px}
.lang-tab{padding:4px 12px;font-size:.65rem;font-weight:500;letter-spacing:.06em;border-radius:100px;color:var(--ink3);border:1px solid var(--border);transition:all .2s}
.lang-tab.active{color:var(--gold);border-color:var(--border-gold);background:var(--gold-soft)}
.lang-tab:hover:not(.active){color:var(--ink2);border-color:var(--border2)}

/* Dropdown */
.combo-dropdown{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:20;display:none;scrollbar-width:thin;scrollbar-color:var(--ink3) transparent}
.combo-dropdown.open{display:block;animation:ddIn .15s var(--ease-out)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.combo-dropdown::-webkit-scrollbar{width:4px}
.combo-dropdown::-webkit-scrollbar-track{background:transparent}
.combo-dropdown::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}

.dd-cat-header{padding:8px 12px 4px;font-size:.6rem;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-weight:600;position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
.dd-cat-header .dd-icon{font-size:.72rem}
.dd-item{padding:8px 12px;font-size:.76rem;color:var(--ink2);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item:hover,.dd-item.highlighted{background:var(--gold-soft);color:var(--ink)}
.dd-item.selected{color:var(--gold)}
.dd-empty{padding:16px 12px;font-size:.72rem;color:var(--ink3);text-align:center;font-style:italic}

/* === GALLERY === */
#gallery{flex:1;padding:76px 0 0}

/* Decorative gold line under navbar */
.gallery-intro{padding:28px 32px 0;max-width:1600px;margin:0 auto;text-align:center}
/* SEO text — present for crawlers/screen readers, visually hidden */
.seo-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gallery-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-gold) 20%,var(--border-gold) 80%,transparent)}

/* === GALLERY TOOLBAR (category filter + count) === */
.gallery-toolbar{max-width:1600px;margin:0 auto;padding:18px 32px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cat-filter{display:flex;gap:8px;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
.cat-filter::-webkit-scrollbar{display:none}
.cat-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--ink2);font-size:.72rem;font-weight:500;letter-spacing:.03em;white-space:nowrap;transition:all .2s var(--ease)}
.cat-chip:hover{color:var(--ink);border-color:var(--border2)}
.cat-chip.active{color:var(--bg);background:var(--gold-g);border-color:transparent;font-weight:600}
.cat-chip span{font-size:.6rem;opacity:.7;font-variant-numeric:tabular-nums}
.cat-chip.active span{opacity:.85}
.result-count{font-size:.66rem;color:var(--ink3);letter-spacing:.06em;white-space:nowrap;flex-shrink:0}

/* === PAGINATION === */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:24px 32px 48px}
.pagination:empty{display:none}
.pg-btn{min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--ink2);font-size:.74rem;font-weight:500;font-variant-numeric:tabular-nums;transition:all .2s var(--ease)}
.pg-btn:hover:not(:disabled):not(.active){color:var(--ink);border-color:var(--border-gold);background:var(--gold-soft)}
.pg-btn.active{background:var(--gold-g);color:var(--bg);border-color:transparent;font-weight:700;cursor:default}
.pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pg-btn i{width:15px;height:15px}
.pg-ellipsis{color:var(--ink3);padding:0 2px;user-select:none}

/* Timeline */
.tl-group{margin-bottom:0}
.tl-label{position:sticky;top:60px;z-index:10;padding:24px 32px 16px;display:flex;align-items:baseline;gap:14px;background:rgba(10,8,6,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(201,162,39,.06)}
.tl-label-text{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--gold);letter-spacing:.06em}
.tl-label-count{font-size:.65rem;font-family:var(--sans);color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;font-weight:400;padding:3px 10px;border:1px solid var(--border);border-radius:100px}
.tl-label-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}

/* Masonry — full photos, NO crop */
.sg{columns:4;column-gap:10px;padding:10px 32px 32px}

.sg-item{break-inside:avoid;position:relative;overflow:hidden;cursor:pointer;background:var(--bg2);margin-bottom:10px;border-radius:12px;border:1px solid transparent;transition:border-color .5s var(--ease),box-shadow .5s var(--ease);perspective:800px}
.sg-item:hover{border-color:rgba(201,162,39,.15);box-shadow:0 12px 48px rgba(0,0,0,.35),0 0 24px rgba(201,162,39,.06)}

.sg-item img{width:100%;display:block;opacity:0;transform:scale(1.08);transition:opacity .8s var(--ease-out),transform 10s cubic-bezier(.08,0,.12,1),filter .5s var(--ease);filter:brightness(.86) contrast(1.06) saturate(.92)}
.sg-item img.loaded{opacity:1;transform:scale(1);animation:photoReveal .9s var(--ease-out) forwards}
.sg-item:hover img.loaded{transform:scale(1.04);filter:brightness(1) contrast(1) saturate(1.05);transition:opacity .8s var(--ease-out),transform 16s cubic-bezier(.06,0,.1,1),filter .5s var(--ease)}
@keyframes photoReveal{
    0%{opacity:0;transform:scale(1.12);filter:brightness(.5) contrast(1.1) saturate(0)}
    60%{opacity:1;filter:brightness(.86) contrast(1.06) saturate(.6)}
    100%{opacity:1;transform:scale(1);filter:brightness(.86) contrast(1.06) saturate(.92)}
}

/* Gold shimmer on hover */
.sg-item::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,transparent 40%,rgba(201,162,39,.06) 50%,transparent 60%);background-size:300% 300%;background-position:100% 100%;opacity:0;transition:opacity .4s;pointer-events:none}
.sg-item:hover::before{opacity:1;animation:shimmerGold 1.8s ease forwards}
@keyframes shimmerGold{
    0%{background-position:100% 100%}
    100%{background-position:0% 0%}
}

/* Overlay with metadata */
.sg-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .4s var(--ease)}
.sg-item:hover .sg-over{opacity:1}
.sg-over::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.9) 0%,rgba(10,8,6,.3) 35%,rgba(10,8,6,.05) 55%,transparent 100%)}
.sg-over::after{content:'';position:absolute;inset:4px;border:1px solid rgba(201,162,39,.1);border-radius:8px;pointer-events:none;transition:border-color .4s,box-shadow .4s}
.sg-item:hover .sg-over::after{border-color:rgba(201,162,39,.3);box-shadow:inset 0 0 30px rgba(201,162,39,.04)}
.sg-over *{position:relative;z-index:1}

.sg-cap{color:var(--ink);font-family:var(--serif);font-size:1.05rem;font-weight:500;line-height:1.35;padding:0 18px;transform:translateY(10px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.sg-item:hover .sg-cap{transform:translateY(0);opacity:1;transition-delay:.05s}
.sg-date{color:var(--gold);font-size:.6rem;margin-top:5px;padding:0 18px;font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;font-weight:500;transform:translateY(8px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.sg-item:hover .sg-date{transform:translateY(0);opacity:1;transition-delay:.1s}
.sg-cam{color:var(--ink3);font-size:.54rem;margin-top:3px;padding:0 18px 16px;font-family:var(--sans);letter-spacing:.06em;transform:translateY(8px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.sg-item:hover .sg-cam{transform:translateY(0);opacity:1;transition-delay:.15s}

/* Scroll reveal */
.sg-item{opacity:0;transform:translateY(50px) scale(.95);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.sg-item.revealed{opacity:1;transform:translateY(0) scale(1)}
.sg-item.revealed:nth-child(2n){transition-delay:.1s}
.sg-item.revealed:nth-child(3n){transition-delay:.2s}
.sg-item.revealed:nth-child(4n){transition-delay:.3s}

.tl-label{opacity:0;transform:translateX(-20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.tl-label.revealed{opacity:1;transform:translateX(0)}

.gallery-intro{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.gallery-intro.revealed{opacity:1;transform:translateY(0)}

footer{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
footer.revealed{opacity:1;transform:translateY(0)}

/* Skeleton */
.sg-item.skel{opacity:1;transform:none;aspect-ratio:3/4;min-height:200px}
.sg-item.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shim 1.8s ease infinite}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

.empty-msg{text-align:center;padding:200px 32px;color:var(--ink3);display:none}
.empty-msg.show{display:block}
.empty-msg i{width:56px;height:56px;margin:0 auto 20px;opacity:.12;color:var(--gold)}
.empty-msg p{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink3);letter-spacing:.03em}

/* === FOOTER === */
footer{padding:32px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:16px;font-size:.72rem;color:var(--ink3);background:var(--bg)}
.f-line{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-bottom:4px}
/* About text — kept in DOM for SEO, hidden from the UI (crawler/screen-reader only) */
.f-about{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.f-brand{font-family:var(--serif);font-size:.95rem;color:var(--ink2);letter-spacing:.1em}
.f-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.f-links a{color:var(--ink3);transition:color .2s;letter-spacing:.04em;font-size:.7rem}
.f-links a:hover{color:var(--gold)}
.f-copy{font-size:.62rem;color:var(--ink3);opacity:.5;letter-spacing:.05em}

/* === MODAL === */
.overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);display:none;align-items:flex-start;justify-content:center;padding:100px 16px;overflow-y:auto}
.overlay.open{display:flex}
.modal{width:100%;max-width:400px;background:var(--surface);border-radius:12px;border:1px solid var(--border2);animation:pop .25s var(--ease-out);box-shadow:var(--shadow-lg)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.m-head h2{font-family:var(--serif);font-size:1.1rem;font-weight:400;color:var(--ink);letter-spacing:.04em}
.m-x{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink3);transition:all .2s}
.m-x:hover{color:var(--gold);background:var(--gold-soft)}
.m-x i{width:14px;height:14px}
.m-body{padding:20px}
.m-center{text-align:center}

.pin{width:140px;padding:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-family:monospace;font-size:1.1rem;text-align:center;letter-spacing:5px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.pin:focus{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.err{color:#e84d4d;font-size:.7rem;margin-top:8px;display:none}
.err.show{display:block;animation:shake .25s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.small-hint{font-size:.7rem;color:var(--ink2);margin-bottom:8px}

.inp{width:100%;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-family:var(--sans);font-size:.78rem;color:var(--ink);outline:none;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--gold);box-shadow:var(--shadow-gold)}.inp::placeholder{color:var(--ink3)}
.inp-ta{min-height:48px;resize:vertical}

.btn{font-family:var(--sans);width:100%;padding:10px;margin-top:6px;background:var(--gold-g);color:var(--bg);border-radius:var(--r);font-size:.8rem;font-weight:600;letter-spacing:.03em;transition:opacity .2s,transform .15s;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%)}
.btn:hover:not(:disabled){opacity:.92}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.2;cursor:not-allowed}

.drop{border:1px dashed var(--border2);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;margin:6px 0;transition:border-color .2s,background .2s}
.drop:hover,.drop.drag-over{border-color:var(--gold);background:var(--gold-soft)}
.drop i{width:24px;height:24px;color:var(--ink3);margin-bottom:6px}
.drop p{font-size:.7rem;color:var(--ink3)}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px;margin-bottom:8px}
.thumb{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-rm{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.5rem}
.thumb-rm:hover{background:#e84d4d}

.prog{margin-top:8px}
.prog-bar{height:2px;background:var(--bg3);border-radius:100px;overflow:hidden}
.prog-fill{height:100%;background:var(--gold-g);border-radius:100px;width:0%;transition:width .3s}
.prog-txt{font-size:.64rem;color:var(--ink3);margin-top:4px;text-align:center}

/* === LIGHTBOX === */
.lb{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.98);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb-x{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.04);color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;border:1px solid rgba(255,255,255,.06)}
.lb-x:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}.lb-x i{width:16px;height:16px}
.lb-del{position:absolute;top:16px;left:16px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(232,77,77,.12);color:#e84d4d;display:none;align-items:center;justify-content:center;transition:all .2s;border:1px solid rgba(232,77,77,.25)}
.lb-del:hover{background:rgba(232,77,77,.9);color:#fff;border-color:transparent}
.lb-del i{width:16px;height:16px}
body.authed .lb.open .lb-del{display:flex}
.lb-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.03);color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;border:1px solid rgba(255,255,255,.05)}
.lb-arr:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}.lb-arr i{width:20px;height:20px}
.lb-l{left:16px}.lb-r{right:16px}
.lb-main{max-width:90vw;max-height:90vh;text-align:center}
/* Two-layer stage — all motion driven by the Web Animations API (script.js) */
.lb-stage{position:relative;width:90vw;height:76vh;overflow:hidden}
.lb-layer{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;opacity:0;will-change:opacity,transform,filter;backface-visibility:hidden}

/* === Lightbox controls (slideshow + sound) === */
.lb-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px}
.lb-ctrl{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;background:rgba(255,255,255,.06);color:var(--ink);border:1px solid rgba(255,255,255,.12);font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:all .2s}
.lb-ctrl:hover{background:var(--gold-g);color:var(--bg);border-color:transparent}
.lb-ctrl i{width:15px;height:15px}
.lb-sound,.lb-music{display:none;padding:9px 12px}
.lb.slideshow .lb-music{display:flex}
.lb.slideshow.has-music .lb-sound{display:flex}
.lb.slideshow .lb-play{background:rgba(201,162,39,.16);border-color:var(--border-gold);color:var(--gold)}
.lb.slideshow .lb-play:hover{background:var(--gold-g);color:var(--bg)}
.lb-sound.muted{color:var(--ink3)}
.lb-music.active,.lb-fx.active{background:rgba(201,162,39,.16);border-color:var(--border-gold);color:var(--gold)}

/* Transition picker panel (PowerPoint-style) */
.lb-fx-panel{position:absolute;bottom:72px;left:50%;transform:translateX(-50%) translateY(10px);z-index:4;width:min(460px,92vw);background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--shadow-lg);padding:14px;display:none;opacity:0;transition:opacity .2s,transform .2s}
.lb-fx-panel.open{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
.fx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fx-head>span{font-size:.7rem;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.fx-head>div{display:flex;gap:6px}
.fx-head button{font-size:.58rem;padding:4px 11px;border-radius:100px;border:1px solid var(--border);color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;transition:all .2s}
.fx-head button:hover{color:var(--gold);border-color:var(--border-gold);background:var(--gold-soft)}
.fx-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.fx-grid::-webkit-scrollbar{width:4px}.fx-grid::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
.fx-chip{padding:7px 13px;border-radius:100px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--ink3);font-size:.7rem;font-weight:500;letter-spacing:.02em;transition:all .15s}
.fx-chip:hover{color:var(--ink2);border-color:var(--border2)}
.fx-chip.on{background:var(--gold-soft);border-color:var(--border-gold);color:var(--gold)}

/* Music search panel */
.lb-music-panel{position:absolute;bottom:72px;left:50%;transform:translateX(-50%) translateY(10px);z-index:4;width:min(420px,92vw);background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;display:none;opacity:0;transition:opacity .2s,transform .2s}
.lb-music-panel.open{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mp-now{font-size:.7rem;color:var(--gold);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-skip{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink2);border:1px solid var(--border);transition:all .2s}
.mp-skip:hover{color:var(--gold);border-color:var(--border-gold);background:var(--gold-soft)}
.mp-skip i{width:14px;height:14px}
/* Music controls row: on/off toggle + volume */
.mp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:2px 2px}
.mp-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.mp-toggle input{display:none}
.mp-switch{width:34px;height:18px;border-radius:100px;background:var(--bg3);border:1px solid var(--border2);position:relative;transition:background .2s,border-color .2s;flex-shrink:0}
.mp-switch::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink3);transition:transform .2s,background .2s}
.mp-toggle input:checked+.mp-switch{background:var(--gold-soft);border-color:var(--border-gold)}
.mp-toggle input:checked+.mp-switch::after{transform:translateX(16px);background:var(--gold)}
.mp-toggle-lbl{font-size:.72rem;color:var(--ink2);letter-spacing:.04em}
.mp-vol{display:flex;align-items:center;gap:8px;flex:1;max-width:190px}
.mp-vol i{width:15px;height:15px;color:var(--ink3);flex-shrink:0}
.mp-vol input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:100px;background:var(--bg3);outline:none;cursor:pointer}
.mp-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 6px rgba(201,162,39,.4)}
.mp-vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--gold);cursor:pointer}
.mp-row.off .mp-vol{opacity:.4;pointer-events:none}

.mp-search{position:relative;display:flex;align-items:center}
.mp-search i{position:absolute;left:11px;width:14px;height:14px;color:var(--ink3);pointer-events:none}
.mp-search input{width:100%;padding:9px 12px 9px 34px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);font-family:var(--sans);font-size:.78rem;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.mp-search input:focus{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.mp-results{margin-top:8px;max-height:220px;overflow-y:auto;scrollbar-width:thin}
.mp-results::-webkit-scrollbar{width:4px}.mp-results::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
.mp-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .15s}
.mp-item:hover{background:var(--gold-soft)}
.mp-item img{width:38px;height:38px;border-radius:5px;object-fit:cover;flex-shrink:0}
.mp-item-txt{min-width:0}
.mp-item-title{font-size:.74rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-item-artist{font-size:.64rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-item.playing .mp-item-title{color:var(--gold)}
.mp-empty{padding:14px 8px;font-size:.72rem;color:var(--ink3);text-align:center}
.lb-cap{margin-top:20px}
.lb-cap .lb-title{color:var(--ink);font-family:var(--serif);font-size:1.2rem;font-weight:400;letter-spacing:.03em}
.lb-cap p{font-size:.68rem;color:var(--gold);margin-top:6px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.lb-exif{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.lb-exif span{font-size:.6rem;color:var(--ink3);letter-spacing:.04em}

/* === TOAST === */
.toasts{position:fixed;bottom:16px;right:16px;z-index:9000;display:flex;flex-direction:column;gap:6px}
.toast{padding:10px 14px;background:var(--surface);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.4);font-size:.74rem;border-left:2px solid var(--gold);animation:tin .25s var(--ease-out)}
.toast.success{border-left-color:#22c55e}.toast.error{border-left-color:#e84d4d}
.toast.out{animation:tout .15s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(16px)}}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media(max-width:1200px){
    .sg{columns:3;column-gap:8px;padding:8px 24px 24px}
}

/* Small tablet / large phone */
@media(max-width:768px){
    #navbar{padding:0 16px}
    .nav-inner{height:54px}
    .brand img{width:28px;height:28px}
    .brand-name{font-size:1.15rem}

    .filter-toggle{display:flex}
    .date-picker{display:none;position:absolute;top:54px;left:0;right:0;padding:12px 16px;background:rgba(10,8,6,.96);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid var(--border);border-radius:0;gap:8px;justify-content:center;animation:slideDown .2s var(--ease-out)}
    .date-picker.mobile-open{display:flex}
    @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

    .sg{columns:2;column-gap:6px;padding:6px 12px 12px}
    .sg-item{margin-bottom:6px}
    .sg-cap{font-size:.9rem;padding:0 14px}
    .sg-date,.sg-cam{padding:0 14px}
    .sg-cam{padding-bottom:14px}

    .tl-label{top:54px;padding:18px 16px 12px}
    .tl-label-text{font-size:1.25rem}
    .gallery-intro{padding:22px 16px 0}
    .gallery-toolbar{padding:14px 16px 2px}
    .pagination{padding:20px 16px 40px}

    #gallery{padding:60px 0 0}
    footer{padding:24px 16px}
    .f-links{gap:16px}

    .lb-l{left:8px}.lb-r{right:8px}
    .lb-arr{width:38px;height:38px}
}

/* Phone */
@media(max-width:480px){
    #navbar{padding:0 12px}
    .nav-inner{height:50px}
    .brand-name{font-size:1.05rem}
    .brand img{width:26px;height:26px;border-radius:6px}
    .btn-upload{width:36px;height:36px}
    .btn-upload i{width:16px;height:16px}
    .filter-toggle{width:32px;height:32px}

    .date-picker.mobile-open{top:50px;padding:10px 12px}

    .sg{columns:2;column-gap:4px;padding:4px 8px 8px}
    .sg-item{margin-bottom:4px;border-radius:9px}
    .sg-cap{font-size:.82rem;padding:0 10px}
    .sg-date{padding:0 10px;font-size:.55rem}
    .sg-cam{padding:0 10px 10px;font-size:.5rem}

    .tl-label{top:50px;padding:14px 12px 10px;gap:10px}
    .tl-label-text{font-size:1.1rem}
    .tl-label-count{font-size:.58rem;padding:2px 8px}

    .gallery-intro{padding:18px 12px 0}
    #gallery{padding:56px 0 0}
    footer{padding:20px 12px}
    .f-brand{font-size:.85rem}
    .f-links a{font-size:.65rem}

    .overlay{padding:70px 12px}
    .modal{border-radius:10px}
}

/* Tiny phone */
@media(max-width:360px){
    .sg{columns:1;column-gap:0;padding:0 6px 6px}
    .sg-item{margin-bottom:6px;border-radius:10px}
    .brand-name{font-size:.95rem}
}