/* ─────────────────────────────────────────────────────────────
   Black&WhiteIA — Panel de control · sistema de diseño compartido
   Usado por index.html, loopa.html y stack-selector.html.
   Paleta de marca (glow naranja sobre negro, el look que ya usan las
   piezas visuales del negocio): naranja = acento/marca (glow),
   verde = positivo/construido, ámbar = pendiente, rojo = crítico.
   Siempre acompañados de texto/ícono, nunca solo color.
   Nota: las variables se llaman --cyan/--cyan-dim/--cyan-glow por
   herencia del primer borrador (cian) — el valor real ahora es naranja;
   no se renombraron para no tocar los muchos `class="... cyan"` /
   `var(--cyan)` generados en las 3 páginas.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#050507; --surface:#0C0C10; --card:#111116; --border:#1C1C24;
  --cyan:#FF6A1A; --cyan-dim:#CC4E0A; --cyan-glow:rgba(255,106,26,.12);
  --white:#F2F2F0; --muted:#8A8A94; --muted2:#4A4A54;
  --green:#00E699; --amber:#FFB020; --red:#FF5C5C;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--white);font-family:'Inter',sans-serif;font-size:14px;line-height:1.6;position:relative;}

/* Glow ambiental naranja de fondo — CSS puro (sin assets de imagen).
   Fijo al viewport, detrás de todo, para evocar el look de las piezas
   visuales de la marca sin depender de una herramienta de generación
   de imágenes. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(640px 420px at 12% -8%, rgba(255,106,26,.18), transparent 60%),
    radial-gradient(520px 360px at 92% 6%, rgba(255,106,26,.11), transparent 60%),
    radial-gradient(760px 520px at 50% 115%, rgba(255,106,26,.08), transparent 60%);
  pointer-events:none;
}

.wrap{max-width:1280px;margin:0 auto;padding:24px 32px 100px;}

/* ── TOP NAV (compartida entre las 3 páginas) ──────────────── */
.topnav{max-width:1280px;margin:0 auto;padding:20px 32px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.topnav-brand{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:var(--white);text-decoration:none;display:flex;align-items:center;gap:8px;}
.topnav-brand span{color:var(--cyan);}
.topnav-links{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;}
.topnav-link{font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:8px 14px;border-radius:7px;color:var(--muted);text-decoration:none;transition:.15s;}
.topnav-link:hover{color:var(--white);}
.topnav-link.active{background:var(--cyan-glow);color:var(--cyan);}

.head{margin-bottom:40px;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;}
h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.1;margin-bottom:10px;}
h1 span{color:var(--cyan);}
.sub{color:var(--muted);font-size:14.5px;max-width:640px;}

.layout{display:grid;grid-template-columns:280px 1fr;gap:24px;}
@media(max-width:860px){.layout{grid-template-columns:1fr;}}

/* ── SERVICE / VERTICAL LIST ──────────────────────────────── */
.svc-list{display:flex;flex-direction:column;gap:6px;position:sticky;top:24px;align-self:start;}
.svc-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;text-align:left;color:var(--muted);
  transition:.15s;font-size:13px;font-weight:500;font-family:inherit;
}
.svc-btn:hover{border-color:rgba(255,106,26,.3);color:var(--white);}
.svc-btn.active{background:var(--cyan-glow);border-color:var(--cyan);color:var(--cyan);}
.svc-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,106,26,.08);flex-shrink:0;font-size:13px;}
.svc-btn.active .svc-icon{background:rgba(255,106,26,.18);}

/* ── MAIN PANEL ────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;min-height:600px;}

.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.panel-title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:800;color:var(--white);}
.panel-desc{color:var(--muted);font-size:13.5px;margin-bottom:24px;max-width:640px;}

.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
.badge.margin{border-color:rgba(0,230,153,.3);color:var(--green);}
.badge.essential{border-color:var(--cyan);color:var(--cyan);}

.divider{height:1px;background:var(--border);margin:24px 0;}

/* ── GROUPS / TOOL CARDS ──────────────────────────────────── */
.group-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
  display:flex;align-items:center;gap:10px;margin:22px 0 12px;}
.group-title::after{content:'';flex:1;height:1px;background:var(--border);}
.group-title:first-of-type{margin-top:0;}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.tool-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;
  transition:.15s;
}
.tool-card:hover{border-color:rgba(255,106,26,.35);}
.tool-card.required{border-left:3px solid var(--cyan);}
.tool-card.optional{border-left:3px solid var(--muted2); opacity:.85;}

.tool-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.tool-name{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:var(--white);}
.tool-tag{font-size:9.5px;font-family:'JetBrains Mono',monospace;padding:1px 7px;border-radius:10px;white-space:nowrap;flex-shrink:0;}
.tool-tag.req{background:rgba(255,106,26,.1);color:var(--cyan);}
.tool-tag.opt{background:rgba(138,138,148,.12);color:var(--muted);}

.tool-why{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:8px;}
.tool-cost{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green);}
.tool-cost.free{color:var(--muted2);}

/* ── SUMMARY BOX ───────────────────────────────────────────── */
.summary{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-top:26px;}
.summary-title{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.summary-item .label{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.summary-item .val{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:800;color:var(--white);}
.summary-item .val.cyan{color:var(--cyan);}
.summary-item .val.green{color:var(--green);}

/* ── WHY BOX ───────────────────────────────────────────────── */
.why-box{background:rgba(255,106,26,.05);border:1px solid rgba(255,106,26,.2);border-radius:10px;padding:14px 16px;margin-top:20px;
  font-size:12.5px;color:var(--muted);line-height:1.6;}
.why-box b{color:var(--cyan);font-weight:600;}

/* ── SEARCH ────────────────────────────────────────────────── */
.search-wrap{margin-bottom:14px;}
.search-input{
  width:100%;background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;color:var(--white);font-size:12.5px;font-family:'Inter',sans-serif;
}
.search-input:focus{outline:none;border-color:var(--cyan);}
.search-input::placeholder{color:var(--muted2);}

/* ── MODE / VERTICAL TABS ─────────────────────────────────── */
.mode-tabs{display:flex;gap:6px;margin-bottom:24px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:4px;width:fit-content;flex-wrap:wrap;}
.mode-tab{font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:8px 16px;border-radius:7px;
  color:var(--muted);cursor:pointer;transition:.15s;background:none;border:none;}
.mode-tab.active{background:var(--cyan-glow);color:var(--cyan);}
.mode-tab:hover:not(.active){color:var(--white);}

/* ── COMBO CHECKBOX LIST ──────────────────────────────────── */
.svc-check{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:.15s;font-size:13px;font-weight:500;color:var(--muted);
}
.svc-check:hover{border-color:rgba(255,106,26,.3);}
.svc-check.checked{background:var(--cyan-glow);border-color:var(--cyan);color:var(--white);}
.check-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--muted2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:10px;}
.svc-check.checked .check-box{background:var(--cyan);border-color:var(--cyan);color:#050507;}

/* ── COMBO PANEL ───────────────────────────────────────────── */
.combo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;
  color:var(--muted2);text-align:center;gap:10px;}
.combo-empty .big{font-size:32px;}

.savings-hero{background:linear-gradient(135deg,rgba(255,106,26,.08),rgba(0,230,153,.04));
  border:1px solid rgba(255,106,26,.25);border-radius:12px;padding:22px 26px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.savings-num{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:800;color:var(--green);line-height:1;}
.savings-label{font-size:12px;color:var(--muted);margin-top:4px;}
.savings-detail{text-align:right;font-size:12px;color:var(--muted);}
.savings-detail b{color:var(--white);}

.shared-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.shared-pill{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid rgba(255,106,26,.3);
  border-radius:20px;padding:6px 14px 6px 10px;font-size:12px;}
.shared-count{background:var(--cyan);color:#050507;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;border-radius:10px;padding:1px 6px;}

.combo-svc-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.combo-svc-icon{width:28px;height:28px;border-radius:7px;background:rgba(255,106,26,.08);
  display:flex;align-items:center;justify-content:center;font-size:13px;}
.combo-svc-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13.5px;}
.unique-tag{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted2);}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ── ROI BOX ───────────────────────────────────────────────── */
.roi-box{margin-top:20px;}
.roi-hero{
  background:linear-gradient(135deg,rgba(255,106,26,.08),rgba(0,230,153,.04));
  border:1px solid rgba(255,106,26,.25);border-radius:12px;padding:22px 26px;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.roi-cost-col .label{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.roi-cost-col .val{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--white);}
.roi-cost-col .note{font-size:11px;color:var(--muted);margin-top:3px;max-width:220px;}
.roi-arrow{font-size:20px;color:var(--muted2);}
.roi-value-col{text-align:right;}
.roi-value-col .val{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--green);}
.roi-value-col .label{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.roi-multiple{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);
  background:rgba(255,106,26,.08);border:1px solid rgba(255,106,26,.25);
  border-radius:20px;padding:4px 12px;display:inline-block;margin-top:6px;
}

.funnel-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--card);
  border:1px solid var(--border);border-radius:8px;margin-bottom:6px;font-size:12px;}
.funnel-num{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--cyan);min-width:26px;text-align:center;
  background:rgba(255,106,26,.08);border-radius:6px;padding:2px 0;font-size:11px;}
.funnel-label{color:var(--muted);flex:1;}
.funnel-val{color:var(--white);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:11.5px;}

.status-pill{font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 10px;border-radius:20px;font-weight:600;}
.status-pill.built{background:rgba(0,230,153,.1);color:var(--green);border:1px solid rgba(0,230,153,.3);}
.status-pill.tobuild{background:rgba(255,176,32,.1);color:var(--amber);border:1px solid rgba(255,176,32,.3);}

/* ── FILTER TOGGLE ─────────────────────────────────────────── */
.filter-toggle{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;cursor:pointer;font-size:12px;color:var(--muted);
  transition:.15s;
}
.filter-toggle:hover{border-color:rgba(255,106,26,.3);}
.toggle-switch{width:32px;height:18px;border-radius:10px;background:var(--card);border:1px solid var(--border);
  position:relative;flex-shrink:0;transition:.15s;}
.toggle-switch.on{background:rgba(255,106,26,.25);border-color:var(--cyan);}
.toggle-knob{width:12px;height:12px;border-radius:50%;background:var(--muted);position:absolute;top:2px;left:2px;transition:.15s;}
.toggle-switch.on .toggle-knob{background:var(--cyan);left:17px;}

/* ── MARGIN CALCULATOR ────────────────────────────────────── */
.calc-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 26px;margin-bottom:24px;}
.calc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.calc-title{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);
  display:flex;align-items:center;gap:8px;}
.calc-clients-val{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--white);}
.calc-clients-val span{font-size:12px;color:var(--muted);font-weight:400;}

.slider-wrap{margin-bottom:20px;}
input[type="range"]{
  width:100%;height:4px;border-radius:2px;background:var(--border);outline:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--cyan);cursor:pointer;box-shadow:0 0 12px rgba(255,106,26,.5);border:2px solid var(--bg);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--cyan);cursor:pointer;
  box-shadow:0 0 12px rgba(255,106,26,.5);border:2px solid var(--bg);
}
.slider-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted2);margin-top:6px;
  font-family:'JetBrains Mono',monospace;}

.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.calc-item{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px 14px;}
.calc-item .label{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.calc-item .val{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:var(--white);}
.calc-item .val.cyan{color:var(--cyan);}
.calc-item .val.green{color:var(--green);}
.calc-item .val.amber{color:var(--amber);}

/* 2-segment stacked bar (costo vs. margen): extremos redondeados + separación
   de 2px entre segmentos, cada segmento con su etiqueta directa (nunca solo color). */
.calc-bar-wrap{margin-top:4px;}
.calc-bar{height:22px;border-radius:6px;overflow:hidden;display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);padding:1px;}
.calc-bar-cost{background:linear-gradient(90deg,rgba(255,92,92,.4),rgba(255,92,92,.25));border-radius:4px;}
.calc-bar-profit{background:linear-gradient(90deg,rgba(0,230,153,.4),rgba(0,230,153,.25));border-radius:4px;}
.calc-bar-label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px;}
.calc-bar-label b{color:var(--white);}

/* ── COPY BUTTON ───────────────────────────────────────────── */
.copy-btn{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:.15s;
}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.copy-btn.copied{border-color:var(--green);color:var(--green);background:rgba(0,230,153,.08);}

/* ── VERSUS TABLE ──────────────────────────────────────────── */
.versus-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:12.5px;}
.versus-table th{text-align:left;padding:9px 12px;font-size:10px;color:var(--muted2);
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
.versus-table th:not(:first-child){text-align:center;}
.versus-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted);}
.versus-table td:not(:first-child){text-align:center;}
.versus-table tr:last-child td{border-bottom:none;}
.versus-table td.row-label{color:var(--white);font-weight:600;font-size:11.5px;}
.versus-table .winner{color:var(--green);font-weight:700;}
.versus-svc-head{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--white);font-size:13px;}

/* ── HOME (index.html) ────────────────────────────────────── */
.agent-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:32px;}
.agent-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;
  transition:.2s ease;position:relative;overflow:hidden;
  box-shadow:0 0 0 rgba(255,106,26,0);
}
.agent-card:hover{
  border-color:rgba(255,106,26,.45);transform:translateY(-2px);
  box-shadow:0 12px 40px -12px rgba(255,106,26,.35);
}
.agent-card-icon{width:48px;height:48px;border-radius:12px;background:rgba(255,106,26,.1);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 0 24px rgba(255,106,26,.18);}
.agent-card-title{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:800;color:var(--white);}
.agent-card-tagline{font-size:13px;color:var(--muted);line-height:1.5;}
.agent-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px;}
.agent-card-cta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);margin-top:4px;}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:28px;}
.stat-tile{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.stat-tile .label{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.stat-tile .val{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--white);}
.stat-tile .val.cyan{color:var(--cyan);}
.stat-tile .val.green{color:var(--green);}
.stat-tile .val.amber{color:var(--amber);}

/* ── CAPABILITY MAP (nodo central → ramas) ────────────────── */
.cap-map{margin-top:20px;}
.cap-hub{
  background:var(--card);border:1px solid var(--cyan);border-radius:12px;padding:14px 20px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--white);
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 24px rgba(255,106,26,.12);
}
.cap-hub::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan);flex-shrink:0;}
.cap-branches{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin-top:18px;padding-top:18px;border-top:2px dashed var(--border);position:relative;
}
.cap-node{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;transition:.15s;
}
.cap-node:hover{border-color:rgba(255,106,26,.35);}
.cap-node-title{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;color:var(--white);
  display:flex;align-items:center;gap:7px;}
.cap-node-title::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted2);flex-shrink:0;}
.cap-node.on .cap-node-title::before{background:var(--green);}
.cap-node-desc{font-size:11px;color:var(--muted);line-height:1.5;}

/* ── CHAT (stack-selector.html) ───────────────────────────── */
.chat-shell{display:flex;flex-direction:column;height:560px;border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden;}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;}
.chat-msg{max-width:78%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;white-space:pre-wrap;}
.chat-msg.user{align-self:flex-end;background:var(--cyan-glow);border:1px solid rgba(255,106,26,.3);color:var(--white);border-bottom-right-radius:3px;}
.chat-msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--white);border-bottom-left-radius:3px;}
.chat-msg.system{align-self:center;background:none;color:var(--muted2);font-family:'JetBrains Mono',monospace;font-size:11px;text-align:center;}
.chat-empty{margin:auto;text-align:center;color:var(--muted2);font-size:12.5px;max-width:280px;}
.chat-inputrow{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--surface);}
.chat-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--white);font-size:13px;font-family:inherit;resize:none;}
.chat-input:focus{outline:none;border-color:var(--cyan);}
.chat-send{font-family:'JetBrains Mono',monospace;font-size:12px;padding:0 18px;border-radius:8px;border:1px solid var(--cyan);background:var(--cyan-glow);color:var(--cyan);cursor:pointer;transition:.15s;}
.chat-send:hover:not(:disabled){background:rgba(255,106,26,.22);}
.chat-send:disabled{opacity:.4;cursor:not-allowed;}
.connect-banner{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:12px;border:1px solid var(--border);}
.connect-banner.off{background:rgba(255,176,32,.06);border-color:rgba(255,176,32,.3);color:var(--amber);}
.connect-banner.on{background:rgba(0,230,153,.06);border-color:rgba(0,230,153,.3);color:var(--green);}
.connect-banner.err{background:rgba(255,92,92,.06);border-color:rgba(255,92,92,.3);color:var(--red);}
.connect-banner b{color:inherit;}

/* ── ANALYTICS (analytics.html) ───────────────────────────── */
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-top:20px;}
.chart-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.chart-card-title{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);}

.bar-chart{display:flex;align-items:flex-end;gap:4px;height:160px;}
.bar-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0;}
.bar-chart-bar{width:100%;max-width:28px;background:linear-gradient(180deg,rgba(255,106,26,.9),rgba(255,106,26,.45));
  border-radius:4px 4px 2px 2px;min-height:2px;transition:.15s;cursor:pointer;}
.bar-chart-bar:hover{background:linear-gradient(180deg,#FF8A4A,rgba(255,106,26,.65));}
.bar-chart-label{font-size:9px;color:var(--muted2);font-family:'JetBrains Mono',monospace;white-space:nowrap;}

.chart-tooltip{position:fixed;pointer-events:none;background:var(--surface);border:1px solid var(--cyan);border-radius:8px;
  padding:8px 12px;font-size:11.5px;color:var(--white);z-index:50;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.chart-tooltip b{color:var(--cyan);}
.chart-empty{color:var(--muted2);font-size:12.5px;text-align:center;padding:40px 0;}

.svc-metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px;}
.svc-metric-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.svc-metric-name{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;color:var(--white);
  display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.svc-metric-pending{font-size:11px;color:var(--muted2);}
.svc-metric-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px;}
.svc-metric-row b{color:var(--white);font-family:'JetBrains Mono',monospace;}

.demo-toggle{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:.15s;}
.demo-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.demo-toggle.on{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-glow);}