/* Studio Design System — tokens + componentes. Pega este archivo en tu proyecto y enlázalo. */
/* ==========================================================================
   TOKENS — copia este bloque tal cual a tu CSS. Es la fuente de verdad.
   Un solo tema oscuro, un solo acento.
   ========================================================================== */
:root{
  /* Superficies */
  --page:#050505; --panel:#111111; --input:#1a1a1a; --stage:#050505;
  /* Texto */
  --text:#f2f2f2; --text2:rgba(255,255,255,.52); --text-disabled:rgba(255,255,255,.28);
  /* Bordes */
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  /* Interacción */
  --hover:rgba(255,255,255,.05); --active:rgba(255,255,255,.10); --focus-ring:rgba(255,255,255,.70);
  /* Acento */
  --accent:#9890fd; --on-accent:#0a0a0a;
  /* Estados */
  --warn:#f2c230; --rec:#e8451e;
  /* Layout */
  --edge:32px; --edge-x:40px; --header-h:64px; --sidebar-w:320px; --ui-gap:12px;
  /* Radios */
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  /* Tipo */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Sombras */
  --shadow-popover:0 8px 32px rgba(0,0,0,.5);
  --shadow-canvas:0 24px 48px -12px rgba(0,0,0,.6);
  /* Movimiento */
  --ease-out:cubic-bezier(.16,1,.3,1);

  color-scheme:dark;
  font-family:var(--font-sans); font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--text)}
button,input,textarea,select{font:inherit;color:inherit}
button{user-select:none;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}

/* ==========================================================================
   COMPONENTES — mismas clases que usa el proyecto original
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;height:32px;padding:0 12px;
  border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--text);
  transition:background-color 120ms ease,border-color 120ms ease}
.btn:hover:not(:disabled){border-color:var(--border-strong);background:var(--hover)}
.btn:disabled{color:var(--text-disabled);cursor:default}
.btn.on,.btn[aria-expanded="true"]{border-color:var(--border-strong);background:var(--input)}
.btn.icon{width:32px;padding:0}
.export-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius);
  height:48px;padding:0 16px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:650;letter-spacing:.01em}
.export-btn:hover{filter:brightness(1.06)} .export-btn:active{filter:brightness(.96)}
.export-btn.sm{height:32px}
.tool-btn{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;border-radius:var(--radius-lg);
  background:var(--panel);color:var(--text);font-size:13px;font-weight:500}
.tool-btn:hover{background:#181818}

.float-card{border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--panel)}
.panel-head{border-bottom:1px solid var(--border);padding:12px 16px}
.panel-title{font-size:14px;font-weight:600;line-height:1.25}
.panel-sub{font-size:12px;color:var(--text2);margin-top:2px}
.panel-body{padding:24px 16px 16px;display:flex;flex-direction:column;gap:16px}

.tabs{display:flex;border-radius:11px;overflow:hidden}
.tab{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;
  padding:16px 0;color:var(--text2);transition:color 120ms ease}
.tab:hover,.tab.active{color:var(--text)}
.tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.step{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:600;background:rgba(255,255,255,.1);color:var(--text2)}
.tab.active .step{background:var(--accent);color:var(--on-accent)}

.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--text2)}
.label output,.label .meta{color:var(--text-disabled);font-variant-numeric:tabular-nums}
.group-title{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text2)}

.option-grid{display:grid;gap:8px}
.cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.opt{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--input);color:var(--text2);cursor:pointer;
  transition:color 120ms ease,border-color 120ms ease,background-color 120ms ease}
.opt:hover{color:var(--text)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt:has(input:checked){border-color:var(--accent);background:var(--panel);color:var(--text)}
.opt:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.swatch{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px var(--border-strong)}

.dd-trigger{width:100%;justify-content:space-between;height:32px;border-radius:var(--radius);background:var(--input)}
.text-field{width:100%;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  padding:8px 12px;font-size:14px;line-height:1.5;outline:none;transition:background-color 100ms ease}
.text-field:hover{background:rgba(255,255,255,.04)} .text-field:focus{background:rgba(255,255,255,.06)}
.text-field::placeholder{color:var(--text-disabled)}

input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:16px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--text) var(--p,0%),var(--border-strong) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border:0;border-radius:50%;background:#fff}
input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:var(--border-strong)}
input[type=range]::-moz-range-progress{height:2px;border-radius:2px;background:var(--text)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

.switch{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch-ui{position:absolute;inset:0;border-radius:10px;background:var(--input);border:1px solid var(--border-strong);transition:background-color 140ms ease,border-color 140ms ease;pointer-events:none}
.switch-ui::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text2);transition:transform 140ms ease,background-color 140ms ease}
.switch input:checked + .switch-ui{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .switch-ui::after{transform:translateX(16px);background:#fff}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--focus-ring);outline-offset:2px}
.toggle-row{display:flex;align-items:center;justify-content:space-between}

.color-field{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--input);color:var(--text2);font-size:13px;cursor:pointer}
.color-field:hover{color:var(--text)}
.color-field input{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;flex:none}
.color-field input::-webkit-color-swatch-wrapper{padding:0}
.color-field input::-webkit-color-swatch{border:0;border-radius:50%;box-shadow:0 0 0 1px var(--border-strong)}

.menu{min-width:240px;padding:8px;border-radius:var(--radius-lg);border:1px solid var(--border-strong);background:var(--panel);box-shadow:var(--shadow-popover)}
.menu-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:32px;padding:0 12px;border:0;border-radius:var(--radius);background:none;color:var(--text);text-align:left}
.menu-opt:hover{background:var(--hover)}
.menu-opt[aria-selected="true"]{background:var(--input)}
.menu-opt[aria-selected="true"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
.menu-opt .hint{color:var(--text2);font-variant-numeric:tabular-nums}

.toast{display:inline-block;padding:8px 8px 8px 16px;border-radius:12px;border:1px solid var(--border-strong);background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:14px}
.export-hint{font-size:12px;color:var(--text2)} .export-hint.warn{color:var(--warn)}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);animation:rec-blink 1s steps(2,start) infinite}
@keyframes rec-blink{to{visibility:hidden}}
.progress{position:relative;overflow:hidden;isolation:isolate;width:100%;background:var(--input);box-shadow:inset 0 0 0 1px var(--border-strong)}
.progress::before{content:'';position:absolute;inset:0;z-index:-1;width:var(--progress,40%);background:rgba(152,144,253,.22)}

.lib-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);margin-bottom:6px;background:var(--input);
  box-shadow:0 0 0 1px var(--border);transition:box-shadow 120ms ease,transform 160ms var(--ease-out)}
.lib-card{display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:none;color:var(--text);text-align:left}
.lib-card:hover .lib-thumb{box-shadow:0 0 0 1px var(--border-strong);transform:translateY(-1px)}
.lib-card[aria-selected="true"] .lib-thumb{box-shadow:0 0 0 2px var(--accent)}
.lib-name{font-size:12px;font-weight:500;padding:0 2px} .lib-hint{font-size:11px;color:var(--text2);padding:0 2px}

.board-grid{background-color:var(--stage);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px}