/* effects browser — self-contained styles (does not touch css/style.css) */

/* ── Welcome splash ── */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(40,70,140,0.55), rgba(15,21,32,0.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.splash-overlay[hidden] { display: none; }
.splash-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  text-align: center;
  padding: 40px 32px 32px;
  background: #f6f8fc;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(10,20,50,0.5);
  animation: splash-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes splash-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.splash-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(120deg, #5b8def, #8a5bef);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 16px;
}
.splash-logo {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1f2c4a;
}
.splash-welcome {
  margin: 0 0 10px;
  font-size: 15px;
  color: #2a3a5e;
}
.splash-sub {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.55;
  color: #6a799e;
}
.splash-btn {
  border: none;
  border-radius: 12px;
  padding: 13px 30px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(120deg, #5b8def, #8a5bef);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 8px 22px rgba(80,110,230,0.4);
}
.splash-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(80,110,230,0.5); }
.splash-btn:active { transform: translateY(0); }

.fxb-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 3px rgba(40, 60, 120, 0.15);
  color: #3a4a6b;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.fxb-trigger:hover { background: rgba(255, 255, 255, 0.9); }
.fxb-trigger:active { transform: scale(0.94); }

.fxb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 30, 55, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fxb-overlay[hidden] { display: none; }
body.fxb-open { overflow: hidden; }

.fxb-modal {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(760px, 92vh);
  background: #f4f6fb;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(20, 35, 80, 0.35);
  overflow: hidden;
}

.fxb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(120, 140, 200, 0.18);
}
.fxb-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #2a3a5e;
}
.fxb-search {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(120, 140, 200, 0.3);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  color: #2a3a5e;
  outline: none;
}
.fxb-search:focus { border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18); }
.fxb-close {
  flex: none;
  width: 34px; height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(120, 140, 200, 0.12);
  color: #3a4a6b;
  font-size: 15px;
  cursor: pointer;
}
.fxb-close:hover { background: rgba(120, 140, 200, 0.22); }

.fxb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 18px;
}
.fxb-tab {
  border: 1px solid rgba(120, 140, 200, 0.28);
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #57689a;
  cursor: pointer;
  transition: all 0.12s ease;
}
.fxb-tab:hover { background: rgba(120, 140, 200, 0.1); }
.fxb-tab.active { background: #2a3a5e; border-color: #2a3a5e; color: #fff; }

.fxb-empty {
  margin: 0;
  padding: 40px 18px;
  text-align: center;
  color: #8794b5;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fxb-empty[hidden] { display: none; }
.fxb-empty-txt { max-width: 320px; line-height: 1.5; }
.fxb-empty-btn {
  border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, #5b8def, #8a5bef); box-shadow: 0 4px 14px rgba(90,110,235,0.35);
}
.fxb-empty-btn:hover { filter: brightness(1.06); }

.fxb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  padding: 6px 18px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* take remaining height in the flex-column modal so the grid scrolls
     internally instead of compressing its rows (was clipping cards on mobile) */
  flex: 1 1 auto;
  min-height: 0;
}

.fxb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(120, 140, 200, 0.2);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
/* the card is a wrapper now; this button is the clickable body */
.fxb-card-pick {
  display: flex; flex-direction: column; width: 100%; padding: 0;
  border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
/* favourite star */
.fxb-fav {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; line-height: 1;
  border: none; font-size: 15px; color: #fff;
  background: rgba(12, 18, 32, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.12s ease;
}
.fxb-fav:hover { background: rgba(12, 18, 32, 0.72); transform: scale(1.08); }
.fxb-fav.on { color: #ffb02e; }
.fxb-tab-fav.active { background: linear-gradient(120deg, #ffb02e, #f59300); border-color: #f59300; color: #201603; }
.fxb-tab-fav:not(.active) { color: #b7860b; border-color: rgba(245, 165, 20, 0.45); }
html[data-theme="dark"] .fxb-tab-fav:not(.active), html[data-theme="black"] .fxb-tab-fav:not(.active) { color: #ffc861; border-color: rgba(255, 180, 60, 0.5); }
.fxb-card[hidden] { display: none; }
.fxb-card:hover {
  transform: translateY(-2px);
  border-color: #5b8def;
  box-shadow: 0 8px 22px rgba(60, 100, 200, 0.2);
}
.fxb-card:active { transform: translateY(0); }

.fxb-card-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 220;
  background: #0e1520;
}

.fxb-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
}
.fxb-card-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a3a5e;
  text-transform: uppercase;
}
.fxb-card-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8794b5;
  background: rgba(120, 140, 200, 0.12);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── Mobile: full-screen sheet ── */
@media (max-width: 640px) {
  .fxb-overlay { padding: 0; }
  .fxb-modal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .fxb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Filmstrip (Lightroom-style image switcher) ── */
.filmstrip {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  gap: 8px;
  max-width: min(680px, calc(100vw - 24px));
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(14, 21, 32, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(20, 30, 60, 0.3);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.filmstrip[hidden] { display: none; }
.filmstrip::-webkit-scrollbar { height: 5px; }
.filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

.filmstrip-item {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #0e1520;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.filmstrip-item:hover { transform: translateY(-2px); }
.filmstrip-item.active {
  border-color: #5b8def;
  box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.5);
}
.filmstrip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.filmstrip-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.12s ease;
  cursor: pointer;
}
.filmstrip-item:hover .filmstrip-remove { opacity: 1; }
@media (pointer: coarse) {
  .filmstrip-remove { opacity: 1; }
}

/* ── Stack view: stack the active tools' panels with clear bold headers ── */
body.stack-view #panel-stack { padding-bottom: 6px; }
body.stack-view .ctrl-panel:not(#panel-stack) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 140, 200, 0.22);
}
body.stack-view .ctrl-panel .panel-title,
body.stack-view .ctrl-panel .panel-title-row .panel-title {
  font-weight: 800;
}

/* ── Mobile knob-rail dropdown (e.g. film stock) ── */
.rail-select-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 6px;
}
.rail-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(120, 140, 200, 0.4);
  border-radius: 8px;
  padding: 6px 6px;
  font: inherit;
  font-size: 10px;
  text-align: center;
  color: #2a3a5e;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Feedback button (header) ── */
.btn-feedback-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(120deg, #5b8def, #8a5bef);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(80, 110, 230, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-feedback-header:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(80, 110, 230, 0.45); }
.btn-feedback-header:active { transform: translateY(0); }
@media (max-width: 640px) {
  .btn-feedback-header { padding: 0; width: 38px; justify-content: center; }
  .btn-feedback-label { display: none; }
}

/* ── Splash actions (feedback + start) ── */
.splash-actions { display: flex; flex-direction: column-reverse; gap: 12px; align-items: center; }
.splash-feedback {
  font-size: 13px;
  font-weight: 700;
  color: #5b8def;
  text-decoration: none;
}
.splash-feedback:hover { text-decoration: underline; }

/* ── Webcam capture ── */
.cam-overlay {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cam-overlay[hidden] { display: none; }
.cam-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; max-width: min(720px, 100%);
}
.cam-video {
  width: 100%; max-height: 68vh;
  border-radius: 16px; background: #000; object-fit: contain;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.cam-video.mirror { transform: scaleX(-1); }
.cam-error { margin: 0; color: #ff9aa2; font-size: 13px; text-align: center; max-width: 320px; }
.cam-actions { display: flex; align-items: center; gap: 26px; }
.cam-shoot {
  width: 70px; height: 70px; border-radius: 50%;
  border: 4px solid #fff; background: #fff; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  transition: transform 0.1s ease;
}
.cam-shoot:active { transform: scale(0.92); }
.cam-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; height: 40px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cam-btn:hover { background: rgba(255, 255, 255, 0.18); }
.cam-flip { min-width: 44px; padding: 0; }
.cam-live {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: rgba(255, 255, 255, 0.45);
}
.cam-live::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.cam-live:hover { filter: brightness(1.08); background: linear-gradient(135deg, #6366f1, #8b5cf6); }
@media (max-width: 480px) {
  .cam-actions { gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* ── Header fit on phones — keep LOAD MEDIA visible, no overflow ── */
@media (max-width: 600px) {
  /* free the most space: drop the wordmark on phones */
  .header .logo { display: none; }
  .header-actions { gap: 5px; flex: 0 0 auto; }
  /* compact every header action button to a uniform small square */
  .header-actions .fxb-trigger,
  .header-actions .btn-kofi-header,
  .header-actions .btn-feedback-header,
  .header-actions .drawer-toggle-right,
  #camera-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    flex: 0 0 auto;
  }
  .btn-feedback-header .btn-feedback-label { display: none; }
  /* load-media stays clearly tappable, never shrinks away */
  .header-actions .btn-ghost {
    height: 34px;
    min-width: 40px;
    padding: 0 12px;
    flex: 0 0 auto;
  }
  .btn-load-short { font-size: 18px; }
}
@media (max-width: 380px) {
  .header { padding-left: 8px; padding-right: 8px; }
  .header-actions { gap: 4px; }
  .header-actions .fxb-trigger,
  .header-actions .btn-kofi-header,
  .header-actions .btn-feedback-header,
  #camera-btn { width: 32px; height: 32px; min-width: 32px; }
}

/* ── Effects-browser button label (desktop) ── */
#fx-browser-btn { width: auto; gap: 7px; padding: 0 14px; }
#fx-browser-btn .fxb-trigger-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3a4a6b;
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* header rule already forces a 34px square; just drop the label */
  #fx-browser-btn { gap: 0; }
  #fx-browser-btn .fxb-trigger-label { display: none; }
}

/* ── Layers as a library: hide effects until added, remove (✕) button ── */
.layer.layer-unadded { display: none !important; }
.layer-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #aeb6cb;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.layer-remove:hover { background: rgba(220, 60, 60, 0.12); color: #e04444; }
.layer-remove:active { transform: scale(0.9); }

/* ── SAVE PRESET button — polished indigo pill (overrides style.css) ────────── */
.btn-preset {
  width: 100%;
  text-align: center;
  border-radius: var(--r-pill);
  padding: 13px 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #eef3ff;
  text-shadow: 0 1px 2px rgba(10, 16, 44, 0.55);
  background:
    linear-gradient(180deg, #5566d8 0%, #3f49a8 46%, #2c327d 54%, #232a63 100%);
  border: 1px solid rgba(150, 178, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 5px rgba(10, 16, 44, 0.55),
    0 6px 18px rgba(70, 90, 200, 0.38);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-preset:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  border-color: rgba(180, 200, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -2px 5px rgba(10, 16, 44, 0.50),
    0 10px 28px rgba(80, 105, 225, 0.52);
}
.btn-preset:active:not(:disabled) { transform: scale(0.98) translateY(0); }

/* ── Instagram follow button (header) ──────────────────────────────────────── */
.btn-insta-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d64a7f;          /* Instagram pink — stands out from the neutral icons */
  opacity: 0.9;
}
.btn-insta-header:hover {
  color: #fff;
  opacity: 1;
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
}

/* ── Instagram CTAs (splash + toasts) ──────────────────────────────────────── */
.splash-support { margin-top: 18px; text-align: center; }
.splash-support-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6a799e;
}
.splash-support-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* the toast buttons align to flex-start; on the splash, center them, give
   them a uniform width, and centre their label */
.splash-support-btns .kofi-btn {
  align-self: center;
  width: 240px;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}

/* IG-gradient variant of the toast button */
.insta-follow-btn {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%) !important;
  box-shadow: 0 3px 12px rgba(214, 74, 127, 0.42), inset 0 1px 0 rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(150, 40, 120, 0.25) !important;
}

/* Secondary "or follow" link under the tip button */
.kofi-follow {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: #b0407a;
  text-decoration: none;
  transition: color 0.15s ease;
}
.kofi-follow b { font-weight: 800; }
.kofi-follow:hover { color: #6228d7; }

/* Support-development caption under the follow button in the tip toast */
.kofi-follow-note {
  font-size: 11.5px;
  font-weight: 600;
  color: #8a6a86;
  margin-top: -2px;
}

/* Post-export toast: uniform full-width stacked buttons with centered labels */
.insta-toast .kofi-btn {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ── Header Browse-Effects + camera: glossy raised pill (insta-button shape,
      neutral colour), centered label ──────────────────────────────────────── */
#fx-browser-btn,
#camera-btn {
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f7 100%);
  border: 1px solid rgba(150, 162, 190, 0.45);
  color: #2b3a5e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(120, 132, 165, 0.18),
    0 4px 12px rgba(70, 90, 150, 0.20);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
#fx-browser-btn { justify-content: center; text-align: center; }
#fx-browser-btn:hover,
#camera-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(120, 132, 165, 0.16),
    0 7px 18px rgba(70, 90, 150, 0.30);
}
#fx-browser-btn:active,
#camera-btn:active { transform: scale(0.97); }
#fx-browser-btn .fxb-trigger-label { color: #2b3a5e; }

/* ── Ko-fi tip panel (embedded in our modal, in-page) ──────────────────────── */
.kofi-modal-body { padding: 12px 12px 14px; }
.kofi-frame {
  width: 100%;
  height: min(560px, 62vh);
  border: none;
  border-radius: 14px;
  background: #f9f9f9;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Small explainer text at the top of an effect panel */
.panel-hint {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8794b5;
}

/* ── Knob rail: swipe right to hide, tap the sliver to bring it back ───────── */
.knob-rail { transition: transform 0.28s cubic-bezier(0.3, 0.9, 0.3, 1); }
.knob-rail.rail-collapsed { transform: translateX(calc(100% - 22px)); }
/* collapsed: only the rail itself takes the tap (no accidental knob hits) */
.knob-rail.rail-collapsed > * { pointer-events: none; }

/* ── Export chooser modal (video sources) ──────────────────────────────────── */
.export-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 28, 0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.export-modal[hidden] { display: none; }
.export-modal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, calc(100vw - 40px));
  padding: 22px 22px 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(240,244,252,0.92) 100%);
  box-shadow: 0 16px 64px rgba(10,15,40,0.45), inset 0 1px 0 rgba(255,255,255,0.9);
}
.export-modal-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #2a3a5e;
  text-align: center;
}
.export-opt {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.export-opt-video {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 3px 12px rgba(99,102,241,0.40), inset 0 1px 0 rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(80,80,200,0.25) !important;
}
.export-dur-group { display: flex; flex-direction: column; gap: 7px; }
.export-dur-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8794b5;
  text-align: center;
}
.export-dur-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.export-dur {
  border: 1px solid rgba(120, 140, 200, 0.32);
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #57689a;
  cursor: pointer;
  transition: all 0.12s ease;
}
.export-dur[hidden] { display: none; }
.export-dur.active {
  background: #2a3a5e;
  border-color: #2a3a5e;
  color: #fff;
}
.export-cancel {
  margin-top: 2px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #8794b5;
  cursor: pointer;
  padding: 6px;
}
.export-cancel:hover { color: #57689a; }

/* ── Video editor (timeline, trim, music) ──────────────────────────────────── */
.vedit-toggle {
  position: fixed;
  left: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font: 700 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(14, 21, 32, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 22px rgba(20, 30, 60, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.vedit-toggle:hover { transform: translateY(-1px); }
.vedit-toggle[hidden] { display: none; }

.vedit {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 58;
  width: min(720px, calc(100vw - 20px));
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: rgba(14, 21, 32, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 44px rgba(10, 18, 40, 0.5);
  color: #e8edf8;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vedit[hidden] { display: none; }
.vedit-head { display: flex; align-items: center; gap: 10px; }
.vedit-title {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(200, 214, 240, 0.55);
}
.vedit-play {
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff; font-size: 13px; cursor: pointer;
}
.vedit-play:hover { background: rgba(255,255,255,0.24); }
.vedit-time { font: 600 12px/1 ui-monospace, monospace; color: rgba(220,230,250,0.85); }
.vedit-close {
  border: none; background: none; color: rgba(220,230,250,0.6);
  font-size: 13px; cursor: pointer; padding: 4px 6px;
}
.vedit-close:hover { color: #fff; }

.vedit-strip-wrap {
  position: relative;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0f18;
  cursor: pointer;
  touch-action: none;
}
.vedit-strip { display: block; width: 100%; height: 52px; }
.vedit-shade {
  position: absolute; top: 0; bottom: 0;
  background: rgba(5, 8, 15, 0.72);
  pointer-events: none;
}
#vedit-shade-l { left: 0; }
#vedit-shade-r { right: 0; }
.vedit-handle {
  position: absolute; top: 0; bottom: 0;
  width: 12px;
  margin-left: -6px;
  background: #fff;
  border-radius: 4px;
  cursor: ew-resize;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.vedit-handle::after {
  content: '';
  position: absolute; left: 4px; right: 4px; top: 14px; bottom: 14px;
  border-left: 1px solid #99a; border-right: 1px solid #99a;
}
.vedit-playhead {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: #ff5d3a;
  box-shadow: 0 0 6px rgba(255,93,58,0.8);
  pointer-events: none;
}

.vedit-audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vedit-music-btn {
  border: 1px dashed rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  color: #dbe4f6;
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
}
.vedit-music-btn:hover { background: rgba(255,255,255,0.14); }
.vedit-music-name {
  font-size: 11.5px; font-weight: 600; color: #9fe8b8;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vedit-music-remove {
  border: none; background: none; color: rgba(220,230,250,0.55);
  font-size: 11px; cursor: pointer;
}
.vedit-music-remove:hover { color: #ff8a7a; }
.vedit-vol { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.vedit-vol input[type="range"] { width: 86px; accent-color: #8b5cf6; }
@media (max-width: 480px) {
  .vedit-vol input[type="range"] { width: 64px; }
}

/* ── Timeline overlay-layer chips ──────────────────────────────────────────── */
.vedit-layer-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vedit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  color: #dbe4f6;
  border-radius: 999px;
  padding: 7px 12px;
  font: 600 11.5px/1 system-ui, sans-serif;
  cursor: pointer;
  max-width: 150px;
}
.vedit-chip:hover { background: rgba(255,255,255,0.14); }
.vedit-chip.filled { border-style: solid; border-color: rgba(150,220,180,0.5); }
.vedit-chip.sel { background: rgba(139,92,246,0.30); border-color: rgba(170,140,255,0.7); }
.vedit-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vedit-chip-x { color: rgba(255,255,255,0.6); font-size: 10px; padding: 2px; }
.vedit-chip-x:hover { color: #ff8a7a; }

/* ── Save-to-Photos toast (mobile export) ──────────────────────────────────── */
.save-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(130%);
  z-index: 130;
  width: min(340px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(16, 22, 34, 0.9);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 44px rgba(10, 18, 40, 0.5);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.55, 1);
}
.save-toast[hidden] { display: none; }
.save-toast.show { transform: translateX(-50%) translateY(0); }
.save-toast-msg { margin: 0; font-size: 13px; font-weight: 700; color: #eaf1ff; letter-spacing: 0.02em; }
.save-toast-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  font: 700 14px/1 system-ui, -apple-system, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #34c759, #2fb350);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4);
  cursor: pointer;
}
.save-toast-btn:active { filter: brightness(0.95); }
.save-toast-dl {
  border: none; background: none;
  color: rgba(200, 214, 240, 0.7);
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 4px;
}
.save-toast-x {
  position: absolute; top: 10px; right: 12px;
  border: none; background: none;
  color: rgba(200, 214, 240, 0.55);
  font-size: 12px; cursor: pointer; padding: 4px 6px;
}

/* ── Feedback modal ─────────────────────────────────────────────────────────── */
.feedback-modal { z-index: 1200; }   /* above the splash, which can open it */
.feedback-sub {
  margin: -4px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6a799e;
  text-align: center;
}
.feedback-text, .feedback-contact {
  width: 100%;
  border: 1px solid rgba(120, 140, 200, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: #2a3a5e;
  background: #fff;
  outline: none;
  resize: vertical;
}
.feedback-text:focus, .feedback-contact:focus {
  border-color: #5b8def;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
}
.feedback-status {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #2f9e57;
  text-align: center;
}

/* ── Themes: dark + pure black (light is the default) ──────────────────────── */
html[data-theme="dark"], html[data-theme="black"] {
  --text:         #e7ecfb;
  --text-muted:   #93a2d8;
  --accent:       #a9b8ec;
  --accent-2:     #cdd7ff;
  --accent-fg:    #10141f;
  --glass-bg:     rgba(24, 30, 48, 0.52);
  --glass-border: rgba(255, 255, 255, 0.16);
  --rim:
    inset 0 2px 6px  rgba(255, 255, 255, 0.10),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    inset 3px 0 5px  rgba(255, 255, 255, 0.05),
    inset -1px 0 3px rgba(0, 0, 0, 0.2);
  --outer-glow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px  8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"]  body { background: #12151f; }
html[data-theme="black"] body { background: #000000; }

/* header action buttons */
html[data-theme="dark"] .fxb-trigger, html[data-theme="black"] .fxb-trigger,
html[data-theme="dark"] #fx-browser-btn, html[data-theme="black"] #fx-browser-btn,
html[data-theme="dark"] #camera-btn, html[data-theme="black"] #camera-btn {
  background: linear-gradient(180deg, #2a3350 0%, #1c2338 100%);
  border-color: rgba(150, 170, 230, 0.35);
  color: #dbe4f6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.4);
}
html[data-theme="dark"] #fx-browser-btn .fxb-trigger-label,
html[data-theme="black"] #fx-browser-btn .fxb-trigger-label { color: #dbe4f6; }
html[data-theme="dark"] .btn-ghost, html[data-theme="black"] .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.35);
}

/* effects browser */
html[data-theme="dark"] .fxb-modal, html[data-theme="black"] .fxb-modal { background: #171c2b; }
html[data-theme="black"] .fxb-modal { background: #0a0c12; }
html[data-theme="dark"] .fxb-title, html[data-theme="black"] .fxb-title,
html[data-theme="dark"] .fxb-card-name, html[data-theme="black"] .fxb-card-name { color: #dbe4f6; }
html[data-theme="dark"] .fxb-card, html[data-theme="black"] .fxb-card {
  background: #202741; border-color: rgba(255,255,255,0.10);
}
html[data-theme="black"] .fxb-card { background: #14171f; }
html[data-theme="dark"] .fxb-search, html[data-theme="black"] .fxb-search {
  background: rgba(255,255,255,0.08); color: #e7ecfb; border-color: rgba(255,255,255,0.18);
}
html[data-theme="dark"] .fxb-tab, html[data-theme="black"] .fxb-tab { color: #a8b6e2; border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] .fxb-tab.active, html[data-theme="black"] .fxb-tab.active { background: #cdd7ff; border-color: #cdd7ff; color: #10141f; }
html[data-theme="dark"] .fxb-close, html[data-theme="black"] .fxb-close { background: rgba(255,255,255,0.1); color: #dbe4f6; }

/* splash + modals (export chooser, feedback) */
html[data-theme="dark"] .splash-card, html[data-theme="black"] .splash-card { background: #1a2033; }
html[data-theme="black"] .splash-card { background: #0d0f16; }
html[data-theme="dark"] .splash-logo, html[data-theme="black"] .splash-logo,
html[data-theme="dark"] .splash-welcome, html[data-theme="black"] .splash-welcome { color: #e7ecfb; }
html[data-theme="dark"] .splash-sub, html[data-theme="black"] .splash-sub,
html[data-theme="dark"] .splash-support-note, html[data-theme="black"] .splash-support-note { color: #93a2d8; }
html[data-theme="dark"] .export-modal-card, html[data-theme="black"] .export-modal-card {
  background: linear-gradient(160deg, rgba(30,37,58,0.97) 0%, rgba(22,27,43,0.97) 100%);
}
html[data-theme="black"] .export-modal-card {
  background: linear-gradient(160deg, rgba(16,18,26,0.98) 0%, rgba(8,9,14,0.98) 100%);
}
html[data-theme="dark"] .export-modal-title, html[data-theme="black"] .export-modal-title { color: #dbe4f6; }
html[data-theme="dark"] .feedback-sub, html[data-theme="black"] .feedback-sub { color: #93a2d8; }
html[data-theme="dark"] .export-dur, html[data-theme="black"] .export-dur {
  background: rgba(255,255,255,0.08); color: #a8b6e2; border-color: rgba(255,255,255,0.2);
}
html[data-theme="dark"] .export-dur.active, html[data-theme="black"] .export-dur.active {
  background: #cdd7ff; border-color: #cdd7ff; color: #10141f;
}
html[data-theme="dark"] .feedback-text, html[data-theme="black"] .feedback-text,
html[data-theme="dark"] .feedback-contact, html[data-theme="black"] .feedback-contact {
  background: rgba(255,255,255,0.07); color: #e7ecfb; border-color: rgba(255,255,255,0.18);
}
html[data-theme="dark"] .export-cancel, html[data-theme="black"] .export-cancel { color: #93a2d8; }

/* canvas backdrop: keep the drop area neutral in dark */
html[data-theme="dark"] .canvas-wrap.bg-white, html[data-theme="black"] .canvas-wrap.bg-white { background: transparent; }
html[data-theme="dark"] .canvas-area { background: #12151f; }
html[data-theme="black"] .canvas-area { background: #000; }

/* HD-mask button: slim secondary pill, not a hero CTA */
#cy-hd-btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: rgba(120, 140, 200, 0.12);
  border: 1px solid rgba(120, 140, 200, 0.35);
  color: #4a5c88;
  box-shadow: none;
  text-shadow: none;
}
#cy-hd-btn:hover:not(:disabled) {
  background: rgba(120, 140, 200, 0.22);
  transform: none;
  filter: none;
  box-shadow: none;
}
html[data-theme="dark"] #cy-hd-btn, html[data-theme="black"] #cy-hd-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #c3cdf0;
}

/* Popular tab in the effects browser — subtle accent */
.fxb-tab-pop.active { background: linear-gradient(120deg, #ff7b54, #ff5722); border-color: #ff5722; color: #fff; }
.fxb-tab-pop:not(.active) { color: #d2653f; border-color: rgba(255,120,80,0.4); }
.fxb-tab-new.active { background: linear-gradient(120deg, #2bb673, #10a04f); border-color: #10a04f; color: #fff; }
.fxb-tab-new:not(.active) { color: #159a5c; border-color: rgba(40,180,115,0.45); }
html[data-theme="dark"] .fxb-tab-new:not(.active), html[data-theme="black"] .fxb-tab-new:not(.active) { color: #5fd6a0; border-color: rgba(60,200,140,0.5); }

/* ── Accounts (dormant until launch) ───────────────────────────────────────── */
#account-btn[hidden] { display: none; }
#account-btn.logged-in { color: #34c759; }
.acct-overlay {
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10,14,28,0.55);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.acct-overlay[hidden] { display: none; }
body.acct-open { overflow: hidden; }
.acct-modal {
  position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: 20px; padding: 22px 22px 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(240,244,252,0.96));
  box-shadow: 0 20px 64px rgba(10,15,40,0.4);
}
html[data-theme="dark"] .acct-modal, html[data-theme="black"] .acct-modal {
  background: linear-gradient(160deg, rgba(28,34,54,0.98), rgba(18,22,36,0.98)); color: #e7ecfb;
}
.acct-close { position: absolute; top: 12px; right: 14px; border: none; background: rgba(120,140,200,0.14);
  width: 30px; height: 30px; border-radius: 50%; color: #57689a; font-size: 12px; cursor: pointer; }
.acct-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.acct-tab { flex: 1; border: 1px solid rgba(120,140,200,0.28); background: transparent; border-radius: 999px;
  padding: 9px; font: inherit; font-size: 13px; font-weight: 700; color: #57689a; cursor: pointer; }
.acct-tab.active { background: #2a3a5e; border-color: #2a3a5e; color: #fff; }
.acct-lead { margin: 0 0 12px; font-size: 12.5px; color: #6a799e; }
.acct-in { width: 100%; margin-bottom: 10px; padding: 12px 13px; border-radius: 12px;
  border: 1px solid rgba(120,140,200,0.32); background: #fff; color: #2a3a5e; font: inherit; font-size: 14px; outline: none; }
html[data-theme="dark"] .acct-in, html[data-theme="black"] .acct-in { background: rgba(255,255,255,0.07); color: #e7ecfb; border-color: rgba(255,255,255,0.18); }
.acct-in:focus { border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91,141,239,0.18); }
.acct-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #6a799e; margin-bottom: 12px; line-height: 1.4; cursor: pointer; }
.acct-check input { margin-top: 1px; }
.acct-btn { width: 100%; border: none; border-radius: 999px; padding: 13px; font: inherit; font-size: 14px; font-weight: 700;
  color: #fff; background: linear-gradient(120deg, #5b8def, #8a5bef); cursor: pointer; box-shadow: 0 8px 22px rgba(90,90,230,0.35); }
.acct-btn[disabled] { opacity: 0.6; }
.acct-msg { min-height: 16px; margin-top: 10px; font-size: 12px; }
.acct-msg.err { color: #e0574a; }
.acct-msg.ok { color: #2f9e57; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 34px; }
.acct-email { font-size: 14px; font-weight: 800; }
.acct-uid { font-size: 11px; color: #8794b5; }
.acct-head .acct-ghost { margin-left: auto; }
.acct-ghost { border: 1px solid rgba(120,140,200,0.35); background: rgba(120,140,200,0.1); color: inherit;
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.acct-sub { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; }
.acct-sub h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8794b5; }
.acct-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.acct-cass { border: 1px solid rgba(120,140,200,0.2); border-radius: 12px; padding: 8px; background: rgba(255,255,255,0.5); }
html[data-theme="dark"] .acct-cass, html[data-theme="black"] .acct-cass { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.acct-cass-art { border-radius: 8px; overflow: hidden; background: #0e1520; }
.acct-cass-canvas { display: block; width: 100%; height: auto; }
.acct-cass-name { font-size: 12px; font-weight: 700; margin: 7px 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-cass-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.acct-mini { flex: 1 1 auto; border: 1px solid rgba(120,140,200,0.3); background: rgba(120,140,200,0.08); color: inherit;
  border-radius: 8px; padding: 6px 4px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
/* icon-only actions stay compact; Apply/Share grow to fill the row */
.acct-cass-acts [data-a="apply"], .acct-cass-acts [data-a="share"] { flex: 1 1 40px; min-width: 40px; }
.acct-cass-acts [data-a="link"], .acct-cass-acts [data-a="export"] { flex: 0 0 auto; padding: 6px 8px; }
.acct-mini.danger { flex: 0 0 28px; color: #d0574a; }
.acct-empty, .acct-loading { grid-column: 1 / -1; text-align: center; color: #8794b5; font-size: 13px; padding: 22px 0; }

/* Rate box (community cards) — was unstyled, so the star buttons rendered huge
   and the comment field overflowed the card. */
.acct-rate { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 10px;
  border: 1px solid rgba(120,140,200,0.28); border-radius: 10px; background: rgba(120,140,200,0.06);
  display: flex; flex-direction: column; gap: 8px; }
.acct-rate-stars { display: flex; gap: 2px; justify-content: center; }
.acct-rate-stars button { border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 22px; line-height: 1; color: #ffb02e; }
.acct-rate .acct-in.sm { box-sizing: border-box; width: 100%; margin: 0; font-size: 13px; padding: 9px 10px; }
.acct-rate #rate-send { align-self: stretch; flex: 0 0 auto; }
.acct-rate-done { text-align: center; color: #2f9e57; font-weight: 700; font-size: 13px; padding: 6px 0; }
@media (max-width: 480px) { .acct-presets { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ═══ Unified header buttons — one frosted-glass design for all ═══════════════
   Matches the layers toggle (.drawer-toggle): frosted surface, bright rim,
   soft glow, text-coloured icons. Same in every theme, like the layers button.
   Surface is applied everywhere (all breakpoints); sizing is left to the base
   + mobile rules so the phone-compacting still works. */
.header .drawer-toggle,
.header-actions .fxb-trigger,
.header-actions .btn-kofi-header,
.header-actions .btn-feedback-header,
.header-actions .btn.btn-ghost {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1.5px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.90), 0 4px 14px rgba(130, 145, 210, 0.18) !important;
  color: var(--text) !important;
  text-shadow: none !important;
  transition: background 0.15s ease, transform 0.12s ease !important;
}
.header .drawer-toggle:hover,
.header-actions .fxb-trigger:hover,
.header-actions .btn-kofi-header:hover,
.header-actions .btn-feedback-header:hover,
.header-actions .btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.34) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}
.header .drawer-toggle:active,
.header-actions .fxb-trigger:active,
.header-actions .btn-kofi-header:active,
.header-actions .btn-feedback-header:active,
.header-actions .btn.btn-ghost:active { transform: scale(0.96) !important; }

/* text-pill buttons (label + icon): consistent pill, text-coloured label */
#fx-browser-btn .fxb-trigger-label,
.btn-feedback-header .btn-feedback-label { color: var(--text) !important; }
.header-actions .btn.btn-ghost::before { display: none !important; }   /* drop the extra specular sweep */

/* Desktop: give the previously-bare icon buttons (theme/coffee/insta/account)
   a proper frosted square to sit in — mobile compacting (≤600px) untouched. */
@media (min-width: 601px) {
  .header-actions .btn-kofi-header {
    width: 38px; height: 38px; min-width: 38px;
    border-radius: 13px; padding: 0; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Dark / black themes: the same frosted rim reads best a touch dimmer. */
html[data-theme="dark"] .header .drawer-toggle,
html[data-theme="dark"] .header-actions .fxb-trigger,
html[data-theme="dark"] .header-actions .btn-kofi-header,
html[data-theme="dark"] .header-actions .btn-feedback-header,
html[data-theme="dark"] .header-actions .btn.btn-ghost,
html[data-theme="black"] .header .drawer-toggle,
html[data-theme="black"] .header-actions .fxb-trigger,
html[data-theme="black"] .header-actions .btn-kofi-header,
html[data-theme="black"] .header-actions .btn-feedback-header,
html[data-theme="black"] .header-actions .btn.btn-ghost {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .header-actions .fxb-trigger:hover,
html[data-theme="dark"] .header-actions .btn-kofi-header:hover,
html[data-theme="dark"] .header-actions .btn-feedback-header:hover,
html[data-theme="dark"] .header-actions .btn.btn-ghost:hover,
html[data-theme="black"] .header-actions .fxb-trigger:hover,
html[data-theme="black"] .header-actions .btn-kofi-header:hover,
html[data-theme="black"] .header-actions .btn-feedback-header:hover,
html[data-theme="black"] .header-actions .btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
/* icon buttons = rounded squares like the layers toggle (text buttons stay pills) */
#camera-btn { border-radius: 13px !important; }

/* ── Accounts: community + avatar additions ────────────────────────────────── */
.acct-av-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acct-av {
  width: 54px; height: 54px; border-radius: 50%; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(120,140,200,0.15); border: 1px solid rgba(120,140,200,0.35);
  color: #8794b5; font-size: 20px; font-weight: 700; overflow: hidden;
}
.acct-av.sm { width: 40px; height: 40px; font-size: 15px; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; }
/* Clickable avatar (dashboard) — camera badge on hover to signal it's editable. */
.acct-av-edit { position: relative; padding: 0; border: 1px solid rgba(120,140,200,0.35); overflow: visible; }
.acct-av-edit img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.acct-av-edit > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; }
.acct-av-cam { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: #5b8def; color: #fff; font-size: 9px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.acct-av-edit:hover { filter: brightness(1.04); }
.acct-av-spin { font-size: 16px; color: #8794b5; }
.acct-av-hint { font-size: 13px; font-weight: 700; }
.acct-av-sub { font-size: 11px; color: #8794b5; }
.acct-in.sm { padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }

.acct-cass.comm { display: flex; flex-direction: column; }
.acct-comm-meta { margin: 7px 2px 6px; }
.acct-comm-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-comm-by { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: #8794b5; }
.acct-comm-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  background: rgba(120,140,200,0.2); color: #6a799e; }
.acct-comm-stats { display: flex; gap: 9px; align-items: center; margin-top: 5px; font-size: 11px; color: #8794b5; }
.acct-comm-stars { color: #ffb02e; letter-spacing: 1px; }

.acct-rate { grid-column: 1 / -1; margin-top: 8px; padding: 10px; border-radius: 10px;
  background: rgba(120,140,200,0.08); border: 1px solid rgba(120,140,200,0.2); }
.acct-rate-stars { display: flex; gap: 2px; margin-bottom: 8px; }
.acct-rate-stars button { border: none; background: none; cursor: pointer; font-size: 22px; color: #ffb02e; padding: 0 2px; }
.acct-rate-done { color: #2f9e57; font-weight: 700; font-size: 13px; text-align: center; padding: 6px; }
.acct-sub span { display: inline-flex; gap: 6px; }
.acct-invite { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: linear-gradient(120deg, #5b8def, #8a5bef); box-shadow: 0 6px 18px rgba(90,90,230,0.35); }
.acct-perks { margin: 0 0 12px; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.acct-perks li { font-size: 12.5px; color: #4a5c88; }
html[data-theme="dark"] .acct-perks li, html[data-theme="black"] .acct-perks li { color: #c3cdf0; }

/* ── Header account / login button (icon + label pill) ── */
.btn-account-header {
  width: auto !important;
  padding: 0 13px !important;
  gap: 6px;
  display: inline-flex;
  align-items: center;
}
.btn-account-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
/* Logged-out: give it a clear accent so it reads as a call to action. */
.btn-account-header:not(.logged-in) {
  background: linear-gradient(120deg, #5b8def, #8a5bef) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(90, 110, 235, 0.4) !important;
}
.btn-account-header.logged-in { position: relative; }
.btn-account-header.logged-in::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
@media (max-width: 640px) {
  .btn-account-header { width: 38px !important; padding: 0 !important; justify-content: center; }
  .btn-account-label { display: none; }
}

/* ── Splash account CTA ── */
/* ── Compact splash CTA + mini links ── */
.splash-cta { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0 0 20px; }
.splash-account-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 320px;
}
.splash-account-btn:hover { filter: brightness(1.06); }
.splash-cta-hint { font-size: 11.5px; color: #8794b5; margin: -2px 0 2px; }
.splash-ghost-btn {
  width: 100%; max-width: 320px;
  border: 1px solid rgba(120,140,200,0.4); background: transparent; color: #42527a;
  border-radius: 12px; padding: 11px 22px;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.splash-ghost-btn:hover { background: rgba(120,140,200,0.1); border-color: rgba(120,140,200,0.6); }
html[data-theme="dark"] .splash-ghost-btn, html[data-theme="black"] .splash-ghost-btn { color: #c3cdf0; border-color: rgba(255,255,255,0.22); }
html[data-theme="dark"] .splash-ghost-btn:hover, html[data-theme="black"] .splash-ghost-btn:hover { background: rgba(255,255,255,0.08); }

.splash-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.splash-mini-btn {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(120,140,200,0.3); background: rgba(120,140,200,0.08); color: #5a6a8e;
  transition: background 0.15s ease;
}
.splash-mini-btn:hover { background: rgba(120,140,200,0.16); }
html[data-theme="dark"] .splash-mini-btn, html[data-theme="black"] .splash-mini-btn { color: #b3c0e4; border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }
.splash-mini-note { margin: 12px 0 0; font-size: 11.5px; color: #8794b5; }

/* ── Effects browser: Community tab + shared-stack feed ── */
.fxb-tab-comm.active { background: linear-gradient(120deg, #7b8def, #a05bef); border-color: #8a5bef; color: #fff; }
.fxb-tab-comm:not(.active) { color: #6a5bd8; border-color: rgba(130,110,235,0.45); }
html[data-theme="dark"] .fxb-tab-comm:not(.active), html[data-theme="black"] .fxb-tab-comm:not(.active) { color: #b3b0f5; border-color: rgba(150,130,245,0.5); }

.fxb-community {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  padding: 0 18px 4px;
}
.fxb-community[hidden] { display: none; }
/* the effect grid sets display:grid by class, which beats the UA [hidden] rule —
   restore hiding so the Community tab fully replaces it instead of stacking. */
.fxb-grid[hidden] { display: none !important; }
.fxb-comm-intro { font-size: 12.5px; color: #6b7799; padding: 2px 2px 12px; }
html[data-theme="dark"] .fxb-comm-intro, html[data-theme="black"] .fxb-comm-intro { color: #9aa6cd; }
.fxb-comm-sorts { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
.fxb-comm-sort {
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(120,140,200,0.28); background: transparent; color: #6a7599;
}
.fxb-comm-sort.active { background: #2a3a5e; border-color: #2a3a5e; color: #fff; }
html[data-theme="dark"] .fxb-comm-sort, html[data-theme="black"] .fxb-comm-sort { color: #a8b6e2; border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] .fxb-comm-sort.active, html[data-theme="black"] .fxb-comm-sort.active { background: #cdd7ff; border-color: #cdd7ff; color: #10141f; }

.fxb-comm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: max-content; align-content: start; gap: 14px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0;
  padding-bottom: 22px;
}
.fxb-comm-msg { grid-column: 1 / -1; text-align: center; color: #8794b5; font-size: 13px; padding: 40px 10px; }

.fxb-comm-card {
  display: flex; flex-direction: column; border: 1px solid rgba(120,140,200,0.2);
  border-radius: 14px; background: #fff; overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.fxb-comm-card:hover { transform: translateY(-2px); border-color: #8a5bef; box-shadow: 0 8px 22px rgba(110,90,220,0.2); }
html[data-theme="dark"] .fxb-comm-card, html[data-theme="black"] .fxb-comm-card { background: #14171f; border-color: rgba(255,255,255,0.12); }
.fxb-comm-art { display: block; width: 100%; padding: 0; border: none; background: #0e1520; cursor: pointer; }
/* keep the cassette cartridge at its native ratio — no forced aspect-ratio */
.fxb-comm-canvas { display: block; width: 100%; height: auto; }
.fxb-comm-cardmeta { padding: 9px 11px 4px; display: flex; flex-direction: column; gap: 5px; }
.fxb-comm-cardname { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; color: #2a3a5e; }
html[data-theme="dark"] .fxb-comm-cardname, html[data-theme="black"] .fxb-comm-cardname { color: #dbe4f6; }
.fxb-comm-by { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #7a86a8; }
.fxb-comm-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.fxb-comm-av.ph { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(120deg,#7b8def,#a05bef); color: #fff; font-size: 10px; font-weight: 700; }
.fxb-comm-cardstats { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #8794b5; }
.fxb-comm-stars { color: #ffb02e; letter-spacing: 1px; }
.fxb-comm-apply {
  margin: 8px 11px 6px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 9px 12px; border-radius: 10px; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(120deg, #7b8def, #a05bef); box-shadow: 0 2px 10px rgba(110,90,220,0.35);
}
.fxb-comm-apply:hover { filter: brightness(1.06); }
.fxb-comm-dl {
  margin: 0 11px 11px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 7px 10px; border-radius: 9px; cursor: pointer; color: #6a7599;
  border: 1px solid rgba(120,140,200,0.3); background: rgba(120,140,200,0.06);
}
.fxb-comm-dl:hover { background: rgba(120,140,200,0.14); }
html[data-theme="dark"] .fxb-comm-dl, html[data-theme="black"] .fxb-comm-dl { color: #a8b6e2; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.fxb-comm-note { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #8794b5; }
html[data-theme="dark"] .fxb-comm-note, html[data-theme="black"] .fxb-comm-note { color: #8593bd; }

/* Mobile: the single-item auto-fill track was stretching one card to full width
   and blowing up the cassette. Lock to a compact 2-up grid, tighter padding. */
@media (max-width: 640px) {
  .fxb-community { padding: 0 12px 4px; }
  .fxb-comm-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fxb-comm-cardname { font-size: 11.5px; }
  .fxb-comm-apply { margin: 7px 8px 5px; padding: 8px 8px; font-size: 11px; }
  .fxb-comm-dl { margin: 0 8px 8px; padding: 6px 6px; font-size: 10px; }
  .fxb-comm-cardmeta { padding: 8px 8px 3px; }
}

/* ── Header account button: avatar + username when signed in ── */
.acct-trigger-av { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.acct-trigger-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-trigger-ini { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #7b8def, #a05bef); color: #fff; font-size: 10px; font-weight: 800; }
.btn-account-header.logged-in .btn-account-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  /* keep the avatar visible even when the text label collapses */
  .btn-account-header.logged-in { width: 38px !important; }
  .btn-account-header.logged-in .btn-account-label { display: none; }
}

/* ── Account: community-sharing guide card (shown once after signup) ── */
.acct-guide {
  position: relative; margin: 4px 0 14px; padding: 14px 16px 12px;
  border-radius: 14px; border: 1px solid rgba(130,110,235,0.3);
  background: linear-gradient(150deg, rgba(123,141,239,0.12), rgba(160,91,239,0.1));
}
html[data-theme="dark"] .acct-guide, html[data-theme="black"] .acct-guide { border-color: rgba(150,130,245,0.35); background: linear-gradient(150deg, rgba(123,141,239,0.16), rgba(160,91,239,0.12)); }
.acct-guide-h { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; margin-bottom: 8px; padding-right: 22px; }
.acct-guide-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.acct-guide-steps li { font-size: 12.5px; line-height: 1.45; }
.acct-guide-x {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(120,130,180,0.15); color: inherit; cursor: pointer; font-size: 12px; line-height: 1;
}
.acct-guide-x:hover { background: rgba(120,130,180,0.28); }

/* ── Transient toast (shared-stack links, etc.) ── */
.lr-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 100000; max-width: min(90vw, 420px); padding: 12px 18px; border-radius: 999px;
  background: rgba(20,24,38,0.94); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; text-align: center;
}
.lr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Community "preview on my photo" (tap a cassette) ── */
.fxb-comm-art { position: relative; }
.fxb-comm-peek {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 8px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(0deg, rgba(10,14,26,0.82), rgba(10,14,26,0)); pointer-events: none;
}
.comm-preview {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,8,14,0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.comm-preview[hidden] { display: none; }
.comm-preview-inner {
  display: flex; flex-direction: column; gap: 12px; max-width: min(920px, 100%); max-height: 100%;
}
.comm-preview-canvas {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: #0e1520; border-radius: 14px; overflow: hidden;
}
.comm-preview-img { max-width: 100%; max-height: 72vh; display: block; object-fit: contain; border-radius: 14px; }
.comm-preview-spin { color: #9aa6cd; font-size: 13px; padding: 60px 20px; text-align: center; }
.comm-preview-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(24,30,48,0.9); border-radius: 14px; padding: 12px 16px; color: #e7ecfb;
}
.comm-preview-meta { display: flex; flex-direction: column; }
.comm-preview-meta b { font-size: 14px; }
.comm-preview-meta span { font-size: 11px; color: #93a2d8; }
.comm-preview-acts { margin-left: auto; display: flex; gap: 8px; }
.comm-preview-back {
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #e7ecfb;
  border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.comm-preview-load {
  border: none; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #fff; background: linear-gradient(120deg, #7b8def, #a05bef); box-shadow: 0 4px 16px rgba(110,90,220,0.4);
}
.comm-preview-load:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .comm-preview { padding: 12px; }
  .comm-preview-acts { width: 100%; }
  .comm-preview-back, .comm-preview-load { flex: 1; text-align: center; }
}

/* Crawlable effect links in the empty state (also genuinely useful navigation) */
.empty-links { margin-top: 18px; font-size: 12px; color: var(--muted, #8794b5); line-height: 1.9; }
.empty-links a { color: #7b8def; text-decoration: none; }
.empty-links a:hover { text-decoration: underline; }

/* Auto-publish disclosure + listed/private toggle on preset cards */
.acct-listnote { margin: -4px 0 12px; font-size: 11.5px; line-height: 1.5; color: #8794b5; }
html[data-theme="dark"] .acct-listnote, html[data-theme="black"] .acct-listnote { color: #8593bd; }
.acct-mini.listed { color: #2bb673; border-color: rgba(43,182,115,0.45); background: rgba(43,182,115,0.1); }
.acct-mini.unlisted { color: #8794b5; }

/* Save-preset button in the canvas toolbar (secondary to EXPORT) */
.btn-toolbar-save {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.14);
  color: var(--text, #e7ecfb);
  border: 1.5px solid rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 10px rgba(90,105,150,0.18);
  cursor: pointer;
}
.btn-toolbar-save:hover { background: rgba(255,255,255,0.24); }
.toolbar-save-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
@media (max-width: 640px) {
  .toolbar-save-label { display: none; }
  .btn-toolbar-save { padding-left: 12px; padding-right: 12px; }
}

/* ── Creator profiles + following ── */
.acct-comm-author, .fxb-comm-author {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(140,160,220,0.5);
}
.acct-comm-author:hover, .fxb-comm-author:hover { color: #7b8def; }
.prof-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 6px; }
.prof-av { width: 64px; height: 64px; font-size: 24px; }
.prof-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.prof-id { min-width: 0; }
.prof-name { font-size: 18px; font-weight: 800; letter-spacing: 0.01em; }
.prof-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: #8794b5; }
.prof-stats b { color: var(--text, #e7ecfb); }
.prof-follow {
  margin-left: auto; border: none; border-radius: 999px; padding: 10px 20px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, #5b8def, #8a5bef); box-shadow: 0 4px 14px rgba(90,110,235,0.35);
}
.prof-follow.following {
  background: none; color: #8794b5; border: 1px solid rgba(120,140,200,0.4); box-shadow: none;
}
.prof-follow[disabled] { opacity: 0.6; }
.prof-you { margin-left: auto; font-size: 12px; color: #8794b5; }
.acct-cass.comm.no-author .acct-comm-by { display: none; }

/* ── "Load stack over existing stack?" prompt ── */
.stackq-overlay {
  position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,8,14,0.7);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.stackq {
  width: min(340px, 100%); padding: 22px 22px 18px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(240,244,252,0.97));
  box-shadow: 0 20px 60px rgba(10,15,40,0.45); color: #2a3a5e;
}
html[data-theme="dark"] .stackq, html[data-theme="black"] .stackq {
  background: linear-gradient(160deg, rgba(28,34,54,0.98), rgba(18,22,36,0.98)); color: #e7ecfb;
}
.stackq-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.stackq-sub { margin: 0 0 16px; font-size: 12.5px; color: #8794b5; }
.stackq-btn {
  display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border-radius: 12px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(120,140,200,0.35); background: rgba(120,140,200,0.08); color: inherit;
}
.stackq-btn.primary {
  border: none; color: #fff;
  background: linear-gradient(120deg, #5b8def, #8a5bef); box-shadow: 0 6px 18px rgba(90,110,235,0.35);
}
.stackq-btn.ghost { border: none; background: none; color: #8794b5; font-weight: 600; }
.stackq-btn:hover { filter: brightness(1.05); }

/* ── Button press feedback ─────────────────────────────────────────────────────
   :active gives instant feedback on desktop; the .pressed class is added on
   click so touch devices (where :active is unreliable) get the same confirmation. */
.acct-mini, .fxb-comm-apply, .fxb-comm-dl, .prof-follow,
.comm-preview-load, .comm-preview-back, .stackq-btn, .acct-ghost, .acct-btn {
  transition: transform 0.09s ease, filter 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.acct-mini:active, .fxb-comm-dl:active, .comm-preview-back:active,
.acct-ghost:active, .stackq-btn:active {
  transform: scale(0.93);
  filter: brightness(0.94);
}
.fxb-comm-apply:active, .prof-follow:active, .comm-preview-load:active, .acct-btn:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}

/* Confirmation pop — fires on click, so a tap that dismisses the panel still
   reads as "that registered". */
@keyframes lr-press-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}
.lr-pressed { animation: lr-press-pop 0.22s ease; }
@media (prefers-reduced-motion: reduce) {
  .lr-pressed { animation: none; }
  .acct-mini:active, .fxb-comm-apply:active, .prof-follow:active,
  .comm-preview-load:active, .stackq-btn:active { transform: none; }
}

/* ── Favourite stacks (star on community cards) ── */
.acct-cass-art { position: relative; }
.acct-cass-fav, .fxb-comm-fav {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: #fff;
  background: rgba(12,18,32,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.12s ease;
}
.acct-cass-fav:hover, .fxb-comm-fav:hover { background: rgba(12,18,32,0.75); transform: scale(1.08); }
.acct-cass-fav.on, .fxb-comm-fav.on { color: #ffb02e; }
/* the community card is the positioning context for its star */
.fxb-comm-card { position: relative; }

/* ── Stack order (composite chain) ── */
.stack-order { margin: 10px 0 14px; }
.stack-order[hidden] { display: none; }
.stack-order-title { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: #8794b5; margin-bottom: 6px; }
.stack-order-list { list-style: none; margin: 0; padding: 0; counter-reset: so; }
.stack-order-item {
  counter-increment: so;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  border: 1px solid rgba(120,140,200,0.22); border-radius: 9px; background: rgba(120,140,200,0.07);
}
.stack-order-item::before {
  content: counter(so); flex: 0 0 16px; text-align: center;
  font-size: 9px; font-weight: 800; color: #8794b5;
}
.stack-order-name {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stack-order-btns { display: flex; gap: 3px; }
.stack-order-btn {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1;
  border: 1px solid rgba(120,140,200,0.3); background: rgba(255,255,255,0.06); color: inherit;
  transition: transform 0.09s ease, background 0.15s ease;
}
.stack-order-btn:hover:not([disabled]) { background: rgba(255,255,255,0.16); }
.stack-order-btn:active:not([disabled]) { transform: scale(0.9); }
.stack-order-btn[disabled] { opacity: 0.3; cursor: default; }

/* ── Stack cover images ── */
.cover-q-img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; background: #0e1520; margin-bottom: 10px; }
.cover-q-warn { color: #d2653f !important; font-weight: 700; }
html[data-theme="dark"] .cover-q-warn, html[data-theme="black"] .cover-q-warn { color: #ff9a6c !important; }
.cover-q-terms { text-align: left; display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.cover-q-term { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.45; cursor: pointer; }
.cover-q-term input { margin-top: 2px; flex: 0 0 auto; }
.cover-q-note { font-size: 11px; color: #8794b5; margin: 0 0 12px; }
.cover-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px;
  padding-top: 7px; border-top: 1px solid rgba(120,140,200,0.18); }
.cover-state { font-size: 10.5px; font-weight: 700; color: #8794b5; }
.cover-btns { margin-left: auto; display: flex; gap: 5px; }
.cover-btns .acct-mini { flex: 0 0 auto; padding: 5px 9px; font-size: 10.5px; }
.cover-q-optional { margin: -6px 0 10px; font-size: 11.5px; color: #8794b5; }

/* ── Reorder controls on layer rows ── */
.layer-move { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 2px; }
.layer-move[hidden] { display: none; }
.layer-move-btn {
  width: 18px; height: 13px; padding: 0; cursor: pointer; line-height: 1;
  font-size: 8px; border-radius: 4px;
  border: 1px solid rgba(120,140,200,0.35);
  background: rgba(255,255,255,0.35); color: #46557d;
  transition: background 0.15s ease, transform 0.09s ease;
}
.layer-move-btn:hover:not([disabled]) { background: rgba(255,255,255,0.7); }
.layer-move-btn:active:not([disabled]) { transform: scale(0.88); }
.layer-move-btn[disabled] { opacity: 0.25; cursor: default; }
html[data-theme="dark"] .layer-move-btn, html[data-theme="black"] .layer-move-btn {
  background: rgba(255,255,255,0.10); color: #c3cdf0; border-color: rgba(255,255,255,0.22);
}
html[data-theme="dark"] .layer-move-btn:hover:not([disabled]),
html[data-theme="black"] .layer-move-btn:hover:not([disabled]) { background: rgba(255,255,255,0.2); }

/* Rate + copy-link on community cards in the effects browser */
.fxb-comm-minirow { display: flex; gap: 6px; margin: 0 11px 11px; }
.fxb-comm-rate {
  flex: 1; font: inherit; font-size: 11px; font-weight: 600; padding: 7px 6px;
  border-radius: 9px; cursor: pointer; color: #6a7599;
  border: 1px solid rgba(120,140,200,0.3); background: rgba(120,140,200,0.06);
}
.fxb-comm-rate:hover { background: rgba(120,140,200,0.14); }
html[data-theme="dark"] .fxb-comm-rate, html[data-theme="black"] .fxb-comm-rate {
  color: #a8b6e2; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.fxb-rate-box { margin: 0 11px 11px; padding: 9px; border-radius: 10px;
  border: 1px solid rgba(120,140,200,0.28); background: rgba(120,140,200,0.06);
  display: flex; flex-direction: column; gap: 7px; }
.fxb-rate-stars { display: flex; gap: 2px; justify-content: center; }
.fxb-rate-stars button { border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 20px; line-height: 1; color: #ffb02e; }
.fxb-rate-send { font: inherit; font-size: 11.5px; font-weight: 700; padding: 7px; border-radius: 8px;
  cursor: pointer; border: none; color: #fff; background: linear-gradient(120deg, #7b8def, #a05bef); }
.fxb-rate-send[disabled] { opacity: 0.5; cursor: default; }
.fxb-rate-done { text-align: center; color: #2bb673; font-weight: 700; font-size: 12px; }

.chassis { display: contents; }   /* desktop: wrapper is inert */
.chassis-brand { display: none; }

/* ═══ MOBILE: digicam chassis ═════════════════════════════════════════════════
   The canvas used to free-float between a header and a detached toolbar, with
   the knob rail overlapping it — three layers competing for one space. Here the
   canvas-area becomes a device body, canvas-wrap becomes its LCD, and the
   controls sit in the chassis beneath it instead of on top of the picture.
   Mobile only; the desktop layout is untouched. */
@media (max-width: 860px) {
  /* Backdrop the device sits on. */
  body.live-view .canvas-area {
    background: linear-gradient(170deg, #6f7890 0%, #4d5568 55%, #383e4d 100%);
    padding: calc(var(--header-h) + var(--safe-top) + 8px) 10px calc(var(--safe-bottom) + 8px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html[data-theme="dark"] body.live-view .canvas-area,
  html[data-theme="black"] body.live-view .canvas-area {
    background: linear-gradient(170deg, #14171f 0%, #0b0d13 60%, #05070b 100%);
  }

  /* ── The device body ── */
  body.live-view .chassis {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    padding: 12px 12px 12px;
    border-radius: 18px;
    /* brushed metal: fine vertical grain over broad shading */
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.20) 0 1px, rgba(0,0,0,0.045) 1px 2px, rgba(255,255,255,0) 2px 4px),
      linear-gradient(158deg, #fbfcfe 0%, #dde2ec 20%, #bcc4d6 46%, #f2f5fa 60%, #c2c9da 82%, #e9edf4 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -2px 4px rgba(110,120,150,0.35),
      0 1px 1px rgba(255,255,255,0.4),
      0 14px 34px rgba(10,15,35,0.45);
    border: 1px solid rgba(255,255,255,0.5);
  }
  html[data-theme="dark"] body.live-view .chassis,
  html[data-theme="black"] body.live-view .chassis {
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0.18) 1px 2px, rgba(255,255,255,0) 2px 4px),
      linear-gradient(158deg, #3a4152 0%, #232838 20%, #191d27 46%, #363d4f 60%, #161a23 82%, #282e3d 100%);
    border-color: rgba(255,255,255,0.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -2px 4px rgba(0,0,0,0.5),
      0 14px 34px rgba(0,0,0,0.6);
  }
  /* ── The LCD ── */
  body.live-view .canvas-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    /* Matches the live camera's own shape — portrait on an upright phone. */
    aspect-ratio: var(--lcd-aspect, 3 / 4);
    max-height: 62vh;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;             /* clip like a real screen */
    background: #0b0e14;
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.55),
      inset 0 2px 10px rgba(0,0,0,0.75),
      0 1px 0 rgba(255,255,255,0.75),
      0 6px 18px rgba(40,50,80,0.28);
  }
  /* the checker/white/black background choices apply inside the screen */
  body.live-view .canvas-wrap.bg-white  { background: #fff; }
  body.live-view .canvas-wrap.bg-black  { background: #000; }

  /* renderPreview now fits to this box, so this is just a safety clamp —
     object-fit is deliberately not used, it would fit the bitmap a second time. */
  body.live-view .preview-canvas { max-width: 100%; max-height: 100%; }

  /* ── Chassis brand strip under the screen ── */
  body.live-view .chassis-brand {
    display: block;
    flex: 0 0 auto;
    margin: 7px 0 2px;
    font: 700 8px/1 ui-monospace, "Courier New", monospace;
    letter-spacing: 0.34em;
    color: rgba(70, 85, 125, 0.55);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-theme="dark"] body.live-view .chassis-brand,
  html[data-theme="black"] body.live-view .chassis-brand {
    color: rgba(190, 205, 245, 0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  }

  /* ── Controls live in the body, not over the picture ── */
  body.live-view .knob-rail {
    position: relative;
    inset: auto;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 10px 14px;
    padding: 10px 6px;
    overflow-y: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
  body.live-view .knob-rail.show { display: flex; }

  /* Toolbar reads as the bottom of the device rather than a floating bar. */
  body.live-view .canvas-toolbar {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    margin: 10px 0 0;
    bottom: auto; left: auto; transform: none;
  }
  /* Everything has to fit the chassis width without clipping its own label. */
  body.live-view .canvas-toolbar { gap: 4px; padding: 7px 8px; }
  body.live-view .canvas-toolbar .toolbar-select {
    flex: 0 0 auto; min-width: 0; padding: 8px 6px 8px 8px; font-size: 11px;
  }
  body.live-view .canvas-toolbar .btn-export { flex: 0 0 auto; white-space: nowrap; padding: 11px 14px; }
  body.live-view .canvas-toolbar .btn-compare { flex: 0 0 auto; }
  body.live-view .canvas-toolbar .btn-toolbar-save { flex: 0 0 auto; padding: 0 10px !important; }
  body.live-view .canvas-toolbar .btn-compare { padding: 9px 12px; }
}

/* Narrow phones: the chassis is only ~330px wide, so squeeze the row further
   rather than let it overflow its own bar. */
@media (max-width: 430px) {
  body.live-view .canvas-toolbar { gap: 3px; padding: 7px 6px; }
  body.live-view .canvas-toolbar .btn-compare { padding: 9px 9px; }
  body.live-view .canvas-toolbar .toolbar-select { padding: 8px 4px 8px 7px; font-size: 10.5px; }
  body.live-view .canvas-toolbar .btn-export { padding: 11px 12px; font-size: 12px; }
}

/* ── Live-view effect dial (above the LCD) ── */
.lcd-dial { display: none; }
@media (max-width: 860px) {
  body.live-view .lcd-dial {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 9px;
    padding: 5px 6px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(190,200,220,0.32));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 2px rgba(110,125,160,0.3);
  }
  html[data-theme="dark"] body.live-view .lcd-dial,
  html[data-theme="black"] body.live-view .lcd-dial {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 2px rgba(0,0,0,0.5);
  }
  .lcd-dial-name {
    flex: 1;
    text-align: center;
    font: 800 10px/1 ui-monospace, "Courier New", monospace;
    letter-spacing: 0.16em;
    color: #3d4a6c;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-theme="dark"] .lcd-dial-name,
  html[data-theme="black"] .lcd-dial-name { color: #cdd7f5; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
  .lcd-dial-btn {
    flex: 0 0 auto;
    width: 34px; height: 26px;
    border-radius: 7px; cursor: pointer; font-size: 10px; line-height: 1;
    border: 1px solid rgba(120,140,200,0.4);
    background: linear-gradient(180deg, #fdfdff, #dfe4ee);
    color: #46557d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(80,95,140,0.25);
    transition: transform 0.09s ease, filter 0.15s ease;
  }
  .lcd-dial-btn:active { transform: scale(0.9); filter: brightness(0.95); }
  html[data-theme="dark"] .lcd-dial-btn,
  html[data-theme="black"] .lcd-dial-btn {
    background: linear-gradient(180deg, #394054, #232939);
    color: #cdd7f5; border-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(0,0,0,0.5);
  }
}

/* ── Live view: hide the header, reach it through the on-screen MENU ── */
.lcd-menu, .lcd-info-btn { display: none; }

@media (max-width: 860px) {
  /* The floating header broke the device illusion; MENU replaces it. */
  body.live-view .header { display: none; }
  body.live-view .canvas-area { padding-top: calc(var(--safe-top) + 10px); }

  body.live-view .lcd-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 26px; height: 26px; margin-left: 2px;
    border-radius: 50%; cursor: pointer;
    font: 800 12px/1 Georgia, "Times New Roman", serif; font-style: italic;
    border: 1px solid rgba(120,140,200,0.45);
    background: linear-gradient(180deg, #fdfdff, #dfe4ee);
    color: #46557d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(80,95,140,0.25);
    transition: transform 0.09s ease, filter 0.15s ease;
  }
  body.live-view .lcd-info-btn:active { transform: scale(0.9); }
  body.live-view .lcd-info-btn.on { background: linear-gradient(180deg, #7b8def, #5b6fd8); color: #fff; }
  html[data-theme="dark"] body.live-view .lcd-info-btn,
  html[data-theme="black"] body.live-view .lcd-info-btn {
    background: linear-gradient(180deg, #394054, #232939);
    color: #cdd7f5; border-color: rgba(255,255,255,0.18);
  }

  /* OSD panel drawn over the picture, like a camera menu. */
  body.live-view .lcd-menu {
    display: flex;
    position: absolute; inset: 0; z-index: 6;
    flex-direction: column; gap: 2px;
    padding: 10px;
    overflow-y: auto;
    background: rgba(8, 12, 20, 0.82);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  body.live-view .lcd-menu[hidden] { display: none; }
  .lcd-menu-title {
    font: 800 9px/1 ui-monospace, "Courier New", monospace;
    letter-spacing: 0.3em; color: rgba(190,215,255,0.75);
    padding: 2px 4px 8px;
  }
  .lcd-menu-item, .lcd-menu-close {
    text-align: left; font: 600 13px/1 -apple-system, sans-serif;
    padding: 11px 12px; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07); color: #eaf0ff;
    transition: background 0.14s ease, transform 0.09s ease;
  }
  .lcd-menu-item:active, .lcd-menu-close:active { transform: scale(0.985); }
  .lcd-menu-item:hover { background: rgba(255,255,255,0.16); }
  .lcd-menu-close {
    margin-top: 8px; text-align: center; font-weight: 800;
    background: rgba(255,255,255,0.16);
  }
}

/* ── Live view: camera controls replace the editing toolbar ── */
.lcd-controls { display: none; }

@media (max-width: 860px) {
  body.live-view .canvas-toolbar { display: none; }   /* editing bar → camera bar */

  body.live-view .lcd-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    width: 100%;
    flex: 0 0 auto;
    padding: 10px 0 4px;
  }

  .lcd-shutter {
    width: 62px; height: 62px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid rgba(255,255,255,0.9);
    background: linear-gradient(180deg, #fdfdff 0%, #e3e7f0 48%, #cfd5e2 52%, #f2f4f9 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -3px 6px rgba(110,125,160,0.4),
      0 4px 12px rgba(30,40,70,0.35);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.08s ease, filter 0.12s ease;
  }
  .lcd-shutter span {
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff 0%, #e6462f 34%, #b8291a 100%);
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.35);
  }
  .lcd-shutter:active { transform: scale(0.93); filter: brightness(0.96); }

  .lcd-ctl-side {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    font-size: 15px; line-height: 1;
    border: 1px solid rgba(120,140,200,0.45);
    background: linear-gradient(180deg, #fdfdff, #dfe4ee);
    color: #46557d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(80,95,140,0.25);
    transition: transform 0.09s ease;
  }
  .lcd-ctl-side:active { transform: scale(0.9); }
  html[data-theme="dark"] .lcd-ctl-side, html[data-theme="black"] .lcd-ctl-side {
    background: linear-gradient(180deg, #394054, #232939);
    color: #cdd7f5; border-color: rgba(255,255,255,0.18);
  }

  /* Shutter blink */
  .lcd-flash {
    position: absolute; inset: 0; z-index: 7; pointer-events: none;
    background: #fff; animation: lcd-flash 0.25s ease-out forwards;
  }
  @keyframes lcd-flash { from { opacity: 0.85; } to { opacity: 0; } }

  /* Smaller knobs so the parameter row fits under the screen. */
  body.live-view .knob { width: 40px; height: 40px; }
  body.live-view .knob-rail { gap: 6px 12px; padding: 6px 4px; }
  body.live-view .knob-cap { font-size: 8px; letter-spacing: 0.05em; }
  body.live-view .knob-num { font-size: 11px; }
  body.live-view .chassis-brand { margin: 5px 0 1px; }
}

/* ── Live view: keep floating UI off the chassis controls ── */
@media (max-width: 860px) {
  /* The filmstrip is fixed at the bottom of the viewport and landed on top of
     the knobs. Captured shots are safe in the gallery and the toast confirms
     each one, so it stays out of the way until you leave live view. */
  body.live-view .filmstrip { display: none; }

  /* The per-effect lock is a niche control and was overflowing above the rail
     into the brand strip; it's still reachable from Adjustments in the menu. */
  body.live-view .knob-rail .rail-lock { display: none; }
}