/* Clipsy — minimal dark UI. One accent color, flat cards, no noise. */

:root {
  --bg: #e7e2d9;                      /* warmer, deeper — not stark white */
  --card: rgba(255, 255, 255, .62);   /* translucent so the colour glows tint through */
  --card-solid: #ffffff;              /* for modals/menus that must stay opaque */
  --card-2: #ded8ce;
  --line: #e5e1da;
  --text: #1a1c1f;
  --mut: #6b7178;
  --acc: #ff6d3d;
  --acc-soft: rgba(255, 109, 61, .12);
  --ok: #1f9d61;
  --warn: #b07d1a;
  --err: #d93a44;
  --r: 12px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must always win. The browser hides [hidden] via its own
   stylesheet, so ANY author-level `display` on an element silently defeats it —
   which is how a `display:flex` added to centre the home page left that page on
   screen forever, with every other view stacking underneath it. */
[hidden] { display: none !important; }

html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, "Segoe UI", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Soft colour glows behind everything, so the app feels like the same world as
   the landing page — not a flat white box. Static (no animation) so it stays
   calm and smooth even on low-end phones. The white cards float on top; the
   glows peek through the margins and open areas. */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg .aurora { position: absolute; border-radius: 50%; filter: blur(85px); }
.bg .a1 {
  width: 620px; height: 620px; top: -220px; left: -140px;
  background: radial-gradient(circle at 42% 42%, #ff6d3d, transparent 66%);
  opacity: .3;
}
.bg .a2 {
  width: 560px; height: 560px; top: -170px; right: -150px;
  background: radial-gradient(circle at 55% 45%, #ff3d7f, transparent 66%);
  opacity: .26;
}
.bg .a3 {
  width: 600px; height: 600px; top: 40vh; left: 33%;
  background: radial-gradient(circle at 50% 50%, #eab39d, transparent 66%);
  opacity: .22;
}

/* ---------- header ---------- */
/* ---------- moments as cards ----------
   Every selector is prefixed with #sug-card on purpose. The previous
   list-row layout still defines .sug, #sug-list, .sug .pick and .sug .go
   further down this file, and at equal specificity the LATER rule wins —
   so plain .sug here lost and the cards couldn't lay out at all. An id in
   front beats a bare class no matter what order they appear in. */
#sug-card #sug-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; align-items: stretch;
}
#sug-card .sug {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0; gap: 0;
  background: var(--card-solid); border: 1.5px solid var(--line);
  border-radius: 13px; overflow: hidden; cursor: pointer;
}
#sug-card .sug:hover { border-color: #c9c3b9; background: var(--card-solid); }
#sug-card .sug.active { border-color: var(--acc); background: var(--card-solid); }
#sug-card .sug.picked { border-color: var(--acc); background: var(--acc-soft); }
#sug-card #sug-list:has(> .sug:only-child) { grid-template-columns: minmax(0, 1fr); }
#sug-card #sug-list:has(> .sug:only-child) { display: block; }
#sug-card #sug-list:has(> .sug:only-child) > .sug { width: 100%; }

#sug-card .sug-thumb {
  display: block;
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #14161a; flex: 0 0 auto;
  /* aspect-ratio only sets a PREFERRED height — content can still push the
     box taller. A portrait source frame did exactly that (315px wide card,
     556px tall thumbnail). Clipping stops the image having a say. */
  overflow: hidden;
}
#sug-card .sug-thumb img {
  /* absolute so the image can never contribute to the box's height, whatever
     shape the source frame is */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#sug-card .sug-thumb .pick {
  position: absolute; top: 8px; left: 8px; z-index: 2; padding: 0;
  background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 4px 5px 2px;
}
#sug-card .sug-dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .72); color: #fff; border-radius: 6px;
  padding: 2px 7px; font-size: 11.5px; font-weight: 650;
}

#sug-card .sug .body {
  padding: 11px 12px 4px; display: flex; flex-direction: column; gap: 7px;
  flex: 1 1 auto; min-width: 0;
}
#sug-card .sug-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#sug-card .sug .sug-t { font-size: 14px; font-weight: 650; line-height: 1.3; }

#sug-card .sug-metrics { display: flex; gap: 18px; }
#sug-card .sug-metrics .metric { display: flex; flex-direction: column; gap: 1px; }
#sug-card .sug-metrics .metric b {
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
#sug-card .sug-metrics .score-n { color: var(--ok); }

#sug-card .sug .why { display: flex; flex-direction: column; gap: 2px; }
#sug-card .sug .sug-r {
  font-size: 12.5px; color: var(--mut); line-height: 1.45;
  font-style: italic; margin: 0;
}
#sug-card .sug .actions {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 10px 12px 12px; margin-top: auto;
}
#sug-card .sug .actions .go {
  flex: 1; padding: 7px 12px; border-radius: 8px;
  background: var(--acc); border: 0; color: #24160f;
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
#sug-card .sug .actions .go:hover { background: #ff7f55; color: #24160f; }

/* ---------- left rail ---------- */
:root { --rail: 232px; }

.sidenav {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 40;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 12px;
  background: var(--card-solid); border-right: 1px solid var(--line);
}
.sn-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 14px; color: inherit; text-decoration: none;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
}
.sn-brand svg { color: var(--acc); }

.sn-nav { display: flex; flex-direction: column; gap: 2px; }
.sn-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--mut); cursor: pointer; text-align: left;
}
.sn-item:hover { background: var(--bg); color: var(--text); }
.sn-item.active { background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.sn-item[hidden] { display: none; }
.sn-count {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--mut); background: var(--bg); padding: 1px 7px; border-radius: 999px;
}

.sn-credits {
  margin-top: auto; padding: 13px 12px;
  background: var(--bg); border-radius: 11px;
}
.sn-cred-top { display: flex; align-items: center; justify-content: space-between; }
.sn-cred-num { display: flex; align-items: baseline; gap: 5px; margin: 6px 0 8px; }
.sn-cred-num b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sn-cred-num span { font-size: 12px; }
.sn-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sn-bar > div { height: 100%; width: 0; background: var(--acc); border-radius: 3px; }
.sn-credits .btn { margin-top: 10px; }

/* Everything that isn't the rail starts to its right. */
body > header, body > main, body > .topbar { margin-left: var(--rail); }
.modal-backdrop, .drawer-backdrop { left: 0; }

@media (max-width: 900px) {
  .sidenav { display: none; }
  body > header, body > main, body > .topbar { margin-left: 0; }
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .2px;
  color: inherit; text-decoration: none;
}
.logo svg { color: var(--acc); }
/* ---------- the clip pop-up: video left, controls right, one button ----------
   Two classes on purpose. `.modal-box` sets width: min(420px, 100%) and is
   declared further down this file, so a single-class rule here loses on source
   order and the video pane collapses to nothing. */
.modal-box.clip-box {
  position: relative;                 /* the close button is absolute */
  width: min(1140px, 96vw);
  max-height: 92vh; display: flex; flex-direction: column; padding: 20px 22px;
}
.clip-box-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.clip-box-head h3 { font-size: 18px; margin: 0 0 2px; }
.clip-box-head p { margin: 0; }

.clip-panes {
  /* a floor on the video column so it can never be squeezed away by the
     controls the way it was when the box was 420px wide */
  display: grid; grid-template-columns: minmax(340px, 1fr) 380px;
  gap: 18px; min-height: 0; flex: 1 1 auto;
  /* Without this the panes keep their natural height and spill over the
     footer — which is exactly what happened when the render bar appeared
     and made the footer taller. They shrink now; the footer never moves. */
  overflow: hidden;
}
@media (max-width: 900px) {
  .clip-panes { grid-template-columns: minmax(0, 1fr); }
}
.clip-pane-video {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  align-items: center; min-height: 0; overflow: hidden;
}
/* The frame is the output's shape. object-fit: cover then crops the source
   into it — the same centre crop the render does — so a 16:9 recording
   previews as the 9:16 clip it's about to become. */
.vid-frame {
  position: relative; background: #000; border-radius: 10px; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9;
  /* shrink before anything else does — the transport and the footer below
     are fixed-size and must never be pushed off */
  flex: 0 1 auto; min-height: 0; max-height: 100%;
}
.vid-frame.vertical { aspect-ratio: 9 / 16; width: auto; height: 100%; }
.vid-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; background: #000;
}
.ratio-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  pointer-events: none;
}
.clip-video-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; width: 100%;
}

/* transport for the source preview — measures the clip, not the episode */
.mini-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px;
}
.mini-bar[hidden] { display: none; }
.mini-play {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acc); color: #fff; border: 0; cursor: pointer;
}
.mini-play:disabled { opacity: .45; background: var(--line); color: var(--mut); cursor: not-allowed; }
.mini-track {
  flex: 1; height: 6px; border-radius: 3px; background: var(--line);
  cursor: pointer; position: relative; min-width: 60px;
}
.mini-track.is-disabled { opacity: .48; cursor: not-allowed; }
.mini-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 3px; background: var(--acc);
}
.mini-time {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--mut);
}

/* the controls column scrolls on its own so the button below never moves */
.clip-pane-controls { overflow-y: auto; padding-right: 4px; min-height: 0; }
.mobile-settings-cue {
  display: none;
  margin: 0 0 10px;
  color: var(--mut);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mobile-settings-cue span { color: var(--acc); font-size: 15px; }
/* The download of a finished clip is the payoff — it gets its own colour
   rather than looking like every other secondary button. */
#clip-dl {
  background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 650;
}
#clip-dl:hover { background: #1d4ed8; border-color: #1d4ed8; }

.done-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(31, 157, 97, .14); color: var(--ok);
  font-size: 12px; font-weight: 650;
}
.need-logo { margin: 6px 0 0; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--acc); text-decoration: underline; cursor: pointer;
}

.clip-group { margin-bottom: 18px; }
.clip-group > .label { margin-bottom: 8px; }

/* a group that folds: header always visible, body opens on click */
.clip-group.foldable { margin-bottom: 14px; }
.fold-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
  font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.fold-head:hover { border-color: #c9c3b9; }
.fold-head .label { margin: 0; }
.fold-val { display: flex; align-items: center; gap: 7px; color: var(--mut);
            font-size: 13px; }
.fold-val b { color: var(--acc); font-weight: 650; }
.clip-group.open .fold-head { border-color: var(--acc); }
.clip-group.open .chev { transform: rotate(180deg); }
.fold-body { padding-top: 10px; }
.fold-body[hidden] { display: none; }
.clip-group #cap-style,
.clip-group #speed-panel { border: 0; padding: 0; margin: 0; background: none; }

/* One button, across the whole card, with the warning centred above it. */
.clip-box-foot {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
#render-slot { width: 100%; }
/* #render-btn only — NOT every .btn in the slot. The progress bar's Cancel
   lives in here too, and a full-width Cancel shoved the status text into a
   narrow column where it wrapped one word per line. */
#render-slot #render-btn { margin-top: 0; width: 100%; font-size: 15px; padding: 12px 18px; }
#render-slot .renderbar { margin-top: 10px; }
/* status on its own line, then a modest Cancel centred under it */
#render-slot .renderbar .row {
  flex-direction: column; align-items: center; gap: 8px; margin-top: 8px;
}
#render-slot .renderbar #render-label { text-align: center; }
#render-slot .renderbar .cancel-btn { width: auto; min-width: 120px; }

/* Bright while there is something new to apply; grey once the clip on disk
   already matches every setting. */
#render-btn.is-stale {
  background: var(--card-2); border-color: var(--line); color: var(--mut);
  font-weight: 500;
}
.stale-note {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; color: var(--warn);
}
.stale-note svg { flex: 0 0 auto; }

.cap-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; overflow-y: auto; padding: 2px; margin: 0 -2px;
}
@media (max-width: 620px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cap-swatch {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 7px; border: 2px solid transparent; border-radius: 11px;
  background: #14161a; font: inherit; color: var(--mut); cursor: pointer;
  overflow: hidden; text-align: center;
}
.cap-swatch img { display: block; width: 100%; height: auto; }
.cap-swatch span { font-size: 12px; font-weight: 550; }
.cap-swatch:hover { border-color: #4a5058; }
.cap-swatch.active { border-color: var(--acc); color: var(--text); }
.cap-swatch.active span { color: var(--acc); }

.cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- account menu (header, right) ---------- */
.account { position: relative; }
.account-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 4px 10px 4px 4px; font: inherit; font-size: 13.5px; color: inherit;
  cursor: pointer;
}
.account-btn:hover { border-color: var(--line); background: var(--card); }
.account-btn .chev { color: var(--mut); }
.account-name { font-weight: 550; max-width: 150px; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--acc); color: #fff; font-size: 12.5px; font-weight: 700;
  background-size: cover; background-position: center;
}
.avatar.lg { width: 40px; height: 40px; font-size: 16px; }

.account-menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  width: 330px; padding: 14px;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(20, 22, 26, .16);
}
.am-who { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.am-who-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.am-who-text strong { font-size: 14px; }
.am-who-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.am-plan { background: var(--bg); border-radius: 10px; padding: 11px 12px; }
.am-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-pill {
  display: inline-flex; align-items: center; flex: 0 0 auto; width: fit-content;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--line); color: var(--mut);
}
.plan-pill.plan-pro, .plan-pill.plan-studio { background: var(--acc); color: #fff; }
.plan-pill.plan-studio { background: #5f55d9; }
.am-perks { list-style: none; margin: 9px 0 0; padding: 0;
            display: flex; flex-direction: column; gap: 5px; }
.am-perks li {
  font-size: 12.5px; color: var(--mut);
  display: flex; align-items: flex-start; gap: 7px; line-height: 1.4;
}
.am-perks li::before { content: "—"; color: var(--line); flex: 0 0 auto; }
.am-perks li.on::before { content: "✓"; color: var(--ok); font-weight: 700; }

.am-credit-breakdown {
  display: grid; gap: 5px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line);
}
.am-credit-breakdown span {
  display: flex; justify-content: space-between; gap: 12px;
  color: var(--mut); font-size: 11.5px;
}
.am-credit-breakdown b { color: var(--text); font-weight: 600; }
.billing-warning {
  margin: 10px 0 0; padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(217,58,68,.25); background: rgba(217,58,68,.08);
  color: var(--err); font-size: 11.5px; line-height: 1.45;
}
#am-pro { margin-top: 12px; }
.am-sep { height: 1px; background: var(--line); margin: 13px -14px 9px; }
.am-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 6px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.am-item:hover { background: var(--bg); }
.am-item svg { color: var(--mut); }

.env { font-size: 12px; color: var(--mut); display: flex; gap: 14px; }
.env b { font-weight: 500; color: var(--text); }
.env .bad { color: var(--err); }

main { max-width: 1160px; margin: 0 auto; padding: 26px 22px 60px; }

/* ---------- shared bits ---------- */
h2 { font-size: 17px; font-weight: 600; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 12px;
}
.mut { color: var(--mut); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; margin: 8px 0 2px; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; }
.row.spread { justify-content: space-between; gap: 10px; }
.row.gap, .gap { gap: 8px; }
.row.wrap { flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 15px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s, opacity .15s;
}
.btn:hover { border-color: #c9c3b9; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #1c0e06; font-weight: 600; }
.btn.primary:hover { background: #ff7f55; }
.btn.danger { background: #c9443e; border-color: #c9443e; color: #fff; }
.btn.danger:hover { background: #a93430; border-color: #a93430; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn.block { width: 100%; margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

input[type="text"], input:not([type]) {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit; font-size: 13.5px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s;
}
input:focus { border-color: var(--acc); }
input::placeholder { color: #5c656f; }

/* ---------- banner / toast ---------- */
.banner {
  background: var(--acc-soft);
  border: 1px solid rgba(255, 109, 61, .35);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 13.5px;
}
.banner code {
  font-family: var(--mono); font-size: 12px;
  background: rgba(0,0,0,.35); padding: 2px 7px; border-radius: 6px;
}

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #22272d; color: #eef1f4; border: 1px solid #2f353d;
  border-radius: 10px; padding: 10px 18px;
  font-size: 13.5px; z-index: 50;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  max-width: min(520px, 90vw);
}
#toast.err { border-color: rgba(255, 99, 105, .5); }

/* billing return state */
.billing-banner {
  display: flex; align-items: center; gap: 13px; margin-bottom: 20px;
  padding: 13px 14px; border: 1px solid rgba(255,109,61,.35);
  border-radius: 12px; background: var(--acc-soft);
}
.billing-banner[hidden] { display: none; }
.billing-banner strong { display: block; font-size: 13.5px; }
.billing-banner p { margin: 2px 0 0; color: var(--mut); font-size: 12.5px; }
.billing-banner > div { flex: 1; }
.billing-banner > button {
  border: 0; background: transparent; color: var(--mut); cursor: pointer;
  font-size: 21px; line-height: 1;
}
.billing-spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,109,61,.25); border-top-color: var(--acc);
  animation: billing-spin .8s linear infinite;
}
.billing-spinner.done { border: 0; animation: none; display: grid; place-items: center; }
.billing-spinner.done::before { content: "✓"; color: var(--ok); font-weight: 800; }
@keyframes billing-spin { to { transform: rotate(360deg); } }

/* checkout helpers */
.billing-backdrop { z-index: 180; }
.billing-box { position: relative; width: min(440px, 100%); padding: 28px; }
.billing-box .modal-x { top: 14px; right: 14px; }
.billing-box h3 { margin: 5px 32px 7px 0; font-size: 20px; }
.billing-kicker {
  color: var(--acc); font-size: 10.5px; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.topup-stepper {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: stretch;
  gap: 8px; margin: 22px 0 15px;
}
.topup-stepper button {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card-2);
  color: var(--text); font-size: 24px; cursor: pointer;
}
.topup-stepper button:disabled { opacity: .35; cursor: default; }
.topup-stepper > div {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 10px; background: var(--bg);
}
.topup-stepper b { font-size: 24px; }
.topup-stepper span { color: var(--mut); font-size: 12px; }
.topup-math {
  display: grid; gap: 8px; padding: 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
}
.topup-math span {
  display: flex; justify-content: space-between; gap: 16px;
  color: var(--mut); font-size: 12.5px;
}
.topup-math b { color: var(--text); }
.billing-box .modal-actions { margin-top: 18px; }

/* ---------- render confirmation modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 7, 9, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  width: min(420px, 100%);
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.modal-box h3 { font-size: 15px; margin-bottom: 12px; }
.modal-box input { margin-bottom: 12px; }
#modal-summary { margin-bottom: 18px; line-height: 1.6; }
.modal-actions { gap: 10px; }
.modal-actions .btn { flex: 1; }

/* ---------- home: dropzone ---------- */
.dropzone {
  border: 1.5px dashed #333a43;
  border-radius: 16px;
  padding: 46px 28px 34px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.dropzone.over { border-color: var(--acc); background: var(--acc-soft); }
.dropzone svg { color: var(--mut); margin-bottom: 12px; }
.dropzone h2 { margin-bottom: 4px; }
.dropzone p { margin-bottom: 16px; }
.or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px auto 14px; max-width: 460px;
  color: #5c656f; font-size: 12px;
}
.or::before, .or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.path-row { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.upbar { max-width: 560px; margin: 18px auto 0; }
.upbar-track { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
#upload-fill { height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .2s; }
.upbar span { display: block; margin-top: 7px; }
.upbar.is-error span { color: #b43d35; }

/* ---------- home: branding (logo/outro) ---------- */
.branding-card { margin-top: 20px; }
.branding-row { align-items: center; }
.logo-preview {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  background: var(--card-2); border: 1.5px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#logo-placeholder { font-size: 10.5px; color: var(--mut); text-align: center; }
.branding-text { flex: 1; min-width: 0; }
.branding-text p { margin-bottom: 8px; }

/* ---------- home: episode cards ---------- */
#library { margin-top: 34px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ep-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.ep-card:hover { border-color: #c9c3b9; }
.ep-card .ep-title { font-weight: 600; margin-bottom: 4px; padding-right: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-card .meta { font-size: 12px; color: var(--mut); }
.ep-card .meta .ok { color: var(--ok); }
.ep-card .meta .no { color: var(--warn); }
.ep-card .meta .missing { color: var(--err); }
.ep-card .x {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: #5c656f;
  font-size: 15px; cursor: pointer; padding: 3px 7px; border-radius: 6px;
}
.ep-card .x:hover { color: var(--err); background: var(--card-2); }

/* ---------- studio layout ---------- */
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.topbar-text { min-width: 0; flex: 1; }
.topbar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The video is the product, so it gets the room. The old 400px sidebar left
   the player boxed into a corner of a 1160px page; now the studio uses the
   width the screen actually has and the player leads. */
/* One column, full width. The old two-column split boxed the video into a
   corner and squeezed the moments into a narrow strip; now every section gets
   the whole width and the page reads top to bottom: watch, pick, tweak. */
/* Video left, everything that sets the clip in a rail on the right. A 9:16
   crop leaves the player narrow with dead space either side, and stacking the
   controls underneath meant scrolling away from the thing being trimmed. */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 18px;
  align-items: start;
}
/* display:contents dissolves the old column wrappers so their cards become
   direct children of the grid and can be placed individually. */
.col-left, .col-right { display: contents; }
#player-card { grid-column: 1; grid-row: 1; }
#clip-card   { grid-column: 2; grid-row: 1; }
/* everything else runs full width underneath, in DOM order */
#sug-card, #batch-panel, #clips-card, .transcript-card { grid-column: 1 / -1; }

/* One column when there's no room for a rail: the controls fall back under
   the player rather than being squeezed to nothing. */
@media (max-width: 1040px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  #player-card, #clip-card { grid-column: 1; grid-row: auto; }
}

.trim-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px;
  border: 1px solid rgba(229, 225, 218, .92);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(250,245,239,.72));
}
.trim-action {
  min-width: 0;
  min-height: 43px;
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 10px;
  line-height: 1.15;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease,
    box-shadow .15s ease, color .15s ease;
}
.trim-action-icon { flex: 0 0 auto; color: var(--mut); }
.trim-action-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.trim-action-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trim-action-copy small {
  color: var(--mut);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.trim-set { background: rgba(255,255,255,.76); }
.trim-set:hover {
  border-color: rgba(255, 109, 61, .55);
  background: #fff;
  box-shadow: 0 5px 12px rgba(104, 72, 47, .08);
  transform: translateY(-1px);
}
.trim-set:hover .trim-action-icon { color: var(--acc); }
.trim-preview {
  background: var(--acc-soft);
  border-color: rgba(255, 109, 61, .38);
  color: #8d351d;
  font-weight: 650;
}
.trim-preview .trim-action-icon { color: var(--acc); }
.trim-preview .trim-action-copy small { color: #a85d46; }
.trim-preview:hover {
  background: rgba(255, 109, 61, .18);
  border-color: var(--acc);
  box-shadow: 0 6px 14px rgba(255, 109, 61, .14);
  transform: translateY(-1px);
}
.trim-clear {
  border-color: transparent;
  background: transparent;
  color: var(--mut);
}
.trim-clear:hover {
  border-color: rgba(217, 58, 68, .22);
  background: rgba(217, 58, 68, .06);
  color: var(--err);
}
.trim-clear:hover .trim-action-icon { color: var(--err); }
.trim-action:focus-visible {
  outline: 3px solid rgba(255, 109, 61, .3);
  outline-offset: 2px;
}
.trim-action:active { transform: translateY(0); }

@media (max-width: 420px) {
  .trim-action { padding-inline: 7px; gap: 7px; }
  .trim-action-copy strong { font-size: 11.5px; }
  .trim-action-copy small { font-size: 9.5px; }
}

/* the caption-style row in the rail — a door that also says what's behind it */
.cap-jump {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 12px; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.cap-jump:hover { border-color: #c9c3b9; }
.cap-jump-label { display: flex; align-items: center; gap: 8px; }
.cap-jump-label svg { color: var(--mut); }
.cap-jump-val { color: var(--mut); }
.cap-jump-val b { color: var(--acc); font-weight: 650; }
/* Taller now that the controls sit beside the player instead of below it —
   the vertical room they used to take is the player's. */
#player { width: 100%; border-radius: 8px; background: #000; margin-bottom: 10px; max-height: 440px; transition: max-height .2s ease; }

/* ---------- trim timeline (drag handles, no typing) ---------- */
.timeline {
  position: relative;
  height: 30px;
  margin: 4px 2px 2px;
  cursor: pointer;
  touch-action: none;
}
.tl-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 5px;
  margin-top: -2.5px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 3px;
}
.tl-range {
  position: absolute; top: 50%; height: 5px; margin-top: -2.5px;
  background: var(--acc); border-radius: 3px; pointer-events: none;
}
.tl-playhead {
  position: absolute; top: 2px; bottom: 2px; width: 2px;
  background: rgba(0,0,0,.42); pointer-events: none;
}
.tl-handle {
  position: absolute; top: 50%; width: 15px; height: 15px;
  margin-top: -7.5px; margin-left: -7.5px;
  background: #fff; border: 2.5px solid var(--acc);
  border-radius: 50%; cursor: ew-resize;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
  transition: transform .1s;
}
.tl-handle:hover { transform: scale(1.18); }
.tl-handle.dragging { transform: scale(1.3); }

/* ---------- clip card ---------- */
.times-row { display: flex; gap: 10px; margin-bottom: 12px; }
.times-row label {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mut);
}
.times-row input { font-family: var(--mono); font-size: 13px; }
.time-field { display: flex; gap: 5px; align-items: stretch; }
.time-field input { min-width: 0; flex: 1; }
.nudge { display: flex; flex-direction: column; gap: 2px; flex: none; }
.nb {
  width: 22px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--line); color: var(--mut);
  border-radius: 4px; cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.nb:hover { border-color: var(--acc); color: var(--acc); }
.nb:active { background: var(--acc-soft); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; color: var(--text);
  letter-spacing: 0;
}
.pill.ok { color: var(--ok); border-color: rgba(76, 195, 138, .4); }
.pill.warn { color: var(--warn); border-color: rgba(229, 181, 103, .4); }

.toggles { display: flex; gap: 18px; margin-bottom: 12px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; user-select: none; }
.check input {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid #c9c3b9; border-radius: 5px;
  background: var(--bg); cursor: pointer; position: relative;
  transition: background .12s, border-color .12s;
}
.check input:checked { background: var(--acc); border-color: var(--acc); }
.check.disabled { opacity: .45; cursor: not-allowed; }
.check.disabled input { cursor: not-allowed; }
.check input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #1c0e06; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- caption style panel ---------- */
#cap-style {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  background: var(--card-2); color: var(--mut);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s;
}
.chip:hover { color: var(--text); border-color: #c9c3b9; }
.chip.active { background: var(--acc-soft); color: var(--acc); border-color: rgba(255,109,61,.45); }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chip:disabled:hover { color: var(--mut); border-color: var(--line); }

.cap-preview {
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23151515'/%3E%3Crect width='20' height='20' fill='%23191919'/%3E%3Crect x='20' y='20' width='20' height='20' fill='%23191919'/%3E%3C/svg%3E");
  border-radius: 8px;
  height: 86px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 6px 10px;
}
.cap-text {
  text-align: center; line-height: 1.15; letter-spacing: .5px;
  white-space: nowrap;
}
.cap-text.upper { text-transform: uppercase; }
.cap-text.p-classic {
  font-family: Arial, sans-serif; font-weight: 800; color: #fff;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 4px 0 #000;
}
.cap-text.p-yellow {
  font-family: Impact, "Arial Black", sans-serif; font-weight: 400; color: #ffee00;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 4px 0 #000;
}
.cap-text.p-boxed {
  font-family: Arial, sans-serif; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.72); padding: .18em .45em; border-radius: .18em;
  white-space: normal;
}
.cap-text.p-minimal {
  font-family: "Segoe UI", sans-serif; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8);
}
/* The overlay on the player exists to place captions by dragging, so these
   only need to be close. The swatch grid and "Try on this clip" are where
   the real rendering is shown. */
.cap-text.p-neon {
  font-family: Impact, "Arial Black", sans-serif; color: #ffee00;
  text-shadow: 0 0 6px #ffa500, 0 0 14px #ff8c00, 0 0 3px #000;
}
.cap-text.p-electric {
  font-family: Arial, sans-serif; font-weight: 800; color: #00f0ff;
  text-shadow: 0 0 7px #0099ff, 0 0 16px #0066ff, 0 0 3px #000;
}
.cap-text.p-pop, .cap-text.p-sunburst {
  font-family: Arial, sans-serif; font-weight: 800; color: #fff;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}
.cap-text.p-sunburst { font-family: Impact, "Arial Black", sans-serif; font-weight: 400; }
.cap-text.p-impact {
  font-family: Impact, "Arial Black", sans-serif; color: #ff3030;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}
.cap-text.p-mint {
  font-family: Arial, sans-serif; font-weight: 800; color: #00d4d4;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
}
.cap-text.p-ink {
  font-family: Arial, sans-serif; font-weight: 800; color: #111;
  background: #fff; padding: .18em .45em; border-radius: .14em; white-space: normal;
}
/* ---------- live caption overlay on the player ---------- */
.player-wrap { position: relative; margin-bottom: 10px; }
.player-wrap #player { margin-bottom: 0; }
.crop-guide {
  position: absolute; top: 0; bottom: 0; width: 0;
  background: rgba(5, 6, 8, .55);
  pointer-events: none; z-index: 2;
}
#guide-l { left: 0; border-right: 1px dashed rgba(255,255,255,.28); }
#guide-r { right: 0; border-left: 1px dashed rgba(255,255,255,.28); }
#cap-drag {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none; z-index: 3;
}
#cap-drag .cap-holder {
  position: relative;
  pointer-events: auto; cursor: ns-resize;
  user-select: none; touch-action: none;
  max-width: 92%;
  display: flex; justify-content: center;
}
#cap-drag .cap-holder .cap-text { white-space: pre-wrap; }
#cap-drag .cap-holder:hover .cap-text, #cap-drag.dragging .cap-text {
  outline: 1.5px dashed rgba(255, 109, 61, .85);
  outline-offset: 4px;
}
#cap-drag .drag-pill {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  background: var(--acc); color: #1c0e06;
  font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
  font-family: system-ui, sans-serif; text-shadow: none;
  white-space: nowrap;
}
#cap-drag:hover .drag-pill, #cap-drag.dragging .drag-pill { opacity: 1; }

.slider-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--mut);
  margin-bottom: 8px;
}
.slider-row span { width: 44px; }
.slider-row b { width: 38px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--text); font-weight: 500; }
.slider-row input[type="range"] {
  flex: 1; accent-color: var(--acc); height: 4px; cursor: pointer;
}
.cap-extra { font-size: 12px; color: var(--mut); justify-content: space-between; }
.wordsel { display: flex; align-items: center; gap: 6px; }
.wordsel select {
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 12.5px; padding: 3px 6px; outline: none;
}

/* ---------- speed panel ---------- */
#speed-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg);
}
#speed-panel input[type="range"] {
  width: 100%; accent-color: var(--acc); height: 4px; cursor: pointer;
  margin: 10px 0 10px;
}
#speed-panel .chips { margin-bottom: 0; }
.pill.sm {
  padding: 3px 9px; font-size: 12px; border-radius: 999px;
}

/* ---------- title & description panel ---------- */
#title-desc-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg);
}
#title-desc-fields { margin-top: 10px; }
#title-desc-fields label { display: block; margin: 8px 0 5px; }
#title-desc-fields label:first-child { margin-top: 0; }
.copy-row { display: flex; gap: 6px; align-items: flex-start; }
.copy-row input, .copy-row textarea {
  flex: 1; min-width: 0;
  font-family: inherit; resize: vertical;
}
.copy-row textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font-size: 13.5px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s;
}
.copy-row textarea:focus { border-color: var(--acc); }
.copy-btn { flex: none; padding: 8px 10px; font-size: 13px; }
.copy-btn.copied { color: var(--ok); border-color: rgba(76,195,138,.5); }

.renderbar { margin-top: 12px; }
.renderbar span { display: block; margin-top: 7px; }

#result { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.result-speed { margin-bottom: 10px; }
.result-speed .chips { margin-bottom: 0; }
.result-speed .chip { padding: 3px 9px; font-size: 11px; }

.result-trim {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; margin-bottom: 10px;
}
.rt-field { display: flex; align-items: center; gap: 6px; }
.rt-val {
  font-family: var(--mono); font-size: 12.5px; min-width: 40px; text-align: center;
}
.result-trim .nb { width: 20px; height: 20px; font-size: 12px; }
.result-trim .pill.sm { margin-left: auto; }
#rerender-btn { padding: 6px 14px; }
#result-video, .clip-mini video {
  display: block; max-width: 100%; max-height: 380px;
  margin: 0 auto 10px; border-radius: 8px; background: #000;
}

/* ============ Simplified studio ============
   Panels kept in the DOM but out of the first-run UI.

   NOT listed here any more: #cap-style, #speed-panel and #adv-toggles.
   buildSettingsDrawer() moves those three into the settings drawer at
   startup, and the drawer is hidden until opened — so this rule was no
   longer keeping them out of the main view, it was blanking the drawer's
   Captions, Pace and Cleanup sections. The headings rendered; the contents
   were display:none !important, which nothing could override. */
#title-desc-panel,
#cap-drag { display: none !important; }

/* ============ finished-short pop-up ============ */
/* The finished clip lands ON TOP of the clip pop-up, not behind it. Both use
   .modal-backdrop's z-index 90, and #clip-modal comes later in the document,
   so without this the result opened underneath the thing that launched it. */
/* Stacking order for the pop-ups, so document order never decides it:
   clip 90 (the .modal-backdrop default) < result 120 < name-this-short 150.
   The name card is reachable from the results pop-up, so it has to clear it. */
#result-modal { z-index: 120; }
#render-modal { z-index: 150; }
.result-box {
  position: relative;
  width: min(440px, 100%);
  max-height: 92vh; overflow-y: auto;
}
.result-box h3 { text-align: center; }
#result-modal #result-video { max-height: min(62vh, 560px); }
.modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--mut); font-size: 14px; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.modal-x:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* ---------- clips list ---------- */
.clip-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.clip-row:last-child { border-bottom: none; }
.clip-row .t { font-family: var(--mono); font-size: 12px; color: var(--mut); white-space: nowrap; }
.clip-row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-row a { color: var(--mut); text-decoration: none; font-size: 12.5px; }
.clip-row a:hover { color: var(--text); }
.clip-row .play { cursor: pointer; color: var(--acc); background: none; border: none; font-size: 13px; padding: 2px 6px; }

/* ---------- transcript ---------- */
.transcript-card { display: flex; flex-direction: column; min-height: 300px; }
.tr-center { text-align: center; padding: 60px 20px; }
.tr-center h3 { margin-bottom: 6px; }
.tr-center p { margin-bottom: 18px; }
.tr-center .small { margin-top: 14px; margin-bottom: 0; }

.bar { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; margin: 10px 0 14px; }
.bar > div { height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .4s; }
.bar.indeterminate > div {
  width: 34%;
  animation: slide 1.15s ease-in-out infinite alternate;
}
@keyframes slide { from { margin-left: -6%; } to { margin-left: 72%; } }

.live {
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
  color: var(--mut);
  overflow-y: auto; max-height: min(58vh, 560px);
  padding-right: 6px;
}
.live div { white-space: pre-wrap; }

.segments {
  overflow-y: auto;
  max-height: calc(100vh - 250px);
  min-height: 220px;
  margin-top: 8px;
  user-select: none;
}
.seg {
  display: flex; gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  border-left: 2.5px solid transparent;
}
.seg:hover { background: var(--card-2); }
.seg.sel { background: var(--acc-soft); border-left-color: var(--acc); }
.seg .ts {
  font-family: var(--mono); font-size: 11.5px;
  color: #5c656f; white-space: nowrap; padding-top: 2.5px; min-width: 44px;
}
.seg.sel .ts { color: var(--acc); }
.seg .tx { font-size: 13.5px; }

#tr-filter { flex: 1; }

/* ---------- AI suggestions ---------- */
.label.nom { margin-bottom: 0; }
#sug-card .row.spread { margin-bottom: 4px; }
#sug-setup { margin-top: 8px; }
#sug-setup code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--bg); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 6px;
}
#sug-progress { margin-top: 10px; }
.live.short { max-height: 130px; margin-top: 8px; }
#sug-list { margin-top: 10px; }
.sug {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.sug:hover { background: var(--card-2); }
.sug.active { background: var(--acc-soft); border-color: rgba(255,109,61,.35); }
.sug .score {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-soft); color: var(--acc);
  font-weight: 700; font-size: 13px;
}
.sug .body { min-width: 0; flex: 1; }
.sug .sug-top {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 3px; flex-wrap: wrap;
}
.sug-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 5px;
  line-height: 1.2;
}
.sug-badge.cat-hot-take {
  background: rgba(255, 75, 75, .12); color: #ff5555;
  border: 1px solid rgba(255, 75, 75, .28);
}
.sug-badge.cat-insight {
  background: rgba(56, 160, 255, .12); color: #429eff;
  border: 1px solid rgba(56, 160, 255, .28);
}
.sug-badge.cat-story {
  background: rgba(175, 95, 255, .12); color: #ba75ff;
  border: 1px solid rgba(175, 95, 255, .28);
}
.sug-badge.cat-qna {
  background: rgba(245, 175, 25, .12); color: #e59e10;
  border: 1px solid rgba(245, 175, 25, .28);
}
.sug-badge.cat-mindset {
  background: rgba(35, 185, 145, .12); color: #2ebc96;
  border: 1px solid rgba(35, 185, 145, .28);
}
.sug .sug-t { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.sug .sug-m { font-size: 11.5px; color: var(--mut); }
.sug .hook-preview {
  font-size: 12px; color: var(--text);
  margin-top: 4px; line-height: 1.35;
  opacity: .9;
}
.sug .hook-label {
  display: inline-block;
  background: var(--acc-soft); color: var(--acc);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
  margin-right: 5px; vertical-align: middle;
}
.sug .sug-r { font-size: 11.5px; color: var(--mut); margin-top: 4px; font-style: italic; }
.sug .go {
  flex: none; align-self: center;
  background: none; border: 1px solid var(--line); color: var(--mut);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.sug .go:hover { border-color: var(--acc); color: var(--acc); }
.sug .actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sug .rate { display: flex; gap: 4px; }
.sug .rate button {
  background: none; border: 1px solid var(--line); color: var(--mut);
  border-radius: 7px; padding: 4px 7px; font-size: 12px; cursor: pointer;
  line-height: 1;
}
.sug .rate button:hover { border-color: #c9c3b9; color: var(--text); }
.sug .rate button.up.active { background: rgba(76,195,138,.14); border-color: rgba(76,195,138,.5); color: var(--ok); }
.sug .rate button.down.active { background: rgba(255,99,105,.14); border-color: rgba(255,99,105,.5); color: var(--err); }

/* scrollbars that match */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cdc8c0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #b6b0a6; }
::-webkit-scrollbar-track { background: transparent; }


/* ---------- studio: give the screen to the video ---------- */
#view-studio { max-width: 1640px; }
#view-studio #player { max-height: 68vh; }


/* Transcript is opt-in. Collapsed it's just a header strip, so "Best moments"
   sits at the top of the column where the eye lands. */
.tr-head { margin-bottom: 0; }
.tr-head .label { margin-bottom: 0; }
/* Folded away, the card is just its header strip — the 300px floor that keeps
   the open transcript readable would otherwise leave a big empty box sitting
   in the space the video was meant to get. */
.transcript-card:has(#tr-view[hidden]):has(#tr-empty[hidden]):has(#tr-progress[hidden]) {
  min-height: 0;
  padding: 12px 16px;
}
#view-studio.tr-open .segments { max-height: 46vh; }



/* ---------- batch render: pick several moments, render once ---------- */
.sug-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 11px; margin: 10px 0 8px;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
}
.sug-bar #sug-count { margin-right: auto; }
.sug .pick { display: flex; align-items: center; padding-right: 2px; cursor: pointer; }
.sug .pick input {
  appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid #c9c3b9; border-radius: 5px;
  background: #fff; cursor: pointer; position: relative;
  transition: background .12s, border-color .12s;
}
.sug .pick input:checked { background: var(--acc); border-color: var(--acc); }
.sug .pick input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #1c0e06; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sug.picked { border-color: var(--acc); background: var(--acc-soft); }

/* ---------- full-width studio ---------- */
/* 16:9 at full width would be over 900px tall, so the video keeps a sane
   measure and centres; everything else spans edge to edge. */
.player-wrap { max-width: 980px; margin-inline: auto; }
#view-studio #player { max-height: 60vh; }
/* Moments spread across the width instead of stacking down a narrow rail. */
#sug-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
  align-items: start;
}
.sug { align-items: flex-start; }

/* Timeline + trim controls track the player, not the full page width. */
#player-card .timeline, #player-card .tl-wrap { max-width: 980px; margin-inline: auto; }

@media (max-width: 760px) {
  #sug-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- home: sit in the middle of the screen ---------- */
#view-home {
  min-height: calc(100vh - 118px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#view-home > .dropzone { flex: none; }

/* ---------- batch queue: one clip at a time, visibly ---------- */
#batch-fill { height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .3s; }
.batch-queue { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bq {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px;
  font-size: 13px;
  border: 1px solid transparent;
}
.bq-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #cbc7bf;
  border-radius: 50%;
  color: #8d8b84;
  flex: none;
}
.bq-icon { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bq-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: bq-spin .8s linear infinite; }
@keyframes bq-spin { to { transform: rotate(360deg); } }
.bq-n { width: 18px; color: var(--mut); font-size: 11.5px; flex: none; }
.bq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-state { font-size: 11.5px; color: var(--mut); flex: none; }
.bq.done { color: var(--mut); }
.bq.done .bq-mark { border-color: rgba(67, 142, 92, .42); background: #f0f8f1; color: var(--ok); }
.bq.now {
  background: var(--acc-soft); border-color: rgba(255, 109, 61, .35);
  font-weight: 600;
}
.bq.now .bq-mark { border-color: var(--acc); background: #fff8f4; color: var(--acc); }
.bq.now .bq-state { color: var(--acc); }
.bq.wait { opacity: .55; }
.bq.wait .bq-mark { background: #fbfaf8; }

/* ---------- working screen: one job, nothing else ---------- */
#view-working { max-width: 620px; }
.work-wrap {
  min-height: calc(100vh - 160px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 4px;
}
.work-name {
  font-size: 20px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.steps { list-style: none; margin: 30px 0 0; padding: 0; width: 100%; max-width: 340px; }
.step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; font-size: 14px;
  color: var(--mut);
  transition: color .2s;
}
.step .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 2px solid #cdc6bb; background: transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.step .txt { flex: 1; text-align: left; }
.step .pct { font-size: 12px; font-variant-numeric: tabular-nums; }
.step.done { color: var(--text); }
.step.done .dot { background: var(--ok); border-color: var(--ok); }
.step.now { color: var(--text); font-weight: 600; }
.step.now .dot {
  background: var(--acc); border-color: var(--acc);
  box-shadow: 0 0 0 4px var(--acc-soft);
}

.work-bar {
  width: 100%; max-width: 340px; height: 4px; margin-top: 18px;
  background: var(--card-2); border-radius: 2px; overflow: hidden;
}
#work-fill { height: 100%; width: 0; background: var(--acc); border-radius: 2px; transition: width .4s ease; }
.work-quote {
  margin-top: 20px; min-height: 42px; max-width: 460px;
  color: var(--mut); font-size: 13.5px; line-height: 1.5;
}
.work-wrap .cancel-btn { margin-top: 6px; }

/* ---------- settings drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(6,7,9,.34); z-index: 80; }
.drawer-backdrop[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(390px, 92vw);
  background: var(--card-solid);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
}
.drawer-head h3 { font-size: 16px; font-weight: 600; }
.drawer-note { padding: 0 18px 12px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 6px 18px 26px; }
.drawer-group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer-group:last-child { border-bottom: 0; }
.drawer-group > .label { margin-bottom: 10px; }
.drawer-group .toggles { display: flex; flex-direction: column; gap: 10px; }
.drawer-group #cap-style,
.drawer-group #speed-panel { border: 0; padding: 0; margin: 0; background: none; }

/* Finished clips, shown where the render was watched — not 1400px further down. */
.bq.result { background: var(--bg); border-color: var(--line); gap: 8px; }
.bq.result .bq-name { font-weight: 500; color: var(--text); }
.bq.result .bq-state { margin-right: auto; }
.bq.result .btn { flex: none; }
.bq.failed { background: rgba(217, 58, 68, .07); border-color: rgba(217, 58, 68, .3); }
.bq.failed .bq-mark { border-color: rgba(217, 58, 68, .42); background: #fff3f3; color: var(--err); }
#batch-track[hidden], #batch-pct[hidden] { display: none !important; }

/* Content type: shown as an answer you can correct, not a question you must answer. */
.ctype { display: flex; align-items: center; gap: 7px; }
.sel-inline select { padding: 4px 26px 4px 9px; font-size: 12.5px; border-radius: 8px; }
.sel-inline::after { right: 9px; width: 6px; height: 6px; margin-top: -4px; }

/* ================================================================
   Clipsy editorial revamp
   The existing controls and API remain underneath these rules. This layer
   gives the first-run flow a clear hierarchy: source -> defaults -> clips.
   ================================================================ */

:root {
  --paper: #fbf8f3;
  --paper-deep: #f3ece2;
  --ink: #231f1b;
  --ink-soft: #6f6a65;
  --coral: #ff6542;
  --coral-soft: #fff0e9;
  --peach-line: #eaded2;
}

body {
  background:
    radial-gradient(circle at 9% 0%, rgba(255, 186, 145, .24), transparent 28rem),
    radial-gradient(circle at 92% 7%, rgba(255, 210, 224, .24), transparent 26rem),
    var(--bg);
  color: var(--ink);
}

header { position: sticky; top: 0; z-index: 35; background: rgba(251, 248, 243, .86); backdrop-filter: blur(16px); }
.logo { font-size: 14px; letter-spacing: .02em; }
.logo svg { color: var(--coral); }
.eyebrow {
  color: var(--coral); font-size: 10px; font-weight: 750;
  letter-spacing: .17em; line-height: 1.3;
}
.eyebrow-dot { display: inline-block; width: 4px; height: 4px; margin: 0 4px 2px; border-radius: 50%; background: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#view-home {
  display: block; max-width: none; min-height: 0; padding: 0 34px 72px;
}
.home-shell { width: min(1240px, 100%); margin: 0 auto; padding-top: 50px; }
.home-intro {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin: 0 0 30px;
}
.home-intro h1 {
  max-width: 720px; margin: 10px 0 10px; color: var(--ink);
  font: 400 clamp(35px, 4.6vw, 65px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}
/* The accent word. Was scoped to the page title; every heading on the
   shared display scale now gets the same flourish, so "clips" and
   "projects" read as the same device as "love." rather than as a
   one-off on the hero. */
.home-intro h1 em,
.setup-head h2 em,
.section-heading h2 em,
.branding-heading h3 em,
.sug-result-head h2 em { color: var(--coral); font-style: italic; }



/* ONE DISPLAY SCALE for every section heading.

   These had drifted to four different sizes - 65 / 46 / 35 / 28px - each
   set locally in whatever rule happened to style that section, so the page
   read as four designs stacked rather than one. They now share the page
   title's exact clamp, which means they also scale together on a narrow
   viewport instead of converging and crossing over.

   Card-level titles ("Upload video", "Paste a link") deliberately stay at
   their own smaller size: they label a box inside a section, not a section. */
.setup-head h2,
.section-heading h2,
.branding-heading h3,
.sug-result-head h2 {
  font: 400 clamp(35px, 4.6vw, 65px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}

.source-grid {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: stretch; padding: 10px;
  border: 1px solid rgba(234,222,210,.9); border-radius: 24px;
  background: rgba(255,255,255,.42); box-shadow: 0 20px 54px rgba(122,82,45,.06);
}
.source-card {
  min-height: 322px; padding: 30px clamp(22px, 3vw, 42px); border-radius: 18px;
  border: 1px solid #f1d9cc; background: rgba(255,251,248,.78);
  box-shadow: none; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.source-card:hover { transform: translateY(-2px); border-color: #e9c1ad; background: rgba(255,253,251,.94); box-shadow: 0 16px 32px rgba(122,82,45,.07); }
.dropzone.source-card, .link-source { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.source-icon {
  display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 17px;
  border: 1px solid #f5d6c7; border-radius: 50%; background: #fff0e9; color: #7c301f;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.24);
}
.link-icon { background: #fff4ee; color: #7c301f; }
.source-copy { min-width: 0; width: 100%; }
.source-kicker { display: block; margin-bottom: 6px; color: #ad7d6d; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.source-copy h2 { margin: 0 0 7px; font: 400 28px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.source-copy p { margin: 0 auto 20px; max-width: 390px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.source-card > .btn { align-self: center; }
.source-browse { padding-inline: 20px; }
.source-support { display: inline-flex; margin-top: 14px; padding: 7px 10px; border: 1px solid #eaded2; border-radius: 9px; background: rgba(255,255,255,.68); color: var(--ink-soft); font-size: 10.5px; line-height: 1.25; }
.source-choice-or { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #eaded2; border-radius: 50%; background: #fffdfa; color: var(--ink); font: 400 15px/1 Georgia, "Times New Roman", serif; box-shadow: 0 8px 20px rgba(115,79,49,.08); transform: translate(-50%, -50%); }
.dropzone.source-card .or { width: min(360px, 100%); margin: 14px 0 8px; }
.source-card .or span { background: rgba(255,255,255,.73); }
.path-row { width: min(390px, 100%); }
.path-row input { min-width: 0; }
.path-row input:disabled { opacity: .58; cursor: not-allowed; }
.dropzone:has(#path-input:disabled) .or, .dropzone:has(#path-input:disabled) .path-row { display: none; }
.link-field-shell { position: relative; display: flex; align-items: center; width: min(460px, 100%); margin-top: auto; }
.youtube-mark { position: absolute; left: 16px; z-index: 1; display: grid; place-items: center; color: #ef3e2f; }
.link-input { width: 100%; min-height: 54px; margin: 0; padding: 12px 67px 12px 51px !important; border: 1px solid #e7d8ce !important; border-radius: 13px !important; background: rgba(255,255,255,.82) !important; color: var(--ink) !important; font-size: 13px; }
.link-input:disabled { opacity: 1; cursor: not-allowed; }
.link-input:disabled::placeholder { color: #8a817a; }
.soon-pill { position: absolute; right: 10px; padding: 5px 8px; border-radius: 999px; background: #f1eee9; color: #81776f; font-size: 9.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.link-coming-soon { color: var(--ink-soft); border-style: dashed; }
/* The link box used to be the last thing in the card, so `margin-top: auto`
   was all the spacing it needed. Now an Import button and a progress bar sit
   under it and it needs real separation — 14px matches the gap the upload
   card leaves between its own field and button. */
.link-source #link-btn { margin-top: 14px; padding-inline: 22px; }
.link-help-trigger {
  margin-top: 9px; padding: 2px 4px; border: 0; background: transparent;
  color: #9b6d5d; font: inherit; font-size: 11px; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(155,109,93,.45);
  text-underline-offset: 3px;
}
.link-help-trigger:hover { color: #7c301f; text-decoration-color: currentColor; }
.link-help-trigger:disabled { opacity: .45; cursor: default; pointer-events: none; }
/* The 67px of right padding above is reserved for the "Soon" pill. With the
   feature live the pill is hidden, and that reservation reads as the text
   being oddly off-centre — so give the field symmetric padding once the pill
   is gone. */
.link-field-shell:has(.soon-pill[hidden]) .link-input { padding-right: 18px !important; }
.link-source .upbar { width: min(460px, 100%); margin: 14px auto 0; }
.youtube-help-box h3 { margin: 4px 30px 10px 0; font-size: 20px; }
.youtube-help-box p { line-height: 1.55; }
.youtube-help-steps {
  margin: 14px 0 16px; padding-left: 22px; color: var(--ink-soft);
  font-size: 13px; line-height: 1.65; text-align: left;
}
.youtube-help-steps li { padding-left: 3px; }
.source-note { margin: 13px 0 0; color: #8e8178; font-size: 10.5px; line-height: 1.4; }
.source-note span { color: var(--coral); }
.dropzone.over { transform: translateY(-2px) scale(1.004); border-color: var(--coral); background: #fff4ee; box-shadow: 0 18px 40px rgba(255,101,66,.12); }

/* Full shell width, matching .source-grid above and the cards below. The
   1040px cap left it 60px narrower than everything it sits between, which
   read as a misalignment rather than as a narrower measure. */
.setup-card { width: 100%; margin: 24px auto 0; padding: clamp(28px, 4vw, 52px); border: 1px solid rgba(230,221,211,.95); border-radius: 27px; background: rgba(255,255,255,.9); box-shadow: 0 24px 64px rgba(93,67,48,.11); scroll-margin-top: 86px; }
.setup-head { padding-bottom: 28px; border-bottom: 1px solid #e9e5df; }
/* The flex row moved off .setup-head when the source preview joined it:
   the heading and the badge still sit side by side, the preview sits under
   them rather than beside them. */
.setup-head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.setup-head h2 { margin: 0; color: var(--ink); }   /* size: the shared display scale */
.setup-source-summary { max-width: 620px; margin-top: 8px; overflow: hidden; color: var(--ink-soft); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.setup-save { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #aed4ac; border-radius: 12px; background: #f1faef; color: #216e36; font-size: 13px; font-weight: 680; white-space: nowrap; }
.setup-save span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #438b50; color: #fff; font-size: 12px; }
/* The source video, sized to its OWN shape and bounded two ways: never
   wider than 560px, never taller than 46vh. Width takes whichever bound
   binds first - `46vh * ratio` is the width at which the height cap is
   exactly reached - so a portrait clip gets a narrow tall box instead of a
   letterboxed wide one, which is most uploads.

   setSetupPreview() supplies both custom properties once metadata lands;
   the var() fallbacks are the 16:9 placeholder used until it does.
   Percentages are avoided inside the width calc because this box's own
   width is what they would resolve against. */
.setup-preview { width: min(560px, 100%, calc(46vh * var(--preview-ar-num, 1.7778))); aspect-ratio: var(--preview-ar, 16 / 9); margin: 20px auto 2px; overflow: hidden; border: 1px solid var(--peach-line); border-radius: 15px; background: #16110e; box-shadow: 0 12px 28px rgba(115,79,49,.12); }
.setup-preview video { display: block; width: 100%; height: 100%; object-fit: contain; background: #16110e; }
.setup-section { padding: 28px 0 30px; border-bottom: 1px solid #e9e5df; }
.setup-section-head { margin-bottom: 18px; }
.setup-caption-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.setup-section-head h3 { color: var(--ink); font-size: 20px; font-weight: 750; letter-spacing: -.035em; }
.setup-section-head p { margin-top: 5px; color: var(--ink-soft); font-size: 14px; }
.setup-caption-more { flex: none; margin-bottom: 1px; color: var(--ink-soft); }
.setup-caption-more[aria-expanded="true"] { border-color: var(--coral); background: #fff4ee; color: var(--ink); }
.setup-caption-more-icon { display: inline-block; font-size: 16px; line-height: 1; transition: transform .15s ease; }
.setup-caption-more[aria-expanded="true"] .setup-caption-more-icon { transform: rotate(45deg); }
.setup-caption-all {
  margin-top: 16px; padding: 14px;
  border: 1px solid #eaded2; border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,253,251,.96), rgba(248,242,237,.92));
}
.setup-caption-all-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--ink); font-size: 12.5px; }
.setup-caption-all-head .tiny { margin: 0; }
.setup-caption-all-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.setup-caption-all-choice {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  min-width: 0; padding: 5px 5px 8px;
  border: 1px solid #e5d8ce; border-radius: 11px;
  background: rgba(255,255,255,.84); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.setup-caption-all-choice img { display: block; width: 100%; aspect-ratio: 460 / 300; object-fit: cover; border-radius: 7px; background: #14161a; }
.setup-caption-all-choice span { overflow: hidden; padding: 0 3px; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.setup-caption-all-choice:hover { transform: translateY(-2px); border-color: #d6b5a4; box-shadow: 0 8px 16px rgba(115,79,49,.09); }
.setup-caption-all-choice.is-selected { border-color: var(--coral); background: #fffdfc; box-shadow: inset 0 0 0 1px var(--coral), 0 7px 16px rgba(255,101,66,.1); }
.setup-caption-all-choice.is-selected::after { content: "✓"; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; }
.setup-caption-all-loading { grid-column: 1 / -1; margin: 8px 0; color: var(--ink-soft); font-size: 12.5px; text-align: center; }
.setup-section .sel-wrap { position: relative; width: min(100%, 560px); }
.setup-section .sel-wrap select {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 46px 0 15px;
  border: 1px solid #e6cdbf;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffdfb, #f7f0eb);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.setup-section .sel-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}
.setup-section .sel-wrap:hover select { border-color: #d9ad98; background: #fffdfb; }
.setup-section .sel-wrap:focus-within select {
  border-color: var(--coral);
  background: #fffdfb;
  box-shadow: 0 0 0 3px rgba(255, 101, 66, .16), 0 6px 16px rgba(115, 79, 49, .08);
}
.setup-section .sel-wrap select:disabled { opacity: .55; cursor: not-allowed; }
.choice-grid { display: grid; gap: 14px; }
.format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-tile { position: relative; display: flex; align-items: center; border: 1px solid var(--peach-line); border-radius: 13px; background: rgba(255,255,255,.76); color: var(--ink); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.choice-tile:hover { transform: translateY(-2px); border-color: #d6b5a4; box-shadow: 0 9px 20px rgba(115,79,49,.07); }
.choice-tile.is-selected { border-color: var(--coral); background: #fffdfc; box-shadow: inset 0 0 0 1px var(--coral), 0 7px 18px rgba(255,101,66,.08); }
.choice-tile.is-selected::after { content: "✓"; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 14px; font-weight: 800; }
.choice-title { font-size: 15px; font-weight: 750; letter-spacing: -.025em; }
.format-choice { gap: 18px; min-height: 104px; padding: 20px 24px; }
.format-ratio { display: grid; place-items: center; flex: 0 0 auto; min-width: 70px; height: 50px; border: 1px solid #e3d6cb; border-radius: 11px; background: linear-gradient(145deg, #fff9f5, #f2ede8); color: var(--ink); font: 700 17px/1 var(--mono); letter-spacing: -.08em; }
.portrait-ratio { color: #472318; border-color: #ffcfbc; background: #fff1e9; }
.format-copy { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.format-choice .choice-title { font-size: 18px; }
.platform-inline { display: inline-flex; align-items: center; gap: 8px; }
.platform-logo { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; border: 0; border-radius: 7px; background: #fff; box-shadow: none; }
.platform-logo svg { display: block; width: 72%; height: 72%; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo-tiktok { background: #161313; color: #fff; filter: drop-shadow(-1px 0 #2de2e6) drop-shadow(1px 0 #ff4363); }
.logo-instagram { background: radial-gradient(circle at 65% 70%, #ffd25f 0 20%, #ef6d45 32%, #bd35a4 62%, #6548d5); color: #fff; }
/* Both YouTube marks are the real logo geometry drawn red on a white tile,
   rather than a glyph on a coloured tile like the TikTok and Instagram
   siblings. That inconsistency is deliberate: YouTube's red IS the mark,
   and a red badge on a red tile would disappear. */
.logo-youtube, .logo-shorts { background: #fff; color: #f00; box-shadow: inset 0 0 0 1px rgba(24,16,10,.07); }
.logo-youtube svg, .logo-shorts svg { width: 86%; height: 86%; stroke: none; }
.logo-screen { background: #f1eee9; color: #6b625b; }
.caption-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.caption-choice { flex-direction: column; align-items: stretch; min-height: 159px; padding: 10px; overflow: hidden; }
.caption-swatch { position: relative; display: grid; place-items: center; width: 100%; min-height: 99px; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, #2e2f31, #151516); text-align: center; }
.caption-swatch::after, .caption-swatch::before, .caption-person { display: none; }
.caption-sample { position: relative; z-index: 1; margin: 0; font-size: 14px; line-height: 1.05; }
.caption-label { display: flex; align-items: center; justify-content: center; min-height: 37px; padding-top: 9px; }
.caption-label .choice-title { font-size: 14px; }
.swatch-classic .caption-sample { color: #fff; font-family: Arial Black, Impact, sans-serif; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 3px #000; }
.swatch-classic .caption-sample b { color: #ff6542; }
.swatch-yellow .caption-sample { color: #17130f; font-family: Impact, Arial Black, sans-serif; font-size: 12.5px; letter-spacing: .035em; text-shadow: none; }
.swatch-yellow .caption-sample { padding: 5px 8px; background: #ffe342; box-shadow: none; }
.swatch-yellow .caption-sample b { color: #ff4f2f; }
.swatch-boxed .caption-sample { display: flex; gap: 2px; align-items: center; color: #fff; font-family: Arial, sans-serif; font-weight: 800; }
.swatch-boxed .caption-sample i, .swatch-boxed .caption-sample b { padding: 4px 4px; background: rgba(20,18,17,.88); font-style: normal; }
.swatch-boxed .caption-sample b { background: var(--coral); }
.swatch-minimal .caption-sample { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.87); color: #29231f; font-family: Georgia, "Times New Roman", serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0; box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.swatch-minimal .caption-sample b { color: var(--coral); font-style: italic; }
.setup-more { margin-top: 20px; border: 1px solid #e6e2dd; border-radius: 13px; background: #fcfbfa; }
.setup-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; color: #30343a; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.setup-more summary::-webkit-details-marker { display: none; }
.setup-more summary::after { content: "+"; color: var(--coral); font-size: 20px; font-weight: 400; }
.setup-more[open] summary { border-bottom: 1px solid #e6e2dd; }
.setup-more[open] summary::after { content: "−"; }
.setup-more summary span { margin-left: auto; color: #7a818a; font-size: 11px; font-weight: 500; }
.setup-more .setup-options { padding: 13px; }
.setup-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.setup-toggle { position: relative; display: flex; align-items: center; gap: 10px; min-height: 61px; padding: 11px 12px; border: 1px solid var(--peach-line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.setup-toggle:hover { border-color: #dab7a6; }
.setup-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.setup-toggle:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,101,66,.18); }
.toggle-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 26px; }
.toggle-copy b { font-size: 12.5px; }
.toggle-copy small { color: var(--ink-soft); font-size: 10.5px; line-height: 1.2; }
.toggle-ui { position: absolute; top: 50%; right: 11px; width: 29px; height: 17px; border-radius: 999px; background: #d5cdc5; transform: translateY(-50%); transition: background .15s; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .15s; }
.setup-toggle input:checked + .toggle-copy + .toggle-ui { background: var(--coral); }
.setup-toggle input:checked + .toggle-copy + .toggle-ui::after { transform: translateX(12px); }
.setup-toggle.is-disabled, .setup-toggle:has(input:disabled) { opacity: .52; cursor: not-allowed; }
.setup-option-note { min-height: 15px; margin: 0 13px 12px; }
.setup-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-top: 22px; }
.setup-footer p { margin: 0; }
.setup-footer .btn { min-width: 170px; margin-left: 0; padding: 12px 21px; border-radius: 12px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 42px 0 14px; }
.section-heading h2 { margin-top: 5px; }   /* size: the shared display scale */
.recent-heading { align-items: center; margin-top: 40px; }
.library-loading-status {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .01em;
}
#library[data-library-loading] .library-loading-status { display: flex; }
.loading-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(255,109,61,.32);
  animation: library-loading-pulse 1.25s ease-out infinite;
}
.loading-dots {
  display: inline-block;
  width: 18px;
  overflow: hidden;
  color: var(--coral);
  letter-spacing: .12em;
  animation: library-loading-dots 1.2s steps(4, end) infinite;
}
.recent-view-all { display: inline-flex; align-items: center; gap: 7px; padding: 7px 2px; border: 0; background: transparent; color: var(--coral); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.recent-view-all:hover { color: #d94b2d; }
.recent-view-all #library-count { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--coral-soft); font-size: 10px; }
#library .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#library .cards.show-all { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
#library .ep-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; border-radius: 15px; border-color: var(--peach-line); background: rgba(255,255,255,.76); box-shadow: 0 9px 24px rgba(112,77,48,.05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#library .ep-card:hover, #library .ep-card:focus-visible { border-color: #dcae98; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(112,77,48,.1); }



/* ---------------- clips already rendered, on the project page ----------------
   Deliberately the same card as a moment on the studio page: a 16/9 still with
   the length on it, the category badge, the title, then Score and Length. A
   rendered clip IS the moment it was cut from, and giving it a different
   shape made the same thing look like two unrelated features.

   The .sug-* rules are all prefixed with #sug-card, so the values are mirrored
   here rather than reused -- widening those selectors would have put this
   page's layout at the mercy of edits meant for the studio. */
.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.clip-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  transition: border-color .15s;
}
.clip-tile:hover { border-color: #c9c3b9; }

.clip-open {
  display: flex; flex-direction: column;
  padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.clip-thumb {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  background: #14161a; overflow: hidden;   /* a portrait still must not stretch the box */
}
.clip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-play {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--acc); color: #fff;
  font-size: 15px; line-height: 1; padding-left: 3px;
  box-shadow: 0 6px 18px rgba(18,13,10,.28);
  transition: transform .18s ease;
}
.clip-open:hover .clip-play { transform: scale(1.08); }
.clip-dur {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 11.5px; font-weight: 650;
}
.clip-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #14161a; }

.clip-body { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 4px; min-width: 0; }
.clip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clip-range { color: var(--mut); font-size: 11.5px; }
.clip-title {
  display: -webkit-box; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 14px; font-weight: 650; line-height: 1.3;
}
.clip-metrics { display: flex; gap: 18px; }
.clip-metrics .metric { display: flex; flex-direction: column; gap: 1px; }
.clip-metrics .metric b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.clip-metrics .score-n { color: var(--ok); }
.clip-flags { color: var(--mut); font-size: 11px; }

.clip-tile-actions { padding: 8px 12px 11px; }
.clip-tile-actions a { color: var(--acc); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.clip-tile-actions a:hover { text-decoration: underline; }

/* it belongs to the project screen, so it follows the same focus rule */
#view-home.project-focus #project-clips:not([hidden]) { display: block; }

/* ---------------- one project, on its own ----------------
   /app/project/<id> is a real address, so it should not look like the home
   page with a card on top of it. The upload row, the recent row and the brand
   kit belong to home; hiding them is what makes the URL and the screen agree.
   Hidden rather than unbuilt, so going back costs nothing to restore. */
#view-home.project-focus .home-intro,
#view-home.project-focus .source-grid,
#view-home.project-focus #library,
#view-home.project-focus .branding-card { display: none; }
#view-home.project-focus #project-crumb { display: flex; }
/* ---------------- loading skeleton for the project cards ----------------
   Drawn with the SAME box as a real .ep-card -- 16/9 thumb, 132px body --
   so when the data lands the cards fill in where the placeholders already
   were, instead of the page jumping. That is the whole point of a skeleton;
   a spinner would reflow everything the moment it disappeared.

   Inert on purpose: no cursor, no hover, no tab stop, aria-hidden, because
   there is nothing here to open yet. */
.ep-card.is-skeleton { cursor: default; pointer-events: none; }
.ep-card.is-skeleton:hover { border-color: var(--line); }

.sk {
  position: relative;
  overflow: hidden;
  background: #ece7e0;
  border-radius: 6px;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.62) 50%,
              rgba(255,255,255,0) 100%);
  animation: sk-sweep 1.25s ease-in-out infinite;
}
/* The real thumb paints a dark gradient over its bottom half so the
   duration badge stays legible. On a placeholder that just looks like a
   grey card with a shadow across it, so the sweep takes that slot
   instead -- same ::after, doing the useful job for this state. */
.ep-card.is-skeleton .ep-thumb { background: #e4ded6; border-radius: 0; }
.ep-card.is-skeleton .ep-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.55) 50%,
              rgba(255,255,255,0) 100%);
  animation: sk-sweep 1.25s ease-in-out infinite;
}

.sk-line { height: 10px; }
.sk-title { width: 82%; height: 12px; margin-bottom: 7px; }
.sk-title-2 { width: 54%; height: 12px; }
.sk-status { width: 38%; margin-top: 15px; }
.sk-detail { width: 68%; margin-top: 9px; }

@keyframes sk-sweep { to { transform: translateX(100%); } }

/* A sweep that never stops is exactly the kind of motion that causes
   trouble, and the boxes alone already read as "loading". */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}
.ep-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #ead9cd, #cdb9aa 52%, #a9988c); }
.ep-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18,13,10,.38)); pointer-events: none; }
.ep-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ep-card:hover .ep-thumb img { transform: scale(1.025); }
.ep-thumb-fallback { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.28); color: #fff; font-size: 13px; }
.ep-duration { position: absolute; right: 9px; bottom: 8px; z-index: 2; padding: 3px 6px; border-radius: 6px; background: rgba(23,17,13,.74); color: #fff; font: 650 9.5px/1 var(--mono); }
.ep-body { display: flex; flex-direction: column; flex: 1; min-height: 132px; padding: 13px 14px 14px; }
.ep-title-row { display: flex; align-items: flex-start; gap: 8px; }
#library .ep-card .ep-title { display: -webkit-box; min-height: 35px; margin: 0; padding: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
#library .ep-card .x { position: static; flex: none; margin: -4px -6px 0 auto; padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: #9b9088; font-size: 13px; }
#library .ep-card .x:hover { background: #f4ece6; color: var(--err); }
.ep-skeleton {
  cursor: default;
  pointer-events: none;
  animation: skeleton-card-breathe 2.4s ease-in-out var(--skeleton-delay, 0s) infinite;
}
.ep-skeleton:nth-child(2) { --skeleton-delay: .18s; }
.ep-skeleton:nth-child(3) { --skeleton-delay: .36s; }
.ep-skeleton:nth-child(4) { --skeleton-delay: .54s; }
.ep-skeleton .ep-thumb {
  background: linear-gradient(135deg, #eaded5, #d8c4b7 52%, #c4afa2);
  background-size: 170% 170%;
  animation: skeleton-surface-breathe 2.4s ease-in-out var(--skeleton-delay, 0s) infinite alternate;
}
.ep-skeleton .ep-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.08) 38%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.08) 62%, transparent 76%);
  transform: translateX(-120%); animation: ep-skeleton-shimmer 1.2s cubic-bezier(.4,0,.2,1) var(--skeleton-delay, 0s) infinite;
}
.ep-skeleton .ep-thumb::after { background: linear-gradient(180deg, transparent 55%, rgba(75,52,39,.16)); }
.skeleton-thumb-icon {
  position: relative; z-index: 2; display: block; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 0 rgba(255,255,255,.38);
  animation: skeleton-thumb-pulse 1.6s ease-in-out var(--skeleton-delay, 0s) infinite;
}
.skeleton-thumb-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  opacity: 0;
  animation: skeleton-thumb-ring 1.8s ease-out var(--skeleton-delay, 0s) infinite;
}
.skeleton-line, .skeleton-close, .skeleton-dot { position: relative; overflow: hidden; background: #eaded5; }
.skeleton-line::after, .skeleton-close::after, .skeleton-dot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.8) 50%, transparent 78%);
  transform: translateX(-120%); animation: ep-skeleton-shimmer 1.2s cubic-bezier(.4,0,.2,1) var(--skeleton-delay, 0s) infinite;
}
.skeleton-title { display: block; width: 72%; height: 12px; margin-top: 2px; border-radius: 999px; }
.skeleton-close { display: block; flex: none; width: 21px; height: 21px; margin: -4px -6px 0 auto; border-radius: 7px; }
.skeleton-dot { display: block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.skeleton-status { width: 43%; height: 9px; border-radius: 999px; }
.skeleton-detail { width: 74%; height: 8px; border-radius: 999px; }
@keyframes ep-skeleton-shimmer { to { transform: translateX(120%); } }
@keyframes skeleton-card-breathe {
  0%, 100% { box-shadow: 0 9px 24px rgba(112,77,48,.05); }
  50% { box-shadow: 0 14px 30px rgba(112,77,48,.1); }
}
@keyframes skeleton-surface-breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes skeleton-thumb-pulse {
  0%, 100% { transform: scale(.94); opacity: .68; }
  50% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 7px rgba(255,255,255,.12); }
}
@keyframes skeleton-thumb-ring {
  0% { transform: scale(.72); opacity: .65; }
  75%, 100% { transform: scale(1.18); opacity: 0; }
}
@keyframes library-loading-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,109,61,.36); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(255,109,61,0); }
}
@keyframes library-loading-dots {
  0% { width: 5px; }
  33% { width: 10px; }
  66% { width: 15px; }
  100% { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-skeleton .ep-thumb::before, .skeleton-line::after,
  .skeleton-close::after, .skeleton-dot::after,
  .ep-skeleton, .ep-skeleton .ep-thumb, .skeleton-thumb-icon,
  .skeleton-thumb-icon::after, .loading-status-dot, .loading-dots { animation: none; }
}
.ep-status { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 10.5px; }
.ep-status strong { font-weight: 700; }
.status-dot { width: 9px; height: 9px; flex: none; border: 1.5px solid #bdb3ab; border-radius: 50%; background: transparent; }
.ep-status.complete, .ep-status.ready { color: #3c9161; }
.ep-status.complete .status-dot, .ep-status.ready .status-dot { border-color: #83cba1; background: #83cba1; box-shadow: inset 0 0 0 2px #eaf8ef; }
.ep-status.processing { color: #4e7fbf; }
.ep-status.processing .status-dot { border-color: #4e8cd5; border-top-color: transparent; animation: ep-spin 1s linear infinite; }
.ep-status.waiting { color: #8a776b; }
.ep-status.error { color: var(--err); }
.ep-status.error .status-dot { border-color: var(--err); background: #ffe7e2; }
.ep-detail { margin-top: auto; padding-top: 8px; overflow: hidden; color: var(--ink-soft); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ep-spin { to { transform: rotate(360deg); } }

.branding-card { margin-top: 34px; border-radius: 17px; border-color: var(--peach-line); background: rgba(255,255,255,.55); }
.branding-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.branding-heading h3 { margin-top: 5px; }   /* size: the shared display scale */
.branding-heading .tiny { margin: 0; }

/* Processing state: the copy says what the backend is doing without pretending
   that the caption burn happens before the user chooses a clip. */
/* Was 820px. `body > main { margin-left: var(--rail) }` overrides the auto
   left margin from `main { margin: 0 auto }`, so a narrow #view-working is
   not centred - it is pinned against the sidebar with the surplus stranded
   on the right. Dropping the cap lets main fill the space beside the rail,
   and .work-wrap then centres in it at every width - this screen stands
   alone (it hides every other view), so it is centred on its own space
   rather than sharing the home column. */
#view-working { max-width: none; }
#view-working .work-wrap { width: min(1040px, 100%); margin-inline: auto; }
.work-wrap {
  min-height: calc(100vh - 140px); align-items: stretch; justify-content: flex-start;
  gap: 5px; padding: 34px 38px 28px; text-align: left;
  border: 1px solid var(--peach-line); border-radius: 22px;
  background: rgba(255,255,255,.76); box-shadow: 0 18px 48px rgba(122,82,45,.08);
}
.work-wrap::before { display: none; }
.work-kicker { display: flex; align-items: center; gap: 8px; color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.work-signal { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.work-signal::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,109,61,.28); border-radius: 50%; animation: work-ring 2.2s ease-out infinite; }
.work-name { margin-top: 8px; font: 400 30px/1 Georgia, "Times New Roman", serif; }

.work-live {
  position: sticky; top: 78px; z-index: 4;
  display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 13px;
  margin-top: 22px; padding: 15px 17px;
  border: 1px solid #f0cbbc; border-radius: 16px;
  background: rgba(255,248,244,.96); box-shadow: 0 12px 28px rgba(111,74,42,.09);
  backdrop-filter: blur(12px);
}
.work-live-mark { position: relative; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #f3d7cb; }
.work-live-mark::before, .work-live-mark::after, .work-live-mark span { content: ""; position: absolute; border-radius: 50%; }
.work-live-mark::before { width: 23px; height: 23px; border: 1px solid rgba(255,109,61,.24); animation: work-orbit 3.4s linear infinite; }
.work-live-mark::after { width: 7px; height: 7px; background: var(--coral); box-shadow: 0 0 0 5px var(--coral-soft); }
.work-live-mark span { width: 4px; height: 4px; background: #d99b7d; transform: translateY(-12px); transform-origin: 2px 14px; animation: work-orbit 2.4s linear infinite reverse; }
.work-live-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.work-live-label, .work-update-label { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.work-live-copy strong { font-size: 14px; line-height: 1.25; }
.work-live-copy > span:last-child { color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
.work-live-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 76px; }
.work-live-metrics strong { color: var(--coral); font: 600 20px/1 var(--mono); font-variant-numeric: tabular-nums; }
.work-live-metrics span { color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.steps { max-width: none; margin-top: 18px; }
.step { position: relative; padding: 13px 4px; border-bottom: 1px solid rgba(234,222,210,.75); }
.step:last-child { border-bottom: 0; }
.step .dot { width: 17px; height: 17px; border-width: 1px; }
.step.done .dot { color: #fff; }
.step.done .dot::after { content: "✓"; display: grid; place-items: center; height: 100%; font-size: 10px; }
.step .step-status { color: var(--mut); font-size: 11px; }
.step.now .step-status { color: var(--coral); }
.work-bar { position: relative; max-width: none; height: 8px; margin-top: 22px; background: #e9e0d7; border-radius: 999px; }
#work-fill { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--coral), #ff9c6f); border-radius: 999px; }
#work-fill::after { content: ""; position: absolute; inset: 0; width: 44%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); transform: translateX(-130%); animation: work-shimmer 2.1s ease-in-out infinite; }
.work-eta { margin-top: 9px; color: var(--ink-soft); font-size: 11.5px; text-align: center; }
.job-status-detail { margin: 9px 0 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.4; }
.work-update { display: grid; grid-template-columns: 33px 1fr; gap: 11px; align-items: start; margin-top: 19px; padding: 14px 15px; border: 1px solid var(--peach-line); border-radius: 13px; background: rgba(255,255,255,.72); }
.work-update.is-new { animation: work-update-in .32s ease-out both; }
.work-update-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--coral-soft); color: var(--coral); font-size: 15px; }
.work-update-label { display: block; margin: 1px 0 4px; color: var(--coral); }
.work-live-progress-label { color: var(--ink-soft); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.work-quote { max-width: none; min-height: 20px; margin: 0; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.work-activity { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.work-activity li { display: grid; grid-template-columns: 44px 7px 1fr; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 10.5px; animation: work-reveal .3s ease-out both; }
.work-activity time { font-variant-numeric: tabular-nums; }
.work-activity i { width: 6px; height: 6px; border-radius: 50%; background: #c9c1ba; }
.work-activity li:first-child { color: var(--ink); }
.work-activity li:first-child i { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.work-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 23px; color: var(--ink-soft); font-size: 10.5px; }
.work-wrap .cancel-btn { margin-top: 0; }
.work-terminal { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 18px; padding: 13px 15px; border: 1px solid #f0cbbc; border-radius: 14px; background: #fff8f4; }
.work-terminal.is-cancelled { border-color: var(--peach-line); background: rgba(255,255,255,.86); }
.work-terminal-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 17px; font-weight: 800; }
.work-terminal.is-cancelled .work-terminal-mark { background: #a68d7e; }
.work-terminal-copy { min-width: 0; }
.work-terminal-copy strong { display: block; color: var(--ink); font-size: 13px; }
.work-terminal-copy p { margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.work-terminal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@keyframes work-ring { 0% { transform: scale(.65); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes work-orbit { to { transform: rotate(360deg); } }
@keyframes work-shimmer { 58%, 100% { transform: translateX(330%); } }
@keyframes work-reveal { from { opacity: 0; transform: translateY(-3px); } }
@keyframes work-update-in { from { opacity: .58; transform: translateY(2px); } }

/* Studio status and output library. */
.settings-summary { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #cce4d0; border-radius: 13px; background: #f4fbf4; }
.settings-summary-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #64af76; color: #fff; font-size: 13px; font-weight: 700; }
.settings-summary-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.settings-summary-copy strong { font-size: 12.5px; }
.settings-summary-copy span { color: #597260; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The editor should feel like a focused viewing surface. Keep the crop choice
   functional, but do not draw editorial guide rails over the source video. */
#player-card {
  padding: 18px;
  border: 1px solid rgba(233, 218, 206, .95);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(249,244,238,.78));
  box-shadow: 0 20px 46px rgba(101,70,43,.09), inset 0 1px rgba(255,255,255,.94);
}
#player-card .player-wrap {
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: linear-gradient(145deg, #171411, #302821);
  box-shadow: 0 16px 30px rgba(45,30,19,.23), inset 0 1px rgba(255,255,255,.08);
}
#player-card #player { display: block; border-radius: 11px; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
#player-card .crop-guide { display: none; }
#player-card .timeline { display: none; }
#player-card .timeline {
  height: 38px;
  margin: 13px 0 0;
  border: 1px solid #eee3d9;
  border-radius: 12px;
  background: rgba(255,255,255,.68);
}
#player-card .tl-track { left: 13px; right: 13px; height: 4px; margin-top: -2px; border: 0; background: #e9e0d7; }
#player-card .tl-range { height: 4px; margin-top: -2px; background: linear-gradient(90deg, #ff8b67, var(--coral)); }
#player-card .tl-playhead { top: 8px; bottom: 8px; background: rgba(71,50,37,.35); }
#player-card .tl-handle { width: 18px; height: 18px; margin-top: -9px; border-color: var(--coral); box-shadow: 0 3px 8px rgba(80,48,29,.26); }
#clips-card { margin-top: 16px; border-color: var(--peach-line); }
.clip-row { padding: 11px 2px; }
.clip-row .play { width: 27px; height: 27px; border-radius: 50%; background: var(--coral-soft); }
#sug-card { border-color: var(--peach-line); background: rgba(255,255,255,.8); }
#sug-card .label.nom { font: 400 23px/1 Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: -.02em; color: var(--ink); }
.sug-sticky { position: sticky; top: 72px; z-index: 5; margin: -16px -16px 13px; padding: 16px 16px 3px; border-radius: 15px 15px 11px 11px; background: rgba(255,255,255,.93); box-shadow: 0 10px 22px rgba(102,72,47,.07); backdrop-filter: blur(12px); }
.sug-sticky .sug-bar { margin-bottom: 10px; }

@media (max-width: 900px) {
  #library .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-home { padding-inline: 18px; }
  .home-shell { padding-top: 32px; }
  .home-intro { align-items: flex-start; flex-direction: column; gap: 17px; }
  .source-grid { grid-template-columns: 1fr; gap: 14px; }
  .source-card { min-height: 285px; }
  .source-choice-or { position: relative; left: auto; top: auto; grid-row: 2; justify-self: center; margin: -31px 0; transform: none; }
  .link-source { grid-row: 3; }
  .setup-caption-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  /* the section headings track the page title at every width, or they
     converge and cross over on a narrow screen */
  .home-intro h1, .setup-head h2, .section-heading h2,
  .branding-heading h3, .sug-result-head h2 { font-size: 42px; }
  .setup-card { padding: 20px 16px; }
  .setup-head-row, .setup-footer { flex-direction: column; align-items: stretch; }
  .setup-preview { width: min(100%, calc(52vh * var(--preview-ar-num, 1.7778))); }
  .setup-save { align-self: flex-start; }
  .setup-caption-head { align-items: flex-start; flex-direction: column; }
  .setup-caption-more { align-self: flex-start; }
  .format-grid { grid-template-columns: 1fr; }
  .format-choice { gap: 10px; padding: 16px; }
  .format-copy { gap: 8px; }
  .format-choice .choice-title { font-size: 16px; white-space: normal; }
  .platform-inline { gap: 5px; }
  .platform-logo { width: 23px; height: 23px; font-size: 12px; }
  .caption-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-caption-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-options { grid-template-columns: 1fr; }
  .setup-footer .btn { width: 100%; }
  .settings-summary { align-items: flex-start; flex-wrap: wrap; }
  .settings-summary .btn { margin-left: 39px; }
  .settings-summary-copy span { white-space: normal; }
  .work-wrap { min-height: calc(100vh - 112px); padding: 25px 18px 20px; border-radius: 17px; }
  .work-live { top: 62px; grid-template-columns: 40px minmax(0,1fr); padding: 13px; }
  .work-live-mark { width: 38px; height: 38px; }
  .work-live-metrics { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .steps { margin-top: 13px; }
  .step { padding-block: 10px; }
  .work-actions { align-items: stretch; flex-direction: column; }
  .work-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -8px -10px; padding: 14px 8px 10px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 24%); }
  .work-actions .btn { width: 100%; background: rgba(255,255,255,.94); }
  .sug-sticky { top: 59px; margin-inline: -12px; padding-inline: 12px; }
  .sug-sticky > .row.spread { align-items: flex-start; flex-direction: column; }
  .sug-sticky > .row.spread > .row { width: 100%; justify-content: space-between; }
  .recent-heading { align-items: flex-end; }
  .recent-view-all #library-count { display: none; }
  #library .cards:not(.show-all) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(238px, 82vw); gap: 12px; overflow-x: auto; padding: 2px 4px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #library .cards:not(.show-all)::-webkit-scrollbar { display: none; }
  #library .cards:not(.show-all) .ep-card { scroll-snap-align: start; }
  #library .cards.show-all { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  header { padding-inline: 14px; }
  #view-home { padding-inline: 12px; }
  .home-intro h1, .setup-head h2, .section-heading h2,
  .branding-heading h3, .sug-result-head h2 { font-size: 37px; }
  .source-card { padding: 20px; }
  .source-card { min-height: 270px; }
  .source-icon { width: 58px; height: 58px; margin-bottom: 14px; }
  .source-copy h2 { font-size: 25px; }
  .source-support { font-size: 9.5px; }
  .path-row { flex-direction: column; align-items: stretch; }
  .path-row .btn { width: 100%; }
}

@media (max-width: 380px) {
  .format-choice { gap: 9px; padding: 13px; align-items: flex-start; }
  .format-ratio { min-width: 60px; width: 60px; height: 45px; font-size: 15px; }
  .format-choice .choice-title { font-size: 15px; }
  .platform-inline { gap: 4px; }
  .platform-logo { width: 21px; height: 21px; font-size: 11px; }
}

@media (max-width: 680px) {
  .work-terminal { grid-template-columns: 31px minmax(0, 1fr); }
  .work-terminal-actions { grid-column: 1 / -1; justify-content: stretch; }
  .work-terminal-actions .btn { flex: 1 1 0; }
}

#setup-title:focus-visible { outline: 3px solid rgba(255,101,66,.28); outline-offset: 5px; border-radius: 4px; }

/* Keyboard focus stays visible on the custom editorial controls as well as
   native fields. The earlier global outline reset made the UI look polished
   with a mouse but left keyboard users guessing where they were. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(255, 109, 61, .42);
  outline-offset: 3px;
}
.choice-tile:focus-visible { transform: translateY(-1px); }
.check:focus-within { outline: 2px solid rgba(255, 109, 61, .34); outline-offset: 4px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- source-first studio ----------
   The original video is the project anchor. Generated moments follow it so
   users can orient themselves in the source before reviewing the clips. */
#view-studio .studio {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
#view-studio #player-card {
  display: block;
  grid-column: 1;
  grid-row: 1;
  padding: 20px;
  border: 1px solid rgba(237, 213, 198, .95);
  border-radius: 23px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 180, 148, .16), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,245,239,.84));
  box-shadow: 0 22px 54px rgba(109, 73, 42, .1), inset 0 1px rgba(255,255,255,.95);
}
#view-studio #clip-card { display: none; }
#view-studio #sug-card,
#view-studio #batch-panel,
#view-studio .transcript-card,
#view-studio #clips-card {
  grid-column: 1;
}
#view-studio #sug-card { grid-row: 2; }
#view-studio #batch-panel { grid-row: 3; }
#view-studio .transcript-card { grid-row: 4; }
#view-studio #clips-card { grid-row: 5; }
#view-studio #player-card .source-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto 14px;
}
#view-studio #player-card .source-player-head h3 {
  margin: 4px 0 0;
  font: 400 clamp(24px, 3vw, 34px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
}
#view-studio #player-card .source-player-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(80, 163, 111, .25);
  border-radius: 999px;
  background: rgba(235, 250, 239, .8);
  color: #4a7659;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
#view-studio #player-card .source-player-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55aa74;
  content: "";
}
#view-studio #player-card .player-wrap,
#view-studio #player-card .timeline {
  max-width: 1120px;
  margin-inline: auto;
}
#view-studio #player-card .timeline { display: none; }
#view-studio #sug-card {
  overflow: visible;
  padding: 20px;
  border: 1px solid rgba(237, 213, 198, .95);
  border-radius: 23px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 180, 148, .16), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.93), rgba(250,245,239,.82));
  box-shadow: 0 22px 54px rgba(109, 73, 42, .1), inset 0 1px rgba(255,255,255,.95);
}
#view-studio #sug-card .sug-sticky {
  position: static;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.sug-result-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(231, 216, 204, .9);
}
.sug-result-head h2 { margin: 5px 0 4px; }   /* size: the shared display scale */
.sug-result-head .eyebrow { margin-bottom: 0; }
.sug-result-head > div:first-child { min-width: 0; }
.sug-tools { align-items: center; flex: none; }
.sug-tools .ctype { flex-wrap: wrap; justify-content: flex-end; }
.sug-tools .btn { white-space: nowrap; }
#view-studio .sug-tools .ctype {
  gap: 9px;
}
#view-studio .sug-tools .ctype > .mut {
  font-weight: 650;
  white-space: nowrap;
}
#view-studio .sug-tools .ctype .sel-inline {
  display: inline-flex;
  width: 196px;
}
#view-studio .sug-tools .ctype .sel-inline select {
  width: 100%;
  min-height: 40px;
  padding: 0 38px 0 13px;
  border: 1px solid #e6cdbf;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefd, #fff8f3);
  box-shadow: 0 5px 15px rgba(115, 79, 49, .07);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#view-studio .sug-tools .ctype .sel-inline select:hover {
  border-color: #d9ad98;
  background: #fffdfb;
}
#view-studio .sug-tools .ctype .sel-inline select:focus {
  border-color: var(--coral);
  background: #fffdfb;
  box-shadow: 0 0 0 3px rgba(255, 101, 66, .16), 0 6px 16px rgba(115, 79, 49, .08);
}
#view-studio .sug-tools .ctype .sel-inline::after {
  right: 14px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--coral);
  border-bottom: 1.5px solid var(--coral);
}
#view-studio .sug-tools .ctype .sel-inline select:disabled {
  box-shadow: none;
}
.sug-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 133, 94, .3);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 238, 230, .9), rgba(255, 249, 245, .8));
}
#view-studio #sug-card .sug-bar {
  position: sticky;
  top: 74px;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(104, 72, 47, .1);
}
.sug-batch-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sug-batch-copy strong { color: var(--ink); font-size: 13px; }
.sug-batch-copy span { color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
.sug-bar #render-picked { min-width: 142px; box-shadow: 0 8px 18px rgba(255, 109, 61, .19); }

#view-studio #sug-card #sug-list {
  margin-top: 0;
  display: grid;
  gap: 16px;
  align-items: stretch;
}
#view-studio #sug-card #sug-list.format-portrait {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
}
#view-studio #sug-card #sug-list.format-wide {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
#view-studio #sug-card #sug-list:has(> .sug:only-child) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
#view-studio #sug-card #sug-list:has(> .sug:only-child) > .sug {
  width: min(100%, 520px);
  margin-inline: auto;
}
#view-studio #sug-card .sug {
  position: relative;
  min-width: 0;
  border-color: rgba(228, 216, 207, .95);
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 22px rgba(104, 72, 47, .055);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#view-studio #sug-card .sug:hover,
#view-studio #sug-card .sug:focus-visible,
#view-studio #sug-card .sug.active {
  border-color: rgba(255, 109, 61, .72);
  box-shadow: 0 16px 32px rgba(104, 72, 47, .12);
  transform: translateY(-2px);
}
#view-studio #sug-card .sug.excluded { opacity: .64; }
#view-studio #global-settings-summary.settings-summary-line {
  margin: 3px 0 0;
  color: #597260;
}
#view-studio #sug-card .sug.excluded:hover,
#view-studio #sug-card .sug.excluded:focus-visible { opacity: .86; }
#view-studio #sug-card .sug-thumb {
  border-radius: 16px 16px 0 0;
  aspect-ratio: 1 / 1;
}
#view-studio #sug-card #sug-list.format-wide .sug-thumb { aspect-ratio: 16 / 9; }
#view-studio #sug-card .sug-inline-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #08090b;
}
#view-studio #sug-card .sug.is-playing .sug-preview { opacity: 1; background: linear-gradient(180deg, rgba(20,14,10,.02), rgba(20,14,10,.18)); }
#view-studio #sug-card .sug.is-playing .sug-preview span { transform: scale(.78); opacity: .7; }
#view-studio #sug-card .sug.is-playing .sug-preview span.is-pause { padding-left: 0; }
#view-studio #sug-card .sug-preview span svg { display: block; }
#view-studio #sug-card .sug-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,9,7,.05), transparent 54%, rgba(8,6,4,.42));
  pointer-events: none;
}
.clip-preview-state {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(260px, 82%);
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(18, 13, 10, .76);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
}
.preview-retry {
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.92);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.preview-retry:hover { background: rgba(255,255,255,.18); }
#view-studio #sug-card .sug-thumb.no-thumb::before {
  content: "Preview unavailable";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#view-studio #sug-card .sug-thumb img { transition: transform .35s ease, filter .25s ease; }
#view-studio #sug-card .sug:hover .sug-thumb img,
#view-studio #sug-card .sug:focus-visible .sug-thumb img { transform: scale(1.035); }
.sug-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, rgba(20,14,10,.03), rgba(20,14,10,.33));
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}
.sug-preview span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding-left: 3px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(255, 109, 61, .92);
  box-shadow: 0 7px 18px rgba(25, 13, 6, .28);
  font-size: 17px;
}
.mini-track:focus-visible {
  outline: 3px solid rgba(255, 109, 61, .42);
  outline-offset: 4px;
}
.sug:hover .sug-preview,
.sug:focus-visible .sug-preview,
.sug.active .sug-preview,
.sug-preview:focus-visible { opacity: 1; }
#view-studio #sug-card .sug .body { padding: 10px 14px 4px; gap: 6px; }
#view-studio #sug-card .sug .sug-t { font-size: 15px; letter-spacing: -.01em; }
#view-studio #sug-card .sug .sug-r { font-size: 12px; line-height: 1.42; }
#view-studio #sug-card .sug .actions {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 14px 8px;
}
#view-studio #sug-card .sug .actions .exclude {
  flex: none;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
#view-studio #sug-card .sug .actions .exclude:hover,
#view-studio #sug-card .sug.excluded .actions .exclude {
  border-color: rgba(255, 109, 61, .34);
  background: rgba(255, 109, 61, .08);
  color: var(--coral);
}
.sug-actions-menu { position: absolute; top: 12px; right: 12px; z-index: 6; }
.sug-actions-menu summary {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid rgba(226, 213, 202, .95); border-radius: 9px;
  border-color: rgba(255,255,255,.24); background: rgba(8,9,11,.72);
  color: rgba(255,255,255,.92); cursor: pointer; list-style: none; font-size: 17px; line-height: 1;
}
.sug-actions-menu summary::-webkit-details-marker { display: none; }
.sug-actions-menu summary:hover, .sug-actions-menu[open] summary { border-color: rgba(255,109,61,.48); background: var(--coral-soft); color: var(--coral); }
.sug-actions-menu summary:focus-visible { outline: 3px solid rgba(255,109,61,.38); outline-offset: 3px; }
.sug-actions-menu summary[aria-disabled="true"] { opacity: .5; cursor: wait; pointer-events: none; }
.sug-actions-popover {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 8;
  display: grid; min-width: 132px; padding: 5px; border: 1px solid var(--peach-line);
  border-radius: 11px; background: #fffdfa; box-shadow: 0 14px 28px rgba(80, 53, 34, .16);
}
.sug-actions-popover button { padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sug-actions-popover button:hover { background: var(--coral-soft); color: var(--coral); }
.sug-actions-popover .menu-feedback.active { background: var(--coral-soft); color: var(--coral); }
#view-studio #batch-panel {
  border-color: rgba(226, 205, 191, .95);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.batch-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(186, 73, 53, .24);
  border-radius: 10px;
  background: #fff0ee;
  color: var(--err);
  font-size: 12px;
  line-height: 1.4;
}
#view-studio .transcript-card { opacity: .84; }

@media (max-width: 680px) {
  .sug-result-head { align-items: stretch; flex-direction: column; gap: 15px; }
  .sug-tools { justify-content: space-between; width: 100%; }
  .sug-tools .ctype { justify-content: flex-start; }
  .sug-bar { align-items: stretch; flex-direction: column; gap: 11px; }
  #view-studio #sug-card .sug-bar { top: 62px; }
  .sug-bar #render-picked { width: 100%; }
  #view-studio #sug-card #sug-list.format-portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-studio #sug-card #sug-list.format-wide { grid-template-columns: minmax(0, 1fr); }
  #view-studio #sug-card .sug-preview {
    opacity: .96;
    background: linear-gradient(180deg, rgba(20,14,10,.02), rgba(20,14,10,.22));
  }
  #view-studio #sug-card .sug-preview span { width: 42px; height: 42px; font-size: 15px; }
}
@media (max-width: 460px) {
  #view-studio #sug-card { padding: 15px; }
  #view-studio #sug-card #sug-list.format-portrait { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone, the preview is the first thing the user came to see. Keep it
   visible at a comfortable portrait size, then let the settings continue in
   one scrollable column instead of allowing the controls to squeeze the
   video to zero height. */
@media (max-width: 900px) {
  .modal-box.clip-box {
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 16px;
  }
  .clip-panes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .clip-pane-video {
    flex: 0 0 auto;
    overflow: visible;
  }
  .clip-pane-controls {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0;
  }
  .mobile-settings-cue { display: block; }
  .vid-frame {
    flex: 0 0 auto;
    width: min(220px, 60vw);
    aspect-ratio: 9 / 16;
  }
  .vid-frame.vertical {
    width: min(220px, 60vw);
    height: auto;
  }
  .mini-bar { max-width: 100%; }
}

@media (max-width: 460px) {
  .modal-box.clip-box {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 14px);
    padding: 14px 12px;
  }
  .clip-box-head { margin-bottom: 10px; }
  .clip-panes { gap: 12px; }
  .clip-box-foot { margin-top: 10px; padding-top: 10px; }
}

/* A card is clickable with a mouse, but the visible play affordance is also
   present at rest so desktop users do not have to discover hover behavior. */
#view-studio #sug-card .sug-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
#view-studio #sug-card .sug-open:focus-visible {
  outline: 3px solid rgba(255, 109, 61, .48);
  outline-offset: -3px;
}
#view-studio #sug-card .sug-open:focus-visible .sug-thumb img { transform: scale(1.035); }
#view-studio #sug-card[aria-busy="true"] .sug-open { cursor: wait; }
#view-studio #sug-card .sug-preview {
  opacity: .92;
  background: transparent;
}
#view-studio #sug-card .sug-open:hover .sug-preview,
#view-studio #sug-card .sug-open:focus-visible .sug-preview {
  opacity: 1;
  background: linear-gradient(180deg, rgba(20,14,10,.03), rgba(20,14,10,.33));
}
#view-studio #sug-card .sug:hover .sug-preview,
#view-studio #sug-card .sug:focus-visible .sug-preview,
#view-studio #sug-card .sug-preview:focus-visible {
  opacity: 1;
  background: linear-gradient(180deg, rgba(20,14,10,.03), rgba(20,14,10,.33));
}
#view-studio #sug-card .sug-preview span { transform: scale(.9); transition: transform .2s ease; }
#view-studio #sug-card .sug:hover .sug-preview span,
#view-studio #sug-card .sug-preview:focus-visible span { transform: scale(1); }
#view-studio #sug-card .sug.is-playing .sug-preview {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#batch-done-row { flex-wrap: wrap; }
@media (max-width: 680px) {
  #view-studio #player-card { padding: 15px; }
  #view-studio #player-card .source-player-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  #batch-done-row .mut { flex: 1 1 100%; }
}

/* Rendered moment cards: the output replaces the still in the same media
   surface, while the editor remains available from the three-dot menu.  Video
   is metadata-only until the user presses play so a batch never starts a
   dozen decoders at once. */
#view-studio #sug-card .sug.has-rendered .sug-open { display: none; }
#view-studio #sug-card .sug-rendered-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #101113;
}
#view-studio #sug-card .sug-rendered-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 360px;
  object-fit: contain;
  background: #101113;
}
#view-studio #sug-card #sug-list.format-wide .sug-rendered-video { aspect-ratio: 16 / 9; }
.sug-output-badge {
  position: absolute;
  left: 11px;
  bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(19, 15, 12, .76);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}
.sug-selection-state {
  position: absolute;
  left: 11px;
  top: 11px;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #56624f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sug[data-selected="false"] .sug-selection-state {
  background: rgba(33, 29, 25, .72);
  color: rgba(255,255,255,.84);
}
.sug-render-state {
  min-height: 15px;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.3;
}
.sug-render-state.is-ready { color: #428158; font-weight: 700; }
.sug-render-state.is-error { color: #b94e42; font-weight: 700; }
.sug.is-rendering { border-color: rgba(255,101,66,.64); box-shadow: 0 0 0 3px rgba(255,101,66,.09); }

.clips-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
#clips-card .clips-card-head .label { margin: 3px 0 4px; }
#download-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  border-color: #efb39e;
  background: #fff5ef;
  color: #9d3e27;
  font-weight: 700;
}
#download-all:hover { border-color: var(--coral); background: #ffede5; color: #87331f; }
#download-all[aria-busy="true"] { cursor: progress; opacity: .75; }
.clip-row {
  min-height: 50px;
  border-bottom-color: #eee2d8;
}
.clip-row .play {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #fff;
  background: var(--coral);
  box-shadow: 0 4px 10px rgba(255,101,66,.2);
}
.clip-row .clip-download {
  flex: none;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--coral);
  font-weight: 700;
}
.clip-row .clip-download:hover { border-color: #f1c0ae; background: #fff3ed; }

#preset-grid .cap-swatch {
  position: relative;
  border-color: #e5d8ce;
  background: #fffaf6;
}
#preset-grid .cap-swatch.active {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(255,101,66,.18), 0 8px 18px rgba(129,75,45,.12);
}
#preset-grid .cap-swatch.active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 560px) {
  .clips-card-head { align-items: stretch; flex-direction: column; gap: 10px; }
  #download-all { justify-content: center; width: 100%; }
  .clip-row { align-items: flex-start; flex-wrap: wrap; }
  .clip-row .n { min-width: calc(100% - 48px); }
  .clip-row .t { margin-left: 40px; }
  .clip-row .clip-download { margin-left: auto; }
}

/* Keep the moment library consistent across source formats. Both formats use
   the same 240px square tile; the media keeps its native ratio inside it so
   the grid stays calm without stretching or cropping the clip. */
#view-studio #sug-card #sug-list.format-portrait,
#view-studio #sug-card #sug-list.format-wide {
  grid-template-columns: repeat(auto-fill, minmax(224px, 240px));
  justify-content: start;
}
#view-studio #sug-card #sug-list:has(> .sug:only-child) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 240px));
  justify-content: start;
}
#view-studio #sug-card #sug-list:has(> .sug:only-child) > .sug {
  width: 100%;
  margin-inline: 0;
}
#view-studio #sug-card #sug-list.format-wide:has(> .sug:only-child) {
  grid-template-columns: repeat(auto-fill, minmax(224px, 240px));
}
#view-studio #sug-card .sug-thumb img {
  object-fit: contain;
  background: linear-gradient(160deg, #25201d 0%, #111316 100%);
}
#view-studio #sug-card #sug-list.format-wide .sug-thumb {
  aspect-ratio: 1 / 1;
}
@media (max-width: 680px) {
  #view-studio #sug-card #sug-list.format-portrait,
  #view-studio #sug-card #sug-list.format-wide,
  #view-studio #sug-card #sug-list:has(> .sug:only-child),
  #view-studio #sug-card #sug-list.format-wide:has(> .sug:only-child),
  #view-studio #sug-card #sug-list.format-portrait:has(> .sug:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final polish for the three states that need to feel deliberate: an empty
   selection, a completed batch, and a partially-used credit rail. */
.mt { margin-top: 14px; }
.sn-bar {
  height: 6px;
  border: 1px solid rgba(74, 62, 51, .1);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(74, 62, 51, .05);
}
#view-studio #sug-card .sug-result-head { border-bottom: 0; }
#view-studio #sug-card .sug-bar.is-empty {
  border-color: rgba(231, 220, 210, .95);
  background: linear-gradient(100deg, rgba(250, 247, 243, .98), rgba(255, 255, 255, .86));
  box-shadow: 0 8px 18px rgba(104, 72, 47, .06);
}
#view-studio #sug-card .sug-bar.is-empty #render-picked {
  background: #eee9e2;
  border-color: #e1d9d0;
  color: #81776f;
  box-shadow: none;
  opacity: 1;
}
#batch-done-row {
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(231, 216, 204, .78);
}
#batch-done-note { line-height: 1.4; }
#view-studio #batch-panel .bq.result .bq-state {
  margin-left: auto;
  margin-right: 0;
}

/* ---------- project navigation and finished clip cards ---------- */
#view-home.project-focus .home-intro,
#view-home.project-focus .source-grid,
#view-home.project-focus #library,
#view-home.project-focus .branding-card { display: none; }
#view-home.project-focus #project-crumb { display: flex; }
#view-home.project-focus #project-clips:not([hidden]) { display: block; }
.project-clips-head { margin-top: 0; }

#projects-list { margin-top: 14px; }
#projects-list .ep-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  padding: 0; border-radius: 15px; border-color: var(--peach-line, var(--line));
  background: rgba(255,255,255,.76);
  box-shadow: 0 9px 24px rgba(112,77,48,.05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#projects-list .ep-card:hover, #projects-list .ep-card:focus-visible {
  border-color: #dcae98; transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(112,77,48,.1);
}
#projects-list .ep-card .ep-title {
  display: -webkit-box; min-height: 35px; margin: 0; padding: 0;
  overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; color: var(--ink, var(--text)); font-size: 12.5px;
  font-weight: 700; line-height: 1.35;
}
#projects-list .ep-card .x {
  position: static; flex: none; margin: -4px -6px 0 auto; padding: 4px 7px;
  border: 0; border-radius: 7px; background: transparent; color: #9b9088;
  font-size: 13px;
}
#projects-list .ep-card .x:hover { background: #f4ece6; color: var(--err); }

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.clip-tile {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); transition: border-color .15s;
}
.clip-tile:hover { border-color: #c9c3b9; }
.clip-open {
  display: flex; flex-direction: column; padding: 0; border: 0;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.clip-thumb {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #14161a;
}
.clip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-play {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding-left: 3px;
  border-radius: 50%; background: var(--coral, var(--acc)); color: #fff;
  font-size: 15px; line-height: 1; box-shadow: 0 6px 18px rgba(18,13,10,.28);
  transition: transform .18s ease;
}
.clip-open:hover .clip-play { transform: scale(1.08); }
.clip-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px;
  border-radius: 6px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 11.5px; font-weight: 650;
}
.clip-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #14161a; }
.clip-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 11px 12px 4px; }
.clip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clip-range { color: var(--mut); font-size: 11.5px; white-space: nowrap; }
.clip-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; font-size: 14px; font-weight: 650; line-height: 1.3;
}
.clip-metrics { display: flex; gap: 18px; }
.clip-metrics .metric { display: flex; flex-direction: column; gap: 1px; }
.clip-metrics .metric b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.clip-metrics .score-n { color: var(--ok); }
.clip-flags { color: var(--mut); font-size: 11px; }
.clip-tile-actions { padding: 8px 12px 11px; }
.clip-tile-actions a { color: var(--coral, var(--acc)); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.clip-tile-actions a:hover { text-decoration: underline; }

#project-clips .clip-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
#project-clips .clip-open { width: 100%; flex: 1 1 auto; }
#project-clips .clip-body { flex: 1 1 auto; }
#project-clips .clip-top { min-height: 20px; }
#project-clips .clip-title { min-height: 36px; }
#project-clips .clip-metrics { min-height: 39px; }
#project-clips .clip-flags { min-height: 15px; }
#project-clips .clip-flags.is-empty { visibility: hidden; }
#project-clips .clip-tile-actions { margin-top: auto; }

@media (max-width: 680px) {
  .clip-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  #project-clips .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #project-clips .clip-grid { grid-template-columns: minmax(0, 1fr); }
}