/* ==========================================================================
   QRPro Cloud · Generador QR — hoja de estilos aislada (fase F09-r1)
   --------------------------------------------------------------------------
   ALCANCE   : solo el generador. La raíz de todo es el id de contrato
               `#workbench` (ESPEC.md#INTERFACES). Cada selector de este
               archivo contiene `#workbench`: cero reglas globales de
               elemento (ni body, ni header, ni h1, ni .site-header) y cero
               fugas hacia la landing de QRPro Cloud.
   CLASES    : todo nombre de clase va con el prefijo `gen-` para que los
               estilos de la landing (p. ej. .card, .btn, .hint) no colisionen
               con el generador cuando se fusiona arriba del pliegue.
               MAPA DE CLASES que debe usar la maqueta:
                 gen-intro, gen-eyebrow, gen-workspace, gen-card, gen-step,
                 gen-hint, gen-design-grid, gen-check, gen-data-panel,
                 gen-logo-upload, gen-logo-info, gen-error, gen-preview-card,
                 gen-preview-header, gen-privacy-dot, gen-preview-frame,
                 gen-empty-preview, gen-exports, gen-footer, gen-sr-only,
                 gen-btn-primary, gen-btn-secondary, gen-btn-text
               Los ids del contrato se aceptan como anclas equivalentes
               (generate, downloadPng, downloadSvg, removeLogo, preview,
               error, status, metadata, encodedPayload, logoName) para que el
               diseño funcione aunque la maqueta aún no lleve las clases.
   RTL       : propiedades lógicas (margin-inline / padding-inline /
               border-inline / text-align:start) + ajustes explícitos bajo
               `[dir="rtl"]`. Sin desbordes a 390 px.
   MARCA     : paleta y tipografía de QRPro Cloud (DM Sans + Manrope),
               definida como tokens propios bajo `#workbench` (no se toca
               :root de la landing). Sin CDN ni recursos externos.
   ACCESO   : foco visible, objetivos táctiles, contraste WCAG AA en textos
               y botones, `prefers-reduced-motion` respetado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Raíz aislada del generador y tokens de marca (scoped)
   -------------------------------------------------------------------------- */
#workbench {
  color-scheme: light;

  /* Identidad QRPro Cloud (valores propios del generador, no globales) */
  --gen-ink: #172636;
  --gen-muted: #546575;
  --gen-paper: #f5f4ef;
  --gen-surface: #ffffff;
  --gen-line: #dfe3e0;
  --gen-field-line: #808a95;
  --gen-blue: #344fe0;
  --gen-blue-dark: #2637b4;
  --gen-blue-tint: #eaeeff;
  --gen-lime: #d7ed88;
  --gen-ok-ink: #236747;
  --gen-ok-bg: #e7f3ec;
  --gen-danger-ink: #9b293d;
  --gen-danger-bg: #fdeef0;
  --gen-danger-line: #f0c3cd;
  --gen-radius-card: 16px;
  --gen-radius-ctl: 10px;
  --gen-shadow: 0 18px 46px rgba(23, 38, 54, 0.1);

  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gen-ink);
  background: var(--gen-paper);
  max-width: 1180px;
  margin-inline: auto;
  padding: 18px clamp(16px, 2.4vw, 28px) 40px;
  min-width: 0;
}

#workbench *,
#workbench *::before,
#workbench *::after {
  box-sizing: border-box;
}

#workbench [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2 · Tipografía del generador
   -------------------------------------------------------------------------- */
#workbench h1 {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 4px 0 8px;
  color: var(--gen-ink);
}

#workbench h2 {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gen-ink);
}

#workbench .gen-intro {
  max-width: 62ch;
  padding: 2px 0 14px;
}

#workbench .gen-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gen-blue-dark);
  margin: 0;
}

#workbench .gen-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gen-blue);
  flex-shrink: 0;
}

#workbench .gen-intro > p:last-child {
  color: var(--gen-muted);
  margin: 0;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   3 · Estructura: tarjetas, retículas, pasos
   -------------------------------------------------------------------------- */
#workbench .gen-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

#workbench .gen-card {
  container-type: inline-size;
  background: var(--gen-surface);
  border: 1px solid var(--gen-line);
  border-radius: var(--gen-radius-card);
  padding: clamp(16px, 1.8vw, 22px);
  box-shadow: var(--gen-shadow);
  margin-block-end: 16px;
  min-width: 0;
}

#workbench .gen-step {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gen-ink);
  color: var(--gen-lime);
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
}

#workbench .gen-design-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

#workbench .gen-design-grid > div {
  min-width: 0;
}

@container (min-width: 250px) {
  #workbench .gen-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 560px) {
  #workbench .gen-design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#workbench .gen-data-panel {
  min-width: 0;
}

#workbench .gen-data-panel > label:first-child {
  margin-block-start: 2px;
}

/* --------------------------------------------------------------------------
   4 · Controles de formulario (elementos con scope, nunca globales)
   -------------------------------------------------------------------------- */
#workbench label,
#workbench .gen-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 650;
  margin-block: 10px 4px;
  color: var(--gen-ink);
}

#workbench input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
#workbench select,
#workbench textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--gen-ink);
  background: var(--gen-surface);
  border: 1px solid var(--gen-field-line);
  border-radius: var(--gen-radius-ctl);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#workbench textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}

#workbench .gen-design-grid > .gen-palette-field {
  grid-column: 1 / -1;
}

#workbench .gen-color-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 44px));
  gap: 8px;
  max-width: 304px;
  padding-block: 4px;
}

#workbench .gen-color-swatch {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  padding: 0;
  color: #ffffff;
  background: var(--gen-swatch);
  border: 1px solid rgba(23, 38, 54, 0.18);
  border-radius: var(--gen-radius-ctl);
}

#workbench .gen-color-swatch:focus-visible {
  outline: 3px solid #0A0A0A;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff;
}

#workbench .gen-color-check {
  visibility: hidden;
  font-size: 22px;
  line-height: 1;
}

#workbench .gen-color-swatch[aria-pressed="true"] .gen-color-check {
  visibility: visible;
}

#workbench .gen-fixed-background {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

#workbench .gen-background-swatch {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1px solid var(--gen-field-line);
  border-radius: var(--gen-radius-ctl);
}

#workbench input[type="file"] {
  max-width: 100%;
  font-size: 0.75rem;
  color: var(--gen-muted);
}

#workbench input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gen-blue);
  flex-shrink: 0;
}

#workbench ::placeholder {
  color: var(--gen-muted);
  opacity: 1;
}

#workbench input:focus,
#workbench select:focus,
#workbench textarea:focus {
  border-color: var(--gen-blue);
  box-shadow: 0 0 0 3px rgba(52, 79, 224, 0.18);
}

#workbench button:focus-visible,
#workbench summary:focus-visible,
#workbench input:focus-visible,
#workbench select:focus-visible,
#workbench textarea:focus-visible {
  outline: 3px solid var(--gen-blue);
  outline-offset: 2px;
}

#workbench .gen-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin-block: 8px 0;
}

#workbench .gen-hint,
#workbench #metadata {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gen-muted);
  line-height: 1.55;
  margin-block: 6px 0;
}

#workbench .gen-logo-upload {
  border-block-start: 1px solid var(--gen-line);
  margin-block-start: 14px;
  padding-block-start: 2px;
}

#workbench .gen-logo-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--gen-muted);
  font-size: 0.6875rem;
  margin-block-start: 8px;
}

/* --------------------------------------------------------------------------
   5 · Botones (CTA "Generar QR", exportaciones, acciones de texto)
   -------------------------------------------------------------------------- */
#workbench button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 44px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

#workbench .gen-btn-primary,
#workbench #generate,
#workbench #downloadPng {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gen-blue);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(52, 79, 224, 0.22);
}

#workbench .gen-btn-primary:hover:not(:disabled),
#workbench #generate:hover:not(:disabled),
#workbench #downloadPng:hover:not(:disabled) {
  background: var(--gen-blue-dark);
}

#workbench .gen-btn-primary:active:not(:disabled),
#workbench #generate:active:not(:disabled),
#workbench #downloadPng:active:not(:disabled) {
  background: var(--gen-blue-dark);
  box-shadow: 0 4px 10px rgba(52, 79, 224, 0.22);
}

#workbench #generate::after {
  content: "↗";
  margin-inline-start: 8px;
  font-size: 0.95em;
}

#workbench .gen-btn-secondary,
#workbench #downloadSvg,
#workbench #downloadPdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gen-surface);
  color: var(--gen-ink);
  border-color: var(--gen-ink);
}

#workbench .gen-btn-secondary:hover:not(:disabled),
#workbench #downloadSvg:hover:not(:disabled),
#workbench #downloadPdf:hover:not(:disabled) {
  background: var(--gen-blue-tint);
  border-color: var(--gen-ink);
}

#workbench .gen-btn-text,
#workbench #removeLogo {
  min-height: 32px;
  padding: 6px 8px;
  background: none;
  color: var(--gen-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 8px;
}

#workbench .gen-btn-text:hover:not(:disabled),
#workbench #removeLogo:hover:not(:disabled) {
  background: var(--gen-blue-tint);
}

#workbench button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

#workbench #downloadPng:disabled,
#workbench #downloadSvg:disabled,
#workbench #downloadPdf:disabled {
  opacity: 1;
  color: var(--gen-muted);
  background: var(--gen-paper);
  border-color: var(--gen-line);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6 · Estados: error, vista previa, carga, listo
   -------------------------------------------------------------------------- */
#workbench .gen-error,
#workbench #error {
  color: var(--gen-danger-ink);
  background: var(--gen-danger-bg);
  border: 1px solid var(--gen-danger-line);
  border-inline-start: 4px solid var(--gen-danger-ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-block: 0;
}

#workbench form > .gen-error,
#workbench form > #error {
  margin-block: 2px;
}

#workbench .gen-preview-card {
  position: sticky;
  top: 20px;
  margin-block-end: 0;
}

#workbench .gen-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

#workbench .gen-preview-header h2 {
  margin-block-end: 12px;
}

#workbench .gen-privacy-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--gen-ink);
  background: var(--gen-surface);
  border: 1px solid var(--gen-line);
  border-radius: 999px;
  padding: 5px 11px;
  margin-block-end: 8px;
}

#workbench .gen-privacy-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gen-ok-ink);
  flex-shrink: 0;
}

#workbench .gen-preview-frame,
#workbench #preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 280px;
  aspect-ratio: 1;
  border: 1px solid var(--gen-line);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--gen-surface);
  background-image: linear-gradient(45deg, #f1f3f0 25%, transparent 25%),
    linear-gradient(-45deg, #f1f3f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f3f0 75%),
    linear-gradient(-45deg, transparent 75%, #f1f3f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

#workbench .gen-preview-frame svg,
#workbench .gen-preview-frame img,
#workbench #preview svg,
#workbench #preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1;
}

#workbench #preview:has(.gen-empty-preview) {
  padding-block: 16px;
}

#workbench .gen-empty-preview {
  text-align: center;
  color: var(--gen-muted);
  font-size: 0.8125rem;
  padding: 12px 16px;
  margin: 0;
  max-width: 34ch;
}

#workbench .gen-empty-preview > .gen-empty-icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #546575;
  margin-block-end: 8px;
}

#workbench #status {
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-block: 12px 0 0;
  min-height: 2.6em;
  color: var(--gen-muted);
}

#workbench[data-state="loading"] #status::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 8px;
  vertical-align: -1px;
  border: 2px solid rgba(52, 79, 224, 0.25);
  border-top-color: var(--gen-blue);
  border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
}

#workbench[data-state="preview-ready"] #status {
  color: var(--gen-ok-ink);
  font-weight: 650;
}

#workbench[data-state="invalid"] #status {
  color: var(--gen-danger-ink);
  font-weight: 650;
}

@keyframes gen-spin {
  to {
    transform: rotate(360deg);
  }
}

#workbench .gen-exports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 16px;
  min-width: 0;
}

#workbench .gen-exports button {
  padding-inline: 8px;
  font-size: 0.8125rem;
}

#workbench details {
  border-block-start: 1px solid var(--gen-line);
  margin-block-start: 16px;
  padding-block-start: 13px;
  font-size: 0.75rem;
  min-width: 0;
}

#workbench summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--gen-muted);
}

#workbench pre,
#workbench #encodedPayload {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.6;
  max-height: 150px;
  max-width: 100%;
  overflow: auto;
  background: var(--gen-paper);
  border: 1px solid var(--gen-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-block: 10px 0;
  color: var(--gen-ink);
}

#workbench .gen-footer,
#workbench footer {
  color: var(--gen-muted);
  font-size: 0.6875rem;
  line-height: 1.6;
  text-align: center;
  margin: 24px auto 0;
  max-width: 62ch;
}

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

/* --------------------------------------------------------------------------
   7 · Responsive — 1440×900 (arriba del pliegue) y 390 px (sin scroll)
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #workbench .gen-workspace {
    align-items: start;
  }

  #workbench .gen-preview-card {
    position: sticky;
    top: 20px;
    align-self: start;
  }

  #workbench .gen-preview-frame,
  #workbench #preview {
    width: 100%;
    max-width: 380px;
    min-height: 0;
    aspect-ratio: 1;
    margin-inline: auto;
  }
}

@media (min-width: 1240px) {
  /* Ficha de contenido ARRIBA y ficha de diseño DEBAJO, ambas a ancho
     completo de la columna izquierda (orden del usuario, m0314).
     Contrapartida honesta: al apilar, el CTA "Generar QR" baja respecto
     al lado a lado y queda bajo el pliegue de 1440×900 (medición en
     .gauntlet/evidencias/CORR20-LAYOUT-r1/). */
  #workbench form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
  }

  #workbench form > .gen-card {
    margin-block-end: 0;
    padding: 18px;
  }

  #workbench form > .gen-error,
  #workbench form > #error,
  #workbench form > .gen-btn-primary,
  #workbench form > #generate {
    grid-column: 1 / -1;
    margin-block: 0;
  }
}

@media (max-width: 900px) {
  #workbench .gen-workspace {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #workbench .gen-preview-card {
    position: static;
  }

  #workbench .gen-preview-frame,
  #workbench #preview {
    min-height: 240px;
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  #workbench {
    padding: 14px 14px 32px;
    font-size: 15px;
  }

  #workbench .gen-intro {
    padding-block-end: 12px;
  }

  #workbench .gen-card {
    padding: 16px;
    border-radius: 14px;
    margin-block-end: 14px;
  }

  #workbench h2 {
    font-size: 1.0625rem;
    margin-block-end: 12px;
  }

  #workbench .gen-exports {
    grid-template-columns: 1fr;
  }

  #workbench .gen-preview-frame,
  #workbench #preview {
    min-height: 220px;
  }
}

/* --------------------------------------------------------------------------
   8 · RTL (árabe, `dir="rtl"`) — sin desbordes ni rótulos rotos
   -------------------------------------------------------------------------- */
[dir="rtl"] #workbench .gen-eyebrow,
#workbench[dir="rtl"] .gen-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] #workbench h1,
[dir="rtl"] #workbench h2,
#workbench[dir="rtl"] h1,
#workbench[dir="rtl"] h2 {
  letter-spacing: 0;
}

[dir="rtl"] #workbench pre,
[dir="rtl"] #workbench #encodedPayload,
#workbench[dir="rtl"] pre {
  text-align: start;
}

/* --------------------------------------------------------------------------
   9 · Movimiento reducido — nunca esconde contenido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #workbench *,
  #workbench *::before,
  #workbench *::after {
    animation: none !important;
    transition: none !important;
  }
}

#workbench #generate:disabled {
  opacity: 1;
  cursor: progress;
}

/* ==========================================================================
   Generador 26 tipos + 6 pestañas (CORR-GEN-r1)
   Añadido sobre la base existente; todo sigue scoped bajo #workbench.
   ========================================================================== */
#workbench .gen-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#workbench .gen-locale{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;color:var(--gen-muted)}
#workbench .gen-locale select{min-height:38px;padding:.3rem .5rem;border:1px solid var(--gen-line);border-radius:8px;background:var(--gen-surface);color:var(--gen-ink);font:inherit;font-size:.78rem;font-weight:700}

#workbench .gen-typebar{margin-block:1rem 1.1rem}
#workbench .gen-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.5rem}
#workbench .gen-type{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .6rem;border:1px solid var(--gen-line);border-radius:10px;background:var(--gen-surface);color:var(--gen-ink);font:inherit;font-size:.8rem;font-weight:700;line-height:1.15;text-align:start;transition:border-color .18s,background .18s,transform .18s}
#workbench .gen-type:hover{border-color:var(--gen-blue);transform:translateY(-1px)}
#workbench .gen-type[aria-pressed="true"]{background:var(--gen-blue);border-color:var(--gen-blue);color:#fff}
#workbench .gen-type-icon{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--gen-blue-tint);color:var(--gen-blue);font-size:.85rem;font-weight:800}
#workbench .gen-type[aria-pressed="true"] .gen-type-icon{background:rgba(255,255,255,.18);color:#fff}
#workbench .gen-more{margin-top:.6rem;min-height:40px;padding:.45rem .9rem;border:1px dashed var(--gen-line);border-radius:9px;background:transparent;color:var(--gen-blue);font:inherit;font-size:.78rem;font-weight:700}
#workbench .gen-more:hover{border-color:var(--gen-blue);background:var(--gen-blue-tint)}

#workbench .gen-step-card{padding:clamp(14px,2vw,22px)}
#workbench .gen-card-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.35rem}
#workbench .gen-card-head h2{margin:0;font:800 1.12rem/1.25 "Manrope",system-ui,sans-serif;letter-spacing:-.02em}
#workbench .gen-step-hint{margin:.1rem 0 .9rem;color:var(--gen-muted);font-size:.83rem}

#workbench .gen-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.7rem}
#workbench .gen-mode{display:flex;align-items:flex-start;gap:.55rem;padding:.65rem .7rem;border:1px solid var(--gen-line);border-radius:10px;background:var(--gen-surface);cursor:pointer}
#workbench .gen-mode:has(input:checked){border-color:var(--gen-blue);background:var(--gen-blue-tint)}
#workbench .gen-mode.is-disabled{opacity:.45;cursor:not-allowed}
#workbench .gen-mode input{margin-top:.2rem;accent-color:var(--gen-blue)}
#workbench .gen-mode-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
#workbench .gen-mode-body strong{font-size:.83rem}
#workbench .gen-mode-body small{color:var(--gen-muted);font-size:.72rem;line-height:1.35}
#workbench .gen-note{margin:.1rem 0 .8rem;padding:.55rem .7rem;border-radius:9px;background:var(--gen-blue-tint);color:var(--gen-ink);font-size:.78rem}
#workbench .gen-note a{color:var(--gen-blue);font-weight:700;text-decoration:underline}

#workbench .gen-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .7rem;margin-bottom:.9rem}
#workbench .gen-field{display:flex;flex-direction:column;gap:.28rem;min-width:0;font-size:.78rem;font-weight:700;color:var(--gen-ink)}
#workbench .gen-field-wide{grid-column:1/-1}
#workbench .gen-field input,#workbench .gen-field select,#workbench .gen-field textarea{width:100%;min-height:42px;padding:.5rem .6rem;border:1px solid var(--gen-field-line);border-radius:9px;background:var(--gen-surface);color:var(--gen-ink);font:inherit;font-size:.84rem;font-weight:400}
#workbench .gen-field textarea{resize:vertical}
#workbench .gen-field input:focus,#workbench .gen-field select:focus,#workbench .gen-field textarea:focus{outline:2px solid var(--gen-blue);outline-offset:1px;border-color:var(--gen-blue)}
#workbench .gen-field.gen-check{flex-direction:row;align-items:center;gap:.45rem;font-weight:600}
#workbench .gen-field.gen-check input{width:18px;height:18px;min-height:0;accent-color:var(--gen-blue)}

#workbench .gen-status{min-height:1.3em;margin:.5rem 0 0;color:var(--gen-muted);font-size:.78rem}
#workbench .gen-recommend{margin:.55rem 0 .2rem;color:var(--gen-muted);font-size:.74rem;line-height:1.45}

#workbench .gen-tabs{display:flex;gap:.25rem;overflow-x:auto;padding-bottom:.3rem;margin-bottom:.7rem;scrollbar-width:thin}
#workbench .gen-tabs [role="tab"]{display:inline-flex;align-items:center;gap:.32rem;flex:none;min-height:40px;padding:.4rem .65rem;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--gen-muted);font:inherit;font-size:.78rem;font-weight:700;white-space:nowrap}
#workbench .gen-tabs [role="tab"]:hover{background:var(--gen-blue-tint);color:var(--gen-ink)}
#workbench .gen-tabs [role="tab"][aria-selected="true"]{background:var(--gen-ink);border-color:var(--gen-ink);color:#fff}
#workbench .gen-tab-icon{font-size:.95rem;line-height:1}
#workbench .gen-tabpanel:focus-visible{outline:2px solid var(--gen-blue);outline-offset:4px;border-radius:8px}
#workbench .gen-panel-hint{margin:0 0 .6rem;color:var(--gen-muted);font-size:.78rem}

#workbench .gen-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
#workbench .gen-option{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem .3rem;border:1px solid var(--gen-line);border-radius:10px;background:var(--gen-surface);color:var(--gen-ink);font:inherit;font-size:.68rem;font-weight:700;line-height:1.2;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
#workbench .gen-option:hover{border-color:var(--gen-blue);transform:translateY(-1px)}
#workbench .gen-option[aria-checked="true"]{border-color:var(--gen-blue);box-shadow:0 0 0 2px var(--gen-blue) inset}
#workbench .gen-thumb{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:.2rem;border-radius:7px;background:var(--gen-paper);color:var(--gen-ink)}
#workbench .gen-thumb svg{width:100%;height:100%;display:block}
#workbench .gen-option-label{display:block;max-width:100%;overflow-wrap:anywhere}

#workbench .gen-logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
#workbench .gen-upload{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.5rem .85rem;border:1px dashed var(--gen-field-line);border-radius:9px;background:var(--gen-surface);color:var(--gen-blue);font-size:.78rem;font-weight:700;cursor:pointer}
#workbench .gen-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
#workbench .gen-small{margin:.4rem 0;color:var(--gen-muted);font-size:.74rem}
#workbench .gen-range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem .6rem;margin-top:.5rem;font-size:.78rem;font-weight:700}
#workbench .gen-range input{grid-column:1/-1;width:100%;accent-color:var(--gen-blue)}
#workbench .gen-range output{color:var(--gen-muted);font-weight:600}

#workbench .gen-color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
#workbench .gen-color-grid label{display:flex;flex-direction:column;gap:.25rem;font-size:.74rem;font-weight:700}
#workbench .gen-color-grid input{width:100%;height:42px;padding:.15rem;border:1px solid var(--gen-field-line);border-radius:9px;background:var(--gen-surface)}
#workbench .gen-gradient-row{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:.55rem;margin-top:.6rem}
#workbench .gen-gradient-row label{display:flex;flex-direction:column;gap:.25rem;font-size:.74rem;font-weight:700}
#workbench .gen-gradient-row select,#workbench .gen-gradient-row input{width:100%;min-height:42px;padding:.4rem;border:1px solid var(--gen-field-line);border-radius:9px;background:var(--gen-surface);color:var(--gen-ink);font:inherit;font-size:.78rem}
#workbench .gen-gradient-row input[type="color"]{height:42px;padding:.15rem}

#workbench .gen-scan{margin:.5rem 0 0;padding:.45rem .6rem;border-radius:8px;background:var(--gen-ok-bg);color:var(--gen-ok-ink);font-size:.73rem;font-weight:700}
#workbench .gen-details{margin-top:.7rem;font-size:.76rem;color:var(--gen-muted)}
#workbench .gen-details summary{cursor:pointer;font-weight:700;color:var(--gen-ink)}
#workbench .gen-details pre{max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:.5rem;border-radius:8px;background:var(--gen-paper);font-size:.7rem}
#workbench .gen-preview-frame svg{width:100%;height:auto;display:block;border-radius:8px}
#workbench .gen-exports button{min-height:42px}
#workbench .gen-template-save{display:inline-flex;align-items:center;justify-content:center;margin-top:.65rem;min-height:40px;padding:.45rem .8rem;border:1px solid var(--gen-line);border-radius:9px;font-size:.75rem;font-weight:700;text-decoration:none;color:var(--gen-ink)}
#workbench #status{font-size:.78rem}

#workbench[dir="rtl"] .gen-field,#workbench[dir="rtl"] .gen-mode,#workbench[dir="rtl"] .gen-option,#workbench[dir="rtl"] .gen-tabs{direction:rtl}
#workbench[dir="rtl"] .gen-type{text-align:right}

@media (max-width:900px){
  #workbench .gen-workspace{grid-template-columns:1fr}
  #workbench .gen-fields{grid-template-columns:1fr}
  #workbench .gen-field-wide{grid-column:auto}
}
@media (max-width:620px){
  #workbench .gen-mode-row{grid-template-columns:1fr}
  #workbench .gen-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #workbench .gen-type{font-size:.72rem;padding:.4rem}
  #workbench .gen-type-icon{width:20px;height:20px;font-size:.72rem}
  #workbench .gen-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  #workbench .gen-color-grid,#workbench .gen-gradient-row{grid-template-columns:1fr}
}

#workbench .gen-field-hint{display:block;color:var(--gen-muted);font-size:.7rem;font-weight:500;line-height:1.4}
#workbench .gen-mode.is-disabled{opacity:.52}
#workbench .gen-mode input:disabled{cursor:not-allowed}
#workbench .gen-status-link{display:inline-block;margin-inline-start:.3rem;color:var(--gen-blue-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
#workbench .gen-fields input[type="file"]{padding:.45rem .25rem;font-size:.75rem}
#workbench .gen-smart-rule-manager{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--gen-line);border-radius:10px;background:var(--gen-paper)}
#workbench .gen-smart-rule-manager .gen-field-hint{margin:0}
#workbench .gen-smart-rule-manager [data-delete-rule]{width:auto;flex:none}