html { scrollbar-gutter:stable; }
.topbar { width:100%; background:var(--card); }
.carousel-badge,.caption-badge { position:absolute; z-index:2; color:white; pointer-events:none; filter:drop-shadow(0 1px 3px #0009); }
.carousel-badge { top:6px; left:6px; opacity:.9; }
.carousel-badge svg { width:15px; height:15px; display:block; }
.caption-badge { bottom:8px; left:8px; opacity:0; }
.tile:hover .caption-badge,.tile:focus-within .caption-badge { opacity:1; }
.library-slide { position:absolute; bottom:4px; left:4px; min-height:28px; font-size:11px; padding:3px 7px; opacity:0; }
.tile:hover .library-slide,.tile:focus-within .library-slide { opacity:1; }
.profile-setting { display:grid; gap:6px; font-size:12px; margin-bottom:16px; }
.profile-setting input { border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:9px; padding:10px; font:inherit; min-width:0; }
.emoji-picker { margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
.emoji-picker input { width:100%; }
.emoji-categories { display:flex; overflow:auto; gap:4px; margin:8px 0; }
.emoji-categories button { font-size:11px; min-height:30px; padding:4px 7px; }
.emoji-categories [aria-pressed=true] { color:var(--accent); background:var(--accent-bg); }
.emoji-results { display:grid; grid-template-columns:repeat(6,1fr); max-height:150px; overflow:auto; }
.emoji-results button { font-size:22px; border:0; padding:3px; background:transparent; }
#slide-tools { max-width:600px; margin:0 auto; text-align:center; }
.slide-count { font-size:12px; color:var(--muted); }
.slide-dots { display:flex; justify-content:center; gap:6px; margin:8px; flex-wrap:wrap; }
.slide-dots button { min-height:8px; width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#777; }
.slide-dots [aria-current=true] { background:var(--accent); }
.slide-strip { display:flex; justify-content:safe center; gap:6px; overflow:auto; margin:12px 0; }
.slide-strip button { position:relative; width:42px; height:56px; flex-shrink:0; padding:0; overflow:hidden; border-radius:6px; }
.slide-strip img { width:100%; height:100%; object-fit:cover; }
.slide-strip [aria-pressed=true] { outline:2px solid var(--accent); outline-offset:-2px; }
.slide-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.slide-actions button { font-size:12px; min-height:32px; padding:5px 9px; }
.photo-frame { touch-action:pan-y; }
.photo-frame.cropping { touch-action:none; }
@media(min-width:651px) { .viewer-stage { gap:14px; } .viewer .photo-frame { width:min(40vw,45dvh); height:auto; flex-shrink:0; } }
@media(max-width:650px) {
  .viewer-stage { flex-wrap:wrap; }
  .viewer-stage #previous,.viewer-stage #next { top:10px; bottom:auto; }
  .caption-badge { opacity:1; bottom:4px; left:4px; transform:scale(.8); }
  .tile-move { left:24px; }
  .library-slide { opacity:1; }
}
@media(pointer:coarse) { .caption-badge,.library-slide { opacity:1; } }
@media(prefers-reduced-motion:reduce) { main { transition:none; } }

#library-less { min-height:32px; padding:4px 10px; }