/* Photoshoot — components. Photo Booth toolbar, the red shutter, the segmented
   mode control, macOS-style grouped settings, native-feeling switches, the
   filmstrip tray, neutral panels/modals. Flat and restrained by design: one
   blue accent for selection, the red shutter as the only color pop. No
   gradients-as-decoration, no colored glows, no glassmorphism. */

/* ---------- Generic buttons (used in modals/dialogs) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: var(--border-width) solid var(--btn-border);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), transform 0.12s var(--ease);
}
.btn:hover {
  background: var(--btn-bg-hover);
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.45;
}
.btn-primary {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: transparent;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, #000);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--btn-bg);
}
.btn-danger {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}
.btn-sm {
  padding: 5px 11px;
  font-size: 12px;
}

/* ---------- Icon buttons (titlebar / toolbar) ---------- */
.tb-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tb-icon:hover {
  background: var(--btn-bg);
  color: var(--text);
}
.tb-icon:active {
  background: var(--btn-bg-hover);
}
.tb-icon svg {
  width: 18px;
  height: 18px;
}
.tb-icon.is-on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.tb-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
.tb-count[data-count="0"] {
  display: none;
}

/* ---------- Liquid Glass pill: translucent fill, specular top edge ---------- */
.glass-pill {
  height: var(--pill-h);
  border-radius: var(--pill-radius);
  color: var(--text);
  background: var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-specular),
    0 1px 2px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: background var(--dur) var(--ease), transform 0.11s var(--ease);
}
.glass-pill:hover {
  background: var(--glass-fill-hover);
}
.glass-pill:active {
  background: var(--glass-fill-active);
}

/* ---------- Segmented mode control ---------- */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
}
.mode-switch:active {
  background: var(--glass-fill); /* only the pressed cell reacts */
}
.mode-option {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 7px;
  color: var(--text-dim);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mode-option svg {
  width: 18px;
  height: 18px;
}
.mode-option:hover {
  color: var(--text);
}
.mode-option.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.mode-option:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: 6px;
}
.mode-option:disabled {
  opacity: 0.4;
}

/* ---------- The shutter: a glossy red orb ---------- */
.shutter {
  position: relative;
  width: var(--shutter-size);
  height: var(--shutter-size);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 26%, var(--shutter-top, var(--shutter)) 0%, var(--shutter) 58%, var(--shutter-2) 100%);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px var(--shutter-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22),
    var(--shutter-shadow);
  transition: filter var(--dur) var(--ease), transform 0.11s var(--ease);
}
.shutter:hover {
  filter: brightness(1.06);
}
.shutter:active {
  transform: scale(0.94);
}
.shutter:disabled,
.shutter.greyed {
  background: var(--shutter-disabled, #bcbcbc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
}
.shutter:disabled {
  cursor: default;
}
.shutter.greyed {
  cursor: pointer;
}
.shutter.greyed:hover {
  filter: brightness(0.96);
}
.shutter:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 50%;
}
.shutter svg {
  width: 22px;
  height: 22px;
  color: #fff;
  display: none;
}
.shutter .glyph-photo {
  display: block;
}
.shutter.mode-video .glyph-photo {
  display: none;
}
.shutter.mode-video .glyph-video {
  display: block;
}
.shutter.mode-video.is-recording .glyph-video {
  display: none;
}
.shutter.mode-video.is-recording .glyph-stop {
  display: block;
  width: 20px;
  height: 20px;
}
.shutter.is-recording {
  animation: recPulse 1.4s var(--ease) infinite;
}
@keyframes recPulse {
  50% {
    filter: brightness(0.86);
  }
}
.shutter-hint {
  display: none;
}

/* ---------- Effects button (glass pill, right of the toolbar) ---------- */
.effects-btn {
  min-width: 96px;
  margin-right: 2px; /* 17px from the window edge, as measured */
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Review actions (Share / Delete) replace Effects while a photo is selected */
.review-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
body.is-reviewing .review-actions {
  display: flex;
}
body.is-reviewing .effects-btn {
  display: none;
}
.review-pill {
  display: grid;
  place-items: center;
  width: 46px;
  padding: 0;
}
.review-pill svg {
  width: 18px;
  height: 18px;
}
.effects-btn.is-on {
  color: var(--accent);
}

/* ---------- Photo tray: a 60px band of 3:2 thumbnails, newest on the right ---------- */
.tray {
  grid-area: tray;
  height: var(--tray-h);
  padding: 0 19px 0 0;
  background: var(--tray-band-bg, var(--app-bg-2)); /* opaque band in every theme */
  box-shadow: inset 0 1px 0 var(--tray-border);
  overflow: hidden;
}
.tray-scroll {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.tray-scroll::-webkit-scrollbar {
  display: none;
}
/* Right-aligned while short, scrollable once the band is full. */
.tray-scroll > :first-child {
  margin-left: auto;
}
.tray-empty {
  display: none;
}
.thumb {
  position: relative;
  background: #1c1c1e;
  flex: 0 0 auto;
  width: 90px;
  height: 60px;
  cursor: pointer;
}

/* Captured photo "printing" down from the viewfinder into the tray. */
.print-fly {
  position: fixed;
  z-index: 80;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transform-origin: top left;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--thumb-radius);
  display: block;
}
.thumb.is-sheet img {
  object-fit: contain; /* a tall strip or wide row shows whole, like a print */
}
.thumb:hover img {
  filter: brightness(1.06);
}
.thumb.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.thumb:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.thumb-delete {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #444;
  display: none;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.thumb-delete svg {
  width: 9px;
  height: 9px;
}
.thumb:hover .thumb-delete,
.thumb.is-selected .thumb-delete {
  display: grid;
}
.thumb-delete:hover {
  background: var(--danger);
  color: #fff;
}
.thumb .thumb-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
@keyframes thumbDrop {
  0% {
    transform: translateY(-22px) scale(0.7);
    opacity: 0;
  }
  70% {
    transform: translateY(2px) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.thumb.is-new {
  animation: thumbDrop 0.42s var(--ease-drop);
}

/* ---------- Photo review (shows where the camera preview was) ---------- */
.review {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  display: grid;
  place-items: center;
}
.review img {
  /* Pinned to the box: as a grid item a tall strip sized its row to the image's
     own height and overflowed, showing only part of the print. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Context menu (right-click a photo) ---------- */
.ctx-menu {
  position: fixed;
  z-index: 95;
  min-width: 172px;
  padding: 5px;
  background: var(--menu-bg);
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  box-shadow: var(--shadow);
}
.ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  background: none;
}
.ctx-item:hover {
  background: var(--accent);
  color: #fff;
}
.ctx-item.danger:hover {
  background: var(--danger);
}
.ctx-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--panel-border);
}

/* ---------- Scrim ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 50;
}
.scrim:not(.hidden) {
  opacity: 1;
}

/* ---------- Panels (popover-like) ---------- */
.panel {
  position: fixed;
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  color: var(--text);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
}
.panel-head h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.panel-overlay {
  left: 50%;
  top: 50%;
  width: min(760px, 92vw);
  max-height: 82vh;
  transform: translate(-50%, -48%);
  border-radius: var(--radius-lg);
  opacity: 0;
  overflow: hidden auto;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.panel-overlay:not(.hidden) {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.panel-slideover {
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(430px, 96vw);
  padding-bottom: var(--safe-bottom);
  background: var(--app-bg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.panel-slideover .panel-head {
  background: var(--app-bg-2);
  border-bottom: 1px solid var(--panel-border);
}
.panel-slideover:not(.hidden) {
  transform: translateX(0);
}
.panel-note {
  padding: 0 18px 10px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  font-size: 13px;
  transition: background var(--dur) var(--ease);
}
.icon-btn:hover {
  background: var(--btn-bg-hover);
}
.icon-btn-sm {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-dim);
}
.icon-btn-sm:hover {
  background: var(--btn-bg-hover);
  color: var(--text);
}

/* ---------- Effects view (full-bleed 3x3 grid that replaces the viewfinder) ---------- */
.effects-view {
  position: fixed;
  top: calc(var(--titlebar-h) + var(--safe-top));
  bottom: calc(var(--toolbar-h) + var(--safe-bottom));
  left: 0;
  right: 0;
  z-index: 30;
  background: #000;
  overflow: hidden;
  /* Shown at once; the grid's zoom (effectsMenu.ts) carries the transition. */
  visibility: hidden;
  pointer-events: none;
}
.effects-view.is-open {
  visibility: visible;
  pointer-events: auto;
}
.slot-picker-title {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  padding: 6px 14px;
  color: #fff;
  background: rgba(28, 28, 30, 0.66);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
.effects-view.is-slot-picker.is-open .slot-picker-title {
  display: block;
}
/* The grid states its own visibility instead of inheriting it. Its zoom starts
   in the same frame the panel opens, and Chromium can restyle an animating
   element from its cached pre-animation style — the grid then stayed hidden
   inside an open (black) panel, which looked like the camera going black. */
.effects-view .effects-grid {
  visibility: hidden;
}
.effects-view.is-open .effects-grid {
  visibility: visible;
}
.effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  background: #000;
}
.effect-tile {
  position: relative;
  overflow: hidden;
  background: #000;
  border: none;
  border-radius: 0;
  transition: box-shadow var(--dur) var(--ease);
}
.effect-tile.tile-empty {
  pointer-events: none;
}
.effect-tile canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.effect-tile .effect-name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.effect-tile:hover .effect-name {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.effect-tile.is-active {
  outline: 3px solid var(--accent); /* outlines paint above the tile's canvas */
  outline-offset: -3px;
}
.effect-tile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Page dots in the bar while browsing effects */
.page-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--text-dim);
}
.page-arrow:hover {
  background: var(--btn-bg);
  color: var(--text);
}
.page-arrow:disabled {
  opacity: 0.3;
}
.page-arrow svg {
  width: 13px;
  height: 13px;
}
.page-dots {
  overflow: hidden;
  height: 12px;
  display: flex;
  align-items: center;
}
.page-dots.more-before.more-after {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.page-dots.more-before:not(.more-after) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px);
  mask-image: linear-gradient(to right, transparent, #000 14px);
}
.page-dots.more-after:not(.more-before) {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 14px);
  mask-image: linear-gradient(to left, transparent, #000 14px);
}
.page-dots-track {
  display: flex;
  align-items: center;
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.page-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background var(--dur) var(--ease), transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.page-dot.is-edge {
  transform: scale(0.6);
  opacity: 0.7;
}
.page-dot.is-out {
  transform: scale(0.35);
  opacity: 0;
}
.page-dot.active {
  background: var(--accent);
  transform: scale(1.1);
}

/* ---------- Settings (macOS inset grouped lists) ---------- */
.settings-body {
  overflow-y: auto;
  padding: 18px 20px 28px;
  flex: 1;
  background: var(--app-bg);
}
.settings-group {
  margin-bottom: 22px;
}
.settings-group-title {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0 0 7px 4px;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-card > .setting-row + .setting-row {
  border-top: 1px solid var(--panel-border);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  min-height: 44px;
}
.setting-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}
.setting-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  max-width: 240px;
  line-height: 1.4;
}
.setting-control {
  flex: 0 0 auto;
}
.settings-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.shortcut-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0 0 4px;
  font-size: 13px;
}
.shortcut-list dt {
  color: var(--text);
}
.shortcut-list dd {
  margin: 0;
  text-align: right;
}
.shortcut-list kbd {
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  padding: 1px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--panel-border);
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.settings-folder {
  font-size: 11.5px;
  color: var(--text-dim);
  word-break: break-all;
  background: var(--surface-2);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  font-family: ui-monospace, "SF Mono", "Consolas", monospace;
}

/* Form controls */
select {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 8px center / 11px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 5px 26px 5px 10px;
  -webkit-appearance: none;
  appearance: none;
  min-width: 124px;
}
select:hover {
  background-color: var(--surface-3);
}
input[type="number"] {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 5px 8px;
}
input[type="range"] {
  width: 150px;
  height: 4px;
  accent-color: var(--accent);
}

/* macOS-style switch (32x20) */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
  flex: 0 0 auto;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.switch .track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.11);
  transition: background var(--dur) var(--ease);
}
.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .track {
  background: var(--accent);
}
.switch input:checked + .track + .knob {
  transform: translateX(12px);
}
.switch input:focus-visible + .track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Theme cards */
.theme-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.theme-card {
  text-align: left;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 2px solid var(--panel-border);
  transition: border-color var(--dur) var(--ease);
}
.theme-card:hover {
  border-color: var(--text-faint);
}
.theme-card.is-active {
  border-color: var(--accent);
}
.theme-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.theme-swatch {
  width: 100%;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-card-name {
  font-size: 13px;
  font-weight: 600;
}
.theme-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}
.theme-card-remove {
  margin-top: 7px;
  font-size: 11px;
  color: var(--danger);
}

/* ---------- Custom filter chips ---------- */
.filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.filter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.filter-chip-name {
  font-size: 13px;
  font-weight: 600;
}
.filter-chip-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}
.filter-chip-remove {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-chip-remove:hover {
  background: var(--danger);
  color: var(--accent-contrast, #fff);
}

/* ---------- Viewfinder overlays ---------- */
.vf-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.vf-message {
  background: var(--viewfinder-inner);
  pointer-events: auto;
}
.vf-message-card {
  text-align: center;
  max-width: 380px;
  padding: 24px;
  color: #fff;
}
.vf-message-icon {
  display: grid;
  place-items: center;
  height: 44px;
  margin-bottom: 12px;
  opacity: 0.85;
}
.vf-message-card p:empty {
  display: none;
}
.vf-message-card h2 {
  font-size: 19px;
  margin-bottom: 8px;
  color: #fff;
}
.vf-message-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.vf-bg-guide {
  background: rgba(0, 0, 0, 0.32);
}
.vf-bg-guide-inner {
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.countdown {
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.25), transparent 65%);
}
.countdown-number {
  font-family: var(--font-display);
  font-size: clamp(120px, 26vh, 260px);
  font-weight: 700;
  color: var(--countdown-color);
  text-shadow: 0 8px 40px var(--countdown-glow);
  line-height: 1;
}
.countdown-number.tick {
  animation: countTick 1s var(--ease) forwards;
}
@keyframes countTick {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  20% {
    transform: scale(1.08);
    opacity: 1;
  }
  72% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}
.countdown-number.smile {
  font-size: clamp(46px, 11vh, 104px);
  font-weight: 600;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: var(--flash-color);
  opacity: 0;
}
.flash.fire {
  animation: flashFire 0.32s ease-out;
}
@keyframes flashFire {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- Four-photo plan (HUD over the viewfinder, so always dark) ---------- */
.strip-plan {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  height: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  max-width: calc(100% - 24px);
  color: #fff;
  background: rgba(28, 28, 30, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 10px rgba(0, 0, 0, 0.28);
}
.strip-plan:hover,
.strip-plan:active {
  background: rgba(28, 28, 30, 0.66);
}
.plan-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 10px 0 4px;
  border-radius: 7px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-slot:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.plan-slot:active:not(:disabled),
.plan-tool:active:not(:disabled) {
  transform: scale(0.93);
}
.plan-slot,
.plan-tool {
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 0.12s var(--ease);
}
.strip-plan:not(.hidden) {
  animation: planIn 0.32s var(--ease-drop);
}
@keyframes planIn {
  from {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.96);
  }
}
.plan-slot.is-current {
  animation: slotPulse 1s ease-in-out infinite;
}
@keyframes slotPulse {
  50% {
    box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 3px rgba(255, 255, 255, 0.28);
  }
}
.plan-slot.is-landed img {
  animation: slotPop 0.44s var(--ease-drop);
}
.plan-slot.is-landed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: slotFlash 0.4s ease-out forwards;
  pointer-events: none;
}
@keyframes slotPop {
  from {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes slotFlash {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
.plan-slot.is-shuffled {
  animation: slotFlip 0.38s var(--ease-drop) backwards;
}
@keyframes slotFlip {
  from {
    transform: rotateX(90deg) scale(0.9);
    opacity: 0.2;
  }
}
.plan-slot:disabled {
  cursor: default;
}
.plan-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}
body.is-reviewing .strip-plan {
  display: none;
}
/* Linked: all four follow the live effect, so the names read quieter. */
.strip-plan:not(.is-mixed) .plan-name {
  color: rgba(255, 255, 255, 0.62);
}
.strip-plan.is-mixed .plan-num {
  background: var(--accent);
  color: #fff;
}
.plan-slot.is-current {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.plan-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-slot.is-done .plan-num {
  position: relative;
  background: rgba(0, 0, 0, 0.55);
}
.plan-slot.is-done .plan-name {
  visibility: hidden;
}
.plan-sep {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.2);
}
.plan-tool {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.85);
}
.plan-tool svg {
  width: 17px;
  height: 17px;
}
.plan-tool:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.plan-tool.is-on {
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 70%, #fff);
}
.plan-tool:disabled {
  opacity: 0.4;
  cursor: default;
}
.strip-plan.is-shooting .plan-tool,
.strip-plan.is-shooting .plan-sep {
  display: none;
}
@media (max-width: 600px) {
  .plan-name {
    display: none;
  }
  .plan-slot {
    padding: 0 4px;
    width: 34px;
    justify-content: center;
  }
}

/* ---------- Effect hint ("Open your mouth") ---------- */
.effect-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 18px;
  color: #fff;
  background: rgba(28, 28, 30, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.effect-hint[hidden] {
  display: none;
}
.effect-hint.is-showing {
  animation: hintPop 2.8s var(--ease) forwards;
}
@keyframes hintPop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  16% { transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px) scale(0.98); }
}

/* ---------- Layout sheet (after four photos) ---------- */
.strip-sheet {
  position: fixed;
  top: calc(var(--titlebar-h) + var(--safe-top));
  bottom: calc(var(--toolbar-h) + var(--safe-bottom));
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  place-items: start center;
  padding: 0 16px 16px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.strip-sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur) var(--ease);
}
/* A Mac sheet drops from the top edge of the window. The action buttons always
   stay on screen; only the controls scroll when the window is short. */
.sheet-card {
  --sheet-avail: calc(100dvh - var(--titlebar-h) - var(--toolbar-h) - var(--safe-top) - var(--safe-bottom) - 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 20px;
  width: min(780px, 100%);
  max-height: var(--sheet-avail);
  padding: 18px;
  border-radius: 0 0 12px 12px;
  color: var(--text);
  background: var(--menu-bg);
  box-shadow: 0 0 0 1px var(--panel-border), 0 18px 50px rgba(0, 0, 0, 0.45);
  transform: translateY(-100%);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.06);
}
.strip-sheet.is-open .sheet-card {
  transform: translateY(0);
}
.sheet-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  height: min(56vh, 520px, calc(var(--sheet-avail) - 36px));
  padding: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.14);
}
.sheet-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 22px rgba(0, 0, 0, 0.28);
}
.sheet-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  max-height: calc(var(--sheet-avail) - 36px);
}
.sheet-controls.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.sheet-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: -3px; /* room for focus rings inside the scroller */
  padding: 3px;
}
.sheet-side h2 {
  font-size: 15px;
  font-weight: 600;
}
.sheet-layouts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.sheet-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  border-radius: 8px;
  color: var(--text-dim);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  font-size: 12px;
  font-weight: 500;
}
.sheet-layout svg {
  width: 26px;
  height: 26px;
}
.sheet-layout,
.sheet-swatch {
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 0.12s var(--ease);
}
.sheet-layout:active,
.sheet-swatch:active {
  transform: scale(0.94);
}
.sheet-layout.is-active svg {
  animation: layoutPop 0.3s var(--ease-drop);
}
@keyframes layoutPop {
  40% {
    transform: scale(1.18);
  }
}
.sheet-swatch.is-active {
  animation: swatchPop 0.3s var(--ease-drop);
}
@keyframes swatchPop {
  40% {
    transform: scale(1.2);
  }
}
.sheet-layout:hover {
  background: var(--btn-bg-hover);
  color: var(--text);
}
.sheet-layout.is-active {
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sheet-label {
  font-size: 13px;
  color: var(--text-dim);
}
.sheet-frames {
  display: flex;
  gap: 9px;
}
.sheet-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45);
}
.sheet-swatch.is-active {
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45), 0 0 0 2px var(--menu-bg), 0 0 0 4px var(--accent);
}
.sheet-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.18);
}
.sheet-tab {
  height: 26px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sheet-tab[aria-selected='true'] {
  color: var(--text);
  background: var(--btn-bg-hover);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 0.5px var(--btn-border);
}
.sheet-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet-pane[hidden] {
  display: none;
}
.sheet-pane:not([hidden]) {
  animation: paneIn 0.22s var(--ease);
}
@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.sheet-fonts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.sheet-font {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0 5px;
  border-radius: 7px;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  transition: box-shadow var(--dur) var(--ease), transform 0.12s var(--ease);
}
.sheet-font-sample {
  font-size: 19px;
  line-height: 1.2;
  color: var(--text);
}
.sheet-font:active {
  transform: scale(0.94);
}
.sheet-font.is-active {
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.sheet-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.18);
}
.sheet-seg-btn {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 24px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.sheet-seg-btn svg {
  width: 15px;
  height: 15px;
}
.sheet-seg-btn.is-active {
  color: var(--text);
  background: var(--btn-bg-hover);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.sheet-swatch.is-auto {
  display: grid;
  place-items: center;
  background: var(--paper, #fff);
  color: var(--swatch);
  font: 600 12px/1 'New York', Georgia, serif;
}
.sheet-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sheet-chip {
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.12s var(--ease);
}
.sheet-chip:hover {
  color: var(--text);
}
.sheet-chip:active {
  transform: scale(0.95);
}
.sheet-chip[aria-pressed='true'] {
  color: var(--accent-contrast, #fff);
  background: var(--accent);
  box-shadow: none;
}
.sheet-caption {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.sheet-caption::placeholder {
  color: var(--text-dim);
}
.sheet-caption:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sheet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.sheet-spacer {
  flex: 1;
}
/* Narrow windows and phones: preview on top, controls below, buttons pinned. */
@media (max-width: 640px) {
  .strip-sheet {
    padding: 0 8px 8px;
  }
  .sheet-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 1fr) auto;
    gap: 12px;
    height: var(--sheet-avail);
    padding: 12px;
  }
  .sheet-preview {
    height: auto;
  }
  .sheet-side {
    max-height: min(62vh, calc(var(--sheet-avail) - 180px));
  }
  .sheet-layouts {
    grid-template-columns: repeat(4, 1fr);
  }
  .sheet-layout {
    padding: 8px 2px 6px;
  }
  .sheet-fonts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* Short, wide windows (a phone on its side): keep the side-by-side sheet compact. */
@media (max-height: 520px) and (min-width: 641px) {
  .sheet-card {
    padding: 12px;
    gap: 14px;
  }
  .sheet-layout {
    flex-direction: row;
    justify-content: center;
    padding: 7px 6px;
  }
  .sheet-layout svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- First-run tips (Mac popover) ---------- */
.tip-popover {
  position: fixed;
  z-index: 85;
  width: 264px;
  padding: 13px 14px 11px;
  border-radius: 10px;
  color: var(--text);
  background: var(--menu-bg);
  box-shadow: 0 0 0 1px var(--panel-border), 0 10px 32px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.45;
  animation: tipIn 0.24s var(--ease-drop);
  transform-origin: 50% 100%;
}
.tip-popover[data-side='bottom'] {
  transform-origin: 50% 0;
}
.tip-popover[hidden] {
  display: none;
}
@keyframes tipIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
.tip-popover h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}
.tip-popover p {
  color: var(--text-dim);
}
.tip-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--menu-bg);
  transform: rotate(45deg);
  box-shadow: 1px 1px 0 var(--panel-border);
}
.tip-popover[data-side='top'] .tip-arrow {
  bottom: -7px;
}
.tip-popover[data-side='bottom'] .tip-arrow {
  top: -7px;
  box-shadow: -1px -1px 0 var(--panel-border);
}
/* Small illustrations inside the four-photo tutorial */
.tip-art {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.tip-cd,
.tip-slot,
.tip-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 5px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.14);
  font-size: 10px;
  color: var(--text-dim);
  animation: tipArtIn 0.32s var(--ease-drop) backwards;
}
.tip-art > :nth-child(2) { animation-delay: 60ms; }
.tip-art > :nth-child(3) { animation-delay: 120ms; }
.tip-art > :nth-child(4) { animation-delay: 180ms; }
@keyframes tipArtIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.92);
  }
}
.tip-cd b {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tip-slot b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(127, 127, 127, 0.3);
  color: var(--text);
  font-size: 10px;
}
.tip-slot.is-picked b {
  background: var(--accent);
  color: #fff;
}
.tip-slot.is-picked {
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.tip-layout svg {
  width: 20px;
  height: 20px;
  color: var(--text);
}
.tip-popover[data-tour='strip'] {
  width: 292px;
}
.tip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.tip-step {
  flex: 1;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tip-skip {
  font-size: 12px;
  color: var(--text-dim);
  padding: 3px 6px;
  border-radius: 5px;
}
.tip-skip:hover {
  color: var(--text);
}
.tip-next {
  padding: 3px 12px;
  font-size: 12px;
}

/* ---------- Mac progress spinner (twelve fading spokes) ---------- */
.mac-spinner {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}
.mac-spinner i {
  position: absolute;
  left: 14.5px;
  top: 2px;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 1.5px 14px;
  animation: spoke 1s linear infinite;
}
@keyframes spoke {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.15;
  }
}
.mac-spinner i:nth-child(1) { transform: rotate(0deg); animation-delay: -0.917s; }
.mac-spinner i:nth-child(2) { transform: rotate(30deg); animation-delay: -0.833s; }
.mac-spinner i:nth-child(3) { transform: rotate(60deg); animation-delay: -0.750s; }
.mac-spinner i:nth-child(4) { transform: rotate(90deg); animation-delay: -0.667s; }
.mac-spinner i:nth-child(5) { transform: rotate(120deg); animation-delay: -0.583s; }
.mac-spinner i:nth-child(6) { transform: rotate(150deg); animation-delay: -0.500s; }
.mac-spinner i:nth-child(7) { transform: rotate(180deg); animation-delay: -0.417s; }
.mac-spinner i:nth-child(8) { transform: rotate(210deg); animation-delay: -0.333s; }
.mac-spinner i:nth-child(9) { transform: rotate(240deg); animation-delay: -0.250s; }
.mac-spinner i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.167s; }
.mac-spinner i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.083s; }
.mac-spinner i:nth-child(12) { transform: rotate(330deg); animation-delay: 0.000s; }
@media (prefers-reduced-motion: reduce) {
  .mac-spinner i {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------- Icon sizing ---------- */
.vf-message-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}
.toast .toast-ico svg {
  display: block;
  width: 15px;
  height: 15px;
}
.icon-btn-sm svg,
.filter-chip-remove svg {
  width: 14px;
  height: 14px;
}
.thumb-play {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
.thumb-play svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  stroke: none;
  margin-left: 1px;
}
.review video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.rec-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--shutter);
  animation: recBlink 1s steps(1) infinite;
}
@keyframes recBlink {
  50% {
    opacity: 0.25;
  }
}

.perf-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #d7ffe6;
  font-family: ui-monospace, "SF Mono", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
  white-space: pre;
}
.perf-overlay .warn {
  color: #ffd166;
}

/* ---------- Preview modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal:not(.hidden) {
  opacity: 1;
}
.modal-card {
  position: relative;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow);
  padding: 16px;
  max-width: min(880px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: scale(0.97);
  transition: transform var(--dur-slow) var(--ease);
}
.modal:not(.hidden) .modal-card {
  transform: scale(1);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.modal-image-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.modal-image-wrap img,
.modal-image-wrap video {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--shadow-soft);
  max-width: 380px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast .toast-ico {
  font-size: 14px;
}
.toast.toast-error .toast-ico {
  color: #ff6b61;
}
.toast.toast-success .toast-ico {
  color: #5ee08f;
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .effect-tile .effect-name {
    font-size: 13px;
    padding: 0 4px;
    text-align: center;
  }
}

/* Virtual camera setup follows the existing settings cards and typography. */
.virtual-camera-block { display: grid; gap: 14px; }
.virtual-camera-block .setting-desc { max-width: none; margin: 0; }
.virtual-camera-block a { color: var(--accent); text-underline-offset: 3px; }
.virtual-camera-guide summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.virtual-camera-steps { padding-left: 22px; font-size: 12px; line-height: 1.65; color: var(--text-dim); }
.virtual-camera-steps li + li { margin-top: 10px; }
.virtual-camera-guide p + p { margin-top: 10px !important; }
.virtual-camera-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.virtual-camera-fields label { display: grid; gap: 6px; flex: 1; min-width: 160px; font-size: 12px; }
.virtual-camera-fields input { min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); padding: 9px; font: inherit; }
.virtual-camera-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.virtual-camera-status[data-state="live"] { color: var(--accent); }
.virtual-camera-status[data-state="error"] { color: var(--danger); }
.virtual-camera-badge { border: 0; border-radius: 999px; padding: 6px 9px; background: var(--surface); color: var(--text); font-size: 10px; cursor: pointer; -webkit-app-region: no-drag; }

/* ---------- Update notice (top centre, under the titlebar) ---------- */
.update-notice {
  position: fixed;
  top: calc(var(--titlebar-h) + var(--safe-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25; /* above the viewfinder, below the effects browser (30) and panels (60) */
  background: rgba(30, 30, 32, 0.82); /* readable over any camera image */
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  min-height: var(--pill-h);
  padding: 6px 8px 6px 14px;
  font-size: 13px;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.update-notice[hidden] {
  display: none;
}
.update-get {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: inherit;
}
.update-get[hidden] {
  display: none;
}
.update-notice:not([hidden]) {
  animation: noticeIn 0.34s var(--ease-drop);
}
@keyframes noticeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.96);
  }
}

/* ---------- What's New (a Mac-style centred sheet) ---------- */
.whats-new {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur) var(--ease);
}
.whats-new[hidden] {
  display: none;
}
.whats-new.is-open {
  background: rgba(0, 0, 0, 0.45);
}
.wn-card {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: min(620px, calc(100dvh - 32px));
  padding: 22px 22px 16px;
  border-radius: 14px;
  color: var(--text);
  background: var(--menu-bg);
  box-shadow: 0 0 0 1px var(--panel-border), 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.22s var(--ease), transform 0.32s var(--ease-drop);
}
.whats-new.is-open .wn-card {
  opacity: 1;
  transform: scale(1);
}
.wn-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}
.wn-glyph {
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  background: radial-gradient(circle at 50% 26%, var(--shutter-top, var(--shutter)) 0%, var(--shutter) 58%, var(--shutter-2) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.wn-head h2 {
  font-size: 17px;
  font-weight: 700;
}
.wn-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wn-release + .wn-release {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}
.wn-release h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wn-date {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-dim);
}
.wn-release ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.wn-release li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.wn-release li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.wn-release li strong {
  color: var(--text);
  font-weight: 600;
}
.wn-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.update-later {
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text-dim);
}
.update-later:hover {
  color: var(--text);
  background: var(--glass-fill-hover);
}