*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{font-size:16px}
    .hidden{display:none!important}

    /* ── Global focus ring — keyboard navigation ── */
    :focus-visible{
      outline:2px solid var(--text-primary);
      outline-offset:2px;
      border-radius:var(--radius-technical);
    }
    /* Remove focus ring from mouse clicks (only keyboard) */
    :focus:not(:focus-visible){outline:none}

    /* ── Nothing Design Tokens — Dark Mode (default) ──── */
    :root,[data-theme="dark"]{
      --black:#000000;
      --surface:#111111;
      --surface-raised:#1A1A1A;
      --border:#222222;
      --border-visible:#333333;
      --text-disabled:#777777;
      --text-secondary:#999999;
      --text-primary:#E8E8E8;
      --text-display:#FFFFFF;
      --accent:#D71921;
      --accent-subtle:rgba(215,25,33,0.15);
      --success:#4A9E5C;
      --warning:#D4A843;
      --error:#D71921;
      --interactive:#5B9BF6;
      --admin-badge-bg:rgba(91,155,246,0.12);
      --admin-badge-border:rgba(91,155,246,0.28);
      --admin-badge-text:var(--interactive);
      --radius:12px;
      --radius-sm:8px;
      --radius-technical:4px;
      --ease:cubic-bezier(0.25,0.1,0.25,1);
    }

    /* ── Light Mode ──────────────────────────────────────── */
    [data-theme="light"]{
      --black:#F5F5F5;
      --surface:#FFFFFF;
      --surface-raised:#F0F0F0;
      --border:#E8E8E8;
      --border-visible:#CCCCCC;
      --text-disabled:#888888;
      --text-secondary:#666666;
      --text-primary:#1A1A1A;
      --text-display:#000000;
      --accent:#D71921;
      --accent-subtle:rgba(215,25,33,0.12);
      --success:#3D8B4F;
      --warning:#B8922E;
      --error:#D71921;
      --interactive:#007AFF;
      --admin-badge-bg:rgba(0,122,255,0.10);
      --admin-badge-border:rgba(0,122,255,0.24);
      --admin-badge-text:var(--interactive);
    }

    body{
      background:var(--black);
      color:var(--text-primary);
      font-family:'Space Grotesk','DM Sans',system-ui,sans-serif;
      height:100vh;overflow:hidden;
      padding:1.5rem 2.5rem 1rem;
    }

    /* ── Header ─────────────────────────────────────────── */
    .header{
      display:flex;align-items:center;gap:1rem;
      margin-bottom:1.5rem;
      padding-bottom:1.25rem;
      border-bottom:1px solid var(--border);
    }
    .header-icon{
      width:36px;height:36px;border-radius:var(--radius-sm);
      border:1px solid var(--border-visible);
      background:var(--surface);
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;color:var(--text-display);
      padding:0;cursor:pointer;
      transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
    }
    .header-icon:hover{border-color:var(--text-primary);color:var(--text-primary)}
    .header-icon svg{width:20px;height:20px}
    .header-text h1{
      font-family:'Doto','Space Mono',monospace;
      font-size:1.5rem;font-weight:400;letter-spacing:-.02em;
      color:var(--text-display);line-height:1.1;
    }
    .header-text .subtitle{
      font-family:'Space Mono','JetBrains Mono',monospace;
      color:var(--text-secondary);font-size:11px;margin-top:4px;
      text-transform:uppercase;letter-spacing:.08em;
    }

    /* ── Card base ───────────────────────────────────────── */
    .card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1.25rem 1.5rem;
      position:relative;
    }
    .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
    .card-title{
      font-family:'Space Mono','JetBrains Mono',monospace;
      font-size:11px;font-weight:400;text-transform:uppercase;
      letter-spacing:.08em;color:var(--text-secondary);
    }

    /* ── Layout form ─────────────────────────────────────── */
    .layout{
      display:grid;grid-template-columns:2fr 1fr;
      gap:1.25rem;margin:0 auto;
      /* Keep a small internal gutter so the cards don't sit flush
         against the lower edge in form/execution views. */
      padding-bottom:1rem;
      height:calc(100vh - 7rem);
      height:calc(100dvh - 7rem);
    }
    .layout.full-width{grid-template-columns:1fr}
    .col-left{display:flex;flex-direction:column;min-height:0}
    .col-left .card{flex:1;display:flex;flex-direction:column;min-height:0}
    .col-right{display:flex;flex-direction:column;gap:1rem;min-height:0}
    .col-right .card{
      flex:1;display:flex;flex-direction:column;min-height:0;
      transition:flex-grow .25s var(--ease);
    }
    .col-right .card:has(.panel-body.collapsed){flex-grow:0;flex-basis:auto}
    .col-right .panel-body{
      flex:1 1 0;display:flex;flex-direction:column;min-height:0;overflow:hidden;
      transition:flex-grow .25s var(--ease), opacity .2s var(--ease);
    }
    .col-right .panel-body.collapsed{flex-grow:0!important;opacity:0;pointer-events:none}
    .col-right .log,
    .col-right .resultado-box{flex:1;min-height:0;overflow-y:auto}

    /* ── Layout post-ejecución ───────────────────────────── */
    .post-layout{
      display:none;
      grid-template-columns:2fr 1fr;
      gap:1.25rem;margin:0 auto;
      align-items:stretch;
      padding-bottom:1rem;
      height:calc(100vh - 7rem);
      height:calc(100dvh - 7rem);
    }
    .post-layout .card{display:flex;flex-direction:column;min-height:0}
    .post-layout .panel-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
    .post-layout .log,
    .post-layout .resultado-box{flex:1;min-height:0;overflow-y:auto}
    .post-right{display:flex;flex-direction:column;gap:1.25rem;min-height:0}
    .post-layout .post-summary{justify-content:flex-start}
    .post-layout .post-summary .btn-nueva{margin-top:auto}
    .post-result-card{
      border-top:1px solid var(--border-visible);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .post-log-card{
      border-top:1px solid var(--border);
    }

    /* ── Pasos ───────────────────────────────────────────── */
    .btn-add-inline{
      display:flex;align-items:center;gap:4px;
      background:transparent;
      border:1px solid var(--border-visible);
      border-radius:999px;color:var(--text-secondary);cursor:pointer;
      padding:4px 14px;
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.06em;
      transition:border-color .2s var(--ease),color .2s var(--ease);
    }
    .btn-add-inline:hover{border-color:var(--text-primary);color:var(--text-primary)}

    .pasos{display:flex;flex-direction:column;gap:4px;max-height:200px;height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px}
    /* Empty state shown when pasos is empty */
    .pasos-empty{
      display:flex;align-items:center;gap:8px;
      padding:10px 4px;
      font-family:'Space Mono',monospace;font-size:11px;
      color:var(--text-disabled);letter-spacing:.04em;
      border:1px dashed var(--border);
      border-radius:var(--radius-sm);
    }
    .pasos-empty svg{flex-shrink:0;stroke:var(--text-disabled)}
    .pasos-empty.hidden{display:none!important}
    .pasos{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .pasos::-webkit-scrollbar{width:3px}
    .pasos::-webkit-scrollbar-track{background:transparent}
    .pasos::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .pasos.dropdown-open{overflow:visible}

    @keyframes fade-in{from{opacity:0}to{opacity:1}}

    .paso{
      display:flex;align-items:center;gap:8px;
      padding:6px 4px;
      border-radius:var(--radius-sm);transition:background .15s var(--ease);flex-shrink:0;
    }
    .paso.removing{animation:fade-in .15s var(--ease) reverse forwards}
    .paso.paso-dragging{
      opacity:.55;
      background:rgba(255,255,255,0.03);
    }
    .paso.paso-drop-before{
      box-shadow:inset 0 2px 0 var(--interactive);
    }
    .paso.paso-drop-after{
      box-shadow:inset 0 -2px 0 var(--interactive);
    }

    .btn-drag{
      background:none;border:none;color:var(--text-disabled);cursor:grab;
      width:18px;height:22px;display:flex;align-items:center;justify-content:center;
      flex-shrink:0;padding:0;transition:color .15s var(--ease), opacity .15s var(--ease);
      opacity:.8;
      touch-action:none;
    }
    .btn-drag:hover{color:var(--text-primary);opacity:1}
    .btn-drag:active{cursor:grabbing}
    .btn-drag.is-touch-dragging{color:var(--text-primary);opacity:1}
    .btn-drag svg{width:14px;height:14px}

    .paso-num{
      width:22px;height:22px;flex-shrink:0;
      background:var(--surface-raised);
      border:1px solid var(--border-visible);
      border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-family:'Space Mono',monospace;font-size:11px;font-weight:400;
      color:var(--text-display);
      position:relative;
      transition:background .2s var(--ease),border-color .2s var(--ease);
    }
    /* Connector line between step numbers */
    .paso:not(:last-child) .paso-num::after{
      content:"";position:absolute;
      top:100%;left:50%;transform:translateX(-50%);
      width:1px;height:16px;
      background:var(--border-visible);
    }
    /* Step becomes "filled" when agent is selected */
    .paso.has-agent .paso-num{
      background:var(--text-display);
      border-color:var(--text-display);
      color:var(--black);
    }
    .paso.has-agent:not(:last-child) .paso-num::after{
      background:var(--text-display);
    }

    /* ── Slots independientes agente / target ── */
    .paso-slot{
      position:relative;display:flex;flex-direction:column;
      background:transparent;
      border-bottom:1px solid var(--border-visible);
      border-top:none;border-left:none;border-right:none;
      border-radius:0;padding:4px 4px 6px;
      transition:border-color .2s var(--ease);cursor:pointer;
    }
    .paso-slot:hover{border-color:var(--text-secondary)}
    .paso-slot:focus-within{border-color:var(--text-primary)}
    .paso-slot--agente{flex:1 1 0;min-width:120px}
    .paso-slot--target{flex:0 0 92px}
    .paso-slot--proveedor{flex:0 0 118px}
    .paso-slot--modelo{flex:0 0 156px}
    .slot-label-warn{color:var(--warning)!important}
    .slot-label-warn::after{content:" !";font-size:10px;font-weight:700}

    .slot-label{
      font-family:'Space Mono',monospace;
      font-size:10px;text-transform:uppercase;letter-spacing:.08em;
      color:var(--text-secondary);line-height:1;margin-bottom:2px;
      display:block;pointer-events:none;
    }
    .custom-select-shell{
      position:relative;
      width:100%;
      min-width:0;
    }
    .custom-select-shell select{
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
      width:0;
      height:0;
    }
    .custom-select-trigger{
      width:100%;
      display:flex;align-items:center;justify-content:space-between;gap:8px;
      background:transparent;border:none;padding:0;
      color:var(--text-primary);cursor:pointer;
      font-family:'Space Grotesk',sans-serif;font-size:13px;line-height:1.3;
      text-align:left;
      min-width:0;
    }
    .custom-select-trigger:focus-visible{outline:none}
    .custom-select-label{
      min-width:0;flex:1;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .custom-select-shell.is-placeholder .custom-select-label{color:var(--text-secondary)}
    .custom-select-shell.is-disabled{
      opacity:.62;
      cursor:not-allowed;
    }
    .custom-select-shell.is-disabled .custom-select-trigger{
      cursor:not-allowed;
    }
    .custom-select-chevron{
      width:12px;height:12px;flex-shrink:0;
      color:var(--text-secondary);
      transition:transform .18s var(--ease),color .18s var(--ease);
    }
    .custom-select-chevron svg{display:block;width:100%;height:100%}
    .custom-select-shell.open .custom-select-chevron{
      transform:rotate(180deg);
      color:var(--text-primary);
    }
    .custom-select-menu{
      position:absolute;
      top:calc(100% + 8px);
      left:0;
      right:0;
      z-index:40;
      display:none;
      padding:6px 0;
      max-height:240px;
      overflow:auto;
      background:var(--surface-raised);
      border:1px solid var(--border-visible);
      border-radius:12px;
      box-shadow:0 14px 36px rgba(0,0,0,0.22);
      backdrop-filter:blur(14px);
    }
    .custom-select-shell.open .custom-select-menu{display:block}
    .custom-select-menu{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .custom-select-menu::-webkit-scrollbar{width:4px}
    .custom-select-menu::-webkit-scrollbar-thumb{
      background:var(--border-visible);
      border-radius:999px;
    }
    .custom-select-option{
      width:100%;
      display:flex;align-items:center;
      padding:9px 12px;
      border:none;background:transparent;
      color:var(--text-primary);
      font-family:'Space Grotesk',sans-serif;font-size:13px;line-height:1.2;
      cursor:pointer;text-align:left;
      transition:background .15s var(--ease),color .15s var(--ease),padding .15s var(--ease);
    }
    .custom-select-option:hover,
    .custom-select-option:focus-visible{
      background:var(--surface);
      outline:none;
    }
    .custom-select-option.is-selected{
      color:var(--text-display);
      background:var(--surface);
      box-shadow:inset 2px 0 0 var(--accent);
      padding-left:14px;
    }
    .custom-select-option.is-placeholder-option{
      color:var(--text-secondary);
      font-family:'Space Grotesk',sans-serif;
      font-size:13px;
      letter-spacing:0;
      text-transform:none;
    }

    .btn-remove{
      background:none;border:none;color:var(--text-disabled);cursor:pointer;
      width:20px;height:20px;font-size:12px;display:flex;align-items:center;
      justify-content:center;transition:color .15s var(--ease);flex-shrink:0;
      /* Expand hit area to 40×40 without changing visual size */
      padding:10px;margin:-10px;margin-left:2px;
    }
    .btn-remove:hover{color:var(--accent)}

    /* ── Flujo preview ───────────────────────────────────── */
    .flujo-preview{
      margin-top:8px;padding:8px 12px;
      background:transparent;
      border-radius:var(--radius-sm);border:1px solid var(--border);
      min-height:32px;display:flex;align-items:center;
    }
    .flujo-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
    .chip{
      display:flex;align-items:center;gap:4px;flex-wrap:wrap;
      background:transparent;
      border:1px solid var(--border-visible);
      border-radius:999px;padding:3px 12px;
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.04em;
      color:var(--text-primary);
    }
    .chip-target{
      font-size:10px;
      background:var(--surface-raised);
      border-radius:999px;padding:1px 8px;color:var(--text-secondary);
    }
    .chip-meta{
      font-size:10px;
      color:var(--text-secondary);
      letter-spacing:.02em;
      text-transform:none;
      opacity:.9;
      white-space:nowrap;
    }
    .arrow-sep{
      display:inline-flex;align-items:center;
      color:var(--text-disabled);
    }
    .arrow-sep svg{width:12px;height:12px;stroke:currentColor}
    /* Active chip during execution */
    .chip.chip-active{
      border-color:var(--interactive);
      color:var(--text-display);
      background:rgba(91,155,246,0.08);
    }
    /* ── Tarea ───────────────────────────────────────────── */
    .tarea-section{margin-top:12px;flex:1;display:flex;flex-direction:column;min-height:0}
    .field-label{
      font-family:'Space Mono',monospace;
      font-size:11px;color:var(--text-secondary);margin-bottom:8px;
      letter-spacing:.08em;text-transform:uppercase;display:block;
    }
    .tarea-section textarea{
      background:transparent;
      border:1px solid var(--border);border-radius:var(--radius-sm);
      color:var(--text-primary);padding:12px 14px;
      font-size:14px;width:100%;resize:none;min-height:60px;flex:1;
      font-family:'Space Grotesk',sans-serif;line-height:1.5;
      transition:border-color .2s var(--ease);
    }
    .tarea-section textarea:focus{
      outline:none;border-color:var(--text-primary);
    }
    .tarea-section.has-adjuntos textarea{
      border-radius:var(--radius-sm);
    }
    .tarea-section textarea::placeholder{color:var(--text-disabled);font-size:13px}

    /* ── Botón ejecutar ──────────────────────────────────── */
    .btn-run{
      margin-top:12px;padding:6px 24px;min-height:36px;
      background:var(--text-primary);
      border:none;border-radius:999px;color:var(--black);
      font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;
      transition:opacity .15s var(--ease),transform .1s var(--ease);
      display:inline-flex;align-items:center;gap:6px;align-self:flex-end;
    }
    .btn-run:hover:not(:disabled){opacity:.85}
    .btn-run:active:not(:disabled){transform:scale(0.97)}
    .btn-run:disabled{opacity:.4;cursor:not-allowed}

    .btn-spinner{
      font-family:'Space Mono',monospace;font-size:11px;
      letter-spacing:.06em;text-transform:uppercase;
      display:inline-block;
    }
    @keyframes dot-loading{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}

    /* ── Paneles colapsables ─────────────────────────────── */
    .panel-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:16px}
    .chevron{color:var(--text-secondary);transition:transform .2s var(--ease);font-size:11px}
    .chevron.open{transform:rotate(180deg)}
    .panel-body{overflow:hidden;transition:max-height .25s var(--ease)}
    .panel-body.collapsed{max-height:0!important}

    /* ── Log ─────────────────────────────────────────────── */
    .log{
      background:var(--black);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:12px;
      font-family:'Space Mono',monospace;
      font-size:12px;line-height:1.7;
      color:var(--text-secondary);
      flex:1 1 0;min-height:0;overflow-y:auto;
    }
    .log{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .log::-webkit-scrollbar{width:3px}
    .log::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .log-line{margin-bottom:1px}
    .log-line.success{color:var(--success)}
    .log-line.accent{color:var(--text-primary)}
    .log-line.error{color:var(--accent)}
    .log-line.white{color:var(--text-display)}

    /* ── Resultado ───────────────────────────────────────── */
    .resultado-box{
      background:var(--black);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:12px 14px;
      font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
      color:var(--text-disabled);
      font-family:'Space Grotesk',sans-serif;font-style:italic;
      min-height:0;
    }
    .resultado-box.tiene-contenido{color:var(--text-primary);font-style:normal}
    .resultado-box{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .resultado-box::-webkit-scrollbar{width:3px}
    .resultado-box::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}

    /* ── Result header row ───────────────────────────────── */
    .result-header-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}
    .result-header-badge{
      display:inline-flex;align-items:center;
      min-height:20px;padding:0 7px;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--text-disabled);
      font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;
      background:var(--surface-raised);
    }
    .logs-status-badge{
      display:inline-flex;align-items:center;gap:6px;
      min-height:28px;
      padding:0 12px;
      border:1px solid var(--border-visible);
      border-radius:999px;
      color:var(--text-secondary);
      font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;
    }
    .logs-status-badge::before{
      content:"";
      width:5px;height:5px;border-radius:50%;
      background:var(--success);
      opacity:.85;
      animation:status-pulse 1.8s ease-in-out infinite;
    }
    .btn-copy{
      background:transparent;
      border:1px solid var(--border-visible);
      border-radius:999px;color:var(--text-secondary);cursor:pointer;
      padding:4px 14px;
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.06em;
      transition:border-color .2s var(--ease),color .2s var(--ease);
    }
    .btn-copy:hover{border-color:var(--text-primary);color:var(--text-primary)}

    /* ── Coste bar ───────────────────────────────────────── */
    .coste-bar{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
    .coste-item{
      background:transparent;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;flex:1;min-width:72px;
    }
    .coste-item span{
      display:block;font-family:'Space Mono',monospace;font-size:10px;
      color:var(--text-secondary);margin-bottom:2px;
      text-transform:uppercase;letter-spacing:.08em;
    }
    .coste-item strong{color:var(--text-display);font-weight:400;font-family:'Space Mono',monospace}

    /* ── Post pipeline ───────────────────────────────────── */
    .config-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
    .post-summary-label{
      display:block;
      font-family:'Space Mono',monospace;
      font-size:10px;color:var(--text-disabled);
      text-transform:uppercase;letter-spacing:.08em;
      margin-top:2px;margin-bottom:8px;
    }
    .config-tarea{
      font-size:14px;color:var(--text-secondary);line-height:1.5;
      border-top:1px solid var(--border);padding-top:12px;margin-top:0;
      margin-bottom:18px;
    }
    .btn-nueva{
      margin-top:16px;padding:12px 24px;background:none;
      border:1px solid var(--border-visible);border-radius:999px;
      color:var(--text-secondary);cursor:pointer;
      font-family:'Space Mono',monospace;font-size:13px;
      text-transform:uppercase;letter-spacing:.06em;
      transition:border-color .2s var(--ease),color .2s var(--ease);width:100%;
    }
    .btn-nueva:hover{border-color:var(--text-primary);color:var(--text-primary)}

    /* ── Status dot ──────────────────────────────────────── */
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    .status-dot{
      width:6px;height:6px;border-radius:50%;
      background:var(--success);
      animation:pulse 2s ease-in-out infinite;
      display:inline-block;margin-right:6px;
    }

    /* ── Adjuntos ─────────────────────────────── */
    .adjuntos-zone{
      margin-top:12px;
      border:1px dashed var(--border-visible);
      border-radius:var(--radius-sm);padding:9px 12px;
      cursor:pointer;transition:border-color .2s var(--ease);
    }
    .card-footer-row{
      display:flex;gap:12px;align-items:flex-end;
      margin-top:12px;
      justify-content:flex-start;
      min-height:40px;
    }
    .card-footer-row .adjuntos-zone{
      flex:0 1 320px;
      margin-top:0;
      min-width:0;
    }
    .adjuntos-zone:hover,.adjuntos-zone.drag-over{
      border-color:var(--text-secondary);
    }
    .adjuntos-zone input[type=file]{display:none}
    .adj-placeholder{
      display:flex;align-items:center;gap:8px;
      color:var(--text-disabled);font-size:11px;
      font-family:'Space Mono',monospace;
    }
    .adj-placeholder svg{width:14px;height:14px;stroke:var(--text-disabled)}
    .adj-lista{
      margin-top:8px;
      display:flex;
      flex-direction:column;
      gap:4px;
      max-height:calc((32px + 8px) * 3);
      overflow-y:auto;
      padding-right:2px;
    }
    .adj-lista{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .adj-lista::-webkit-scrollbar{width:3px}
    .adj-lista::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .adj-item{
      display:flex;align-items:center;justify-content:space-between;
      background:transparent;border:1px solid var(--border);
      border-radius:var(--radius-technical);padding:6px 10px;font-size:12px;
    }
    .adj-thumb{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-technical);overflow:hidden;background:var(--surface-raised);border:1px solid var(--border)}
    .adj-thumb:empty{display:none}
    .adj-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
    .adj-inline-strip{
      display:flex;flex-wrap:wrap;gap:6px;
      margin-top:8px;padding:8px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface-raised);
      max-height:104px;
      overflow-y:auto;
    }
    .adj-inline-strip{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .adj-inline-strip::-webkit-scrollbar{width:3px}
    .adj-inline-strip::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .adj-inline-pill{
      display:inline-flex;align-items:center;gap:5px;
      padding:3px 7px 3px 4px;
      border:1px solid var(--border-visible);border-radius:var(--radius-technical);
      background:var(--surface-raised);
      max-width:160px;flex-shrink:0;
    }
    .adj-inline-img{
      width:18px;height:18px;object-fit:cover;
      border-radius:2px;flex-shrink:0;display:block;
    }
    .adj-inline-name{
      font-family:'Space Mono',monospace;font-size:10px;
      color:var(--text-secondary);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      min-width:0;
    }
    .adj-inline-remove{
      background:none;border:none;cursor:pointer;
      color:var(--text-disabled);font-size:10px;line-height:1;
      padding:0 0 0 2px;flex-shrink:0;
      transition:color .15s var(--ease);
    }
    .adj-inline-remove:hover{color:var(--accent)}
    .adj-nombre{color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .adj-stats{color:var(--text-secondary);font-size:11px;flex-shrink:0;margin-left:8px;font-family:'Space Mono',monospace}
    .adj-ahorro{color:var(--success);margin-left:4px}
    .adj-header{display:flex;align-items:center;justify-content:space-between}
    .adj-title{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px;font-family:'Space Mono',monospace}
    .btn-adj-clear{
      background:none;border:none;color:var(--text-secondary);cursor:pointer;
      font-size:11px;padding:2px 6px;border-radius:var(--radius-technical);
      transition:color .15s var(--ease);font-family:'Space Mono',monospace;
      text-transform:uppercase;letter-spacing:.06em;
    }
    .btn-adj-clear:hover{color:var(--accent)}
    .adj-uploading{
      color:var(--text-secondary);font-size:12px;margin-top:4px;
      font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.06em;
    }

    /* ── Clarification bar ───────────────────────────── */
    .clarification-bar{
      margin-top:12px;
      border:1px solid var(--border-visible);
      border-radius:var(--radius-sm);
      background:var(--surface-raised);
      padding:12px 14px;
      animation:fade-in .2s var(--ease) forwards;
    }
    .clarification-bar.hidden{display:none}
    .clarification-label{
      font-family:'Space Mono',monospace;
      font-size:10px;text-transform:uppercase;letter-spacing:.08em;
      color:var(--text-secondary);margin-bottom:8px;display:block;
    }
    .clarification-question{
      font-size:14px;color:var(--text-primary);line-height:1.5;margin-bottom:12px;
    }
    .clarification-input-row{display:flex;gap:8px;align-items:center}
    .clarification-input{
      flex:1;background:transparent;
      border:1px solid var(--border-visible);border-radius:var(--radius-sm);
      color:var(--text-primary);padding:8px 12px;
      font-size:14px;font-family:'Space Grotesk',sans-serif;outline:none;
      transition:border-color .2s var(--ease);
    }
    .clarification-input:focus{border-color:var(--text-primary)}
    .btn-clarification{
      padding:8px 16px;flex-shrink:0;
      background:var(--text-display);
      border:none;border-radius:999px;color:var(--black);
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;transition:opacity .15s var(--ease);white-space:nowrap;
    }
    .btn-clarification:hover:not(:disabled){opacity:.85}
    .btn-clarification:disabled{opacity:.4;cursor:not-allowed}

    @media (max-width:768px){
      .layout, .post-layout{grid-template-columns:1fr}
      .layout{height:auto}
      .col-left, .col-right, .col-left .card, .col-right .card{height:auto;min-height:unset}
      .card-footer-row{flex-direction:column;align-items:stretch}
      .btn-run-group{justify-content:flex-end}
      body{padding:1rem;height:auto;overflow:auto}
    }

    /* ── Execution mode — creative layout ──────────────────
       When pipeline is running: config card collapses to a
       compact status strip (pipeline flow + progress bar),
       logs expand to fill the remaining screen height.
    ─────────────────────────────────────────────────────── */
    .layout.execution-mode{
      grid-template-columns:1fr;
      grid-template-rows:auto 1fr;
      align-items:stretch;
    }

    /* col-left becomes a compact status card */
    .layout.execution-mode .col-left{
      min-height:0;
      flex:0 0 auto;
    }
    .layout.execution-mode .col-left .card{
      flex:0 0 auto;
      overflow:visible;
    }

    /* Hide config-only elements during execution */
    .layout.execution-mode .pasos,
    .layout.execution-mode .tarea-section,
    .layout.execution-mode .adjuntos-zone,
    .layout.execution-mode #estimacion-inline,
    .layout.execution-mode .preset-error,
    .layout.execution-mode .config-header-actions{
      display:none !important;
    }

    /* Keep flujo-preview visible as pipeline status */
    .layout.execution-mode .flujo-preview{
      display:flex !important;
      margin-top:0;
    }
    .layout.execution-mode .card-footer-row{
      justify-content:flex-end;
      min-height:28px;
      margin-top:10px;
    }

    /* Pasos are pointer-events:none during execution (read-only) */
    .layout.execution-mode .pasos *{pointer-events:none}

    /* col-right fills remaining height, shows only logs */
    .layout.execution-mode .col-right{
      display:flex !important;
      min-height:0;
      flex:1;
    }
    .layout.execution-mode .col-right.logs-collapsed{
      display:none !important;
    }

    /* Hide resultado-card during execution — only show at the end */
    .layout.execution-mode #resultado-card{
      display:none !important;
    }

    /* Active segment pulses in interactive color */
    .layout.execution-mode .run-progress-segment.active{
      background:var(--interactive);
      animation:seg-pulse 1.2s ease-in-out infinite;
    }
    @keyframes seg-pulse{0%,100%{opacity:1}50%{opacity:.55}}

    /* ── Modal dev output ────────────────────────────── */
    .modal-overlay{
      position:fixed;inset:0;z-index:100;
      background:rgba(0,0,0,0.8);
      display:flex;align-items:center;justify-content:center;
      padding:1rem;
    }
    .modal-box{
      background:var(--surface);
      border:1px solid var(--border-visible);
      border-radius:var(--radius);
      width:100%;max-width:540px;
      padding:1.5rem 1.6rem 1.35rem;
      position:relative;
      max-height:90vh;overflow-y:auto;
    }
    .modal-adj-preview-box{
      max-width:min(860px, calc(100vw - 2rem));
    }
    .modal-adj-preview-media{
      margin-top:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:240px;
      max-height:calc(90vh - 210px);
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--black);
    }
    .modal-adj-preview-media img{
      display:block;
      max-width:100%;
      max-height:calc(90vh - 230px);
      width:auto;
      height:auto;
      object-fit:contain;
    }
    .modal-adj-preview-box .modal-actions{
      justify-content:center;
      margin-top:14px;
    }
    .modal-adj-preview-box .btn-modal-primary{
      flex:0 0 auto;
      min-width:110px;
      padding:8px 14px;
      font-size:11px;
    }
    .modal-step{display:none}
    .modal-step.active{display:block}
    .modal-title{
      font-family:'Space Grotesk',sans-serif;
      font-size:18px;font-weight:500;margin-bottom:4px;
      color:var(--text-display);letter-spacing:-.01em;
    }
    .modal-sub{font-size:14px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}
    .modal-actions{display:flex;gap:10px;margin-top:20px}
    .btn-modal-primary{
      flex:1;padding:12px 20px;
      background:var(--text-display);
      border:none;border-radius:999px;color:var(--black);
      font-family:'Space Mono',monospace;font-size:13px;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;transition:opacity .15s var(--ease);
    }
    .btn-modal-primary:hover:not(:disabled){opacity:.85}
    .btn-modal-primary:disabled{opacity:.4;cursor:not-allowed}
    .btn-modal-secondary{
      flex:1;padding:12px 20px;
      background:none;border:1px solid var(--border-visible);
      border-radius:999px;color:var(--text-secondary);
      font-family:'Space Mono',monospace;font-size:13px;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease);
    }
    .btn-modal-secondary:hover{border-color:var(--text-primary);color:var(--text-primary)}
    .modal-file-list{
      max-height:180px;overflow-y:auto;
      border:1px solid var(--border);border-radius:var(--radius-sm);
      margin-bottom:16px;
    }
    .modal-file-list{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .modal-file-list::-webkit-scrollbar{width:3px}
    .modal-file-list::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .modal-file-item{
      display:flex;align-items:center;gap:10px;
      padding:8px 12px;font-size:12px;
      border-bottom:1px solid var(--border);
    }
    .modal-file-item:last-child{border-bottom:none}
    .modal-file-badge{
      font-family:'Space Mono',monospace;
      font-size:10px;text-transform:uppercase;letter-spacing:.06em;
      padding:2px 8px;border-radius:var(--radius-technical);flex-shrink:0;
      border:1px solid;
    }
    .modal-file-badge.create{border-color:var(--success);color:var(--success);background:transparent}
    .modal-file-badge.edit{border-color:var(--warning);color:var(--warning);background:transparent}
    .modal-file-path{color:var(--text-primary);font-family:'Space Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .modal-field-label{
      font-family:'Space Mono',monospace;
      font-size:11px;color:var(--text-secondary);text-transform:uppercase;
      letter-spacing:.08em;margin-bottom:8px;display:block;
    }
    .modal-input{
      width:100%;background:transparent;
      border:1px solid var(--border-visible);border-radius:var(--radius-sm);
      color:var(--text-primary);padding:10px 12px;
      font-size:14px;font-family:'Space Mono',monospace;
      outline:none;transition:border-color .2s var(--ease);
    }
    .modal-input:focus{border-color:var(--text-primary)}
    .modal-input.input-error{border-color:var(--accent)}
    .modal-results{margin-bottom:16px}
    .modal-result-item{
      display:flex;align-items:flex-start;gap:8px;
      padding:6px 10px;font-size:12px;border-radius:var(--radius-technical);margin-bottom:4px;
    }
    .modal-result-item.ok{background:transparent;border-left:2px solid var(--success)}
    .modal-result-item.error{background:transparent;border-left:2px solid var(--accent)}
    .modal-result-path{color:var(--text-primary);font-family:'Space Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
    .modal-result-icon{flex-shrink:0;font-size:12px;font-family:'Space Mono',monospace}
    .modal-summary{
      font-size:13px;color:var(--text-secondary);
      border-top:1px solid var(--border);padding-top:12px;
      margin-top:10px;
    }
    .modal-summary strong{color:var(--text-display);font-weight:400}

    /* ── Preset dropdown ─────────────────────────────── */
    .preset-wrap{position:relative}
    .btn-preset-trigger{
      display:flex;align-items:center;gap:6px;
      background:transparent;border:1px solid var(--border-visible);
      border-radius:999px;color:var(--text-secondary);cursor:pointer;
      padding:4px 14px;
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.06em;
      transition:border-color .2s var(--ease),color .2s var(--ease);white-space:nowrap;
    }
    .btn-preset-trigger:hover,.btn-preset-trigger.open{border-color:var(--text-primary);color:var(--text-primary)}
    .preset-chevron{transition:transform .2s var(--ease);flex-shrink:0}
    .btn-preset-trigger.open .preset-chevron{transform:rotate(180deg)}
    .btn-preset-trigger.has-preset{
      color:var(--text-display);border-color:var(--text-display);
    }
    .btn-preset-trigger:disabled{
      opacity:.38;cursor:not-allowed;
    }
    .preset-dropdown{
      position:absolute;top:calc(100% + 6px);right:0;z-index:50;
      background:var(--surface-raised);border:1px solid var(--border-visible);
      border-radius:var(--radius-sm);min-width:200px;max-height:260px;overflow-y:auto;
      display:none;animation:fade-in .15s var(--ease) forwards;
    }
    .preset-dropdown.open{display:block}
    .preset-dropdown{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .preset-dropdown::-webkit-scrollbar{width:3px}
    .preset-dropdown::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .preset-item{
      display:flex;align-items:center;gap:8px;
      padding:8px 12px;font-size:13px;color:var(--text-primary);
      cursor:pointer;transition:background .15s var(--ease);
    }
    .preset-item:hover{background:var(--surface)}
    .preset-item.active{color:var(--text-display);border-left:2px solid var(--accent)}
    .preset-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .preset-active-indicator{
      display:flex;align-items:center;gap:6px;
      margin:2px 0 6px;
      width:max-content;
      padding:4px 10px;
      border:1px solid var(--border-visible);
      border-radius:999px;
      background:rgba(255,255,255,0.02);
      font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;
      color:var(--text-secondary);text-transform:uppercase;white-space:nowrap;
    }
    .preset-active-indicator.hidden{display:none}
    .preset-active-indicator.is-dirty{
      border-color:var(--warning);
      color:var(--warning);
    }
    .preset-item-share{
      background:none;border:none;color:var(--text-disabled);cursor:pointer;
      padding:2px 4px;border-radius:var(--radius-technical);font-size:11px;
      line-height:1;transition:color .15s var(--ease);flex-shrink:0;
    }
    .preset-item-share:hover{color:var(--text-primary)}
    .preset-separator{height:1px;background:var(--border);margin:4px 0}
    .preset-dropdown-actions{
      display:flex;gap:6px;padding:8px 10px;
      border-top:1px solid var(--border);
    }
    .preset-dropdown-actions.hidden{display:none}
    .preset-action-btn{
      flex:1;padding:6px 10px;background:none;
      border:1px solid var(--border-visible);border-radius:999px;
      color:var(--text-secondary);cursor:pointer;
      font-family:'Space Mono',monospace;font-size:11px;
      text-transform:uppercase;letter-spacing:.06em;
      transition:border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
    }
    .preset-action-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}
    .preset-action-btn.danger:hover{border-color:var(--accent);color:var(--accent)}
    .preset-empty{
      padding:12px;font-size:13px;
      color:var(--text-disabled);
      font-family:'Space Mono',monospace;text-transform:uppercase;
      letter-spacing:.06em;font-size:11px;
    }
    .preset-feedback{
      font-family:'Space Mono',monospace;
      font-size:12px;flex-shrink:0;
      max-height:0;overflow:hidden;opacity:0;
      transition:max-height .2s var(--ease),opacity .2s var(--ease),padding .2s var(--ease);
      padding-top:0;padding-bottom:0;
    }
    .preset-feedback.visible{max-height:2rem;opacity:1;padding:4px 2px}
    .preset-feedback.error{color:var(--accent)}
    .preset-feedback.success{color:var(--success)}

    /* ── Run button group (ejecutar + stop + pause) ──── */
    .btn-run-group{display:inline-flex;gap:8px;margin-top:0;flex-wrap:wrap;align-items:center;justify-content:flex-start;flex:0 0 auto}
    .btn-run-group .btn-run{margin-top:0;flex:0 0 auto;justify-content:center}
    .run-state-badge{
      display:none;align-items:center;gap:6px;
      min-height:28px;padding:0 10px;
      border:1px solid var(--border-visible);border-radius:999px;
      color:var(--text-secondary);
      font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;
      background:transparent;
    }
    .run-state-badge::before{
      content:"";
      width:6px;height:6px;border-radius:50%;
      background:var(--success);
      opacity:.85;
      animation:status-pulse 1.8s ease-in-out infinite;
    }
    .btn-stop{
      padding:0 12px;min-height:28px;
      background:transparent;border:1px solid var(--border-visible);
      border-radius:999px;color:var(--text-secondary);
      font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;display:none;align-items:center;gap:6px;
      transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
    }
    .btn-stop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}
    .btn-pause{
      padding:0 12px;min-height:28px;
      background:transparent;border:1px solid var(--border);
      border-radius:999px;color:var(--text-secondary);
      font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
      text-transform:uppercase;letter-spacing:.06em;
      cursor:pointer;display:none;align-items:center;gap:6px;
      transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
    }
    .btn-pause:hover{border-color:var(--warning);color:var(--warning);background:rgba(212,168,67,0.1)}
    .btn-pause.is-paused{
      border-color:var(--interactive);
      color:var(--interactive);
      background:rgba(91,155,246,0.08);
    }
    .run-state-badge.is-paused::before,
    .logs-status-badge.is-paused::before{
      animation-play-state:paused;
      opacity:.55;
    }

    @keyframes status-pulse{
      0%,100%{transform:scale(1);opacity:.85}
      50%{transform:scale(1.45);opacity:.35}
    }

    /* ── Confirm modal ───────────────────────────────── */
    .modal-confirm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
    .modal-confirm-tarea{
      background:transparent;border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:10px 12px;
      font-size:14px;color:var(--text-primary);line-height:1.5;
      max-height:110px;overflow-y:auto;word-break:break-word;white-space:pre-wrap;
    }
    .modal-confirm-tarea{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
    .modal-confirm-tarea::-webkit-scrollbar{width:3px}
    .modal-confirm-tarea::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}
    .modal-confirm-section{margin-bottom:16px}
    .coste-nivel-wrap{display:flex;align-items:center;gap:6px;margin-top:4px}
    .coste-nivel{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:13px;font-weight:400;letter-spacing:.01em}
    .coste-nivel-usd{font-family:'Space Mono',monospace;font-size:12px;color:var(--text-secondary)}
    /* Inline cost display above execute */
    #estimacion-inline{
      border-top:1px solid var(--border);
      padding-top:10px;
    }
  /* ── Segmented Progress bar ──────────────────── */
  .run-progress{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }
  .run-progress-track{
    display:flex;gap:2px;height:6px;margin-bottom:8px;
  }
  .run-progress-segment{
    flex:1;background:var(--border);
    /* No border-radius — square mechanical blocks */
  }
  .run-progress-segment.filled{background:var(--text-display)}
  .run-progress-segment.active{background:var(--text-display)}
  .run-progress-label{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-secondary);letter-spacing:.04em;
  }
  #btn-show-logs{
    border-color:var(--border);
    color:var(--text-disabled);
    padding:4px 10px;
  }
  #btn-show-logs:hover{
    border-color:var(--text-secondary);
    color:var(--text-secondary);
  }
  /* Fallback continuous bar (hidden by default, used by JS) */
  .run-progress-bar-wrap{display:none}

  /* ── Historial ─────────────────────────────── */
  .historial-item{display:flex;flex-direction:column;gap:4px;padding:10px 4px;border-bottom:1px solid var(--border)}
  .historial-item:last-child{border-bottom:none}
  .historial-flujo{font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .historial-meta{display:flex;align-items:center}
  .historial-ts{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-secondary)}
  .historial-cost{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-display);margin-left:auto}
  .historial-empty{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-disabled);padding:8px 4px;text-transform:uppercase;letter-spacing:.06em}

  /* ── Auth screen ─────────────────────────────── */
  #auth-screen{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:var(--black);
  }
  #auth-screen::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle, var(--border-visible) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:.45;
  }
  .auth-box{
    width:100%;max-width:360px;
    background:var(--surface);
    border:1px solid var(--border-visible);
    border-top:2px solid var(--text-display);
    border-radius:var(--radius);
    padding:2rem 2rem 1.75rem;
    position:relative;z-index:1;
  }
  .auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:2rem}
  .auth-logo-icon{color:var(--text-display)}
  .auth-logo-icon svg{width:28px;height:28px}
  .auth-logo-text{
    font-family:'Doto','Space Mono',monospace;
    font-size:22px;font-weight:400;color:var(--text-display);
    letter-spacing:-.02em;
  }
  .auth-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border)}
  .auth-tab{
    flex:1;padding:10px 0;
    font-family:'Space Mono',monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-disabled);background:none;border:none;cursor:pointer;
    border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color .15s var(--ease),border-color .15s var(--ease);
  }
  .auth-tab.active{color:var(--text-display);border-bottom-color:var(--text-display)}
  .auth-field{margin-bottom:16px}
  .auth-field label{
    display:block;font-family:'Space Mono',monospace;
    font-size:10px;color:var(--text-secondary);margin-bottom:8px;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .auth-field input{
    width:100%;padding:10px 14px;
    background:transparent;border:1px solid var(--border-visible);
    border-radius:var(--radius-sm);color:var(--text-primary);
    font-family:'Space Grotesk',sans-serif;font-size:14px;
    outline:none;transition:border-color .2s var(--ease);box-sizing:border-box;
  }
  .auth-field input:focus{
    border-color:var(--border-visible);
    border-left:2px solid var(--text-display);
    padding-left:13px;
  }
  .auth-pwd-wrap{position:relative}
  .auth-pwd-wrap input{padding-right:2.4rem}
  .auth-pwd-eye{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;padding:2px;
    color:var(--text-secondary);line-height:1;
    transition:color .15s var(--ease);
  }
  .auth-pwd-eye:hover{color:var(--text-primary)}
  .auth-btn{
    width:100%;padding:12px;margin-top:4px;
    background:var(--text-display);color:var(--black);border:none;
    border-radius:999px;
    font-family:'Space Mono',monospace;font-size:13px;
    text-transform:uppercase;letter-spacing:.06em;
    cursor:pointer;transition:opacity .15s var(--ease);
  }
  .auth-btn:hover{opacity:.85}
  .auth-btn:disabled{opacity:.4;cursor:not-allowed}
  .auth-error{
    font-family:'Space Mono',monospace;
    font-size:12px;color:var(--accent);margin-top:16px;min-height:1.1rem;text-align:center;
  }
  .auth-user{
    display:flex;align-items:center;gap:8px;
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-secondary);margin-left:auto;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .auth-user span{color:var(--text-display);font-weight:400}

  /* ── Header username button ────────────────────────────── */
  .header-username-btn{
    cursor:pointer;border-bottom:1px solid transparent;
    transition:border-color .15s var(--ease),color .15s var(--ease);
    padding-bottom:1px;
    max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .header-username-btn:hover{border-color:var(--text-primary);color:var(--text-display)}

  /* ── Settings gear button ──────────────────── */
  .btn-settings{
    background:none;border:1px solid var(--border-visible);
    border-radius:999px;width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text-secondary);
    transition:border-color .2s var(--ease),color .2s var(--ease);
    flex-shrink:0;
  }
  .btn-settings:hover{border-color:var(--text-primary);color:var(--text-primary)}
  .btn-settings svg{width:16px;height:16px}

  /* ── Settings Drawer ───────────────────────────────────── */
  .drawer-overlay{
    position:fixed;inset:0;z-index:8000;
    background:rgba(0,0,0,.55);
    opacity:0;transition:opacity .25s var(--ease);
  }
  [data-theme="light"] .drawer-overlay{background:rgba(0,0,0,.3)}
  .drawer-overlay:not(.hidden){opacity:1}
  .settings-drawer{
    position:fixed;top:0;right:0;height:100vh;width:360px;
    background:var(--surface);border-left:1px solid var(--border-visible);
    z-index:8001;display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .settings-drawer.open{transform:translateX(0)}
  .drawer-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem 1.25rem 1rem;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .drawer-title{
    font-family:'Space Mono',monospace;font-size:12px;
    font-weight:700;letter-spacing:.1em;color:var(--text-display);
    text-transform:uppercase;
  }
  .drawer-close{
    background:none;border:none;cursor:pointer;
    color:var(--text-disabled);font-size:14px;padding:2px 4px;
    transition:color .15s var(--ease);line-height:1;
  }
  .drawer-close:hover{color:var(--text-primary)}
  .drawer-tabs{
    display:flex;gap:0;padding:0 1.25rem;
    border-bottom:1px solid var(--border);flex-shrink:0;
  }
  .drawer-tab{
    background:none;border:none;border-bottom:2px solid transparent;
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-disabled);
    padding:.65rem .5rem;cursor:pointer;margin-bottom:-1px;
    transition:color .15s var(--ease),border-color .15s var(--ease);
  }
  .drawer-tab.active{color:var(--text-display);border-bottom-color:var(--text-display)}
  .drawer-panel{display:block}
  .drawer-loading{
    font-family:'Space Mono',monospace;font-size:11px;color:var(--text-disabled);
    text-transform:uppercase;letter-spacing:.06em;padding:1.5rem 0;
  }
  .drawer-body{flex:1;overflow-y:auto;padding:1.25rem}
  .cost-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
  .cost-stat{
    background:var(--surface-raised);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.9rem 1rem;
  }
  .cost-stat-label{
    display:block;font-family:'Space Mono',monospace;font-size:9px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-disabled);margin-bottom:.4rem;
  }
  .cost-stat-value{
    display:block;font-family:'Space Mono',monospace;font-size:1.2rem;
    font-weight:700;color:var(--text-display);letter-spacing:-.02em;
  }
  .cost-meta-row{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.25rem;
  }
  .cost-meta-item{
    background:var(--surface-raised);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.6rem .8rem;
  }
  .cost-meta-label{
    display:block;font-family:'Space Mono',monospace;font-size:8px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-disabled);margin-bottom:.25rem;
  }
  .cost-meta-val{
    display:block;font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-primary);font-weight:700;
  }
  .cost-table-label{
    font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-disabled);
    margin-bottom:.5rem;
  }
  .cost-run-row{
    display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
    padding:.5rem 0;border-bottom:1px solid var(--border);
    width:100%;background:none;border-left:none;border-right:none;border-top:none;
    cursor:pointer;text-align:left;
    transition:background .15s var(--ease);
  }
  .cost-run-row:last-child{border-bottom:none}
  .cost-run-row:hover{background:var(--surface-raised);margin:0 -.5rem;padding-left:.5rem;padding-right:.5rem}
  .cost-run-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .cost-run-flujo{
    font-size:11px;color:var(--text-primary);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .cost-run-ts{
    font-family:'Space Mono',monospace;font-size:9px;color:var(--text-disabled);
  }
  .cost-run-amount{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-secondary);white-space:nowrap;flex-shrink:0;
  }
  .drawer-footer{
    flex-shrink:0;border-top:1px solid var(--border);
    padding:.75rem 1.25rem;display:flex;flex-direction:column;gap:0;
  }
  .drawer-footer-btn{
    display:flex;align-items:center;gap:8px;width:100%;
    background:none;border:none;cursor:pointer;
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-disabled);padding:.6rem 0;
    transition:color .15s var(--ease);
  }
  .drawer-footer-btn:hover{color:var(--text-primary)}
  .drawer-footer-btn svg{width:14px;height:14px;flex-shrink:0}
  .drawer-logout{border-top:1px solid var(--border)}
  .drawer-logout:hover{color:var(--accent)}

  /* ══════════════════════════════════════════
     3D Agent — Tripo integration
     ══════════════════════════════════════════ */

  /* ── Header nav pills ──────────────────── */
  .main-nav{
    display:flex;align-items:center;gap:4px;
    margin:0 auto 0 1.5rem;
  }
  .nav-pill{
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    padding:.35rem .8rem;
    border-radius:999px;border:1px solid var(--border);
    background:none;color:var(--text-secondary);
    cursor:pointer;transition:all .15s var(--ease);
  }
  .nav-pill:hover{color:var(--text-primary);border-color:var(--text-secondary)}
  .nav-pill.active{
    background:var(--text-display);color:var(--surface);
    border-color:var(--text-display);
  }

  /* ── 3D view layout ─────────────────────── */
  .col-3d{
    width:100%;max-width:760px;margin:0 auto;
    display:flex;flex-direction:column;gap:1.25rem;
  }

  /* ── API key bar ────────────────────────── */
  .tripo-key-bar{
    display:flex;align-items:center;gap:.75rem;margin-left:auto;
  }
  .tripo-key-badge{
    display:inline-flex;align-items:center;gap:5px;
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-secondary);
  }
  .tripo-key-badge svg{color:var(--text-display)}
  .tripo-key-missing{
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-disabled);
  }

  /* ── Drop zone ──────────────────────────── */
  .tripo-drop-zone{
    border:1px dashed var(--border);border-radius:8px;
    min-height:200px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:border-color .15s var(--ease), background .15s var(--ease);
    overflow:hidden;position:relative;
  }
  .tripo-drop-zone:hover,.tripo-drop-zone.drag-over{
    border-color:var(--text-display);background:var(--surface-secondary);
  }
  .tripo-drop-placeholder{
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    padding:2rem 1.5rem;
    color:var(--text-disabled);pointer-events:none;
  }
  .tripo-drop-label{
    font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-secondary);
  }
  .tripo-drop-hint{
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-disabled);
  }
  .tripo-preview-img{
    width:100%;max-height:320px;object-fit:contain;
    padding:.75rem;border-radius:8px;
  }

  /* ── File info row ──────────────────────── */
  .tripo-file-info{
    display:flex;align-items:center;gap:.5rem;
    margin-top:.75rem;padding:.5rem .75rem;
    background:var(--surface-secondary);border-radius:6px;
  }
  .tripo-file-name{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-primary);flex:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .tripo-file-size{
    font-family:'Space Mono',monospace;font-size:10px;
    color:var(--text-disabled);flex-shrink:0;
  }

  /* ── Error line ─────────────────────────── */
  .tripo-error{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--accent);letter-spacing:.04em;
    min-height:1.2rem;margin-top:.5rem;
  }

  /* ── 3D Viewer ──────────────────────────── */
  .tripo-viewer-wrap{
    display:flex;flex-direction:column;gap:.5rem;
    margin-top:.25rem;
  }
  .tripo-viewer-hint{
    font-family:'Space Mono',monospace;font-size:10px;
    color:var(--text-disabled);text-align:center;
    letter-spacing:.06em;text-transform:uppercase;
    margin:0;
  }

  /* ── History ────────────────────────────── */
  .tripo-history-item{
    padding:.75rem 4px;border-bottom:1px solid var(--border);
    display:flex;flex-direction:column;gap:.35rem;
  }
  .tripo-history-item:last-child{border-bottom:none}
  .tripo-history-meta{
    display:flex;align-items:center;gap:.75rem;
  }
  .tripo-history-date{
    font-family:'Space Mono',monospace;font-size:10px;
    color:var(--text-secondary);
  }
  .tripo-history-err{
    font-family:'Space Mono',monospace;font-size:10px;
    color:var(--accent);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .tripo-history-actions{
    display:flex;gap:.4rem;
  }
  .tripo-history-empty{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--text-disabled);letter-spacing:.06em;text-transform:uppercase;
    padding:.5rem 4px;
  }

  /* ── Status badges ──────────────────────── */
  .tripo-badge{
    font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    padding:.15rem .45rem;border-radius:3px;
    border:1px solid currentColor;
  }
  .tripo-badge--completed{color:var(--text-display)}
  .tripo-badge--queued,.tripo-badge--running,.tripo-badge--processing{
    color:var(--text-secondary);
  }
  .tripo-badge--failed{color:var(--accent)}

  /* ── Buttons ────────────────────────────── */
  .btn-tripo-sm{
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    padding:.25rem .6rem;border-radius:999px;
    border:1px solid var(--border);background:none;
    color:var(--text-secondary);cursor:pointer;
    transition:all .15s var(--ease);
  }
  .btn-tripo-sm:hover{color:var(--text-primary);border-color:var(--text-secondary)}
  .btn-tripo-action{
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    padding:.3rem .75rem;border-radius:999px;
    border:1px solid var(--text-display);background:none;
    color:var(--text-display);cursor:pointer;
    transition:all .15s var(--ease);
  }
  .btn-tripo-action:hover{background:var(--text-display);color:var(--surface)}

  /* ── Tripo key modal error ──────────────── */
  .tripo-key-error{
    font-family:'Space Mono',monospace;font-size:11px;
    color:var(--accent);min-height:1.1rem;
    margin-bottom:.5rem;
  }

  /* ── Engine selector pills ──────────────── */
  .engine-pill{
    font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    padding:.3rem .8rem;border-radius:999px;
    border:1px solid var(--border-visible);background:none;
    color:var(--text-secondary);cursor:pointer;
    transition:all .15s var(--ease);
    display:inline-flex;align-items:center;gap:.35rem;
  }
  .engine-pill:hover:not(:disabled){
    color:var(--text-primary);border-color:var(--text-secondary);
  }
  .engine-pill.active{
    background:var(--text-display);color:var(--surface);
    border-color:var(--text-display);
  }
  .engine-pill:disabled{
    opacity:.45;cursor:not-allowed;
  }
  .engine-v2-badge{
    font-size:8px;letter-spacing:.06em;
    color:var(--text-disabled);border:1px solid var(--border);
    border-radius:3px;padding:.05rem .25rem;
  }
  .tripo-badge--engine{
    color:var(--text-disabled);
  }

  /* ── 3D view scroll container ───────────── */
  #view-3d{
    overflow-y:auto;
    height:calc(100vh - 7rem);
  }
  #view-3d{scrollbar-width:thin;scrollbar-color:var(--border-visible) transparent}
  #view-3d::-webkit-scrollbar{width:2px}
  #view-3d::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}