/* =====================================================================
 * Screen Recorder PWA — styles.css
 * Beginner-first redesign. Engine (app.js) untouched; only the shell.
 * =================================================================== */

:root {
  /* Luxury-dark palette: deep near-black, glassy translucent surfaces,
     hairline borders, restrained accents. Fewer values, calmer light. */
  --bg: #08090e;
  --bg-2: #101219;
  --bg-3: #05060b;
  --card: rgba(255,255,255,0.032);
  --card-2: rgba(255,255,255,0.020);
  --line: rgba(255,255,255,0.065);
  --line-2: rgba(255,255,255,0.12);
  --fg: #eef0f6;
  --muted: #888ea3;
  --accent: #22d3ff;
  --accent-2: #8b74ff;
  --accent-grad: linear-gradient(135deg, #22d3ff, #8b74ff);
  --rec: #ff3b46;
  --ok: #36d399;
  --warn: #ffb020;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 30px 70px rgba(0,0,0,.55);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.36);
  /* Motion + focus, tuned like Apple/Fluent/Material (soft, decisive easing). */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ring: 0 0 0 3px rgba(34,211,255,.16);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1300px 640px at 18% -12%, rgba(124,92,255,.09), transparent 62%),
    radial-gradient(1100px 560px at 100% 2%, rgba(0,224,255,.055), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font: 15px/1.6 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app { max-width: 840px; margin: 0 auto; padding: 26px 20px 96px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------ icons ---------------------------- */
/* Shapes in the sprite carry no colour; these inherited props drive them. */
.ico {
  width: 1.15em; height: 1.15em; flex: none; display: inline-block;
  vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-fill { fill: currentColor; stroke: none; }
/* buttons put a little gap between icon and text automatically */
button .ico, .ghost .ico, .primary .ico, a.primary .ico, a.ghost .ico { margin-right: 2px; }
.style-ico  { width: 30px; height: 30px; color: var(--accent); }
.cap-ico    { width: 22px; height: 22px; color: var(--accent); }
.chip-ico   { width: 16px; height: 16px; }
.eff-ico    { width: 17px; height: 17px; color: var(--accent); margin-right: 2px; vertical-align: -0.28em; }
.lbl-ico    { width: 15px; height: 15px; color: var(--muted); margin-right: 5px; vertical-align: -0.22em; }
.legend-ico { width: 15px; height: 15px; color: var(--accent); margin-right: 5px; vertical-align: -0.22em; }

/* ---------------------------- top bar ---------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 {
  font-size: 21px; margin: 0; font-weight: 800; letter-spacing: -0.01em;
}
.brand h1 .bw { color: #f5f7fc; }
.brand h1 .br { color: #ff3a46; }
.brand-badge {
  width: 30px; height: 30px; border-radius: 9px; display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.app-version {
  align-self: center; margin-left: 2px;
  font: 600 11px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .02em; color: var(--muted);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.brand .dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6a4d, #d6202a);
  box-shadow: 0 0 0 4px rgba(255,59,70,.20); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,59,70,.22); }
  50%     { box-shadow: 0 0 0 10px rgba(255,59,70,0); }
}
.topbar-actions { display: flex; gap: 8px; }

/* ----------------------------- cards ----------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  margin-bottom: 12px;
}

.section-head { margin-bottom: 14px; }
.section-title {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--fg);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 11px;
}
.section-sub { margin: 7px 0 0; font-size: 13px; }
/* Refined step marker: hairline ring, not a loud gradient chip. */
.badge-num {
  display: inline-grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }

/* (3-step guide strip removed — it just restated the section headings below it.) */

/* ------------------------- style preset cards -------------------- */
.style-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.style-card {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer; color: var(--fg);
  font: inherit;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
/* Compact header row: icon + name side by side so the collapsed card is short. */
.style-card .style-emoji { position: absolute; top: 10px; left: 12px; }
.style-card .style-emoji .style-ico { width: 26px; height: 26px; }
.style-card .style-name { padding-left: 34px; min-height: 26px; display: flex; align-items: center; }
.style-card:hover { border-color: rgba(0,224,255,.45); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.style-card:active { transform: translateY(0); }

/* Description + meta are always visible; the compact header row and tighter
   padding keep the grid short vertically. */
.style-card .style-desc { margin-top: 5px; }
.style-card .style-meta { margin-top: 3px; }
.style-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0,224,255,.10), rgba(124,92,255,.06));
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(0,224,255,.12);
}
.style-card.active::after {
  content: "✓ Selected"; position: absolute; top: 12px; right: 13px;
  font-size: 11px; font-weight: 700; color: var(--accent);
}
.style-emoji { font-size: 26px; line-height: 1; }
.style-name { font-size: 15px; font-weight: 700; }
.style-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.style-meta {
  margin-top: 2px; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.popular-tag {
  position: absolute; top: -9px; left: 14px;
  background: var(--accent-grad); color: #06060f;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.is-popular { border-color: rgba(124,92,255,.35); }

/* ----------------------- capture mode cards ---------------------- */
.capmode-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
  border: none; padding: 0; margin: 0;
}
/* FLAW 11 — display:none drops the group label from the a11y tree; hide it
 * visually but keep it for screen readers. */
.capmode-cards legend {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.capcard {
  position: relative; background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.capcard:hover { border-color: rgba(0,224,255,.30); background: rgba(0,224,255,.04); }
.capcard:has(input:checked) {
  border-color: var(--accent);
  background: rgba(0,224,255,.08);
  box-shadow: 0 0 0 1px var(--accent);
}
.capcard input { position: absolute; opacity: 0; pointer-events: none; }
.capcard-body { display: flex; align-items: flex-start; gap: 13px; }
.capcard-icon {
  font-size: 22px; line-height: 1;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(0,224,255,.08); border-radius: 10px; flex-shrink: 0;
}
.capcard-title { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.capcard-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ----------------------- format + sound row --------------------- */
/* Was `auto 1fr` — with the Save-as toggle removed there's only ONE child left,
   which stranded "Camera & sound" at half width next to a dead gap. */
.subrow {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  margin-top: 12px; align-items: start;
}
.field-group { display: flex; flex-direction: column; gap: 9px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }

.segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 12px; width: fit-content;
  /* The speed control now has FIVE options (1×–5×). Without wrapping, they
     overflowed the card on narrower windows. */
  flex-wrap: wrap; max-width: 100%;
}
.seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 18px; border-radius: 9px; cursor: pointer;
  font: 600 13.5px/1.2 inherit; transition: background .15s, color .15s;
}
.seg-btn .seg-emoji { font-size: 16px; }
/* was 10px @ .8 opacity — too small/faint to read comfortably */
.seg-btn .seg-hint { font-size: 11px; font-weight: 500; opacity: .95; }
.seg-btn:hover { color: var(--fg); }
.seg-btn.active { background: var(--accent-grad); color: #06060f; box-shadow: var(--shadow-sm); }
.seg-btn.active .seg-hint { opacity: .85; }

.toggle-row { display: flex; gap: 9px; flex-wrap: wrap; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 13px; color: var(--fg);
  user-select: none; transition: border-color .15s, background .15s;
}
.chip-toggle:hover { border-color: var(--line-2); }
.chip-toggle:has(input:checked) {
  border-color: var(--ok); background: rgba(54,211,153,.10); color: var(--fg);
}
.chip-toggle input { accent-color: var(--ok); width: 15px; height: 15px; margin: 0; }

/* ----------------------- record (hero) card --------------------- */
.record-card { text-align: center; }
.record-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.record-btn {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 100%; max-width: 360px;
  padding: 20px 28px;
  border: 0; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, #ff4d57, #ff2d7a);
  color: #fff; font: inherit;
  box-shadow: 0 14px 40px rgba(255,45,90,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .1s, box-shadow .2s, filter .15s;
  overflow: hidden;
}
.record-btn::before {
  content: ""; position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25);
  animation: pulse-rec 1.8s infinite;
}
@keyframes pulse-rec {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
  50%     { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}
.record-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(255,45,90,.45); filter: brightness(1.05); }
.record-btn:active { transform: translateY(0); }
.record-btn .record-btn-ring,
.record-btn .record-btn-core { display: none; } /* dot handled by ::before */
.record-btn-label { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.record-btn-sub { font-size: 12px; font-weight: 500; opacity: .85; }
.record-btn[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.record-btn[disabled]::before { animation: none; }

/* recording controls (revealed via body.is-recording) */
.rec-controls { display: none; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.ctrl {
  appearance: none; border: 0; cursor: pointer;
  padding: 13px 20px; border-radius: 13px; font: 700 14px/1 inherit;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .08s, background .15s, filter .15s;
}
.ctrl:active { transform: translateY(1px); }
.ctrl[disabled] { opacity: .45; cursor: not-allowed; }

body.is-recording .record-btn { display: none; }
body.is-recording .rec-controls { display: flex; }

/* generic buttons */
button, .primary, .ghost, .danger {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 12px; font: 600 14px/1 inherit;
  transition: transform .14s var(--ease), background .18s var(--ease), color .18s var(--ease),
              filter .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), opacity .15s;
}
button:active { transform: scale(.97); }
.primary {
  background: var(--accent-grad); color: #06060f;
  box-shadow: 0 4px 14px rgba(0,150,210,.30), inset 0 1px 0 rgba(255,255,255,.28);
}
.primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,150,210,.40), inset 0 1px 0 rgba(255,255,255,.32); }
.primary:active { transform: translateY(0) scale(.98); }
.ghost { background: rgba(255,255,255,.05); color: var(--fg); border: 1px solid var(--line-2); }
.ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.danger { background: var(--rec); color: #fff; box-shadow: 0 4px 14px rgba(255,59,70,.30); }
.danger:hover { filter: brightness(1.06); transform: translateY(-1px); }
button[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none; }
.small { font-size: 12.5px; padding: 8px 13px; }
.big { padding: 13px 22px; font-size: 15px; border-radius: 13px; }
a.primary, a.ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }

/* hotkey hint pill */
.btn-main { display: inline-block; }
.kbd-hint {
  display: inline-block; margin-left: 2px; padding: 2px 7px;
  font: 600 11px system-ui, sans-serif;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px; opacity: .9; letter-spacing: .02em;
}

/* ----------------------------- status ---------------------------- */
.status { margin-top: 18px; }
progress {
  width: 100%; height: 9px; appearance: none; border: 0;
  border-radius: 6px; overflow: hidden; background: var(--bg-3);
}
progress::-webkit-progress-bar { background: var(--bg-3); border-radius: 6px; }
progress::-webkit-progress-value { background: var(--accent-grad); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--accent); }
#statusText {
  font-size: 13.5px; font-weight: 500; color: var(--fg);
  margin: 10px 0 0; padding: 10px 14px;
  background: rgba(255,255,255,.035);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
}

/* --------------------------- advanced ---------------------------- */
.advanced { padding: 0; overflow: hidden; }
.advanced-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 11px;
  padding: 16px 20px; font-weight: 600;
}
.advanced-summary::-webkit-details-marker { display: none; }
.advanced-summary:hover { background: rgba(255,255,255,.03); }
.adv-icon { font-size: 16px; opacity: .9; }
.adv-hint { margin-left: 2px; }
.adv-chevron { margin-left: auto; transition: transform .2s; opacity: .7; }
.advanced[open] .adv-chevron { transform: rotate(180deg); }
.advanced-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.advanced-foot { margin-top: 14px; display: flex; justify-content: flex-end; }

/* Result-screen "Export options" collapse — mirrors the Advanced panel. */
.export-more { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.export-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; font-weight: 600;
}
.export-summary::-webkit-details-marker { display: none; }
.export-summary:hover { background: rgba(255,255,255,.03); }
.export-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.export-more[open] .adv-chevron { transform: rotate(180deg); }
.export-more-body { padding: 6px 16px 16px; border-top: 1px solid var(--line); }
.export-more-body .field-group { margin-top: 12px; }
.export-more-body .field-group:first-child { margin-top: 4px; }

.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
input[type=number], input[type=text], select {
  appearance: none; width: 100%;
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,224,255,.16); }
input:hover, select:hover { border-color: var(--line-2); }
/* Custom dropdown chevron (Apple/Fluent style) */
select {
  cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0b6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type=range] { accent-color: var(--accent); width: 100%; }

.effects { margin: 18px 0 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.effects legend { padding: 0 6px; color: var(--accent); font-weight: 600; font-size: 13px; }
.effects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.effects .check { flex-direction: row; align-items: center; gap: 9px; color: var(--fg); margin: 7px 0; cursor: pointer; }
.effects .check input { accent-color: var(--accent); width: 16px; height: 16px; }
.effects .range { color: var(--fg); margin-top: 12px; }
.range-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.range-val {
  color: var(--accent); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; font-family: 'Consolas', 'SF Mono', monospace;
}

/* --------------------------- result card ------------------------- */
.result-card { border-color: rgba(54,211,153,.30); }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.result-head .section-title { font-size: 16px; }
#previewVideo { width: 100%; max-height: 58vh; background: #000; border-radius: 12px; }
.result-actions { margin-top: 16px; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* (Install-suggestion card + footer tip removed — the banner nagged on every
   load and the tip was permanent clutter. Install now lives in the top bar and
   only appears when the browser reports the app is actually installable.) */

/* ----------------------------- dialog ---------------------------- */
dialog {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 16px;
  max-width: 540px; max-height: 86vh; overflow: auto;     /* scroll on short screens */
  padding: 22px 24px; box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
dialog h2 { margin-top: 0; font-size: 18px; }
dialog ul { padding-left: 18px; }
dialog li { margin: 8px 0; line-height: 1.5; }
dialog form { margin-top: 16px; text-align: right; }

/* ===================================================================
 * Recording overlays used by app.js — KEEP THESE SELECTORS INTACT
 * ================================================================= */

/* region picker overlay */
.region-picker {
  position: fixed; inset: 0; z-index: 99999; background: #000;
  user-select: none; cursor: crosshair; overflow: hidden; animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.rp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rp-hint {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,.78); color: #fff; padding: 10px 18px; border-radius: 999px;
  font: 600 13px system-ui, sans-serif; border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(6px);
}
.rp-hint b { color: var(--accent); }
.rp-box {
  position: absolute; box-sizing: border-box; border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.4); pointer-events: none;
}
.rp-box::before, .rp-box::after, .rp-box .rp-handle {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--accent); border: 2px solid #0a0a14; border-radius: 3px;
}
.rp-box::before { left: -7px; top: -7px; }
.rp-box::after  { right: -7px; top: -7px; }
.rp-handle.br   { right: -7px; bottom: -7px; }
.rp-handle.bl   { left: -7px; bottom: -7px; }
.rp-dim-label {
  position: absolute; z-index: 6; background: var(--accent); color: #0a0a14;
  padding: 4px 10px; font-weight: 700; font-size: 12px; border-radius: 6px;
  pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rp-toolbar {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; gap: 10px; background: rgba(20,20,30,.85); padding: 10px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px);
}
.rp-toolbar button { cursor: pointer; }
.rp-toolbar { align-items: center; flex-wrap: wrap; max-width: 94vw; }
.rp-toolbar-spacer { width: 6px; }
.rp-ratios { display: flex; gap: 6px; align-items: center; }
.rp-ratio {
  padding: 7px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); color: #e9e9f3; font: 600 13px system-ui,"Segoe UI",sans-serif;
}
.rp-ratio:hover { background: rgba(255,255,255,.12); }
.rp-ratio.active { background: var(--accent); border-color: var(--accent); color: #06060f; }

/* ===================== post-recording processing overlay ===================== */
.proc-overlay {
  position: fixed; inset: 0; z-index: 2147483600;
  display: grid; place-items: center; padding: 24px;
  background: rgba(8, 8, 16, .72); backdrop-filter: blur(10px);
  animation: procIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes procIn { from { opacity: 0 } to { opacity: 1 } }
.proc-overlay[hidden] { display: none; }

.proc-card {
  width: 100%; max-width: 440px; text-align: center;
  padding: 40px 34px 32px; border-radius: 24px;
  background: linear-gradient(180deg, #1a1a2b, #111119);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 110px rgba(0,0,0,.6);
}

/* orbiting rings + rocket */
.proc-orbit { position: relative; width: 120px; height: 120px; margin: 0 auto 26px; }
.proc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #00e0ff; border-right-color: #7c5cff;
  animation: procSpin 1.5s linear infinite;
}
.proc-ring.r2 { inset: 12px; border-top-color: #7c5cff; border-right-color: #ff5db1;
                animation-duration: 2.1s; animation-direction: reverse; opacity: .8; }
.proc-ring.r3 { inset: 24px; border-top-color: #ff5db1; border-right-color: #00e0ff;
                animation-duration: 2.9s; opacity: .55; }
@keyframes procSpin { to { transform: rotate(360deg); } }
.proc-rocket {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; animation: procFloat 2.2s ease-in-out infinite;
}
@keyframes procFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

.proc-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.proc-step  { margin: 0 0 20px; font-size: 15px; color: #9aa2bd; min-height: 22px; font-weight: 600; }

.proc-bar {
  height: 10px; border-radius: 999px; overflow: hidden; position: relative;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
}
.proc-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #00e0ff, #7c5cff 55%, #ff5db1);
  transition: width .35s cubic-bezier(.16,1,.3,1);
  position: relative;
}
/* moving sheen so it never looks frozen */
.proc-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: procSheen 1.4s linear infinite;
}
@keyframes procSheen { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* indeterminate: we don't know the %, so sweep a bar across */
.proc-bar.indeterminate .proc-fill {
  width: 40% !important;
  animation: procSweep 1.3s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes procSweep {
  0%   { transform: translateX(-110%) }
  100% { transform: translateX(260%) }
}

.proc-pct { margin-top: 12px; font-size: 26px; font-weight: 850; color: #fff; font-variant-numeric: tabular-nums; }
.proc-bar.indeterminate ~ .proc-pct { visibility: hidden; }
.proc-cancel {
  margin-top: 18px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #cfd3e6; border-radius: 10px; padding: 9px 16px;
  font: 600 13px system-ui, "Segoe UI", sans-serif;
}
.proc-cancel:hover { background: rgba(255,255,255,.14); color: #fff; }
.proc-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proc-hint { margin: 14px 0 0; font-size: 12.5px; color: #6f7796; }

@media (prefers-reduced-motion: reduce) {
  .proc-ring, .proc-rocket, .proc-fill::after, .proc-bar.indeterminate .proc-fill { animation: none; }
}

/* ------- desktop-only effects (locked in the browser PWA) ------- */
/* These depend on the OS cursor/keyboard, which a browser tab cannot see
   outside its own window. We keep them VISIBLE but locked, so people know the
   feature exists and what the desktop app buys them. */
.os-locked {
  opacity: .42; pointer-events: none; filter: saturate(.35);
  position: relative; user-select: none;
}
.desktop-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(120deg,#00e0ff,#7c5cff); color: #06060f;
  pointer-events: none;
}
.desktop-note {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(0,224,255,.09), rgba(124,92,255,.09));
  border: 1px solid rgba(124,92,255,.32); font-size: 13.5px; color: #cfd3e6;
}
/* CRITICAL: an author `display:` rule beats the browser's built-in
   `[hidden] { display: none }`, so without this the banner shows even when the
   markup says hidden — including in the desktop app, where it's plain wrong. */
.desktop-note[hidden] { display: none !important; }
.desktop-note b { color: #fff; }
.desktop-note .dn-icon { font-size: 18px; }
.desktop-note .dn-cta {
  margin-left: auto; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px;
  background: linear-gradient(120deg,#00e0ff,#7c5cff); color: #06060f; text-decoration: none;
  white-space: nowrap;
}
.desktop-note .dn-cta:hover { filter: brightness(1.08); }
.desktop-note .dn-icon .ico { color: var(--accent); vertical-align: -0.2em; }
.desktop-note .dn-cta .ico { width: 14px; height: 14px; margin-right: 3px; vertical-align: -0.18em; }

/* Web-version upsell: prominent top banner + locked (desktop-only) controls. */
.web-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(0,224,255,.12), rgba(124,92,255,.12));
  border: 1px solid rgba(124,92,255,.34);
  color: var(--fg); font-size: 13.5px;
}
.web-banner > .ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.web-banner b { color: #fff; }
.web-banner-cta {
  margin-left: auto; white-space: nowrap; text-decoration: none;
  background: var(--accent-grad); color: #06060f;
  border-radius: 999px; padding: 8px 15px; font: 700 12.5px inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.web-banner-cta .ico { width: 14px; height: 14px; }
.web-banner-cta:hover { filter: brightness(1.07); }
@media (max-width: 560px) { .web-banner-cta { margin-left: 0; width: 100%; justify-content: center; } }

/* A control that only works in the desktop app: greyed, non-interactive, badged. */
.desktop-locked {
  opacity: .5; position: relative; cursor: not-allowed;
}
.desktop-locked input, .desktop-locked select, .desktop-locked button,
.desktop-locked .cursor-thumb, .desktop-locked .swatch { pointer-events: none; }
.lock-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle;
  font: 800 9.5px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); background: rgba(0,224,255,.12);
  border: 1px solid rgba(0,224,255,.35); border-radius: 999px; padding: 1px 7px;
}
.lock-badge .ico { width: 11px; height: 11px; }

/* Preset cards whose effects are desktop-only (shown only in the web build). */
.preset-limited-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font: 700 10px system-ui, sans-serif; letter-spacing: .02em;
  color: var(--accent); background: rgba(0,224,255,.10);
  border: 1px solid rgba(0,224,255,.30); border-radius: 999px; padding: 2px 8px;
  align-self: flex-start;
}
.preset-limited-tag .ico { width: 11px; height: 11px; }
.style-card.preset-limited { border-style: dashed; }

/* ============ keyboard focus for the custom controls ============
   These are all clickable but had no visible focus state, so keyboard users
   couldn't tell where they were. */
.cursor-thumb:focus-visible,
.capcard:focus-within,
.rp-ratio:focus-visible,
.chip-toggle:focus-within,
.wm-cta:focus-visible,
.dlg-x:focus-visible,
.lic-input:focus-visible,
.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}
.wm-cta:hover, .dlg-x:hover { filter: brightness(1.1); }

/* Pointer picker: 16 tiles turned into a tall wall on narrow widths. Cap it and
   scroll instead of pushing the rest of the panel off-screen. */
.cursor-thumbs { max-height: 320px; overflow-y: auto; }

/* Honour reduced-motion across ALL the app's animations, not just the overlay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------- upgrade prompt shown on export (free tier) ------------- */
/* NOTE: must out-specify `.lic-dialog { padding: 0 }` which is declared LATER in
   this file — with equal specificity the later rule wins, which collapsed this
   dialog's padding to zero and shoved the content flush against its edges. */
dialog.upg-dialog { padding: 24px; position: relative; }

/* close (×) in the corner of a dialog */
.dlg-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #9aa2bd; font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.dlg-x:hover { background: rgba(255,255,255,.14); color: #fff; }

/* end-card preview overlay (logo zoom + link over a dimmed frame) */
.preview-endcard {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3%; background: rgba(6,6,14,.8); border-radius: inherit;
}
.preview-endcard[hidden] { display: none !important; }
.pe-logo {
  max-width: 42%; max-height: 34%; object-fit: contain;
  opacity: 0; transform: scale(.82);
}
.pe-url {
  color: #fff; font: 600 clamp(14px, 2.6vw, 26px) system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0; text-align: center; padding: 0 6%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%;
}
/* trigger the animation by adding .playing */
.preview-endcard.playing .pe-logo { animation: peLogoIn 1.3s cubic-bezier(.16,1,.3,1) forwards; }
.preview-endcard.playing .pe-url  { animation: peUrlIn .8s ease .35s forwards; }
@keyframes peLogoIn { to { opacity: 1; transform: scale(1); } }
@keyframes peUrlIn  { to { opacity: 1; } }

/* Per-reveal preview animations — mirror the exported outro. */
.preview-endcard[data-reveal="rise"].playing  .pe-logo { animation: peRise 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.preview-endcard[data-reveal="pop"].playing   .pe-logo { animation: pePop  .9s  cubic-bezier(.34,1.56,.64,1) forwards; }
.preview-endcard[data-reveal="blur"].playing  .pe-logo { animation: peBlur 1.1s ease forwards; }
@keyframes peRise { from { opacity: 0; transform: translateY(14%) scale(1); } to { opacity: 1; transform: none; } }
@keyframes pePop  { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes peBlur { from { opacity: 0; filter: blur(14px); transform: scale(.96); } to { opacity: 1; filter: blur(0); transform: none; } }
.preview-endcard[data-reveal="shine"].playing .pe-logo { animation: peShine 1.3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes peShine {
  0%   { opacity: 0; transform: scale(.92); filter: brightness(1); }
  45%  { opacity: 1; transform: scale(1);   filter: brightness(1); }
  60%  { filter: brightness(1.5) drop-shadow(0 0 20px rgba(255,255,255,.75)); }
  100% { opacity: 1; transform: scale(1);   filter: brightness(1) drop-shadow(0 0 12px rgba(140,200,255,.4)); }
}

/* Saved logo library — reusable thumbnails. */
.logo-lib { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.logo-chip { position: relative; width: 46px; height: 46px; }
.logo-chip-btn {
  width: 46px; height: 46px; padding: 4px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.05);
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
}
.logo-chip-btn img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-chip-btn:hover { border-color: var(--accent); }
.logo-chip.active .logo-chip-btn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.logo-chip-x {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; border: none; cursor: pointer; line-height: 1;
  background: #d81421; color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.logo-chip-x:hover { background: #ff3b46; }
@media (prefers-reduced-motion: reduce) {
  .preview-endcard.playing .pe-logo,
  .preview-endcard.playing .pe-url { animation: none; opacity: 1; transform: none; }
}

/* live audio level meter (while recording) */
.audio-meter {
  display: flex; align-items: center; gap: 10px;
  margin: 12px auto 0; max-width: 360px; width: 100%;
}
.audio-meter[hidden] { display: none !important; }
.am-icon { font-size: 15px; flex-shrink: 0; }
.am-track {
  position: relative; flex: 1; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden;
}
.am-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 999px;
  /* green → amber → red across the bar; the fill width reveals the loud end */
  background: linear-gradient(90deg, #34d399 0%, #34d399 55%, #fbbf24 78%, #ff5b4a 100%);
  transition: width .06s linear;
}
.am-peak {
  flex-shrink: 0; width: 8px; height: 10px; border-radius: 2px;
  background: rgba(255,255,255,.14); transition: background .1s;
}
.am-peak.hot { background: #ff5b4a; }               /* clipping / very loud */
.am-peak.warn { background: #fbbf24; }

/* music & end-card controls */
.outro-group { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.outro-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* Selects inside a flex outro-row shouldn't carry the standalone 8px top margin
   (it pushed them below the row's label + buttons) and shouldn't force 100% width
   (it dropped the Preview/Upload buttons to a ragged second line). */
.outro-row .resize-select { margin-top: 0; width: auto; flex: 0 1 auto; }
#outroBgColor.active { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Reveal/sound controls only matter once an end card (logo or link) exists —
   de-emphasise them until then, but keep them usable for pre-configuring. */
.endcard-dep.dim { opacity: .5; }
.outro-file { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 2px 4px; text-decoration: underline; }
.outro-vol { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.outro-vol input[type=range] { flex: 1; max-width: 220px; }
.outro-url { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.outro-url input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(0,0,0,.28); color: var(--fg); font-size: 14px; }
.outro-url input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.outro-hint { margin-top: 10px; line-height: 1.5; }

/* end-card appearance controls (corners, key-out, background, link size) */
.outro-mini {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.outro-mini > span:first-child { min-width: 92px; }
.outro-mini input[type=range] { flex: 1; min-width: 120px; max-width: 220px; }
.outro-mini output { min-width: 38px; text-align: right; }
.seg-mini { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.seg-mini .segm {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  font: 600 12px/1 inherit; transition: background .15s, color .15s;
}
.seg-mini .segm:hover { color: var(--fg); }
.seg-mini .segm.active { background: var(--accent-grad); color: #06060f; }
.seg-mini .segm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.outro-key, .outro-bg { align-items: center; }
#outroBgColor {
  width: 34px; height: 30px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 8px; background: transparent; flex: none;
}
#outroBgColor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* GIF is soundless: dim the music controls and show a warning so the dropped
   audio isn't a silent surprise. */
.gif-audio-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.45;
  background: rgba(255,176,32,.10); border: 1px solid rgba(255,176,32,.35); color: #ffd479;
}
.gif-audio-note[hidden] { display: none !important; }
.outro-group.no-audio .outro-row:first-of-type,
.outro-group.no-audio .outro-vol { opacity: .5; }

/* reverse toggle, sits under the speed segmented control */
.reverse-check { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.reverse-check input { width: 16px; height: 16px; }

/* size / dimensions / duration estimate under the Download button */
.export-estimate {
  margin: 0 0 10px; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.export-estimate[hidden] { display: none !important; }

/* "Free export — adds a watermark" strip on the result card */
.wm-notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(0,224,255,.08), rgba(124,92,255,.08));
  border: 1px solid rgba(124,92,255,.28);
  color: #cfd3e6; font-size: 13.5px;
}
/* same trap as .desktop-note — without this it shows even when hidden (e.g. for
   Pro users, or before there's any recording to export) */
.wm-notice[hidden] { display: none !important; }
.wm-notice .wm-dot { font-size: 15px; }
.wm-cta {
  margin-left: auto; cursor: pointer; white-space: nowrap;
  padding: 6px 13px; border-radius: 9px; border: 1px solid transparent;
  background: linear-gradient(120deg,#00e0ff,#7c5cff); color: #06060f;
  font: 700 12.5px system-ui, "Segoe UI", sans-serif;
}
.wm-cta:hover { filter: brightness(1.08); }

/* purchase link inside the license dialog */
.lic-buy { margin: 12px 0 0; font-size: 13px; color: #9aa2bd; }
.lic-buy a { color: var(--accent); font-weight: 700; text-decoration: none; }
.lic-buy a:hover { text-decoration: underline; }
.upg-preview { margin: 4px 0 6px; }
.upg-frame {
  position: relative; height: 92px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(300px 120px at 20% 0%, rgba(124,92,255,.20), transparent 70%),
    linear-gradient(135deg, #1b1b2c, #0e0e18);
  overflow: hidden;
}
/* the watermark exactly where it lands in the video: bottom-right */
.upg-mark {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(10,10,20,.78); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font: 600 11px system-ui, "Segoe UI", sans-serif; white-space: nowrap;
}
/* red strike-through = "this is what Pro removes" */
.upg-strike {
  position: absolute; right: 4px; bottom: 20px;
  width: 190px; height: 2px; background: #ff3b46; transform: rotate(-8deg);
  transform-origin: right center; box-shadow: 0 0 8px rgba(255,59,70,.7);
}
.upg-actions { flex-wrap: wrap; }
.upg-actions button { flex: 0 0 auto; }

/* ---------------- license dialog ---------------- */
.lic-dialog {
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 0;
  background: linear-gradient(180deg,#191926,#12121d); color: #eef0f8;
  max-width: 460px; width: calc(100% - 32px); box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lic-dialog::backdrop { background: rgba(6,6,14,.66); backdrop-filter: blur(4px); }
.lic-dialog form { padding: 24px; }
.lic-title { margin: 0 0 10px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.lic-tier {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.lic-tier.free { background: rgba(255,255,255,.1); color: #b9c0d6; border: 1px solid rgba(255,255,255,.16); }
.lic-tier.pro  { background: linear-gradient(120deg,#00e0ff,#7c5cff); color: #06060f; }
.lic-blurb { margin: 0 0 18px; color: #9aa2bd; font-size: 14px; line-height: 1.55; }
.lic-blurb b { color: #eef0f8; }
.lic-label { display: block; font-size: 12px; font-weight: 700; color: #9aa2bd; margin-bottom: 6px; }
.lic-input {
  width: 100%; padding: 12px 14px; border-radius: 11px; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16); color: #fff; font: 700 15px ui-monospace,"Cascadia Mono",Menlo,monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.lic-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lic-msg { min-height: 18px; margin: 9px 0 0; font-size: 13px; font-weight: 600; }
.lic-msg.ok   { color: #4ade80; }
.lic-msg.err  { color: #ff6b74; }
.lic-actions { display: flex; gap: 10px; margin-top: 18px; }
.lic-actions button { flex: 0 0 auto; }
#licenseBtn.is-pro { background: linear-gradient(120deg,#00e0ff,#7c5cff); color: #06060f; border-color: transparent; }

/* live region outline during recording */
.live-region {
  position: fixed; border: 3px dashed var(--accent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 22px rgba(0,224,255,.55);
  pointer-events: none; z-index: 99998; box-sizing: border-box; animation: liveAnts 1.6s linear infinite;
}
@keyframes liveAnts { to { background-position: 30px 0, 30px 30px, 0 30px, 0 0; } }
.live-region-tag {
  position: absolute; top: -28px; left: 0; background: var(--accent); color: #0a0a14;
  padding: 3px 10px; border-radius: 6px; font: 700 11px system-ui, sans-serif;
  letter-spacing: .04em; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.live-region-tag .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #d32f2f; margin-right: 6px; vertical-align: middle; animation: pip-blink 1s infinite;
}
@keyframes pip-blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.live-region-badge {
  position: fixed; top: 14px; right: 14px; background: rgba(0,224,255,.14);
  border: 2px solid var(--accent); border-radius: 10px; padding: 8px 14px;
  color: var(--accent); font: 600 12px system-ui, sans-serif; pointer-events: none;
  z-index: 99998; backdrop-filter: blur(6px);
}
.live-region-badge .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30; margin-right: 8px; vertical-align: middle; animation: pip-blink 1s infinite;
}

/* in-page live preview thumbnail */
.live-preview {
  position: relative; margin-top: 4px; width: 100%;
  border: 2px solid var(--rec); border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,59,70,.25), var(--shadow-sm);
}
.live-preview video { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #000; }
.live-preview-tag {
  position: absolute; top: 10px; left: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.55); color: #fff; padding: 5px 12px; border-radius: 999px;
  font: 600 12px system-ui, sans-serif; letter-spacing: .06em; backdrop-filter: blur(4px);
}
.live-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: pip-blink 1s infinite; }

/* ===================================================================
 * Pre-recording setup screen
 * ================================================================= */
.setup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(6,6,16,.78); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 20px; animation: fadeIn .15s ease;
}
.setup-card {
  width: min(420px, 94vw); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; box-shadow: var(--shadow);
}
.setup-card h2 { margin: 0 0 4px; font-size: 19px; }
.setup-cam-wrap {
  position: relative; width: 140px; height: 140px; margin: 16px auto;
  border-radius: 50%; overflow: hidden; background: #000; border: 2px solid var(--line-2);
}
.setup-cam { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.setup-cam-off { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.setup-rows { display: flex; flex-direction: column; gap: 10px; }
.setup-toggle { flex-direction: row; align-items: center; gap: 9px; color: var(--fg); font-size: 14px; cursor: pointer; }
.setup-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.su-dev {
  font-size: 12px; background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
}
.su-dev:disabled { opacity: .45; }
.setup-meter { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.setup-meter-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--ok), var(--warn)); transition: width .06s linear; }
.setup-actions { display: flex; gap: 10px; margin-top: 18px; }
.setup-actions .su-go { flex: 1; }

/* ===================================================================
 * Live annotation
 * ================================================================= */
.anno-input { position: absolute; inset: 0; z-index: 6; cursor: crosshair; touch-action: none; }
.anno-toolbar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 6px;
  background: rgba(15,15,26,.88); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 7px 9px; backdrop-filter: blur(8px);
}
.anno-btn {
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 8px; width: 34px; height: 32px; font-size: 15px; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.anno-btn:hover { background: rgba(255,255,255,.12); }
.anno-btn.active { background: var(--accent); border-color: var(--accent); }
.anno-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0;
}
.anno-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.anno-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 2px; }

/* ===================================================================
 * Trim tools (result screen)
 * ================================================================= */
.trim-tools { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.trim-head { display: flex; align-items: center; gap: 12px; }
.trim-title { font-weight: 700; }
.trim-head #trimRange { font-variant-numeric: tabular-nums; }
.trim-head #trimApply { margin-left: auto; }
.trim-note { margin: 8px 0 0; }
.trim-track { position: relative; height: 56px; margin-top: 10px; border-radius: 6px; }
.trim-track::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg-3); border-radius: 6px;
}
/* Thumbnail filmstrip laid across the whole track. */
.trim-film {
  position: absolute; inset: 0; display: flex; overflow: hidden;
  border-radius: 6px; z-index: 0; pointer-events: none;
}
.trim-film-cell {
  flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block;
  border-right: 1px solid rgba(255,255,255,.10);
}
.trim-film-cell:last-child { border-right: none; }
/* Time labels under the strip. */
.trim-ticks {
  display: flex; justify-content: space-between; margin-top: 6px;
  font: 600 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  color: var(--muted, #9aa0b6); font-variant-numeric: tabular-nums;
}
/* Kept-range highlight — a bordered box so the thumbnails show through. */
.trim-sel {
  position: absolute; top: 0; height: 100%; border-radius: 4px; pointer-events: none;
  background: rgba(124,92,255,.10);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 10px rgba(124,92,255,.35);
  z-index: 3;
}
/* Dimmed, hatched regions showing the head/tail being cut. Widths set in JS. */
.trim-cut {
  position: absolute; top: 0; height: 100%; width: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(-45deg, rgba(4,4,10,.72) 0 6px, rgba(4,4,10,.5) 6px 12px);
  backdrop-filter: grayscale(.6) brightness(.42);
}
.trim-cut-a { left: 0;  border-radius: 6px 0 0 6px; }
.trim-cut-b { right: 0; border-radius: 0 6px 6px 0; }
.trim-cut.on.trim-cut-a { border-right: 2px solid var(--accent); }
.trim-cut.on.trim-cut-b { border-left:  2px solid var(--accent); }
/* Live playhead synced to the preview video. */
.trim-playhead {
  position: absolute; top: 0; height: 100%; transform: translateX(-50%);
  width: 2px; background: #fff; border-radius: 2px; pointer-events: none; z-index: 4;
  box-shadow: 0 0 6px rgba(0,0,0,.8);
}
/* Preview video wrapper + "trimmed out" dim overlay while the playhead is in a cut zone. */
.preview-wrap { position: relative; line-height: 0; }
.preview-trimmed {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,14,.6); backdrop-filter: grayscale(.7) brightness(.5);
  border-radius: inherit; pointer-events: none; transition: opacity .12s ease;
}
.preview-trimmed[hidden] { display: none; }   /* the display:flex above overrides [hidden] otherwise */
.preview-trimmed span {
  font: 700 13px system-ui,-apple-system,"Segoe UI",sans-serif; color: #fff; letter-spacing: .3px;
  background: rgba(0,0,0,.55); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
}
.trim-range {
  position: absolute; left: 0; top: 0; width: 100%; height: 56px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
  z-index: 5;
}
.trim-range::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 14px; height: 56px; border-radius: 5px;
  background: var(--accent); border: 2px solid #06060f; cursor: ew-resize;
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.trim-range::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 56px; border-radius: 5px;
  background: var(--accent); border: 2px solid #06060f; cursor: ew-resize;
}
.trim-range::-webkit-slider-runnable-track { background: transparent; }
.trim-range::-moz-range-track { background: transparent; }

/* Resize dropdown on the result card */
#downloadBtn.is-busy { opacity: .7; cursor: progress; pointer-events: none; }
/* Quality preview — clarity bars + estimated size */
.quality-info { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.qi-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.qi-bars i { width: 4px; border-radius: 2px; background: var(--line-2); }
.qi-bars i:nth-child(1) { height: 40%; }
.qi-bars i:nth-child(2) { height: 60%; }
.qi-bars i:nth-child(3) { height: 80%; }
.qi-bars i:nth-child(4) { height: 100%; }
.quality-info.q1 .qi-bars i:nth-child(-n+1),
.quality-info.q2 .qi-bars i:nth-child(-n+2),
.quality-info.q3 .qi-bars i:nth-child(-n+3),
.quality-info.q4 .qi-bars i:nth-child(-n+4) { background: var(--accent); }
/* Export progress bar (trim / resize / convert on download) */
.export-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; }
.export-progress-bar { flex: 1; height: 9px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.export-progress-bar span { display: block; height: 100%; width: 0; background: var(--accent-grad); border-radius: 5px; transition: width .15s ease; }
.export-progress.indet .export-progress-bar span { width: 38%; animation: exportIndet 1.1s ease-in-out infinite; }
@keyframes exportIndet { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
#exportProgressLabel { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pointer-style thumbnail picker (animated click preview) */
.cursor-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 6px; }
.cursor-thumb {
  position: relative; padding: 5px 4px 4px; border-radius: 10px;
  background: var(--bg-3); border: 1.5px solid var(--line); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.cursor-thumb canvas { display: block; width: 46px; height: 46px; border-radius: 6px; }
.cursor-thumb .tl { font-size: 10px; color: var(--muted); }
.cursor-thumb:hover { border-color: var(--line-2); transform: translateY(-1px); }
.cursor-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cursor-thumb.active .tl { color: var(--fg); }

.export-resize { margin-top: 12px; }
.resize-select {
  width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); color: var(--text, #e9e9f3); border: 1px solid var(--line);
  font: 500 14px system-ui,-apple-system,"Segoe UI",sans-serif; cursor: pointer;
}
.resize-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.resize-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* JS toggles this with .hidden, but the author `display:flex` above beats the
   browser's `[hidden] { display:none }` — so without this the custom W×H fields
   were ALWAYS visible, even on "Original size". */
.resize-custom[hidden] { display: none !important; }
.rc-field { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted, #9aa0b6); }
.rc-field input {
  width: 78px; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text, #e9e9f3); font: 500 14px system-ui, "Segoe UI", sans-serif;
}
.rc-x { color: var(--muted, #9aa0b6); }
.rc-mode {
  padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text, #e9e9f3); font: 500 13px system-ui, "Segoe UI", sans-serif; cursor: pointer;
}
/* Upload-a-video row on the start screen */
.upload-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.upload-or { color: var(--muted, #9aa0b6); font-size: 13px; }

/* --------------------------- responsive -------------------------- */
@media (max-width: 680px) {
  .style-cards { grid-template-columns: 1fr; }
  .capmode-cards { grid-template-columns: 1fr; }
  .subrow { grid-template-columns: 1fr; gap: 16px; }
  .row { grid-template-columns: 1fr 1fr; }
  .effects-grid { grid-template-columns: 1fr; }
}

/* ------------ floating-controls reopen prompt (robustness) -------- */
#pipReopen {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(14px);
  display: none; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; z-index: 9999;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; box-shadow: var(--shadow);
  color: var(--fg); font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
#pipReopen.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#pipReopen button {
  background: var(--accent-grad); color: #06060f; border: 0;
  border-radius: 999px; padding: 7px 14px; font: 700 12.5px inherit; cursor: pointer;
}
#pipReopen button:hover { filter: brightness(1.07); }

/* ===================================================================
 * UX / accessibility fixes
 * ================================================================= */

/* FLAW 1 — keyboard focus was invisible (inputs had outline:none, custom
 * buttons had no focus style). Restore a clear, consistent focus ring for
 * keyboard users only (mouse clicks don't trigger :focus-visible). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: var(--ring);
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--ring); }

/* FLAW 2 — the real radio/format inputs are visually hidden, so keyboard focus
 * landed on something invisible. Surface the focus ring on the visible card. */
.style-card:focus-visible,
.capcard:has(input:focus-visible),
.chip-toggle:has(input:focus-visible),
.seg-btn:focus-visible,
.swatch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* FLAW 3 — respect reduced-motion: stop the looping pulses/blinks/marching
 * ants and motion transitions for users who ask for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* FLAW 9 — the result "Delete" was a plain ghost button sitting inline with
 * non-destructive actions. Mark it destructive and push it apart. */
.result-actions .danger-ghost {
  margin-left: auto;
  background: rgba(255,59,70,.10);
  color: #ff8088;
  border: 1px solid rgba(255,59,70,.45);
}
.result-actions .danger-ghost:hover { background: rgba(255,59,70,.20); color: #fff; }

/* FLAW 12 — top bar (brand + 3 buttons) overflowed on narrow widths. */
.topbar { flex-wrap: wrap; }
.topbar-actions { flex-wrap: wrap; }

/* FLAW 13 — colour swatches were 26px: below a comfortable click/tap target. */
.swatch { width: 30px !important; height: 30px !important; }
#cursorColor { width: 38px !important; height: 34px !important; }

/* FLAW 14 — the top-bar's five text buttons wrapped into 2–3 stacked rows on
 * phones, shoving the app down. Right-align them and tighten on small screens. */
@media (max-width: 560px) {
  .topbar-actions { justify-content: flex-end; gap: 6px; width: 100%; }
  .topbar-actions .ghost.small { padding: 7px 10px; font-size: 12px; }
}

/* FLAW 15 — the "or Upload a video" row stayed visible and clickable during a
 * recording, implying you could swap in a file mid-capture. Hide it while
 * recording (the smart hint below already explains what happens on stop). */
body.is-recording .upload-row { display: none; }

/* ===================================================================
 * Professional hand cursors on interactive controls
 * Pointing hand on hover, an accent "pressing" hand on click. Both fall
 * back to the OS pointer if the inline image can't load. Text inputs are
 * deliberately NOT included, so they keep the I-beam.
 * ================================================================= */
:root {
  /* PNG (not SVG) — Chromium doesn't support SVG images as CSS cursors. */
  --cur-hand: url("cursor-hand.png") 11 6, pointer;
  --cur-press: url("cursor-press.png") 11 6, pointer;
}
button, a[href], summary, label.chip-toggle, .style-card, .capcard,
.seg-btn, .segm, .swatch, .cursor-thumb, .linkbtn, .wm-cta, .dlg-x, .dn-cta,
.range-val, select, input[type="range"], input[type="color"],
input[type="checkbox"], input[type="radio"], [role="radio"], [role="button"] {
  cursor: var(--cur-hand);
}
:is(button, a[href], summary, label.chip-toggle, .style-card, .capcard,
.seg-btn, .segm, .swatch, .cursor-thumb, .linkbtn, .wm-cta, .dlg-x, .dn-cta,
select, input[type="range"], input[type="color"],
input[type="checkbox"], input[type="radio"], [role="radio"], [role="button"]):active {
  cursor: var(--cur-press);
}
/* Disabled controls must still read as unavailable, not clickable. */
button:disabled, select:disabled, input:disabled,
.ctrl[disabled], [disabled], [aria-disabled="true"] { cursor: not-allowed; }

/* One-time review nudge (floating pill, bottom-centre) */
.review-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: 12px; z-index: 9999;
  padding: 9px 12px 9px 16px; max-width: calc(100% - 32px);
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; box-shadow: var(--shadow);
  color: var(--fg); font-size: 13.5px; font-weight: 600;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.review-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.review-bar[hidden] { display: none !important; }
.review-star { color: #ffca3a; display: inline-flex; }
.review-star .ico { width: 18px; height: 18px; }
.review-text { white-space: nowrap; }
.review-cta {
  background: var(--accent-grad); color: #06060f; text-decoration: none;
  border-radius: 999px; padding: 7px 14px; font: 700 12.5px inherit; white-space: nowrap;
}
.review-cta:hover { filter: brightness(1.07); }
.review-x {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 5px; display: inline-flex; border-radius: 8px; flex: none;
}
.review-x .ico { width: 14px; height: 14px; }
.review-x:hover { color: var(--fg); }
@media (max-width: 460px) { .review-text { display: none; } }

/* FLAW 14 — effect checkboxes had no hover affordance. */
.effects .check { padding: 4px 8px; margin: 3px -8px; border-radius: 8px; }
.effects .check:hover { background: rgba(255,255,255,.04); }

/* FLAW 15 — collapsed "Advanced" summary had no keyboard focus indicator. */
.advanced-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }

/* FLAW 16 — sub-16px form fields make iOS Safari zoom in on focus. */
input[type=number], input[type=text], select { font-size: 16px; }

/* FLAW 17 — result actions could wrap unevenly; keep a clean gap and let the
 * destructive button always trail on its own. */
.result-actions { row-gap: 10px; }

/* FLAW 18 — faint hint/meta text bumped for legibility.
   (.style-meta opacity is now driven by the hover-reveal rules above.) */
.seg-btn .seg-hint { opacity: .92; }

/* FLAW 19 — selected colour swatch had no indicator. */
.swatch[aria-pressed="true"], .swatch.is-on { outline: 2px solid #fff; outline-offset: 2px; }

/* FLAW 20 — give the bottom of the page safe-area room on notched devices. */
.app { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

/* Round-3 — distinct warning status + a spinner while encoding. */
#statusText.is-warn { border-left-color: var(--warn); background: rgba(255,176,32,.08); color: #ffd9a0; }
#statusText.is-busy::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px;
  border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  vertical-align: -1px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Round-3 — keyboard focus ring for the style preset cards (roving radiogroup). */
.style-card[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Prominent auto-zoom result banner on the result card. */
.zoom-status {
  margin-top: 10px; padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.zoom-status.ok   { background: rgba(54,211,153,.12); border: 1px solid rgba(54,211,153,.4); color: #7ff0c0; }
.zoom-status.warn { background: rgba(255,176,32,.10); border: 1px solid rgba(255,176,32,.45); color: #ffd9a0; }

/* Smart-features discoverability hint (record card). */
.smart-hint {
  margin: 14px auto 0; max-width: 560px; text-align: center;
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  background: linear-gradient(180deg, rgba(124,92,255,.08), rgba(0,224,255,.05));
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px;
}
body.is-recording .smart-hint { display: none; }

/* Result actions: clear hierarchy — destructive trails on its own. */
.result-actions { gap: 10px 12px; }
.result-actions .danger-ghost { margin-left: auto; }

/* ===================================================================
 * Polish layer — Apple / Fluent / Material-inspired refinements
 * ================================================================= */
/* Consistent, springy motion on interactive surfaces. */
.seg-btn { transition: background .2s var(--ease), color .18s var(--ease), box-shadow .2s var(--ease); }
.style-card, .capcard, .chip-toggle {
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease-out), box-shadow .2s var(--ease);
}
.chip-toggle:active { transform: scale(.97); }
#statusText { transition: border-color .2s var(--ease), background .2s var(--ease); }

/* Subtle, modern scrollbars (macOS/Fluent feel). */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); background-clip: content-box; }

/* Hero Download button reads a touch more premium. */
.result-actions .primary.big { letter-spacing: -.01em; }

/* Dialogs: rounded, elevated, with a soft backdrop (Apple sheet feel). */
dialog { border-radius: var(--radius); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(6,6,14,.55); backdrop-filter: blur(3px); }

/* Top-bar buttons: quieter until hovered. */
.topbar-actions .ghost { opacity: .88; }
.topbar-actions .ghost:hover { opacity: 1; }