/* Photo Wall — V0.7.2 — Modern Minimal UI (dark) */
:root{
  --bg:#0b0b0f; --panel:#121219; --muted:#1a1a22; --accent:#ffd166; --text:#e7e7ee; --text-dim:#b7b7c7;
  --ring: rgba(255,255,255,.08); --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius:.9rem; --gap:.9rem; --cell: 180px; --gh: 24rem; --hdrh: 72px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,SF Pro,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
header#controls{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(5,5,8,.9),rgba(5,5,8,.72));backdrop-filter:blur(8px);border-bottom:1px solid var(--ring);padding:.7rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem}
header #brand{display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem;border-radius:.6rem;background:var(--panel);border:1px solid var(--ring)}
header #brand b{color:var(--accent)}
header .spacer{flex:1 1 auto}
.btn{background:var(--muted);color:var(--text);border:1px solid var(--ring);border-radius:.6rem;padding:.45rem .7rem;cursor:pointer;transition:transform .06s ease, background .15s ease}
.btn:hover{background:#222230}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#1a1a1a;border-color:transparent}
.btn.toggle.active{background:#943;color:#fff;border-color:#b55}
.group{display:flex;gap:.5rem;align-items:center;background:var(--panel);border:1px solid var(--ring);border-radius:.7rem;padding:.35rem .5rem}
.group label{display:flex;align-items:center;gap:.4rem;color:var(--text-dim)}
.group input[type="range"]{width:160px}.group input[type="number"]{width:6.2rem;background:#0f0f14;color:var(--text);border:1px solid var(--ring);border-radius:.45rem;padding:.25rem .45rem}
main{padding:1rem}.hidden{display:none!important}
.grid-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell,180px),1fr));gap:var(--gap)}
.card{background:var(--panel);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.cap-abs{position:absolute;left:0;right:0;bottom:0;padding:.6rem .75rem;font-size:1.05rem;font-weight:800;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%)}
#collage{position:relative;height:calc(100vh - var(--hdrh) - 14px)}
.pola{position:absolute;opacity:0;transition:opacity .25s ease;transform:rotate(var(--rot,0deg));transform-origin:center top}
.pola-frame{background:#fff;color:#111;padding:12px 12px 28px;border-radius:18px;box-shadow:var(--shadow)}
.pola-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.pola-cap{margin-top:8px;text-align:center;color:#111;font-weight:800;font-size:1.05rem}
#lightbox .nav-btn{position:absolute;top:50%;transform:translateY(-50%);font-size:2.8rem;line-height:1;padding:.9rem 1.1rem;color:#fff;background:rgba(0,0,0,.65);border:none;border-radius:9999px;box-shadow:var(--shadow)}
#lbPrev{left:1rem}#lbNext{right:1rem}
#lbClose{position:absolute;top:1rem;right:1rem;display:block;font-size:1.9rem;line-height:1;padding:.5rem .7rem;color:#fff;background:rgba(0,0,0,.65);border:none;border-radius:.85rem;box-shadow:var(--shadow)}
#lbImg{display:block;max-height:80vh;margin:0 auto;border-radius:.85rem;box-shadow:var(--shadow)}
@media(min-width:900px){#lbPrev{left:-4rem}#lbNext{right:-4rem}#lbClose{top:-3.2rem;right:-3.2rem}}
#idle{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:66}
#idle .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}
#idle .panel{position:relative;max-width:80vw;max-height:80vh}
#idleImg{max-height:70vh;border-radius:1rem;box-shadow:var(--shadow);display:block;margin:0 auto}
#idleCap{text-align:center;margin-top:.75rem;opacity:.9}
#idleClose{position:absolute;top:-2.8rem;right:-2.8rem;font-size:1.6rem;line-height:1;padding:.4rem .6rem;color:#fff;background:rgba(0,0,0,.65);border-radius:.75rem;box-shadow:var(--shadow)}
.unmirror{transform:scaleX(-1)} body.presentation #controls{display:none} body.presentation #collage{height:100vh;border:none;border-radius:0}

.hidden{ display:none!important }