/* ===========================
   Re - Pasa — Header + Footer Shell (OptimeFlow(s) look)
   + contenido central (grabación/subida + transcripción)
   =========================== */

:root{
  /* Base claro */
  --bg: #f4f7ff;

  --panel: #0f1321;
  --ink: #eaf6ff;
  --muted: #a9c0d6;

  --primary: #22d3ee;
  --accent: #a78bfa;
  --danger: #ef4444;
  --ghost: #1f2942;
  --field: #121935;
  --border: #2c3b5f;

  --radius: 12px;
  --space: 14px;
  --success: #22c55e;

  --glass: blur(18px) saturate(1.35);

  /* Ambient / fondo */
  --bg-blob-1: #22d3ee;   /* cyan */
  --bg-blob-2: #a78bfa;   /* violet */
  --bg-blob-3: #f472b6;   /* pink */
  --bg-blob-4: #a3e635;   /* lime */

  --ambient-opacity: 0.95;
  --ambient-blur: 58px;
  --ambient-sat: 1.35;

  /* Stage (zona donde irá el contenido) */
  --stage-opacity: 0.98;
  --stage-radius: 26px;

  /* stage oscuro tintado por tema */
  --stage-tint-1: color-mix(in srgb, #020617 74%, var(--bg-blob-1));
  --stage-tint-2: color-mix(in srgb, #020617 74%, var(--bg-blob-2));
  --stage-tint-3: color-mix(in srgb, #020617 74%, var(--bg-blob-3));
  --stage-tint-4: color-mix(in srgb, #020617 74%, var(--bg-blob-4));

  --stage-base-1: color-mix(in srgb, rgba(2,6,23,0.92) 72%, var(--stage-tint-2) 28%);
  --stage-base-2: color-mix(in srgb, rgba(2,6,23,0.70) 82%, var(--stage-tint-1) 18%);

  --stage-border: color-mix(in srgb, var(--stage-tint-2) 38%, rgba(255,255,255,0.14));

  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --border-subtle: color-mix(in srgb, var(--border) 55%, transparent);
  --text: var(--ink);
  --text-soft: var(--muted);

  /* tarjetas (settings/overlays) */
  --surface-card: linear-gradient(145deg, rgba(15,23,42,0.88), rgba(15,23,42,0.68));

  /* runtime layout vars (set by script.js) */
  --header-h: 56px;
  --footer-h: 56px;
}

/* === Tema claro explícito === */
:root[data-theme="light"]{
  --bg: #f4f7ff;
  --ambient-opacity: 0.95;
}

/* === Tema oscuro explícito === */
:root[data-theme="dark"]{
  --bg: #070a15;

  --bg-blob-1: #22d3ee;
  --bg-blob-2: #a78bfa;
  --bg-blob-3: #fb7185;
  --bg-blob-4: #a3e635;

  --ambient-opacity: 0.90;
  --ambient-blur: 62px;

  --stage-base-1: rgba(2,6,23,0.94);
  --stage-base-2: rgba(2,6,23,0.78);
  --stage-border: rgba(255,255,255,0.12);
}

/* === Sistema: respeta prefers-color-scheme cuando NO hay data-theme === */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg: #070a15;

    --bg-blob-1: #22d3ee;
    --bg-blob-2: #a78bfa;
    --bg-blob-3: #fb7185;
    --bg-blob-4: #a3e635;

    --ambient-opacity: 0.90;
    --ambient-blur: 62px;

    --stage-base-1: rgba(2,6,23,0.94);
    --stage-base-2: rgba(2,6,23,0.78);
    --stage-border: rgba(255,255,255,0.12);
  }
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  overflow-x:hidden;
  transition: background-color .25s ease;
}

/* ===== Fondo "brush/aura" GLOBAL ===== */
body{
  position:relative;
  isolation:isolate;
}

/* Aura blobs */
body::before{
  content:"";
  position:fixed;
  inset:-22vmax;
  pointer-events:none;
  z-index:-3;

  background:
    radial-gradient(900px 700px at 14% 14%,
      color-mix(in srgb, var(--bg-blob-1) 74%, transparent) 0%,
      transparent 62%),
    radial-gradient(900px 700px at 90% 10%,
      color-mix(in srgb, var(--bg-blob-2) 72%, transparent) 0%,
      transparent 64%),
    radial-gradient(950px 720px at 78% 90%,
      color-mix(in srgb, var(--bg-blob-3) 70%, transparent) 0%,
      transparent 66%),
    radial-gradient(1100px 820px at 18% 92%,
      color-mix(in srgb, var(--bg-blob-4) 64%, transparent) 0%,
      transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.22));

  filter:
    blur(var(--ambient-blur))
    saturate(var(--ambient-sat))
    contrast(1.04);

  opacity: var(--ambient-opacity);
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: ambientDrift 18s ease-in-out infinite alternate;
}

@keyframes ambientDrift{
  0%   { transform: translate3d(-1.5%, -1.2%, 0) scale(1.02) rotate(-1deg); }
  100% { transform: translate3d( 1.5%,  1.2%, 0) scale(1.05) rotate( 1deg); }
}

/* Stage: zona central donde irá contenido */
body::after{
  content:"";
  position:fixed;
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  top: calc(var(--header-h) + 10px + var(--safe-top));
  bottom: calc(var(--footer-h) + 10px + var(--safe-bottom));
  pointer-events:none;
  z-index:-2;

  border-radius: var(--stage-radius);

  background:
    radial-gradient(1200px 320px at 50% 0%,
      rgba(255,255,255,0.10) 0%,
      transparent 70%),
    radial-gradient(140% 120% at 50% 50%,
      transparent 52%,
      rgba(0,0,0,0.46) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0 2px,
      transparent 2px 14px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.22) 0 1px,
      transparent 1px 18px
    ),
    radial-gradient(880px 680px at 16% 18%,
      color-mix(in srgb, var(--stage-tint-1) 68%, transparent) 0%,
      transparent 66%),
    radial-gradient(820px 660px at 88% 18%,
      color-mix(in srgb, var(--stage-tint-2) 66%, transparent) 0%,
      transparent 67%),
    radial-gradient(900px 680px at 76% 92%,
      color-mix(in srgb, var(--stage-tint-3) 62%, transparent) 0%,
      transparent 68%),
    radial-gradient(980px 720px at 20% 94%,
      color-mix(in srgb, var(--stage-tint-4) 58%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, var(--stage-base-1), var(--stage-base-2));

  border: 1px solid var(--stage-border);

  box-shadow:
    0 34px 95px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 62px color-mix(in srgb, var(--bg-blob-2) 18%, transparent),
    0 0 22px rgba(0,0,0,0.45) inset;

  backdrop-filter: blur(20px) saturate(1.35) contrast(1.05);
  opacity: var(--stage-opacity);
}

/* Grain leve */
.page-root{
  height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.page-root::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-image:
    radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 4px 4px;

  opacity: 0.12;
  filter: blur(0.2px);
}

/* sr-only */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===========================
   Botones / selects
   =========================== */

.btn{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.92), rgba(15,23,42,0.78));
  color:var(--text);
  padding:6px 14px;
  font-size:0.9rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .18s ease,
    transform .08s ease,
    filter .16s ease;
}
.btn:hover{
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.26), transparent 55%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--bg-blob-2) 22%, rgba(15,23,42,0.92)),
      rgba(15,23,42,0.78)
    );
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.62),
    0 0 22px color-mix(in srgb, var(--bg-blob-1) 28%, transparent);
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.btn:active{ transform:translateY(0); filter:brightness(0.98); }

.btn.primary{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.30) 0, transparent 55%),
    linear-gradient(145deg, #4ade80, #22c55e, #16a34a);
  border-color: rgba(34,197,94,0.95);
  color:#022c16;
  box-shadow:
    0 14px 42px rgba(22,163,74,0.52),
    0 0 0 1px rgba(21,128,61,0.72) inset,
    0 0 40px rgba(34,197,94,0.20);
}
.btn.ghost{
  background:
    radial-gradient(circle at 30% 0%, rgba(148,163,184,0.18), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.90), rgba(15,23,42,0.74));
  border-color:var(--border-subtle);
}

.btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:saturate(0.8);
  transform:none;
}

.sel{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:rgba(15,23,42,0.86);
  color:var(--text);
  padding:6px 10px;
  font-size:0.85rem;
  min-width:120px;
  max-width:100%;
}

/* ================= HEADER ================= */

.app-header{ padding:24px; }

.brand-header{
  position:sticky;
  top:0;
  z-index:40;
  padding:
    calc(6px + var(--safe-top))
    calc(14px + var(--safe-right))
    6px
    calc(14px + var(--safe-left));

  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 22%, transparent), transparent 55%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bg-blob-2) 18%, transparent), transparent 55%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bg-blob-3) 12%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.80), rgba(15,23,42,0.50));

  backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  min-height:40px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand-logo{
  height:clamp(32px, 5vw, 48px);
  width:clamp(32px, 5vw, 48px);
  border-radius:10px;
  object-fit:contain;
  background:transparent;
  border:none;
}

.brand-logo.heat{
  filter:
    url(#heat-waves)
    drop-shadow(0 0 6px rgba(255,255,255,.35))
    drop-shadow(0 0 18px color-mix(in srgb, var(--bg-blob-1) 35%, transparent));
}

.brand-word{
  font-weight:800;
  font-size:clamp(1.6rem, 2.8vw, 2.0rem);
  letter-spacing:.2px;
}

/* neon wordmark */
.brand-neon{
  color:#eaf6ff;
  text-shadow:
    0 0 8px rgba(255,255,255,.22),
    0 0 22px color-mix(in srgb, var(--bg-blob-1) 25%, transparent),
    0 0 34px color-mix(in srgb, var(--bg-blob-3) 18%, transparent);
  animation:hue 12s linear infinite, glow 3.2s ease-in-out infinite;
}
@supports (-webkit-background-clip:text){
  .brand-neon{
    background: conic-gradient(from 90deg, var(--bg-blob-1), var(--bg-blob-2), var(--bg-blob-3), var(--bg-blob-4), var(--bg-blob-1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
@keyframes hue{ from{filter:hue-rotate(0);} to{filter:hue-rotate(360deg);} }
@keyframes glow{
  0%,100%{ text-shadow:0 0 6px rgba(255,255,255,.22), 0 0 14px color-mix(in srgb, var(--bg-blob-1) 28%, transparent); }
  50%{ text-shadow:0 0 10px rgba(255,255,255,.42), 0 0 24px color-mix(in srgb, var(--bg-blob-2) 34%, transparent); }
}

.tagline{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  pointer-events:none;
  text-align:center;
}
.glyph{ display:inline-block; line-height:1; transform-origin:center bottom; }

/* ===== Tagline Re - Pasa ===== */
.tagline-repasa{ animation: rpFloat 6.4s ease-in-out infinite; }
@keyframes rpFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-2px); }
}

.rp-core{
  font-weight:900;
  font-size:1.65rem;
  color:#e9fbff;
  text-shadow:
    0 0 8px rgba(180,215,255,.55),
    0 0 18px color-mix(in srgb, var(--bg-blob-1) 28%, transparent),
    0 0 34px color-mix(in srgb, var(--bg-blob-2) 18%, transparent);
  animation: rpHue 10s linear infinite;
}
.rp-soft{
  font-weight:800;
  font-size:1.55rem;
  color:#ffffff;
  opacity:.92;
  text-shadow:
    0 0 7px rgba(255,255,255,.20),
    0 0 16px color-mix(in srgb, var(--bg-blob-3) 20%, transparent),
    0 0 26px color-mix(in srgb, var(--bg-blob-1) 16%, transparent);
  animation: rpPulse 4.8s ease-in-out infinite;
}
@keyframes rpHue{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
@keyframes rpPulse{ 0%,100%{ opacity:.78; transform:translateY(0);} 50%{ opacity:.98; transform:translateY(-2px);} }

.rp-gap{
  width:0.55rem;
}

/* Guion “hélice” */
.rp-dash{
  width:1.15rem;
  height:1.15rem;
  position:relative;
  transform-origin:center center;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--bg-blob-3) 25%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--bg-blob-1) 20%, transparent));
}
.rp-dash::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.05rem;
  height:0.18rem;
  border-radius:999px;
  background: conic-gradient(from 90deg, var(--bg-blob-1), var(--bg-blob-2), var(--bg-blob-3), var(--bg-blob-4), var(--bg-blob-1));
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.25);
}
.blade-spin{
  animation: bladeSpin 0.95s linear infinite;
}
@keyframes bladeSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.quick-controls{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.icon-button{
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.90), rgba(15,23,42,0.72));
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease, filter .16s ease;
}
.icon-button:hover{
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-blob-2) 18%, rgba(15,23,42,0.92)),
      rgba(15,23,42,0.72)
    );
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:0 10px 26px rgba(0,0,0,0.48), 0 0 20px color-mix(in srgb, var(--bg-blob-1) 24%, transparent);
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.icon-gear{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, var(--accent) 70%, white);
  box-shadow:0 0 0 1px rgba(15,23,42,0.55);
  position:relative;
}
.icon-gear::before,
.icon-gear::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,0.75);
}
.icon-gear::after{
  inset:7px;
  border-width:3px;
  border-color: color-mix(in srgb, var(--bg-blob-1) 65%, white);
}

/* settings sheet */
.settings-sheet{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:flex-end;
  padding:
    calc(62px + var(--safe-top))
    calc(12px + var(--safe-right))
    calc(12px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-blob-2) 14%, rgba(15,23,42,0.55)),
      transparent
    );
  pointer-events:none;
  z-index:45;
}
.settings-sheet.is-open{ display:flex; pointer-events:auto; }

.settings-card{
  width:min(320px, 100%);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 16%, transparent), transparent 55%),
    radial-gradient(circle at 120% 0%, color-mix(in srgb, var(--bg-blob-3) 14%, transparent), transparent 55%),
    var(--surface-card);
  border-radius:20px;
  border:1px solid var(--border-subtle);
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:var(--glass);
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:0.9rem;
  min-width:0;
}
.settings-row label{ color:var(--text-soft); }

/* responsive header */
@media (max-width: 1024px) and (orientation: portrait){
  .brand{ justify-content:space-between; flex-wrap:nowrap; }
  .brand-word{ display:none; }
  .tagline{ position:static; transform:none; flex:1; justify-content:flex-start; }
  .quick-controls{ margin-left:8px; }
}

/* ================= FOOTER OptimeFlow(s) ================= */
.brand-footer{
  background:
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bg-blob-1) 16%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--bg-blob-2) 14%, transparent), transparent 55%),
    linear-gradient(0deg, rgba(15,23,42,0.80), rgba(15,23,42,0.50));
  border-top: 1px solid var(--border-subtle);
  padding:
    4px
    calc(12px + var(--safe-right))
    calc(4px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  box-shadow:0 -14px 32px rgba(0,0,0,.35);
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  backdrop-filter:var(--glass);
}

.brand-footer strong{ color:var(--ink); }
.brand-footer .sep{ opacity:.6; }
.footer-author-link{
  color:#d4a017;
  font-weight:850;
  text-decoration:none;
  text-underline-offset:3px;
  transition:filter .12s ease, color .12s ease, text-decoration-color .12s ease;
}
.footer-author-link:hover,
.footer-author-link:focus-visible{
  color:#f0b429;
  text-decoration:underline;
  text-decoration-color:currentColor;
  outline:none;
}

.brand-footer .btn.ghost{
  background:rgba(15,23,42,0.70);
  border:1px solid var(--border-subtle);
  color:var(--ink);
  height:26px;
  border-radius:7px;
  padding:0 10px;
  font-weight:800;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.78rem;
}
.footer-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.footer-right{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 18px);
}

.footer-logo-btn{
  display:inline-grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition: box-shadow .14s ease, transform .08s ease, filter .14s ease, border-color .12s ease, background-color .12s ease;
  box-shadow:none;
}
.footer-logo-btn:hover,
.footer-logo-btn:focus-visible{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(15,23,42,0.88), rgba(15,23,42,0.70));
  border-color: color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.10);
}
.footer-logo-btn:active{ transform:scale(0.97); }

.footer-logo{
  height: clamp(22px, 5vw, 28px);
  width: clamp(22px, 5vw, 28px);
  object-fit:contain;
  border-radius:10px;
}
.tag-logo{
  object-fit:contain;
  transform-origin:center center;
  animation:sway 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.28))
    drop-shadow(0 0 16px color-mix(in srgb, var(--bg-blob-1) 30%, transparent));
}
@keyframes sway{
  0%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
  100%{transform:rotate(-3deg);}
}

@media (max-width: 600px) and (orientation: portrait){
  .brand-footer{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    column-gap:8px;
  }
  .footer-left{ justify-self:flex-start; text-align:left; }
  .footer-center{ position:static; transform:none; justify-self:center; }
  .footer-right{
    justify-self:flex-end;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
  }
  .footer-logo{
    height: clamp(32px, 10vw, 40px);
    width: clamp(32px, 10vw, 40px);
  }
}

/* ================= OVERLAYS ================= */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--bg-blob-2) 18%, transparent), transparent 55%),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--bg-blob-1) 14%, transparent), transparent 60%),
    rgba(10,16,28,0.62);

  backdrop-filter: blur(22px) saturate(1.25);
  z-index:60;
}
.overlay[hidden]{ display:none; }
.overlay.is-visible{ display:flex !important; }

.overlay .box{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 18%, transparent), transparent 55%),
    radial-gradient(circle at 120% 0%, color-mix(in srgb, var(--bg-blob-3) 16%, transparent), transparent 55%),
    var(--surface-card);
  border-radius:18px;
  border:1px solid var(--border-subtle);
  max-width: min(640px, 100% - 32px);
  max-height: min(80vh, 640px);
  padding:16px 16px 14px;
  box-shadow: 0 26px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.12) inset;
  overflow:auto;
  font-size:0.86rem;
  backdrop-filter:var(--glass);
}
.overlay .box h2{ margin:0 0 8px; font-size:1.05rem; }
.overlay .box .small{ font-size:0.83rem; color:var(--text-soft); }
.overlay-actions{ margin-top:10px; text-align:right; }

.license-text{
  margin:0;
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.8rem;
  background:rgba(15,23,42,0.70);
  border-radius:10px;
  padding:10px;
  border:1px solid var(--border-subtle);
}

body.overlay-open{ overflow:hidden; }

/* ================= MAIN CONTENT ================= */
.app-main{
  flex:1;
  min-height:0;
  display:flex;
}

.stage-scroll{
  flex:1;
  overflow:auto;
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(14px + var(--footer-h) + var(--safe-bottom))
    calc(14px + var(--safe-left));
}

.content-card{
  max-width: 980px;
  margin: 10px auto;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bg-blob-1) 14%, transparent), transparent 55%),
    radial-gradient(circle at 120% 0%, color-mix(in srgb, var(--bg-blob-3) 12%, transparent), transparent 55%),
    rgba(15,23,42,0.62);
  backdrop-filter: var(--glass);
  box-shadow:
    0 24px 74px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.10) inset;
  padding: 14px;
}

.content-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.content-title{
  margin: 0;
  font-size: 1.15rem;
}
.content-subtitle{
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height:1.55;
  max-width: 60ch;
}

.net-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background: rgba(15,23,42,0.62);
  color: var(--ink);
  font-size:0.82rem;
  user-select:none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.net-pill .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: var(--success);
  box-shadow: 0 0 14px rgba(34,197,94,0.45);
}
.net-pill.is-offline .dot{
  background: var(--danger);
  box-shadow: 0 0 14px rgba(239,68,68,0.45);
}

.controls-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.control-block{
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(15,23,42,0.55);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.block-title{
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--ink);
}
.row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.row-compact{
  margin-top: 8px;
  gap:8px;
  color: var(--text-soft);
}
.hint{
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height:1.45;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.rec-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--danger);
  box-shadow: 0 0 18px rgba(239,68,68,0.55);
  animation: recPulse 1.15s ease-in-out infinite;
}
@keyframes recPulse{
  0%,100%{ transform: scale(0.92); opacity:0.85; }
  50%{ transform: scale(1.06); opacity:1; }
}

.file-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--bg-blob-2) 40%, rgba(255,255,255,0.15));
  background: rgba(15,23,42,0.55);
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .08s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  user-select:none;
}
.file-pill:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow: 0 14px 30px rgba(0,0,0,0.48);
}
.file-pill input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.file-pill-text{
  color: var(--ink);
  font-weight:700;
  font-size:0.88rem;
}

.options-bar{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.opt-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: rgba(15,23,42,0.50);
  padding: 10px 10px;
}
.opt-row label{
  color: var(--text-soft);
  font-size: 0.86rem;
  white-space:nowrap;
}

.status-area{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(15,23,42,0.50);
  padding: 12px;
}

.spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: color-mix(in srgb, var(--bg-blob-1) 70%, white);
  animation: spin 0.75s linear infinite;
  margin-top: 2px;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.progress-line{
  margin-top: 8px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
}
.progress-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-blob-1), var(--bg-blob-2), var(--bg-blob-3), var(--bg-blob-4));
  box-shadow: 0 0 18px color-mix(in srgb, var(--bg-blob-1) 35%, transparent);
}

.transcript-area{
  margin-top: 12px;
}
.transcript{
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(15,23,42,0.65);
  color: var(--ink);
  padding: 12px 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.transcript:focus{
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--bg-blob-2) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.transcript::placeholder{
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.transcript-pager{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(15,23,42,0.48);
}
.transcript-pager[hidden]{ display:none !important; }
.transcript-pager-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:min(100%, 220px);
}
.transcript-page-counter{
  color:var(--muted);
  font-size:0.78rem;
}
.transcript-line-limit{
  color:var(--text-soft);
  font-size:0.72rem;
}
.transcript-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.transcript-page-btn{
  min-width:94px;
}
.transcript-page-select{
  min-width:112px;
  height:32px;
  padding:4px 10px;
  font-size:0.82rem;
}

.actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.audio-player{
  margin-top: 12px;
  width: 100%;
  border-radius: 16px;
}

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-h) + 16px + var(--safe-bottom));
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 24px));
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 55%),
    rgba(15,23,42,0.82);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: var(--glass);
  text-align:center;
  font-size: 0.88rem;
  z-index: 70;
}

@media (max-width: 860px){
  .controls-grid{ grid-template-columns: 1fr; }
  .options-bar{ grid-template-columns: 1fr; }
  .opt-row{ justify-content:space-between; }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  .tag-logo{ animation:none; }
  .brand-neon{ animation:none; }
  .tagline-repasa{ animation:none; }
  .blade-spin{ animation:none; }
  .rec-dot{ animation:none; }
  .spinner{ animation:none; }
}