*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a14;--surface:#11111e;--card:#161628;--border:#22223a;
  --text:#e8e8f0;--soft:#bbbbc8;--muted:#8a8a9a;--accent:#9ea0ff;--accent2:#c4a5ff;
  --ok:#4ade80;--err:#ff7373;--warn:#f59e0b;
}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent2)}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}
code{font-family:ui-monospace,Menlo,monospace;background:#0d0d1c;padding:2px 6px;border-radius:4px;font-size:13px;color:var(--accent)}

header{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border);background:rgba(10,10,20,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.brand{font-size:18px;font-weight:600;color:var(--accent)}
.brand span{color:var(--text)}
.head-right{display:flex;align-items:center;gap:14px}
.email{color:var(--soft);font-size:14px}

button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:11px 20px;font-weight:600;transition:transform .15s,filter .15s,border-color .15s}
button:hover{transform:translateY(-1px)}button:disabled{opacity:.5;cursor:wait;transform:none}
button.primary{background:var(--accent);color:#0a0a14}button.primary:hover{filter:brightness(1.1)}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}

main{max-width:760px;margin:0 auto;padding:32px 24px 60px}

/* Auth */
.auth{display:flex;justify-content:center;padding-top:40px}
.auth-card{max-width:420px;width:100%}
.auth-card h1{font-size:24px;text-align:center;margin-bottom:20px}
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:20px}
.tabs button{flex:1;background:transparent;color:var(--muted);padding:9px;border-radius:7px}
.tabs button.active{background:var(--accent);color:#0a0a14}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500}
input{padding:11px 14px;background:#0d0d1c;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;outline:none}
input:focus{border-color:var(--accent)}
input[readonly]{color:var(--soft)}
.error{color:var(--err);font-size:13.5px;background:rgba(255,115,115,.1);border:1px solid rgba(255,115,115,.25);border-radius:6px;padding:8px 12px}
.error:empty{display:none}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:16px}
.card h3{font-size:16px;margin-bottom:6px}
.card h4{font-size:16px;margin-bottom:6px}

/* Dashboard */
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.dash-head h1{font-size:24px}
.plan-badge{padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600}
.plan-free{background:rgba(138,138,154,.15);color:var(--soft)}
.plan-starter{background:rgba(158,160,255,.15);color:var(--accent)}
.plan-pro{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0a14}

.token-row{display:flex;gap:8px;margin-top:12px}
.token-row input{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:13px}

.grid.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px}
.grid.kpi .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.grid.kpi .v{font-size:22px;font-weight:600}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.plan-opt{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px}
.plan-opt.highlight{border-color:var(--accent)}
.plan-opt .price{font-size:26px;font-weight:700;margin:4px 0 12px}
.plan-opt .price small{font-size:13px;color:var(--muted);font-weight:400}
.plan-opt ul{list-style:none;margin:0 0 16px;padding:0}
.plan-opt li{font-size:13.5px;color:var(--soft);padding:4px 0}
.plan-opt li::before{content:"→ ";color:var(--accent)}
.plan-opt button{width:100%}

/* Agents */
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
button.small{padding:6px 12px;font-size:13px}
.agent-list{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.agent-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px}
.agent-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.snippet-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.catalog{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.cat-item{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px}
.cat-item p{margin-top:4px}

.create-form{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin:12px 0;display:flex;flex-direction:column;gap:12px}
.create-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.connect{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.conn-tabs{display:flex;gap:6px;margin-bottom:12px}
.conn-tabs button{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:8px;border-radius:7px;font-size:13px;font-weight:500}
.conn-tabs button.active{background:var(--accent);color:#0a0a14;border-color:var(--accent)}
.snip{background:#0d0d1c;border:1px solid var(--border);border-radius:8px;padding:12px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;color:var(--soft);overflow-x:auto;white-space:pre;margin-bottom:8px}
.domains{width:100%;padding:10px 12px;background:#0d0d1c;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:13px;outline:none;resize:vertical;margin-bottom:8px}
.domains:focus{border-color:var(--accent)}

/* Studio: prompt templates + live test */
.prompt-tpls{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{background:var(--bg);border:1px solid var(--border);color:var(--accent);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer;font-weight:500}
.chip:hover{border-color:var(--accent)}
.test-block{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.test-chat{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.tmsg{max-width:88%;padding:8px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.tmsg.user{align-self:flex-end;background:var(--accent);color:#0a0a14}
.tmsg.assistant{align-self:flex-start;background:#1f1f33;color:var(--text)}
.test-form{display:flex;gap:8px}
.test-form input{flex:1}

/* Visual tools editor */
.tools-editor{margin:4px 0}
.tool-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.tool-head{display:flex;gap:8px;align-items:center}
.tool-name{flex:1;font-family:ui-monospace,Menlo,monospace}
.params{display:flex;flex-direction:column;gap:6px;padding-left:10px;border-left:2px solid var(--border)}
.param-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.param-row input{flex:1;min-width:70px;padding:7px 10px}
.param-row select{width:auto;padding:7px}
.param-req{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.param-req input{width:auto}

@media (max-width:520px){.dash-head{flex-direction:column;align-items:flex-start}.cat-item{flex-direction:column;align-items:flex-start}.create-grid{grid-template-columns:1fr}}

/* Alpine: prevent FOUC on initial paint */
[x-cloak]{display:none!important}

/* "Avanzado" collapsible — hides technical bits from non-tech users by default */
details.advanced{margin-top:8px}
details.advanced > summary{
  cursor:pointer;
  list-style:none;
  font-size:13px;
  color:var(--muted);
  padding:6px 0;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
details.advanced > summary::-webkit-details-marker{display:none}
details.advanced > summary::before{content:"▸";font-size:10px;transition:transform 120ms;display:inline-block}
details.advanced[open] > summary::before{transform:rotate(90deg)}
details.advanced > summary:hover{color:var(--fg)}
details.advanced > .adv-body{padding-top:10px}

/* Inline success banner (e.g. "Agent created" inside the create form) */
.success-msg{
  background:#e8f7ec;
  border:1px solid #b8e2c2;
  color:#1f6b34;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  margin:8px 0;
  line-height:1.4;
}