.bottom-zone{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:6;
  padding:11px 16px 9px;
  display:flex;
  border-top:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  flex-shrink:0;
  pointer-events:none;
}
/* One shared frosted capsule sits behind the whole row, the same shape as
   the small pills/circles inside it, just bigger. This single surface is
   what floats on top of the photo grid / page content, so it — like the
   old per-button backgrounds — stays fixed in both themes (unpredictable
   photo brightness underneath has nothing to do with the app's light/dark
   setting; same reasoning as the photo/video viewer scrims). The buttons
   inside are now solid, opaque controls sitting on that surface, so they
   no longer need their own translucency/blur for legibility. */
.bottom-zone-bg{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  padding:5px;
  border-radius:999px;
  background:rgba(30,30,32,0.55);
  border:0.5px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events:auto;
}
.nc{
  width:var(--button-icon-size,40px);
  height:var(--button-icon-size,40px);
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ccc;
  flex-shrink:0;
  cursor:pointer;
  transition:all .15s;
  pointer-events:auto;
}
.nc.active{
  background:#3a3a3c;
  color:#f2f2f7;
}
.bottom-pill{
  height:var(--button-pill-height,40px);
  min-width:60px;
  padding:0 var(--button-pill-pad-x,12px);
  border-radius:99px;
  background:rgba(255,255,255,0.12);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ccc;
  /* Driven by the Button size setting (2026-07-31, per Owen — see the
     .bottom-zone exclusion note in applyTextSizeToDocument(), settingsStore.js,
     for why this moved off the general per-element text-size scaler and onto
     this dedicated CSS variable instead): a plain var(), read fresh from the
     cascade on every paint, can't go stale or drift out of sync between
     pages the way a JS-computed inline override could. */
  font-size:var(--button-pill-font-size,12px);
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:all .15s;
  pointer-events:auto;
}
.bottom-pill.active{
  background:#f2f2f7;
  color:#111;
}
.bottom-pill.page-pill{
  color:#f2f2f7;
  background:rgba(255,255,255,0.16);
  flex:1;
  min-width:126px;
  max-width:168px;
  /* 2px smaller than the base pill size at every tier, same relationship
     the old hardcoded 10px-vs-12px pairing had — kept as a calc() off the
     one shared variable so the two stay in lockstep automatically instead
     of needing their own separate setting-store entry. */
  font-size:calc(var(--button-pill-font-size,12px) - 2px);
  overflow:hidden;
  text-overflow:ellipsis;
  gap:3px;
}
.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
  border-radius:26px;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
  z-index:4;
}
.overlay.show{
  opacity:1;
  pointer-events:all;
}
.nav-menu{
  position:absolute;
  bottom:78px;
  left:12px;
  background:var(--bg-elevated);
  border:0.5px solid var(--border-default);
  border-radius:18px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:210px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:7;
}
.nav-menu.open{
  opacity:1;
  pointer-events:all;
}
.nm-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:var(--button-menu-pad-y,13px) 18px var(--button-menu-pad-y,13px) var(--button-menu-pad-x,13px);
  border-radius:14px;
  cursor:pointer;
  font-size:16px;
  color:var(--text-tertiary);
}
.nm-item.on{
  background:var(--border-default);
  color:var(--text-primary);
  font-weight:500;
}
/* hover: hover (2026-08-01, per Owen: touching-but-not-tapping a menu item
   shouldn't grey it out) — plain :hover fires on touchstart on iOS/Android
   and sticks until you tap elsewhere. Gating on (hover: hover) restricts
   this to real pointer devices, so touch never triggers it. */
@media (hover: hover){
  .nm-item:hover{
    background:var(--border-soft);
  }
}
.nm-item svg{
  flex-shrink:0;
}
.standard-menu{
  position:absolute;
  bottom:78px;
  background:var(--bg-elevated);
  border:0.5px solid var(--border-default);
  border-radius:18px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:7;
}
.filter-menu,
.platform-menu,
.chapter-menu,
.expand-menu,
.media-filter-menu,
.source-menu{
  border-radius:18px;
  padding:6px;
  gap:2px;
  z-index:7;
}
.fm-item,
.pm-item,
.cm-item,
.em-item,
.mf-item{
  border-radius:13px;
}
.standard-menu.open{
  opacity:1;
  pointer-events:all;
}
.standard-menu.centered{
  left:50%;
  transform:translateX(-50%);
}
.standard-menu.left{
  left:12px;
}
.standard-menu-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--button-menu-pad-y,11px) var(--button-menu-pad-x,14px);
  border-radius:13px;
  cursor:pointer;
  font-size:15px;
  color:var(--text-tertiary);
}
.standard-menu-option.on{
  background:var(--border-soft);
  color:var(--text-primary);
  font-weight:500;
}
@media (hover: hover){
  .standard-menu-option:hover{
    background:var(--border-soft);
  }
}

.shell .toggle{
  width:var(--button-toggle-width,44px);
  height:var(--button-toggle-height,26px);
}
.shell .toggle-knob{
  width:var(--button-toggle-knob,20px);
  height:var(--button-toggle-knob,20px);
}
.shell .toggle.on .toggle-knob{
  transform:translateX(var(--button-toggle-translate,18px));
}
.shell .picker-close,
.shell .picker-more-btn{
  width:var(--button-compact-icon-size,32px);
  height:var(--button-compact-icon-size,32px);
}
.shell .detail-btn,
.shell .hdr-add-btn,
.shell .bar-fav-btn{
  width:var(--button-top-add-size,34px);
  height:var(--button-top-add-size,34px);
}
.shell .modal-btn,
.shell .era-btn{
  min-height:var(--button-modal-height,46px);
}