/* RAMIROBIZ Music Studio — hoja de estilos única, sin dependencias externas. */

:root {
  --accent: #7c5cff;
  --accent-2: #4d8cff;

  --bg: #070b16;
  --bg-2: #0b1122;
  --panel: rgba(255, 255, 255, .045);
  --panel-solid: #101830;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #eaf0ff;
  --muted: #93a0c0;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --sidebar-w: 238px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Le decimos al navegador de qué color es el tema. Sin esto, todo lo que dibuja él y no nosotros
     —la lista que se abre de un <select>, las flechitas de los números, la barra de rango, el botón
     de "elegir archivo", la × de las búsquedas, el ojo de las contraseñas, las barras de scroll—
     sale con el blanco de fábrica sobre el fondo oscuro. Va junto a los tokens de cada tema. */
  color-scheme: dark;
  /* Y que las casillas, los radios y las barras de rango se marquen con el morado del estudio,
     no con el azul de fábrica de Chrome. Una vez aquí, vale para todas. */
  accent-color: var(--accent);
}

html[data-theme="light"] {
  --bg: #eef1f9;
  --bg-2: #f7f9ff;
  --panel: rgba(255, 255, 255, .78);
  --panel-solid: #ffffff;
  --line: rgba(15, 23, 42, .1);
  --line-strong: rgba(15, 23, 42, .2);
  --text: #131b31;
  --muted: #5a6685;
  --shadow: 0 16px 40px rgba(20, 30, 60, .12);
  color-scheme: light;
}

/* Windows y Linux a veces siguen pintando las opciones con el color de la página: se lo decimos. */
option, optgroup { background: var(--panel-solid); color: var(--text); }

* { box-sizing: border-box; }

html, body { min-height: 100%; }
html { background: var(--bg); }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }
.panel h3 .ic, .controls-head h3 .ic { width: 18px; height: 18px; color: var(--accent); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 105% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
small { font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.pad { padding: 18px 4px; }
.right-form { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.sep { border: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; margin: 6px 0; width: 100%; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--accent); padding: 8px 14px; border-radius: 8px; }

/* ---------------------------------------------------------------- layout */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.brand { display: flex; gap: 11px; align-items: center; padding: 4px 8px 20px; }
.brand-mark, .brand-logo {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px;
  display: grid; place-items: center; object-fit: cover;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent);
  color: #fff;
}
.brand-mark .ic { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 15px; letter-spacing: .02em; }
.brand-text small { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.brand-text em { color: var(--muted); font-size: 11px; font-style: normal; opacity: .75; margin-top: 3px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; color: var(--muted);
  font-size: 14px; transition: background .16s, color .16s, transform .16s;
}
.nav a .ic { width: 18px; height: 18px; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--text); transform: translateX(2px); }
.nav a.active {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, transparent), color-mix(in srgb, var(--accent-2) 70%, transparent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-theme="light"] .nav a.active { color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: 16px; }
.sidebar-foot.has-image::before {
  content: ""; display: block; height: 116px; border-radius: 14px; margin-bottom: 12px;
  background-image: var(--side-image, linear-gradient(135deg, var(--accent), var(--accent-2)));
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
}
.quote { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.side-location { font-size: 11px; color: var(--muted); opacity: .8; }

.workspace { flex: 1; min-width: 0; padding: 18px 22px 60px; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  height: 178px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 60%, #12173a), color-mix(in srgb, var(--accent-2) 55%, #0b1024));
  background-size: cover; background-position: center;
  overflow: hidden;
  display: flex; align-items: center;
  padding: 0 24px;
  box-shadow: var(--shadow);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 8, 20, .55), rgba(4, 8, 20, .1) 55%, rgba(4, 8, 20, .5));
}
.hero > * { position: relative; z-index: 2; }
.hero-title h1 { font-size: 34px; letter-spacing: .1em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.hero-title p { margin: 2px 0 0; letter-spacing: .34em; font-size: 12px; color: rgba(255, 255, 255, .82); text-transform: uppercase; }
.icon-btn.hero-burger { display: none; margin-right: 12px; }

.hero-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-switch { display: flex; gap: 2px; background: rgba(8, 12, 26, .5); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; }
.lang-switch button {
  border: 0; background: transparent; color: rgba(255, 255, 255, .72);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
.lang-switch button.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.lang-switch.small { width: max-content; margin: 16px auto 0; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--line-strong);
  background: rgba(8, 12, 26, .5); color: #fff; cursor: pointer;
}
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--accent); }

.user-chip { position: relative; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font: inherit; font-weight: 700;
}
.user-chip .menu {
  position: absolute; right: 0; top: 46px; min-width: 210px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; display: none; z-index: 60;
}
.user-chip.open .menu { display: block; }
.user-chip .menu a, .user-chip .menu button {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px;
  border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; font-size: 14px;
}
.user-chip .menu a:hover, .user-chip .menu button:hover { background: rgba(255, 255, 255, .07); }
.menu-name { display: block; padding: 8px 11px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-weight: 600; }
.menu-name small { display: block; color: var(--muted); font-weight: 400; }

.hero-change {
  position: absolute; left: 24px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 7px 13px; border-radius: 999px;
  background: rgba(8, 12, 26, .55); border: 1px solid var(--line-strong); color: #fff;
}
.hero-change .ic { width: 15px; height: 15px; }
.hero-change:hover { border-color: var(--accent); }

.hero-location {
  position: absolute; right: 24px; bottom: 16px;
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: rgba(255, 255, 255, .88); text-align: right;
}
.hero-location .ic { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }

/* ----------------------------------------------------------------- steps */

.steps { list-style: none; display: flex; gap: 10px; margin: 18px 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.steps li {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 168px;
  padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel);
  transition: border-color .2s, transform .2s;
}
.steps li.on { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.steps .num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .08); color: var(--muted);
}
.steps li.on .num { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.steps .txt { display: flex; flex-direction: column; line-height: 1.2; }
.steps .txt b { font-size: 13.5px; }
.steps .txt small { color: var(--muted); font-size: 11.5px; }

/* --------------------------------------------------------------- project */

.project-bar { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.project-title { display: flex; gap: 8px; flex: 1 1 320px; }
.project-title input {
  flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; color: var(--text); font: inherit; font-weight: 600; font-size: 16px;
}
.project-actions { display: flex; gap: 8px; align-items: center; }
.switcher { position: relative; }
.switcher summary {
  list-style: none; cursor: pointer; padding: 9px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel); font-size: 13.5px;
}
.switcher summary::-webkit-details-marker { display: none; }
.switcher-menu {
  position: absolute; right: 0; top: 46px; z-index: 50; min-width: 260px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 7px; max-height: 320px; overflow: auto;
}
/* La X del desplegable: la misma redonda de los modales, arrimada a la esquina. */
.switcher-menu { position: relative; }
.switcher-close { position: absolute; top: 8px; right: 8px; z-index: 2; }
.switcher-menu a { display: block; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; }
.switcher-menu a small { display: block; color: var(--muted); }
.switcher-menu a:hover { background: rgba(255, 255, 255, .07); }
.switcher-menu a.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.switcher-menu .new { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- panels */

.grid { display: grid; gap: 16px; margin-top: 16px; }
.top-grid { grid-template-columns: 1fr 1.35fr 1fr; }
.mid-grid { grid-template-columns: 1.5fr 1fr; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel > h3, .panel-head h3 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; margin-bottom: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.panel h4 { margin: 20px 0 10px; font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.head-tools { display: flex; gap: 8px; }
.step-dot {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.right { margin-left: auto; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .14s, box-shadow .2s, border-color .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ic { width: 17px; height: 17px; }
.btn.primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.linklike { background: 0; border: 0; color: var(--accent); font: inherit; cursor: pointer; }

.chip {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--text); cursor: pointer; font-family: inherit;
}
.chip .ic { width: 15px; height: 15px; }
.chip:hover { border-color: var(--accent); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.tag .ic { width: 14px; height: 14px; }
.tag:hover { color: var(--text); border-color: var(--accent); }
.tag.on { background: color-mix(in srgb, var(--accent) 24%, transparent); color: #fff; border-color: var(--accent); }
.tag-sm { font-size: 11px; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, .07); }
.tag-sm.security { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.tag-sm.music { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* --------------------------------------------------------------- upload */

.dropzone { display: flex; flex-direction: column; gap: 12px; }
.dropzone input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone label {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 26px 16px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px dashed var(--line-strong); background: rgba(255, 255, 255, .025);
  text-align: center; transition: border-color .2s, background .2s;
}
.dropzone label .ic { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.dropzone label b { font-size: 14px; }
.dropzone label span { color: var(--muted); font-size: 13px; }
.dropzone label small { color: var(--muted); opacity: .75; margin-top: 4px; }
.dropzone.drag label, .dropzone label:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.audio-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
}
.audio-card > div { min-width: 0; flex: 1; }
.audio-card b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-card small { color: var(--muted); }
.mini-cover, .cover, .thumb, .pc-cover, .preset-thumb {
  display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, #1a2040), color-mix(in srgb, var(--accent-2) 55%, #131a34));
  background-size: cover; background-position: center; color: #fff;
}
.mini-cover { width: 42px; height: 42px; flex: 0 0 42px; }
.mini-cover .ic { width: 20px; height: 20px; }
.ok-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok); }
.ok-dot .ic { width: 15px; height: 15px; }
.replace { margin-top: 12px; font-size: 13px; color: var(--muted); }
.replace summary { cursor: pointer; }
.replace form { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap; }

/* --------------------------------------------------------------- player */

.player { display: flex; gap: 14px; }
.cover { width: 74px; height: 74px; flex: 0 0 74px; }
.cover .ic { width: 28px; height: 28px; }
.player-body { flex: 1; min-width: 0; }
.player-head { display: flex; flex-direction: column; margin-bottom: 8px; }
.player-head b { font-size: 14px; }
.player-head small { color: var(--muted); }
.wave { height: 58px; border-radius: 10px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.transport { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.round {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .05);
  color: var(--text); cursor: pointer; font: inherit; line-height: 1;
}
.round .ic { width: 16px; height: 16px; }
.round.big { width: 42px; height: 42px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; color: #fff; }
.round:hover { border-color: var(--accent); }
.time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vol { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
.vol .ic { width: 16px; height: 16px; }
.vol input { width: 76px; }

/* ---------------------------------------------------------------- modes */

.modes { display: grid; gap: 10px; }
/* The mode is the most consequential choice on the screen and it is picked at a glance:
   big cards, one per row, with the name large enough to read without looking for it. */
.mode {
  position: relative; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 38px 1fr; gap: 2px 16px; align-items: center;
  padding: 20px 62px 20px 22px; border-radius: 16px;   /* room on the right for the tick */
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035);
  color: var(--text); font: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.mode:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mode .ic { width: 34px; height: 34px; grid-row: span 2; color: var(--accent); }
.mode b { font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.mode small { color: var(--muted); font-size: 14px; }
@media (max-width: 560px) {
  .mode { padding: 16px 52px 16px 16px; grid-template-columns: 30px 1fr; gap: 2px 12px; }
  .mode b { font-size: 22px; }
  .mode .ic { width: 26px; height: 26px; }
}
.mode .api-name {
  grid-column: 2; font-style: normal; font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Menlo, monospace; opacity: .8; display: none;
}
.mode .tick {
  position: absolute; right: 18px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.7);
  transition: opacity .18s, transform .18s;
}
.mode .tick .ic { width: 17px; height: 17px; grid-row: auto; color: #fff; }

.mode.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 30px rgba(0,0,0,.28); }
.mode.on .tick { opacity: 1; transform: scale(1); }
body.show-api .mode .api-name { display: block; }

/* --------------------------------------------------------------- jarvis */

.jarvis { display: flex; flex-direction: column; }
.jarvis-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jarvis-head h3 { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.jarvis-head small { color: var(--muted); }
.orb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  animation: spin 6s linear infinite;
}
.orb i {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, color-mix(in srgb, var(--accent) 75%, #000));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .55);
}
.jarvis.busy .orb i { animation: pulse 1.1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(.82); opacity: .75; } }

.pill { white-space: nowrap; margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pill.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill.off { color: var(--muted); }

.chat {
  flex: 1; min-height: 190px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px; padding-right: 4px;
}
.bubble { padding: 10px 13px; border-radius: 13px; font-size: 13.5px; max-width: 94%; white-space: pre-wrap; word-break: break-word; }
.bubble.bot { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.me { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.bubble.error { background: color-mix(in srgb, var(--bad) 15%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.bubble .apply { margin-top: 9px; }
.bubble .meta { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.typing span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.quick { display: flex; gap: 7px; flex-wrap: wrap; margin: 11px 0; }
.quick button {
  font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--muted);
}
.quick button:hover { color: var(--text); border-color: var(--accent); }

.chat-input { display: flex; gap: 8px; }
.chat-input input {
  flex: 1; padding: 11px 14px; border-radius: 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text);
}
.chat-input input:focus { outline: none; border-color: var(--accent); }
.chat-input .btn { padding: 11px 15px; }

/* ---------------------------------------------------------------- style */

.tabs { display: flex; gap: 5px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); margin-bottom: 14px; }
.tabs button {
  flex: 1; padding: 8px 10px; border-radius: 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
}
.tabs button.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }

.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preset {
  position: relative; display: flex; flex-direction: column; gap: 7px; cursor: pointer;
  padding: 8px; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035); color: var(--text); font: inherit; text-align: center;
  transition: border-color .18s, transform .18s;
}
.preset .art {
  display: block; height: 62px; border-radius: 9px; background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, #1b2242), color-mix(in srgb, var(--accent-2) 50%, #121a33));
}
.preset b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.preset .tick {
  position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.7);
  transition: opacity .18s, transform .18s;
}
.preset .tick .ic { width: 12px; height: 12px; }
.preset:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.preset.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.preset.on .tick { opacity: 1; transform: scale(1); }

.inspo { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.inspo button {
  text-align: left; padding: 10px 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--text); font: inherit;
}
.inspo button b { display: block; font-size: 13px; }
.inspo button small { color: var(--muted); }
.inspo button:hover { border-color: var(--accent); }

.preview-text {
  margin: 5px 0 0; font-size: 12.5px; color: var(--muted); max-height: 74px; overflow: auto;
  font-family: ui-monospace, Menlo, monospace; line-height: 1.5; word-break: break-word;
}

/* -------------------------------------------------------------- sliders */

.controls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.controls-head h3 { margin: 0; }
.slider { margin-bottom: 15px; }
.slider label { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 7px; }
.slider output { margin-left: auto; font-size: 12.5px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .12); outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.switch-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 11px 0; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 38px; height: 21px; border-radius: 999px; background: rgba(255, 255, 255, .14); position: relative; flex: 0 0 38px; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch-row input:checked + .switch { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.switch-row input:checked + .switch::after { transform: translateX(17px); }
.switch-row input:focus-visible + .switch { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.switch-row.tight { margin: 0; }
.switch-row span:last-child { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- generate */

.generate-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
}
.btn.generate {
  flex: 1 1 260px; padding: 15px 22px; font-size: 15.5px; border: 0; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 42%, transparent);
}
.btn.generate .ic { width: 19px; height: 19px; }
.btn.generate:disabled { box-shadow: none; }
.generate-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.generate-meta .ic { width: 16px; height: 16px; }
.generate-meta b { color: var(--text); }

/* -------------------------------------------------------------- results */

.results { margin-top: 16px; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.result {
  display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035);
}
.result.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.thumb { width: 56px; height: 56px; flex: 0 0 56px; }
.thumb .ic { width: 22px; height: 22px; }
.result-body { flex: 1; min-width: 0; }
.result-body b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-body small { color: var(--muted); }
.result audio { width: 100%; margin: 9px 0 8px; height: 34px; }
.result-actions { display: flex; gap: 5px; flex-wrap: wrap; }

.compare { display: block; margin-bottom: 18px; }
.ab { display: flex; gap: 11px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.slot {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff;
}
.slot.b { background: color-mix(in srgb, var(--accent-2) 34%, transparent); }
.ab-body { flex: 1; min-width: 0; }
.ab-body b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-body audio { width: 100%; margin-top: 7px; height: 34px; }
.ab-tools { grid-column: 1 / -1; display: flex; gap: 8px; }

.state { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.state.completed { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.state.failed { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.state.processing, .state.queued { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ----------------------------------------------------------------- misc */

.empty-state { max-width: 560px; margin: 60px auto; text-align: center; padding: 36px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.empty-state .ic { width: 46px; height: 46px; color: var(--accent); }
.empty-state h2 { margin: 14px 0 8px; }
.empty-state p { color: var(--muted); margin: 0 0 20px; }
.empty-state form { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.empty-state input { flex: 1 1 240px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.project-card, .preset-card {
  display: flex; flex-direction: column; gap: 5px; padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .035);
  transition: transform .18s, border-color .18s;
}
.project-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.pc-cover { height: 96px; border-radius: 10px; }
.pc-cover .ic { width: 26px; height: 26px; }
.project-card b, .preset-card b { font-size: 13.5px; }
.project-card small, .preset-card small { color: var(--muted); }
.project-card em { font-size: 12px; color: var(--muted); font-style: normal; opacity: .8; }
.preset-card .prompt { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; line-height: 1.45; margin: 6px 0 0; }

.inline-form { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.inline-form input, .inline-form select { flex: 1 1 180px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 13.5px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; padding: 9px 10px; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.subrow td { padding-top: 0; border-bottom: 1px solid var(--line-strong); }
.table input, .table select { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 13px; width: 100%; }
.table audio { height: 34px; max-width: 230px; }

/* ----------------------------------------------------------------- auth */

/* La tarjeta de acceso, centrada de verdad en la pantalla. Antes sólo centraba en horizontal:
   el body llevaba min-height:100%, que se resuelve contra la altura del html —que es automática—
   así que en la práctica valía auto y la rejilla centraba dentro del alto del contenido.
   dvh además respeta la barra del navegador en el móvil; vh queda de reserva para navegadores viejos. */
body.centered { display: grid; place-items: center; padding: 24px; min-height: 100vh; min-height: 100dvh; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card { padding: 30px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(16px); text-align: center; }
.auth-brand .ic { width: 42px; height: 42px; color: var(--accent); }
.auth-brand h1 { font-size: 20px; margin: 10px 0 5px; }
.auth-brand p { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.auth-form { display: grid; gap: 13px; text-align: left; }
.auth-form label { display: grid; gap: 6px; font-size: 13px; }
/* El widget de Turnstile trae su propio ancho fijo: centrado dentro de la tarjeta, que el
   formulario alinea a la izquierda. El tema oscuro se lo pasa el propio widget. */
.cf-turnstile { display: flex; justify-content: center; min-height: 65px; }
.auth-form input { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; }
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-note { display: block; margin-top: 16px; font-size: 12px; color: var(--muted); }
.error-card .error-code { font-size: 54px; font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-card h1 { font-size: 19px; margin: 6px 0 14px; }
.error-card .btn { margin-top: 12px; }

/* ---------------------------------------------------------------- admin */

.admin { display: block; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 20px 0 16px; flex-wrap: wrap; }
.admin-head h2 { font-size: 22px; }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a { padding: 9px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.admin-tabs a.on { color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
.admin .panel { margin-bottom: 16px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: end; }
.field { display: grid; gap: 6px; font-size: 13px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > span { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.field input, .field select, .field textarea {
  padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 13.5px; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input[type=color] { padding: 4px; height: 40px; }
.field input[type=file] { padding: 8px; font-size: 12.5px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

.provider-card { padding: 4px 0 8px; }
.provider-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.provider-head b { font-size: 15px; }
.provider-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.test-result { font-size: 12.5px; color: var(--muted); }
.test-result.ok { color: var(--ok); }
.test-result.bad { color: var(--bad); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.bad { background: var(--bad); }
.dot.idle { background: var(--muted); }
.preset-thumb { width: 44px; height: 44px; border-radius: 11px; }
.img-preview { display: block; height: 78px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line); }

.versions { margin: 4px 18px 12px; font-size: 13px; }
.versions summary { cursor: pointer; color: var(--muted); }
.version { padding: 10px 0; border-top: 1px solid var(--line); }
.version p { margin: 5px 0 7px; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 11px; }
.status { padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .035); }
.status b { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.status span { font-size: 14px; font-weight: 600; word-break: break-word; }
.status.ok { border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.status.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.error-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.error-list li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.error-list code { color: var(--accent); }

.text-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.text-tools input[type=search] { flex: 1 1 260px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; }
.text-list { display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding-right: 6px; }
.text-row { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.text-row code { font-size: 11.5px; color: var(--accent); word-break: break-all; }
.sticky-save { position: sticky; bottom: 0; padding-top: 14px; }

/* ---------------------------------------------------------- help & toast */

.q {
  width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .07);
  color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
  cursor: help; display: inline-grid; place-items: center; vertical-align: middle;
}
.q:hover, .q:focus { background: var(--accent); color: #fff; border-color: var(--accent); outline: none; }
.help-pop {
  position: fixed; z-index: 200; max-width: 300px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--panel-solid); color: var(--text); box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.5;
}

.flashes { display: grid; gap: 8px; margin-top: 14px; }
.flash { padding: 11px 15px; border-radius: 12px; font-size: 13.5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.flash.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.flash.error { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.flash.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 13px; z-index: 300; font-size: 13.5px;
  background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  max-width: min(520px, 92vw);
}
.toast.bad { border-color: var(--bad); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1240px) {
  .top-grid, .mid-grid { grid-template-columns: 1fr 1fr; }
  .top-grid .model-panel, .mid-grid .controls { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .24s ease; box-shadow: var(--shadow);
    background: var(--panel-solid);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 39; }
  .workspace { padding: 14px 15px 50px; }
  .icon-btn.hero-burger { display: grid; }
  .hero { height: 152px; padding: 0 16px; }
  .hero-title h1 { font-size: 24px; }
  .hero-location { display: none; }
  .hero-change { font-size: 11px; padding: 6px 10px; }
  .top-grid, .mid-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .text-row { grid-template-columns: 1fr; }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
  .steps li { min-width: 142px; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .hero { flex-wrap: wrap; height: auto; min-height: 168px; align-content: flex-start; padding: 12px 14px 54px; }
  .hero-tools { order: -1; width: 100%; justify-content: flex-end; margin: 0 0 10px; }
  .hero-change { left: 14px; bottom: 12px; }
  .hero-title h1 { font-size: 20px; }
  .hero-title p { font-size: 10px; letter-spacing: .26em; }
  .panel { padding: 14px; border-radius: 15px; }
  .btn.generate { padding: 14px 18px; font-size: 15px; }
  .result { flex-direction: column; }
  .thumb { width: 100%; height: 64px; flex: none; }
  .player { flex-direction: column; }
  .cover { width: 100%; height: 66px; flex: none; }
  .admin-head .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.provider-card + .provider-card { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 14px; }

.form-grid .flash.wide { grid-column: 1 / -1; margin: 0; }

.side-version { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.side-version:hover { color: var(--text); border-color: var(--accent); }
.version-tag { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.debug-banner { display: block; margin-top: 14px; }
.debug-pre { white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; background: rgba(0,0,0,.25); padding: 10px; border-radius: 10px; }
#debugReport { font-size: 12px; line-height: 1.45; }

/* =================================================================== v1.1 */

/* [hidden] must always win over component display rules (A/B panel bug). */
[hidden] { display: none !important; }

/* ---- file picker (replaces the native "Choose File") ---- */
.file-pick { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;
  padding: 6px 6px 6px 6px; border-radius: 12px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.03);
  transition: border-color .2s, background .2s; }
.file-pick:hover, .file-pick.has-file { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fp-btn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.fp-btn .ic { width: 15px; height: 15px; }
.fp-name { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-pick.has-file .fp-name { color: var(--text); }
.replace-form { display: grid; gap: 10px; margin-top: 10px; }
.check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 6px; margin: 0;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.05); display: inline-grid; place-content: center; cursor: pointer; }
.check input[type=checkbox]::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform .15s; margin-top: -2px; }
.check input[type=checkbox]:checked { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
.check input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }

/* ---- upload zone ---- */
.dropzone { position: relative; }
.drop-face { min-height: 172px; justify-content: center; }
.drop-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }
.drop-icon .ic { width: 26px; height: 26px; color: var(--accent); margin: 0; }
.dropzone.drag .drop-icon { transform: scale(1.08); }
.upload-progress { padding: 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); display: grid; gap: 9px; }
.up-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-pct { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
.up-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); transition: width .2s; }
.up-note { color: var(--muted); }

/* ---- empty listen panel ---- */
.listen-empty { display: grid; place-items: center; gap: 12px; padding: 18px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.listen-empty p { margin: 0; }
.ghost-wave { display: flex; align-items: center; gap: 3px; height: 58px; width: 100%; opacity: .5; }
.ghost-wave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); opacity: .35;
  animation: gw 2.6s ease-in-out infinite; }
.ghost-wave i:nth-child(3n) { animation-delay: -.6s; } .ghost-wave i:nth-child(4n) { animation-delay: -1.2s; }
@keyframes gw { 50% { transform: scaleY(.45); opacity: .18; } }

/* ---- custom audio player ---- */
.rbp { display: flex; align-items: center; gap: 10px; margin: 9px 0 8px; padding: 6px 10px 6px 6px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.rbp audio { display: none; }
.rbp-btn { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.rbp-btn svg { width: 15px; height: 15px; fill: #fff; }
.rbp-pause { display: none; } .rbp.playing .rbp-play { display: none; } .rbp.playing .rbp-pause { display: inline; }
.rbp-track { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); cursor: pointer; }
.rbp-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rbp-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); opacity: 0; transition: opacity .15s; }
.rbp:hover .rbp-knob, .rbp.playing .rbp-knob { opacity: 1; }
.rbp-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-body .rbp { margin: 7px 0 0; }
.table .rbp { margin: 0; min-width: 220px; }

/* ---- JARVIS touched something on screen ---- */
.jv-touched { animation: jvTouch 1.1s ease; }
@keyframes jvTouch { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* ---- JARVIS dock ---- */
.jv-dock { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none; user-select: none; }
.jv-dock > * { pointer-events: auto; }
.jv-core { display: flex; align-items: center; gap: 0; padding: 6px 10px 6px 6px; border-radius: 999px;
  background: rgba(10,14,30,.72); border: 1px solid var(--line-strong); backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent); }
html[data-theme="light"] .jv-core { background: rgba(255,255,255,.85); }
.jv-orb { position: relative; width: 78px; height: 78px; flex: 0 0 78px; border: 0; padding: 0; background: transparent; cursor: grab; border-radius: 50%; }
.jv-orb canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 55%, transparent)); }
.jv-ring { position: absolute; inset: 4px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; }
.jv-dock.live .jv-ring { opacity: 1; animation: jvRing 2.2s ease-out infinite; }
@keyframes jvRing { from { transform: scale(.85); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.jv-bar { display: flex; align-items: center; gap: 8px; padding-left: 6px; }
.jv-name { font-weight: 800; letter-spacing: .14em; font-size: 12.5px; cursor: grab; }
.jv-state { font-size: 11.5px; color: var(--muted); min-width: 68px; }
.jv-dock[data-state="listening"] .jv-state { color: #34d3e8; }
.jv-dock[data-state="speaking"] .jv-state { color: var(--accent); }
.jv-dock[data-state="error"] .jv-state { color: var(--bad); }
.jv-engine { max-width: 150px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--text); font: inherit; font-size: 12px; }
.jv-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.06);
  color: var(--text); display: grid; place-items: center; cursor: pointer; font: inherit; font-size: 16px; }
.jv-btn .ic { width: 17px; height: 17px; }
.jv-btn:hover { border-color: var(--accent); }
#jvMic { width: 42px; height: 42px; border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.jv-dock.live #jvMic { background: linear-gradient(135deg, #ff5f7e, #ff9a62); animation: jvPulse 1.4s ease-in-out infinite; }
@keyframes jvPulse { 50% { box-shadow: 0 0 0 10px rgba(255,95,126,0); } 0%,100% { box-shadow: 0 0 0 0 rgba(255,95,126,.5); } }
.jv-dock.no-voice #jvMic, .jv-dock.no-voice .jv-engine { display: none; }
.jv-bubble { max-width: min(420px, calc(100vw - 44px)); padding: 12px 16px; border-radius: 16px 16px 4px 16px;
  background: rgba(10,14,30,.8); border: 1px solid var(--line-strong); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.jv-sub { font-size: 14px; line-height: 1.5; }
.jv-sub.user { color: var(--muted); font-style: italic; }
.jv-confirm { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600;
  background: color-mix(in srgb, var(--warn) 18%, rgba(10,14,30,.85)); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); }
.jv-dock.mini .jv-bar, .jv-dock.mini .jv-bubble { display: none; }
.jv-dock.mini .jv-core { padding: 4px; }
.jv-dock.mini .jv-orb { width: 62px; height: 62px; flex-basis: 62px; }

.jv-history { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 160; display: flex; flex-direction: column;
  background: var(--panel-solid); border-left: 1px solid var(--line); box-shadow: var(--shadow); }
.jv-history-head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.jv-history-head input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: inherit; }
.jv-history-list, .jv-history-thread { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.jv-conv { text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); font: inherit; cursor: pointer; }
.jv-conv:hover { border-color: var(--accent); }
.jv-conv b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-conv small { color: var(--muted); font-size: 11.5px; }
.jv-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; display: grid; gap: 3px; white-space: pre-wrap; }
.jv-msg small { color: var(--muted); font-size: 10.5px; }
.jv-msg.user { justify-self: end; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.jv-msg.user small { color: rgba(255,255,255,.75); }
.jv-msg.assistant { background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.jv-msg.tool { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); padding: 4px 10px; }

.display-box { margin-top: 18px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.display-box input[readonly] { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* ---- External display / hologram ---- */
.display-body { margin: 0; background: #000; overflow: hidden; height: 100vh; }
.display { position: fixed; inset: 0; display: grid; place-items: center; background: #000; color: #fff; }
.display .dv-main { width: min(92vmin, 900px); height: min(92vmin, 900px); }
.dv-name { position: absolute; top: 5vh; left: 0; right: 0; text-align: center; letter-spacing: .5em; font-weight: 800; font-size: clamp(14px, 2.4vmin, 26px); opacity: .55; }
.dv-subtitle { position: absolute; left: 6vw; right: 6vw; bottom: 7vh; text-align: center; font-size: clamp(18px, 3.4vmin, 40px); line-height: 1.35;
  text-shadow: 0 0 24px rgba(124,92,255,.6); min-height: 2.8em; }
.dv-subtitle.user { color: rgba(255,255,255,.6); font-style: italic; }
.display-subtitles .dv-main { width: 30vmin; height: 30vmin; position: absolute; top: 8vh; }
.display-subtitles .dv-subtitle { bottom: auto; top: 45vh; font-size: clamp(22px, 4.5vmin, 56px); }
/* Pepper's-ghost pyramid: four views facing outwards around the centre. */
.display-pyramid .dv { position: absolute; width: 30vmin; height: 30vmin; }
.display-pyramid .dv-top { top: 2vmin; left: calc(50% - 15vmin); transform: rotate(180deg); }
.display-pyramid .dv-bottom { bottom: 2vmin; left: calc(50% - 15vmin); }
.display-pyramid .dv-left { left: calc(50% - 50vmin); top: calc(50% - 15vmin); transform: rotate(90deg); }
.display-pyramid .dv-right { right: calc(50% - 50vmin); top: calc(50% - 15vmin); transform: rotate(-90deg); }

@media (max-width: 560px) {
  .jv-dock { right: 10px; bottom: 10px; }
  .jv-core { border-radius: 22px; flex-wrap: nowrap; }
  .jv-orb { width: 62px; height: 62px; flex-basis: 62px; }
  .jv-state, .jv-engine { display: none; }
  .jv-dock.live .jv-state { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .ghost-wave i, .jv-ring { animation: none !important; } }
.workspace { padding-bottom: 150px; }

/* =================================================================== v1.1.1 */

/* ---- original player: play/pause state + live spectrum ---- */
.round.big .pp { width: 18px; height: 18px; fill: #fff; }
.round.big .rbp-pause, .round.big.playing .rbp-play { display: none; }
.round.big.playing .rbp-pause { display: inline; }
.round.big.playing { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent); }
.spectrum { display: block; width: 100%; height: 46px; margin-top: 8px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05)); }
.rbp-track { height: 26px; background: transparent; display: flex; align-items: center; }
.rbp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: rgba(255,255,255,.12); }
.rbp-spec { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.rbp-fill { top: 50%; bottom: auto; height: 4px; margin-top: -2px; }

/* ---- generate bar: polishing base + button state ---- */
.base-banner { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent); animation: bbIn .35s ease; }
@keyframes bbIn { from { opacity: 0; transform: translateY(-6px); } }
.bb-thumb { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 35%, #111) center/cover; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.bb-text { flex: 1; min-width: 0; display: grid; }
.bb-text small { color: var(--muted); font-size: 12px; }
.bb-text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.generate.polish { background: linear-gradient(120deg, #1fb6c9, var(--accent-2) 55%, var(--accent)); }

/* ---- futuristic progress ---- */
.gen-progress { margin-top: 14px; padding: 18px 20px 16px; border-radius: var(--radius); position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
              radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%), var(--panel);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03); }
.gen-progress::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.gp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gp-orb { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 45%, var(--accent-2) 75%, transparent 76%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); animation: gpPulse 1.6s ease-in-out infinite; }
@keyframes gpPulse { 50% { transform: scale(.88); box-shadow: 0 0 36px color-mix(in srgb, var(--accent-2) 80%, transparent); } }
.gp-titles { flex: 1; min-width: 0; display: grid; }
.gp-titles b { font-size: 16px; letter-spacing: .01em; }
.gp-titles small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-pct { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-track { position: relative; height: 14px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.gp-grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.06) 22px 23px); }
.gp-fill { position: relative; height: 100%; width: 0; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #3fe0f0);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 80%, transparent), 0 0 4px #fff inset; }
.gp-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.gp-shine::before { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: gpShine 1.8s linear infinite; }
@keyframes gpShine { to { left: 110%; } }
.gp-fill::after { content: ""; position: absolute; right: -3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px 4px #3fe0f0; }
.gp-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gp-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; }
.gp-steps li span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: transparent; transition: all .3s; }
.gp-steps li.done { color: var(--text); }
.gp-steps li.done span { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.gp-steps li.now { color: #fff; font-weight: 700; }
.gp-steps li.now span { border-color: #3fe0f0; background: #3fe0f0; animation: gpDot 1s ease-in-out infinite; }
@keyframes gpDot { 50% { box-shadow: 0 0 0 7px rgba(63,224,240,.18); } }
.gp-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.gp-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.gen-progress.done { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.gen-progress.done .gp-fill { background: linear-gradient(90deg, var(--ok), #3fe0f0); }
.gen-progress.done .gp-orb, .gen-progress.failed .gp-orb { animation: none; }
.gen-progress.failed { border-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.gen-progress.failed .gp-fill { background: var(--bad); }

/* ---- results: batches with big cards ---- */
.batches { display: grid; gap: 16px; }
.batch { border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 14px; }
.batch.mode-creative { border-left: 3px solid var(--accent); }
.batch.mode-standard { border-left: 3px solid #3fe0f0; }
.batch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.batch-head b { font-size: 14px; }
.batch-head small { color: var(--muted); font-size: 12px; }
.mode-chip { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.mode-chip.standard { background: rgba(63,224,240,.14); border-color: rgba(63,224,240,.5); }
.lineage { font-size: 12.5px; color: #8fe9f4; }
.lineage.muted { color: var(--muted); }
.batch-live { font-size: 12px; color: #3fe0f0; animation: gpBlink 1.2s ease-in-out infinite; }
@keyframes gpBlink { 50% { opacity: .4; } }
.batch-err { font-size: 12px; color: var(--bad); }
/* auto-FIT, not auto-fill: with two versions and a wide panel, auto-fill kept creating a third empty
   column and left a hole on the right. auto-fit collapses the empty track, so the two cards share the
   whole width evenly. */
.batch-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.batch .result { display: flex; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition: border-color .2s, transform .2s; }
.batch .result:hover { border-color: var(--line-strong); }
.batch .result.best { border-color: var(--ok); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 60%, transparent) inset; }
.batch .result.is-base { border-color: #3fe0f0; box-shadow: 0 0 0 1px #3fe0f0 inset, 0 0 26px rgba(63,224,240,.18); }
.r-cover { position: relative; width: 104px; height: 104px; flex: 0 0 104px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) center/cover; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.r-num { position: absolute; left: 6px; top: 6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.r-main { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.r-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.r-title b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-ver { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.r-best { display: none; font-size: 11px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.result.best .r-best { display: inline; }
.r-preparing { position: relative; margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--muted);
  background: rgba(255,255,255,.05); overflow: hidden; }
.r-preparing i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: gpShine 1.4s linear infinite; left: -40%; width: 40%; }
.r-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* El botón del WAV cambia de texto mientras trabaja: se le fija un ancho mínimo para que la fila
   no se reacomode ni se parta al cambiar "Descargar en WAV" por "Preparando el WAV…". */
.r-actions .act.working { min-width: 9.5rem; justify-content: center; opacity: .8; cursor: progress; }
.r-actions .act[data-dl] { min-width: 9.5rem; justify-content: center; }
.act { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.act:hover:not(:disabled) { border-color: var(--accent); }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.act.icon.on { color: #ffd166; border-color: #ffd166; background: rgba(255,209,102,.12); }
.act[data-flag="is_selected"].on { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.act.polish { font-weight: 700; color: #fff; border: 0; background: linear-gradient(120deg, #1fb6c9, var(--accent-2)); box-shadow: 0 4px 14px rgba(31,182,201,.3); }
.act.ab { min-width: 32px; justify-content: center; font-weight: 800; }

/* ---- A/B ---- */
.compare { padding: 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); }
.ab-help { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ab-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-slot { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: border-color .2s, box-shadow .2s, opacity .2s; opacity: .7; }
.ab-slot.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 25%, transparent); }
.ab-slot[data-slot="b"].on { border-color: var(--accent-2); }
.ab-slot div { min-width: 0; display: grid; }
.ab-slot b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-slot small { color: var(--muted); font-size: 12px; }
.ab-transport { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ab-play { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.ab-play svg { width: 19px; height: 19px; fill: #fff; }
.ab-play .rbp-pause, .compare.playing .ab-play .rbp-play { display: none; }
.compare.playing .ab-play .rbp-pause { display: inline; }
.ab-switch { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); flex-wrap: wrap; }
.ab-switch button { font: inherit; font-weight: 800; font-size: 15px; width: 46px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.ab-switch button.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.ab-track { flex: 1 1 200px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); cursor: pointer; overflow: hidden; }
.ab-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ab-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-specs canvas { height: 54px; }
.compare[data-listen="b"] #abSpectrum, .compare:not([data-listen="b"]) #abSpectrumB { display: none; }
.compare audio { display: none; }

@media (max-width: 760px) {
  .batch-tracks { grid-template-columns: 1fr; }
  .r-cover { width: 72px; height: 72px; flex-basis: 72px; }
  .ab-slots { grid-template-columns: 1fr; }
  .gp-steps li { font-size: 10px; }
  .gp-pct { font-size: 24px; }
}

/* ---- JARVIS docked in the sidebar (desktop) ---- */
.jv-slot:empty { display: none; }
.jv-slot { margin: 14px 0 4px; }
.jv-dock.docked { position: static; pointer-events: auto; align-items: stretch; gap: 8px; }
.jv-dock.docked .jv-core { flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px 12px; border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); backdrop-filter: none; }
.jv-dock.docked .jv-orb { width: 150px; height: 150px; flex-basis: auto; cursor: pointer; }
.jv-dock.docked .jv-bar { flex-wrap: wrap; justify-content: center; padding: 0; gap: 8px; width: 100%; }
.jv-dock.docked .jv-name { width: 100%; text-align: center; cursor: default; font-size: 13px; letter-spacing: .3em; }
.jv-dock.docked .jv-state { width: 100%; text-align: center; min-width: 0; margin-top: -6px; }
.jv-dock.docked .jv-engine { max-width: none; width: 100%; }
.jv-dock.docked .jv-bubble { order: 2; max-width: none; border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.04); box-shadow: none; }
.jv-dock.docked .jv-sub { font-size: 13px; }
.jv-dock.docked .jv-confirm { order: 3; }
.jv-dock.docked .jv-chat { order: 4; width: auto; }
.jv-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.jv-dock.nudge .jv-orb { animation: jvNudge 1.2s ease-in-out infinite; }
@keyframes jvNudge { 50% { transform: scale(1.06); filter: brightness(1.3); } }

/* ---- JARVIS chat ---- */
.jv-chat { width: min(360px, calc(100vw - 30px)); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong); background: rgba(10,14,30,.88); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
html[data-theme="light"] .jv-chat { background: rgba(255,255,255,.95); }
.jv-chat-log { max-height: 320px; min-height: 90px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.jv-chat-log:empty::before { content: "…"; color: var(--muted); font-size: 12px; text-align: center; padding: 20px 0; }
.jv-chat-log .jv-msg { max-width: 92%; font-size: 13px; padding: 8px 11px; }
.jv-chat-log .jv-msg.user { align-self: flex-end; }
.jv-chat-log .jv-msg.assistant { align-self: flex-start; }
.jv-msg.typing { color: var(--muted); animation: gpBlink 1s ease-in-out infinite; }
.jv-chat-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.jv-chat-row input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--text); font: inherit; font-size: 13px; }
.jv-btn.send { color: #fff; border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.jv-dock:not(.docked) .jv-chat { order: -1; }
.sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }

/* =================================================================== v1.1.2 JARVIS robot card */
.jv-dock .jv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 14px 12px 12px; border-radius: 26px;
  border: 1px solid color-mix(in srgb, #6d5cff 55%, transparent);
  background: radial-gradient(120% 70% at 50% 0%, rgba(92,72,255,.28), transparent 65%),
              linear-gradient(180deg, #121637 0%, #0b0e24 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 30px rgba(92,72,255,.28), 0 18px 40px rgba(0,0,0,.5); }
html[data-theme="light"] .jv-dock .jv-card { background: radial-gradient(120% 70% at 50% 0%, rgba(92,72,255,.25), transparent 65%), linear-gradient(180deg, #1a1f4a, #10142f); color: #fff; }
.jv-dock:not(.docked) .jv-card { width: 250px; }
.jv-x, .jv-corner { position: absolute; top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #cfd6ff; display: grid; place-items: center; cursor: pointer; font: inherit; font-size: 17px; line-height: 1; z-index: 2; }
.jv-x { left: 10px; } .jv-corner { right: 10px; }
.jv-corner .ic { width: 14px; height: 14px; }
.jv-x:hover, .jv-corner:hover { border-color: #8a7bff; color: #fff; }

.jv-stage { position: relative; width: 100%; max-width: 230px; aspect-ratio: 200 / 205; display: grid; place-items: center; cursor: pointer; outline: none; }
.jv-hex { position: absolute; inset: 0 12%; width: 76%; height: 100%; animation: hexPulse 4s ease-in-out infinite; }
@keyframes hexPulse { 50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(80,120,255,.6)); } }
.jv-dock[data-state="listening"] .jv-hex { animation-duration: 1.4s; }
.jv-dock[data-state="error"] .jv-hex-line { stroke: #ff5f7e; }
.jv-hex-fill { fill: rgba(20,22,60,.55); }
.jv-robot { position: relative; width: 70%; height: auto; margin-top: 4%; overflow: visible; }
.jv-robot .rb-mouth, .jv-robot .rb-smile { transition: opacity .12s; }
.jv-robot[data-state="error"] .rb-eye { fill: #ff6b86; }
.jv-robot[data-state="error"] .rb-smile, .jv-robot[data-state="error"] .rb-ear-glow { stroke: #ff6b86; }
.jv-robot[data-state="thinking"] .rb-ear-glow { stroke: #b58cff; }
.jv-canvas { position: relative; width: 66%; height: 66%; }
.jv-stage .jv-ring { inset: 8% 14%; border-radius: 30%; }
.jv-eq { position: absolute; top: 34%; height: 32%; width: 12%; display: flex; align-items: center; gap: 2px; }
.jv-eq-l { left: 0; flex-direction: row-reverse; } .jv-eq-r { right: 0; }
.jv-eq i { flex: 1; height: 100%; border-radius: 3px; transform: scaleY(.15); transform-origin: center;
  background: linear-gradient(180deg, #8a5cff, #4f7dff 50%, #3fe0f0); box-shadow: 0 0 6px rgba(80,140,255,.8); }
.jv-eq i:nth-child(odd) { height: 70%; } .jv-eq i:nth-child(3n) { height: 55%; }

.jv-titles { display: grid; justify-items: center; gap: 1px; margin-top: -2px; }
.jv-dock .jv-name { font-weight: 800; letter-spacing: .32em; font-size: 16px; color: #fff; text-shadow: 0 0 12px rgba(120,140,255,.7); cursor: default; }
.jv-tag { font-size: 12px; color: #c2c8ee; }

.jv-meter { width: 100%; padding: 10px 10px 8px; border-radius: 16px; display: grid; justify-items: center; gap: 6px;
  border: 1px solid rgba(120,110,255,.35); background: rgba(10,12,34,.7); box-shadow: inset 0 0 18px rgba(80,90,255,.15); }
.jv-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; width: 100%; }
.jv-wave i { flex: 0 0 3px; height: 100%; border-radius: 3px; transform: scaleY(.1); background: linear-gradient(180deg, #a07bff, #4f8bff, #3fe0f0);
  box-shadow: 0 0 5px rgba(90,140,255,.8); }
.jv-dock .jv-state { font-size: 13px; color: #e6e9ff; min-width: 0; }
.jv-dock[data-state="listening"] .jv-state { color: #7ff0ff; }
.jv-dock[data-state="error"] .jv-state { color: #ff8da2; }

.jv-actions { width: 100%; display: flex; align-items: flex-start; justify-content: space-around; }
.jv-act { display: grid; justify-items: center; gap: 4px; background: none; border: 0; color: #c9cff5; font: inherit; font-size: 11.5px; cursor: pointer; padding: 0; }
.jv-act span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.jv-act .ic { width: 18px; height: 18px; }
.jv-act:hover span, .jv-act.on span { border-color: #8a7bff; background: rgba(138,123,255,.2); color: #fff; }
.jv-mic { width: 62px; height: 62px; margin-top: -4px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #8fa0ff, #5b5cff 55%, #3b3fd8); box-shadow: 0 0 0 5px rgba(91,92,255,.18), 0 0 26px rgba(91,92,255,.75); }
.jv-mic .ic { width: 26px; height: 26px; }
.jv-dock.live .jv-mic { background: radial-gradient(circle at 35% 30%, #ffb0c0, #ff5f7e 55%, #d8375a); box-shadow: 0 0 0 5px rgba(255,95,126,.2), 0 0 26px rgba(255,95,126,.7); animation: jvPulse 1.4s ease-in-out infinite; }
.jv-engine-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px;
  border: 1px solid rgba(120,110,255,.35); background: rgba(10,12,34,.7); }
.jv-engine-row span { color: #a99cff; display: grid; } .jv-engine-row .ic { width: 16px; height: 16px; }
.jv-dock .jv-engine-row .jv-engine { flex: 1; max-width: none; width: auto; border: 0; background: transparent; color: #fff; font-size: 13px; padding: 4px 0; }
.jv-dock.no-voice .jv-mic, .jv-dock.no-voice .jv-engine-row { display: none; }

/* Folded (×): only the floating robot remains; click it to unfold. */
.jv-dock.mini .jv-titles, .jv-dock.mini .jv-meter, .jv-dock.mini .jv-actions, .jv-dock.mini .jv-engine-row,
.jv-dock.mini .jv-corner, .jv-dock.mini .jv-chat, .jv-dock.mini .jv-bubble { display: none !important; }
.jv-dock.mini .jv-card { padding: 8px; gap: 0; }
.jv-dock.mini .jv-x { top: 4px; left: 4px; transform: rotate(45deg); }
.jv-dock.mini:not(.docked) .jv-card { width: 118px; border-radius: 22px; }
.jv-dock.mini.docked .jv-stage { max-width: 150px; }
.jv-dock.docked .jv-card { order: 0; }
.jv-dock .jv-bubble { order: 2; }
.display .dv { display: grid; place-items: center; }
.display .dv .jv-robot { width: 78%; margin: 0; }
.display .dv-main { width: min(80vmin, 820px); height: min(80vmin, 820px); }
.display-subtitles .dv-main { width: 34vmin; height: 34vmin; }

/* =================================================================== v1.1.3 */
/* Sidebar scrollbar: invisible until needed, thin and on-brand. */
.sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.sidebar:hover { scrollbar-color: rgba(138,123,255,.45) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(138,92,255,.55), rgba(79,125,255,.55)); }
.jv-chat-log { scrollbar-width: thin; scrollbar-color: rgba(138,123,255,.4) transparent; }
.jv-chat-log::-webkit-scrollbar { width: 5px; } .jv-chat-log::-webkit-scrollbar-thumb { background: rgba(138,123,255,.4); border-radius: 99px; }
/* Short screens: tighter card so the sidebar rarely needs to scroll at all. */
@media (max-height: 900px) {
  .jv-dock.docked .jv-stage { max-width: 170px; }
  .jv-dock.docked .jv-card { gap: 7px; padding: 10px 10px 10px; }
  .jv-dock.docked .jv-wave { height: 22px; }
  .sidebar .nav a { padding-top: 8px; padding-bottom: 8px; }
}

/* Project title auto-save */
.project-title button[type=submit] { display: none; }
.autosave-note { font-size: 12px; color: var(--ok); white-space: nowrap; min-width: 70px; }

/* Spending report */
.usage-panel { margin-top: 18px; }
.usage-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.usage-filters select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: inherit; }
.usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.uc { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.035); display: grid; gap: 4px; }
.uc small { color: var(--muted); font-size: 12px; } .uc b { font-size: 24px; letter-spacing: -.01em; } .uc em { font-size: 11.5px; color: var(--muted); font-style: normal; }
.ub { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ub i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #3fe0f0); } .ub i.warn { background: var(--warn); } .ub i.over { background: var(--bad); }
.usage-best { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.usage-chart { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin: 16px 0 6px; padding: 10px 6px 0; border-radius: 12px; background: rgba(255,255,255,.025); overflow-x: auto; }
.usage-chart .bar { flex: 1 0 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.usage-chart .bar i { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #3fe0f0, var(--accent)); }
.usage-chart .bar small { font-size: 9.5px; color: var(--muted); }
.usage-table td { vertical-align: top; font-size: 13px; }
.pill { display: inline-block; margin: 3px 4px 0 0; padding: 2px 7px; border-radius: 99px; font-size: 10.5px; border: 1px solid var(--line); color: var(--muted); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.price-table th { font-size: 11px; white-space: nowrap; } .price-table td { padding: 4px; }
.mini-input { width: 78px; padding: 6px 7px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 12.5px; }
.video-hint { display: block; margin-top: 2px; color: var(--muted); opacity: .9; }
.kb-preview { padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); display: grid; gap: 8px; }
.kb-preview b { font-size: 13.5px; }
.kb-titles { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-titles span { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
/* Subtitles toggle */
.jv-corner.jv-cc { right: 44px; width: auto; min-width: 28px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; opacity: .55; }
.jv-corner.jv-cc.on { opacity: 1; color: #fff; border-color: #8a7bff; background: rgba(138,123,255,.25); }
.jv-dock.subs-off:not(.show-error) .jv-bubble { display: none !important; }
.jv-dock.mini .jv-cc { display: none; }

/* =================================================================== v1.1.8 voice lab */
.lab { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.lab-title { font-weight: 700; font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lab-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.lab-model { position: relative; display: grid; gap: 3px; padding: 11px 12px 11px 34px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.lab-model input[type=radio], .lab-voice input[type=radio] { position: absolute; left: 11px; top: 13px; accent-color: var(--accent); }
.lab-model:has(input:checked), .lab-voice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lab-model b { font-size: 13.5px; } .lab-model small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.lab-model code { font-size: 10.5px; color: var(--muted); opacity: .8; }
.lab-model.tier-top b::after { content: " · Máxima"; color: #ffd166; font-size: 11px; }
.lab-model.tier-eco b::after { content: " · Económico"; color: var(--ok); font-size: 11px; }
.lab-custom { margin-top: 4px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 12.5px; }
.lab-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 7px; max-height: 330px; overflow: auto; padding-right: 4px; }
.lab-voice { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 32px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.lab-voice input[type=radio] { top: 50%; transform: translateY(-50%); }
.lv-body { flex: 1; min-width: 0; display: grid; } .lv-body b { font-size: 13px; } .lv-body small { color: var(--muted); font-size: 11px; }
.lv-play { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.lv-play:disabled { opacity: .6; cursor: wait; }
.lab-timing output { color: var(--accent); font-weight: 700; margin-left: 6px; }
.form-grid > .lab { grid-column: 1 / -1; order: 10; }
.form-grid > .lab .lab-timing { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.batch-code { font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 99px; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent-2) 70%, #000)); letter-spacing: .02em; }
.r-code { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 8px; color: #fff;
  background: color-mix(in srgb, var(--accent) 35%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.tap-to-play { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; padding: 14px 26px; border-radius: 99px; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 55%, transparent); animation: jvPulse 1.4s ease-in-out infinite; }
.jv-corner.jv-follow { right: 88px; font-size: 13px; opacity: .5; }
.jv-corner.jv-follow.on { opacity: 1; border-color: #8a7bff; background: rgba(138,123,255,.25); }
.jv-dock.mini .jv-follow { display: none; }
/* Power off */
.jv-power span { font-size: 17px; font-weight: 700; }
.jv-power em { font-style: normal; }
.jv-dock:not(.off) .jv-power:hover span { border-color: #ff6b86; color: #ff8da2; background: rgba(255,107,134,.15); }
.jv-dock.off .jv-power span { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.jv-dock.off .jv-mic, .jv-dock.off .jv-engine-row { display: none !important; }
.jv-dock.off .jv-hex, .jv-dock.off .jv-eq { filter: grayscale(.8) brightness(.55); }
.jv-dock.off .jv-robot { filter: saturate(.3) brightness(.8); }
.jv-dock.off .jv-state { color: var(--muted); }

/* =================================================================== v1.2.3 */
/* JARVIS a little smaller */
.jv-dock .jv-card { gap: 8px; padding: 12px 10px 10px; }
.jv-stage { max-width: 205px; }
.jv-dock .jv-name { font-size: 15px; }
.jv-mic { width: 56px; height: 56px; }
.jv-mic .ic { width: 23px; height: 23px; }
.jv-act span { width: 37px; height: 37px; }
.jv-wave { height: 26px; }
.jv-meter { padding: 8px 10px 7px; }

/* One scrollbar style everywhere (page, sidebar, panels, chat, lists) */
html, body, .lab-voices, .jv-history-list, .jv-history-thread, .table-wrap, textarea {
  scrollbar-width: thin; scrollbar-color: rgba(138,123,255,.5) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient(180deg, rgba(138,92,255,.6), rgba(79,125,255,.6)); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(138,92,255,.9), rgba(79,125,255,.9)); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* the sidebar keeps its discreet style: visible only while the mouse is over it */
.sidebar::-webkit-scrollbar-thumb { background: transparent; }
.sidebar:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(138,92,255,.55), rgba(79,125,255,.55)); background-clip: padding-box; }
/* No brand block in the sidebar any more: give the menu a little top room */
.sidebar .nav { margin-top: 6px; }
/* Delete buttons + confirmation window */
.act.danger { color: #ff8da2; }
.act.danger:hover { border-color: #ff6b86; background: rgba(255,107,134,.14); color: #ffb3c1; }
.batch-del { margin-left: auto; font-size: 12px; padding: 5px 10px; }
.rb-ask { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px;
  background: rgba(4,7,18,.66); backdrop-filter: blur(4px); animation: fadeIn .15s ease-out; }
.rb-ask-card { width: min(440px, 100%); padding: 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, #ff6b86 45%, transparent);
  background: var(--panel, #141a2e); box-shadow: 0 24px 60px rgba(0,0,0,.5); display: grid; gap: 12px; }
.rb-ask-card h3 { margin: 0; font-size: 18px; }
.rb-ask-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.rb-ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
/* Misma tarjeta, sin el borde de aviso: para pedir un texto en vez de confirmar un borrado.
   Lo demás lo ponen .field y .btn, que ya son del sistema. */
.rb-ask-card.plain { border-color: var(--line-strong); }
.btn.danger { background: linear-gradient(135deg, #ff5c7c, #d9366f); color: #fff; border: 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Push to talk */
.jv-engine-row { position: relative; }
.jv-ptt { flex: 0 0 auto; margin-left: 4px; width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer;
  background: rgba(255,255,255,.05); font-size: 13px; opacity: .55; }
.jv-ptt.on { opacity: 1; border-color: #8a7bff; background: rgba(138,123,255,.28); }
.jv-dock.ptt.live .jv-mic { background: linear-gradient(135deg, #5b6cff, #8a5cff); }
.jv-dock.talking .jv-mic { background: linear-gradient(135deg, #ff5c7c, #ff8a5c) !important; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,92,124,.18), 0 0 30px rgba(255,92,124,.5); }
.lab-model.tier-old { opacity: .6; }
.lab-model.tier-old b::after { content: " · Obsoleto"; color: #ff8da2; font-size: 11px; }

/* =================================================================== v1.3.4 deck (original audio player) */
.player.deck { display: grid; gap: 12px; padding: 16px; border-radius: 20px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.deck-top { display: flex; align-items: center; gap: 14px; }
.disc { position: relative; width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%;
  background: radial-gradient(circle, #1b1830 0 18%, #0d0b18 19% 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); }
.disc-grooves { position: absolute; inset: 4px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
              conic-gradient(from 20deg, transparent 0 20%, rgba(255,255,255,.10) 25%, transparent 32% 70%, rgba(255,255,255,.07) 76%, transparent 82%); }
.disc-label { position: absolute; inset: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, #fff 0%), #38bdf8); box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
.disc-label .ic { width: 13px; height: 13px; }
.deck.spinning .disc { animation: discSpin 3.2s linear infinite; }
@keyframes discSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .deck.spinning .disc { animation: none; } }
.deck-meta { min-width: 0; display: grid; gap: 3px; }
.deck-meta b { font-size: 17px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-meta small { color: var(--muted); font-size: 12.5px; }
.deck-wave { position: relative; border-radius: 14px; padding: 8px 6px; background: rgba(4,6,16,.35); border: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.deck-wave .wave { position: relative; z-index: 1; }
.deck-wave .spectrum { position: absolute; inset: 8px 6px; width: auto; height: auto; opacity: .28; pointer-events: none; z-index: 0; }
.deck-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -4px; padding: 0 4px; }
.deck-transport { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 12px; }
.deck-transport .round.big { width: 58px; height: 58px;
  background: linear-gradient(135deg, #c4b5fd, var(--accent) 45%, #38bdf8); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.deck-transport .round.big:hover { transform: scale(1.05); }
.deck-transport .round.big:focus-visible, .deck-transport .round:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.deck-side.vol { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.deck-side.vol input { width: 96px; accent-color: var(--accent); }
@media (max-width: 560px) { .deck-side.vol input { width: 64px; } .disc { width: 58px; height: 58px; flex-basis: 58px; } .disc-label { inset: 19px; } }
/* Voice monitor */
.jv-monitor { position: fixed; right: 18px; bottom: 18px; z-index: 250; width: min(460px, calc(100vw - 36px)); max-height: 80vh; overflow: auto;
  padding: 16px; border-radius: 18px; background: var(--panel, #141a2e); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 24px 60px rgba(0,0,0,.5); display: grid; gap: 12px; }
.jm-head { display: flex; justify-content: space-between; align-items: center; }
.jm-head b { font-size: 16px; }
.jm-x { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.jm-live, .jm-server { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.jm-live b, .jm-server b { color: var(--text); }
.jm-live b.ok, .jm-server b.ok { color: #7ff0b0; } .jm-live b.mid { color: #ffd166; } .jm-live b.bad, .jm-server b.bad { color: #ff8da2; }
.jm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); align-items: center; }
.jm-legend i, .jm-bar i { display: inline-block; height: 10px; }
.jm-legend i { width: 10px; border-radius: 3px; margin-right: -6px; }
.jm-legend i.d, .jm-bar i.d { background: #f59e0b; } .jm-legend i.p, .jm-bar i.p { background: #8b5cf6; } .jm-legend i.t, .jm-bar i.t { background: #22d3ee; }
.jm-turns { display: grid; gap: 6px; }
.jm-turn { display: grid; grid-template-columns: 74px 1fr 52px; gap: 8px; align-items: center; font-size: 12px; }
.jm-at { color: var(--muted); font-variant-numeric: tabular-nums; }
.jm-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); }
.jm-sec { text-align: right; font-variant-numeric: tabular-nums; }
.jm-verdict { font-size: 13px; line-height: 1.45; }
.jm-verdict:empty, .jm-server:empty { display: none; }
.jm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* =================================================================== presets JSON module */
.pz-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pz-actions .inline-form { display: inline-flex; gap: 8px; }
.pz-tech { margin-left: auto; }
.pz-import { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pz-import textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; border-radius: 10px; padding: 10px; background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--line); }
.pz-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pz-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pz-table td:first-child { width: 28px; color: var(--muted); }
.pz-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.pz-badge.new { background: rgba(127,240,176,.15); color: #7ff0b0; }
.pz-badge.update { background: rgba(255,209,102,.15); color: #ffd166; }
.pz-badge.invalid { background: rgba(255,141,162,.15); color: #ff8da2; }
.pz-over { display: block; margin-top: 6px; font-size: 12px; }
.pz-err { color: #ff8da2; font-size: 12.5px; } .pz-warn { color: var(--muted); font-size: 12px; }
.pz-preset > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.pz-preset > summary::-webkit-details-marker { display: none; }
.pz-preset > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.pz-preset[open] > summary::after { transform: rotate(180deg); }
.pz-preset[open] > summary { margin-bottom: 14px; }
.pz-form textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
.pz-lyrics textarea { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pz-count { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; }
.pz-count.over { color: #ff8da2; }
.pz-lyrics > span .btn { margin-left: 8px; }
.pz-info { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pz-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 14px 0; }
.pz-variant { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.pz-vhead { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pz-vhead small { display: block; color: var(--muted); font-size: 12px; }
.pz-vicon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.pz-polished .pz-vicon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pz-vgrid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.pz-tech-name, .pz-tech-only { display: none !important; }
body.pz-show-tech .pz-tech-name { display: inline-block !important; font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.08); }
body.pz-show-tech .pz-tech-only { display: grid !important; }
.jv-monitor { background: #11152a; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="light"] .jv-monitor { background: #ffffff; }
.rb-ask-card { background: #141a2e; }
html[data-theme="light"] .rb-ask-card { background: #ffffff; }

/* =================================================================== v1.3.5 — no GPU seams
   Chrome can draw vertical seams when a fixed page background is combined with backdrop-filter on the sticky
   sidebar and on large panels (they change or vanish on scroll). The background now lives on its own fixed layer
   and the large surfaces no longer use backdrop-filter (lighter for the browser, too). */
body { background: var(--bg-2, var(--bg)); background-attachment: scroll; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 12% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 105% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  transform: translateZ(0);
}
.sidebar, .panel, .auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, #fff 6%), color-mix(in srgb, var(--bg) 92%, #fff 2%)); }

/* =================================================================== v1.3.6 workbar (project · source audio · player) */
.workbar { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.15fr) minmax(360px, 2.6fr) auto; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.wb-cell { display: grid; align-content: start; gap: 6px; padding: 10px 12px; border-radius: 16px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); }
.wb-label { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.wb-project .project-title { flex: none; }
.wb-project .project-title input { width: 100%; font-size: 17px; font-weight: 700; background: transparent; border: 0; padding: 4px 2px; color: var(--text); }
.wb-project .project-title input:focus { outline: none; box-shadow: 0 1px 0 var(--accent); }
.wb-audio .audio-card { padding: 6px 8px; gap: 10px; border: 0; background: rgba(255,255,255,.035); }
.wb-audio .audio-card b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wb-audio .audio-card > div { min-width: 0; }
.wb-audio .mini-cover { width: 34px; height: 34px; flex: 0 0 34px; }
.wb-audio details.replace { margin-top: 0; font-size: 12.5px; }
.wb-audio .dropzone .drop-face { padding: 10px; gap: 2px; min-height: 0; }
.wb-audio .dropzone .drop-face .drop-icon { width: 30px; height: 30px; }
.wb-audio .dropzone .drop-face small { font-size: 11px; }
.wb-player .player.deck.mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 4px 2px; border: 0; background: none; }
.player.deck.mini .round.big { width: 46px; height: 46px; background: linear-gradient(135deg, #c4b5fd, var(--accent) 45%, #38bdf8); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
.player.deck.mini .deck-wave { padding: 4px 6px; min-width: 0; }
.deck-side-info { display: grid; justify-items: end; gap: 4px; }
.deck-clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deck-mini-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.deck-mini-ctrl .round { width: 30px; height: 30px; }
.deck-mini-ctrl .vol { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.deck-mini-ctrl .vol input { width: 70px; accent-color: var(--accent); }
.wb-player-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 12px 4px; }
.workbar .project-actions { display: grid; align-content: center; gap: 8px; }
.side-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (max-width: 1280px) { .workbar { grid-template-columns: 1fr 1fr; } .wb-player { grid-column: 1 / -1; order: 3; } .workbar .project-actions { grid-auto-flow: column; justify-content: end; } }
@media (max-width: 720px) { .workbar { grid-template-columns: 1fr; } .deck-mini-ctrl .vol input { width: 54px; } }
.workbar { grid-template-columns: minmax(230px, 1.25fr) minmax(240px, 1.1fr) minmax(360px, 2.4fr) auto; }
.wb-project .project-title input { font-size: 16px; text-overflow: ellipsis; }
@media (max-width: 1280px) { .workbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .workbar { grid-template-columns: 1fr; } }
@media (max-width: 1280px) {
  .wb-player { grid-column: 1 / -1; order: 3; }
  .workbar .project-actions { grid-column: 1 / -1; order: 4; display: flex; justify-content: flex-end; gap: 8px; }
}
/* Compact sidebar brand (v1.3.7) */
.brand.compact { gap: 9px; padding: 0 8px 12px; }
.brand.compact .brand-mark, .brand.compact .brand-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; }
.brand.compact .brand-mark .ic { width: 17px; height: 17px; }
.brand.compact .brand-text strong { font-size: 13.5px; }
.brand.compact .brand-text small { font-size: 9.5px; letter-spacing: .14em; }
.brand.compact .brand-text em { font-size: 10.5px; margin-top: 2px; }
.sidebar .brand.compact + .nav { margin-top: 0; }

/* v1.3.8 — workbar on the same 5-column grid as the steps row; source audio + player share a tint */
.workbar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 0; }
.wb-project { grid-column: 1; }
.wb-audio { grid-column: 2; }
.wb-player { grid-column: 3 / span 3; }
.wb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.wb-actions { display: inline-flex !important; align-items: center; gap: 6px; }
.wb-actions .switcher > summary { padding: 4px 10px; font-size: 12px; border-radius: 9px; }
.wb-actions .btn.small { padding: 4px 8px; }
.wb-actions .btn.small .ic { width: 15px; height: 15px; }
/* long file names stay inside their box */
.wb-audio .audio-card { display: flex; min-width: 0; overflow: hidden; }
.wb-audio .audio-card > div { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.wb-audio .audio-card b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-audio .audio-card .ok-dot { flex: 0 0 auto; }
/* the "matrix" (source audio + player) is visibly one family */
.wb-matrix {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.wb-matrix .wb-label { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
@media (max-width: 1280px) {
  .workbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-project { grid-column: 1; } .wb-audio { grid-column: 2; } .wb-player { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .workbar { grid-template-columns: 1fr; } .wb-project, .wb-audio, .wb-player { grid-column: 1; } }

/* =================================================================== v1.3.9 compact workbar (same height as the steps row) */
.workbar .wb-cell { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; min-height: 58px; }
.wb-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.wb-ico .ic { width: 16px; height: 16px; }
.wb-ico.ok { background: linear-gradient(135deg, #34d399, #0ea5a4); }
.wb-ico.up { background: rgba(255,255,255,.08); color: color-mix(in srgb, var(--accent) 60%, #fff); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.wb-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.wb-txt b { font-size: 13.5px; }
.wb-txt small { color: var(--muted); font-size: 11.5px; }
.wb-project .project-title { display: block; margin: 0; }
.wb-project .project-title input { font-size: 13.5px; font-weight: 700; padding: 0; line-height: 1.25; height: auto; width: 100%; border-radius: 0; }
.wb-actions { margin-left: auto; flex: 0 0 auto; }
.wb-actions .switcher > summary { display: inline-flex; align-items: center; gap: 6px; }
.wb-actions .switcher > summary .ic { width: 14px; height: 14px; }
@media (max-width: 1500px) { .wb-actions .switcher > summary span { display: none; } }
.wb-link { color: color-mix(in srgb, var(--accent) 65%, #fff); font-size: 11.5px; cursor: pointer; width: fit-content; }
.wb-link:hover { text-decoration: underline; }
.wb-replace { margin: 0; }
.wb-replace .upload-progress { margin-top: 4px; }
.wb-drop { display: contents; }
.wb-drop .drop-face { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; width: 100%; }
.wb-drop > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wb-audio.drag, .wb-drop.drag { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -4px; }
.wb-player-empty { display: flex; align-items: center; gap: 10px; padding: 0; color: var(--muted); font-size: 12.5px; }
/* floating notices */
.flashes { display: none !important; }
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 400; display: grid; gap: 8px; pointer-events: none; }
.toast-item { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 380px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: #151b31; color: var(--text); border: 1px solid color-mix(in srgb, var(--ok, #34d399) 40%, var(--line)); box-shadow: 0 12px 34px rgba(0,0,0,.4);
  animation: toastIn .25s ease-out; pointer-events: auto; }
.toast-item.bad { border-color: color-mix(in srgb, #ff6b86 55%, var(--line)); }
.toast-item .ti-ico { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0b1020; background: #34d399; }
.toast-item.bad .ti-ico { background: #ff8da2; }
.toast-item.out { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
html[data-theme="light"] .toast-item { background: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast-item { animation: none; } }
.toast { display: none !important; }
/* exact height of the steps row (54 px) */
.workbar .wb-cell { box-sizing: border-box; height: 54px; min-height: 54px; padding: 0 14px; }
.wb-ico { width: 28px; height: 28px; flex-basis: 28px; }
.wb-ico .ic { width: 14px; height: 14px; }
.wb-actions .switcher > summary { height: 28px; padding: 0 9px; box-sizing: border-box; }
.wb-actions .btn.small { height: 28px; width: 30px; padding: 0; display: inline-grid; place-items: center; box-sizing: border-box; }
.wb-actions form { margin: 0; display: inline-flex; }
.player.deck.mini .round.big { width: 32px; height: 32px; flex-basis: 32px; }
.player.deck.mini .deck-wave { height: 32px; box-sizing: border-box; }
.wb-replace .upload-progress, .wb-drop .upload-progress { margin: 0; }
.wb-actions .switcher > summary { width: 30px; padding: 0; justify-content: center; }
.wb-txt b, .wb-txt small, .wb-project .project-title input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =================================================================== v1.4.0 notices in JARVIS style */
.toast-stack { width: max-content; max-width: min(380px, calc(100vw - 24px)); }
.toast-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 14px; min-width: 240px;
  border: 1px solid transparent;
  background: linear-gradient(#10152b, #10152b) padding-box, linear-gradient(135deg, #8a5cff, #4f7dff 50%, #3fe0f0) border-box;
  box-shadow: 0 0 0 1px rgba(63,224,240,.06), 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(79,125,255,.28);
}
.toast-item.bad { background: linear-gradient(#10152b, #10152b) padding-box, linear-gradient(135deg, #ff5f7e, #ff8a5c) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(255,95,126,.25); }
.ti-av { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; }
.ti-av svg { width: 34px; height: 34px; overflow: visible; }
.ti-hex { fill: #141a44; stroke: url(#hexg) #6d7dff; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(63,224,240,.55)); }
.ti-visor { fill: #070b1f; }
.ti-eye { fill: #3fe0f0; filter: drop-shadow(0 0 3px #3fe0f0); animation: tiBlink 3.6s infinite; transform-origin: center; transform-box: fill-box; }
.toast-item.bad .ti-hex { stroke: #ff5f7e; filter: drop-shadow(0 0 4px rgba(255,95,126,.55)); }
.toast-item.bad .ti-eye { fill: #ff8da2; filter: drop-shadow(0 0 3px #ff5f7e); }
@keyframes tiBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
.ti-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.ti-body b { font-size: 10px; letter-spacing: .22em; color: #8fe9f5; }
.toast-item.bad .ti-body b { color: #ffb3c1; }
.ti-msg { font-size: 13px; color: #eef1ff; }
.ti-mark { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #07101f;
  background: linear-gradient(135deg, #3fe0f0, #4f7dff); }
.toast-item.bad .ti-mark { background: #ff8da2; }
.toast-item .ti-ico { display: none; }
/* tip pointing at JARVIS */
.toast-stack.from-dock .toast-item:first-child { position: relative; }
.toast-stack.from-dock .toast-item:first-child::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  transform: rotate(45deg); background: #10152b; border-left: 1px solid #8a5cff; border-bottom: 1px solid #8a5cff; }
.toast-stack.tail-right .toast-item:first-child::before { left: auto; right: -7px; border: 0; border-right: 1px solid #3fe0f0; border-top: 1px solid #3fe0f0; }
.toast-stack.from-dock .toast-item.bad:first-child::before { border-color: #ff5f7e; }
html[data-theme="light"] .toast-item { background: linear-gradient(#10152b, #10152b) padding-box, linear-gradient(135deg, #8a5cff, #4f7dff 50%, #3fe0f0) border-box; }
@media (prefers-reduced-motion: reduce) { .ti-eye { animation: none; } }

/* =================================================================== v1.4.1 workbar: breathing room + balanced columns */
.workbar { margin-top: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 2.1fr); gap: 12px; }
.wb-project, .wb-audio, .wb-player { grid-column: auto; }
.workbar .wb-cell { height: 62px; min-height: 62px; padding: 0 16px; gap: 12px; }
.wb-ico { width: 32px; height: 32px; flex-basis: 32px; }
.wb-ico .ic { width: 15px; height: 15px; }
.wb-txt b, .wb-project .project-title input { font-size: 14px; }
.wb-txt small, .wb-link { font-size: 12px; }
.player.deck.mini .round.big { width: 36px; height: 36px; flex-basis: 36px; }
.player.deck.mini .deck-wave { height: 36px; max-width: 520px; }
.player.deck.mini .vol input { width: 84px; }
@media (max-width: 1280px) {
  .workbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-player { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .workbar { grid-template-columns: 1fr; } .wb-player { grid-column: 1; } }

/* =================================================================== v1.4.2 equal thirds + animated spectrum */
.workbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .workbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wb-player { grid-column: 1 / -1; } }
@media (max-width: 720px) { .workbar { grid-template-columns: 1fr; } .wb-player { grid-column: 1; } }
/* At rest the bar is just the waveform: no box, no border. The frame and the glow only appear
   while it plays, which is when they mean something. */
.player.deck.mini .deck-wave { position: relative; overflow: hidden; max-width: none;
  background: transparent; border-color: transparent; }
.player.deck.mini .deck-wave .spectrum { position: absolute; inset: 0; width: auto; height: auto; z-index: 2; opacity: 0; transition: opacity .35s; mix-blend-mode: screen; pointer-events: none; }
.player.deck.mini .deck-wave .wave { position: relative; z-index: 1; transition: opacity .35s; }
/* playing: the live spectrum takes over, the waveform stays underneath as the progress guide */
.deck.spinning .deck-wave .spectrum { opacity: .95; }
.deck.spinning .deck-wave .wave { opacity: .45; }
.deck.spinning .deck-wave { border-color: color-mix(in srgb, #3fe0f0 45%, transparent); box-shadow: 0 0 16px rgba(79,125,255,.25), inset 0 0 12px rgba(63,224,240,.10); }
.deck.spinning .round.big { animation: playPulse 1.6s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,224,240,.35), 0 6px 16px rgba(79,125,255,.35); } 50% { box-shadow: 0 0 0 7px rgba(63,224,240,0), 0 6px 16px rgba(79,125,255,.35); } }
/* paused: a soft light keeps sweeping across the wave so the bar never looks dead */
.player.deck.mini .deck-wave::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 44%, rgba(138,92,255,.10) 50%, transparent 56%);
  background-size: 250% 100%; animation: waveSweep 4.6s ease-in-out infinite; }
.deck.spinning .deck-wave::after { animation: none; opacity: 0; }
@keyframes waveSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .player.deck.mini .deck-wave::after, .deck.spinning .round.big { animation: none; } }
/* same base selector as the paused rules, so "playing" wins (specificity fix) */
.player.deck.mini.spinning .deck-wave .spectrum { opacity: .95; }
.player.deck.mini.spinning .deck-wave .wave { opacity: .45; }
.player.deck.mini.spinning .deck-wave { background: transparent; border-color: transparent; box-shadow: none; }
.player.deck.mini.spinning { border-color: color-mix(in srgb, #3fe0f0 45%, transparent); box-shadow: 0 0 22px rgba(79,125,255,.22); }
.player.deck.mini.spinning .deck-wave::after { animation: none; opacity: 0; }
.player.deck.mini.spinning .round.big { animation: playPulse 1.6s ease-in-out infinite; }
.recent-projects { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.recent-projects small { width: 100%; text-align: center; color: var(--muted); }
.recent-projects a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; font-size: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); max-width: 220px; }
.recent-projects a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-projects a .ic { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.recent-projects a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* v1.4.4 — "Subir matriz" in the workbar: one compact row (icon + text), no inner box, fits the 62 px bar */
.workbar .wb-audio form.dropzone.wb-drop { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; min-width: 0; }
.workbar .wb-audio .dropzone.wb-drop label.drop-face {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 12px;
  min-height: 0; height: auto; width: 100%; padding: 0; margin: 0; border: 0; background: none; border-radius: 0; cursor: pointer;
}
.workbar .wb-audio .dropzone.wb-drop label.drop-face .wb-ico { margin: 0; }
.workbar .wb-audio .dropzone.wb-drop label.drop-face .ic { width: 15px; height: 15px; margin: 0; color: inherit; }
.workbar .wb-audio .dropzone.wb-drop label.drop-face .wb-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.workbar .wb-audio .dropzone.wb-drop label.drop-face b { font-size: 14px; color: var(--text); }
.workbar .wb-audio .dropzone.wb-drop label.drop-face small { margin: 0; opacity: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.workbar .wb-audio .dropzone.wb-drop label.drop-face:hover b { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.workbar .wb-audio .dropzone.wb-drop.drag label.drop-face, .workbar .wb-audio .dropzone.wb-drop label.drop-face:hover { background: none; }
.workbar .wb-audio:has(.dropzone.drag) { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -4px; }
.workbar .wb-audio .dropzone.wb-drop .upload-progress { width: 100%; }

/* v1.4.6 — notices spoken inside Pablito's card (the line under his name), not over the page */
.jv-tag { transition: color .25s; min-height: 1.3em; }
.jv-tag.say-ok, .jv-tag.say-bad { display: block; font-weight: 600; line-height: 1.3; padding: 0 6px; animation: tagIn .3s ease-out; }
.jv-tag.say-ok { color: #8fe9f5; text-shadow: 0 0 10px rgba(63,224,240,.45); }
.jv-tag.say-bad { color: #ffb3c1; text-shadow: 0 0 10px rgba(255,95,126,.35); }
@keyframes tagIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jv-tag.say-ok, .jv-tag.say-bad { animation: none; } }
/* fallback when his card is not visible: small, bottom right, away from the content */
.toast-stack { top: auto !important; left: auto !important; right: 18px !important; bottom: 18px; }
.toast-stack .toast-item::before { display: none !important; }
.ab-alt { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
/* The label grows when alternating is on: never let it wrap and clip itself inside the button. */
.ab-alt .btn { white-space: nowrap; flex: 0 0 auto; }
.ab-alt select { flex: 0 0 auto; }
.ab-alt .btn.on { border-color: #3fe0f0; color: #8fe9f5; box-shadow: 0 0 0 3px rgba(63,224,240,.14); }
.ab-alt select { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 0 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =================================================================== v1.4.8 phones */
@media (max-width: 720px) {
  .workbar { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; margin-top: 14px; }
  .workbar .wb-cell { height: auto !important; min-height: 58px; padding: 10px 14px !important; }
  .wb-project, .wb-audio, .wb-player { grid-column: 1 !important; }
  .wb-player .player.deck.mini { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; }
  .player.deck.mini .deck-wave { flex: 1 1 auto; min-width: 120px; height: 36px; }
  .player.deck.mini .vol { display: none !important; }          /* phones use their own volume buttons */
  .player.deck.mini .deck-clock { font-size: 11.5px; flex: 0 0 auto; }
  .player.deck.mini .round.big { width: 40px; height: 40px; flex: 0 0 40px; }  /* comfortable touch target */
  /* forms never wider than the screen */
  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .field, .field input, .field select, .field textarea, select { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .provider-card, .panel { min-width: 0; max-width: 100%; }
  .lab-models, .lab-voices { grid-template-columns: minmax(0, 1fr) !important; }
  .ab-alt { margin-left: 0; margin-top: 6px; }
}
/* the waveform never gets zero width (the waveform library fails to draw then) */
.player.deck.mini .deck-wave { min-width: 90px; }
/* the old small-screen rule (.player { flex-direction: column }) must not stack the compact workbar player */
.wb-player .player.deck.mini { flex-direction: row !important; align-items: center !important; justify-content: flex-start; }

/* =================================================================== v1.5.0 presets by family */
.preset-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.preset-search { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.preset-search svg { width: 16px; height: 16px; opacity: .6; flex: 0 0 16px; }
.preset-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 13.5px; }
.preset-tools .chip { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.preset-tools .chip.on { border-color: #3fe0f0; color: #8fe9f5; box-shadow: 0 0 0 3px rgba(63,224,240,.13); }

.family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.family { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.family:hover { transform: translateY(-2px); border-color: var(--fam, #7c5cff); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.family .art { display: block; height: 96px; background-size: cover; background-position: center;
  background-color: var(--fam, #7c5cff);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--fam, #7c5cff) 85%, #000) 0%, color-mix(in srgb, var(--fam, #7c5cff) 45%, #0b0f1f) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 10px, rgba(255,255,255,0) 10px 26px); }
.family b { padding: 0 14px; font-size: 14.5px; }
.family small { padding: 0 14px; font-size: 11.5px; color: var(--muted); }

.family-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.family-head b { font-size: 15px; }

.preset[data-family] .art { background-color: var(--fam, #7c5cff);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--fam, #7c5cff) 80%, #000) 0%, color-mix(in srgb, var(--fam, #7c5cff) 40%, #0b0f1f) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 8px, rgba(255,255,255,0) 8px 22px); }
.preset .fav { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: rgba(255,255,255,.45); background: rgba(6,10,26,.45); cursor: pointer; transition: color .15s, transform .15s; }
.preset .fav:hover { transform: scale(1.12); color: #ffd76a; }
.preset.faved .fav { color: #ffd76a; }
.preset .fam-tag { display: block; padding: 0 12px 2px; font-size: 11px; color: var(--muted); }
.preset-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 22px 0; }
@media (max-width: 720px) { .family-grid { grid-template-columns: repeat(2, 1fr); } .family .art { height: 76px; } }
/* each character gets its own shade and pattern angle, so a family is not 15 identical cards */
.preset[data-family] .art { filter: hue-rotate(calc((var(--i, 0) - 6) * 2deg)) brightness(calc(90% + var(--i, 0) * 2%)); }
.preset[data-family]:nth-child(even) .art { background-position: 12px 0; }
.family-browsing .preset .fam-tag { display: none; }    /* inside a family the genre is already in the header */
/* families panel (Settings → Presets) */
.pz-families .fam-form { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.fam-row { display: grid; grid-template-columns: 56px minmax(120px,1.2fr) minmax(100px,1fr) minmax(100px,1fr) 78px 80px auto auto auto; gap: 10px; align-items: end; padding: 10px; border-radius: 12px; background: var(--panel-2, rgba(255,255,255,.02)); border: 1px solid var(--line); }
.fam-art { width: 56px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--fam, #7c5cff);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--fam,#7c5cff) 85%, #000), color-mix(in srgb, var(--fam,#7c5cff) 45%, #0b0f1f)), repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 8px, rgba(255,255,255,0) 8px 20px); }
.fam-art[data-has-image] { background-image: var(--img); }
.fam-color input[type=color] { width: 100%; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.fam-order input { width: 100%; }
@media (max-width: 900px) { .fam-row { grid-template-columns: 56px 1fr 1fr; } }

/* Knowledge base health (Configuración → Conocimiento) */
.kb-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.kb-stat { flex: 1 1 96px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.kb-stat b { display: block; font-size: 20px; line-height: 1.2; }
.kb-stat small { color: var(--muted); font-size: 11px; }
.kb-stat.bad { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.kb-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; margin: 6px 0 10px; }
.kb-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.kb-bar i.over { background: var(--warn); }
.kb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kb-purge { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.kb-purge input { max-width: 160px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 13px; }
.kb-purge input:focus { outline: none; border-color: var(--bad); }
.kb-purge input::placeholder { color: var(--muted); }
.kb-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 4px; }
@media (max-width: 640px) { .kb-purge { margin-left: 0; width: 100%; } .kb-purge input { flex: 1; max-width: none; } }

/* Google Drive setup steps */
.drive-steps { margin: 6px 0 12px 18px; padding: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.drive-steps li { margin-bottom: 4px; }
.drive-steps b, .drive-steps strong { color: var(--text); }

/* Matrix library picker */
.lib-open { display: inline-flex; align-items: center; gap: 6px; }
.lib-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 5, 14, .72); backdrop-filter: blur(3px); }
.lib-modal[hidden] { display: none; }
.lib-box { width: min(620px, 100%); max-height: 82vh; display: flex; flex-direction: column;
  padding: 18px; border-radius: 18px; background: var(--panel, #141a2e);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
/* Aviso dentro de la ventana donde ocurrió la acción. Mismos tokens que el resto del sistema:
   morado para lo que salió bien, rojo para lo que no se pudo hacer. */
.rb-note { margin: 0 0 12px; padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px;
  line-height: 1.45; border: 1px solid var(--line); animation: fadeIn .15s ease-out; }
.rb-note.ok { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rb-note.bad { color: var(--text); border-color: color-mix(in srgb, var(--bad) 50%, transparent);
  background: color-mix(in srgb, var(--bad) 12%, transparent); }

.lib-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lib-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.lib-head .round { margin-left: auto; width: 30px; height: 30px; font-size: 18px; line-height: 1; }
.lib-search { margin-bottom: 10px; }
.lib-list { overflow: auto; display: grid; gap: 6px; padding-right: 4px; }
.lib-item { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.035); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s; }
.lib-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lib-item.on { border-color: var(--ok); }
.lib-item[hidden] { display: none; }
/* La fila: la matriz ocupa todo y el lápiz va al lado, con los tokens de siempre. */
/* Pista cuyo audio caducó: la ficha se queda para saber qué hubo, sin reproductor roto. */
.r-expired { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 2px;
  color: var(--muted); font-size: 13px; font-style: italic; }

/* Aviso de caducidad, suave: informa sin asustar, y se pone ámbar cuando de verdad urge.
   Usa los tokens del sistema, nada de colores sueltos. */
/* Aviso de caducidad: tiene que LEERSE como alerta, no confundirse con el resto de la interfaz.
   Ámbar de serie y rojo cuando quedan tres días o menos. */
.expiry { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--text); font-size: 13.5px; line-height: 1.45; }
.expiry .ic { color: var(--warn); flex: 0 0 auto; }
.expiry.soon { border-color: color-mix(in srgb, var(--bad) 60%, transparent);
  background: color-mix(in srgb, var(--bad) 14%, transparent); }
.expiry.soon .ic { color: var(--bad); }

.lib-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; min-width: 0; }
.lib-row[hidden] { display: none; }
.lib-row .lib-item { width: 100%; }
.lib-rename { flex: 0 0 auto; opacity: .55; transition: opacity .15s, color .15s; }
/* Escuchar antes de elegir: el play se ve siempre, porque es la acción que más se usa,
   mientras que renombrar y borrar aparecen al pasar por encima. */
.lib-play { flex: 0 0 auto; opacity: .8; transition: opacity .15s, color .15s; }
.lib-row:hover .lib-play, .lib-play:focus-visible { opacity: 1; color: var(--accent); }
.lib-play.on { color: var(--accent); opacity: 1; }
.lib-del { flex: 0 0 auto; opacity: .45; transition: opacity .15s, color .15s; }
.lib-row:hover .lib-rename, .lib-rename:focus-visible { opacity: 1; color: var(--accent); }
.lib-row:hover .lib-del, .lib-del:focus-visible { opacity: 1; color: var(--bad); }
.lib-item:disabled { opacity: .55; cursor: progress; }
.lib-item .li-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.lib-item .li-ico .ic { width: 17px; height: 17px; }
.lib-item .li-main { display: grid; gap: 2px; min-width: 0; }
.lib-item .li-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item .li-main small { color: var(--muted); font-size: 11.5px; }
body.lib-open { overflow: hidden; }

/* =================================================================== v1.7.6 matrix player
   One rounded pill holding the play button, the wave and — stacked on the right — volume over time.
   The bars belong to playback: stopped, the track is empty and quiet, and they only appear while the
   audio is actually running. This block is last on purpose, so the older .player.deck.mini rules from
   v1.3.9 / v1.4.1 / v1.4.2 / v1.4.8 cannot shrink it back. */
.workbar .wb-cell.wb-player { padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
.wb-player .player.deck.mini {
  display: flex; align-items: center; gap: 14px;
  width: 100%; height: 100%; min-height: 62px; box-sizing: border-box;
  padding: 5px 18px 5px 5px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(4,6,16,.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.26);
}
.wb-player .player.deck.mini .round.big {
  width: 50px; height: 50px; flex: 0 0 50px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(140deg, #8b7bff, var(--accent) 45%, #38bdf8);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.wb-player .player.deck.mini .round.big svg { width: 18px; height: 18px; fill: #fff; }
/* the empty track: a quiet inset channel, which is all that shows when nothing is playing */
.wb-player .player.deck.mini .deck-wave {
  position: relative; flex: 1 1 auto; min-width: 90px; max-width: none; height: 40px;
  padding: 0; box-sizing: border-box; display: flex; align-items: center; overflow: hidden;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(4,6,16,.34), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
/* the bars live with playback: hidden while stopped, faded in when the audio runs */
.wb-player .player.deck.mini .deck-wave .wave {
  width: 100%; opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.wb-player .player.deck.mini.spinning .deck-wave .wave { opacity: 1; pointer-events: auto; }
.wb-player .player.deck.mini .deck-wave .spectrum { position: absolute; inset: 0; width: auto; height: auto;
  z-index: 2; opacity: 0; transition: opacity .28s ease; mix-blend-mode: screen; pointer-events: none; }
.wb-player .player.deck.mini.spinning .deck-wave .spectrum { opacity: .95; }
.wb-player .player.deck.mini.spinning .deck-wave .wave { opacity: .5; }
.wb-player .player.deck.mini .deck-wave::after { content: none; }   /* no sweeping light on an empty track */
/* volume on top, clock underneath */
.wb-player .player.deck.mini .deck-side {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.wb-player .player.deck.mini .vol { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.wb-player .player.deck.mini .vol .ic { width: 16px; height: 16px; }
.wb-player .player.deck.mini .vol input { width: 92px; accent-color: var(--accent); }
.wb-player .player.deck.mini .deck-clock {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
.wb-player .player.deck.mini .deck-clock i { font-style: normal; font-weight: 400; opacity: .4; }
.wb-player .player.deck.mini.spinning { border-color: color-mix(in srgb, #3fe0f0 48%, transparent); box-shadow: 0 0 24px rgba(79,125,255,.24); }
.wb-player .player.deck.mini.spinning .deck-wave { background: rgba(4,6,16,.30); border-color: transparent; box-shadow: none; }
@media (max-width: 1280px) { .wb-player .player.deck.mini .vol input { width: 78px; } }
@media (max-width: 860px) {
  .wb-player .player.deck.mini { gap: 11px; padding: 5px 14px 5px 5px; }
  .wb-player .player.deck.mini .round.big { width: 44px; height: 44px; flex-basis: 44px; }
  .wb-player .player.deck.mini .deck-wave { height: 34px; }
  .wb-player .player.deck.mini .vol { display: none; }
  .wb-player .player.deck.mini .deck-clock { font-size: 12px; }
}
/* with no matrix loaded the cell is empty, so the placeholder wears the same pill */
.workbar .wb-cell.wb-player .wb-player-empty {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 62px; box-sizing: border-box;
  padding: 0 18px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
  background: rgba(255,255,255,.015); color: var(--muted); font-size: 12.5px;
}
.lib-empty { margin: 14px 0 4px; text-align: center; color: var(--muted); font-size: 13px; }
.lib-empty[hidden] { display: none; }
/* .wb-link was written for <a> and <label>; as a <button> the browser adds its own chrome
   (grey face, border, system font), so it is stripped here to keep the system's look. */
button.wb-link { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12px; text-align: left;
  color: color-mix(in srgb, var(--accent) 65%, #fff); display: inline-flex; align-items: center; gap: 6px; }
button.wb-link .ic { width: 13px; height: 13px; }
button.wb-link:hover { text-decoration: underline; }
.lab-warn { margin: 0 0 12px; }

/* =================================================================== v1.7.6 matrix: one control, three ways in */
.wb-matrix .matrix-menu { margin-left: auto; flex: 0 0 auto; }
.wb-matrix .matrix-menu > summary {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 13px; border-radius: 11px; font-size: 12.5px; font-weight: 600; color: var(--text);
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; list-style: none;
  transition: border-color .15s, background .15s;
}
.wb-matrix .matrix-menu > summary::-webkit-details-marker { display: none; }
.wb-matrix .matrix-menu > summary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.wb-matrix .matrix-menu[open] > summary { border-color: var(--accent); }
.wb-matrix .matrix-menu > summary .ic { width: 14px; height: 14px; }
.wb-matrix .matrix-menu .switcher-menu { min-width: 288px; top: 44px; }
/* each way in reads the same: icon, name, one line saying what it does */
.mx-opt {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; width: 100%;
  padding: 10px 11px; border-radius: 10px; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.mx-opt:hover { background: rgba(255, 255, 255, .07); }
.mx-opt .mx-ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.mx-opt .mx-ico.rec { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.mx-opt .mx-ico .ic { width: 16px; height: 16px; }
.mx-opt .mx-txt { display: grid; gap: 1px; min-width: 0; }
.mx-opt .mx-txt b { font-size: 13.5px; font-weight: 600; }
.mx-opt .mx-txt small { color: var(--muted); font-size: 11.5px; }
.wb-matrix .matrix-menu .upload-progress { padding: 0 11px 8px; }
.wb-matrix .wb-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Recording a matrix from the microphone */
.rec-box { width: min(440px, 100%); }
.rec-stage { display: grid; gap: 14px; justify-items: center; padding: 6px 0 2px; }
.rec-wave { width: 100%; height: 64px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(4,6,16,.34), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.rec-wave canvas { display: block; width: 100%; height: 100%; }
.rec-clock { font-size: 30px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.rec-hint { color: var(--muted); font-size: 12.5px; text-align: center; margin: 0; }
.rec-btn {
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  font: inherit;                                   /* it is a <button>: never the browser's own font */
  background: linear-gradient(140deg, #ff7a8f, var(--bad) 60%); color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bad) 42%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.rec-btn:hover { transform: scale(1.04); }
.rec-btn .ic { width: 26px; height: 26px; }
.rec-btn.on { background: linear-gradient(140deg, #8b7bff, var(--accent) 45%, #38bdf8);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); animation: recPulse 1.7s ease-out infinite; }
@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); }
  100% { box-shadow: 0 0 0 20px transparent; }
}
@media (prefers-reduced-motion: reduce) { .rec-btn.on { animation: none; } }
.rec-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rec-review { display: grid; gap: 12px; justify-items: center; width: 100%; }
.rec-review audio { width: 100%; }

/* =================================================================== v1.7.7 tidy-ups from the screenshots */
/* "Alternar" is its own group now, next to the A/B pill instead of folded inside it */
.ab-switch { flex-wrap: nowrap; }
.ab-alt { margin-left: 0; }
.ab-transport .ab-alt { flex: 0 0 auto; }

/* The library search was a full-height field; a search box should read as a search box and stay small. */
.lib-search.preset-search { height: 34px; padding: 0 10px; gap: 7px; flex: 0 0 auto; margin-bottom: 12px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: rgba(255,255,255,.04); }
.lib-search.preset-search svg { width: 14px; height: 14px; opacity: .75; flex-basis: 14px; }
.lib-search.preset-search input { font-size: 12.5px; }
.lib-search.preset-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* The recording preview used the browser's own <audio controls>: a white bar dropped into a dark panel.
   It is the system player now, the same shape as the matrix one. */
.rec-player { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(4,6,16,.34)); }
.rec-player .round.big { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font: inherit;
  background: linear-gradient(140deg, #8b7bff, var(--accent) 45%, #38bdf8);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.rec-player .round.big svg { width: 16px; height: 16px; fill: #fff; }
.rec-player .rp-track { flex: 1 1 auto; height: 8px; border-radius: 99px; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.1); }
.rec-player .rp-fill { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rec-player .rp-time { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; }

/* =================================================================== v1.7.8 the dock shows Pablito, nothing else
   Time, cost, cache and latency used to live under his name. They are now one tap away, in the details
   panel, behind this button. Corner buttons are placed from the right: 10 clock · 44 CC · 88 eye · 122 this.
   In a 238 px sidebar the leftmost of them still clears the × on the other side. */
.jv-corner.jv-mon { right: 122px; opacity: .5; }
.jv-corner.jv-mon:hover, .jv-corner.jv-mon.on { opacity: 1; border-color: #8a7bff; background: rgba(138,123,255,.25); }
.jv-dock.mini .jv-mon { display: none; }