/* ==========================================================================
   PHOTOS — groups, albums, justified photo grid and a full-screen viewer
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-ui, 'Geist', 'Inter', sans-serif);
  color: var(--text);
}

.hidden {
  display: none !important;
}

body.zs-locked {
  overflow: hidden;
}

.zs-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px 96px;
  box-sizing: border-box;
  timeline-scope: --zui-hero;
}

/* Home fills the screen so its footer sits at the bottom, like the hub's */
.zs-shell:has(> #view-home:not(.hidden)) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 20px;
}

#view-home:not(.hidden) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* At least this much air above the footer when the list fills the screen */
#view-home > .zs-proj-list {
  margin-bottom: 48px;
}

.zs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.zs-nav .nav-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 13px;
}

.zs-nav .nav-back-link svg {
  width: 15px;
  height: 15px;
}

/* Scrolled past the nav: Back floats at the top-left so it never needs a scroll to the top */
.zs-nav {
  min-height: 30px;
}

body.zs-scrolled .zs-nav .nav-back-link {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, calc((100vw - 1280px) / 2 + 20px));
  z-index: 41;
  box-sizing: border-box;
  height: 42px;
  max-width: 45vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px 0 12px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), 0 4px 16px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  animation: zs-back-in .18s ease-out;
}

/* The album toolbar is sticky too: Back takes the start of its row (--zs-back-w is measured in app.js) */
body.zs-scrolled .zs-toolbar {
  padding-left: calc(var(--zs-back-w, 0px) + 8px);
}

/* Back eats into the row, so the full-screen views and Make default go icon-only rather than clip */
body.zs-scrolled .zs-toolbar .zs-open-views.zs-seg button span,
body.zs-scrolled .zs-toolbar .zs-seg-default span {
  display: none;
}

body.zs-scrolled .zs-toolbar .zs-open-views.zs-seg button {
  padding: 0 10px;
}

/* On phones the toolbar wraps into three rows: let it scroll away and keep only Back floating */
@media (max-width: 760px) {
  body.zs-scrolled .zs-toolbar {
    position: relative;
    top: auto;
    padding-left: 0;
  }
}

@keyframes zs-back-in {
  from { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  body.zs-scrolled .zs-nav .nav-back-link { animation: none; }
}

.zs-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zs-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--positive-bg);
  color: var(--positive);
  font-size: 12px;
  font-weight: 600;
}

.zs-admin-pill svg {
  width: 13px;
  height: 13px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn svg {
  width: 15px;
  height: 15px;
}

.btn-sm {
  height: 32px;
  padding: 0 11px;
}

.btn.btn-danger {
  background: var(--negative) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.zs-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.zs-icon-btn:hover {
  background: var(--fill-2);
  color: var(--text);
}

.zs-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Banners, stats ---------- */
.zs-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-1);
}

.zs-banner > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.zs-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-3);
}

.zs-banner-text strong {
  color: var(--text);
  font-weight: 600;
}

.zs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.zs-stats > .zs-loading,
.zs-stats > .zs-message {
  grid-column: 1 / -1;
}

.zs-stat {
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--fill);
}

.zs-stat b {
  display: block;
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.zs-stat span {
  font-size: 12px;
  color: var(--text-3);
}

.zs-meter {
  height: 4px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--fill-2);
  overflow: hidden;
}

.zs-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-grad);
}

/* ---------- Section heads ---------- */
.zs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.zs-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.zs-link-form {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text-3);
}

.zs-link-form svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.zs-link-form input {
  width: 210px;
  height: 100%;
  padding: 0;
  font-size: 13px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

/* ---------- Projects: wide cover cards that fade into the page under the name ---------- */
.zs-proj-list {
  /* iOS-style rounded rectangle on every look; the photo's corner nests inside the mat */
  --zs-proj-radius: 22px;
  --zs-proj-inner-radius: max(0px, calc(var(--zs-proj-radius) - var(--zs-thumb-pad-x, 0px)));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px 22px;
}

/* Scoped: .zs-row is also the justified grid's flex row further down */
.zs-proj-list > .zs-row {
  position: relative;
  display: block;
  min-width: 0;
  animation: zuiRise .45s var(--ease-out) calc(.04s + min(var(--i, 0), 12) * .03s) both;
}

.zs-row-link {
  display: block;
  border-radius: var(--zs-proj-radius, 22px);
  color: inherit;
  text-decoration: none;
}

/* Phones' tap highlight boxes the link and, separately, the glow / tilted cards that spill past it
   (two rectangles), so the cards give their own press instead: a small sink that keeps their shape */
.zs-row-link,
.zs-feed-link {
  -webkit-tap-highlight-color: transparent;
  transition: scale .15s var(--ease-out);
}

.zs-row:not(.is-sorting) .zs-row-link:active,
.zs-feed-item:not(.is-sorting) .zs-feed-link:active {
  scale: .98;
}

.zs-row-link:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}

/* Framing comes from the look (looks.css); these are the defaults. The card is as tall as its text */
.zs-row-thumb {
  position: relative;
  display: block;
  width: 100%;
}

/* The backdrop shadow: the cover again, blurred and dropped under the card */
.zs-row-glow {
  position: absolute;
  /* Tucked under the card's lower half so the bloom stays a shadow and never reaches the next row */
  inset: 40% 10% 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 40%;
  filter: blur(var(--zs-glow-blur, 12px)) saturate(1.5);
  opacity: var(--zs-glow-opacity, .5);
  transform: translateY(3px);
  transition: opacity var(--t-med), transform var(--t-slow) var(--ease-out);
}

.zs-row-glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zs-row-thumb.is-empty .zs-row-glow {
  background: linear-gradient(160deg, var(--zs-cover-a, var(--surface-3)), var(--zs-cover-b, var(--surface-2)));
}

.zs-row-link:hover .zs-row-glow {
  opacity: calc(var(--zs-glow-opacity, .5) + .1);
  transform: translateY(5px) scale(1.02);
}

.zs-row-frame {
  position: relative;
  display: block;
  z-index: 1;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--zs-proj-radius, 22px);
  border: var(--zs-thumb-border, 0 solid transparent);
  background: var(--zs-thumb-mat, var(--surface-3));
  box-shadow: var(--zs-thumb-shadow, 0 1px 2px rgba(0, 0, 0, .12));
  transition: transform var(--t-slow) var(--ease-spring);
}

.zs-row-link:hover .zs-row-frame {
  transform: translateY(-3px);
}

/* The photo's own clip box inside the mat, so the hover zoom never spills over the mat */
.zs-row-photo {
  position: absolute;
  inset: var(--zs-thumb-pad, 0);
  overflow: hidden;
  border-radius: var(--zs-proj-inner-radius, 22px);
  isolation: isolate;
}

.zs-row-photo > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Covers are soft-focus; the scale pushes the blur's faded rim past the clip */
  filter: var(--zs-photo-filter, contrast(1)) blur(var(--zs-cover-blur, 8px));
  transform: scale(1.08);
  transition: transform var(--t-slow) var(--ease-out);
}

.zs-row-link:hover .zs-row-photo > img {
  transform: scale(1.11);
}

/* An even wash of the page's surface over the photo so the name reads on any cover */
.zs-row-fade {
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  pointer-events: none;
}

/* No cover: the look's gradient */
.zs-proj-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(160deg, var(--zs-cover-a, var(--surface-3)), var(--zs-cover-b, var(--surface-2)));
}

.zs-row-text {
  position: relative;
  padding: calc(var(--zs-thumb-pad-y, 0px) + 14px) calc(var(--zs-thumb-pad-x, 0px) + 16px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.zs-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  /* Room inside the clip for swashes that reach past the letters (Caveat's J), text stays put */
  padding: .2em .3em;
  margin: -.2em -.3em;
  font-family: var(--zs-title-font, var(--font-ui));
  /* Larger than the look's size now that the cover behind it is blurred */
  font-size: calc(var(--zs-title-size, 12.5px) * 1.5);
  font-style: var(--zs-title-style, normal);
  font-weight: var(--zs-title-weight, 780);
  letter-spacing: var(--zs-title-tracking, .07em);
  text-transform: var(--zs-title-case, uppercase);
  text-shadow: var(--zs-title-glow, none);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}

.zs-row-sub {
  flex: none;
  font-family: var(--zs-meta-font, var(--font-ui));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--zs-meta-tracking, .05em);
  text-transform: var(--zs-meta-case, uppercase);
  white-space: nowrap;
  color: var(--text-3);
}

/* A locked project: the lock leads its "Locked · n albums" line */
.zs-row-sub svg {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* Edit mode: the reorder grip sits at the end of the name's line, so the card keeps the
   visitor's height; the text gives up its width */
.zs-row:has(.zs-row-tools) .zs-row-text {
  padding-right: calc(var(--zs-thumb-pad-x, 0px) + 52px);
}

.zs-row-tools {
  position: absolute;
  top: 50%;
  right: calc(var(--zs-thumb-pad-x, 0px) + 12px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  translate: 0 -50%;
}

.zs-proj-list > .zs-message,
.zs-proj-list > .zs-loading {
  grid-column: 1 / -1;
}

/* Home footer, pinned to the bottom like SPLIT's */
.zs-footer-note {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-4, var(--text-3));
}

.zs-footer-note a {
  color: inherit;
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .zs-proj-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.zs-menu-note {
  grid-column: 1 / -1;
  margin: 2px 6px 4px;
  font-size: 11.5px;
  color: rgba(241, 242, 246, .6);
}

.zs-album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--fill);
  box-shadow: var(--glass-hi);
  cursor: pointer;
  animation: zuiRise .5s var(--ease-out) calc(.06s + var(--i, 0) * .03s) both;
  transition: transform var(--t-slow) var(--ease-spring), box-shadow var(--t-med), border-color var(--t-med);
}

.zs-album-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--glass-hi), var(--shadow-2);
}

.zs-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 20% 10%, hsl(var(--hue, 12) 80% 62% / .45), transparent 60%),
    radial-gradient(120% 90% at 90% 90%, hsl(calc(var(--hue, 12) + 40) 80% 60% / .35), transparent 60%),
    var(--surface-3);
  overflow: hidden;
}

.zs-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}

.zs-album-card:hover .zs-cover img {
  transform: scale(1.04);
}

.zs-cover-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .85);
}

.zs-cover-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6px;
}

.zs-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 14px;
}

.zs-card-title {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.015em;
  color: var(--text);
}

.zs-card-sub {
  font-size: 12.5px;
  color: var(--text-3);
}

.zs-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 12, 18, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.zs-chip svg {
  width: 12px;
  height: 12px;
}

.zs-chip.is-left {
  right: auto;
  left: 10px;
}

/* ---------- Lock screen ---------- */
.zs-lock {
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 28px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: zuiPop var(--t-slow) var(--ease-spring) both;
}

.zs-lock-hero {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 4px;
  border-radius: 16px;
  color: hsl(12 85% 60%);
  background: hsl(12 85% 60% / .14);
}

.zs-lock-hero svg {
  width: 26px;
  height: 26px;
}

.zs-lock-title {
  margin: 0;
  transition: opacity 0.25s ease;
}

/* Name still loading: the line keeps its height so nothing shifts when it fades in */
.zs-lock-title.is-pending {
  opacity: 0;
}

.zs-lock .subtitle {
  margin: 0 0 6px;
}

.zs-lock-submit {
  height: 40px;
  margin-top: 6px;
}

/* ---------- Titles ---------- */
.zs-title-block {
  margin: 0 0 18px;
  animation: zuiRise .5s var(--ease-out) both;
}

.zs-title-block h1 {
  margin: 0;
  font-size: clamp(24px, 4.5vw, 34px);
  letter-spacing: -0.035em;
}

.zs-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zs-title-row .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zs-title-row .tag svg {
  width: 12px;
  height: 12px;
}

.zs-eyebrow-line {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
}

.zs-eyebrow-line a {
  color: inherit;
}

.zs-desc {
  max-width: 720px;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-line;
}

.zs-desc:empty {
  display: none;
}

.zs-title-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.zs-title-actions .zs-admin-only {
  display: contents;
}

.zs-title-actions .zs-admin-only.hidden {
  display: none !important;
}

/* ---------- Album header: cover softly behind the title ---------- */
.zs-album-head {
  position: relative;
  isolation: isolate;
  margin-bottom: 14px;
}

.zs-album-head.has-cover {
  padding: 34px 0 6px;
}

.zs-album-cover {
  position: absolute;
  inset: -40px 0 -10px;
  z-index: -1;
  background: center 40% / cover no-repeat;
  opacity: 0;
  filter: saturate(1.05) blur(1px);
  /* Fades out on every side, so it never reads as a band */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 22%, rgba(0, 0, 0, .55) 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 22%, rgba(0, 0, 0, .55) 60%, transparent);
  mask-composite: intersect;
  border-radius: var(--r-lg);
  transition: opacity .6s ease;
  pointer-events: none;
}

.zs-album-head.has-cover .zs-album-cover {
  opacity: .32;
}

body[data-album-theme="sky-clouds"] .zs-album-head.has-cover .zs-album-cover,
body[data-album-theme="warm-paper"] .zs-album-head.has-cover .zs-album-cover,
body[data-album-theme="blush"] .zs-album-head.has-cover .zs-album-cover,
body[data-album-theme="lavender"] .zs-album-head.has-cover .zs-album-cover,
body[data-album-theme="golden-hour"] .zs-album-head.has-cover .zs-album-cover,
body[data-album-theme="fog"] .zs-album-head.has-cover .zs-album-cover {
  opacity: .5;
  mix-blend-mode: luminosity;
}

.zs-album-head.has-cover h1 {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

@media (min-width: 761px) {
  .zs-album-cover {
    inset: -40px -20px -10px;
  }
}

[data-theme="light"] .zs-album-head.has-cover .zs-album-cover {
  opacity: .26;
}

.zs-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
  font: 600 12px var(--font-ui);
  cursor: pointer;
}

.zs-chip-btn svg {
  width: 13px;
  height: 13px;
}

.zs-chip-btn:hover,
.zs-chip-btn.is-on {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
}

body.is-picking-cover #media-grid [data-id] {
  cursor: crosshair;
}

body.is-picking-cover #media-grid [data-id]:hover {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ---------- Album toolbar: one sticky row for view, order and actions ---------- */
.zs-toolbar {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  animation: zuiRise .5s var(--ease-out) .05s backwards;
}

/* Pills keep their full width (a squeezed .zs-seg or sort pill clips its labels); short of room the row wraps */
.zs-toolbar > * {
  flex-shrink: 0;
}

/* Only the chosen view keeps its label, the rest are icons */
.zs-toolbar .zs-seg button {
  padding: 0 10px;
}

.zs-toolbar .zs-seg button:not(.is-on) span {
  display: none;
}

.zs-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 4px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-1);
  color: var(--text-3);
}

.zs-sort svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.zs-sort .zs-sort-caret {
  position: absolute;
  right: 12px;
  width: 13px;
  height: 13px;
  transition: transform var(--t-fast) var(--ease-out);
}

/* Sort and Show: the pill is a button that opens the app's own menu */
.zs-pick-btn {
  gap: 7px;
  padding: 0 32px 0 13px;
  font: 600 12.5px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.zs-pick-btn > span {
  color: var(--text-2);
}

.zs-pick-btn:hover > span {
  color: var(--text);
}

.zs-pick-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
}

.zs-pick-btn[aria-expanded="true"] {
  border-color: var(--accent);
}

.zs-pick-btn[aria-expanded="true"] .zs-sort-caret {
  transform: rotate(180deg);
}

/* Show while it hides something: lit in the accent */
.zs-pick-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.zs-pick-btn.is-on > span {
  color: var(--text);
}

.zs-menu.zs-pick-menu {
  left: 0;
  right: auto;
  display: grid;
  gap: 1px;
  width: 236px;
}

.zs-menu.zs-pick-menu button {
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  font-size: 13.5px;
  transition: background var(--t-fast);
}

.zs-pick-menu .zs-pick-icon,
.zs-pick-menu .zs-pick-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.zs-pick-menu .zs-pick-icon {
  color: rgba(241, 242, 246, .6);
}

.zs-menu.zs-pick-menu button svg {
  width: 16px;
  height: 16px;
  margin: 0;
  color: inherit;
}

.zs-pick-menu .zs-pick-icon.is-fill svg {
  fill: currentColor;
}

.zs-pick-menu b {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.zs-pick-menu em {
  font: 600 12px var(--font-num);
  font-style: normal;
  color: var(--text-3);
}

.zs-pick-menu .zs-pick-check {
  color: #a993ff;
  opacity: 0;
}

.zs-menu.zs-pick-menu button.is-on {
  background: rgba(255, 255, 255, .07);
}

.zs-pick-menu button.is-on b {
  font-weight: 650;
}

.zs-pick-menu button.is-on .zs-pick-icon,
.zs-pick-menu button.is-on .zs-pick-check {
  color: #a993ff;
  opacity: 1;
}

.zs-toolbar-gap {
  flex: 1;
}

.zs-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-1);
}

.zs-toolbar-actions .btn {
  height: 32px;
  border-radius: var(--r-pill);
}

.zs-tool-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.zs-tool-btn svg {
  width: 16px;
  height: 16px;
}

.zs-tool-btn:hover {
  background: var(--fill-2);
  color: var(--text);
}

.zs-tool-btn:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 760px) {
  .zs-toolbar {
    flex-wrap: wrap;
  }

  .zs-toolbar-gap {
    display: none;
  }

  .zs-toolbar-actions {
    margin-left: auto;
  }

  .zs-toolbar-actions .btn span {
    display: none;
  }
}

/* Mood board and Scrapbook open full screen: labelled on wide screens, icons once the row gets tight */
.zs-toolbar .zs-open-views.zs-seg button span {
  display: inline;
}

.zs-open-views button:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 1180px) {
  .zs-toolbar .zs-open-views.zs-seg button span {
    display: none;
  }
}

/* ---------- Location map: at the top of the album, beside the title on wide screens ---------- */
.zs-album-map:empty {
  display: none;
}

/* The ticket pokes out above the pill */
.zs-album-map .zs-map {
  margin: 30px 0 4px;
}

.zs-album-map .zs-map-pill {
  height: 96px;
}

@media (min-width: 900px) {
  .zs-album-head.has-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    column-gap: 36px;
    align-items: start;
  }

  .zs-album-head.has-map > :not(.zs-album-cover):not(.zs-album-map) {
    grid-column: 1;
  }

  .zs-album-head.has-map .zs-album-map {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
  }

  .zs-album-head.has-map .zs-album-map .zs-map {
    margin: 22px 0 0;
  }
}

/* ---------- Full-screen views (Mood board, Scrapbook) over the album ---------- */
body.zs-immersive-open {
  overflow: hidden;
}

.zs-immersive {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: #0b0b0e;
  color: #f2efe8;
  animation: zsFade .25s ease both;
}

.zs-immersive-body {
  --zs-avail: 100vh;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .zs-immersive-body {
    --zs-avail: 100dvh;
  }
}

.zs-immersive-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left));
  pointer-events: none;
}

.zs-immersive-title,
.zs-immersive-close {
  border-radius: var(--r-pill);
  background: rgba(14, 14, 18, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #f2efe8;
}

.zs-immersive-title {
  min-width: 0;
  max-width: 60vw;
  padding: 8px 14px;
  overflow: hidden;
  font: 600 13px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zs-immersive-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--t-fast);
}

.zs-immersive-close:hover {
  background: rgba(40, 40, 48, .85);
}

.zs-immersive-close svg {
  width: 18px;
  height: 18px;
}

/* Toasts drop below the title row so they never sit on a view's controls */
body.zs-immersive-open .toast-banner {
  top: calc(58px + env(safe-area-inset-top));
}

/* ---------- Visitor preview (owner) ---------- */
.zs-preview-pill {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 3000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(16, 18, 24, .92);
  color: #f1f2f6;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55);
  transform: translateX(-50%);
  animation: zuiRise .35s var(--ease-out) both;
}

.zs-preview-pill svg {
  width: 16px;
  height: 16px;
  opacity: .8;
}

.zs-preview-pill button {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: #fff;
  color: #111;
  font: 650 13px var(--font-ui);
  cursor: pointer;
}
/* ---------- Albums ---------- */
.zs-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.zs-empty,
.zs-message {
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

.zs-message strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

/* ---------- Justified grid ---------- */
.zs-grid {
  --gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  user-select: none;
  -webkit-user-select: none;
}

.zs-row {
  display: flex;
  gap: var(--gap);
}

.zs-tile {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
  background: var(--surface-3);
  animation: zsFade .5s var(--ease-out) both;
}

.zs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .35s ease, transform .6s var(--ease-out);
}

.zs-tile img.is-loaded {
  opacity: 1;
}

.zs-tile:hover img {
  transform: scale(1.03);
}

.zs-tile-badges {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.zs-tile-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-num);
  color: #fff;
  background: rgba(10, 12, 18, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.zs-tile-badge svg {
  width: 11px;
  height: 11px;
}

.zs-tile-badge.is-warn {
  background: rgba(194, 124, 14, .85);
}

.zs-tile-check {
  position: absolute;
  top: 7px;
  left: 7px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .25);
  color: #fff;
}

.zs-tile-check svg {
  width: 13px;
  height: 13px;
  opacity: 0;
}

.is-selecting .zs-tile {
  cursor: pointer;
}

.is-selecting .zs-tile-check {
  display: grid;
}

.zs-tile.is-selected img {
  transform: scale(.9);
  border-radius: 6px;
}

.zs-tile.is-selected .zs-tile-check,
.zs-smart-tile.is-selected .zs-tile-check {
  background: var(--accent);
  border-color: var(--accent);
}

.zs-tile.is-selected .zs-tile-check svg,
.zs-smart-tile.is-selected .zs-tile-check svg {
  opacity: 1;
}

.zs-tile.is-drop-target {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.zs-tile.is-dragging {
  opacity: .4;
}

@keyframes zsFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Selection bar ---------- */
.zs-selbar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  animation: zuiRise .35s var(--ease-out) both;
}

.zs-selbar .btn {
  border-radius: var(--r-pill);
}

.zs-selbar .zs-icon-btn {
  border-radius: 50%;
}

/* ---------- Uploads: menu, page-wide drop target, floating progress tray ---------- */
.zs-menu-wrap {
  position: relative;
  display: inline-flex;
}

.zs-menu {
  --text: #f1f2f6;
  --text-3: rgba(241, 242, 246, .62);
  --fill-2: rgba(255, 255, 255, .08);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(22, 24, 32, .96) !important;
  color: var(--text);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .55);
  animation: zuiRise .2s var(--ease-out) both;
}

.zs-menu button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.zs-menu button:hover,
.zs-menu button:focus-visible {
  background: var(--fill-2);
}

.zs-menu button svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #a993ff;
}

/* Theme picker: a grid of swatches */
.zs-menu.is-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 300px;
}

.zs-menu.is-themes button {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 4px 7px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.zs-menu.is-themes .zs-swatch {
  height: 30px;
}

.zs-menu.is-themes button.is-on {
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 1.5px #a993ff inset;
}

/* Colours and font: the look menu scrolls if a short screen can't fit both */
.zs-menu.is-looks {
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
}

/* Font choices: two to a row, each name written in its own font */
.zs-menu.is-themes .zs-font-pick {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 6px;
}

.zs-font-sample {
  display: block !important;
  padding: 0 .2em;
  font-family: var(--zs-script);
  font-size: calc(12.5px * var(--zs-script-scale));
  font-weight: var(--zs-script-weight);
  line-height: 1.3;
}

.zs-menu-title {
  grid-column: 1 / -1;
  padding: 4px 6px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(241, 242, 246, .55);
}

.zs-menu button span {
  display: grid;
  gap: 2px;
}

.zs-menu strong {
  font-size: 13.5px;
}

.zs-menu small {
  font-size: 12px;
  color: var(--text-3);
}

.zs-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 16%, rgba(8, 9, 14, .55));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  animation: zsFade .15s ease both;
}

.zs-drop-overlay > div {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 420px;
  padding: 34px 28px;
  border: 2px dashed rgba(255, 255, 255, .7);
  border-radius: var(--r-lg);
  text-align: center;
  color: #fff;
  font-size: 13px;
}

.zs-drop-overlay svg {
  width: 34px;
  height: 34px;
}

.zs-drop-overlay strong {
  font-size: 17px;
}

.zs-tray {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1400;
  width: min(380px, calc(100vw - 32px));
  padding: 8px;
  border-radius: var(--r-lg);
  box-shadow: var(--glass-hi), 0 18px 44px -14px rgba(0, 0, 0, .5);
  animation: zuiRise .3s var(--ease-out) both;
  /* Always a dark, nearly opaque panel, so it reads the same over any album theme */
  --text: #f5f5f7;
  --text-2: rgba(255, 255, 255, .86);
  --text-3: rgba(255, 255, 255, .62);
  --text-4: rgba(255, 255, 255, .42);
  --fill: rgba(255, 255, 255, .07);
  --fill-2: rgba(255, 255, 255, .12);
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .2);
  background: rgba(20, 22, 30, .9) !important;
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  color: var(--text);
}

.zs-tray-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.zs-tray .zs-upload-summary {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.zs-tray .zs-upload-list {
  max-height: min(50vh, 360px);
  padding: 0 4px;
}

.zs-upload-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--fill);
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.zs-upload-summary:hover {
  background: var(--fill-2);
  border-color: var(--border-strong);
}

#upload-summary-text {
  font-weight: 600;
  color: var(--text);
}

/* Only the failure count is flagged, as a small red pill */
.zs-upload-failed {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-weight: 700;
}

.zs-upload-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}

.zs-upload-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-med) var(--ease-out);
}

.zs-upload-summary.is-open .zs-upload-toggle svg {
  transform: rotate(180deg);
}

.zs-upload-eta {
  flex: 0 0 100%;
  margin-top: -4px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.zs-upload-total {
  flex: 0 0 100%;
  height: 3px;
  border-radius: 99px;
  background: var(--fill-2);
  overflow: hidden;
}

.zs-upload-total i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-grad);
  transition: width .25s ease;
}

.zs-upload-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}

.zs-upload-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.zs-upload-item:last-child {
  border-bottom: none;
}

.zs-upload-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.zs-upload-state {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--text-3);
}

.zs-upload-item.is-done .zs-upload-state { color: var(--positive); }
.zs-upload-item.is-error .zs-upload-state { color: var(--negative); }
.zs-upload-item.is-skip .zs-upload-state { color: var(--warning); }

.zs-upload-bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 99px;
  background: var(--fill-2);
  overflow: hidden;
}

.zs-upload-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-grad);
  transition: width .25s ease;
}

/* ---------- Forms ---------- */
.zs-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
}

.zs-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
}

.zs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.zs-field label {
  font-size: 12.5px;
  font-weight: 560;
  color: var(--text-2);
}

.zs-optional {
  font-weight: 400;
  color: var(--text-4);
}

.zs-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
}

.zs-check input {
  margin: 0;
}

.zs-form-error {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--negative-bg);
  color: var(--negative);
  font-size: 12.5px;
  font-weight: 560;
  text-align: left;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.zs-modal-card {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
}

/* zui dresses `.modal-overlay > div`; most PHOTOS dialogs are forms, so give them the same card */
.modal-overlay > form.zs-modal-card {
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-3);
  animation: zuiPop var(--t-slow) var(--ease-spring) both;
}

@media (max-width: 760px) {
  .modal-overlay > form.zs-modal-card {
    animation-name: zuiSheet;
  }
}

.zs-narrow {
  max-width: 400px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.modal-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}

.modal-close-btn {
  display: grid;
  place-items: center;
  padding: 4px;
  border: none;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

.modal-close-btn:hover {
  background: var(--fill);
  color: var(--text);
}

.zs-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.zs-modal-actions .btn:not(.btn-sm) {
  min-width: 92px;
}

.zs-push-left {
  margin-right: auto;
}

.zs-shake {
  animation: zuiShake 0.4s var(--ease-out);
}

/* ---------- Loading ---------- */
.zs-loading {
  display: grid;
  place-items: center;
  padding: 80px 0;
}

.zs-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--fill-2);
  border-top-color: var(--accent);
  animation: zsSpin .8s linear infinite;
}

@keyframes zsSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Toast ---------- */
.toast-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  max-width: calc(100vw - 32px);
  padding: 9px 18px;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.zs-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  background: #050608;
  color: #f2f3f7;
  animation: zsFade .2s ease both;
  touch-action: none;
}

.zs-lb-top {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  z-index: 3;
}

.zs-lb-count {
  flex: 1;
  font-family: var(--font-num);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}

.zs-lb-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zs-lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  justify-content: center;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font: 600 12.5px var(--font-num);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-slow) var(--ease-spring);
}

.zs-lb-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.zs-lb-btn svg {
  width: 19px;
  height: 19px;
}

.zs-lb-btn span:empty {
  display: none;
}

#lb-heart.is-on {
  color: #ff5a7a;
}

#lb-heart.is-on svg {
  fill: currentColor;
}

#lb-heart.zs-pop {
  animation: zsHeartPop .45s var(--ease-spring);
}

@keyframes zsHeartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.zs-lb-menu-wrap {
  position: relative;
}

.zs-lb-menu {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 5;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: rgba(24, 26, 34, .96);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6);
}

.zs-lb-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: #e9ebf2;
  font: 500 13px var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.zs-lb-menu button:hover {
  background: rgba(255, 255, 255, .08);
}

.zs-lb-menu button svg {
  width: 15px;
  height: 15px;
}

.zs-lb-menu .is-danger {
  color: #ff7b7b;
}

/* Opening / closing: a copy of the photo flies between its thumbnail and the viewer */
.zs-lb-ghost {
  position: fixed;
  z-index: 2600;
  object-fit: fill;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, clip-path;
}

.zs-lb.is-flying .zs-lb-top,
.zs-lb.is-flying .zs-lb-foot,
.zs-lb.is-flying .zs-lb-nav {
  animation: zsFade .35s ease .12s backwards;
}

.zs-lb.is-closing {
  pointer-events: none;
}

.zs-lb.is-closing > *:not(.zs-lb-stage) {
  opacity: 0;
  transition: opacity .15s ease;
}

.zs-lb-stage {
  grid-column: 1 / 2;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.zs-lb-track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}

.zs-lb-track.is-animating {
  transition: transform .32s var(--ease-out);
}

.zs-lb-slide {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.zs-lb-zoom {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.zs-lb-zoom.is-animating {
  transition: transform .25s var(--ease-out);
}

.zs-lb-slide img,
.zs-lb-slide video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.zs-lb-slide img.zs-lb-low {
  position: absolute;
  inset: 0;
  margin: auto;
  filter: blur(6px);
  transform: scale(1.01);
}

.zs-lb-slide img.zs-lb-full {
  position: relative;
  opacity: 0;
  transition: opacity .3s ease;
}

.zs-lb-slide img.zs-lb-full.is-loaded {
  opacity: 1;
}

.zs-lb-slide video {
  width: 100%;
  height: 100%;
  background: #000;
}

.zs-lb-processing {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .65);
  font-size: 12.5px;
  white-space: nowrap;
}

.zs-lb-processing button {
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  color: #9ec5ff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.zs-lb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-med), background var(--t-fast);
}

.zs-lb-stage:hover .zs-lb-nav {
  opacity: 1;
}

.zs-lb-nav:hover {
  background: rgba(255, 255, 255, .18);
}

.zs-lb-nav:disabled {
  visibility: hidden;
}

.zs-lb-nav.is-prev { left: 14px; }
.zs-lb-nav.is-next { right: 14px; }

.zs-lb-nav svg {
  width: 24px;
  height: 24px;
}

.zs-lb-caption {
  grid-column: 1 / 2;
  max-height: 22vh;
  overflow-y: auto;
  padding: 10px 18px max(14px, env(safe-area-inset-bottom));
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  color: rgba(255, 255, 255, .86);
}

.zs-lb-caption:empty {
  padding: 0 0 max(8px, env(safe-area-inset-bottom));
}

.zs-lb.is-chrome-hidden .zs-lb-top,
.zs-lb.is-chrome-hidden .zs-lb-caption,
.zs-lb.is-chrome-hidden .zs-lb-nav {
  opacity: 0;
  pointer-events: none;
}

.zs-lb-top,
.zs-lb-caption {
  transition: opacity var(--t-med);
}

/* Side panel: details + comments */
.zs-lb-panel {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  width: 340px;
  min-height: 0;
  background: #101218;
  border-left: 1px solid rgba(255, 255, 255, .08);
  touch-action: auto;
}

.zs-lb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.zs-lb-panel .zs-icon-btn {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, .7);
}

.zs-lb-tabs {
  display: flex;
  gap: 4px;
}

.zs-lb-tabs button {
  padding: 7px 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font: 600 13px var(--font-ui);
  cursor: pointer;
}

.zs-lb-tabs button.is-active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.zs-lb-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 13px;
}

#lb-panel-comments {
  display: flex;
  flex-direction: column;
}

#lb-panel-comments.hidden {
  display: none !important;
}

.zs-info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  margin: 0;
}

.zs-info-list dt {
  color: rgba(255, 255, 255, .5);
}

.zs-info-list dd {
  margin: 0;
  color: #f2f3f7;
  word-break: break-word;
}

.zs-info-caption {
  margin: 0 0 16px;
  line-height: 1.5;
  white-space: pre-line;
}

.zs-hearted {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .6);
}

.zs-hearted svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  color: #ff5a7a;
  fill: currentColor;
}

.zs-comments {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zs-comments li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.zs-comment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.zs-comment-head b {
  color: #fff;
  font-weight: 600;
}

.zs-comment-head time {
  flex: 1;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
}

.zs-comment-head button {
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, .4);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.zs-comment-head button:hover {
  color: #ff7b7b;
}

.zs-comments p {
  margin: 0;
  line-height: 1.45;
  white-space: pre-line;
  color: rgba(255, 255, 255, .86);
}

.zs-comment-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 12px;
}

.zs-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  resize: none;
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 760px) {
  .zs-shell {
    padding: 14px 12px 96px;
  }

  .zs-grid {
    --gap: 3px;
  }

  .zs-tile {
    border-radius: 3px;
  }

  .zs-album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .zs-link-form input {
    width: 150px;
  }

  .zs-lb {
    grid-template-columns: 1fr;
  }

  .zs-lb-nav {
    display: none;
  }

  .zs-lb-btn {
    padding: 0 8px;
    min-width: 34px;
  }

  /* Details and comments become a bottom sheet over the photo */
  .zs-lb-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: auto;
    max-height: 70vh;
    border-left: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
    animation: zuiSheet var(--t-slow) var(--ease-out) both;
  }

  .zs-lb-panel-body {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .zs-selbar {
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: space-between;
  }

  .zs-selbar .btn span {
    display: none;
  }
}

@media (max-width: 420px) {
  .zs-album-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Presentation: project layouts, album view modes and themes
   ========================================================================== */
.zs-app {
  --zs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --zs-terracotta: #c95f33;
  --zs-ivory: #faf9f5;
  --zs-seg-on-bg: #0f1220;
  --zs-seg-on-fg: #ffffff;
}

[data-theme="dark"] .zs-app {
  --zs-terracotta: #f08a5d;
  --zs-ivory: #f1efe8;
  --zs-seg-on-bg: #eef0f6;
  --zs-seg-on-fg: #0f1220;
}

/* ---------- Segmented switchers (project layout, album view) ---------- */
.zs-viewbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  animation: zuiRise .5s var(--ease-out) .08s backwards;
}

.zs-viewbar.is-sticky {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 40;
}

.zs-seg {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-1);
  scrollbar-width: none;
}

.zs-seg::-webkit-scrollbar {
  display: none;
}

.zs-seg button,
.zs-seg-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  font: 600 12.5px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background .35s var(--zs-ease), color .2s ease, transform .35s var(--zs-ease);
}

.zs-seg button svg,
.zs-seg-default svg {
  width: 15px;
  height: 15px;
}

.zs-seg button:hover {
  color: var(--text);
}

.zs-seg button.is-on {
  background: var(--zs-seg-on-bg);
  color: var(--zs-seg-on-fg);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3);
}

.zs-seg-default {
  border: 1px dashed var(--border-strong);
  color: var(--text-2);
}

.zs-toolbar .zs-seg-default {
  height: 42px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--text);
}

.zs-seg-default:hover {
  background: var(--fill);
  color: var(--text);
}

/* ---------- Drag to reorder projects and albums (owner) ---------- */
.zs-sort-handle {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-3);
  cursor: grab;
  touch-action: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.zs-sort-handle:hover {
  color: var(--text);
}

.zs-sort-handle svg {
  width: 16px;
  height: 16px;
}

/* Projects: last in the card's control strip, at the end of the name's line */
.zs-row-tools > .zs-sort-handle {
  flex: none;
  width: 28px;
  height: 28px;
  backdrop-filter: blur(8px);
}

/* Albums: a slim grip beside the row */
.zs-feed-item:has(> .zs-sort-handle) {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zs-feed-item > .zs-feed-link {
  flex: 1;
  min-width: 0;
}

.zs-feed-item > .zs-sort-handle {
  flex: none;
  width: 24px;
  height: 44px;
  border-color: transparent;
  background: transparent;
}

.is-sorting-list {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Moving a node replays its entrance animation, so drop it while sorting */
.is-sorting-list > * {
  animation: none !important;
}

.is-sorting-list .zs-sort-handle {
  cursor: grabbing;
}

.is-sorting {
  position: relative;
  z-index: 5;
}

.zs-row.is-sorting .zs-row-link,
.zs-feed-item.is-sorting .zs-feed-link {
  scale: 1.02;
  opacity: .85;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45);
  transition: scale .2s var(--zs-ease), opacity .2s ease;
}

/* ---------- Project feed: a compact row per album with a small fan of four tilted cards ---------- */
.zs-project.is-fanned-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 6px;
}

.zs-feed-item {
  animation: zuiRise .6s var(--ease-out) calc(.06s + var(--i, 0) * .04s) backwards;
}

.zs-feed-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, scale .15s var(--ease-out);
}

.zs-feed-link:hover {
  border-color: var(--border-strong);
}

.zs-feed-link .zs-fan {
  flex: 0 0 210px;
  width: 210px;
  padding: 10px 6px;
}

/* Small cards: keep each look's frame, just round it less */
.zs-feed-link .zs-fan-card {
  border-radius: min(var(--zs-fan-radius, 18px), 9px);
}

.zs-feed-link .zs-fan-card > img,
.zs-feed-link .zs-more-glass {
  border-radius: min(var(--zs-fan-img-radius, 15.5px), 7px);
}

.zs-feed-link .zs-more-glass b {
  font-size: 15px;
}

.zs-feed-link .zs-fan-add {
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
}

.zs-feed-link .zs-fan-add svg {
  width: 14px;
  height: 14px;
}

.zs-feed-cap {
  flex: 1;
  min-width: 0;
}

/* Long names wrap onto a second line; only past that do they end in "…" */
.zs-feed-cap b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Room inside the clip for swashes that reach past the letters, text stays put
     (none above and below, where it would show a sliver of a clamped third line) */
  padding: 0 .3em;
  margin: 0 -.3em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  font-family: var(--zs-title-font, var(--font-ui));
  font-size: var(--zs-cap-size, 17px);
  font-style: var(--zs-title-style, normal);
  font-weight: var(--zs-title-weight, 600);
  letter-spacing: var(--zs-title-tracking, -0.02em);
  text-transform: var(--zs-title-case, none);
  text-shadow: var(--zs-title-glow, none);
  color: var(--text);
}

.zs-feed-cap span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--zs-meta-font, var(--font-ui));
  font-size: 13px;
  letter-spacing: var(--zs-meta-tracking, 0);
  text-transform: var(--zs-meta-case, none);
  color: var(--text-3);
}

.zs-feed-cap .zs-feed-draft {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--fill-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}

.zs-feed-draft svg {
  width: 12px;
  height: 12px;
}

.zs-feed-story {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  white-space: pre-line;
}

.zs-feed-go {
  flex: none;
  display: grid;
  color: var(--text-4);
  transition: transform .3s var(--zs-ease), color .25s ease;
}

.zs-feed-go svg {
  width: 18px;
  height: 18px;
}

.zs-feed-link:hover .zs-feed-go {
  color: var(--text-2);
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .zs-feed-link {
    gap: 10px;
    padding-right: 12px;
  }

  .zs-feed-link .zs-fan {
    flex-basis: 124px;
    width: 124px;
    padding: 8px 4px;
  }

  .zs-feed-link .zs-more-glass b {
    font-size: 13px;
  }

  /* The whole row is the link; its width goes to the name instead */
  .zs-feed-go {
    display: none;
  }

  .zs-feed-cap b {
    font-size: min(var(--zs-cap-size, 17px), 22px);
  }

  .zs-feed-cap span {
    font-size: 12.5px;
  }

  .zs-feed-link .zs-fan-add {
    display: none;
  }

  .zs-feed-story {
    -webkit-line-clamp: 1;
  }
}

.zs-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 6px;
  /* Cards are 30cqi wide, so a look's mat in cqi scales with the card (10cqi ≈ a third of it) */
  container-type: inline-size;
}

.zs-fan-card {
  position: relative;
  flex: 0 0 30%;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  /* Frame, mat and shadow come from the look (looks.css); these are the defaults */
  padding: var(--zs-fan-pad, 0);
  border-radius: var(--zs-fan-radius, 18px);
  border: var(--zs-fan-border, 2.5px solid #fff);
  background: var(--zs-fan-bg, var(--surface-3));
  box-shadow: var(--zs-fan-shadow, 0 16px 32px -14px rgba(15, 18, 32, .45), 0 2px 6px rgba(15, 18, 32, .12));
  transform: rotate(var(--tilt));
  transition: transform .5s var(--zs-ease), box-shadow .3s ease;
}

.zs-fan-card + .zs-fan-card {
  margin-left: -6.67%;
}

.zs-fan-card > img,
.zs-more-glass {
  border-radius: var(--zs-fan-img-radius, 15.5px);
}

.zs-fan-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--zs-photo-filter, none);
}

.zs-fan-card[data-id] {
  cursor: zoom-in;
}

.zs-fan-card.is-empty {
  background:
    radial-gradient(120% 90% at 20% 10%, var(--accent-soft), transparent 60%),
    var(--surface-3);
}

.zs-feed-link:hover .zs-fan-card:nth-child(1) { transform: translateX(-5%) rotate(-5deg); }
.zs-feed-link:hover .zs-fan-card:nth-child(2) { transform: translateX(-2%) translateY(-4px) rotate(2deg); }
.zs-feed-link:hover .zs-fan-card:nth-child(3) { transform: translateX(2%) rotate(-3deg); }
.zs-feed-link:hover .zs-fan-card:nth-child(4) { transform: translateX(5%) rotate(5deg); }

/* Story note: warm paper with editorial type */
.zs-fan-card.is-note {
  z-index: 2;
  display: flex;
  padding: 10% 9%;
  overflow: hidden;
  container-type: inline-size;
  /* Reset what a look's layered mat (e.g. film sprockets) sets through the background shorthand */
  background-position: 0 0;
  background-size: auto;
  background-repeat: repeat;
  background-color: #fbf6ea;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.zs-note-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
  overflow: hidden;
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-size: max(9px, 8.4cqi);
  line-height: 1.38;
  color: #3b3226;
  white-space: pre-line;
  text-align: left;
}

/* A line or two reads like a pull quote */
.zs-fan-card.is-short {
  align-items: center;
}

.zs-fan-card.is-short .zs-note-text {
  font-size: max(11px, 12.5cqi);
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

/* +N: a heavy frosted pane over the next photo */
.zs-fan-card.is-more {
  cursor: pointer;
}

.zs-more-glass {
  position: absolute;
  inset: var(--zs-fan-pad, 0);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.zs-more-glass b {
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.zs-fan-add {
  position: absolute;
  top: -13px;
  right: -13px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: #14161c;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform .4s var(--zs-ease);
}

.zs-fan-add:hover {
  transform: scale(1.08) rotate(90deg);
}

.zs-fan-add svg {
  width: 20px;
  height: 20px;
}

/* ---------- Album boards (every view but the justified grid) ---------- */
.zs-board {
  position: relative;
}

.zs-board img.zs-ph {
  opacity: 0;
  transition: opacity .4s ease;
}

.zs-board img.zs-ph.is-loaded {
  opacity: 1;
}

/* ---------- Instant-film Polaroids ---------- */
.zs-polaroid {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex: none;
  width: var(--pw, 158px);
  padding: 7px 7px 0;
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--zs-ivory);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  transform: rotate(var(--r, 0deg));
  cursor: zoom-in;
  outline: none;
  transition: transform .45s var(--zs-ease), box-shadow .3s ease;
}

.zs-polaroid-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #d9d6cf;
}

.zs-polaroid-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .12);
  pointer-events: none;
}

.zs-polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Counts sit on the left: the next print overlaps the right edge */
.zs-polaroid-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 26px;
  padding: 0 2px;
  font: 600 10.5px var(--font-num);
  color: #8d8679;
}

.zs-polaroid-foot svg {
  width: 11px;
  height: 11px;
}

.zs-polaroid-foot svg:not(:first-child) {
  margin-left: 6px;
}

.zs-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}

.zs-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: currentColor;
}

.zs-mode-polaroid-stream .zs-polaroid:hover,
.zs-mode-polaroid-stream .zs-polaroid:focus-visible {
  z-index: 10;
  transform: translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1);
}

/* Day-stream */
.zs-mode-polaroid-stream {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.zs-day {
  animation: zuiRise .5s var(--ease-out) calc(var(--i, 0) * .06s) backwards;
}

.zs-day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 17px;
  letter-spacing: -0.015em;
}

.zs-day-head b {
  font-weight: 700;
  color: var(--text);
}

.zs-day-head.is-recent b {
  color: var(--zs-terracotta);
}

.zs-day-head span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
}

.zs-day-head span::before {
  content: '•';
  margin-right: 8px;
  color: var(--text-4);
}

.zs-day-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 18px;
  padding: 4px 0 0 12px;
}

.zs-day-row .zs-polaroid {
  margin-left: -12px;
  animation: zsDrop .55s var(--zs-ease) calc(var(--d, 0) * 35ms) backwards;
}

@keyframes zsDrop {
  from { opacity: 0; transform: translateY(-16px) rotate(calc(var(--r, 0deg) * 2.5)); }
}

/* ---------- Smart grid: moments, a larger hero, bursts folded together ---------- */
/* --n columns come from app.js (smartColumns, from the S/M/L size; keep its gaps in step with these) */
.zs-smart {
  --gap: 12px;
  --frame-w: 12px;   /* .zs-smart-tile's padding */
  --frame-h: 24px;
  container-type: inline-size;   /* rows are measured off its width */
  display: grid;
  gap: 30px;
}

/* Three letters: never squeezed below their width (a scrolling .zs-seg would clip L) */
.zs-size-seg {
  flex-shrink: 0;
}

.zs-size-seg button {
  min-width: 30px;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 650;
}

.zs-smart-moment {
  animation: zuiRise .5s var(--ease-out) calc(var(--i, 0) * 50ms) backwards;
}

.zs-smart-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 2px 10px;
}

.zs-smart-moment:first-child .zs-smart-head {
  margin-top: 0;
}

.zs-smart-head b {
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Every tile has its own spot (packMoment). Rows are sized so the photo inside a one-cell card's
   frame (--frame-w across, --frame-h top + bottom) is 3:2, so landscapes sit uncropped */
.zs-smart-grid {
  --col: calc((100cqw - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3));
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  grid-auto-rows: calc((var(--col) - var(--frame-w)) * 2 / 3 + var(--frame-h));
  gap: var(--gap);
}

/* White instant-film card, like the Days view's Polaroids but square to the grid */
.zs-smart-tile {
  position: relative;
  display: flex;
  padding: 6px 6px 18px;
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--zs-ivory);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  transform: rotate(var(--r, 0deg));
  cursor: zoom-in;
  outline: none;
  transition: transform .45s var(--zs-ease), box-shadow .3s ease;
}

.zs-smart-photo {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.zs-smart-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .12);
  pointer-events: none;
}

.zs-smart-tile:hover,
.zs-smart-tile:focus-visible {
  z-index: 2;
  transform: translateY(-4px) rotate(0deg) scale(1.02);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1);
}

.zs-smart-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.zs-smart-tile:hover img,
.zs-smart-tile:focus-visible img {
  transform: scale(1.04);
}

.zs-smart-tile:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
}

.zs-smart-tile.is-selected {
  box-shadow: 0 0 0 3px var(--accent);
}

/* Burst: a few near-identical shots stacked behind the best one */
.zs-burst {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: none;
  border-radius: 99px;
  background: rgba(10, 12, 18, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 12px var(--font-ui);
  cursor: pointer;
}

.zs-burst svg {
  width: 13px;
  height: 13px;
}

.zs-smart-tile.is-burst:hover .zs-burst {
  background: rgba(10, 12, 18, .85);
}

/* A burst shows a second card peeking out behind it */
.zs-smart-tile.is-burst {
  box-shadow: 5px -5px 0 -1px var(--zs-ivory), 5px -5px 0 0 rgba(0, 0, 0, .07), 0 8px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
}

/* ---------- The owner's card for a photo in Moments: paper, a Caption frame ---------- */
.zs-smart-tile.paper-white { --zs-ivory: #ffffff; }
.zs-smart-tile.paper-black { --zs-ivory: #1f1e1c; }
.zs-smart-tile.paper-kraft { --zs-ivory: #cdb08a; }

/* Caption: the instant-film card with the deep bottom edge, the caption written on it */
.zs-smart-tile.is-captioned {
  flex-direction: column;
  padding-bottom: 0;
}

.zs-smart-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  flex: none;
  height: clamp(30px, 24%, 58px);
  padding: 4px 4px 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #2b2a27;
  font: 500 clamp(14px, 1.1vw + 9px, 19px)/1.1 'Caveat', cursive;
  text-align: center;
  overflow-wrap: anywhere;
}

.zs-smart-tile.paper-black .zs-smart-caption {
  color: #f1efe8;
}

.zs-smart-tile.paper-kraft .zs-smart-caption {
  color: #3a2c1a;
}

/* Owner: the button that opens a card's menu, on hover (always there on touch) */
.zs-card-edit {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: rgba(10, 12, 18, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}

.zs-card-edit svg {
  width: 15px;
  height: 15px;
}

.zs-smart-tile:hover .zs-card-edit,
.zs-smart-tile:focus-within .zs-card-edit,
.zs-card-edit[aria-expanded="true"] {
  opacity: 1;
}

.zs-card-edit:hover {
  background: rgba(10, 12, 18, .85);
}

@media (hover: none) {
  .zs-card-edit { opacity: 1; }
}

.is-selecting .zs-card-edit {
  display: none;
}

.zs-card-menu {
  position: fixed;
  z-index: 1800;
  display: grid;
  gap: 6px;
  width: min(264px, calc(100vw - 16px));
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--border, rgba(0, 0, 0, .08));
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .08);
  color: var(--text);
  font: 500 13px var(--font-ui);
  animation: zuiRise .18s var(--ease-out);
}

.zs-card-menu-label {
  margin: 4px 2px 0;
  color: var(--text-muted, var(--text));
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

.zs-card-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.zs-card-opts.is-papers,
.zs-card-opts.is-sizes {
  grid-template-columns: repeat(4, 1fr);
}

.zs-card-opts button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 4px;
  border: 1px solid var(--border, rgba(0, 0, 0, .1));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: 600 12px var(--font-ui);
  cursor: pointer;
}

.zs-card-opts button:hover {
  background: var(--surface-2, rgba(0, 0, 0, .04));
}

.zs-card-opts button.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Little cards: the classic edge and the deep Caption edge */
.zs-card-mini {
  width: 26px;
  height: 30px;
  box-sizing: border-box;
  border: 3px solid #faf9f5;
  border-bottom-width: 7px;
  border-radius: 2px;
  background: linear-gradient(160deg, #9fb7c9, #6d8798);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.zs-card-mini.is-caption {
  height: 34px;
  border-bottom-width: 12px;
}

.zs-card-swatch {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: #faf9f5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.zs-card-swatch.paper-white { background: #ffffff; }
.zs-card-swatch.paper-black { background: #1f1e1c; }
.zs-card-swatch.paper-kraft { background: #cdb08a; }

.zs-card-caption {
  display: grid;
  gap: 6px;
}

.zs-card-caption.hidden {
  display: none;
}

.zs-card-caption textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--border, rgba(0, 0, 0, .12));
  border-radius: 10px;
  background: var(--surface-2, transparent);
  color: inherit;
  font: 500 18px/1.15 'Caveat', cursive;
  resize: vertical;
}

/* Restack: put back a stack the owner unstacked for everyone */
.zs-restack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 99px;
  background: rgba(10, 12, 18, .72);
  color: #fff;
  font: 600 12.5px var(--font-ui);
  cursor: pointer;
}

.zs-restack svg {
  width: 14px;
  height: 14px;
}

.zs-card-menu .zs-restack {
  margin-top: 6px;
}

.zs-scrap-stack .zs-restack {
  position: absolute;
  top: -12px;
  right: -8px;
  z-index: 5;
}

/* ---------- Stack peek: a stack's photos laid out over the blurred page ---------- */
body.zs-peek-open {
  overflow: hidden;
}

.zs-peek {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 22px;
  overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(12, 14, 20, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.zs-peek-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 16px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 30, .55);
  color: #fff;
  font: 600 13px var(--font-ui);
}

.zs-peek-count {
  margin-right: 6px;
  opacity: .85;
}

.zs-peek-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 13px var(--font-ui);
  cursor: pointer;
}

.zs-peek-btn.is-icon {
  width: 34px;
  padding: 0;
  justify-content: center;
}

.zs-peek-btn:hover {
  background: rgba(255, 255, 255, .26);
}

.zs-peek-btn svg {
  width: 15px;
  height: 15px;
}

.zs-peek-cards {
  --h: 240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 18px;
  max-width: min(1200px, 100%);
  padding: 10px;
}

.zs-peek-card {
  position: relative;
  flex: none;
  box-sizing: content-box;
  height: var(--h);
  aspect-ratio: var(--ar);
  overflow: hidden;
  border: 6px solid var(--zs-ivory, #faf9f5);
  border-bottom-width: 18px;
  border-radius: 3px;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .2);
  transform: rotate(var(--r, 0deg));
  cursor: zoom-in;
  outline: none;
  transition: transform .35s var(--zs-ease, cubic-bezier(.2, .8, .2, 1));
}

/* Owner: star the photo that shows on top of the stack */
.zs-peek-front {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: .85;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.zs-peek-front:hover {
  opacity: 1;
  transform: scale(1.08);
}

.zs-peek-front svg {
  width: 17px;
  height: 17px;
}

.zs-peek-front.is-on {
  background: #f5b301;
  color: #fff;
  opacity: 1;
}

.zs-peek-front.is-on svg {
  fill: currentColor;
}

.zs-peek-card:hover,
.zs-peek-card:focus-visible {
  transform: translateY(-6px) rotate(0deg) scale(1.03);
}

.zs-peek-card:focus-visible {
  box-shadow: 0 0 0 3px var(--accent), 0 22px 44px -14px rgba(0, 0, 0, .55);
}

.zs-peek-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .zs-peek-cards {
    gap: 12px;
  }

  .zs-peek-card {
    border-width: 4px 4px 12px;
  }
}

@media (max-width: 760px) {
  .zs-smart {
    --gap: 6px;
    --frame-w: 6px;
    --frame-h: 12px;
    gap: 22px;
  }

  .zs-smart-tile {
    padding: 3px 3px 9px;
  }
}

/* ---------- Scrapbook ---------- */
.zs-album-subtitle {
  margin: 6px 0 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text-2);
}

.zs-album-subtitle:empty {
  display: none;
}

#view-album.is-scrapbook .zs-title-block {
  text-align: center;
}

#view-album.is-scrapbook .zs-title-row,
#view-album.is-scrapbook .zs-title-actions,
#view-album.is-scrapbook .zs-viewbar {
  justify-content: center;
}

#view-album.is-scrapbook #album-title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#view-album.is-scrapbook .zs-album-subtitle,
#view-album.is-scrapbook .zs-desc {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.zs-scrap {
  margin: 0 auto;
}

.zs-map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto 34px;
  animation: zuiRise .6s var(--ease-out) .05s backwards;
}

.zs-map-pill {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .6);
  background: #e9eee2;
  box-shadow: 0 16px 36px -16px rgba(15, 40, 80, .5);
}

.zs-map-tiles {
  position: absolute;
  inset: 0;
  filter: saturate(.75) contrast(.96) brightness(1.03);
}

.zs-map-tiles img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
}

.zs-map-faux {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ecefe4;
}

.zs-map-faux g path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
}

.zs-map-faux .r {
  fill: none;
  stroke: #a9d0f0;
  stroke-width: 14;
  stroke-linecap: round;
}

.zs-map-faux .p {
  fill: #cfe5c4;
}

.zs-map-attr {
  position: absolute;
  left: 50%;
  bottom: 5px;
  padding: 0 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .7);
  font-size: 9px;
  color: rgba(0, 0, 0, .6);
  transform: translateX(-50%);
}

.zs-map-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: #e5484d;
  box-shadow: 0 0 0 7px rgba(229, 72, 77, .22);
}

.zs-map-ticket {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 40px;
  color: #6b3d00;
  filter: drop-shadow(0 8px 10px rgba(150, 85, 0, .35));
  transform: translateX(-50%) rotate(-8deg);
  animation: zsBob 6s ease-in-out infinite;
}

.zs-map-ticket i {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffe08a 0%, #f7b733 55%, #e39200 100%);
  -webkit-mask:
    radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}

.zs-map-ticket i::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 70%;
  border-left: 1.5px dashed rgba(107, 61, 0, .45);
}

.zs-map-ticket svg {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.zs-map-name {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

.zs-scrap-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
  padding: 12px 10px 30px;
}

.zs-scrap-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.zs-scrap-col.is-offset {
  padding-top: 56px;
}

.zs-scrap-stack {
  position: relative;
  transform: rotate(var(--r, 0deg));
  animation: zsPop .65s var(--zs-ease) calc(.08s + var(--i, 0) * 50ms) backwards;
}

@keyframes zsPop {
  from { opacity: 0; transform: translateY(18px) scale(.92) rotate(var(--r, 0deg)); }
}

.zs-scrap-card {
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 18px;
  border: 3px solid #fff;
  background: #cfd8e3;
  box-shadow: 0 18px 34px -16px rgba(10, 30, 60, .5), 0 2px 6px rgba(10, 30, 60, .12);
  cursor: zoom-in;
  outline: none;
}

.zs-scrap-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zs-scrap-card.is-front {
  position: relative;
  z-index: 2;
  transition: transform .45s var(--zs-ease);
}

.zs-scrap-card.is-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotate(var(--r)) scale(.96);
  transition: transform .5s var(--zs-ease);
}

.zs-scrap-stack:hover .zs-scrap-card.is-front,
.zs-scrap-card.is-front:focus-visible {
  transform: translateY(-4px) scale(1.02);
}

.zs-scrap-stack:hover .zs-scrap-card.is-back {
  transform: rotate(calc(var(--r) * 1.6)) scale(.96) translateY(-4px);
}

/* A closed stack says how many more prints are under the top one */
.zs-scrap-count {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 99px;
  background: #fff;
  color: #1f5fa3;
  font: 700 13px/1 var(--font-num, var(--font-ui));
  box-shadow: 0 8px 18px -6px rgba(10, 30, 60, .45);
  pointer-events: none;
}

/* Spread stack: the prints lie side by side, the top one across the full width */
.zs-scrap-stack.is-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.zs-scrap-stack.is-spread .zs-scrap-card {
  position: relative;
  inset: auto;
  z-index: 1;
  transform: rotate(calc(var(--r) * .35));
}

.zs-scrap-stack.is-spread .zs-scrap-card.is-front {
  order: -1;
  grid-column: 1 / -1;
  transform: none;
}

.zs-scrap-stack.is-spread .zs-scrap-card.is-back {
  aspect-ratio: var(--ar, 1);
}

.zs-scrap-stack.is-spread.n2 .zs-scrap-card.is-back {
  grid-column: 1 / -1;
}

.zs-scrap-stack.is-spread:hover .zs-scrap-card.is-front {
  transform: none;
}

.zs-scrap-stack.is-spread .zs-scrap-card:hover {
  transform: translateY(-3px) scale(1.015);
}

.zs-bubble {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .65);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .25) 20%, transparent 42%),
    conic-gradient(from 210deg, rgba(255, 150, 220, .5), rgba(130, 200, 255, .5), rgba(160, 255, 210, .45), rgba(255, 230, 150, .45), rgba(255, 150, 220, .5));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(20, 40, 80, .35);
  color: #fff;
  font: 700 11px/1 var(--font-num);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  pointer-events: none;
  animation: zsBob 5s ease-in-out infinite;
}

.zs-bubble svg {
  width: 15px;
  height: 15px;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

.zs-bubble.is-heart svg {
  color: #ff4f7a;
  fill: currentColor;
}

.zs-bubble.is-sticker {
  font-size: 22px;
  text-shadow: none;
}

.zs-bubble.is-tr { top: -16px; right: -8px; }
.zs-bubble.is-tl { top: -16px; left: -8px; animation-delay: -1.5s; }
.zs-bubble.is-br { bottom: -16px; right: -8px; animation-delay: -3s; }
.zs-bubble.is-bl { bottom: -16px; left: -8px; animation-delay: -4s; }

@keyframes zsBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* Selecting in any view */
.zs-board.is-selecting [data-id] {
  cursor: pointer;
}

.zs-board [data-id].is-selected {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Dialog bits: sections, rows, choice chips ---------- */
.zs-wide {
  max-width: 560px;
}

.zs-form-section {
  margin: 22px 0 -4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.modal-header + .zs-form-section {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

.zs-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.zs-field-label {
  font-size: 12.5px;
  font-weight: 560;
  color: var(--text-2);
}

/* Card photos: the album card's picks as a little fan, with the choose / reset buttons */
.zs-card-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.zs-card-thumbs {
  display: flex;
  padding-left: 8px;
}

.zs-card-thumbs img {
  width: 44px;
  height: 54px;
  margin-left: -8px;
  object-fit: cover;
  border: 3px solid #fbfaf6;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}

.zs-card-thumbs img:nth-child(1) { transform: rotate(-4deg); }
.zs-card-thumbs img:nth-child(2) { transform: rotate(2deg) translateY(-2px); }
.zs-card-thumbs img:nth-child(3) { transform: rotate(5deg); }

.zs-card-note {
  flex: 1;
  min-width: 120px;
  font-size: 12.5px;
  color: var(--text-3);
}

.zs-input-row {
  display: flex;
  gap: 8px;
}

.zs-input-row .btn {
  height: 40px;
  flex: none;
}

.zs-gps-btn {
  margin-top: 10px;
}

.zs-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.zs-choice.is-compact,
.zs-choice.is-swatches {
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}

.zs-choice button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.zs-choice.is-compact button,
.zs-choice.is-swatches button {
  align-items: center;
  text-align: center;
}

.zs-choice button svg {
  width: 17px;
  height: 17px;
  color: var(--text-3);
}

.zs-choice button b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.zs-choice button small {
  font-size: 11.5px;
  color: var(--text-3);
}

.zs-choice button:hover {
  border-color: var(--border-strong);
}

.zs-choice button.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.zs-choice button.is-on svg {
  color: var(--accent-text);
}

.zs-swatch {
  width: 100%;
  height: 26px;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid var(--border);
}

.zs-swatch.is-default { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 100%); }
.zs-swatch.is-sky { background: linear-gradient(180deg, #3f8ee0, #b7dcf7); }
.zs-swatch.is-paper { background: linear-gradient(135deg, #f6eedd, #e6d6b8); }
.zs-swatch.is-midnight { background: radial-gradient(80% 120% at 30% 0%, #2a2440, #0b0d12 70%); }
.zs-swatch.is-sunset { background: linear-gradient(180deg, #3a1d4f, #c4457a 55%, #f4a55f); }
.zs-swatch.is-forest { background: radial-gradient(90% 120% at 30% 0%, #3d6b4c, #0f1d15 75%); }
.zs-swatch.is-blush { background: linear-gradient(135deg, #fbefec, #ecc9c4); }
.zs-swatch.is-darkroom { background: radial-gradient(70% 90% at 50% 40%, #1a1a1c, #000 75%); }
.zs-swatch.is-ocean { background: linear-gradient(180deg, #0f4c5c, #06202b 70%); }
.zs-swatch.is-lavender { background: linear-gradient(135deg, #f3effb, #d6cbef); }
.zs-swatch.is-golden { background: linear-gradient(180deg, #fff1d6, #f2c27b); }
.zs-swatch.is-fog { background: linear-gradient(180deg, #f1f3f5, #cfd6dd); }
.zs-swatch.is-neon { background: radial-gradient(60% 60% at 25% 20%, #ff3fa4, transparent 70%), radial-gradient(60% 60% at 80% 85%, #22d3ee, transparent 70%), #0b0716; }

/* ---------- Album themes (tint the page behind an open album) ---------- */
.zs-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body[data-album-theme] .zs-backdrop {
  display: block;
  animation: zsFade .6s ease both;
}

.zs-backdrop i {
  display: none;
  position: absolute;
  border-radius: 50%;
}

body[data-album-theme="sky-clouds"] .zs-backdrop {
  background: linear-gradient(180deg, #3d8bdc 0%, #66abeb 42%, #b3d9f6 100%);
}

body[data-album-theme="sky-clouds"] .zs-backdrop i {
  display: block;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side at 30% 60%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side at 72% 55%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  filter: blur(14px);
  animation: zsDrift 60s linear infinite alternate;
}

body[data-album-theme="sky-clouds"] .zs-backdrop i:nth-child(1) { width: 70vw; height: 24vw; left: -20vw; top: 8vh; }
body[data-album-theme="sky-clouds"] .zs-backdrop i:nth-child(2) { width: 56vw; height: 18vw; right: -16vw; top: 42vh; animation-duration: 80s; animation-direction: alternate-reverse; opacity: .8; }
body[data-album-theme="sky-clouds"] .zs-backdrop i:nth-child(3) { width: 80vw; height: 26vw; left: 10vw; bottom: -6vh; animation-duration: 95s; opacity: .9; }

@keyframes zsDrift {
  from { translate: -4vw 0; }
  to { translate: 6vw -1vh; }
}

body[data-album-theme="warm-paper"] .zs-backdrop {
  background-color: #f1e7d3;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 252, 244, .8), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(120, 90, 40, .18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-album-theme="midnight-grain"] .zs-backdrop {
  background-color: #0a0c11;
  background-image:
    radial-gradient(60% 50% at 20% 0%, rgba(110, 80, 200, .22), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(40, 120, 200, .16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-album-theme="sunset"] .zs-backdrop {
  background:
    radial-gradient(70% 45% at 70% 100%, rgba(255, 186, 110, .55), transparent 70%),
    radial-gradient(60% 50% at 15% 85%, rgba(232, 92, 140, .4), transparent 70%),
    linear-gradient(180deg, #1d1236 0%, #4a2357 38%, #a33d6f 72%, #e07b5e 100%);
}

body[data-album-theme="forest"] .zs-backdrop {
  background-color: #0d1912;
  background-image:
    radial-gradient(70% 50% at 20% 0%, rgba(120, 180, 120, .22), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, rgba(40, 110, 80, .3), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 1 0 0 0 0 .8 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-album-theme="blush"] .zs-backdrop {
  background-color: #f8ebe8;
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .75), transparent 65%),
    radial-gradient(80% 60% at 100% 100%, rgba(226, 150, 160, .25), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-album-theme="darkroom"] .zs-backdrop {
  background: radial-gradient(80% 60% at 50% 30%, #121214, #030304 70%);
}

body[data-album-theme="ocean"] .zs-backdrop {
  background-color: #06202b;
  background-image:
    radial-gradient(80% 50% at 50% 0%, rgba(80, 190, 200, .28), transparent 70%),
    radial-gradient(60% 40% at 10% 100%, rgba(20, 90, 120, .45), transparent 70%),
    linear-gradient(180deg, #0f4c5c 0%, #0a3442 45%, #06202b 100%);
}

body[data-album-theme="lavender"] .zs-backdrop {
  background-color: #f2eefa;
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .8), transparent 65%),
    radial-gradient(70% 60% at 0% 100%, rgba(170, 150, 220, .28), transparent 70%),
    radial-gradient(60% 50% at 100% 80%, rgba(220, 180, 230, .22), transparent 70%);
}

body[data-album-theme="golden-hour"] .zs-backdrop {
  background-color: #fbecd2;
  background-image:
    radial-gradient(70% 55% at 85% 0%, rgba(255, 214, 140, .7), transparent 70%),
    radial-gradient(80% 60% at 10% 100%, rgba(240, 160, 90, .28), transparent 70%),
    linear-gradient(180deg, #fff4e0 0%, #f8e2bd 100%);
}

body[data-album-theme="fog"] .zs-backdrop {
  background-color: #e9edf0;
  background-image:
    radial-gradient(100% 60% at 50% 0%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(80% 50% at 50% 100%, rgba(150, 165, 180, .25), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .4 0 0 0 0 .45 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-album-theme="neon"] .zs-backdrop {
  background-color: #0b0716;
  background-image:
    radial-gradient(55% 45% at 15% 5%, rgba(255, 63, 164, .3), transparent 70%),
    radial-gradient(55% 45% at 90% 95%, rgba(34, 211, 238, .24), transparent 70%),
    radial-gradient(40% 30% at 60% 40%, rgba(124, 58, 237, .14), transparent 70%);
}

body[data-album-theme] .zs-shell {
  --zs-ivory: #faf9f5;
}

body[data-album-theme="sky-clouds"] .zs-shell {
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .9);
  --text-3: rgba(255, 255, 255, .78);
  --text-4: rgba(255, 255, 255, .55);
  --border: rgba(255, 255, 255, .3);
  --border-strong: rgba(255, 255, 255, .5);
  --fill: rgba(14, 58, 112, .2);
  --fill-2: rgba(14, 58, 112, .3);
  --glass: rgba(18, 66, 128, .34);
  --glass-border: rgba(255, 255, 255, .38);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .35);
  --surface-3: rgba(255, 255, 255, .3);
  --accent-text: #ffffff;
  --zs-terracotta: #ffe3a3;
  --zs-seg-on-bg: #ffffff;
  --zs-seg-on-fg: #1f5fa3;
}

body[data-album-theme="warm-paper"] .zs-shell {
  --text: #2b2419;
  --text-2: #4b4132;
  --text-3: #7a6c57;
  --text-4: #a99b83;
  --border: rgba(70, 48, 14, .14);
  --border-strong: rgba(70, 48, 14, .26);
  --fill: rgba(70, 48, 14, .06);
  --fill-2: rgba(70, 48, 14, .1);
  --glass: rgba(255, 250, 240, .68);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --surface-3: #e6dbc5;
  --accent-text: #8a4a1c;
  --zs-terracotta: #b5532a;
  --zs-seg-on-bg: #2b2419;
  --zs-seg-on-fg: #f6efe2;
}

body[data-album-theme="midnight-grain"] .zs-shell {
  --text: #ece9e2;
  --text-2: #c7c2b7;
  --text-3: #8f8a80;
  --text-4: #5f5b54;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --fill: rgba(255, 255, 255, .05);
  --fill-2: rgba(255, 255, 255, .09);
  --glass: rgba(20, 22, 30, .6);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  --surface-3: #1d2029;
  --accent-text: #c9b8ff;
  --zs-terracotta: #f0916a;
  --zs-seg-on-bg: #ece9e2;
  --zs-seg-on-fg: #0a0c11;
  --zs-ivory: #efece4;
}

body[data-album-theme="sunset"] .zs-shell {
  --text: #fff6ef;
  --text-2: rgba(255, 240, 230, .9);
  --text-3: rgba(255, 228, 214, .74);
  --text-4: rgba(255, 220, 200, .5);
  --border: rgba(255, 220, 200, .2);
  --border-strong: rgba(255, 220, 200, .36);
  --fill: rgba(40, 12, 40, .22);
  --fill-2: rgba(40, 12, 40, .34);
  --glass: rgba(42, 14, 46, .42);
  --glass-border: rgba(255, 210, 190, .26);
  --glass-hi: inset 0 1px 0 rgba(255, 220, 200, .22);
  --surface-3: rgba(255, 210, 190, .16);
  --accent-text: #ffd2a8;
  --zs-terracotta: #ffcf8a;
  --zs-seg-on-bg: #fff3e8;
  --zs-seg-on-fg: #7a2450;
}

body[data-album-theme="forest"] .zs-shell {
  --text: #e9f1e7;
  --text-2: #c4d4c1;
  --text-3: #8fa58b;
  --text-4: #5f735c;
  --border: rgba(200, 240, 200, .1);
  --border-strong: rgba(200, 240, 200, .2);
  --fill: rgba(200, 240, 200, .05);
  --fill-2: rgba(200, 240, 200, .1);
  --glass: rgba(14, 30, 20, .62);
  --glass-border: rgba(200, 240, 200, .12);
  --glass-hi: inset 0 1px 0 rgba(200, 240, 200, .08);
  --surface-3: #1a2c21;
  --accent-text: #b6e3a6;
  --zs-terracotta: #e2c46a;
  --zs-seg-on-bg: #dfeedb;
  --zs-seg-on-fg: #12251a;
  --zs-ivory: #eef3ea;
}

body[data-album-theme="blush"] .zs-shell {
  --text: #3a2226;
  --text-2: #5c3c41;
  --text-3: #8c6b70;
  --text-4: #b59a9e;
  --border: rgba(110, 40, 50, .13);
  --border-strong: rgba(110, 40, 50, .24);
  --fill: rgba(110, 40, 50, .05);
  --fill-2: rgba(110, 40, 50, .09);
  --glass: rgba(255, 246, 244, .7);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .85);
  --surface-3: #efd9d5;
  --accent-text: #a8445a;
  --zs-terracotta: #c0506a;
  --zs-seg-on-bg: #3a2226;
  --zs-seg-on-fg: #fbefec;
}

body[data-album-theme="darkroom"] .zs-shell {
  --text: #f2f2f0;
  --text-2: #bdbdb9;
  --text-3: #85857f;
  --text-4: #55554f;
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);
  --fill: rgba(255, 255, 255, .04);
  --fill-2: rgba(255, 255, 255, .08);
  --glass: rgba(12, 12, 14, .72);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --surface-3: #141416;
  --accent-text: #f2f2f0;
  --zs-terracotta: #e8a25c;
  --zs-seg-on-bg: #f2f2f0;
  --zs-seg-on-fg: #050506;
  --zs-ivory: #ecebe6;
}

body[data-album-theme="ocean"] .zs-shell {
  --text: #e6f4f5;
  --text-2: #bcd9dc;
  --text-3: #84a9ae;
  --text-4: #567a80;
  --border: rgba(180, 235, 240, .11);
  --border-strong: rgba(180, 235, 240, .22);
  --fill: rgba(180, 235, 240, .05);
  --fill-2: rgba(180, 235, 240, .1);
  --glass: rgba(6, 34, 46, .6);
  --glass-border: rgba(180, 235, 240, .13);
  --glass-hi: inset 0 1px 0 rgba(180, 235, 240, .08);
  --surface-3: #0f3442;
  --accent-text: #8ee0e6;
  --zs-terracotta: #ffc48a;
  --zs-seg-on-bg: #e6f4f5;
  --zs-seg-on-fg: #06303d;
  --zs-ivory: #eef6f6;
}

body[data-album-theme="lavender"] .zs-shell {
  --text: #2c2540;
  --text-2: #4a4163;
  --text-3: #7a7094;
  --text-4: #a79fbd;
  --border: rgba(60, 40, 110, .12);
  --border-strong: rgba(60, 40, 110, .22);
  --fill: rgba(60, 40, 110, .05);
  --fill-2: rgba(60, 40, 110, .09);
  --glass: rgba(250, 247, 255, .7);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .85);
  --surface-3: #e2dbf2;
  --accent-text: #6a4fb3;
  --zs-terracotta: #8a5cc7;
  --zs-seg-on-bg: #2c2540;
  --zs-seg-on-fg: #f3effb;
}

body[data-album-theme="golden-hour"] .zs-shell {
  --text: #3a2614;
  --text-2: #5a4026;
  --text-3: #8a6a44;
  --text-4: #b7976c;
  --border: rgba(110, 60, 10, .14);
  --border-strong: rgba(110, 60, 10, .26);
  --fill: rgba(110, 60, 10, .06);
  --fill-2: rgba(110, 60, 10, .1);
  --glass: rgba(255, 248, 234, .68);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --surface-3: #f2dcb4;
  --accent-text: #a25a12;
  --zs-terracotta: #c4621c;
  --zs-seg-on-bg: #3a2614;
  --zs-seg-on-fg: #fff4e0;
}

body[data-album-theme="fog"] .zs-shell {
  --text: #1f262d;
  --text-2: #3c4651;
  --text-3: #6b7783;
  --text-4: #9aa5b0;
  --border: rgba(30, 45, 60, .12);
  --border-strong: rgba(30, 45, 60, .22);
  --fill: rgba(30, 45, 60, .05);
  --fill-2: rgba(30, 45, 60, .09);
  --glass: rgba(248, 250, 252, .7);
  --glass-border: rgba(255, 255, 255, .78);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .85);
  --surface-3: #dde3e8;
  --accent-text: #3d5a73;
  --zs-terracotta: #4f6f8a;
  --zs-seg-on-bg: #1f262d;
  --zs-seg-on-fg: #f1f3f5;
}

body[data-album-theme="neon"] .zs-shell {
  --text: #f4ecff;
  --text-2: #cfc3e6;
  --text-3: #9488ad;
  --text-4: #62587a;
  --border: rgba(220, 190, 255, .1);
  --border-strong: rgba(220, 190, 255, .2);
  --fill: rgba(220, 190, 255, .05);
  --fill-2: rgba(220, 190, 255, .1);
  --glass: rgba(18, 10, 34, .62);
  --glass-border: rgba(220, 190, 255, .12);
  --glass-hi: inset 0 1px 0 rgba(255, 120, 200, .1);
  --surface-3: #1e1433;
  --accent-text: #ff7cc4;
  --zs-terracotta: #22d3ee;
  --zs-seg-on-bg: #f4ecff;
  --zs-seg-on-fg: #170c2b;
  --zs-ivory: #f3eefa;
}

body[data-album-theme="neon"] .zs-title-block h1 {
  text-shadow: 0 0 24px rgba(255, 63, 164, .35);
}

body[data-album-theme="sky-clouds"] .zs-title-block h1,
body[data-album-theme="sky-clouds"] .zs-map-name {
  text-shadow: 0 2px 18px rgba(20, 60, 120, .35);
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .zs-mode-polaroid-stream {
    --pw: 112px;
  }

  .zs-polaroid {
    padding: 5px 5px 0;
  }

  .zs-polaroid-foot {
    height: 20px;
  }

  .zs-fan-add {
    width: 36px;
    height: 36px;
    top: -10px;
    right: -10px;
  }

  .zs-fan-card {
    border-radius: 14px;
    border-width: 2px;
  }

  .zs-fan-card > img,
  .zs-more-glass {
    border-radius: 12px;
  }

  .zs-scrap-cols {
    gap: 0 16px;
    padding: 12px 4px 24px;
  }

  .zs-scrap-col {
    gap: 28px;
  }

  .zs-scrap-col.is-offset {
    padding-top: 40px;
  }

  .zs-scrap-card {
    border-radius: 14px;
  }

  .zs-bubble {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }

  .zs-bubble svg {
    width: 13px;
    height: 13px;
  }

  .zs-map-pill {
    height: 96px;
  }

  .zs-field-row {
    grid-template-columns: 1fr;
  }
}

/* Google Drive picker: Google places the dialog at the page's scroll offset when it opens, which can
   land it off screen. Pin it (and its backdrop) to the viewport instead. */
.picker-dialog-bg {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}
.picker-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* ---------- Contributors ---------- */
.zs-lock-contrib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--text-3);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
}
.zs-lock-contrib svg { width: 14px; height: 14px; }
.zs-lock-contrib:hover { color: var(--text); }

/* A dot on the account chip while requests wait */
.zauth-chip.zs-has-pending { position: relative; }
.zauth-chip.zs-has-pending::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger, #e5484d);
  box-shadow: 0 0 0 2px var(--surface);
}

.zs-modal-head-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#contributors-refresh.is-spinning svg { animation: zsSpin .8s linear infinite; }

.zs-ctabs { margin: 14px 0 12px; }
.zs-ctabs em {
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-style: normal;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.zs-ctabs em:empty { display: none; }

.zs-clist { display: flex; flex-direction: column; gap: 10px; }
.zs-cc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--fill);
}
.zs-cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.zs-cc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.zs-cc-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-cc-who span { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.zs-cc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); }
.zs-cc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.zs-cc-meta svg { width: 13px; height: 13px; }
.zs-cc-note {
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--border-strong, var(--border));
  color: var(--text-2);
}
.zs-cc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zs-cc-days button { height: 28px; padding: 0 10px; }
.zs-cc-quota { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.zs-cc-quota .zs-input { width: 76px; height: 34px; padding: 0 8px; }
.zs-cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-cc-usage { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.zs-cc-usage i { display: block; height: 100%; border-radius: inherit; background: var(--accent, #3b82f6); }
.zs-cc-usage.is-full i { background: var(--danger, #e5484d); }
.zs-cc-line, .zs-cc-hint { margin: 0; font-size: 12.5px; color: var(--text-2); }
.zs-cc-hint { color: var(--text-3); }
.zs-cc-edit summary { font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.zs-cc-edit[open] summary { margin-bottom: 8px; }
.zs-cc-edit[open] { display: flex; flex-direction: column; gap: 8px; }
.zs-cc.is-denied, .zs-cc.is-revoked { opacity: .85; }

/* ---------- Public album link ---------- */
/* The owner's menu: on/off, the link, how long it works, reset */
.zs-share-menu {
  display: grid;
  gap: 8px;
  width: 320px;
  padding: 10px;
}

.zs-share-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 6px;
  cursor: pointer;
}

.zs-share-toggle span {
  display: grid;
  gap: 3px;
  flex: 1;
}

.zs-share-toggle strong {
  font-size: 14px;
}

.zs-share-toggle small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-3);
}

.zs-share-toggle input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.zs-share-body {
  display: grid;
  gap: 8px;
}

.zs-share-body.hidden {
  display: none;
}

.zs-share-url {
  display: flex;
  gap: 6px;
}

.zs-share-url input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font: 12.5px var(--font-mono, monospace);
}

.zs-menu .zs-share-url .btn {
  width: auto;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 32px;
}

.zs-menu .zs-share-url .btn svg {
  width: 14px;
  height: 14px;
  margin: 0;
  color: inherit;
}

.zs-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--text-3);
}

.zs-share-row select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font: 500 13px var(--font-ui);
}

.zs-share-row select option {
  color: #111;
}

.zs-share-note {
  margin: 0;
  padding: 0 6px;
  font-size: 12px;
  color: var(--text-3);
}

.zs-share-note:empty {
  display: none;
}

.zs-menu .zs-share-reset {
  align-items: center;
  padding: 8px 6px;
  font-size: 13px;
  color: #ffb4a8;
}

.zs-menu .zs-share-reset svg {
  width: 15px;
  height: 15px;
  margin: 0;
  color: inherit;
}

/* The toolbar's globe shows when a public link is on */
.zs-tool-btn.is-on {
  color: var(--accent);
}

/* A public link's page: just the album, in its theme. No nav, account, hearts or comments. */
body.zs-shared .zs-nav,
body.zs-shared #preview-pill,
body.zs-shared #lb-heart,
body.zs-shared #lb-comments,
body.zs-shared .zs-lb-tabs [data-panel="comments"] {
  display: none !important;
}

body.zs-shared .zs-shell {
  padding-top: max(28px, env(safe-area-inset-top));
}

/* No hearts or comments on a public link, so no keys for them either */
body.zs-shared .zs-keys-social {
  display: none;
}

/* "12 new since your last visit" in the album's eyebrow line: one tap shows just those */
.zs-new-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 11.5px var(--font-ui);
  cursor: pointer;
  vertical-align: 1px;
  transition: background var(--t-fast);
}

.zs-new-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.zs-tile-new {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font: 700 10px var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .4);
}

.zs-link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Previous / next album, under the photos ---------- */
.zs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 40px 0 0;
}

.zs-pager-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}

.zs-pager-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-hi), var(--shadow-2, var(--shadow-1));
}

/* Arrows on the outside edges: ‹ photo title · title photo › */
.zs-pager-card.is-prev .zs-pager-go {
  order: -1;
}

.zs-pager-card.is-next {
  grid-column: 2;
  text-align: right;
}

.zs-pager-card.is-next .zs-pager-thumb {
  order: 1;
}

.zs-pager-card.is-next .zs-pager-go {
  order: 2;
}

.zs-pager-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-3);
}

.zs-pager-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zs-pager-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.zs-pager-text small {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-3);
}

.zs-pager-text b {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zs-pager-text em {
  font-size: 12.5px;
  font-style: normal;
  color: var(--text-3);
}

.zs-pager-go {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-3);
}

.zs-pager-go svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .zs-pager {
    grid-template-columns: 1fr;
  }

  .zs-pager-card.is-next {
    grid-column: 1;
  }

  .zs-pager-gap {
    display: none;
  }
}

/* ---------- Slideshow ---------- */
/* Time left on the photo on screen: a hairline across the very top, out of the viewer's grid */
.zs-lb-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med);
}

.zs-lb.is-playing .zs-lb-progress {
  opacity: 1;
}

.zs-lb-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .85);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@keyframes zsSlideProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#lb-play[aria-pressed="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

#lb-speed {
  min-width: 0;
  padding: 0 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

.zs-lb.is-playing.is-chrome-hidden {
  cursor: none;
}

/* Each photo drifts slowly in, from a point of its own, and the next one fades up */
.zs-lb.is-playing .zs-lb-slide.is-current img.zs-lb-full {
  animation: zsKenBurns calc(var(--zs-slide, 5s) + 2s) ease-out both;
}

@keyframes zsKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.zs-lb-slide.is-fading-in {
  animation: zsFade .7s ease both;
}

/* ---------- QR code ---------- */
.zs-qr {
  width: min(100%, 280px);
  margin: 18px auto 10px;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-1);
}

.zs-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.zs-qr-url {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  text-align: center;
  font: 12px var(--font-mono, monospace);
  color: var(--text-3);
}

.zs-share-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.zs-menu .zs-share-qr {
  width: auto;
  align-items: center;
  padding: 8px 6px;
  font-size: 13px;
}

.zs-menu .zs-share-qr svg {
  width: 15px;
  height: 15px;
  margin: 0;
  color: inherit;
}

.zs-share-tools .zs-share-reset {
  width: auto;
}

/* ---------- Keyboard shortcuts ---------- */
.zs-keys-card {
  max-width: 620px;
}

.zs-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin-top: 14px;
}

.zs-keys h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.zs-keys dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 0;
  align-items: center;
}

.zs-keys dt {
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-3);
}

.zs-keys dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
}

.zs-keys-card kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong, var(--border));
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 11.5px var(--font-num);
}

.zs-keys-foot {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

@media (max-width: 560px) {
  .zs-keys {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zs-lb.is-playing .zs-lb-slide.is-current img.zs-lb-full,
  .zs-lb-slide.is-fading-in {
    animation: none;
  }

  .zs-pager-card:hover {
    transform: none;
  }
}