/* ═══════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Ensure all buttons with icons are properly flex-centred */
button{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}
button svg{display:block;flex-shrink:0}
:root{
  --sidebar-w: 180px;
  --panel-w:   200px;
  --topbar-h:  52px;
  --footer-h:  36px;

  --bg:        #F2EDE0;
  --bg2:       #EAE4D4;
  --card:      #FDFAF2;
  --nav:       #1B2A19;
  --nav2:      #263C23;
  --nav3:      #324E2E;
  --gold:      #A8771E;
  --gold2:     #C9964A;
  --ink:       #1E1408;
  --muted:     #6A5C3E;
  --border:    rgba(30,40,28,.13);
  --shadow:    0 2px 8px rgba(27,42,25,.08), 0 8px 28px rgba(27,42,25,.07);
  --shadow-lg: 0 8px 32px rgba(27,42,25,.18);
}

/* ── TEMA: Navy & Oro (default) ── */
[data-theme="verde"]{
  --bg:#F2EDE0;--bg2:#EAE4D4;--card:#FDFAF2;
  --nav:#1B2A19;--nav2:#263C23;--nav3:#324E2E;
  --gold:#A8771E;--gold2:#C9964A;
  --ink:#1E1408;--muted:#6A5C3E;
  --border:rgba(30,40,28,.13);
  --shadow:0 2px 8px rgba(27,42,25,.08),0 8px 28px rgba(27,42,25,.07);
  --shadow-lg:0 8px 32px rgba(27,42,25,.18);
}

/* ── TEMA: Navy & Oro ── */
[data-theme="navy"]{
  --bg:#EEF0F6;--bg2:#E2E5EF;--card:#F8F9FC;
  --nav:#1A2547;--nav2:#243364;--nav3:#2E4070;
  --gold:#B8922A;--gold2:#D4AE52;
  --ink:#0E1428;--muted:#4A5278;
  --border:rgba(26,37,71,.13);
  --shadow:0 2px 8px rgba(26,37,71,.08),0 8px 28px rgba(26,37,71,.07);
  --shadow-lg:0 8px 32px rgba(26,37,71,.2);
}

/* ── TEMA: Borgogna ── */
[data-theme="borgogna"]{
  --bg:#F5EFEE;--bg2:#EDE4E2;--card:#FDF9F8;
  --nav:#3D0E1A;--nav2:#561424;--nav3:#6B192D;
  --gold:#C4861A;--gold2:#E0A83C;
  --ink:#200810;--muted:#6E4048;
  --border:rgba(61,14,26,.13);
  --shadow:0 2px 8px rgba(61,14,26,.08),0 8px 28px rgba(61,14,26,.07);
  --shadow-lg:0 8px 32px rgba(61,14,26,.2);
}

/* ── TEMA: Ardesia (dark) ── */
[data-theme="ardesia"]{
  --bg:#1E2128;--bg2:#252930;--card:#2C3038;
  --nav:#111318;--nav2:#181C22;--nav3:#1E2228;
  --gold:#C89A2A;--gold2:#E0B84A;
  --ink:#E8EAF0;--muted:#8890A0;
  --border:rgba(255,255,255,.08);
  --shadow:0 2px 8px rgba(0,0,0,.2),0 8px 28px rgba(0,0,0,.18);
  --shadow-lg:0 8px 32px rgba(0,0,0,.38);
}

/* ── TEMA: Sabbia ── */
[data-theme="sabbia"]{
  --bg:#F5F0E4;--bg2:#EDE8D8;--card:#FEFCF5;
  --nav:#2C2218;--nav2:#3C3022;--nav3:#4C3C2C;
  --gold:#9A6E18;--gold2:#B88A34;
  --ink:#1C1408;--muted:#6A5A3C;
  --border:rgba(44,34,24,.13);
  --shadow:0 2px 8px rgba(44,34,24,.08),0 8px 28px rgba(44,34,24,.07);
  --shadow-lg:0 8px 32px rgba(44,34,24,.18);
}


body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden}


/* ── LANG TOGGLE ── */
.lang-toggle{display:flex;align-items:center;gap:4px;flex-shrink:0}
.lang-btn{background:none;border:none;outline:none;cursor:pointer;padding:2px 3px;border-radius:3px;opacity:.4;transition:opacity .15s,transform .15s;display:flex;align-items:center;line-height:1}
.lang-btn svg{border-radius:2px;display:block}
.lang-btn:hover{opacity:.75;transform:scale(1.1)}
.lang-btn.active{opacity:1;transform:scale(1.1);box-shadow:0 0 0 1.5px rgba(255,255,255,.5);border-radius:3px}
/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:var(--topbar-h);
  background:var(--nav);
  border-bottom:2px solid var(--gold);
  display:flex;align-items:center;
  padding:0 1.25rem;gap:.75rem;
  overflow:visible;
}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:600;color:#fff;letter-spacing:.06em;cursor:pointer;user-select:none}
.logo em{color:var(--gold2);font-style:italic}
.topbar-sep{width:1px;height:22px;background:rgba(255,255,255,.12)}
.topbar-tag{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.topbar-spacer{flex:1}
/* ═══════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════ */
.shell{
  display:flex;
  padding-top:var(--topbar-h);
  min-height:100vh;
}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--nav);
  position:fixed;left:0;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h) - var(--footer-h));
  overflow-y:auto;overflow-y:overlay;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
  z-index:200;
  transition:transform .25s ease, width .25s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar{width:6px;background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}

.main{
  margin-left:var(--sidebar-w);
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  transition:margin-left .25s, margin-right .25s;
}

.main{margin-right:var(--panel-w);transition:margin-right .25s}




.sidebar-inner{flex:1;padding:.5rem 0 1rem}

/* tree nodes */
.tree-node{}
.tree-label{
  display:flex;align-items:center;gap:0;
  width:100%;border:none;background:none;
  font-family:'DM Sans',sans-serif;font-size:.8rem;
  color:#fff;cursor:pointer;
  padding:7px 1rem 7px 0;
  border-left:2px solid transparent;
  transition:background .12s,color .12s;text-align:left;
}
.tree-label:hover{background:var(--nav2);color:#fff}
.tree-label.active{color:#fff;border-left-color:var(--gold);background:var(--nav3)}
.tree-label.is-parent{font-weight:500}
.tree-arrow{
  margin-left:auto;font-size:.55rem;opacity:.5;
  transition:transform .2s;flex-shrink:0;
}
.tree-label.open .tree-arrow{transform:rotate(90deg)}
.tree-count{
  font-size:.65rem;color:#fff;
  background:rgba(255,255,255,.18);padding:1px 5px;border-radius:8px;
  margin-left:6px;flex-shrink:0;
}
.tree-label.active .tree-count{color:rgba(255,255,255,.8)}

.tree-children{display:none}
.tree-children.open{display:block}

/* Root node ("Tutte le categorie") — gold & bold */
.sidebar-inner > .tree-node > .tree-label span:first-child{color:var(--gold);font-weight:700}

/* Tree indentation: root & 1st level aligned at 10px, then +15px per level */
.tree-label span:first-child{width:100%;padding-left:10px}
.tree-children > .tree-node > .tree-label span:first-child{padding-left:10px}
.tree-children > .tree-node > .tree-children > .tree-node > .tree-label span:first-child{padding-left:25px}
.tree-children > .tree-node > .tree-children > .tree-node > .tree-children > .tree-node > .tree-label span:first-child{padding-left:35px}

/* ═══════════════════════════════════════════
   MAIN
═══════════════════════════════════════════ */

/* ── BREADCRUMB ── */
.breadcrumb-bar{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:.65rem 1.5rem;
  display:flex;align-items:center;gap:0;
  flex-wrap:wrap;min-height:40px;
}

.bc-item{
  font-size:.75rem;color:var(--muted);cursor:pointer;
  border:none;background:none;font-family:'DM Sans',sans-serif;
  padding:2px 4px;border-radius:2px;transition:color .12s;
}
.bc-item:hover{color:var(--nav)}
.bc-item.current{color:var(--ink);font-weight:500;cursor:default}
.bc-sep{font-size:.7rem;color:rgba(107,92,62,.35);margin:0 2px;user-select:none}
.bc-all{color:var(--gold);font-weight:500}

/* ── GRID AREA ── */
.grid-area{padding:1.25rem 1.5rem calc(var(--footer-h) + 1.25rem);flex:1}
.grid-header{
  display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem;
}
.grid-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:400;color:var(--nav);
}
.grid-count{font-size:.75rem;color:var(--muted);flex:1}



/* ── COVER mode (default) — fixed ratio, image crops to fill ── */
.stamp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:10px;
}
@media(min-width:701px){
  .stamp-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}
}
@media(min-width:1100px){
  .stamp-grid{grid-template-columns:repeat(4,1fr)}
}
.stamp-card{
  background:var(--card);
  border:none;
  border-radius:8px;overflow:hidden;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  transition:transform .18s,box-shadow .2s;
  position:relative;aspect-ratio:4/5;
  user-select:none;display:flex;flex-direction:column;
  touch-action:manipulation;
  contain:layout style;
}
.stamp-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.08);
  z-index:1;
}
.stamp-card.selected{
  transform:translateY(-3px);
  box-shadow:0 0 0 3px var(--gold),0 12px 32px rgba(168,119,30,.18);
}
.stamp-card-img{
  flex:1;min-height:0;overflow:hidden;position:relative;
  border-radius:8px 8px 0 0;
  background:#e8e4dc;
}
.stamp-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}

/* ── CONTAIN mode — image fits whole, no cropping ── */
.stamp-grid.mode-contain .stamp-card{
  aspect-ratio:unset;
}
.stamp-grid.mode-contain .stamp-card-img{
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  padding:8px;min-height:140px;
}
.stamp-grid.mode-contain .stamp-card-img img{
  width:auto;height:auto;
  max-width:100%;max-height:200px;
  object-fit:contain;
}


/* always-visible selection bar */
.stamp-sel-bar{
  touch-action:manipulation;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;
  background:#F8F7F5;
  border:none;
  border-top:0.5px solid #ECEAE6;
  outline:none;
  width:100%;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.72rem;
  color:#888078;
  transition:background .15s,color .15s;
  position:relative;z-index:2;
}
.stamp-sel-bar:hover{background:#F0EDE8;color:var(--ink)}
.stamp-sel-bar svg{flex-shrink:0;transition:transform .15s}
.stamp-sel-bar:hover svg{transform:scale(1.15)}
.stamp-card.selected .stamp-sel-bar{
  background:var(--gold);color:#fff;border-top-color:transparent;
}
.stamp-card.selected .stamp-sel-bar:hover{background:var(--gold2)}

/* empty / loading states */
.state-msg{color:var(--muted);font-size:.875rem;padding:2rem 0}
.grid-loading{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:4rem 0;color:var(--muted);font-size:.85rem;
}
.grid-spinner{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--gold);
  animation:spin .7s linear infinite;
}

/* ═══════════════════════════════════════════
   DIALOG (native <dialog>)
═══════════════════════════════════════════ */
dialog{
  border:none;border-radius:4px;padding:0;
  background:var(--nav);
  width:min(780px,90vw);
  max-height:90vh;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.3);
  overflow:hidden;
}
dialog[open]{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}
dialog::backdrop{background:rgba(4,8,4,.82);backdrop-filter:blur(3px)}
.dlg-inner{display:flex;flex-direction:column;align-items:center;gap:0}
.dlg-img-wrap{width:100%;background:#0c140b;display:flex;align-items:center;justify-content:center;padding:1.5rem 3rem;position:relative;overflow:hidden;min-height:300px;}
.dlg-img-wrap:has(.img-loaded)::before{display:none}

@media(max-width:700px){
  .dlg-img-wrap{
    touch-action:pinch-zoom;   /* allow pinch-zoom on the image area */
    padding:1rem;
    overflow:visible;
  }
  .dlg-img{max-height:55vh}
}
.dlg-img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:68vh;
  object-fit:contain;
}
/* loupe container — shown when cursor is over image */
.dlg-img-wrap.zoomable .dlg-img{cursor:none}
.dlg-loupe{
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.55);
  box-shadow:0 4px 24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events:none;
  display:none;
  overflow:hidden;
  z-index:10;
  transform:translate(-50%,-50%);
}
.dlg-img-wrap.zoomable:hover .dlg-loupe{display:block}
.dlg-footer{width:100%;background:var(--nav2);padding:.625rem 1.25rem;display:flex;align-items:center;justify-content:center;gap:.75rem}
.dlg-actions{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.dlg-loupe-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.4);cursor:pointer;transition:all .15s;flex-shrink:0;
}
.dlg-loupe-btn:hover{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}
.dlg-loupe-btn.active{background:rgba(168,119,30,.25);border-color:var(--gold2);color:var(--gold2)}
.dlg-sel-btn{
  padding:8px 20px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  color:rgba(255,255,255,.85);border-radius:20px;
  font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;
  letter-spacing:.04em;cursor:pointer;transition:all .15s;
  white-space:nowrap;
}
.dlg-sel-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.dlg-sel-btn.is-sel{background:var(--gold);border-color:var(--gold);color:#fff}
.dlg-sel-btn.is-sel:hover{background:var(--gold2);border-color:var(--gold2)}
.dlg-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);border:none;color:#fff;
  font-size:1.3rem;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;
  z-index:5;flex-shrink:0;
}
.dlg-nav-left{left:8px}
.dlg-nav-right{right:8px}
.dlg-nav:hover{background:rgba(255,255,255,.25)}
.dlg-close-abs{
  position:absolute;top:10px;right:10px;z-index:10;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);border:none;color:rgba(255,255,255,.8);
  font-size:.9rem;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;
}
.dlg-close-abs:hover{background:rgba(255,255,255,.25);color:#fff}
.dlg-trash-btn{
  display:flex;align-items:center;justify-content:center;
  background:rgba(220,38,38,.15);border:1px solid rgba(255,100,100,.35);
  color:rgba(255,140,140,.9);border-radius:4px;
  width:32px;height:32px;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.dlg-trash-btn:hover{background:rgba(220,38,38,.3);border-color:rgba(255,100,100,.7);color:#fff}


/* ═══════════════════════════════════════════
   SELECTION PANEL
═══════════════════════════════════════════ */
.sel-panel{
  position:fixed;top:var(--topbar-h);right:0;
  width:var(--panel-w);height:calc(100vh - var(--topbar-h) - var(--footer-h));
  background:var(--card);border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(27,42,25,.10);
  display:flex;flex-direction:column;z-index:250;
  transition:transform .25s ease;
}


.panel-head{
  background:var(--nav);padding:.875rem 1rem;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--gold);flex-shrink:0;
}
.panel-title{
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:#fff;
}
.panel-clear{
  background:none;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.5);
  border-radius:2px;padding:3px 10px;font-family:'DM Sans',sans-serif;
  font-size:.7rem;letter-spacing:.05em;cursor:pointer;transition:all .15s;
}
@media(hover:hover){.panel-clear:hover{border-color:rgba(255,100,100,.6);color:rgba(255,140,140,.9)}}

.panel-stamps{flex:1;overflow-y:auto;padding:.625rem;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.panel-empty{
  text-align:center;padding:2.5rem 1rem;
  color:var(--muted);font-size:.82rem;line-height:1.6;
}
.panel-stamp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:.5rem}
.panel-stamp-item{position:relative;border-radius:6px;overflow:hidden;background:var(--card);border:0.5px solid var(--border)}
.panel-stamp-item img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;cursor:pointer;background:var(--bg2)}
.panel-stamp-actions{display:flex;gap:4px;padding:4px}
.panel-zoom-btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:none;border:0.5px solid var(--border);border-radius:4px;
  color:var(--muted);cursor:pointer;padding:4px;transition:all .15s;
}
.panel-zoom-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--bg2)}
.panel-remove{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0.5px solid var(--border);border-radius:4px;
  color:var(--muted);cursor:pointer;padding:4px;transition:all .15s;
}
.panel-remove:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}

.panel-form{
  padding:.875rem 1rem;border-top:1px solid var(--border);flex-shrink:0;
  background:var(--bg2);
  height:210px;box-sizing:border-box;overflow:hidden;
}
.panel-input{
  width:100%;padding:7px 10px;margin-bottom:7px;
  border:1px solid var(--border);border-radius:2px;
  background:var(--card);font-family:'DM Sans',sans-serif;font-size:.82rem;
  color:var(--ink);outline:none;transition:border-color .15s;
}
.panel-input:focus{border-color:var(--gold)}
.panel-input::placeholder{color:rgba(107,92,62,.5)}
.panel-send{
  width:100%;padding:9px;background:var(--gold);color:#fff;
  border:none;border-radius:2px;font-family:'DM Sans',sans-serif;
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  cursor:pointer;transition:background .15s;margin-top:3px;
}
.panel-send:hover{background:var(--gold2)}
.panel-send:disabled{opacity:.45;cursor:not-allowed}
.panel-note{font-size:.65rem;color:var(--muted);margin-top:.5rem;line-height:1.5}

/* ── PANEL SPINNER ── */
.panel-spinner{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg2);
  border-top:1px solid var(--border);
  height:210px;box-sizing:border-box;flex-shrink:0;
}
.panel-spinner.visible{display:flex}
.spinner-ring{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--gold);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.panel-input-error{
  font-size:.68rem;color:#dc2626;margin:-4px 0 4px 2px;
  min-height:.9rem;line-height:1.2;
}

.panel-confirm{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:.875rem;padding:1rem;text-align:center;
  background:var(--bg2);border-top:1px solid var(--border);
  height:210px;box-sizing:border-box;flex-shrink:0;
}
.panel-confirm.visible{display:flex}
.panel-confirm-icon{font-size:2rem;color:#2a7a3a}
.panel-confirm-text{font-size:.82rem;color:var(--ink);line-height:1.55}
.panel-confirm-ok{
  padding:8px 28px;background:var(--nav);color:#fff;
  border:none;border-radius:3px;font-family:'DM Sans',sans-serif;
  font-size:.78rem;cursor:pointer;transition:background .15s;
}
.panel-confirm-ok:hover{background:var(--nav2)}


/* ── MOBILE SELECTION BAR ── */
.mob-sel-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:240;
  background:var(--nav);border-top:2px solid var(--gold);
  color:#fff;padding:.75rem 1.25rem;
  align-items:center;gap:.625rem;
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;
  cursor:pointer;
  transition:transform .2s;
}
.panel-mob-close{display:none}
@media(max-width:700px){
  .mob-sel-bar.visible{display:flex}
}
/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:700px){
  :root{--sidebar-w:180px;--panel-w:100vw}

  /* sidebar slides in from left as overlay */
  .sidebar{left:calc(-1 * var(--sidebar-w));transition:left .25s}
  .sidebar.mob-open{left:0;box-shadow:4px 0 20px rgba(0,0,0,.35)}
  .main{margin-left:0;margin-right:0 !important}

  .mob-toggle{display:flex !important}
  .theme-picker{display:none}
  .stamp-grid{grid-template-columns:repeat(2,1fr)}
  .topbar-tag{display:none}
  .topbar-sep{display:none}

  /* hide desktop sidebar collapse button */
  .sidebar-collapse-btn{display:none !important}

  /* hide loupe button in dialogs */
  .dlg-loupe-btn{display:none !important}

  /* panel hidden off-screen on mobile, slides in when .open */
  .sel-panel{transform:translateX(100%)}
  .sel-panel.open{transform:translateX(0);box-shadow:-4px 0 32px rgba(0,0,0,.25)}

  /* mobile close button */
  .panel-mob-close{
    display:inline-flex;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.8);border-radius:50%;
    width:28px;height:28px;cursor:pointer;font-size:.8rem;
    flex-shrink:0;
  }
  .panel-mob-close:hover{background:rgba(255,255,255,.2);color:#fff}

  .panel-head{justify-content:flex-start;gap:.5rem}
  .panel-title{flex:1}
  .panel-clear{margin-left:auto}
}
.mob-toggle{
  display:none;align-items:center;gap:5px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:3px;padding:6px 12px;
  font-size:.8rem;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;
  white-space:nowrap;flex-shrink:0;
}
@media(max-width:700px){
  .mob-toggle{display:flex !important}
}
.mob-overlay{
  display:none;position:fixed;inset:0;top:var(--topbar-h);
  background:rgba(0,0,0,.35);z-index:190;
}
.mob-overlay.open{display:block}

/* Prevent body scroll / text-select when dialog open */
body.dlg-open{overflow:hidden}
body.dlg-open .dlg-img-wrap{touch-action:pinch-zoom}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer{
  position:fixed;bottom:0;left:0;
  width:100%;
  height:var(--footer-h);
  background:var(--nav);
  border-top:2px solid var(--gold);
  padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Sans',sans-serif;font-size:.68rem;
  color:rgba(255,255,255,.75);
  z-index:201;
  gap:.25rem;
}
.site-footer a{color:rgba(255,255,255,.45);text-decoration:none}
.site-footer a:hover{color:rgba(255,255,255,.7)}
@media(max-width:700px){
  .site-footer{left:0;width:100%}
}