* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root {
  --bg: #050506;
  --stage: #030304;
  --panel: #0c0c0f;
  --panel-2: #14141a;
  --panel-3: #1d1d25;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.11);
  --text: #f5f7fa;
  --muted: #8a8f99;
  --accent: #3ea6ff;
  --accent-soft: rgba(62, 166, 255, 0.16);
  --grad: linear-gradient(135deg, #9fdcff 0%, #3ea6ff 48%, #0a6cff 100%);
  --emboss: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
  --radius: 12px;
  /* Inspector surfaces: cards sit a hair above the panel, controls a hair above the card. */
  --card: rgba(255, 255, 255, 0.022);
  --card-border: rgba(255, 255, 255, 0.065);
  --field: rgba(255, 255, 255, 0.045);
  --field-hover: rgba(255, 255, 255, 0.075);
  --label: #a3a8b3;
  --eyebrow: #6c717c;
  --ring: 0 0 0 2px rgba(62, 166, 255, 0.55);
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
#app {
  display: grid;
  grid-template: "topbar topbar" 54px "panel stage" 1fr / var(--panel-w, 400px) 1fr;
  height: 100vh;
}
body.panel-collapsed #app { --panel-w: 86px; }
svg.ph { width: 18px; height: 18px; display: block; flex: none; }
/* One focus language for every control — keyboard only, never on click. */
:is(button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(62, 166, 255, 0.7);
  outline-offset: 2px;
}
body.panel-collapsed #panel-content { display: none; }

/* ---------- top bar ---------- */
#topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: rgba(10, 10, 13, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 15px; letter-spacing: -0.015em; display: flex; align-items: center; gap: 9px; }
.brand .logo { width: 25px; height: 25px; filter: drop-shadow(0 2px 6px rgba(62, 166, 255, 0.35)); }
.brand span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.topbar-mid { flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; }
#mode-seg button { padding: 6px 14px; font-size: 12.5px; }
.topbar-actions { display: flex; gap: 8px; }

/* ---------- stage ---------- */
#stage-wrap {
  grid-area: stage;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: radial-gradient(120% 100% at 50% 0%, #0c0c0f 0%, var(--stage) 70%);
}
#stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 0;
  padding: 24px;
  /* #fx-front blends with the layers below it; isolate keeps that blending
     inside the stage instead of reaching the page behind it. */
  isolation: isolate;
}
#viewport {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.65);
  max-width: 100%; max-height: 100%;
  position: relative;
  z-index: 1;
  /* Nothing paints here. The WebGL canvas must stay fully transparent or it
     covers #bg-canvas — which is where the background and every backdrop
     effect actually live. */
  background: transparent;
}
#bg-canvas {
  position: absolute;
  border-radius: 14px;
  pointer-events: none;
  z-index: 0;
  /* The alpha checkerboard sits UNDER the background paint, so a transparent
     background shows it and an opaque one covers it — no toggling required. */
  background: repeating-conic-gradient(#212127 0% 25%, #17171b 0% 50%) 0 0 / 20px 20px;
}
/* Light added on top of the render. plus-lighter is the same operator the
   exporter uses (canvas `lighter`), so the preview is not an approximation. */
#fx-front {
  position: absolute;
  border-radius: 14px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: plus-lighter;
}
#drop-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #c9c9d1; font-size: 12px; font-weight: 500;
  /* Opaque rather than blurred: it sits over the live canvas, and a
     backdrop blur there is re-rendered every frame the phone moves. */
  background: rgba(24, 24, 28, 0.94);
  border: 1px solid var(--border-strong);
  padding: 9px 18px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  /* Named rather than `all`: the style engine diffs every animatable property
     on `all`, and these selectors match hundreds of freshly-built grid cards. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
#drop-hint:hover {
  border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}
#stage.dragover::after {
  content: "Drop to set the screen";
  position: absolute; inset: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--accent); border-radius: 18px;
  background: rgba(10, 132, 255, 0.08);
  backdrop-filter: blur(2px);
  font-size: 17px; font-weight: 600; color: var(--accent);
  pointer-events: none;
}

/* ---------- timeline ---------- */
#timeline {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 16px;
  background: rgba(18, 18, 21, 0.95);
  border-top: 1px solid var(--border);
}
.tl-transport { display: flex; gap: 6px; }
.rec-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff453a; display: block;
  box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.5);
}
#record-btn.active .rec-dot { animation: rec-pulse 1.1s ease-out infinite; }
#record-btn.active { background: rgba(255, 69, 58, 0.16); }
@keyframes rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(255, 69, 58, 0); }
}
/* Recording frames the stage in red so the state is unmissable. */
body.recording #viewport { box-shadow: 0 0 0 2px rgba(255, 69, 58, 0.85), 0 24px 80px rgba(0, 0, 0, 0.65); }
#tl-area { flex: 1; min-width: 0; }
/* Studio mode: controls sit above a full-width track. (Video mode keeps the
   original single-row flex layout.) */
body:not(.video-mode) #timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "transport actions label"
    "track track track";
  align-items: center;
  row-gap: 10px;
}
body:not(.video-mode) .tl-transport { grid-area: transport; }
body:not(.video-mode) .tl-actions { grid-area: actions; flex-wrap: wrap; }
body:not(.video-mode) #time-label { grid-area: label; }
body:not(.video-mode) #tl-area {
  grid-area: track;
  /* ⌘+scroll zoom widens ruler+track beyond the viewport; scroll to pan.
     Top padding (cancelled by the margin) keeps the drag tooltip visible
     despite the scroll container's overflow clipping. */
  overflow-x: auto;
  padding-top: 36px;
  margin-top: -36px;
  scrollbar-width: thin;
}
/* The negative margin above pulls an invisible strip of #tl-area over the
   transport/actions row — keep the buttons on top or they swallow clicks
   (the "can't click play" bug). */
body:not(.video-mode) .tl-transport,
body:not(.video-mode) .tl-actions,
body:not(.video-mode) #time-label { position: relative; z-index: 2; }
#tl-ruler {
  position: relative; height: 15px; margin-bottom: 3px;
}
/* Studio text layer lane — CapCut-style bars under the camera track. */
#tl-texts {
  position: relative; height: 22px; margin-top: 5px;
  border-radius: 6px;
}
#tl-texts:empty { display: none; }
.tl-textbar {
  position: absolute; top: 0; height: 22px;
  display: flex; align-items: center;
  padding: 0 8px; box-sizing: border-box;
  border-radius: 6px;
  background: rgba(62, 166, 255, 0.16);
  border: 1px solid rgba(62, 166, 255, 0.4);
  font-size: 10.5px; font-weight: 500; color: #cfe6ff;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: grab; user-select: none;
}
.tl-textbar:hover { background: rgba(62, 166, 255, 0.24); }
.tl-textbar.active { border-color: var(--accent); background: rgba(62, 166, 255, 0.3); color: #fff; }
.tl-textbar.dragging { cursor: grabbing; }
.tl-textbar .bar-resize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 9px;
  cursor: ew-resize;
  border-right: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 6px 6px 0;
}
.tl-textbar.active .bar-resize { border-right-color: rgba(255, 255, 255, 0.7); }
/* Playhead spans however many text rows exist (set via --texts-h in JS). */
#tl-track.has-texts #playhead { bottom: calc(-1 * var(--texts-h, 27px)); }

/* Studio timeline resize grip — a thin handle across the top edge. */
#tl-vgrip { display: none; }
body:not(.video-mode) #tl-vgrip {
  display: block;
  position: absolute; top: -2px; left: 0; right: 0; height: 10px;
  cursor: ns-resize; z-index: 4;
}
#tl-vgrip::after {
  content: ''; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin: 3px auto 0;
}
#tl-vgrip:hover::after, #tl-vgrip:active::after { background: rgba(255, 255, 255, 0.35); }
.tl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  color: #5b5b63; font-size: 10px; font-variant-numeric: tabular-nums;
}
#tl-track {
  position: relative; height: 32px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: crosshair;
}
#playhead {
  position: absolute; top: -17px; bottom: 0; width: 2px;
  background: var(--accent); border-radius: 1px;
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 2;
}
#playhead::before {
  content: ""; position: absolute; top: -1px; left: -4.5px;
  width: 11px; height: 11px;
  background: var(--accent);
  border-radius: 3px;
  transform: rotate(45deg);
}
.tl-key {
  position: absolute; top: 50%; width: 11px; height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #e8e8ee; border-radius: 2.5px;
  cursor: grab; z-index: 3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: background 0.1s;
}
.tl-key:hover { background: #fff; transform: translate(-50%, -50%) rotate(45deg) scale(1.15); }
.tl-key.selected {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* A key that just absorbed a pose change pulses so the auto-update is visible. */
.tl-key.flash { animation: key-flash 0.55s ease-out; }
@keyframes key-flash {
  0% { background: var(--accent); box-shadow: 0 0 0 7px rgba(62, 166, 255, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(62, 166, 255, 0); }
}
#tl-ruler { cursor: col-resize; }
.tl-actions { display: flex; gap: 6px; align-items: center; }
.tl-actions .btn.small { flex: none; }
.tl-actions .autokey { margin-top: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tl-actions .autokey:has(input:checked) { color: var(--accent); }
.tl-seg {
  position: absolute; top: 0; bottom: 0;
  background: rgba(10, 132, 255, 0.10);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}
.tl-tip {
  position: absolute; top: -34px; transform: translateX(-50%);
  background: var(--panel-3); color: var(--text);
  border: 1px solid var(--border-strong);
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 3px 7px; border-radius: 6px;
  pointer-events: none; z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#time-label { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; font-size: 12px; }

/* ---------- panel ---------- */
#panel {
  grid-area: panel;
  margin: 10px 0 10px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  overflow: hidden;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 30px rgba(0, 0, 0, 0.45);
}
#tab-rail {
  flex: none; width: 68px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.012);
}
body.panel-collapsed #tab-rail { border-right: none; }
.tab-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0 8px; border-radius: 10px;
  color: #7a7f8a; font-family: inherit; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn svg.ph { width: 20px; height: 20px; transition: color 0.15s ease, transform 0.15s var(--ease); }
.tab-btn span { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
.tab-btn:hover { color: #e4e6ea; background: rgba(255, 255, 255, 0.04); }
.tab-btn:active svg.ph { transform: scale(0.92); }
.tab-btn.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(62, 166, 255, 0.14), rgba(62, 166, 255, 0.07));
  box-shadow: inset 0 0 0 1px rgba(62, 166, 255, 0.16);
}
.tab-btn.active svg.ph { color: #7cc4ff; }
/* Active indicator — a short gradient bar hugging the rail's left edge. */
.tab-btn::before {
  content: ""; position: absolute;
  left: -8px; top: 50%; width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  transform: translateY(-50%);
  transition: height 0.2s var(--ease);
}
.tab-btn.active::before { height: 22px; }
.tab-btn[hidden] { display: none; }
#panel-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 2px 12px 20px;
}
#panel-content::-webkit-scrollbar { width: 8px; }
#panel-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; border: 2px solid var(--panel); }
#panel-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
#panel-content::-webkit-scrollbar-track { background: transparent; }
/* Each group is a quiet card; groups that already hold their own cards
   (Video / Text / Effects) stay flat so cards never nest. */
#panel section {
  margin-top: 10px;
  padding: 14px 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
#panel section:has(.vcard) { background: none; border-color: transparent; padding: 10px 2px 8px; }
#panel section.tab-hidden { display: none !important; }
#panel h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--eyebrow); margin-bottom: 12px; font-weight: 600;
  line-height: 1.2;
}
.row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
/* Inspector "property rows": label on the left, control on the right. */
#panel label.inline:has(> select, > input[type=color]) {
  flex: 1 1 100%;
  justify-content: space-between;
  min-height: 30px;
}
#panel label.inline:has(> select) select { min-width: 132px; max-width: 62%; }
#panel label.check {
  flex: 1 1 100%;
  flex-direction: row-reverse; justify-content: space-between;
  min-height: 30px; margin-top: 4px;
}
#panel .row:has(> label.check) { row-gap: 2px; }
.hint { color: #6a6a72; font-size: 12px; margin-top: 10px; line-height: 1.5; }

/* Local media library: compact thumbnails are the interaction, not decoration. */
.media-library-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; color: var(--muted); font-size: 12px; font-weight: 600;
}
#media-library-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.media-library {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-top: 8px;
}
.media-empty {
  grid-column: 1 / -1; padding: 10px 0 2px;
  color: #5f5f67; font-size: 11px;
}
.media-item {
  position: relative; min-width: 0; aspect-ratio: 0.78;
  border: 1px solid var(--border); border-radius: 7px;
  overflow: hidden; background: var(--panel-2); cursor: grab;
  transition: border-color .15s ease, transform .15s ease;
}
.media-item:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.media-item.dragging { cursor: grabbing; opacity: .58; transform: scale(.96); }
.media-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.media-thumb { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-hover-video { position: absolute; inset: 0; }
.media-fallback {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px;
}
.media-type {
  position: absolute; left: 5px; bottom: 5px; padding: 1px 4px;
  border-radius: 3px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 9px; font-weight: 600; text-transform: uppercase;
}
.media-remove {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.68); color: #fff;
  cursor: pointer; font: 15px/16px inherit; opacity: 0; transition: opacity .15s ease;
}
.media-item:hover .media-remove, .media-remove:focus-visible { opacity: 1; }

/* iOS-style segmented control */
.seg {
  display: flex; background: rgba(0, 0, 0, 0.28);
  border-radius: 10px; padding: 3px; gap: 2px;
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.seg button {
  flex: 1; padding: 7px 4px; border: none; border-radius: 7px;
  background: transparent; color: var(--muted);
  cursor: pointer; font: inherit; font-weight: 500; font-size: 12.5px;
  line-height: 1.25;
  /* Named rather than `all`: the style engine diffs every animatable property
     on `all`, and these selectors match hundreds of freshly-built grid cards. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.seg button:hover { color: var(--text); }
.seg button.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) var(--panel-3);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
/* Panel segmented controls: equal columns and one thumb that slides to the
   active option. CSS-only — :has() reads the count and the active index. */
#panel .seg:not(.style-seg) {
  position: relative; isolation: isolate;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  --n: 1; --i: 0;
}
#panel .seg:not(.style-seg) > button {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#panel .seg:not(.style-seg) > button.active { background: transparent; box-shadow: none; }
#panel .seg:not(.style-seg)::before {
  content: ""; position: absolute; z-index: -1;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px - (var(--n) - 1) * 2px) / var(--n));
  transform: translateX(calc(var(--i) * (100% + 2px)));
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)) var(--panel-3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.22s var(--ease), width 0.22s var(--ease);
}
#panel .seg:not(.style-seg):not(:has(> button.active))::before { opacity: 0; }
#panel .seg:has(> button:nth-child(2):last-child) { --n: 2; }
#panel .seg:has(> button:nth-child(3):last-child) { --n: 3; }
#panel .seg:has(> button:nth-child(4):last-child) { --n: 4; }
#panel .seg:has(> button:nth-child(5):last-child) { --n: 5; }
#panel .seg:has(> button:nth-child(6):last-child) { --n: 6; }
#panel .seg:has(> button.active:nth-child(2)) { --i: 1; }
#panel .seg:has(> button.active:nth-child(3)) { --i: 2; }
#panel .seg:has(> button.active:nth-child(4)) { --i: 3; }
#panel .seg:has(> button.active:nth-child(5)) { --i: 4; }
#panel .seg:has(> button.active:nth-child(6)) { --i: 5; }
/* Three phone names in ~90px columns — a touch smaller so none truncate. */
/* Three phones: model name leads, "iPhone" sits above it as a quiet caption. */
#device-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
#device-seg button small {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--eyebrow);
  transition: color 0.15s ease;
}
#device-seg button.active small { color: #7cc4ff; }

/* swatches */
.swatch-row { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s var(--ease), box-shadow 0.15s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch:active { transform: scale(0.95); }
/* Ring-on-select: a gap in the card colour, then the accent ring. */
.swatch.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 0 0 2px #121216, 0 0 0 3.5px var(--accent),
              0 0 12px rgba(62, 166, 255, 0.35);
}
.swatch:focus-visible { outline-offset: 4px; }
.swatch.transparent {
  background: repeating-conic-gradient(#4a4a52 0% 25%, #2c2c32 0% 50%) 0 0 / 10px 10px !important;
}
.swatch.gradient-sw { border-radius: 8px; }

/* sliders */
.slider-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 10px; margin-top: 8px; min-height: 26px; }
.slider-row span { color: var(--label); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: #d5d8de; }
.slider-row input[type=range] { min-width: 0; width: 100%; }
/* Thin track, accent fill up to the thumb. --fill is kept in sync by the small
   script in index.html (works for drags and for values set from code). */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 18px; background: transparent; outline: none; cursor: pointer;
  --f0: 0%; --f1: 50%;
}
/* Fill runs from --f0 to --f1: from the left edge, or from the centre on
   ranges that straddle zero (Tilt, Spin, Move X…). */
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background:
    linear-gradient(90deg, transparent var(--f0), var(--accent) var(--f0), var(--accent) var(--f1), transparent var(--f1)),
    rgba(255, 255, 255, 0.1);
}
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  margin-top: -5px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s var(--ease), box-shadow 0.15s ease;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(62, 166, 255, 0.2);
}
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), var(--ring); }

/* buttons & inputs */
.btn {
  padding: 9px 15px; border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) var(--panel-2);
  color: var(--text);
  cursor: pointer; font: inherit; font-weight: 500; font-size: 13px;
  box-shadow: var(--emboss);
  /* Named rather than `all`: the style engine diffs every animatable property
     on `all`, and these selectors match hundreds of freshly-built grid cards. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background-color: var(--panel-3); border-color: rgba(255, 255, 255, 0.18); }
.btn:active { transform: scale(0.97); }
/* In the panel, buttons read as quiet fills rather than raised slabs. */
#panel .btn:not(.primary), #timeline .btn:not(.primary) {
  background: var(--field);
  border-color: var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #e6e8ec;
}
#timeline .btn:not(.primary):hover, #panel .btn:not(.primary):hover { background: var(--field-hover); border-color: rgba(255, 255, 255, 0.12); color: #fff; }
#panel .btn.danger { color: #ff8a80; }
#panel .btn.danger:hover { background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.4); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn.primary {
  background: var(--grad); border-color: transparent; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 40, 90, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 14px rgba(62, 166, 255, 0.35);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 7px 11px; font-size: 12px; flex: 1; border-radius: 8px; line-height: 1.3; }
.btn.wide { width: 100%; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) var(--panel-2);
  color: var(--text);
  cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--emboss);
  /* Named rather than `all`: the style engine diffs every animatable property
     on `all`, and these selectors match hundreds of freshly-built grid cards. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.icon-btn svg.ph { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--panel-3); border-color: var(--accent); }
.icon-btn:active { transform: scale(0.95); }

select {
  -webkit-appearance: none; appearance: none;
  background: var(--panel-2) url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2386868e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 28px 6px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
select:hover { background-color: var(--panel-3); border-color: rgba(255, 255, 255, 0.16); }
#panel select { background-color: #17171d; border-color: var(--card-border); }
#panel select:hover { background-color: #1e1e25; border-color: rgba(255, 255, 255, 0.12); }
input[type=color] {
  -webkit-appearance: none; appearance: none;
  background: var(--field);
  border: 1px solid var(--card-border); border-radius: 8px;
  padding: 3px; width: 44px; height: 28px; cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
input[type=number] {
  background: var(--field); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 8px;
  padding: 5px 8px; font: inherit; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
input[type=number]:hover { border-color: rgba(255, 255, 255, 0.14); }
input[type=number]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Every checkbox is an iOS-style switch. */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 30px; height: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
input[type=checkbox]::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s var(--ease);
}
input[type=checkbox]:hover { background: rgba(255, 255, 255, 0.18); }
input[type=checkbox]:checked {
  background: linear-gradient(135deg, #6cbcff, var(--accent) 55%, #1a7dff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(62, 166, 255, 0.25);
}
input[type=checkbox]:checked::before { transform: translateX(12px); }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--label); font-size: 12.5px; }
label.check { display: flex; align-items: center; gap: 10px; color: #e6e8ec; margin-top: 10px; cursor: pointer; font-size: 12.5px; }

/* preset grid */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* Section header inside a 2-up preset grid (Signature / Cinematic / Dramatic) */
.preset-group-label {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eyebrow);
}
.preset-group-label:first-child { margin-top: 0; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.tpl-group {
  grid-column: 1 / -1; margin: 8px 2px 1px;
  color: var(--eyebrow); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.tpl-group:first-child { margin-top: 0; }
.tpl-card.active {
  border-color: rgba(62, 166, 255, 0.6);
  background: linear-gradient(180deg, rgba(62, 166, 255, 0.18), rgba(62, 166, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.25), 0 2px 12px rgba(62, 166, 255, 0.14);
}

/* video builder: pick media → pick style → create */
.builder-media {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-bottom: 10px;
}
.bm-item {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--border-strong); cursor: pointer; padding: 0;
  background: var(--panel-2);
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.bm-item:hover { border-color: rgba(255, 255, 255, 0.3); }
.bm-item:active { transform: scale(0.97); }
.bm-item.sel { border-color: var(--accent); }
.bm-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-order {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.bm-empty { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; padding: 8px 0; }
.choreo-badge {
  flex: 1; display: inline-flex; align-items: center; gap: 6px;
  color: #7db8ff; font-size: 12.5px; font-weight: 600;
  background: rgba(10, 132, 255, 0.1);
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 8px; padding: 7px 10px;
}
#video-builder input.text-input { margin-top: 8px; }
.btn.big { padding: 13px 16px; font-size: 14px; font-weight: 600; border-radius: 12px; margin-top: 12px; }
#builder-close { margin-top: 8px; }
.tpl-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--field);
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 10px 12px 9px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tpl-card:hover { border-color: rgba(255, 255, 255, 0.14); background: var(--field-hover); }
.tpl-card b { display: block; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.tpl-card span { display: block; color: var(--muted); font-size: 11px; margin-top: 2.5px; }
.preset-grid button {
  padding: 9px 6px; border-radius: 9px;
  border: 1px solid var(--card-border);
  background: var(--field); color: #d5d8de;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  /* Named rather than `all`: the style engine diffs every animatable property
     on `all`, and these selectors match hundreds of freshly-built grid cards. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.preset-grid button:hover {
  background: var(--field-hover); color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.preset-grid button:active { transform: scale(0.97); }
.preset-grid button.active {
  border-color: rgba(62, 166, 255, 0.6);
  background: linear-gradient(180deg, rgba(62, 166, 255, 0.18), rgba(62, 166, 255, 0.08));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.25), 0 2px 10px rgba(62, 166, 255, 0.12);
}

/* ---------- video mode ---------- */
#overlay {
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
}
#composite-preview {
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
  z-index: 3;
}
/* Text and editing chrome sit above every effect — the message is never
   something the eye candy gets to cover. */
#overlay { z-index: 4; }
#audio-tools {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 8px 6px;
  flex-wrap: wrap;
}
body.video-mode #audio-tools { display: flex; }
#audio-tools .btn { white-space: nowrap; }
#seq-bar { display: none; }
body.video-mode #seq-bar { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
body.video-mode #tl-area,
body.video-mode .tl-actions,
body.video-mode #anim-section,
body.video-mode #send-to-video { display: none; }

#seq-scrub {
  flex: none;
  width: 140px;
  accent-color: var(--accent);
}
#scene-strip {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  min-width: 0;
}
.scene-card {
  position: relative;
  flex: none;
  width: 86px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.scene-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.scene-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scene-card.dragging { opacity: .55; transform: scale(.96); }
.scene-card.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.scene-card .scene-thumb {
  width: 100%; height: 40px; object-fit: cover; display: block;
  background: #000;
}
.scene-card .scene-thumb-fallback {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px; background: var(--panel-3);
}
.scene-card .scene-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 6px 4px;
  font-size: 10px; color: var(--muted);
  white-space: nowrap;
}
.scene-card .scene-meta b { color: var(--text); font-weight: 600; }
.scene-card.playing-now::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.55);
  pointer-events: none;
}
#add-scene-tile {
  flex: none; width: 40px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
#add-scene-tile:hover { color: var(--accent); border-color: var(--accent); }

.template-row { display: flex; gap: 6px; }
.template-row .btn { flex: 1; padding: 6px 4px; font-size: 11.5px; }

#scene-editor {
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.scene-editor-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; margin-bottom: 4px;
}
.hint-inline { color: var(--muted); font-size: 10.5px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-label {
  display: block;
  margin: 8px 0 4px;
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.text-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: inherit;
}
.text-input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--accent-soft); }

/* ---------- capcut-style sequence timeline ---------- */
#stl {
  flex: 1;
  min-width: 0;
  padding: 2px 0 4px;
  user-select: none;
  overflow-x: auto;
  overflow-y: hidden;
}
#stl::-webkit-scrollbar { height: 7px; }
#stl::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
#stl-content { position: relative; width: 100%; }
#stl-ruler {
  position: relative;
  height: 16px;
  font-size: 9.5px;
  color: var(--muted);
}
.stl-tick { position: absolute; transform: translateX(-50%); top: 0; }
.stl-beat {
  position: absolute; top: 12px; width: 1px; height: 4px;
  background: rgba(255, 180, 60, 0.85); transform: translateX(-50%);
  pointer-events: none;
}
.stl-track { position: relative; border-radius: 8px; }
#stl-scenes { height: var(--stl-scenes-h, 52px); background: var(--panel-2); border: 1px solid var(--border); }
#stl-texts { height: var(--stl-texts-h, 26px); margin-top: 4px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); }
#stl-audio { height: 22px; margin-top: 4px; background: rgba(255,180,60,0.06); border: 1px solid var(--border); }
.stl-audiobar {
  position: absolute; top: 2px; bottom: 2px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,170,40,0.55), rgba(255,120,40,0.45));
  border: 1px solid rgba(255,180,60,0.5);
  font-size: 10px; line-height: 16px; padding: 0 8px;
  color: #fff; white-space: nowrap; overflow: hidden; cursor: grab;
  user-select: none;
}
.stl-block {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--panel-3) center/cover no-repeat;
  cursor: grab;
  overflow: hidden;
  box-shadow: inset 0 0 0 999px rgba(10,10,14,0.28);
  transition: box-shadow .12s;
}
.stl-block.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 999px rgba(10,10,14,0.12), 0 0 0 1px var(--accent);
}
.stl-label {
  position: absolute; left: 6px; top: 3px;
  font-size: 9.5px; font-weight: 600;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}
.stl-badge {
  position: absolute; right: 10px; top: 3px;
  font-size: 9px; color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}
.stl-resize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 11px;
  z-index: 2;
  cursor: ew-resize;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22));
  border-radius: 0 7px 7px 0;
}
.stl-key {
  position: absolute; bottom: 2px;
  width: 13px; height: 13px;
  z-index: 3;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent);
  border: 1px solid #fff3;
  border-radius: 2px;
  cursor: ew-resize;
}
.stl-textbar {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: 5px;
  background: rgba(10, 132, 255, 0.28);
  border: 1px solid rgba(10, 132, 255, 0.45);
  color: #cfe6ff;
  font-size: 10px; line-height: var(--stl-texts-lh, 20px);
  padding: 0 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: grab;
}
.stl-textbar.active { background: rgba(10,132,255,0.5); color: #fff; border-color: var(--accent); }
#stl-playhead {
  position: absolute; top: 12px; bottom: 0;
  width: 3px; margin-left: -1px;
  cursor: ew-resize;
  background: #ff375f;
  border-radius: 1px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255, 55, 95, 0.6);
}
#stl-playhead::before {
  content: '';
  position: absolute; top: -5px; left: -4px;
  border: 5px solid transparent;
  border-top-color: #ff375f;
}

/* text layer list */
.text-el-list { display: flex; flex-direction: column; gap: 5px; }
.text-el-list:empty { display: none; }
.text-layer {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel-2, var(--panel-3));
  cursor: pointer;
  text-align: left;
}
.text-layer:hover { border-color: rgba(255, 255, 255, 0.2); }
.text-layer.active {
  border-color: var(--accent);
  background: rgba(62, 166, 255, 0.1);
}
.text-layer .tl-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.text-layer .tl-meta {
  flex: none;
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
}
.text-layer .tl-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* text editor layout */
textarea.text-input { resize: vertical; min-height: 44px; }
#text-editor { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--card-border); }
.t-label {
  margin-top: 18px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--eyebrow);
}
.t-label + .seg, .t-label + .swatch-row, .t-label + .anim-row, .t-label + .slider-row { margin-top: 7px; }
.font-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: stretch; margin-top: 10px;
}
.font-row select { min-width: 0; }
.font-row .btn.small { width: 34px; padding: 6px 0; }
.style-seg { display: flex; padding: 3px; gap: 2px; }
.style-seg button { width: 32px; flex: none; padding: 6px 0; }
.style-seg button.on {
  color: var(--accent);
  background: rgba(10, 132, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(62, 166, 255, 0.45);
}
.anim-row { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.anim-row select { flex: 1 1 100%; min-width: 0; }
.anim-row .btn { flex: none; white-space: nowrap; margin-left: auto; }
/* Duration slider + an escape hatch back to the preset's own timing. */
/* The range input's intrinsic width would otherwise refuse to shrink and push
 * the Auto button out of the panel. */
.slider-row.dur-row { grid-template-columns: 64px minmax(0, 1fr) 40px auto; gap: 8px; }
.slider-row.dur-row input[type="range"] { min-width: 0; }
.dur-row b.auto { color: var(--muted); }
.btn.tiny {
  flex: none; padding: 4px 8px; font-size: 10.5px; border-radius: 7px;
  letter-spacing: 0.03em; opacity: 0.75;
}
.btn.tiny:hover { opacity: 1; }
.btn.tiny.on { color: var(--accent); border-color: rgba(62, 166, 255, 0.45); opacity: 1; }
.editor-actions { justify-content: space-between; margin-top: 16px; }
.editor-actions .btn { flex: none; }
/* ---------- effects panel ---------- */
.fx-stack { display: flex; flex-direction: column; gap: 6px; }
.fx-empty, .fx-hint {
  margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.fx-hint { margin: 6px 0 10px; }
.fx-warn {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: 12px;
  color: #ffcf8a; background: rgba(255, 159, 10, 0.1);
  border: 1px solid rgba(255, 159, 10, 0.3);
}
.fx-layer {
  display: grid; grid-template-columns: 34px 1fr auto auto;
  align-items: center; gap: 9px;
  padding: 6px 8px 6px 6px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease;
}
.fx-layer:hover { border-color: var(--border-strong); }
.fx-layer.active { border-color: var(--accent); background: rgba(10, 132, 255, 0.09); }
.fx-layer.off { opacity: 0.45; }
.fx-layer .fx-thumb { width: 34px; height: 24px; border-radius: 5px; background-size: cover; background-position: center; }
.fx-layer .fx-name { font-size: 12.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-layer .fx-slot { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.fx-layer .fx-eye {
  width: 24px; height: 24px; flex: none; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer; font-family: inherit;
}
.fx-layer .fx-eye.on { color: var(--accent); border-color: rgba(62, 166, 255, 0.45); }

#fx-library { display: flex; flex-direction: column; gap: 12px; margin-top: 7px; }
.fx-group-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px;
}
.fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fx-card {
  padding: 0; overflow: hidden; border-radius: 10px; cursor: pointer;
  background: #0a0a0e; border: 1px solid var(--border); color: var(--text);
  font-family: inherit; text-align: left; transition: border-color 0.14s ease, transform 0.14s ease;
}
.fx-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.fx-card { position: relative; }
.fx-card > button.fx-card-img { border: none; padding: 0; cursor: pointer; }
.fx-card > span { cursor: pointer; }
/* Add only appears on the card you are hovering or auditioning, so the grid stays
   a wall of pictures rather than a wall of buttons. */
.fx-add {
  position: absolute; right: 6px; bottom: 6px;
  padding: 3px 9px; border-radius: 7px;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  color: #fff; background: rgba(10, 132, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer; opacity: 0; transform: translateY(3px);
  transition: opacity 0.13s ease, transform 0.13s ease, background 0.13s ease;
  pointer-events: none;
}
.fx-card:hover .fx-add, .fx-card.previewing .fx-add { opacity: 1; transform: none; pointer-events: auto; }
.fx-add:hover { background: #0a84ff; }
.fx-card.previewing { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.32); }
.fx-card .fx-card-img { display: block; width: 100%; aspect-ratio: 3 / 2; background: #0a0a0e; background-size: cover; background-position: center; }
.fx-card span { display: block; padding: 6px 8px 7px; font-size: 11.5px; font-weight: 500; }
.fx-pal-row { flex-wrap: wrap; }
.fx-pal {
  width: 26px; height: 26px; border-radius: 7px; flex: none; cursor: pointer;
  border: 1px solid var(--border-strong); padding: 0;
}
.fx-pal.active { box-shadow: 0 0 0 2px var(--accent); border-color: transparent; }

/* A discrete effect parameter — same row rhythm as .slider-row, segmented
   control in place of the range. */
.fx-seg-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  align-items: center; gap: 10px; margin-top: 10px;
}
.fx-seg-row > span { font-size: 12.5px; color: var(--label); }
.fx-seg { border-radius: 9px; }

/* ---------- mockups ---------- */
/* No 3D in this mode. The canvas stays in the layout (it still hit-tests text
   drags) but nothing is drawn into it. */
body.mockup-mode #viewport { box-shadow: none; }
body.mockup-mode #timeline .tl-actions,
body.mockup-mode #seq-bar { display: none; }
.mk-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.35); }
/* Plates are portrait, so a 3:2 card would crop them to a band of palm. */
.mk-card .fx-card-img { aspect-ratio: 3 / 4; background-size: cover; background-position: center top; }
.fx-seg button { padding: 6px 4px; font-size: 12px; }

.btn.danger { color: #ff7b72; border-color: rgba(255, 69, 58, 0.35); }
.btn.danger:hover { background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.55); }

/* color swatches */
.swatch-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tswatch {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  padding: 0;
  background: none;
}
.tswatch:hover { border-color: rgba(255, 255, 255, 0.45); }
.tswatch.active { box-shadow: 0 0 0 2px var(--bg, #050506), 0 0 0 4px var(--accent); }
.tswatch.auto {
  background: linear-gradient(135deg, #ffffff 0 50%, #17171c 50% 100%);
  position: relative;
}
#text-custom-color {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  padding: 0; background: none; cursor: pointer;
}
#text-custom-color::-webkit-color-swatch-wrapper { padding: 2px; }
#text-custom-color::-webkit-color-swatch { border: none; border-radius: 50%; }
#text-custom-color.active { box-shadow: 0 0 0 2px var(--bg, #050506), 0 0 0 4px var(--accent); }

/* ---------- timeline expansion + panel cards ---------- */
body.tl-expanded {
  --stl-scenes-h: 84px;
  --stl-texts-h: 34px;
  --stl-texts-lh: 28px;
}
body.tl-expanded #stl-expand { transform: rotate(180deg); }
#stl-expand { transition: transform .2s; }

.vcard {
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.vcard-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 13px; letter-spacing: -0.005em;
  margin-bottom: 10px; min-height: 26px;
}
.vcard-actions { display: flex; gap: 6px; }
.vcard-actions .btn.small { flex: none; padding: 5px 9px; }
.vcard .hint { margin-top: 6px; }

/* visual framing picker */
.framing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.framing-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10.5px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.framing-grid button:hover { color: var(--text); border-color: var(--border-strong); }
.framing-grid button.active { border-color: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent); }
.mini-stage {
  position: relative;
  width: 46px; height: 30px;
  border-radius: 5px;
  background: #0e0e12;
  border: 1px solid var(--border);
  overflow: hidden;
}
.mini-phone {
  position: absolute;
  width: 11px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c8ccd4, #9aa0ab);
  border: 1px solid #dfe3ea;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.mini-text {
  position: absolute;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.45);
}
.mini-phone.center { top: 62%; }
.mini-phone.hero { top: 62%; transform: translate(-50%, -50%) rotate(-8deg); }
.mini-phone.left { left: 32%; top: 62%; transform: translate(-50%, -50%) rotate(6deg); }
.mini-phone.right { left: 68%; top: 62%; transform: translate(-50%, -50%) rotate(-6deg); }
.mini-phone.close-bottom { width: 20px; height: 40px; top: 18%; }
.mini-phone.close-top { width: 20px; height: 40px; top: 92%; }

/* ---------- timeline quick actions + resize grip ---------- */
#seq-quick { display: flex; flex-direction: column; gap: 4px; flex: none; }
#seq-quick .icon-btn { width: 26px; height: 26px; font-size: 12px; }
#tl-grip {
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 9px;
  cursor: ns-resize;
  z-index: 5;
}
#tl-grip::after {
  content: '';
  position: absolute;
  left: 50%; top: 3px;
  width: 44px; height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(255,255,255,0.14);
  transition: background .15s;
}
#tl-grip:hover::after { background: var(--accent); }
body:not(.video-mode) #tl-grip, body:not(.video-mode) #seq-quick { display: none; }

.motion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.motion-grid button {
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10.5px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.motion-grid button:hover { color: var(--text); border-color: var(--border-strong); }
.motion-grid button.active { border-color: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent); }

/* Effect photo strip (Polaroid prints) */
.fx-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.fx-photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: 6px;
  background: #0a0a0e center / cover no-repeat;
  border: 1px solid var(--border);
}
.fx-photo button {
  position: absolute; top: 2px; right: 2px; width: 17px; height: 17px;
  border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(0, 0, 0, 0.68); color: #fff; font: inherit; font-size: 12px; line-height: 15px;
}
.fx-photo button:hover { background: rgba(255, 69, 58, 0.9); }

/* ---------- background media ---------- */
.bg-media-row { margin-top: 10px; }
#bg-media-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 8px 8px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 11px;
}
#bg-media-thumb {
  width: 54px; height: 36px; flex: none;
  object-fit: cover; border-radius: 7px;
  background: #0d0d10;
}
.bg-media-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bg-media-meta span {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-media-meta .muted { color: var(--muted); font-size: 10.5px; }
#bg-media-clear { width: 30px; height: 30px; border-radius: 9px; flex: none; }
#bg-media-clear svg.ph { width: 14px; height: 14px; }
#bg-media-controls { margin-top: 4px; }
.inline.wide { flex: 1; min-width: 0; }
.inline.wide select { flex: 1; min-width: 0; }
/* Transparent-format names say where the file is going ("iPhone, Keynote &
   Final Cut"), which does not fit beside a label — give them the full width. */
#alpha-format-row { margin-top: 12px; }
#alpha-format-row .inline {
  flex-direction: column; align-items: stretch; gap: 5px; width: 100%;
}

/* ---------- touch ----------
 * The stage owns every gesture over it: without this the browser claims
 * pinch and drag for page zoom and OrbitControls never sees them. */
#stage canvas { touch-action: none; }
#tl-track, #tl-ruler, #stl, #stl-content { touch-action: none; }
.btn, .icon-btn, .tab-btn, .swatch { touch-action: manipulation; }
@media (pointer: coarse) {
  body { -webkit-touch-callout: none; overscroll-behavior: none; }
  /* Fingers need a real target — 36px is the smallest that reliably hits. */
  input[type="range"] { height: 28px; }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  input[type=checkbox] { width: 38px; height: 22px; }
  input[type=checkbox]::before { width: 18px; height: 18px; }
  input[type=checkbox]:checked::before { transform: translateX(16px); }
  .icon-btn { width: 40px; height: 40px; }
  .btn { padding: 11px 16px; }
  .btn.small { padding: 9px 12px; }
  /* Hover styling sticks after a tap on touch devices — don't paint it. */
  .btn:hover { background-color: var(--panel-2); border-color: var(--border-strong); }
}

/* ---------- phones and small tablets ----------
 * One column: stage on top, the panel as a sheet underneath. The panel
 * toggle in the top bar collapses the sheet to its tab rail, which is how
 * you get the full screen for framing a shot. */
@media (max-width: 900px) {
  #app {
    /* No panel row: on a phone the panel floats over the stage as a sheet.
       Giving it a row instead squeezes the 3D viewport down to nothing the
       moment the sheet opens. */
    grid-template:
      "topbar" auto
      "stage" minmax(0, 1fr) / minmax(0, 1fr);
    /* dvh, not vh: Safari's toolbars otherwise push the sheet off-screen. */
    height: 100dvh;
  }
  #topbar {
    flex-wrap: wrap;
    padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px));
    gap: 10px; row-gap: 8px;
  }
  .brand { font-size: 14px; }
  .brand .logo { width: 22px; height: 22px; }
  /* One scrolling row rather than a wrapped block — wrapping cost 45px of
     vertical space that the stage needs more than the top bar does. */
  .topbar-mid {
    order: 3; flex-basis: 100%; min-width: 0;
    justify-content: flex-start; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  .topbar-mid::-webkit-scrollbar { display: none; }
  .topbar-mid .seg, .topbar-mid .inline { flex: none; }
  .topbar-mid select { max-width: 40vw; }
  .topbar-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .topbar-actions .btn { padding: 9px 12px; font-size: 12.5px; }

  #stage { padding: 12px; }
  #viewport, #bg-canvas, #fx-front, #overlay, #composite-preview { border-radius: 10px; }
  #drop-hint { bottom: 10px; font-size: 11.5px; padding: 8px 14px; max-width: 92%; }

  /* Room under the timeline for the collapsed rail to sit without covering it. */
  #stage-wrap { padding-bottom: 62px; }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    flex-direction: column;
    max-height: 62dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  }
  /* The rail turns into a scrollable strip of tabs across the top of the sheet. */
  #tab-rail {
    flex-direction: row; width: auto; flex: none;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 7px 8px; gap: 4px;
    scrollbar-width: none;
  }
  #tab-rail::-webkit-scrollbar { display: none; }
  body.panel-collapsed #tab-rail { border-bottom: none; }
  .tab-btn { flex: none; min-width: 62px; padding: 8px 6px 7px; }
  /* Horizontal strip: the active indicator moves under the tab. */
  .tab-btn::before {
    left: 50%; top: auto; bottom: -7px;
    width: 0; height: 3px;
    border-radius: 3px 3px 0 0;
    transform: translateX(-50%);
    transition: width 0.2s var(--ease);
  }
  .tab-btn.active::before { width: 22px; height: 3px; }
  .tab-btn svg.ph { width: 19px; height: 19px; }
  #panel-content { padding: 2px 14px 20px; -webkit-overflow-scrolling: touch; }
  /* Collapsed, the sheet is just the rail — one tap back to a full stage. */
  body.panel-collapsed #app { --panel-w: auto; }
  body.panel-collapsed #panel { max-height: none; }
  #panel-content { overflow-y: auto; }

  .preset-grid, .template-grid, .fx-grid { grid-template-columns: 1fr 1fr; }

  /* The stage must never be squeezed to nothing — resize() sizes the WebGL
     canvas from this box, and a zero-height box means no viewport at all. */
  #stage { min-height: 180px; }
  #timeline { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; row-gap: 6px; }
  #time-label { min-width: 0; font-size: 11px; }
  /* One scrollable strip instead of four wrapped rows of buttons — the
     timeline was eating half the screen. */
  body:not(.video-mode) .tl-actions { flex-wrap: nowrap; }
  .tl-actions {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; gap: 6px;
  }
  .tl-actions .btn.small { padding: 7px 10px; font-size: 11.5px; }
  .tl-actions .check { flex: none; white-space: nowrap; }
  .tl-actions::-webkit-scrollbar { display: none; }
  .tl-actions .btn { flex: none; }
  #audio-tools { flex-wrap: nowrap; overflow-x: auto; }
  /* A drag-to-resize grip is a desktop affordance and swallows touch scrolls. */
  #tl-vgrip, #tl-grip { display: none; }
}

@media (max-width: 560px) {
  .brand span, .brand { font-size: 0; gap: 0; }
  .brand .logo { font-size: 14px; }
  .topbar-actions .btn { padding: 9px 10px; font-size: 12px; }
  .preset-grid, .template-grid, .fx-grid { grid-template-columns: 1fr; }
  #panel { max-height: 52dvh; }
}

/* =====================================================================
 * v2 inspector — breathing room over hairlines.
 * Groups are separated by space and type, not borders; every choice that
 * can be shown is shown (device renders, finish renders, shadow drawings,
 * motion glyphs). Selection is a crisp light ring, as on Apple's pickers.
 * ===================================================================== */
:root {
  --tile: rgba(255, 255, 255, 0.045);
  --tile-hover: rgba(255, 255, 255, 0.075);
  --sel-ring: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(255, 255, 255, 0.08);
  --soft-text: #c9ccd3;
}

/* ---------- top bar ---------- */


#topbar .brand { font-size: 15.5px; }
.topbar-mid { justify-content: center; }
#topbar #mode-seg {
  background: rgba(255, 255, 255, 0.05); border: none; box-shadow: none;
  border-radius: 999px; padding: 4px; gap: 2px;
}
#topbar #mode-seg button { border-radius: 999px; padding: 7px 18px; font-size: 13px; color: #9a9ea8; }
#topbar #mode-seg button:hover { color: #fff; }
#topbar #mode-seg button.active {
  background: rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.topbar-actions { align-items: center; gap: 6px; }
#topbar .btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px; border-radius: 999px;
  font-size: 13px; font-weight: 550;
  border: none; box-shadow: none;
}
#topbar .btn svg.ph { width: 16px; height: 16px; }
#topbar .btn.ghost { background: transparent; color: #c9ccd3; }
#topbar .btn.ghost:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
#topbar .btn.primary {
  background: #f5f5f7; color: #0b0b0e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
}
#topbar .btn.primary:hover { background: #fff; }
#topbar .btn.primary:disabled { opacity: 0.5; }
#topbar .icon-btn.ghost {
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent; border: none; box-shadow: none; color: #9a9ea8;
}
#topbar .icon-btn.ghost:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
#panel-toggle { background: transparent !important; border: none !important; box-shadow: none !important; color: #9a9ea8; border-radius: 999px; }
#panel-toggle:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff; }
.tb-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.1); margin: 0 4px; }
.aspect-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 4px 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: #9a9ea8; cursor: pointer;
}
.aspect-pill:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.aspect-pill svg.ph { width: 16px; height: 16px; }
.aspect-pill select {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #e8eaee; font: 600 13px/1 inherit; padding: 0 22px 0 4px; height: 36px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* ---------- panel shell ---------- */



.tab-btn.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.tab-btn.active svg.ph { color: #fff; }
.tab-btn::before { display: none; }


/* Sections: no card, no border — space and an eyebrow carry the grouping. */
#panel section, #panel section:has(.vcard) {
  background: none; border: none; border-radius: 0;
  padding: 0; margin-top: 26px;
}
#panel section:first-of-type, #panel section.tab-hidden + section:not(.tab-hidden) { margin-top: 12px; }
#panel h3 {
  font-size: 11px; letter-spacing: 0.08em; color: #7b808b; margin-bottom: 12px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.h3-value { text-transform: none; letter-spacing: 0; font-weight: 500; color: #b8bcc5; font-size: 12px; }
#panel .vcard { border: none; background: var(--tile); }
#panel .slider-row { margin-top: 10px; }
body.mockup-mode #panel .device-only { display: none !important; }

/* Property row: label left, compact control right. */
.prop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; margin-top: 10px; color: var(--label); font-size: 12.5px;
}
.prop-row select { min-width: 150px; }
#panel .seg.mini { width: 150px; }
#panel .seg.mini > button { padding: 5px 4px; font-size: 12px; }

/* ---------- device picker ---------- */
#panel section.bare { margin-top: 12px; position: relative; }
.device-picker {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border: none; border-radius: 16px;
  background: var(--tile); color: var(--text); cursor: pointer; font: inherit; text-align: left;
  transition: background .15s ease;
}
.device-picker:hover, .device-picker.open { background: var(--tile-hover); }
.dp-thumb {
  width: 40px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(0, 0, 0, 0.25); overflow: hidden;
}
.dp-thumb img { height: 46px; width: auto; opacity: 0; transition: opacity .25s ease; }
.dp-thumb img.ready { opacity: 1; }
.dp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-text b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.dp-text small { color: #8a8f99; font-size: 12px; }
.dp-caret { color: #8a8f99; transition: transform .2s var(--ease); }
.device-picker.open .dp-caret { transform: rotate(180deg); }
.device-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  padding: 10px; border-radius: 20px;
  background: rgba(30, 30, 36, 0.96); backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  animation: pop-in .18s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.device-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 12px 10px; border: none; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer; font: inherit; text-align: left;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.device-card:hover { background: rgba(255, 255, 255, 0.08); }
.device-card.active { box-shadow: var(--sel-ring); }
.dc-head { display: flex; flex-direction: column; gap: 1px; position: relative; }
.dc-head b { font-size: 13px; font-weight: 600; }
.dc-head small { color: #8a8f99; font-size: 11px; }
.dc-head em {
  position: absolute; top: 0; right: 0; font-style: normal;
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  background: #f5f5f7; color: #0b0b0e;
}
.dc-art { height: 150px; display: grid; place-items: center; }
.dc-art img { max-height: 144px; width: auto; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.dc-art img.ready { opacity: 1; }
.dc-dots { display: flex; gap: 5px; justify-content: center; }
.dc-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---------- screen / media ---------- */
.media-drop {
  position: relative; width: 100%; height: 150px;
  display: grid; place-items: center; overflow: hidden;
  border: none; border-radius: 16px; cursor: pointer; font: inherit; color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  transition: background .15s ease;
}
.media-drop:hover { background: rgba(0, 0, 0, 0.4); }
.media-drop:not(.has-media)::after {
  content: ''; position: absolute; inset: 6px; border-radius: 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.12); pointer-events: none;
}
.media-drop img { height: 128px; width: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.md-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #9a9ea8; }
.md-empty svg.ph { width: 22px; height: 22px; margin-bottom: 4px; color: #c9ccd3; }
.md-empty b { font-size: 13px; font-weight: 550; color: #e8eaee; }
.md-empty small { font-size: 11.5px; }
.media-drop.has-media .md-empty { display: none; }
.md-change {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); font-size: 11px; font-weight: 550;
  opacity: 0; transition: opacity .15s ease;
}
.media-drop.has-media:hover .md-change { opacity: 1; }
.media-drop:not(.has-media) .md-change { display: none; }
.media-library-head { margin-top: 18px; color: #7b808b; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.media-library { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.media-item { border: none; border-radius: 10px; background: rgba(255,255,255,.04); aspect-ratio: 0.62; }
.media-item:hover { border: none; }
.media-item.active { box-shadow: var(--sel-ring); border: none; }
.media-empty { color: #6c717c; }

/* ---------- finishes ---------- */
.finish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.finish-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: none; background: none; cursor: pointer; font: inherit; color: #9a9ea8;
}
.finish-art {
  position: relative; width: 100%; aspect-ratio: 1.1; border-radius: 14px; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 20%, color-mix(in srgb, var(--body) 40%, #222) 0%, #111114 100%);
  transition: box-shadow .15s ease, transform .15s ease;
}
.finish-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.finish-art img.ready { opacity: 1; }
.finish-tile:hover .finish-art { transform: translateY(-1px); }
.finish-tile.active .finish-art { box-shadow: var(--sel-ring); }
.finish-tile small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.finish-tile.active small { color: #fff; }

/* ---------- shadow looks ---------- */
.shadow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shadow-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: none; background: none; cursor: pointer; font: inherit; color: #9a9ea8;
}
.sh-art {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #e9eaee, #d6d8de);
  transition: box-shadow .15s ease;
}
/* A little phone standing on the floor, with each shadow drawn under it. */
.sh-art::before {
  content: ''; position: absolute; left: 50%; top: 18%; width: 34%; height: 58%;
  transform: translateX(-50%); border-radius: 7px;
  background: linear-gradient(160deg, #3a3b40, #151518); z-index: 1;
}
.sh-art::after {
  content: ''; position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%);
  border-radius: 50%; background: rgba(0, 0, 0, 0.5);
}
.sh-none::after { display: none; }
.sh-soft::after { width: 58%; height: 12%; filter: blur(4px); opacity: .7; }
.sh-spread::after { width: 88%; height: 20%; filter: blur(8px); opacity: .5; }
.sh-hug::after { width: 40%; height: 7%; filter: blur(1.5px); opacity: .95; bottom: 20%; }
.shadow-grid button.active .sh-art { box-shadow: var(--sel-ring); }
.shadow-grid button small { font-size: 11.5px; }
.shadow-grid button.active small { color: #fff; }
#shadow-sliders { margin-top: 6px; transition: opacity .15s ease; }
#shadow-sliders.dim { opacity: .35; pointer-events: none; }

/* ---------- motion presets ---------- */
#preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#preset-grid .preset-group-label {
  grid-column: 1 / -1; margin: 12px 0 0; font-size: 11px; font-weight: 600; color: #7b808b; letter-spacing: .02em;
}
#preset-grid .preset-group-label:first-child { margin-top: 0; }
.preset-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px;
  border: none; border-radius: 14px; background: var(--tile); color: var(--text);
  cursor: pointer; font: inherit; text-align: left; min-width: 0;
  transition: background .15s ease, box-shadow .15s ease;
}
.preset-card:hover { background: var(--tile-hover); }
.preset-card.active { box-shadow: var(--sel-ring); background: rgba(255,255,255,.08); }
.pc-stage {
  flex: none; width: 36px; height: 44px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.3); display: grid; place-items: center; perspective: 120px; overflow: hidden;
}
.pc-phone {
  display: block; width: 14px; height: 26px; border-radius: 4px;
  background: linear-gradient(160deg, #d9dbe1, #8d9099);
  box-shadow: inset 0 0 0 1.5px #2a2b30;
}
.pc-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-text b { font-size: 12.5px; font-weight: 600; }
.pc-text small { font-size: 10.5px; color: #80858f; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Each glyph acts its move while hovered (or selected). */
.preset-card:is(:hover, .active) .pc-phone { animation: 1.6s var(--ease) infinite; }
.preset-card:is(:hover, .active) .mv-hero-reveal { animation-name: mv-hero; }
.preset-card:is(:hover, .active) .mv-slow-burn { animation: mv-burn 3s ease-in-out infinite alternate; }
.preset-card:is(:hover, .active) .mv-push-in { animation-name: mv-push; }
.preset-card:is(:hover, .active) .mv-float { animation: mv-float 2s ease-in-out infinite; }
.preset-card:is(:hover, .active) .mv-rise-up { animation-name: mv-rise; }
.preset-card:is(:hover, .active) .mv-the-drop { animation-name: mv-drop; }
.preset-card:is(:hover, .active) .mv-corner-swoop { animation-name: mv-swoop; }
.preset-card:is(:hover, .active) .mv-flip-hero { animation-name: mv-flip; }
.preset-card:is(:hover, .active) .mv-turntable { animation: mv-turn 2.4s linear infinite; }
.preset-card:is(:hover, .active) .mv-dolly-through { animation-name: mv-dolly; }
.preset-card:is(:hover, .active) .mv-impact { animation-name: mv-impact; }
.preset-card:is(:hover, .active) .mv-screen-zoom { animation-name: mv-zoom; }
@keyframes mv-hero { 0% { transform: rotateY(-60deg) scale(.7); opacity: .4; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes mv-burn { from { transform: scale(.94) rotateY(-8deg); } to { transform: scale(1.04) rotateY(6deg); } }
@keyframes mv-push { from { transform: scale(.7); } to { transform: scale(1.25); } }
@keyframes mv-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes mv-rise { 0% { transform: translateY(30px); } 70% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes mv-drop { 0% { transform: translateY(-34px); } 55% { transform: translateY(2px); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes mv-swoop { 0% { transform: translate(-18px, -20px) rotate(-25deg) scale(.7); } 100% { transform: none; } }
@keyframes mv-flip { 0% { transform: rotateY(180deg); } 70% { transform: rotateY(-12deg); } 100% { transform: none; } }
@keyframes mv-turn { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes mv-dolly { 0% { transform: scale(.7); } 50% { transform: scale(1.8); opacity: .6; } 100% { transform: scale(.7); } }
@keyframes mv-impact { 0%, 30% { transform: scale(.9); } 45% { transform: scale(.75); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes mv-zoom { from { transform: rotateY(-35deg) scale(.8); } to { transform: scale(1.7); } }

/* ---------- fold (fine-tune pose) ---------- */
.fold > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px; background: var(--tile); cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--soft-text);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--tile-hover); }
.fold-caret { color: #8a8f99; transition: transform .2s var(--ease); }
.fold[open] .fold-caret { transform: rotate(180deg); }
.fold[open] > summary { margin-bottom: 6px; }
.fold .slider-row { padding: 0 4px; }

/* ---------- panel controls, softened ---------- */
#panel .btn:not(.primary) { border: none; background: var(--tile); }
#panel .btn:not(.primary):hover { border: none; background: var(--tile-hover); }
#panel select { border: none !important; background-color: var(--tile) !important; border-radius: 10px; }
#panel select:hover { background-color: var(--tile-hover) !important; }
#panel .seg { border: none; background: rgba(0, 0, 0, 0.3); box-shadow: none; }
#bg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#bg-row .swatch { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }

/* ---------- timeline: air, not lines ---------- */

body:not(.video-mode) #timeline { row-gap: 12px; column-gap: 16px; }
.tl-transport { gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.tl-transport .icon-btn { border: none; background: transparent; box-shadow: none; border-radius: 999px; width: 32px; height: 32px; color: #c9ccd3; }
.tl-transport .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#play-btn { background: #f5f5f7 !important; color: #0b0b0e !important; }
.tl-actions { gap: 10px; }
.tl-group { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
#timeline .tl-group .btn, #timeline .tl-group .icon-btn {
  border: none; background: transparent; box-shadow: none; border-radius: 999px;
  height: 28px; color: #b8bcc5; display: inline-flex; align-items: center; gap: 5px;
}
#timeline .tl-group .icon-btn { width: 30px; }
#timeline .tl-group .btn { padding: 0 11px; font-size: 12px; font-weight: 550; }
#timeline .tl-group svg.ph { width: 15px; height: 15px; }
#timeline .tl-group .btn:hover, #timeline .tl-group .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#timeline .tl-group .btn.accent-soft { color: #fff; background: rgba(255, 255, 255, 0.1); }
.tl-dur {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #9a9ea8; font-size: 12px;
}
.tl-dur svg.ph { width: 15px; height: 15px; }
.tl-dur input { width: 44px; background: transparent !important; border: none !important; box-shadow: none !important; color: #e8eaee; font: 600 12.5px inherit; text-align: right; padding: 0; font-variant-numeric: tabular-nums; }
.tl-actions .autokey { flex: none !important; }
#tl-track { border: none; background: rgba(255, 255, 255, 0.04); border-radius: 12px; height: 40px; }
.tl-tick { color: #555a63; }
#time-label { font-size: 12.5px; color: #8a8f99; }
#viewport { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); }

/* --- v2 refinements --- */
.brand-word { display: inline; }
.dc-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.dc-head small { flex-basis: 100%; }
.dc-head em { position: static; order: 1; }
#bg-row .swatch.active { box-shadow: var(--sel-ring) !important; border-color: transparent !important; }
#preset-grid { grid-template-columns: repeat(3, 1fr); }
.preset-card {
  flex-direction: column; align-items: stretch; gap: 7px; padding: 6px 6px 9px;
  border-radius: 14px; text-align: center;
}
.pc-stage { width: 100%; height: 62px; border-radius: 10px; perspective: 160px;
  background: radial-gradient(80% 90% at 50% 30%, rgba(255,255,255,.07), rgba(0,0,0,.25)); }
.pc-phone { width: 18px; height: 34px; border-radius: 5px; }
.pc-label { font-size: 11.5px; font-weight: 550; color: #c9ccd3; line-height: 1.2; }
.preset-card.active .pc-label, .preset-card:hover .pc-label { color: #fff; }
#panel #preset-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
#panel #preset-grid .preset-card {
  flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px 6px 6px;
  border: none !important; text-align: left; min-height: 56px;
}
#panel #preset-grid .pc-stage { width: 44px; height: 44px; flex: none; }
#panel #preset-grid .pc-phone { width: 14px; height: 26px; border-radius: 4px; }
#panel #preset-grid .pc-label { font-size: 12.5px; }

/* Shell geometry is desktop-only — the handset layout (≤900px) owns its own. */
@media (min-width: 901px) {
  #app { grid-template: "topbar topbar" 60px "panel stage" 1fr / var(--panel-w, 380px) 1fr; }
  #topbar {
    background: transparent; border-bottom: none; backdrop-filter: none;
    padding: 0 14px 0 12px; gap: 12px;
  }
  #panel {
    margin: 0 0 12px 12px; border: none;
    background: rgba(20, 20, 24, 0.72);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35);
    border-radius: 20px;
  }
  #tab-rail { border-right: none; background: transparent; width: 72px; padding: 12px 8px; gap: 6px; }
  .tab-btn { padding: 11px 0 9px; border-radius: 12px; }
  #panel-content { padding: 6px 16px 28px 6px; }
  #timeline {
    background: transparent; border-top: none;
    padding: 8px 20px 18px;
  }
}
#panel .vcard { border: none !important; background: rgba(255, 255, 255, 0.03); border-radius: 16px; }
#panel .tpl-card { border: none !important; background: var(--tile); border-radius: 12px; box-shadow: none; }
#panel .tpl-card:hover { background: var(--tile-hover); }
#panel .tpl-card.active { background: rgba(255, 255, 255, 0.09); box-shadow: var(--sel-ring); }
#panel .tpl-card.active b { color: #fff; }
@media (max-width: 900px) {
  #topbar .btn.ghost { font-size: 0; gap: 0; padding: 0 10px; }
  #topbar .btn.ghost svg.ph { width: 18px; height: 18px; }
  .tb-sep { display: none; }
  .topbar-actions { flex-wrap: nowrap; }
}

/* =====================================================================
 * v3 polish
 * ===================================================================== */
/* ---- brand ---- */
#topbar .brand { gap: 10px; }
#topbar .brand .logo { width: 30px; height: 24px; filter: none; }
.brand-word {
  font: 700 18px/1 -apple-system, "SF Pro Display", BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.05em; color: #fff;
}
.brand-word span {
  background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, 0.42);
}

/* ---- aspect picker ---- */
.aspect-wrap { position: relative; }
.aspect-pill { border: none; font: 600 13px/1 inherit; color: #e8eaee; gap: 9px; padding: 0 14px; font-variant-numeric: tabular-nums; }
.ar-glyph { display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; }
.aspect-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 272px;
  padding: 14px; border-radius: 20px;
  background: rgba(30, 30, 36, 0.97); backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  animation: pop-in .18s var(--ease);
}
.aspect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aspect-grid button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  height: 84px; padding: 8px 0; border: none; border-radius: 14px; background: none; cursor: pointer;
  color: #9a9ea8; font: 600 12px/1 inherit; font-variant-numeric: tabular-nums;
}
.aspect-grid button i {
  display: block; border-radius: 7px; background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow .15s ease, background .15s ease;
}
.aspect-grid button:hover i { background: rgba(255, 255, 255, 0.12); }
.aspect-grid button.active i { box-shadow: var(--sel-ring); background: rgba(255, 255, 255, 0.12); }
.aspect-grid button.active { color: #fff; }

/* ---- tooltips ---- */
.tip {
  position: fixed; z-index: 1000; pointer-events: none;
  transform: translate(-50%, calc(-100% + 4px)); opacity: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 9px; max-width: 260px;
  background: rgba(24, 24, 28, 0.96); color: #f1f2f4;
  font: 500 12px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  transition: opacity .12s ease, transform .12s ease;
}
.tip.below { transform: translate(-50%, -4px); }
.tip.show { opacity: 1; transform: translate(-50%, -100%); }
.tip.below.show { transform: translate(-50%, 0); }
.tip kbd {
  font: 600 10.5px/1 -apple-system, sans-serif; color: #a9adb6;
  padding: 3px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.08);
}

/* ---- timeline bits ---- */
#play-btn svg.ph { width: 15px; height: 15px; }
.tl-dur input::-webkit-outer-spin-button, .tl-dur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl-dur input { -moz-appearance: textfield; appearance: textfield; width: 34px; text-align: center; }
.tl-dur { gap: 6px; }

/* ---- device picker ---- */
.device-picker { padding: 12px 16px 12px 14px; gap: 14px; outline: none; }
.device-picker:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.dp-img { height: 46px; width: auto; flex: none; opacity: 0; transition: opacity .25s ease; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.dp-img.ready { opacity: 1; }
.dp-text b { font-size: 15.5px; }
.dp-text small { display: flex; align-items: center; gap: 6px; }
.dp-text small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #888); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.device-pop { padding: 8px; }
.device-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.device-card { align-items: center; gap: 8px; padding: 14px 6px 12px; background: transparent; border-radius: 16px; }
.device-card:hover { background: rgba(255, 255, 255, 0.06); }
.device-card.active { background: rgba(255, 255, 255, 0.07); box-shadow: var(--sel-ring); }
.dc-art { height: 128px; }
.dc-art img { max-height: 122px; }
.dc-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.dc-dots i { width: 8px; height: 8px; }

/* ---- finish: a touch more air around each render ---- */
.finish-art img { inset: 7%; width: 86%; height: 86%; object-fit: contain; }

/* ---- shadow: a card resting on a floor, shadow cast toward you ---- */
.sh-art { background: #dfe1e6; }
.sh-art::after { display: none !important; }
.sh-art::before {
  left: auto; right: 0; top: 0; transform: none;
  width: 70%; height: 64%; border-radius: 0 0 0 16px;
  background: #fff;
}
.sh-soft::before { box-shadow: -4px 6px 10px rgba(20, 24, 32, 0.28); }
.sh-spread::before { box-shadow: -8px 12px 22px rgba(20, 24, 32, 0.42); }
.sh-hug::before { box-shadow: -1.5px 2.5px 3px rgba(20, 24, 32, 0.5); }

/* ---- pill sliders: the whole control is the track ---- */
#shadow-sliders { display: grid; gap: 8px; margin-top: 14px; }
.pill-slider {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 14px; border-radius: 12px; overflow: hidden;
  background: rgba(0, 0, 0, 0.32); cursor: ew-resize;
  font-size: 12.5px; color: #9a9ea8;
}
.pill-slider span, .pill-slider b { position: relative; z-index: 1; pointer-events: none; }
.pill-slider b { font-weight: 550; color: #d9dce2; font-variant-numeric: tabular-nums; }
#panel .pill-slider input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; cursor: ew-resize;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) var(--f1, 50%), transparent var(--f1, 50%)) !important;
  border-radius: 0;
}
#panel .pill-slider input[type=range]::-webkit-slider-runnable-track { background: none !important; height: 100%; border: none; }
#panel .pill-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 3px; height: 18px; margin-top: 11px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.75); border: none; box-shadow: none; transform: none !important;
}
.pill-slider:hover { background: rgba(0, 0, 0, 0.4); }
section[data-tab="look"] .pill-slider { margin-top: 2px; }

/* ---- scene: custom colour ---- */
#bg-row .swatch.custom-sw {
  background: conic-gradient(from 90deg, #ff5f6d, #ffc371, #f5f76c, #6cf5a1, #6cc7f5, #9d6cf5, #ff5f6d) !important;
  position: relative;
}
#bg-row .swatch.custom-sw::after {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: #141418; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.color-pop {
  margin-top: 12px; padding: 12px; border-radius: 18px;
  background: rgba(0, 0, 0, 0.3); animation: pop-in .18s var(--ease);
}
.cp-sv {
  position: relative; height: 150px; border-radius: 12px; cursor: crosshair;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, red));
}
.cp-hue {
  position: relative; height: 14px; margin-top: 12px; border-radius: 999px; cursor: ew-resize;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.cp-sv-knob, .cp-hue-knob {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 0, 0, 0.5);
}
.cp-hue-knob { top: 50% !important; }
.cp-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cp-row .icon-btn { width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--tile); box-shadow: none; }
.cp-hash { color: #7b808b; font-weight: 600; margin-left: 4px; }
#cp-hex {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: none; border-radius: 10px;
  background: var(--tile); color: #fff; font: 600 13px/1 ui-monospace, "SF Mono", monospace; letter-spacing: .04em;
}
.cp-preview { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }

/* ---- motion glyphs ---- */
.pc-svg { width: 36px; height: 36px; overflow: visible; }
.pc-svg .pc-phone rect:first-child { fill: #d9dbe1; }
.pc-svg .pc-phone .pc-isl { fill: #1b1c20; }
.pc-svg .pc-ghost rect { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; stroke-dasharray: 2 2; }
.pc-svg .pc-path { fill: none; stroke: #8fc4ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-svg .pc-phone { transform-box: fill-box; transform-origin: center; }
.preset-card.active .pc-svg .pc-phone rect:first-child { fill: #fff; }
#topbar .brand .logo { width: 28px; height: 28px; }
.brand-word { font-size: 19px; letter-spacing: -0.045em; font-weight: 650; }
.brand-word span { color: #fff; -webkit-text-fill-color: #fff; font-weight: 300; }
#topbar .brand > .brand-word { background: none; -webkit-text-fill-color: #fff; color: #fff; }
#topbar .brand > .brand-word > span { background: none; -webkit-text-fill-color: #fff; }
@media (max-width: 560px) { #topbar .brand-word { display: none; } }

/* ---- finish: one row of colour circles ---- */
.finish-dots { display: flex; gap: 14px; padding: 4px 2px 6px; }
.finish-dot {
  width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; cursor: pointer; flex: none;
  background:
    radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--body) 82%, #fff) 0%, var(--body) 55%, color-mix(in srgb, var(--body) 70%, #000) 100%);
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform .15s var(--ease), box-shadow .15s ease;
}
.finish-dot:hover { transform: scale(1.06); }
.finish-dot.active {
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.18), 0 0 0 3px #16161a, 0 0 0 5px rgba(255, 255, 255, 0.92);
}
section[data-tab="phone"] .finish-dots + .prop-row { margin-top: 16px; }
.pill-stack { display: grid; gap: 8px; }
#panel section.bare.device-only { margin-top: 22px; }

/* ---- animate: position ---- */
#pose-section .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#pose-section .sec-head h3 { margin: 0; }
.pose-resets { display: flex; gap: 6px; }
.pose-reset {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06);
  color: #c9ccd3; font: inherit; font-size: 11.5px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pose-reset:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pose-reset:active { transform: scale(0.97); }
.pose-reset .ph { width: 13px; height: 13px; }
.pose-reset span { display: inline-flex; }
.pose-reset.flash { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Bipolar: fill runs from the centre (zero) out to the value, so "moved" reads at a glance. */
#panel .pill-slider.bi input[type=range] {
  background:
    linear-gradient(90deg, transparent var(--f0, 50%), rgba(255, 255, 255, 0.1) var(--f0, 50%), rgba(255, 255, 255, 0.1) var(--f1, 50%), transparent var(--f1, 50%)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.14) calc(50% - 0.5px), rgba(255, 255, 255, 0.14) calc(50% + 0.5px), transparent calc(50% + 0.5px)) !important;
}
#panel .pose-reset { width: auto; flex: none; white-space: nowrap; line-height: 1; }
#pose-section .sec-head h3 { flex: 1; min-width: 0; }

/* ---- Young Serif: every cut. The files have lining proportional numerals
   baked into the default digits (see YOUNG-SERIF rule), and the variant is set
   anyway wherever the family is used in the UI. ---- */
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-Light.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-LightItalic.woff2) format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-RegularItalic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-MediumItalic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif/YoungSerif-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
.font-young-serif { font-family: 'Young Serif', Georgia, serif; font-variant-numeric: lining-nums proportional-nums; }

/* =====================================================================
   v4 — one quiet system for Text, Effects and Position.
   Filled surfaces instead of outlines, one radius family (10/12/14),
   one label style, and anything secondary folded under More.
   ===================================================================== */
#panel section.ui h3 { margin: 0; }
.ui-head { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin-bottom: 10px; }
.ui-add {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border: 0; border-radius: 10px; background: #f2f3f5; color: #0b0b0e;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.ui-add:hover { background: #fff; }
.ui-add:active { transform: scale(.97); }
.ui-add span { display: inline-flex; }
.ui-add .ph { width: 13px; height: 13px; }
.ui-link {
  border: 0; background: none; color: #7b808b; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 2px;
}
.ui-link:hover { color: var(--text); }
.ui-empty { color: #7b808b; font-size: 12.5px; line-height: 1.5; padding: 14px 16px; background: var(--tile); border-radius: 14px; }

/* Layers: text lines and effect layers share one row design. */
.ui-layers { display: grid; gap: 6px; }
.ui-layers:empty { display: none; }
.ui-layer {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px;
  padding: 6px 8px 6px 6px; border: 0; border-radius: 12px;
  background: var(--tile); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background .15s var(--ease);
}
.ui-layer:hover { background: var(--tile-hover); }
.ui-layer.active { background: rgba(255, 255, 255, 0.1); }
.ui-layer.off .ui-layer-name, .ui-layer.off .ui-layer-thumb { opacity: .4; }
.ui-layer-glyph {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: rgba(0, 0, 0, 0.35); color: #f2f3f5; font-size: 15px; line-height: 1;
  font-variant-numeric: lining-nums proportional-nums;
}
.ui-layer-thumb { width: 44px; height: 34px; flex: none; border-radius: 8px; background: #0a0a0e center / cover; }
.ui-layer-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-layer-meta { flex: none; color: #7b808b; font-size: 11.5px; }
.ui-icon {
  width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: #8a8f99; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ui-icon:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ui-icon.danger:hover { color: #ff6b6b; }
.ui-icon .ph { width: 15px; height: 15px; }
.ui-eye:not(.on) { color: #5a5e67; }

/* The editor opens under its layer, visibly part of it. */
.ui-editor { margin-top: 8px; }
.ui-layers .ui-editor { margin: 2px 0 8px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.ui-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ui-editor-head > span:first-child { font-size: 13.5px; font-weight: 600; }
.ui-icons { display: flex; gap: 2px; }
.ui-hint { color: #7b808b; font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
#fx-editor .pill-stack { gap: 6px; }
#fx-editor .pill-slider { height: 38px; }

.ui-label {
  margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #7b808b;
}
.ui-gap { margin-top: 16px; }
.ui-gap-s { margin-top: 8px; }
.ui-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ui-row .seg { flex: 1; }

/* Text */
#panel .ui-textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: 12px 14px;
  border: 0; border-radius: 12px; outline: none;
  background: rgba(0, 0, 0, 0.35); color: var(--text);
  font-size: 17px; line-height: 1.3; letter-spacing: -0.01em;
  font-variant-numeric: lining-nums proportional-nums;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s var(--ease);
}
#panel .ui-textarea:focus { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.ui-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-style {
  height: 52px; padding: 0 6px; border: 0; border-radius: 12px; background: var(--tile);
  color: #e9eaee; cursor: pointer; overflow: hidden;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.ui-style span { display: block; font-size: 15px; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; }
.ui-style[data-style="label"] span { font-size: 10.5px; }
.ui-style[data-style="caption"] span { font-size: 13px; }
.ui-style:hover { background: var(--tile-hover); }
.ui-style:active { transform: scale(.98); }
.ui-style.active { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.ui-font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-font {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; border: 0; border-radius: 12px; background: var(--tile); color: #e9eaee; cursor: pointer;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.ui-font b { font-size: 19px; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums proportional-nums; }
.ui-font small { font-size: 10.5px; color: #8a8f99; }
.ui-font:hover { background: var(--tile-hover); }
.ui-font.active { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.ui-font.add b { display: grid; place-items: center; height: 19px; }
.ui-font.add .ph { width: 16px; height: 16px; color: #8a8f99; }
.ui-toggles { display: flex; gap: 4px; }
.ui-toggle {
  width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--tile);
  color: #9a9ea8; font: inherit; font-size: 14px; cursor: pointer;
}
.ui-toggle:hover { color: #fff; }
.ui-toggle.on { background: rgba(255, 255, 255, 0.14); color: #fff; }
#text-weight-seg button { font-size: 12px; }
.ui-swatches { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.ui-swatches .tswatch, .ui-swatches #text-custom-color { width: 28px; height: 28px; flex: none; }
.ui-chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ui-chip {
  height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--tile);
  color: #c9ccd3; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ui-chip:hover { background: var(--tile-hover); color: #fff; }
.ui-chip.active { background: #f2f3f5; color: #0b0b0e; font-weight: 600; }

/* More: one quiet disclosure for everything secondary. */
.ui-fold { margin-top: 14px; }
.ui-fold > summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  width: max-content; padding: 6px 2px; color: #8a8f99; font-size: 12.5px; font-weight: 500;
}
.ui-fold > summary::-webkit-details-marker { display: none; }
.ui-fold > summary:hover { color: #fff; }
.ui-fold > summary .fold-caret { display: inline-flex; transition: transform .2s var(--ease); }
.ui-fold > summary .ph { width: 12px; height: 12px; }
.ui-fold[open] > summary .fold-caret { transform: rotate(180deg); }
.ui-fold-body { padding-top: 4px; }
.ui-fold-body > .ui-label:first-child { margin-top: 6px; }
.ui-timing { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #9a9ea8; font-size: 12.5px; }
#panel .ui-timing input[type=number] {
  width: 64px; height: 32px; padding: 0 10px; border: 0; border-radius: 9px;
  background: rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; font-size: 12.5px;
}
.ui-mini {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: 9px; background: var(--tile); color: #c9ccd3;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ui-mini:hover { background: var(--tile-hover); color: #fff; }
.ui-mini span { display: inline-flex; }
.ui-mini .ph { width: 13px; height: 13px; }
.ui-mini.danger:hover { color: #ff6b6b; }
.ui-auto { margin-top: 8px; }
.ui-auto.on { color: #6c717c; }
#panel .ui-select { width: 100%; margin-top: 10px; }
.ui-actions { display: flex; gap: 6px; margin-top: 20px; }
.ui-actions .danger { margin-left: auto; }

/* Effects */
.ui-pal-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ui-pal {
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ui-pal:hover { transform: scale(1.1); }
.ui-pal.active { box-shadow: 0 0 0 2px #16161a, 0 0 0 3.5px rgba(255, 255, 255, .9); }
.ui-seg-row { display: grid; gap: 6px; color: #9a9ea8; font-size: 12px; }
.ui-lib-label { margin-top: 24px; }
.ui-tabs { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs button {
  flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: #8a8f99; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ui-tabs button:hover { color: #fff; }
.ui-tabs button.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ui-fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ui-fx-card {
  position: relative; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--tile); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ui-fx-card:hover { transform: translateY(-1px); }
.ui-fx-card:active { transform: scale(.985); }
.ui-fx-img { display: block; aspect-ratio: 3 / 2; background: #0a0a0e; }
.ui-fx-img canvas { display: block; width: 100%; height: 100%; }
.ui-fx-name { display: block; padding: 9px 12px 10px; font-size: 12.5px; font-weight: 500; }
.ui-fx-tick {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: #0b0b0e; opacity: 0; transform: scale(.7);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ui-fx-tick .ph { width: 12px; height: 12px; }
.ui-fx-card.on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.ui-fx-card.on .ui-fx-tick { opacity: 1; transform: none; }

/* Position: bottom of Scene, studio only (the video builder poses itself). */
body.video-mode #pose-section, body.mockup-mode #pose-section { display: none !important; }
#panel textarea.ui-textarea { border: 0 !important; }
#panel .ui-layers { border: 0 !important; padding: 0 !important; margin: 0; }
#text-el-list.ui-layers + .ui-empty, #text-el-list:not(:empty) { margin-bottom: 10px; }
.ui-swatches { gap: 7px; }
.ui-swatches .tswatch, .ui-swatches #text-custom-color { width: 26px; height: 26px; }
.ui-tabs { gap: 2px; }
.ui-tabs button { padding: 0 10px; font-size: 12px; }
#text-weight-seg button { font-size: 11.5px; padding-left: 2px; padding-right: 2px; }
#panel .ui-select-top { margin-top: 0; }
#panel .pill-slider input[type=range] { z-index: 0; }
#panel .pill-slider span, #panel .pill-slider b { z-index: 2; }
#panel .ui-textarea:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
#fx-hint { display: none; }
.ui-fx-card.on { box-shadow: none; }
.ui-fx-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0); transition: box-shadow .18s var(--ease);
}
.ui-fx-card.on::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.ui-fx-tick { z-index: 1; }
.ui-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: visible; }
.ui-tabs button { padding: 0 4px; font-size: 11.5px; }
#pose-section .pose-rot { margin-top: 10px; }
#pose-section .pose-resets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#panel #pose-section .pose-reset { width: 100%; height: 38px; justify-content: center; border-radius: 12px; font-size: 12.5px; background: var(--tile); }
#panel #pose-section .pose-reset:hover { background: var(--tile-hover); }
#pose-section .pill-slider { height: 38px; }
/* Timeline: keyframe tools appear only when there's a keyframe to act on. */
body:not(.key-sel) #upd-key, body:not(.key-sel) #dup-key, body:not(.key-sel) #del-key { display: none; }
body:not(.has-keys) #clear-keys { display: none; }
#anim-section .ui-label:first-of-type { margin-top: 22px; }
#loop-seg { margin-top: 10px; }
.ui-pal-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 3px; margin: 8px -3px 0; }
.ui-pal-row::-webkit-scrollbar { display: none; }
.ui-pal { flex: none; }

/* =====================================================================
   Media panel — the library on the right of the stage (desktop).
   ===================================================================== */
#media-panel, .media-reopen { display: none; }
.mp-actions { display: flex; align-items: center; gap: 6px; }
.mp-count { color: #6c717c; font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 2px; }
.mp-collapse { display: none; }
#media-section .mp-filter { margin: 12px 0 10px; }
#media-section .media-library { gap: 6px; margin-top: 0; }
#media-section .media-item {
  aspect-ratio: 9 / 17; border: 0; border-radius: 10px; background: #0d0d10;
  content-visibility: auto; contain-intrinsic-size: 80px 150px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
#media-section .media-item:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
#media-section .media-item.active { box-shadow: 0 0 0 2px #fff; }
#media-section .media-type {
  left: 5px; bottom: 5px; padding: 2px 5px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.55); font-size: 8.5px; letter-spacing: .04em;
}
/* "On screen": the current media as a compact card, not a giant drop box. */
#media-section .media-drop.mp-now.has-media {
  display: flex; align-items: center; gap: 12px; height: 76px; padding: 8px 12px 8px 8px;
  justify-content: flex-start; text-align: left; background: var(--tile); border-radius: 14px;
}
#media-section .media-drop.mp-now.has-media::after { display: none; }
#media-section .media-drop.mp-now img { height: 60px; width: auto; border-radius: 7px; box-shadow: none; }
.md-now { display: none; flex-direction: column; min-width: 0; gap: 2px; }
.media-drop.has-media .md-now { display: flex; }
.md-now small { color: #7b808b; font-size: 11px; }
.md-now b { color: #e9eaee; font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#media-section .media-drop.mp-now .md-change { position: static; margin-left: auto; opacity: 1; background: rgba(255,255,255,.08); }

@media (min-width: 901px) {
  #app {
    grid-template: "topbar topbar topbar" 60px "panel stage media" 1fr
      / var(--panel-w, 380px) minmax(0, 1fr) var(--media-w, 292px);
  }
  body.media-collapsed #app { --media-w: 0px; }
  #media-panel {
    grid-area: media; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    margin: 0 12px 12px 0; border-radius: 20px;
    background: rgba(20, 20, 24, 0.72);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35);
  }
  body.media-collapsed #media-panel { display: none; }
  #media-panel #media-section {
    margin: 0; padding: 16px 14px 20px; overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
  }
  #media-panel .mp-collapse { display: inline-grid; }
  .media-reopen {
    position: fixed; right: 16px; top: 74px; z-index: 5;
    display: none; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px;
    border: 0; border-radius: 999px; background: rgba(30, 30, 36, 0.92); color: #e9eaee;
    font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .media-reopen .ph { width: 15px; height: 15px; }
  .media-reopen span { display: inline-flex; }
  body.media-collapsed .media-reopen { display: inline-flex; }
  body.mockup-mode .media-reopen { display: none !important; }
}

/* Video builder: the Media panel is the picker */
#builder-media.picks { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin: 8px 0 4px; }
#builder-media.picks .bm-hint { color: #8a8f99; font-size: 12.5px; line-height: 1.45; padding: 4px 0; }
#builder-media.picks .bm-hint b { color: #e9eaee; font-weight: 600; }
.bm-pick { position: relative; width: 38px; height: 70px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: #0d0d10; cursor: pointer; }
.bm-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-pick:hover::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; }
.bm-actions { display: flex; gap: 6px; margin: 6px 0 2px; }
body.media-picking #builder-add { display: none; }
body.media-picking #builder-media:not(.picks) { display: none; }
#media-section .media-item .bm-order, .bm-pick .bm-order {
  position: absolute; top: 5px; left: 5px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: #fff; color: #0b0b0e; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bm-pick .bm-order { top: 3px; left: 3px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
body.media-picking #media-section .media-item.picked { box-shadow: 0 0 0 2px #fff; }
body.media-picking #media-section .media-item:not(.picked) .media-thumb { opacity: .75; }
body.media-picking #media-section .media-drop { display: none; }
body.media-picking #media-section .media-drop { display: none !important; }
body.media-picking #media-section .media-item.active:not(.picked) { box-shadow: none; }

/* ---- Effects library, v5: full-bleed cards, one segmented category control ---- */
.ui-sub { margin: -4px 0 12px; color: #6c717c; font-size: 12px; }
.ui-sub[hidden] { display: none; }
#fx-group-seg.fx-cats { margin-bottom: 12px; }
#fx-group-seg.fx-cats > button { font-size: 12px; padding: 7px 2px; }
.ui-fx-grid { gap: 10px; }
.ui-fx-card {
  border-radius: 16px; background: #0b0b0e; aspect-ratio: 4 / 3;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.ui-fx-img { position: absolute; inset: 0; aspect-ratio: auto; }
.ui-fx-img canvas { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease), filter .35s var(--ease); }
.ui-fx-card:hover .ui-fx-img canvas { transform: scale(1.05); filter: brightness(1.12); }
.ui-fx-card::before {
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0) 0%, rgba(8, 8, 10, 0.78) 100%);
}
.ui-fx-name {
  position: absolute; left: 11px; right: 34px; bottom: 9px; z-index: 2; padding: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.ui-fx-plus {
  position: absolute; right: 8px; bottom: 7px; z-index: 2; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff; opacity: 0; transform: scale(.85);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  backdrop-filter: blur(6px);
}
.ui-fx-plus .ph { width: 12px; height: 12px; }
.ui-fx-card:hover .ui-fx-plus { opacity: 1; transform: none; }
.ui-fx-card.on .ui-fx-plus { display: none; }
.ui-fx-tick { top: auto; bottom: 7px; right: 8px; z-index: 2; }
.ui-fx-card::after { z-index: 3; border-radius: 16px; }
.ui-fx-card.on::after { box-shadow: inset 0 0 0 2px #fff; }

/* ---- Text v5: dropdown font, grouped Type & Motion ---- */
.ui-style-row {
  display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.ui-style-row::-webkit-scrollbar { display: none; }
.ui-style-row .ui-style { flex: none; height: 34px; padding: 0 13px; border-radius: 999px; }
.ui-style-row .ui-style span { font-size: 13px; }
.ui-style-row .ui-style[data-style="label"] span { font-size: 9.5px; }
.ui-style-row .ui-style[data-style="caption"] span { font-size: 12px; }
.ui-style-row .ui-style.active { background: #f2f3f5; box-shadow: none; }
.ui-style-row .ui-style.active span { color: #0b0b0e; }

.ui-type-row { margin-top: 0; }
.ui-dd { position: relative; flex: 1; min-width: 0; }
.ui-dd-btn {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px 0 14px; border: 0; border-radius: 12px; background: var(--tile); color: #f2f3f5;
  font: inherit; font-size: 15px; cursor: pointer; transition: background .15s var(--ease);
  font-variant-numeric: lining-nums proportional-nums;
}
.ui-dd-btn:hover, .ui-dd-btn[aria-expanded="true"] { background: var(--tile-hover); }
.ui-dd-btn > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-dd-caret { display: inline-flex; color: #8a8f99; transition: transform .2s var(--ease); }
.ui-dd-caret .ph { width: 13px; height: 13px; }
.ui-dd-btn[aria-expanded="true"] .ui-dd-caret { transform: rotate(180deg); }
.ui-dd-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: rgba(30, 30, 36, 0.98); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 0.5px 0 rgba(255,255,255,.08);
  animation: ddIn .16s var(--ease);
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ui-dd-item {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #e9eaee;
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  font-variant-numeric: lining-nums proportional-nums;
}
.ui-dd-item:hover { background: rgba(255, 255, 255, 0.07); }
.ui-dd-tick { display: inline-flex; opacity: 0; color: #fff; }
.ui-dd-tick .ph { width: 14px; height: 14px; }
.ui-dd-item.active .ui-dd-tick { opacity: 1; }
.ui-dd-add { font-size: 13px; color: #9a9ea8; justify-content: flex-start; margin-top: 4px; border-top: 0; }
.ui-dd-add .ph { width: 14px; height: 14px; }
.ui-type-row .ui-toggle { height: 40px; width: 40px; border-radius: 12px; }
.ui-sublabel { margin: 14px 0 7px; color: #8a8f99; font-size: 12px; }
.ui-label + .ui-sublabel { margin-top: 0; }
#text-anim-chips .ui-chip { height: 34px; }
#panel #text-anim.ui-select { margin-top: 6px; }
#text-editor #text-effect-seg { margin-top: 0; }
.ui-layers { grid-template-columns: minmax(0, 1fr); }
.ui-layer { min-width: 0; }
.ui-dd { z-index: 40; }
.ui-dd-menu { background: #1f1f25; }
#text-editor { border-top: 0; padding-top: 0; }
#text-editor .ui-swatches { position: relative; z-index: 0; }

/* ---- brand v5: traced master logo (mark + wordmark in one SVG) ---- */
#topbar .brand { gap: 0; color: #fff; font-size: 0; }
#topbar .brand .logo { display: block; width: auto; height: 26px; aspect-ratio: 1169 / 299.5; filter: none; }
@media (max-width: 560px) {
  /* Mark only: "slice" crops the viewBox to the left 256 units. */
  #topbar .brand .logo { aspect-ratio: 256 / 299.5; height: 24px; }
}

/* ---- timeline polish: edge room, quiet scrollbar, two-sided trims ---- */
/* Keys and ticks sit centred on 0s and the end; the padding gives the
   half-diamond at either edge room so the last key is fully visible and
   nothing overflows (which is what summoned the white scrollbar). */
body:not(.video-mode) #tl-area {
  padding-left: 10px; padding-right: 10px;
  margin-left: -10px; margin-right: -10px;
  scrollbar-width: none;
}
body:not(.video-mode) #tl-area::-webkit-scrollbar { display: none; }
body:not(.video-mode) #tl-area.zoomed { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
#stl { scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.tl-textbar { padding: 0 12px; }
.tl-textbar .bar-resize, .stl-textbar .stl-trim {
  position: absolute; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; border: 0; z-index: 1;
}
.tl-textbar .bar-resize { right: 0; left: auto; border-radius: 0 6px 6px 0; }
.tl-textbar .bar-resize.l { left: 0; right: auto; border-radius: 6px 0 0 6px; }
.tl-textbar .bar-resize::after, .stl-textbar .stl-trim::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 3px; height: 50%; max-height: 14px; border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.12s, height 0.12s;
}
.tl-textbar:hover .bar-resize::after, .tl-textbar.active .bar-resize::after,
.stl-textbar:hover .stl-trim::after, .stl-textbar.active .stl-trim::after { background: rgba(255, 255, 255, 0.75); }
.tl-textbar .bar-resize:hover::after, .stl-textbar .stl-trim:hover::after { background: #fff; height: 70%; }
.stl-textbar { position: absolute; padding: 0 11px; }
.stl-textbar .stl-trim.l { left: 0; }
.stl-textbar .stl-trim.r { right: 0; }
/* Duration slider with its own Auto chip right beside it. */
.ui-dur-row { display: flex; align-items: center; gap: 6px; }
.ui-dur-row .pill-slider { flex: 1; min-width: 0; }
.ui-dur-row .ui-auto { flex: none; margin-top: 0; height: 40px; padding: 0 14px; border-radius: 12px; }
/* The fill edge already reads as the value; the thumb line only speaks up
   when you reach for it, so it never sits on top of the number. */
#panel .pill-slider input[type=range]::-webkit-slider-thumb { background: rgba(255, 255, 255, 0.28); transition: background 0.12s; }
#panel .pill-slider:hover input[type=range]::-webkit-slider-thumb,
#panel .pill-slider input[type=range]:active::-webkit-slider-thumb { background: rgba(255, 255, 255, 0.85); }
#text-editor .ui-timing > span:first-child { width: 44px; flex: none; }

/* ---- text motion v6: one compact block ---- */
.ui-label-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.ui-label-row .ui-label { margin: 0; }
.ui-play { height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 11.5px; color: #e6e8ec; }
.ui-play .ph { width: 11px; height: 11px; }
.ui-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ui-field {
  position: relative; display: flex; align-items: center; min-width: 0;
  height: 40px; border-radius: 12px; background: rgba(0, 0, 0, 0.32);
}
.ui-field > span {
  flex: none; padding-left: 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #6f7480;
}
#panel .ui-field .ui-select, #panel #text-anim.ui-select {
  margin: 0; flex: 1; min-width: 0; height: 100%;
  background-color: transparent; border: 0; box-shadow: none;
  padding-left: 8px; font-size: 12.5px; text-overflow: ellipsis;
}
/* The strip: entrance ramp · hold · exit ramp, proportional to time. */
.ui-tstrip {
  display: flex; height: 40px; border-radius: 12px; overflow: hidden;
  background: rgba(0, 0, 0, 0.32); user-select: none; gap: 2px;
}
.ts-seg {
  position: relative; flex: none; min-width: 46px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(62, 166, 255, 0.10), rgba(62, 166, 255, 0.34));
  cursor: pointer; transition: flex-basis 0.12s var(--ease, ease);
}
.ts-out { background: linear-gradient(90deg, rgba(255, 159, 67, 0.32), rgba(255, 159, 67, 0.08)); }
.ts-seg b { font-size: 11.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.ts-seg.auto b { color: rgba(255, 255, 255, 0.62); font-weight: 500; }
.ts-seg:hover { filter: brightness(1.2); }
.ui-tstrip.dragging .ts-seg { transition: none; }
.ts-h {
  position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; z-index: 1;
}
.ts-in .ts-h { right: -7px; }
.ts-out .ts-h { left: -7px; }
.ts-h::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 18px;
  transform: translate(-50%, -50%); border-radius: 2px; background: rgba(255, 255, 255, 0.55);
  transition: background 0.12s, height 0.12s;
}
.ts-h:hover::after, .ui-tstrip.dragging .ts-h::after { background: #fff; height: 24px; }
.ts-hold {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: #7b808b; white-space: nowrap; overflow: hidden;
}
.ui-when {
  display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 12px;
  border-radius: 12px; background: rgba(0, 0, 0, 0.32); min-width: 0;
}
.ui-when > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6f7480; }
#panel .ui-when input[type=number] {
  flex: 1; min-width: 0; width: 0; height: 30px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
#panel .ui-when input[type=number]:focus { background: rgba(255, 255, 255, 0.06); outline: none; }
.ui-when-btn {
  flex: none; height: 30px; padding: 0 9px; border: 0; border-radius: 8px;
  background: var(--tile); color: #c9ccd3; font: inherit; font-size: 11.5px; cursor: pointer;
}
.ui-when-btn:hover { background: var(--tile-hover); color: #fff; }

/* Timeline text bars: middle moves, both ends trim — and the cursor says so. */
.tl-textbar, .stl-textbar { cursor: grab; }
.tl-textbar .bar-resize, .stl-textbar .stl-trim { width: 12px; cursor: ew-resize !important; }
/* Field = one tile: the select inside is see-through so label + value read
   as a single control. */
.ui-field { background: var(--tile); cursor: pointer; }
.ui-field:hover { background: var(--tile-hover); }
#panel .ui-field select.ui-select, #panel .ui-field select.ui-select:hover { background-color: transparent !important; padding-left: 6px; }
.ui-when { gap: 2px; padding: 0 5px 0 12px; }
.ui-when > span { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8a8f99; }
#panel .ui-when input[type=number] { padding: 0 4px 0 8px; -moz-appearance: textfield; }
#panel .ui-when input[type=number]::-webkit-inner-spin-button { display: none; }
.ui-when-btn { height: 28px; padding: 0 8px; font-size: 11px; }


/* =====================================================================
   Export sheet — preview on the left, decisions on the right.
   No hairlines: surfaces separate by fill and depth, selection by light.
   ===================================================================== */
#export-modal, #progress-overlay, #post-modal {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* A flat scrim, not a backdrop blur: the stage keeps playing underneath
     for the preview, and re-blurring it every frame is what made it lag. */
  background: rgba(3, 3, 4, 0.95);
  animation: xs-fade 0.2s ease both;
}
#progress-overlay { z-index: 50; background: #050506; }
#export-modal[hidden], #progress-overlay[hidden], #post-modal[hidden] { display: none; }
@keyframes xs-fade { from { opacity: 0; } }
@keyframes xs-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.xs-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden;
}

.xs-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  width: min(960px, 100%); height: min(640px, calc(100vh - 48px));
  border-radius: 26px; overflow: hidden;
  background: #0d0d10;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 40px 120px rgba(0, 0, 0, 0.7),
    0 12px 40px rgba(0, 0, 0, 0.45);
  animation: xs-rise 0.34s var(--ease) both;
}

/* ---- preview stage ---- */
.xs-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 70% at 50% 45%, #15151a 0%, #09090b 70%);
  min-height: 0;
}
.xs-frame {
  position: relative; flex: none;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
  background: #000;
}
.xs-frame.alpha, .rp-frame.alpha {
  background: repeating-conic-gradient(#2a2a30 0% 25%, #1c1c21 0% 50%) 50% / 18px 18px;
}
.xs-frame canvas { display: block; width: 100%; height: 100%; }
.xs-vignette, .xs-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.xs-vignette { background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }
.xs-grain { mix-blend-mode: overlay; background-size: 128px 128px; }
.xs-frame.vignette .xs-vignette { opacity: 1; }
.xs-frame.grain .xs-grain { opacity: 0.12; }

.xs-badge {
  position: absolute; top: 18px; left: 18px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.78); font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.xs-transport {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  width: min(360px, calc(100% - 36px));
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(20, 20, 24, 0.9);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.xs-transport[hidden] { display: none; }
.xs-play {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #000;
  transition: transform 0.15s var(--ease);
}
.xs-play:hover { transform: scale(1.06); }
.xs-play:active { transform: scale(0.94); }
.xs-play .ph { width: 13px; height: 13px; }
.xs-scrub {
  position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none;
}
.xs-scrub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.16);
}
.xs-scrub-fill {
  position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 100%;
  border-radius: 2px; background: #fff;
  transform-origin: left center; transform: scaleX(0);
}
.xs-time {
  flex: none; min-width: 64px; text-align: right;
  color: rgba(255, 255, 255, 0.7); font-size: 11.5px; font-variant-numeric: tabular-nums;
}

/* ---- settings column ---- */
.xs-side {
  display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, #141418, #111114);
}
.xs-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 24px 24px 6px;
}
.xs-head h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.xs-sub { margin-top: 3px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xs-close {
  flex: none; width: 30px; height: 30px; margin: -3px -6px 0 0; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: #b9bdc6;
  transition: background 0.15s ease, color 0.15s ease;
}
.xs-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.xs-close .ph { width: 14px; height: 14px; }

.xs-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 24px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.xs-group { margin-top: 20px; }
.xs-group[hidden], .xs-group > [hidden], #xs-cuts[hidden] { display: none; }
.xs-label {
  margin-bottom: 9px;
  color: var(--eyebrow); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.xs-hint { margin-top: 10px; color: #7d828c; font-size: 12px; line-height: 1.5; }
.xs-hint:empty, .xs-hint[hidden] { display: none; }

/* Segmented control with a sliding thumb (JS sets --n / --i). */
.xs-seg {
  position: relative; isolation: isolate;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 3px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  --n: 1; --i: 0;
}
.xs-seg::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  transform: translateX(calc(var(--i) * 100%));
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)) #26262c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.26s var(--ease);
}
.xs-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 8px; border: 0; border-radius: 9px;
  background: none; color: #8d929c; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: color 0.18s ease;
}
.xs-seg button:hover { color: #d9dce2; }
.xs-seg button.on { color: #fff; }
.xs-seg button small { color: #6c717c; font-size: 11px; font-weight: 500; transition: color 0.18s ease; }
.xs-seg button.on small { color: #9fd3ff; }
.xs-seg button .ph { width: 15px; height: 15px; }
.xs-kind { margin-top: 12px; }

/* Choice cards: one line of what it is, one of why you'd pick it. */
.xs-cards { display: grid; gap: 6px; }
.xs-cards button {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  width: 100%; padding: 12px 14px; border: 0; border-radius: 13px;
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  text-align: left; cursor: pointer; font: inherit;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.xs-cards button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.xs-cards button b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.xs-cards button b em {
  margin-left: 7px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: rgba(62, 166, 255, 0.16); color: #8ccaff;
  font-style: normal; font-size: 10px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.xs-cards button small { grid-column: 1; color: #858a94; font-size: 12px; line-height: 1.4; }
.xs-cards button i {
  grid-column: 2; grid-row: 1 / span 2;
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
  transition: box-shadow 0.2s var(--ease), background 0.2s ease;
}
.xs-cards button.on {
  background: linear-gradient(180deg, rgba(62, 166, 255, 0.13), rgba(62, 166, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(62, 166, 255, 0.35);
}
.xs-cards button.on i { background: var(--accent); box-shadow: inset 0 0 0 5px #0f2338, 0 0 12px rgba(62, 166, 255, 0.5); }
.xs-cards button:disabled { cursor: default; opacity: 0.42; }

.xs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xs-chips button {
  height: 32px; padding: 0 13px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: #a9adb6; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.xs-chips button:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.xs-chips button.on { background: #fff; color: #000; }

/* Toggle list: one inset group, rows separated by space rather than lines. */
.xs-list { display: grid; gap: 2px; border-radius: 14px; overflow: hidden; }
.xs-list-part { display: contents; }
.xs-list-part[hidden] { display: none; }
.xs-toggle {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.035);
  transition: background 0.15s ease;
}
.xs-toggle[hidden] { display: none; }
.xs-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.xs-ti {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); color: #9ba0aa;
  transition: background 0.2s ease, color 0.2s ease;
}
.xs-ti .ph { width: 16px; height: 16px; }
.xs-toggle:has(input:checked) .xs-ti { background: rgba(62, 166, 255, 0.14); color: #8ccaff; }
.xs-tt { display: grid; gap: 1px; min-width: 0; }
.xs-tt b { font-size: 13px; font-weight: 550; color: #eceef2; }
.xs-tt small { font-size: 11.5px; color: #7d828c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-toggle input[type=checkbox] { width: 38px; height: 22px; }
.xs-toggle input[type=checkbox]::before { width: 18px; height: 18px; }
.xs-toggle input[type=checkbox]:checked::before { transform: translateX(16px); }

/* ---- footer ---- */
.xs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px 20px 24px;
  background: linear-gradient(180deg, rgba(17, 17, 20, 0), #111114 30%);
  box-shadow: 0 -18px 24px -18px rgba(0, 0, 0, 0.6);
}
.xs-est { display: grid; gap: 1px; min-width: 0; }
.xs-est b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.xs-est span { color: #7d828c; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-go {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px 0 17px; border: 0; border-radius: 13px;
  background: #fff; color: #000; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.15s var(--ease), box-shadow 0.2s ease;
}
.xs-go:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.xs-go:active { transform: scale(0.97); }
.xs-go .ph { width: 16px; height: 16px; }
.xs-go span { display: inline-flex; }

/* =====================================================================
   Render progress — the frame being made, a hairline, one line of words.
   ===================================================================== */
.rp { display: flex; flex-direction: column; align-items: stretch; animation: xs-rise 0.4s var(--ease) both; }
.rp-frame {
  position: relative; overflow: hidden; border-radius: 14px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 90px rgba(0, 0, 0, 0.7);
}
.rp-frame.alpha { background: repeating-conic-gradient(#2a2a30 0% 25%, #1c1c21 0% 50%) 50% / 18px 18px; }
.rp-frame canvas { display: block; width: 100%; height: 100%; }
.rp-bar { position: relative; height: 2px; margin-top: 26px; border-radius: 1px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#progress-fill {
  position: absolute; inset: 0; background: #fff;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 0.25s linear, background 0.4s ease;
}
.rp-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 14px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rp-line b { font-weight: 550; color: #f2f3f5; }
#rp-eta { color: #6f747e; }
#rp-eta:not(:empty)::before { content: "·"; margin: 0 8px; color: #45484f; }
#progress-label { color: #f2f3f5; font-weight: 550; }
.rp-cancel {
  align-self: center; margin-top: 34px; padding: 6px 12px; border: 0; border-radius: 8px;
  background: none; color: #6f747e; cursor: pointer; font: inherit; font-size: 12.5px;
  transition: color 0.15s ease, background 0.15s ease;
}
.rp-cancel:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.rp.done .rp-cancel { visibility: hidden; }
.rp.done #progress-fill { background: #34c759; }

/* Finished render: one quiet way on to the socials. */
.rp-post {
  align-self: center; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; height: 40px; padding: 0 18px 0 15px; border: 0; border-radius: 12px;
  background: #fff; color: #000; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650;
  transition: transform 0.15s var(--ease);
}
.rp-post:hover { transform: translateY(-1px); }
.rp-post .ph { width: 15px; height: 15px; }
.rp.done:has(.rp-post:not([hidden])) .rp-cancel { display: none; }

/* A fresh export waiting to be posted. */
#post-open { position: relative; }
#post-open.has-new::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel);
}

/* =====================================================================
   Post to TripMemo — the picture on the left, one column of decisions on
   the right. No rules or boxes: groups separate by space, state by light.
   ===================================================================== */
#post-modal { z-index: 46; }
.pm-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  width: min(1100px, 100%); height: min(740px, calc(100vh - 48px));
  border-radius: 28px; overflow: hidden;
  background: #0b0b0d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 40px 120px rgba(0, 0, 0, 0.7),
    0 12px 40px rgba(0, 0, 0, 0.45);
  animation: xs-rise 0.34s var(--ease) both;
}

/* ---- stage ---- */
.pm-stage {
  position: relative; isolation: isolate; min-height: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px 36px 26px;
  background: radial-gradient(80% 65% at 50% 42%, #17171c 0%, #0b0b0d 72%);
}
.pm-view { position: relative; flex: 1 1 auto; min-height: 0; }
.pm-media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pm-media[hidden] { display: none; }
.pm-media > video, .pm-media > img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 16px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 80px rgba(0, 0, 0, 0.65);
}
.pm-media > video { cursor: pointer; }
.pm-media.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
  align-content: center; overflow-y: auto; padding: 2px;
}
.pm-media.grid > * { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.pm-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(0, 0, 0, 0.42); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.2s ease, transform 0.25s var(--ease);
}
.pm-play .ph { width: 22px; height: 22px; margin-left: 3px; }
.pm-play.hide { opacity: 0; transform: scale(0.9); }

.pm-float {
  position: absolute; top: 0; right: 0; z-index: 3; display: flex; gap: 6px;
  opacity: 0; transition: opacity 0.2s ease;
}
.pm-float[hidden] { display: none; }
.pm-stage:hover .pm-float, .pm-float:focus-within { opacity: 1; }
@media (hover: none) { .pm-float { opacity: 1; } }
.pm-float button {
  width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(24, 24, 28, 0.82); color: #d9dce2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, color 0.15s ease;
}
.pm-float button:hover { background: rgba(48, 48, 54, 0.95); color: #fff; }
.pm-float .ph { width: 14px; height: 14px; }

/* Empty: quiet, centred, no outlines */
.pm-drop {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 22px; text-align: center; background: rgba(255, 255, 255, 0.02);
}
.pm-drop[hidden] { display: none; }
.pm-drop-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06); color: #d9dce2;
}
.pm-drop-icon .ph { width: 22px; height: 22px; }
.pm-drop b { font-size: 16px; font-weight: 600; color: #f2f3f5; letter-spacing: -0.015em; }
.pm-drop small { color: #7d828c; font-size: 13px; }
.pm-choose {
  margin-top: 16px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #000; font: inherit; font-size: 13.5px; font-weight: 650;
  transition: transform 0.15s var(--ease);
}
.pm-choose:hover { transform: translateY(-1px); }
.pm-dropping {
  position: absolute; inset: 16px; z-index: 5; display: none; place-items: center;
  border-radius: 22px; background: rgba(62, 166, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(62, 166, 255, 0.65);
  color: #cfe8ff; font-size: 15px; font-weight: 600; pointer-events: none;
}
.pm-stage.dropping .pm-dropping { display: grid; }

/* ---- trim: Photos-style filmstrip, white frame, heavier grips ---- */
.pm-trim {
  flex: none; user-select: none; -webkit-user-select: none;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center;
}
.pm-trim > .pm-trim-meta { grid-column: 2; }
.pm-pp {
  width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #000; margin-top: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s var(--ease);
}
.pm-pp:hover { transform: scale(1.05); }
.pm-pp:active { transform: scale(0.94); }
.pm-pp .ph { width: 17px; height: 17px; }
.pm-pp.paused .ph { margin-left: 2px; }
.pm-trim[hidden] { display: none; }
.pm-trim-bar {
  position: relative; height: 50px; margin: 4px 15px 0; touch-action: none; cursor: pointer;
  --s: 0; --e: 1; --p: 0;
}
.pm-strip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 7px; background: #1a1a1f; display: block;
}
.pm-shade {
  position: absolute; top: 0; bottom: 0; background: rgba(8, 8, 10, 0.72); pointer-events: none;
}
.pm-shade.l { left: 0; width: calc(var(--s) * 100%); border-radius: 7px 0 0 7px; }
.pm-shade.r { right: 0; width: calc((1 - var(--e)) * 100%); border-radius: 0 7px 7px 0; }
.pm-sel {
  position: absolute; top: -3px; bottom: -3px;
  left: calc(var(--s) * 100% - 15px); right: calc((1 - var(--e)) * 100% - 15px);
  border: 3px solid #fff; border-left-width: 15px; border-right-width: 15px; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.pm-handle {
  position: absolute; top: -3px; bottom: -3px; width: 15px; display: grid; place-items: center;
  cursor: ew-resize; pointer-events: auto; touch-action: none;
}
.pm-handle.l { left: -15px; }
.pm-handle.r { right: -15px; }
.pm-handle::before { content: ""; position: absolute; inset: -6px -10px; } /* bigger hit area */
.pm-handle i { width: 3px; height: 16px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); }
.pm-playhead {
  position: absolute; top: -7px; bottom: -7px; left: calc(var(--p) * 100%); width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.pm-trim.dragging .pm-playhead { opacity: 0; }
/* cover: a small white tab under the strip marks the chosen frame */
.pm-cover-mark {
  position: absolute; bottom: -11px; left: calc(var(--c, 0) * 100%); width: 12px; height: 4px; margin-left: -6px;
  border-radius: 2px; background: #fff; opacity: 0.85; pointer-events: none;
}
.pm-cover {
  grid-column: 2; display: flex; align-items: center; gap: 12px; margin: 14px 15px 0;
}
.pm-cover-thumb {
  width: 30px; height: 40px; border-radius: 6px; background: #1a1a1f; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pm-cover-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pm-cover-t b { font-size: 12.5px; font-weight: 600; color: #e6e8ec; }
.pm-cover-t small { font-size: 11.5px; color: #6f747e; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cover-set {
  flex: none; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #e6e8ec; font: inherit; font-size: 12px; font-weight: 600;
  transition: background 0.15s ease;
}
.pm-cover-set:hover { background: rgba(255, 255, 255, 0.14); }
.pm-trim-meta {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin: 12px 15px 0; font-size: 11.5px; font-variant-numeric: tabular-nums; color: #6f747e;
}
.pm-trim-meta > span:last-child { text-align: right; }
.pm-trim-len { display: inline-flex; align-items: center; gap: 10px; }
.pm-trim-len b { color: #e6e8ec; font-weight: 600; }
.pm-trim-len button, .pm-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #8ccaff; font: inherit; font-size: 11.5px; font-weight: 550; letter-spacing: 0; text-transform: none;
}
.pm-trim-len button:hover, .pm-link:hover { color: #cfe8ff; }

/* this session's exports */
.pm-recent { flex: none; }
.pm-recent-row { display: flex; justify-content: center; gap: 8px; overflow-x: auto; padding: 3px; }
.pm-thumb {
  position: relative; flex: none; width: 38px; height: 48px; padding: 0; border: 0; border-radius: 8px;
  overflow: hidden; background: #000; cursor: pointer; opacity: 0.45;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s var(--ease);
}
.pm-thumb:hover { opacity: 0.85; transform: translateY(-1px); }
.pm-thumb.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.pm-thumb img, .pm-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb i {
  position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff;
}
.pm-thumb i .ph { width: 7px; height: 7px; }

/* ---- the decisions column ---- */
.pm-side {
  display: flex; flex-direction: column; min-height: 0;
  background: #121215;
}
.pm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 28px 28px 0;
}
.pm-head h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; }
.pm-head p { margin-top: 4px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pm-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 28px 20px;
  scrollbar-width: none;
}
.pm-body::-webkit-scrollbar { display: none; }
.pm-sec { margin-top: 26px; }
.pm-sec[hidden] { display: none; }
.pm-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
  color: var(--eyebrow); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}

/* platforms: one row of app icons */
.pm-platforms {
  display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px 4px;
}
.pm-plat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #6c717c; font: inherit; font-size: 10.5px; font-weight: 550; letter-spacing: 0.005em;
  transition: color 0.18s ease;
}
.pm-plat > span:last-child { white-space: nowrap; } /* centred labels may spill a hair into the gap */
.pm-plat .app-icon {
  width: 48px; height: 48px;
  opacity: 0.32; filter: grayscale(1); transform: scale(0.9);
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.28s var(--ease), box-shadow 0.22s ease;
}
.pm-plat:hover .app-icon { opacity: 0.55; transform: scale(0.94); }
.pm-plat.on { color: #eef0f3; }
.pm-plat.on .app-icon { opacity: 1; filter: none; transform: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }
.pm-plat.on:hover .app-icon { transform: translateY(-2px); }
.pm-plat:active .app-icon { transform: scale(0.88); }
/* A Dock-style dot under the name says "this one's going" */
.pm-plat::after {
  content: ""; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: #fff; opacity: 0; transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s var(--ease);
}
.pm-plat.on::after { opacity: 0.9; transform: none; }
.pm-plat:disabled { cursor: default; }
.pm-plat:disabled .app-icon { opacity: 0.12; transform: scale(0.9); }
.pm-plat:focus { outline: none; }
.pm-plat:focus-visible .app-icon { box-shadow: var(--ring); }

.app-icon {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 23%;  /* the iOS icon silhouette */
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.app-icon svg, .app-icon img { width: 100%; height: 100%; display: block; }
.app-icon.raster { background: none; box-shadow: none; }

/* caption */
.pm-field {
  border-radius: 16px; background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.pm-field:focus-within { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pm-field textarea {
  display: block; width: 100%; min-height: 150px; max-height: 240px; field-sizing: content;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  padding: 16px 18px 6px; border: 0; background: none; resize: none; outline: none;
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.55;
}
.pm-field textarea::placeholder { color: #5c606a; }
.pm-field textarea::-webkit-scrollbar { width: 12px; }
.pm-field textarea::-webkit-scrollbar-track { background: transparent; }
.pm-field textarea::-webkit-scrollbar-thumb {
  border: 4px solid transparent; border-radius: 8px; background: rgba(255, 255, 255, 0.16) padding-box;
}
.pm-field textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.28); }
.pm-field textarea::-webkit-scrollbar-corner { background: transparent; }
.pm-field textarea:focus, .pm-field textarea:focus-visible { outline: none; box-shadow: none; } /* the field glows instead */
.pm-field-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 18px 12px; color: #5c606a; font-size: 11.5px; font-variant-numeric: tabular-nums;
}
#pm-platform-hint { color: #8d929c; }

/* options: label left, switch right, no boxes */
.pm-opts { display: grid; gap: 4px; }
.pm-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 0; cursor: pointer;
}
.pm-opt[hidden] { display: none; }
.pm-opt-t { display: grid; gap: 2px; min-width: 0; }
.pm-opt-t b { font-size: 13.5px; font-weight: 550; color: #eceef2; }
.pm-opt-t small { font-size: 12px; color: #6f747e; }
.pm-opt input[type=checkbox] { flex: none; width: 38px; height: 22px; }
.pm-opt input[type=checkbox]::before { width: 18px; height: 18px; }
.pm-opt input[type=checkbox]:checked::before { transform: translateX(16px); }
.pm-date {
  width: 100%; margin: 2px 0 10px; padding: 11px 14px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); color: var(--text); color-scheme: dark;
  font: inherit; font-size: 13.5px; outline: none;
}
.pm-date[hidden] { display: none; }
.pm-date:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* connect nudge */
.pm-connect {
  margin-top: 18px; padding: 16px 18px; border-radius: 16px;
  background: rgba(62, 166, 255, 0.08);
}
.pm-connect b { display: block; font-size: 13.5px; font-weight: 600; color: #eaf4ff; }
.pm-connect p { margin-top: 3px; color: #9aa6b4; font-size: 12.5px; line-height: 1.45; }
.pm-connect .pm-link { margin-top: 8px; }
.pm-key { display: flex; gap: 6px; margin-top: 10px; }
.pm-key input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 0; border-radius: 10px; outline: none;
  background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-size: 13px;
}
.pm-key button {
  flex: none; padding: 0 14px; border: 0; border-radius: 10px;
  background: #fff; color: #000; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}

/* status + scheduled */
.pm-results, .pm-jobs { display: grid; gap: 4px; }
.pm-res {
  display: grid; grid-template-columns: 24px auto 1fr auto; align-items: center; gap: 12px;
  min-height: 36px; font-size: 12.5px;
}
.pm-res .app-icon { width: 24px; height: 24px; }
.pm-res b { font-weight: 600; color: #eceef2; }
.pm-res-msg { color: #8d929c; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-res:not(:has(a, .pm-res-copy)) .pm-res-msg { grid-column: 3 / span 2; }
.pm-res.ok .pm-res-msg { color: #5fd07e; }
.pm-res.bad .pm-res-msg { color: #ff7b72; white-space: normal; }
.pm-res.wait .pm-res-msg::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50%; background: #8d929c; animation: pm-pulse 1.1s ease-in-out infinite;
}
@keyframes pm-pulse { 50% { opacity: 0.25; } }
.pm-res-copy {
  height: 26px; padding: 0 10px; border: 0; border-radius: 8px;
  background: #fff; color: #000; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.pm-job {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 34px; font-size: 12.5px;
}
.pm-res a, .pm-job-x {
  display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); color: #b9bdc6; cursor: pointer;
}
.pm-res a:hover, .pm-job-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pm-res a .ph, .pm-job-x .ph { width: 13px; height: 13px; }
.pm-job-when { color: #9fd3ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-job-title { color: #a9adb6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* one big button that fills as the file goes up */
.pm-foot { padding: 14px 28px 24px; }
.pm-go {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: 54px; border: 0; border-radius: 16px; cursor: pointer;
  background: #fff; color: #000; font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
  transition: transform 0.18s var(--ease), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  --p: 0;
}
.pm-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(255, 255, 255, 0.16); }
.pm-go:active:not(:disabled) { transform: scale(0.985); }
.pm-go-in {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-variant-numeric: tabular-nums;
}
.pm-go-in [data-icon] { display: inline-flex; }
.pm-go .ph { width: 17px; height: 17px; }
.pm-go-fill {
  position: absolute; inset: 0; z-index: 1; background: #fff; color: #000;
  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); /* the button itself rounds the corners */
  transition: clip-path 0.35s cubic-bezier(0.25, 0.8, 0.3, 1);
  visibility: hidden;
}
/* Working: the button goes dark and fills with white as the steps complete;
   the black copy of the label rides on the fill, so the words invert at its edge. */
.pm-go.busy, .pm-go.done { background: #1d1d22; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); cursor: default; }
.pm-go.busy .pm-go-fill, .pm-go.done .pm-go-fill { visibility: visible; }
.pm-go.busy .pm-go-fill::after {
  /* a slow sheen travels over the filled part so it never looks stuck */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(62, 166, 255, 0.16) 50%, transparent 70%);
  background-size: 250% 100%; animation: pm-sheen 1.6s linear infinite;
}
@keyframes pm-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.pm-go:disabled:not(.busy):not(.done) { cursor: default; background: rgba(255, 255, 255, 0.07); color: #6f747e; box-shadow: none; }
.pm-go.done.bad .pm-go-fill { visibility: hidden; }
.pm-go.done.bad .pm-go-in { color: #ff8a80; }
.pm-foot-note {
  min-height: 16px; margin-top: 10px; text-align: center;
  color: #6f747e; font-size: 11.5px; font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  #export-modal, #progress-overlay, #post-modal { padding: 12px; align-items: flex-end; }
  .pm-card { grid-template-columns: 1fr; grid-template-rows: 46vh minmax(0, 1fr); height: calc(100dvh - 24px); border-radius: 22px; }
  .pm-stage { padding: 16px 18px 12px; gap: 12px; }
  .pm-head { padding: 18px 20px 0; }
  .pm-body { padding: 4px 20px 14px; }
  .pm-foot { padding: 10px 20px 16px; }
  .xs-card { grid-template-columns: 1fr; grid-template-rows: 34vh minmax(0, 1fr); height: calc(100dvh - 24px); border-radius: 22px; }
  .xs-head { padding: 18px 18px 4px; }
  .xs-body { padding: 10px 18px 14px; }
  .xs-foot { padding: 12px 16px 16px 18px; }
  #progress-overlay { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rp, .xs-card { animation: none; }
}