:root {
  color-scheme: dark;
  --bg: #131416;
  --bg2: #1a1c1e;
  --card: #1c1f21;
  --card2: #202325;
  --border: #2a2d30;
  --text: #eaecee;
  --muted: #8b9196;
  --green: #4ade80;
  --green-dim: #2f6b48;
  --red: #f0708a;
  --bg-brand: #16241c;
  --brand-text: #dff2e6;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text); margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--green); }

/* ---- brand band ---- */
.brandbar {
  background: var(--bg-brand); border-bottom: 1px solid #0e1a13;
  display: flex; justify-content: center; padding: 22px 28px;
}
.logo {
  font-family: 'Quicksand', -apple-system, sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: -0.01em; text-decoration: none; color: var(--brand-text);
}
.logo span.accent { color: var(--green); }

/* ---- top nav ---- */
header.topbar {
  border-bottom: 1px solid var(--border); background: var(--bg2); position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative;
  display: flex; align-items: center; justify-content: center; height: 52px;
}
.topbar-inner > .hint-link { position: absolute; right: 28px; }
nav.tabs { display: flex; gap: 32px; height: 100%; }
nav.tabs a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; height: 100%; border-bottom: 2px solid transparent;
}
nav.tabs a:hover { color: var(--text); }
nav.tabs a.active { color: var(--text); border-bottom-color: var(--green); }

/* ---- editor modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6,8,7,.72); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; padding: 26px;
}
/* Fits preview + controls + timeline side by side; the clip/track panel
   (see .clip-panel below) opens BELOW the timeline rows, inside this same
   width, rather than adding another column. */
.modal-panel.wide { max-width: 1180px; }
.modal-close {
  position: absolute; top: 16px; right: 18px; cursor: pointer; opacity: .6; font-size: 16px; z-index: 2;
}
.modal-close:hover { opacity: 1; }
.modal-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.modal-preview { width: 260px; flex: 0 0 260px; }
/* Fixed, not flex:1 -- these fields (a couple of lines of text, a font
   picker, a size stepper) don't need anywhere near the space a flexible
   column stretches them to. Freed-up width goes to the timeline/side-panel
   columns instead of sitting empty under the Hook/Caption fields. */
.modal-controls { flex: 0 0 400px; }

/* ---- live preview + draggable position handles ---- */
/* Always 9:16 -- the deliverable is always a vertical 1080x1920 file (this
   is a social-platform service, TikTok/Reels/Shorts only take 9:16).
   outputFormat/crop mode only changes how the footage is letterboxed
   *inside* this fixed canvas (see FRAME_DIMENSIONS in Snippet.tsx /
   scripts/render.py); the canvas itself never changes shape. */
.player-stage { position: relative; width: 100%; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; }
/* Invisible drag hit-area centered right on the real text -- no badge, no
   border, nothing drawn; you just grab the actual rendered hook/caption
   text and drag it. A faint hover tint is the only affordance. */
.pos-handle {
  position: absolute; transform: translate(-50%, -50%);
  width: 200px; height: 56px; background: transparent; border: none; border-radius: 8px;
  cursor: grab; user-select: none; z-index: 5;
}
.pos-handle:hover { background: rgba(74,222,128,.08); }
.pos-handle:active { cursor: grabbing; background: rgba(74,222,128,.14); }

/* ---- size stepper (replaces font-size sliders) ---- */
.row > .size-stepper, .row > .pos-stepper { flex: 0 0 auto; min-width: 0; }
.size-stepper {
  display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.size-stepper button {
  background: transparent; border: none; border-radius: 0; color: var(--text); font-weight: 700;
  padding: 9px 14px; cursor: pointer; font-size: 13px;
}
.size-stepper button:hover { background: var(--card2); }
.size-stepper .val { flex: 0 0 auto; width: 30px; text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---- position stepper (left / center / right text alignment for hook & caption) ---- */
.pos-stepper {
  display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.pos-stepper button {
  background: transparent; border: none; border-radius: 0; color: var(--muted);
  padding: 9px 12px; cursor: pointer; font-size: 13px; line-height: 1;
}
.pos-stepper button:hover { background: var(--card2); color: var(--text); }
.pos-stepper button.active { background: rgba(74,222,128,.14); color: var(--green); }
.pos-stepper button svg { display: block; }

/* ---- font picker (hook/caption): native <select> options mostly ignore
   font-family in the OPEN dropdown (Chrome/Safari render that popup with
   the OS's own list styling, not page CSS) -- this is a small custom
   single-column dropdown instead, so every entry actually previews in its
   own font. Backed by the original <select> (kept, just hidden), so every
   existing .value / 'change' consumer keeps working untouched. ---- */
.font-select { position: relative; flex: 1; min-width: 150px; }
.font-select-btn {
  width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.font-select-btn:hover { border-color: #3a3d40; }
.font-select-btn::after { content: "▾"; color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.font-select-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.font-select-option {
  padding: 9px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; color: var(--text);
}
.font-select-option:hover { background: var(--bg2); }
.font-select-option.selected { background: rgba(74,222,128,.14); color: var(--green); }

/* ---- crop mode (output frame format) ---- */
.crop-mode-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.crop-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  font-size: 11px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.crop-btn:hover { border-color: #3a3d40; }
.crop-btn.active { border-color: var(--green); color: var(--text); background: rgba(74,222,128,.08); }
.crop-icon { display: block; background: var(--muted); border-radius: 2px; }
.crop-btn.active .crop-icon { background: var(--green); }
.crop-icon.r-9-16 { width: 14px; height: 24px; }
.crop-icon.r-1-1 { width: 20px; height: 20px; }
.crop-icon.r-16-9 { width: 26px; height: 15px; }
.crop-icon.r-3-4 { width: 24px; height: 17px; }

/* ---- bottom multi-track timeline ---- */
/* A column next to the preview/controls, not a full-width strip below them
   -- the live preview stays in view while scrubbing/trimming instead of
   needing a scroll up to see the result of every change. */
.modal-timeline { flex: 1 1 320px; min-width: 280px; padding-left: 20px; border-left: 1px solid var(--border); }
.timeline-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.timeline-ruler { position: relative; height: 16px; margin: 0 0 4px 48px; }
.ruler-tick { position: absolute; top: 0; font-size: 9px; color: var(--muted); white-space: nowrap; }
.ruler-tick::after { content: ''; position: absolute; left: 0; top: 12px; width: 1px; height: 5px; background: var(--border); }
.timeline-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 6px; }
.row-label {
  flex: 0 0 40px; display: flex; align-items: center; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.timeline-track {
  position: relative; height: 44px; flex: 1; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; overflow: hidden;
}
.timeline-hook-bar {
  position: absolute; inset: 2px; background: rgba(74,222,128,.14); border: 1px solid var(--green-dim);
  border-radius: 5px; display: flex; align-items: center; padding: 0 10px; font-size: 11.5px;
  color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.timeline-hook-bar.empty { color: var(--muted); font-style: italic; }
.timeline-track-bar {
  position: absolute; inset: 2px; background: rgba(90,150,240,.14); border: 1px solid #2f4a6b;
  border-radius: 5px; display: flex; align-items: center; padding: 0 10px; font-size: 11.5px;
  color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.timeline-track-bar:hover { filter: brightness(1.2); }
.timeline-video-clip {
  position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--bg2); cursor: pointer;
  background: #1b2e22; display: flex; align-items: center; overflow: hidden; transition: filter .1s;
}
.timeline-video-clip:hover { filter: brightness(1.3); }
.timeline-video-clip.selected { outline: 2px solid var(--green); outline-offset: -2px; z-index: 2; }
.timeline-video-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; pointer-events: none; }
.timeline-video-clip .dur-label {
  position: relative; z-index: 1; font-size: 10px; font-weight: 700; color: #fff; padding: 3px 5px;
  background: rgba(0,0,0,.5); border-radius: 4px; margin: 3px;
}
/* CapCut-style: a body you drag to move the whole word, and two edge
   handles to shorten/lengthen it -- see wireWordDrag() in app.js. */
.timeline-caption-chip {
  position: absolute; top: 6px; bottom: 6px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 4px; font-size: 9.5px; color: var(--muted); display: flex; align-items: stretch;
  overflow: hidden; transition: border-color .1s;
}
.timeline-caption-chip:hover { border-color: #3a3d40; }
.chip-body {
  flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 0 3px; white-space: nowrap; cursor: grab;
}
.chip-body:active { cursor: grabbing; }
.chip-handle { flex: 0 0 5px; cursor: ew-resize; }
.chip-handle:hover, .chip-handle:active { background: rgba(74,222,128,.35); }

/* ---- right-click context menu ---- */
.context-menu {
  position: fixed; z-index: 300; background: var(--card2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 5px; min-width: 190px;
}
.context-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.context-menu button:hover { background: var(--bg2); }

/* ---- clip-replace/trim and track-switch panels ---- */
/* Opens right below the timeline rows, inside the same column -- not a
   sibling column of its own. */
.clip-panel { margin-top: 14px; padding: 16px; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; }
.clip-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.clip-panel-head strong { font-size: 13px; }
.trim-scrubber { position: relative; height: 48px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
/* Real frame-by-frame filmstrip (see buildFilmstrip() in app.js) instead of
   one stretched, blurry still -- a canvas that gets painted with evenly-
   spaced frames sampled straight from the source clip. */
#trimFilmstrip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Without this, an empty canvas while frames are still loading just looks
   broken -- there's nothing on screen to suggest anything is happening. */
.filmstrip-loading {
  position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted); background: rgba(21,24,26,.7); pointer-events: none;
}
.trim-window {
  position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.16);
  border-top: 3px solid var(--green); border-bottom: 3px solid var(--green); cursor: grab;
}
.trim-window:active { cursor: grabbing; }
/* Bracket-style start/end handles, like a real NLE's trim window -- purely
   visual (the window's WIDTH is fixed to the slot's own duration; only its
   position slides), so these mark the edges rather than resizing them. */
.trim-handle {
  position: absolute; top: 0; bottom: 0; width: 9px; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.trim-handle-start { left: 0; border-radius: 3px 0 0 3px; }
.trim-handle-end { right: 0; border-radius: 0 3px 3px 0; }
.trim-handle::after { content: ''; width: 2px; height: 18px; background: rgba(12,26,16,.65); border-radius: 1px; }
.clip-lib-grid { display: flex; gap: 8px; overflow-x: auto; padding-top: 4px; }
.clip-lib-item {
  flex: 0 0 52px; width: 52px; aspect-ratio: 9/16; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border); background: var(--bg2); position: relative;
}
.clip-lib-item.current { border-color: var(--green); }
.clip-lib-item video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.track-lib-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.track-lib-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.track-lib-item:hover { border-color: #3a3d40; }
.track-lib-item.current { border-color: var(--green); cursor: default; }
.track-lib-name { font-size: 13px; font-weight: 600; }

.ctrl-section { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ctrl-section:last-of-type { border-bottom: none; }
.ctrl-section h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin: 0 0 10px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.ctrl-section h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }

.segmented { display: flex; flex-wrap: wrap; gap: 3px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.segmented button {
  flex: 0 0 auto; background: transparent; border: none; padding: 7px 14px; font-size: 12.5px; color: var(--muted);
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.segmented button.active { background: var(--green); color: #0c1a10; font-weight: 700; }

/* ---- toasts ---- */
#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px;
  font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toast-in .15s ease-out;
  max-width: 320px;
}
.toast.ok { border-color: var(--green-dim); }
.toast.error { border-color: #6b2f3d; color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

main { max-width: 1180px; margin: 0 auto; padding: 36px 28px 100px; }
h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0 0 12px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
p.sub { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* The whole stylesheet had zero media queries before this -- a fixed 4-up
   grid (Sets/Visuals/Studio) just kept squeezing every card narrower with
   no floor, which is what let the .actions button row overflow in the
   first place. Stepping the column count down keeps each card at a
   sane minimum width instead of shrinking forever. */
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: 1fr; }
}

label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; margin-top: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=file], input[type=number], input[type=password], textarea, select {
  width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit;
}
textarea { min-height: 100px; resize: vertical; }
#modalHookInput { min-height: 44px; font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-dim); }

button, .btn {
  background: var(--card2); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .btn:hover { border-color: #3a3d40; background: #26292b; }
button.primary, .btn.primary { background: var(--green); border-color: var(--green); color: #0c1a10; }
button.primary:hover { background: #3fc772; }
button.ghost, .btn.ghost { background: transparent; }
button.danger { color: var(--red); }
button:disabled { opacity: .4; cursor: default; }
button.small, .btn.small { padding: 6px 10px; font-size: 12px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 150px; }
.row.top { align-items: flex-start; }

.preset-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--text); display: block; transition: border-color .15s;
}
.preset-card:hover { border-color: var(--green-dim); }
.preset-card .thumb { aspect-ratio: 9/13; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; overflow: hidden; }
.preset-card .thumb img, .preset-card .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb-preview { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 8px; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; flex: 1; min-height: 0; }
.thumb-grid video { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: #000; }
.thumb-track {
  font-size: 10px; color: var(--muted); background: var(--card2); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 7px; text-align: center; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 0 0 auto;
}
.thumb-initials { font-size: 22px; font-weight: 700; color: var(--muted); }

/* ---- footage / hook thumbnail grids on the set detail page ---- */
.footage-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.footage-thumb { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 6px; background: #000; border: 1px solid var(--border); }

/* ---- footage packs + personal picks on the new-set page ---- */
.pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; min-width: 0; }
.pack-card { display: block; cursor: pointer; min-width: 0; }
.pack-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.pack-card .thumb-preview {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 3px;
  aspect-ratio: 9/13; background: var(--bg2); border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; padding: 4px; box-sizing: border-box; transition: border-color .15s;
}
.pack-card .thumb-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: #000; display: block; }
.pack-card:hover .thumb-preview { border-color: #3a3d40; }
.pack-card input:checked ~ .thumb-preview { border-color: var(--green); }
.pack-card-name {
  padding: 6px 2px 0; font-size: 11.5px; font-weight: 700; text-transform: capitalize;
}
.footage-pick { display: block; cursor: pointer; }
.footage-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.footage-pick .footage-thumb { border-width: 2px; border-color: var(--border); transition: border-color .15s; }
.footage-pick input:checked ~ .footage-thumb { border-color: var(--green); }

/* ---- collapsible "pick footage from this set" sections (new/edit visual) ---- */
.footage-spoiler { border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; margin: 10px 0; }
.footage-spoiler > .grid { padding: 4px 0 14px; }
.footage-spoiler summary { padding: 12px 0; cursor: pointer; font-weight: 700; list-style: none; }
.footage-spoiler summary::-webkit-details-marker { display: none; }
.footage-spoiler summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; }
.footage-spoiler[open] summary::before { transform: rotate(90deg); }

/* ---- Set detail page: two-column layout (Track+Hooks | Footage), top-aligned ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.detail-left { display: flex; flex-direction: column; gap: 16px; }

/* ---- hooks as an editor-style line list, not wrapping chips ---- */
.hook-list { display: flex; flex-direction: column; gap: 5px; }
.hook-row {
  display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px;
}
.hook-row:hover { border-color: #3a3d40; }
.hook-row .hook-text { flex: 1; cursor: text; font-size: 13px; }
.hook-row .hook-text[contenteditable="true"] { outline: none; }
.hook-row .hook-text[contenteditable="true"]:focus { color: var(--green); }
.hook-row .hook-del { cursor: pointer; opacity: .5; flex: 0 0 auto; }
.hook-row .hook-del:hover { opacity: 1; color: var(--red); }
.preset-card .body { padding: 14px; }
.preset-card .name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.preset-card .meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; }

.badge { font-size: 10.5px; padding: 3px 8px; border-radius: 20px; background: var(--card2); border: 1px solid var(--border); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.badge.ok { background: rgba(74,222,128,.12); color: var(--green); border-color: var(--green-dim); }
.badge.warn { background: rgba(240,180,80,.12); color: #f0b450; border-color: #6b5a2f; }
.badge.running { background: rgba(90,150,240,.12); color: #7ab0f0; border-color: #2f4a6b; }
.badge.error { background: rgba(240,112,138,.12); color: var(--red); border-color: #6b2f3d; }

.creative-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; }
.card-select {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: rgba(19, 20, 22, .65); border-radius: 6px; cursor: pointer;
}
.card-select input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.bulk-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.bulk-select-group, .bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bulkCount { white-space: nowrap; }
/* Always 9:16, same reasoning as .player-stage above -- the deliverable
   (and its preview) is always the fixed vertical canvas. */
.creative-card video, .creative-card .ph, .creative-card .grid-player { width: 100%; aspect-ratio: 9/16; background: #000; display: block; object-fit: contain; }
.creative-card .ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.creative-card .grid-player { position: relative; overflow: hidden; }
.creative-card .grid-player .ph { position: absolute; inset: 0; }
.creative-card .foot { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.creative-card .foot .hook { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
/* Edit/Approve/Delete: a bare <button> next to two <form> wrappers, each a
   flex item at its own natural (different) width -- that's fine, they're
   not meant to match. The actual bug was no wrap: at a narrow card width
   all three together could add up to more than the card, and Delete slid
   out past the right edge instead of the row giving way. Forcing them to
   equal thirds "fixed" that but broke proportions instead (Approve's own
   text no longer fit its share and got clipped) -- wrapping the row is
   the fix that doesn't touch each button's natural size at all. */
.creative-card .actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 12px; }
.creative-card .actions > * { flex: 0 0 auto; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; padding: 5px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; color: var(--muted); }
.chip.clickable { cursor: pointer; color: var(--text); }
.chip.clickable:hover { border-color: var(--green-dim); color: var(--green); }

.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.gen-row { display: grid; grid-template-columns: 90px 1fr 180px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.gen-row:last-child { border-bottom: none; }
.gen-row .num { color: var(--muted); font-size: 13px; font-weight: 700; }

.preview-panel { width: 300px; flex: 0 0 300px; }
.preview-video, video.preview-video, img.preview-video {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; background: #000;
}
.preview-panel .badge-row { margin-top: 10px; }

/* ==== public marketing site + auth (logged-out, no app nav) ==== */
.public-main { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

.site-header { border-bottom: 1px solid var(--border); }
.site-header-inner {
  max-width: 1040px; margin: 0 auto; padding: 20px 28px;
  display: flex; justify-content: space-between; align-items: center;
}
.site-header-actions { display: flex; gap: 10px; align-items: center; }

.legal-page { max-width: 720px; margin: 0 auto; padding: 56px 0 80px; }
.legal-page h1 { font-size: 32px; margin: 0 0 6px; }
.legal-page h2 { font-size: 18px; margin: 32px 0 10px; }
.legal-page p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; }
.legal-page p a { color: var(--text); }
.legal-agree { font-size: 12px; line-height: 1.6; margin-top: 12px; }

.hero { text-align: center; padding: 96px 20px 64px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin: 0 0 20px;
}
.hero h1 { font-size: 48px; line-height: 1.15; margin: 0 0 22px; letter-spacing: -0.01em; }
.hero .lead { font-size: 17px; color: var(--muted); max-width: 620px; margin: 0 auto 32px; line-height: 1.65; }
.btn.large { font-size: 15.5px; padding: 14px 28px; }
.hero .hint { margin-top: 14px; }

/* "Newspaper clipping" feature blocks: an image beside its own short text,
   alternating sides down the page -- each block stands alone rather than
   competing inside a dense grid. */
.feature-row { display: flex; align-items: center; gap: 56px; padding: 64px 0; border-top: 1px solid var(--border); }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-row.camera-shy { justify-content: center; }
.feature-media { flex: 1 1 50%; min-width: 0; }
.feature-media img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--border); }
.feature-text { flex: 1 1 50%; min-width: 0; }
.feature-text h2 { font-size: 27px; margin: 0 0 14px; letter-spacing: -0.01em; }
.feature-text p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0; }

.cta-strip { text-align: center; padding: 80px 20px; border-top: 1px solid var(--border); }
.cta-strip h2 { font-size: 28px; margin: 0 0 26px; }

/* ---- pricing page ---- */
.pricing-page { padding: 56px 0 96px; }
.pricing-hero { text-align: center; padding-bottom: 40px; }
.pricing-hero h1 { font-size: 38px; margin: 0 0 14px; letter-spacing: -0.01em; }
.pricing-hero .lead { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto 28px; line-height: 1.65; }
.cycle-toggle {
  display: inline-flex; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; gap: 2px;
}
.cycle-btn {
  background: transparent; border: none; border-radius: 999px; color: var(--muted);
  font-size: 13.5px; font-weight: 600; padding: 9px 18px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.cycle-btn.active { background: var(--card2); color: var(--text); }
.save-badge {
  background: var(--green-dim); color: var(--green); font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .02em;
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 auto; max-width: 1000px; }
.plan-card {
  position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px; display: flex; flex-direction: column;
}
.plan-card.highlight { border-color: var(--green); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #0d1f14; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-card h3 { font-size: 18px; margin: 4px 0 16px; }
.plan-price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.plan-price .per { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan-price .price-strike { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: line-through; margin-left: 6px; }
.plan-billed-note { font-size: 12.5px; color: var(--muted); margin: 4px 0 20px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-features li { font-size: 13.5px; color: var(--text); padding-left: 20px; position: relative; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-cta { width: 100%; text-align: center; justify-content: center; }
.pricing-footnote { margin-top: 36px; font-size: 13px; }
.pricing-page[data-cycle="annual"] .price-monthly, .pricing-page[data-cycle="annual"] p.plan-billed-note.price-monthly { display: none; }
.pricing-page[data-cycle="monthly"] .price-annual, .pricing-page[data-cycle="monthly"] p.plan-billed-note.price-annual { display: none; }
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
}

.site-footer { border-top: 1px solid var(--border); margin-top: 20px; }
.site-footer-inner {
  max-width: 1040px; margin: 0 auto; padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.logo.small { font-size: 16px; }
.site-footer-links { display: flex; gap: 18px; }
.site-footer-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.site-footer-links a:hover { color: var(--text); }

@media (max-width: 760px) {
  .hero { padding: 64px 16px 48px; }
  .hero h1 { font-size: 34px; }
  .feature-row, .feature-row.reverse { flex-direction: column; gap: 24px; padding: 40px 0; }
}

/* ---- auth (login/signup) ---- */
.auth-card {
  max-width: 400px; margin: 56px auto; padding: 36px 32px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
}
.mobile-gate {
  display: none;
}
@media (max-width: 480px), (pointer: coarse) {
  .mobile-gate {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; position: fixed; inset: 0; z-index: 9999; padding: 32px; text-align: center;
    background: var(--bg); color: var(--text);
  }
  .mobile-gate .logo { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 22px; margin: 0; }
  .mobile-gate h2 { margin: 0; font-size: 20px; }
  .mobile-gate p:not(.logo) { color: var(--muted); max-width: 320px; margin: 0; }
}

.auth-card h1 { font-size: 24px; text-align: center; margin: 0 0 8px; }
.plan-chip {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: var(--muted); text-align: center; margin: 0 0 16px;
}
.plan-chip a { color: var(--text); }
.auth-error {
  background: rgba(240, 112, 138, .12); border: 1px solid var(--red); color: var(--red);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; text-align: center; margin: 0 0 16px;
}
.sub.center { text-align: center; }
.sub.center a { color: var(--text); text-decoration: underline; }
.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px; padding: 6px; line-height: 1; opacity: .7;
}
.password-toggle:hover { opacity: 1; }
.hint-link { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.hint-link:hover { color: var(--green); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn.oauth {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 10px; padding: 11px; background: var(--bg2); font-size: 14px;
}
.btn.oauth:hover { border-color: #3a3d40; background: var(--card2); }
.editor-panel { flex: 1; min-width: 260px; }