/* ===== Tokens ===== */
:root {
  --bg: #0a0a0a;
  --bg-1: #111111;
  --bg-2: #161616;
  --bg-3: #1d1d1d;
  --line: #262626;
  --line-2: #2e2e2e;
  --fg: #fafafa;
  --fg-2: #b3b3b3;
  --fg-3: #6b6b6b;
  --fg-4: #4a4a4a;
  --accent: #FFB800;
  --accent-2: #FFD54F;
  --accent-dim: #FF9800;
  --accent-bg: rgba(255, 184, 0, 0.12);
  --accent-glow: 0 0 0 1px rgba(255, 184, 0, 0.35), 0 8px 24px -8px rgba(255, 184, 0, 0.45);
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.5);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* AgentHub tokens */
  --hub-card-bg: var(--bg-1);
  --hub-card-border: var(--line);
  --hub-card-border-hover: var(--line-2);
  --hub-card-radius: var(--radius);
  --hub-status-done: var(--ok);
  --hub-status-ready: var(--accent);
  --hub-status-blocked: var(--warn);
  --hub-status-todo: var(--fg-4);
  --hub-status-placeholder: var(--fg-4);
  --hub-grid-gap: 16px;
  --hub-card-min-width: 280px;
  --hub-sidebar-width: 220px;
  --hub-aside-width: 320px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(900px 600px at 20% -10%, rgba(163, 230, 53, 0.05), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(163, 230, 53, 0.03), transparent 60%);
  background-attachment: fixed;
}
#root { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #0a0a0a; }

/* ===== Global keyframes ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpLg {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
@keyframes pulseMark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(163, 230, 53, 0); }
}
@keyframes cursorPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.4; transform: scaleY(0.9); }
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -14px); }
}
@keyframes slideInLeft {
  from { transform: translateX(-12px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes pipFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 18px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes backdropIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(6px); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  grid-template-rows: 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  animation: fadeIn 0.35s var(--ease-out);
}
.app.no-side {
  grid-template-columns: 280px 1fr;
}

/* Tablet */
@media (max-width: 1180px) {
  .app { grid-template-columns: 240px 1fr 320px; }
  .app.no-side { grid-template-columns: 240px 1fr; }
}
@media (max-width: 980px) {
  .app, .app.no-side { grid-template-columns: 220px 1fr; }
  .aside {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 100vw);
    z-index: 80;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: -16px 0 40px rgba(0,0,0,0.4);
  }
  .aside.open { transform: translateX(0); }
}

/* Mobile */
@media (max-width: 720px) {
  .app, .app.no-side {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 86vw);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: 16px 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .main {
    grid-column: 1;
    grid-row: 1;
  }
  .content {
    -webkit-overflow-scrolling: touch;
  }
}
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative;
}
.sidebar::after {
  content: "";
  position: absolute; right: -1px; top: 20%; bottom: 20%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(163, 230, 53, 0.18), transparent);
  pointer-events: none;
}
.main {
  background: var(--bg-1);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  position: relative;
}
.aside {
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
  animation: fadeLeft 0.4s var(--ease-out);
}

/* ===== Sidebar ===== */
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #0a0a0a;
  animation: pulseMark 3s var(--ease-in-out) infinite;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 22px; height: 22px;
  position: relative;
  z-index: 1;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}
.brand-name {
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 15px;
}
.brand-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em;
  margin-left: auto;
}
.nav-section {
  padding: 22px 14px 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em;
}
.nav-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 13px;
  width: 100%; text-align: left;
  position: relative;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  animation: fadeUp 0.35s var(--ease-out) backwards;
}
.nav-list .nav-item:nth-child(1) { animation-delay: 0.02s; }
.nav-list .nav-item:nth-child(2) { animation-delay: 0.06s; }
.nav-list .nav-item:nth-child(3) { animation-delay: 0.1s; }
.nav-list .nav-item:nth-child(4) { animation-delay: 0.14s; }
.nav-list .nav-item:nth-child(5) { animation-delay: 0.18s; }
.nav-list .nav-item:nth-child(6) { animation-delay: 0.22s; }
.nav-item::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.22s var(--ease-out);
  transform-origin: center;
}
.nav-item:hover { background: var(--bg-2); color: var(--fg); transform: translateX(2px); }
.nav-item.active { background: var(--bg-3); color: var(--fg); }
.nav-item.active::before { transform: scaleY(1); }
.nav-item.locked { color: var(--fg-4); cursor: not-allowed; }
.nav-item.locked:hover { background: transparent; color: var(--fg-4); transform: none; }
.nav-num {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--bg-3); color: var(--fg-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.nav-item:hover .nav-num { background: #262626; }
.nav-item.active .nav-num { background: var(--accent); color: #0a0a0a; transform: scale(1.05); }
.nav-item.done .nav-num { background: var(--accent-dim); color: #0a0a0a; }
.nav-num svg { width: 12px; height: 12px; display: block; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-meta {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.012));
}
.sidebar-foot.conn-pill {
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.2s var(--ease-out);
}
.sidebar-foot.conn-pill:hover {
  background: var(--bg-2);
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-3);
}
.dot.ok { background: var(--ok); animation: pulseDot 2.4s var(--ease-out) infinite; }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--danger); }
.sidebar-foot button {
  margin-left: auto;
  color: var(--fg-3); font-size: 12px;
  transition: color 0.18s var(--ease-out);
}
.sidebar-foot button:hover { color: var(--fg); }

/* ===== Main pane ===== */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0;
  z-index: 10;
}
.topbar-title {
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em;
  animation: fadeLeft 0.3s var(--ease-out);
}
.topbar-sub {
  color: var(--fg-3); font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

.content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  animation: fadeUp 0.4s var(--ease-out);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--fg);
  font-size: 13px;
  border: 1px solid var(--line-2);
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.08s var(--ease-out), box-shadow 0.18s var(--ease-out), color 0.18s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn:hover { background: #232323; border-color: #3a3a3a; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 500;
  box-shadow: var(--accent-glow);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #e5fcb1, var(--accent-2));
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.5), 0 12px 28px -6px rgba(163, 230, 53, 0.5);
}
.btn.primary:active { transform: translateY(0) scale(0.99); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--fg); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.input, .textarea, .select {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--fg);
  font-size: 13px;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  outline: none;
  width: 100%;
}
.input:hover, .textarea:hover, .select:hover { border-color: #3a3a3a; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.12);
}
.textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.hint { font-size: 11px; color: var(--fg-3); }
.hint.help {
  color: var(--accent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.18s var(--ease-out);
}
.hint.help:hover { color: var(--accent-2); text-decoration: underline; }
.estim-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--warn);
  background: rgba(251, 191, 36, 0.08);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ===== Onboarding ===== */
.onboarding {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}
.step-progress {
  display: flex; gap: 6px; margin-bottom: 32px;
  animation: fadeDown 0.4s var(--ease-out);
}
.step-pip {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
  position: relative;
}
.step-pip::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.step-pip.done::after { background: var(--accent-dim); transform: scaleX(1); }
.step-pip.active::after { transform: scaleX(1); }
.step-pip.active {
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.4);
}
.step-header {
  margin-bottom: 28px;
  animation: fadeUp 0.45s var(--ease-out) 0.06s backwards;
}
.step-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.step-title {
  font-size: 30px; font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.step-desc {
  color: var(--fg-2); font-size: 14px; max-width: 60ch;
  text-wrap: pretty;
}
.field-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1fr;
  animation: fadeUp 0.5s var(--ease-out) 0.12s backwards;
}
.field-grid .field.full { grid-column: 1 / -1; }
.step-footer {
  margin-top: 36px;
  display: flex; gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  animation: fadeUp 0.5s var(--ease-out) 0.2s backwards;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.6) 0%, var(--bg-1) 30%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}
.step-footer .spacer { flex: 1; }

/* ===== Welcome ===== */
.welcome {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 32px;
  position: relative;
}
.welcome-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  animation: fadeDown 0.5s var(--ease-out);
}
.welcome-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.welcome h1 {
  font-size: 52px; font-weight: 600; letter-spacing: -0.03em;
  margin: 0 0 18px; line-height: 1.0;
  animation: fadeUpLg 0.7s var(--ease-out) 0.08s backwards;
  text-wrap: balance;
}
.welcome h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 40%, var(--accent) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
}
.welcome p {
  font-size: 16px; color: var(--fg-2); max-width: 56ch;
  margin: 0 0 12px;
  text-wrap: pretty;
  animation: fadeUp 0.6s var(--ease-out) 0.2s backwards;
}
.welcome ul {
  margin: 28px 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.welcome li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 14px; color: var(--fg-2);
  animation: fadeUp 0.55s var(--ease-out) backwards;
}
.welcome li:nth-child(1) { animation-delay: 0.28s; }
.welcome li:nth-child(2) { animation-delay: 0.36s; }
.welcome li:nth-child(3) { animation-delay: 0.44s; }
.welcome li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.6);
  margin-top: 7px; flex-shrink: 0;
}
.welcome-cta {
  margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap;
  animation: fadeUp 0.55s var(--ease-out) 0.5s backwards;
}
.welcome-note {
  margin-top: 60px; padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px; color: var(--fg-3);
  font-family: var(--font-mono); letter-spacing: 0.02em;
  line-height: 1.6;
  animation: fadeUp 0.6s var(--ease-out) 0.6s backwards;
}

.env-warn {
  margin-top: 32px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: var(--radius);
  animation: fadeUp 0.55s var(--ease-out) 0.5s backwards;
}
.env-warn-head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px;
  margin-bottom: 8px;
}
.env-warn-head .dot {
  width: 9px; height: 9px;
}
.env-warn p {
  margin: 0 0 12px; font-size: 13px; color: var(--fg-2);
  line-height: 1.6;
  animation: none;
}
.env-warn code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-3);
  padding: 1px 6px; border-radius: 4px;
  color: var(--accent);
}
.welcome-orbs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.welcome-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.welcome-orb.a {
  width: 360px; height: 360px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(163, 230, 53, 0.25), transparent 70%);
  animation: float 14s ease-in-out infinite;
}
.welcome-orb.b {
  width: 280px; height: 280px;
  bottom: -60px; left: -40px;
  background: radial-gradient(circle, rgba(163, 230, 53, 0.18), transparent 70%);
  animation: float 18s ease-in-out infinite reverse;
}

/* ===== Chat ===== */
.chat {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.chat-stream {
  flex: 1; overflow-y: auto;
  padding: 24px 32px 12px;
  scroll-behavior: smooth;
}
.msg {
  max-width: 720px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  animation: fadeUp 0.35s var(--ease-out);
}
.msg-avatar {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  transition: transform 0.2s var(--ease-out);
}
.msg.user .msg-avatar {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
}
.msg.ai .msg-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0a0a;
  box-shadow: 0 4px 14px -4px rgba(163, 230, 53, 0.5);
}
.msg-body { min-width: 0; }
.msg-author {
  font-size: 11px; color: var(--fg-3);
  margin-bottom: 4px;
  font-family: var(--font-mono); letter-spacing: 0.05em;
  text-transform: uppercase;
}
.msg-content {
  font-size: 14.5px; line-height: 1.65;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user .msg-content { color: var(--fg-2); }
.msg-content strong { color: var(--fg); font-weight: 600; }
.msg-content em { color: var(--accent); font-style: normal; }
.msg-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-3);
  padding: 1px 5px; border-radius: 3px;
}
.msg-content ul, .msg-content ol {
  padding-left: 20px;
  margin: 8px 0;
}
.msg-content li { margin: 4px 0; }
.msg-content h3 {
  font-size: 14px; font-weight: 600;
  margin: 16px 0 6px;
  color: var(--fg);
}

.cursor {
  display: inline-block;
  width: 8px; height: 15px; vertical-align: -2px;
  background: var(--accent);
  border-radius: 1px;
  animation: cursorPulse 0.9s ease-in-out infinite;
  margin-left: 2px;
  box-shadow: 0 0 8px rgba(163, 230, 53, 0.5);
}

.composer {
  border-top: 1px solid var(--line);
  padding: 14px 32px 20px;
  background: linear-gradient(180deg, rgba(17,17,17,0.4), rgba(17,17,17,1));
}
.composer-inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.composer-inner:focus-within {
  border-color: rgba(163, 230, 53, 0.4);
  box-shadow: 0 0 0 4px rgba(163, 230, 53, 0.08), 0 8px 24px -8px rgba(0,0,0,0.6);
}
.composer textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 14px;
  resize: none;
  font-size: 14px;
  min-height: 24px;
  max-height: 200px;
  color: var(--fg);
  font-family: inherit;
}
.composer textarea::placeholder { color: var(--fg-4); }
.composer-actions {
  display: flex; gap: 8px; padding: 4px 8px 6px;
  align-items: center;
}
.composer-actions .hint {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.composer-actions .hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulseDot 2s var(--ease-out) infinite;
  box-shadow: 0 0 6px rgba(163, 230, 53, 0.7);
}
.composer-actions .spacer { flex: 1; }

.agent-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 20px 22px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.45s var(--ease-out);
}
.agent-intro::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163,230,53,0.4), transparent);
}
.agent-intro h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
}
.agent-intro p {
  margin: 0; font-size: 13px; color: var(--fg-2);
  text-wrap: pretty;
}
.agent-intro .deps {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
}
.dep-pill {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-3);
  color: var(--fg-2);
  padding: 4px 9px; border-radius: 12px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line-2);
  transition: background 0.2s, color 0.2s;
}
.dep-pill.missing { color: var(--warn); border-color: rgba(251, 191, 36, 0.2); }
.dep-pill.ready { color: var(--accent); border-color: rgba(163, 230, 53, 0.25); background: rgba(163, 230, 53, 0.06); }
.dep-pill.ready::before {
  content: "✓"; color: var(--accent);
}

/* ===== Aside (deliverables panel) ===== */
.aside-head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}
.aside-head h3 {
  margin: 0 0 4px; font-size: 13px; font-weight: 600;
}
.aside-head p {
  margin: 0; font-size: 10px; color: var(--fg-3);
  font-family: var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.aside-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px;
}
.deliverable {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  animation: fadeUp 0.35s var(--ease-out) backwards;
  transition: border-color 0.2s, transform 0.2s;
}
.deliverable.is-dep {
  border-color: rgba(163, 230, 53, 0.25);
  background: linear-gradient(180deg, rgba(163, 230, 53, 0.04), var(--bg-2));
}
.deliverable.is-current {
  border-color: rgba(163, 230, 53, 0.4);
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.15);
}
.aside-body .deliverable:nth-child(1) { animation-delay: 0.05s; }
.aside-body .deliverable:nth-child(2) { animation-delay: 0.1s; }
.aside-body .deliverable:nth-child(3) { animation-delay: 0.15s; }
.aside-body .deliverable:nth-child(4) { animation-delay: 0.2s; }
.aside-body .deliverable:nth-child(5) { animation-delay: 0.25s; }
.deliverable:hover { border-color: var(--line-2); }
.deliverable-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.deliverable-head .label {
  color: var(--accent);
  font-size: 9px;
}
.deliverable h4 {
  margin: 0 0 6px; font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
}
.deliverable .kv {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin-top: 8px;
}
.deliverable .kv dt {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.deliverable .kv dd { margin: 0; color: var(--fg); }
.deliverable .note {
  margin-top: 8px;
  font-size: 12px; color: var(--fg-2);
  line-height: 1.55;
}
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-3);
  font-size: 12px;
  animation: fadeIn 0.6s var(--ease-out);
}
.empty-mono {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 24px;
  animation: backdropIn 0.25s var(--ease-out);
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 32px);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.02);
  animation: modalIn 0.32s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-head h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.modal-head p { margin: 0; color: var(--fg-3); font-size: 12px; }
.modal-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
  flex-shrink: 0;
  background: var(--bg-1);
}

/* ===== Help popover ===== */
.help-pop {
  position: absolute;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 340px;
  font-size: 12.5px; color: var(--fg-2);
  line-height: 1.55;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  z-index: 50;
  animation: popIn 0.22s var(--ease-out);
}

/* ===== Profile final view ===== */
.profile-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}
.profile-view h1 {
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.025em; margin: 0 0 8px;
  line-height: 1.05;
  animation: fadeUpLg 0.5s var(--ease-out);
}
.profile-view .sub {
  color: var(--fg-3); font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 36px;
  animation: fadeUp 0.5s var(--ease-out) 0.06s backwards;
}
.profile-section {
  margin-bottom: 32px;
  animation: fadeUp 0.5s var(--ease-out) backwards;
}
.profile-section:nth-of-type(1) { animation-delay: 0.1s; }
.profile-section:nth-of-type(2) { animation-delay: 0.15s; }
.profile-section:nth-of-type(3) { animation-delay: 0.2s; }
.profile-section:nth-of-type(4) { animation-delay: 0.25s; }
.profile-section:nth-of-type(5) { animation-delay: 0.3s; }
.profile-section:nth-of-type(6) { animation-delay: 0.35s; }
.profile-section:nth-of-type(7) { animation-delay: 0.4s; }
.profile-section:nth-of-type(8) { animation-delay: 0.45s; }
.profile-section:nth-of-type(9) { animation-delay: 0.5s; }
.profile-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.profile-section-head h2 {
  margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
}
.profile-section-head .badge {
  font-family: var(--font-mono); font-size: 9px;
  background: var(--bg-3); color: var(--fg-3);
  padding: 3px 7px; border-radius: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.profile-section-head .badge.done {
  background: var(--accent-bg); color: var(--accent);
}
.profile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.profile-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.profile-card:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
  background: #1a1a1a;
}
.profile-card .k {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.profile-card .v {
  font-size: 14px; color: var(--fg);
}

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  animation: toastIn 0.3s var(--ease-out);
}
.toast.err { border-color: var(--danger); color: var(--danger); }

/* ===== Tip card (inline) ===== */
.tip-card {
  margin-top: 22px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s var(--ease-out) 0.2s backwards;
}
.tip-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.tip-card .tip-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tip-card .tip-label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.tip-card .tip-body {
  font-size: 13px; color: var(--fg-2); line-height: 1.65;
}
.tip-card .tip-body strong { color: var(--fg); font-weight: 600; }

.estim-banner {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius);
  font-size: 12.5px; color: var(--fg-2);
  display: flex; gap: 10px; align-items: flex-start;
  animation: fadeUp 0.4s var(--ease-out);
}
.estim-banner::before {
  content: "⚡"; flex-shrink: 0;
}

/* ===== Celebration banner ===== */
@keyframes celebRingDraw {
  from { stroke-dashoffset: 200; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes confetti {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); }
  20% { opacity: 1; transform: translate(var(--cx, 0), var(--cy, -40px)) rotate(var(--cr, 120deg)) scale(1); }
  100% { opacity: 0; transform: translate(var(--cx2, 60px), var(--cy2, 80px)) rotate(var(--cr2, 360deg)) scale(0.6); }
}
.celebration {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px 28px;
  margin-bottom: 36px;
  background:
    radial-gradient(600px 200px at 10% 50%, rgba(163, 230, 53, 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(163, 230, 53, 0.25);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  animation: fadeUpLg 0.6s var(--ease-out);
  box-shadow: 0 24px 60px -20px rgba(163, 230, 53, 0.25);
}
.celebration::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.celebration-ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(163, 230, 53, 0.4), rgba(163, 230, 53, 0.1));
  display: grid; place-items: center;
  position: relative;
  animation: pulseMark 2.4s var(--ease-in-out) infinite;
}
.celebration-ring-inner {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #0a0a0a;
  font-size: 32px; font-weight: 700;
  box-shadow: 0 8px 24px -4px rgba(163, 230, 53, 0.5);
}
.celebration-body { min-width: 0; }
.celebration-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.celebration h2 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.celebration p {
  margin: 0 0 14px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.celebration-cta {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ===== Funnel visual ===== */
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  margin: 8px auto 12px;
  padding: 8px 0 12px;
}
.funnel.compact {
  gap: 8px;
  margin: 4px 0;
  padding: 0;
}
.funnel-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
  pointer-events: none;
}
.funnel.compact .funnel-spine { left: 14px; }

.funnel-stage {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: stretch;
  animation: fadeUp 0.45s var(--ease-out) backwards;
  transition: transform 0.2s var(--ease-out);
}
.funnel.compact .funnel-stage {
  grid-template-columns: 28px 1fr;
  gap: 10px;
}
.funnel-stage:hover { transform: translateY(-1px); }
.funnel-stage.empty .funnel-stage-card {
  border-style: dashed;
  background: var(--bg-2);
}

/* Erosion variant — Productos devueltos stage (and any future erosion stage) */
.funnel-stage.is-erosion .funnel-stage-card {
  border-color: rgba(248, 113, 113, 0.4);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.05), rgba(248, 113, 113, 0.015));
}
.funnel-stage.is-erosion .funnel-stage-card::before {
  background: linear-gradient(180deg, var(--danger), transparent);
}
.funnel-stage.is-erosion .funnel-stage-dot {
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 4px 16px -4px rgba(248, 113, 113, 0.5), 0 0 0 4px var(--bg-1);
}
.funnel.compact .funnel-stage.is-erosion .funnel-stage-dot {
  box-shadow: 0 2px 10px -3px rgba(248, 113, 113, 0.5), 0 0 0 3px var(--bg);
}
.funnel-stage-erosion-suffix {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 6px;
  font-weight: 600;
}
.funnel.compact .funnel-stage-erosion-suffix { font-size: 8px; }

.funnel-stage-rail {
  display: flex; flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.funnel-stage-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px -4px rgba(163, 230, 53, 0.5),
              0 0 0 4px var(--bg-1);
}
.funnel.compact .funnel-stage-dot {
  width: 28px; height: 28px; font-size: 12px;
  box-shadow: 0 2px 10px -3px rgba(163, 230, 53, 0.5), 0 0 0 3px var(--bg);
}
.funnel-stage-line {
  flex: 1; width: 1px;
  background: var(--line-2);
  margin-top: 6px;
}

.funnel-stage-card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 14px 16px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.funnel.compact .funnel-stage-card {
  padding: 10px 12px;
  background: var(--bg-2);
}
.funnel-stage-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.5;
}

.funnel-stage-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.funnel-stage-title {
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.funnel.compact .funnel-stage-title { font-size: 13px; }
.funnel-stage-desc {
  font-size: 12px; color: var(--fg-3);
  line-height: 1.5;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.funnel-stage-empty {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.funnel-kpi {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg);
  border: 1px solid rgba(163, 230, 53, 0.25);
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  max-width: 55%;
}
.funnel-kpi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.funnel-kpi-value {
  font-size: 11px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.funnel.compact .funnel-kpi { padding: 2px 7px; }
.funnel.compact .funnel-kpi-value { font-size: 10px; max-width: 110px; }

.funnel-modelo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding: 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 12px;
}
.funnel-modelo-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.funnel-modelo-value {
  color: var(--accent);
  font-weight: 500;
}
.funnel.compact .funnel-modelo {
  padding: 3px 8px; font-size: 11px;
}

.funnel-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.funnel-action {
  font-size: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1.3;
  transition: border-color 0.2s, color 0.2s;
}
.funnel-action:hover { border-color: rgba(163, 230, 53, 0.3); color: var(--fg); }
.funnel.compact .funnel-action { font-size: 11px; padding: 3px 8px; }

/* ===== Responsive (content) ===== */
.app-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 70;
  animation: fadeIn 0.2s var(--ease-out);
}
.hamburger {
  display: none;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.hamburger:hover { background: #232323; border-color: #3a3a3a; }
.hamburger span {
  display: block;
  width: 14px; height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
}
@media (max-width: 980px) {
  .hamburger { display: inline-flex; }
}

@media (max-width: 1180px) {
  .welcome h1 { font-size: 44px; }
  .step-title { font-size: 26px; }
  .profile-view h1 { font-size: 30px; }
}
@media (max-width: 980px) {
  .welcome { padding: 60px 24px; }
  .welcome h1 { font-size: 38px; }
  .welcome p, .welcome li { font-size: 14px; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar-title { font-size: 13px; }
  .topbar-sub { font-size: 10px; }
  .topbar-actions .btn { padding: 6px 10px; font-size: 12px; }
  .onboarding { padding: 28px 20px 80px; }
  .profile-view { padding: 28px 20px 80px; }
  .chat-stream { padding: 20px 20px 8px; }
  .composer { padding: 12px 20px 16px; }
  .agent-intro { margin: 0 auto 22px; padding: 16px 18px; }
  .msg { gap: 12px; }
  .msg-avatar { width: 28px; height: 28px; font-size: 10px; }
}
@media (max-width: 720px) {
  .welcome { padding: 48px 18px; }
  .welcome h1 { font-size: 32px; letter-spacing: -0.02em; }
  .welcome p, .welcome li { font-size: 13.5px; }
  .welcome-cta { flex-direction: column; }
  .welcome-cta .btn { width: 100%; justify-content: center; }
  .welcome-note { margin-top: 36px; }
  .step-title { font-size: 22px; }
  .step-eyebrow { font-size: 10px; }
  .step-desc { font-size: 13px; }
  .field-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .step-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    margin-left: -18px;
    margin-right: -18px;
  }
  .step-footer .btn { padding: 8px 12px; font-size: 12.5px; }
  .step-footer .spacer { display: none; }
  .step-footer .btn.primary { order: 99; flex: 1; justify-content: center; }
  .profile-view h1 { font-size: 26px; }
  .profile-grid { grid-template-columns: 1fr; gap: 10px; }
  .profile-section-head { flex-wrap: wrap; gap: 8px; }
  .profile-section-head h2 { font-size: 14px; }
  .onboarding { padding: 22px 18px 80px; }
  .profile-view { padding: 22px 18px 80px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar-actions .btn { padding: 5px 8px; font-size: 11px; }
  .topbar-actions { gap: 4px; }
  .topbar-sub { display: none; }
  .chat-stream { padding: 16px 16px 6px; }
  .composer { padding: 10px 16px 14px; }
  .composer-inner { padding: 3px; }
  .composer textarea { padding: 10px 12px; font-size: 13.5px; }
  .composer-actions { flex-wrap: wrap; gap: 6px; padding: 4px 6px; }
  .composer-actions .hint { font-size: 9px; }
  .agent-intro { padding: 14px 16px; margin-bottom: 18px; }
  .agent-intro h3 { font-size: 14px; }
  .agent-intro p { font-size: 12.5px; }
  .modal {
    max-width: none;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-head { padding: 18px 18px 12px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 12px 18px; }
  .toast {
    left: 16px; right: 16px;
    transform: none;
    bottom: 18px;
    text-align: center;
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .celebration {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 18px;
    gap: 16px;
  }
  .celebration-ring { margin: 0 auto; }
  .celebration h2 { font-size: 18px; }
  .celebration-cta { justify-content: center; }
  .funnel-stage { width: 100% !important; }
  .funnel-spine { display: none; }
  .help-pop {
    width: calc(100vw - 32px);
    max-width: 360px;
    left: 16px !important;
  }
  .env-warn { padding: 14px 16px; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 5px;
  border: 2px solid var(--bg-1);
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
.content { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ===== PREMIUM Funnel Constructor (Awwwards) ===== */
.content > div:not([class]) { display: grid; grid-template-columns: 1fr 380px; gap: 0; height: 100%; min-height: 0; }

/* FC: Stage timeline editor */
.fc {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-1);
}
.fc-editor {
  flex: 1;
  overflow-y: auto;
  padding: 48px 40px 64px;
}
.fc-header {
  margin-bottom: 48px;
}
.fc-header-pretitle {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.fc-header-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.fc-header-subtitle {
  font-size: 14px;
  color: var(--fg-3);
  margin-top: 12px;
  line-height: 1.6;
}

/* FC: Blocks Container (grid of expandable blocks) */
.fc-blocks-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  align-content: start;
}

.fc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fc-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fc-field textarea,
.fc-field input[type="text"] {
  font-size: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--fg);
  font-family: inherit;
  transition: all 0.3s var(--ease-out);
}
.fc-field textarea::placeholder,
.fc-field input[type="text"]::placeholder {
  color: var(--fg-4);
}
.fc-field textarea:focus,
.fc-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 184, 0, 0.04);
  box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.1);
}

.fc-kpi {
  position: relative;
}
.fc-kpi input[type="text"] {
  padding-left: 60px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.fc-kpi::before {
  content: "KPI →";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 184, 0, 0.5);
  pointer-events: none;
  font-family: var(--font-mono);
  transition: color 0.3s var(--ease-out);
}
.fc-kpi input:focus ~ ::before,
.fc-kpi:focus-within::before {
  color: var(--accent);
}

.fc-char-count {
  font-size: 11px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  text-align: right;
  margin-top: 4px;
}

.fc-progress {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.fc-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.fc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(255, 184, 0, 0.6));
  border-radius: 2px;
  transition: width 0.6s var(--ease-out);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.4);
}
.fc-progress-text {
  font-size: 13px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-weight: 600;
}

.fc-footer {
  padding: 24px 40px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.6), rgba(10, 10, 10, 0.9));
  backdrop-filter: blur(8px);
}
.fc-optimize-btn {
  animation: popIn 0.4s var(--ease-out);
}

/* FC: Individual expandable block */
.fc-block {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.5));
  border: 1px solid rgba(255, 184, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  animation: fadeUp 0.4s var(--ease-out) backwards;
}

.fc-block.is-locked {
  opacity: 0.4;
  pointer-events: none;
  filter: blur(1px);
}

.fc-block.is-complete {
  border-color: rgba(74, 222, 128, 0.3);
}

.fc-block.is-expanded {
  border-color: rgba(255, 184, 0, 0.3);
  box-shadow: inset 0 0 20px rgba(255, 184, 0, 0.1);
}

.fc-block-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  cursor: pointer;
  transition: background 0.3s var(--ease-out);
}

.fc-block:not(.is-locked) .fc-block-header:hover {
  background: rgba(255, 184, 0, 0.05);
}

.fc-block-ordinal {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  line-height: 1;
  min-width: 50px;
  text-align: center;
}

.fc-block-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fc-block-state {
  font-size: 16px;
  color: var(--fg-3);
  transition: color 0.3s var(--ease-out);
}

.fc-block.is-complete .fc-block-state {
  color: var(--ok);
}

.fc-block.is-expanded .fc-block-state {
  color: var(--accent);
}

.fc-block-preview {
  padding: 0 24px 20px;
  font-size: 12px;
  color: var(--fg-3);
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}

.fc-block-progress {
  margin: 0 24px 16px;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.fc-block-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(255, 184, 0, 0.6));
  transition: width 0.5s var(--ease-out);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.4);
}

.fc-block-editor {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s var(--ease-out);
}

.fc-block.is-expanded .fc-block-editor {
  max-height: 600px;
  opacity: 1;
  padding: 0 24px 24px;
  animation: expandBlock 0.3s var(--ease-out);
}

.fc-block-editor .fc-field {
  margin-bottom: 20px;
}

.fc-block-editor .fc-field-label {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  display: block;
}

.fc-block-editor textarea,
.fc-block-editor input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 184, 0, 0.1);
  border-radius: 4px;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  transition: all 0.3s var(--ease-out);
}

.fc-block-editor textarea:focus,
.fc-block-editor input:focus {
  outline: none;
  border-color: rgba(255, 184, 0, 0.3);
  box-shadow: inset 0 0 12px rgba(255, 184, 0, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.fc-block-editor textarea {
  resize: vertical;
  min-height: 100px;
}

/* Funnel Insights Panel */
.funnel-insights {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 32px 24px;
  gap: 24px;
}

.funnel-insights-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funnel-insights-section-title {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 4px;
}

.funnel-insights-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.funnel-insights-metric-label {
  font-size: 12px;
  color: var(--fg-3);
}

.funnel-insights-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}

.funnel-insights-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.funnel-insights-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(255, 184, 0, 0.6));
  transition: width 0.6s var(--ease-out);
}

.funnel-insights-risk,
.funnel-insights-rec {
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
}

.funnel-insights-risk {
  border-left: 3px solid rgba(255, 100, 100, 0.4);
}

.funnel-insights-rec {
  border-left: 3px solid rgba(255, 184, 0, 0.4);
}

/* Keyframes for block animations */
@keyframes expandBlock {
  0% { max-height: 0; opacity: 0; }
  100% { max-height: 600px; opacity: 1; }
}

@keyframes collapseBlock {
  0% { max-height: 600px; opacity: 1; }
  100% { max-height: 0; opacity: 0; }
}

@keyframes completeBlock {
  0% { box-shadow: inset 0 0 20px rgba(255, 184, 0, 0.1); }
  50% { box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.2); }
  100% { box-shadow: inset 0 0 20px rgba(74, 222, 128, 0.1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: inset 0 0 20px rgba(255, 184, 0, 0.1); }
  50% { box-shadow: inset 0 0 40px rgba(255, 184, 0, 0.2); }
}
.funnel-constructor-header {
  margin-bottom: 32px;
}
.funnel-constructor-header h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.funnel-constructor-header p {
  color: var(--fg-2);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}
.funnel-constructor-stages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.funnel-constructor-stage {
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.8), rgba(16, 16, 16, 0.6));
  border: 1px solid rgba(74, 74, 74, 0.4);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s var(--ease-out);
  animation: fadeInUp 0.4s both;
  position: relative;
  overflow: hidden;
}
.funnel-constructor-stage::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163, 230, 53, 0.08), transparent);
  pointer-events: none;
}
.funnel-constructor-stage.status-locked {
  opacity: 0.45;
  pointer-events: none;
  border-color: rgba(74, 74, 74, 0.3);
}
.funnel-constructor-stage.status-active {
  border-color: rgba(163, 230, 53, 0.4);
  box-shadow: 0 0 20px rgba(163, 230, 53, 0.05), inset 0 1px 0 rgba(163, 230, 53, 0.08);
}
.funnel-constructor-stage.status-complete {
  border-color: rgba(163, 230, 53, 0.3);
  opacity: 0.95;
}
.funnel-constructor-stage-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.funnel-constructor-stage-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.08), rgba(163, 230, 53, 0.02));
  border: 1.5px solid rgba(163, 230, 53, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--fg-2);
}
.status-complete .funnel-constructor-stage-num {
  background: linear-gradient(135deg, var(--accent), rgba(163, 230, 53, 0.8));
  border-color: var(--accent);
  color: #0a0a0a;
}
.status-active .funnel-constructor-stage-num {
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.15), rgba(163, 230, 53, 0.05));
  border-color: var(--accent);
  color: var(--accent);
}
.funnel-constructor-stage-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.funnel-constructor-stage-desc {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.5;
}
.funnel-constructor-stage-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.funnel-constructor-stage-fields .field {
  margin: 0;
}
.funnel-constructor-stage-fields input,
.funnel-constructor-stage-fields textarea {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.5), rgba(22, 22, 22, 0.3)) !important;
  border: 1px solid rgba(74, 74, 74, 0.4) !important;
  transition: all 0.3s var(--ease-out) !important;
}
.funnel-constructor-stage-fields input:focus,
.funnel-constructor-stage-fields textarea:focus {
  border-color: rgba(163, 230, 53, 0.3) !important;
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.08) !important;
}
/* Progress bar */
.funnel-constructor-progress {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(74, 74, 74, 0.3);
}
.funnel-constructor-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(74, 74, 74, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.funnel-constructor-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(163, 230, 53, 0.8));
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.4);
  position: relative;
}
.funnel-constructor-progress-fill::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}
.funnel-constructor-progress-text {
  font-size: 12px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Optimize button */
.funnel-constructor-optimize {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeInUp 0.4s both;
  padding: 16px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.05), rgba(163, 230, 53, 0.01));
  border: 1px solid rgba(163, 230, 53, 0.15);
  border-radius: 10px;
}
.funnel-constructor-optimize-hint {
  font-size: 13px;
  color: var(--fg-2);
  max-width: 300px;
  line-height: 1.5;
}
/* Error */
.funnel-constructor-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  color: #ef4444;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideInDown 0.3s var(--ease-out);
}
/* Recommendations */
.funnel-constructor-recommendations {
  margin-top: 32px;
  background: linear-gradient(180deg, rgba(163, 230, 53, 0.04), rgba(163, 230, 53, 0.01));
  border: 1px solid rgba(163, 230, 53, 0.2);
  border-radius: 12px;
  padding: 24px;
  animation: fadeInUp 0.4s both;
  position: relative;
  overflow: hidden;
}
.funnel-constructor-recommendations::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163, 230, 53, 0.1), transparent);
  pointer-events: none;
}
.funnel-constructor-recommendations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.funnel-constructor-recommendations-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.funnel-constructor-recommendations-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
}
.funnel-constructor-recommendations-body strong {
  color: var(--fg-1);
}
.funnel-constructor-recommendations-body ul {
  padding-left: 18px;
  margin: 8px 0;
}
.funnel-constructor-recommendations-body li {
  margin-bottom: 4px;
}
.funnel-constructor-recommendations-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-1);
}
/* Preview */
.funnel-constructor-preview {
  margin-top: 28px;
}
.funnel-constructor-preview h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--fg-2);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== AgentHub ===== */

.hub {
  display: grid;
  grid-template-columns: var(--hub-sidebar-width) 1fr var(--hub-aside-width);
  gap: 0;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

@media (max-width: 1180px) {
  .hub { grid-template-columns: 200px 1fr; }
  .hub-aside { display: none; }
}

@media (max-width: 720px) {
  .hub { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .hub-sidebar { display: none; }
}

/* ── HubSidebar ── */

.hub-sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.hub-sidebar-section { display: flex; flex-direction: column; gap: 6px; }
.hub-sidebar-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.hub-sidebar-subheading {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.hub-sidebar-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.hub-sidebar-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.hub-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-2);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.hub-filter:hover { background: var(--bg-2); color: var(--fg); }
.hub-filter.active {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
}
.hub-filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.18);
  padding: 2px 6px;
  border-radius: 999px;
}
.hub-filter.active .hub-filter-count { background: rgba(0,0,0,0.25); }

.hub-lang { display: flex; gap: 4px; }
.hub-lang-btn {
  flex: 1;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all 0.12s var(--ease-out);
}
.hub-lang-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.hub-lang-btn.active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 700;
}

/* ── Hub main column ── */

.hub-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.hub-main-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hub-main-header-end { display: flex; align-items: center; gap: 8px; }
.hub-mobile-only { display: none; }

.hub-mobile-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.hub-mobile-filters::-webkit-scrollbar { display: none; }
.hub-mobile-filter {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg-2);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: all 0.12s var(--ease-out);
}
.hub-mobile-filter:hover { color: var(--fg); }
.hub-mobile-filter.active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 600;
}

.hub-mobile-lang { display: flex; gap: 4px; flex-shrink: 0; }
.hub-mobile-lang .hub-lang-btn { padding: 4px 8px; min-width: 32px; }

@media (max-width: 720px) {
  .hub-mobile-only { display: flex; }
}

/* ── Grid + Cards ── */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--hub-grid-gap);
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hub-card {
  position: relative;
  background: var(--hub-card-bg);
  border: 1px solid var(--hub-card-border);
  border-left: 3px solid var(--hub-status-todo);
  border-radius: var(--hub-card-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  color: var(--fg);
  animation: hubCardIn 0.32s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 30ms);
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.hub-card:hover {
  border-color: var(--hub-card-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
}
.hub-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hub-card.is-selected {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

.hub-card.status-done    { border-left-color: var(--hub-status-done);    opacity: 0.85; }
.hub-card.status-ready   { border-left-color: var(--hub-status-ready); }
.hub-card.status-blocked { border-left-color: var(--hub-status-blocked); cursor: not-allowed; }
.hub-card.status-blocked:hover { transform: none; }
.hub-card.status-todo    { border-left-color: var(--hub-status-todo); }
.hub-card.is-placeholder {
  border-left-color: var(--hub-status-placeholder);
  border-style: dashed;
  opacity: 0.55;
  cursor: not-allowed;
}
.hub-card.is-placeholder:hover { transform: none; box-shadow: none; }

@keyframes hubCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hub-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.hub-card-order {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hub-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-card-short {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hub-card-blurb {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-card-footer { margin-top: auto; padding-top: 8px; }
.hub-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hub-card-cta[data-variant="blocked"] { color: var(--warn); }
.hub-card-cta[data-variant="soon"] { color: var(--fg-3); }

/* ── StatusBadge ── */

.hub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}
.hub-status-badge[data-variant="done"]    { background: rgba(74, 222, 128, 0.14); color: var(--ok); }
.hub-status-badge[data-variant="ready"]   { background: var(--accent-bg); color: var(--accent); }
.hub-status-badge[data-variant="blocked"] { background: rgba(251, 191, 36, 0.14); color: var(--warn); }
.hub-status-badge[data-variant="todo"]    { background: rgba(74, 74, 74, 0.2); color: var(--fg-3); }
.hub-status-badge[data-variant="placeholder"] { background: rgba(74, 74, 74, 0.15); color: var(--fg-3); }
.hub-status-icon { font-size: 10px; line-height: 1; }

/* ── DependencyIndicator ── */

.hub-deps { display: flex; gap: 4px; flex-wrap: wrap; }
.hub-deps-empty, .hub-deps-ready, .hub-deps-missing {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.hub-deps-missing { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.hub-deps-missing-label { color: var(--warn); font-weight: 600; }

.hub-dep-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg-2);
  white-space: nowrap;
}
.hub-dep-pill.ready {
  background: rgba(74, 222, 128, 0.12);
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.3);
}
.hub-dep-pill.missing {
  background: rgba(251, 191, 36, 0.1);
  color: var(--warn);
  border-color: rgba(251, 191, 36, 0.3);
}
.hub-dep-pill-mark { font-size: 9px; }

/* ── Tooltip ── */

.hub-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  animation: hubTooltipIn 0.15s var(--ease-out);
}
.hub-tooltip-head {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--warn);
}
.hub-tooltip[data-variant="placeholder"] .hub-tooltip-head { color: var(--fg-3); }
@keyframes hubTooltipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HubAside ── */

.hub-aside {
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.hub-aside-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fg-3);
}
.hub-aside-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--fg-4);
}
.hub-aside-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  margin: 0 0 6px;
}
.hub-aside-empty-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
  max-width: 240px;
}

.hub-aside-head { display: flex; flex-direction: column; gap: 6px; }
.hub-aside-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.hub-aside-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hub-aside-body { display: flex; flex-direction: column; gap: 14px; }
.hub-aside-blurb { margin: 0; font-size: 13px; color: var(--fg-2); line-height: 1.6; }

.hub-aside-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hub-aside-meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.hub-aside-meta-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.hub-aside-section { display: flex; flex-direction: column; gap: 8px; }
.hub-aside-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.hub-aside-footer { margin-top: auto; padding-top: 12px; }
.hub-aside-cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
  transition: background 0.12s var(--ease-out);
}
.hub-aside-cta:hover { background: var(--accent-2); }
.hub-aside-cta.disabled {
  background: var(--bg-3);
  color: var(--fg-3);
  cursor: not-allowed;
}

/* ── Empty state (filter) ── */

.hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--fg-3);
}
.hub-empty-icon { font-size: 48px; color: var(--fg-4); }
.hub-empty-title { margin: 0; font-size: 14px; color: var(--fg-2); }
.hub-empty-cta {
  padding: 8px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hub-empty-cta:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }

/* ── prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {
  .hub-card { animation-delay: 0ms; animation-duration: 0.01ms; }
  .hub-tooltip { animation-duration: 0.01ms; }
  .hub-card:hover { transform: none; }
}

/* ===== Constructor de Funnels v0.2 (Fix #11) ===== */

/* ProgressTabs */
.funnel-constructor-progress-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.funnel-constructor-progress-tabs::-webkit-scrollbar { display: none; }

.funnel-constructor-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s var(--ease-out);
}
.funnel-constructor-tab:hover { background: var(--bg-2); color: var(--fg); }
.funnel-constructor-tab.is-current {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--fg);
}
.funnel-constructor-tab.status-complete { color: var(--ok); }
.funnel-constructor-tab.status-complete.is-current { border-color: var(--ok); }
.funnel-constructor-tab.status-locked { opacity: 0.45; cursor: not-allowed; }
.funnel-constructor-tab.status-locked:hover { background: transparent; }

.funnel-constructor-tab-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  background: var(--bg-3);
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--fg-2);
}
.funnel-constructor-tab.status-complete .funnel-constructor-tab-num { background: var(--ok); color: #0a0a0a; }
.funnel-constructor-tab.is-current .funnel-constructor-tab-num { background: var(--accent); color: #0a0a0a; }
.funnel-constructor-tab-title { font-weight: 500; }

/* AgentFeed */
.funnel-constructor-stage-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.funnel-constructor-stage-feed-hint {
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.funnel-constructor-stage-feed-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.funnel-constructor-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg-2);
  transition: border-color 0.15s var(--ease-out), opacity 0.15s var(--ease-out);
}
.funnel-constructor-agent-pill.status-ready {
  border-color: var(--accent-dim);
  background: var(--accent-bg);
  color: var(--fg);
}
.funnel-constructor-agent-pill.status-pending {
  opacity: 0.7;
  border-style: dashed;
}
.funnel-constructor-agent-pill.status-imported {
  border-color: var(--ok);
  opacity: 0.92;
}
.funnel-constructor-agent-pill-name {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.funnel-constructor-agent-pill-action {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.funnel-constructor-agent-pill-action:hover {
  background: var(--accent);
  color: #0a0a0a;
}
.funnel-constructor-agent-pill.status-pending .funnel-constructor-agent-pill-action { color: var(--fg-2); }
.funnel-constructor-agent-pill.status-pending .funnel-constructor-agent-pill-action:hover {
  background: var(--fg-2);
  color: #0a0a0a;
}
.funnel-constructor-agent-pill.status-imported .funnel-constructor-agent-pill-action { color: var(--ok); }
.funnel-constructor-agent-pill.status-imported .funnel-constructor-agent-pill-action:hover {
  background: var(--ok);
  color: #0a0a0a;
}
.funnel-constructor-agent-pill-check {
  color: var(--ok);
  font-size: 11px;
  margin-right: 6px;
  margin-left: -2px;
}

/* Input warning (modelo_venta) */
.funnel-constructor-input-warning {
  border-color: var(--warn) !important;
}
.funnel-constructor-warning {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  color: var(--warn);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Final CTA */
.funnel-constructor-final-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--accent-bg), var(--bg-2));
  border: 1px solid var(--accent);
  border-radius: 12px;
  animation: fadeInUp 0.4s both;
}
.funnel-constructor-final-cta-icon {
  font-size: 24px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  flex-shrink: 0;
}
.funnel-constructor-final-cta-body { flex: 1; min-width: 0; }
.funnel-constructor-final-cta-body h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--accent);
}
.funnel-constructor-final-cta-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
}
.funnel-constructor-final-cta-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .funnel-constructor-final-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .funnel-constructor-final-cta-actions { width: 100%; }
  .funnel-constructor-final-cta-actions button { flex: 1; }
  .funnel-constructor-stage-feed-pills { flex-direction: column; }
  .funnel-constructor-agent-pill { width: 100%; justify-content: space-between; }
}

/* FunnelVisual - Beautiful horizontal bars funnel */
.funnel-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px;
  height: 100%;
  overflow-y: auto;
}
.funnel-visual-header {
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--line);
}
.funnel-visual-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.funnel-visual-progress {
  display: flex;
  gap: 12px;
  align-items: center;
}
.funnel-visual-progress-value,
.funnel-visual-progress-percent {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}
.funnel-visual-progress-percent::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line);
  margin-right: 12px;
}

.funnel-visual-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.funnel-visual-bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.funnel-visual-bar {
  position: relative;
  height: 48px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
  min-height: 44px;
  border: 1.5px solid;
}
.funnel-visual-bar.filled {
  background: linear-gradient(90deg, rgba(255, 184, 0, 0.25), rgba(255, 184, 0, 0.12));
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.2);
}
.funnel-visual-bar.empty {
  background: linear-gradient(90deg, rgba(255, 184, 0, 0.06), rgba(255, 184, 0, 0.02));
  border-color: rgba(255, 184, 0, 0.15);
  opacity: 0.5;
}
.funnel-visual-bar:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(255, 184, 0, 0.15);
}
.funnel-visual-bar-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.funnel-visual-bar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.funnel-visual-bar-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.funnel-visual-bar-tooltip {
  margin-left: 12px;
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 10px;
  min-width: 140px;
  max-width: 180px;
}
.funnel-visual-bar-kpi {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--font-mono);
}
.funnel-visual-bar-snippet {
  color: var(--fg-3);
  line-height: 1.3;
  font-family: var(--font-mono);
  font-size: 9px;
  word-break: break-word;
}

.funnel-visual-conversions {
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.08), rgba(255, 184, 0, 0.02));
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: 6px;
  margin-top: 4px;
}
.funnel-visual-conversions-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.funnel-visual-conversions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.funnel-visual-conversion-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--fg-2);
  font-family: var(--font-mono);
}
.funnel-visual-conversion-arrow {
  color: var(--accent);
  font-weight: 700;
}

/* FunnelPreview */
.funnel-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.funnel-preview-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.funnel-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.funnel-preview-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.funnel-preview-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(74, 74, 74, 0.3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.funnel-preview-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(255, 184, 0, 0.8));
  border-radius: 3px;
  transition: width 0.4s ease-out;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.3);
}
.funnel-preview-progress-text {
  font-size: 12px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}
.funnel-preview-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 16px;
}
.funnel-preview-stage {
  padding: 12px;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.5), rgba(16, 16, 16, 0.3));
  border: 1px solid rgba(74, 74, 74, 0.4);
  border-radius: 8px;
  transition: all 0.3s var(--ease-out);
}
.funnel-preview-stage.status-active {
  border-color: rgba(255, 184, 0, 0.4);
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.04), rgba(255, 184, 0, 0.01));
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.05);
}
.funnel-preview-stage.status-complete {
  border-color: rgba(74, 222, 128, 0.3);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.04), rgba(74, 222, 128, 0.01));
}
.funnel-preview-stage.status-locked {
  opacity: 0.5;
  border-color: rgba(74, 74, 74, 0.2);
}
.funnel-preview-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.funnel-preview-stage-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(74, 74, 74, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.status-active .funnel-preview-stage-number {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.2), rgba(255, 184, 0, 0.1));
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: var(--accent);
}
.status-complete .funnel-preview-stage-number {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.1));
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: var(--ok);
}
.funnel-preview-stage-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
}
.funnel-preview-stage-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(74, 74, 74, 0.3);
  color: var(--fg-3);
  flex-shrink: 0;
}
.badge-active { background: rgba(255, 184, 0, 0.2); color: var(--accent); }
.badge-complete { background: rgba(74, 222, 128, 0.2); color: var(--ok); }
.badge-locked { background: rgba(251, 191, 36, 0.1); color: var(--warn); }
.funnel-preview-stage-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.funnel-preview-snippet {
  font-size: 11px;
  color: var(--fg-2);
  line-height: 1.4;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-family: var(--font-mono);
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funnel-preview-kpi {
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.funnel-preview-locked-message {
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
  padding: 8px;
}

/* Migration banner */
.funnel-constructor-migration {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.funnel-constructor-migration-icon {
  color: var(--warn);
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* KPI Snapshot section */
.fc-snapshot-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 184, 0, 0.04);
  border: 1px solid rgba(255, 184, 0, 0.12);
  border-radius: 8px;
}
.fc-snapshot-notes {
  font-size: 13px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--fg-2);
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
}
.fc-snapshot-notes::placeholder {
  color: var(--fg-4);
}
.fc-snapshot-btn {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.2), rgba(255, 184, 0, 0.1));
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.fc-snapshot-btn:hover {
  background: rgba(255, 184, 0, 0.15);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.2);
}

/* Delta indicator in block preview */
.fc-block-delta-indicator {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 184, 0, 0.2);
}

/* History table section */
.funnel-insights-history-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.funnel-insights-history-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.funnel-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  transition: all 0.2s var(--ease-out);
}
.funnel-history-row.is-up {
  border-color: rgba(163, 230, 53, 0.3);
  background: rgba(163, 230, 53, 0.05);
}
.funnel-history-row.is-down {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.05);
}
.funnel-history-row.is-empty {
  opacity: 0.6;
  padding: 10px;
  font-size: 12px;
  color: var(--fg-4);
}
.funnel-history-stage {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  min-width: 120px;
}
.funnel-history-data {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 12px;
}
.funnel-history-prev {
  color: var(--fg-3);
  opacity: 0.7;
}
.funnel-history-delta {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 184, 0, 0.1);
  color: var(--accent);
}
.funnel-history-delta.is-positive {
  background: rgba(163, 230, 53, 0.15);
  color: rgba(163, 230, 53, 0.9);
}
.funnel-history-delta.is-negative {
  background: rgba(248, 113, 113, 0.15);
  color: rgba(248, 113, 113, 0.9);
}
.funnel-history-curr {
  color: var(--fg-1);
  font-weight: 600;
}

/* Responsive: tablet (980px breakpoint) */
@media (max-width: 980px) {
  .fc-block-delta-indicator {
    font-size: 11px;
  }
  .funnel-history-data {
    gap: 8px;
    font-size: 11px;
  }
  .funnel-history-delta {
    padding: 3px 6px;
    font-size: 11px;
  }
}

/* Responsive: mobile (720px breakpoint) */
@media (max-width: 720px) {
  .fc-snapshot-section {
    margin-top: 12px;
    padding: 10px;
    gap: 10px;
  }
  .funnel-history-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .funnel-history-data {
    width: 100%;
    justify-content: space-between;
  }
}

/* ===== Visual Funnel Trapezoids ===== */
.funnel-visual-container {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  animation: fadeUp 0.4s var(--ease-out);
}
.funnel-visual-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.funnel-visual-shape {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 360px;
  position: relative;
}
.funnel-trap {
  flex: 1;
  background: rgba(255, 184, 0, 0.08);
  border: 1.5px solid rgba(255, 184, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
}
.funnel-trap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.12), rgba(255, 184, 0, 0.04));
  pointer-events: none;
}
.funnel-trap.is-complete {
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.18), rgba(255, 184, 0, 0.08));
  border-color: rgba(255, 184, 0, 0.4);
  box-shadow: inset 0 0 12px rgba(255, 184, 0, 0.15);
}
.trap-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-align: center;
}
.trap-num {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  flex-shrink: 0;
}
.trap-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg);
  text-transform: uppercase;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.trap-check {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  animation: popIn 0.3s var(--ease-out);
}

/* Boost contrast on insights text */
.funnel-insights-section-title {
  color: var(--accent) !important;
  font-weight: 700;
}
.funnel-insights-metric-label {
  color: var(--fg-2) !important;
}
.funnel-insights-metric-value {
  color: var(--accent-2) !important;
  font-weight: 700;
}
.funnel-insights-risk {
  color: var(--warn) !important;
  font-weight: 500;
}
.funnel-insights-rec {
  color: var(--fg-2) !important;
}

/* Monthly analysis styles */
.month-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.month-selector select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-in-out);
}
.month-selector select:hover {
  border-color: var(--accent);
}
.month-selector select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.2);
}

.comparison-view {
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.comparison-item {
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(255, 184, 0, 0.04);
  border: 1px solid rgba(255, 184, 0, 0.15);
  border-radius: var(--radius-sm);
}
.comparison-stage {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.comparison-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--fg-3);
}
.comparison-recs {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 184, 0, 0.1);
}
.comparison-recs:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.funnel-constructor-migration strong { color: var(--warn); }

/* Trapezoid analysis display — inline metrics within funnel visualization */
.trap-analysis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  border-top: 1px solid var(--accent);
  padding-top: 6px;
  margin-top: 4px;
  z-index: 2;
}

.trap-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}

.trap-progress-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}

.trap-summary {
  font-size: 9px;
  color: var(--fg-2);
  max-height: 36px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.trap-recommendations {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trap-rec-item {
  font-size: 9px;
  color: var(--fg-3);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
  max-height: 24px;
  overflow: hidden;
  line-height: 1.3;
}

/* Funnel View Page — full-width vista */
.fvp {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  flex: 1;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}

.fvp-left {
  overflow-y: auto;
  padding: 32px 40px;
  border-right: 1px solid var(--line);
}

.fvp-funnel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fvp-month-select {
  width: 100% !important;
}

.fvp-shape {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fvp-stage-block {
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 200ms ease;
}

.fvp-stage-block:last-child {
  border-bottom: none;
}

.fvp-stage-block.is-complete {
  background: rgba(255,184,0,0.08);
}

.fvp-right {
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.fvp-metrics-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.fvp-metric {
  padding: 12px;
  background: var(--bg-2);
  border-radius: 4px;
  border: 1px solid rgba(255,184,0,0.1);
}

.fvp-stage-card {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-2);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.04);
}

/* ===== Paso 1: GPTs paste + scoring + informe ===== */
:root {
  --gpt-mercado: #60a5fa;
  --gpt-mercado-text: #93c5fd;
  --gpt-producto: #a78bfa;
  --gpt-producto-text: #c4b5fd;
  --gpt-oferta: #f472b6;
  --gpt-oferta-text: #f9a8d4;
  --gpt-canales: #34d399;
  --gpt-canales-text: #6ee7b7;
  --gpt-publicidad: #fbbf24;
  --gpt-publicidad-text: #fcd34d;
  --gpt-error: #f87171;
  --gpt-error-glow: 0 0 0 1px rgba(248,113,113,0.3), 0 0 24px -4px rgba(248,113,113,0.18);
  --gpt-success-glow: 0 0 0 1px rgba(74,222,128,0.25), 0 0 24px -4px rgba(74,222,128,0.18);
}

@keyframes glowPulseAccent {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.5), 0 0 24px rgba(255, 184, 0, 0.4); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.4), 0 0 24px rgba(255, 184, 0, 0.2); }
}

.paso1-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.paso1-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

.paso1-header {
  padding: 48px 40px 32px;
  border-bottom: 1px solid var(--line);
}
.paso1-header-pretitle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.paso1-header-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  line-height: 1.1;
}
.paso1-header-subtitle {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.6;
  max-width: 720px;
}

.paso1-score-card {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-bg), transparent);
  display: flex;
  align-items: center;
  gap: 16px;
}
.paso1-score-card .score {
  font-size: 44px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: -0.02em;
}
.paso1-score-card .score-suffix {
  font-size: 16px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  margin-left: 2px;
}
.paso1-score-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.paso1-score-card .body {
  flex: 1;
}
.paso1-score-card .precalc-text {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.paso1-score-card .precalc-text .ok {
  color: var(--ok);
}

.paso1-precalc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 40px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  color: var(--fg-2);
  font-family: var(--font-sans);
  animation: fadeDown 0.35s var(--ease-out);
}
.paso1-precalc-banner.is-ready {
  border-left-color: var(--ok);
  background: rgba(74, 222, 128, 0.06);
  color: var(--ok);
}

.paso1-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 28px 40px 32px;
  max-width: 1100px;
}
@media (min-width: 1100px) {
  .paso1-grid { grid-template-columns: repeat(2, 1fr); }
}

.gpt-card {
  --gpt-color: var(--gpt-mercado);
  --gpt-color-text: var(--gpt-mercado-text);
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
  animation: fadeUp 0.4s var(--ease-out) backwards;
}
.gpt-card.is-gpt-mercado    { --gpt-color: var(--gpt-mercado);     --gpt-color-text: var(--gpt-mercado-text); }
.gpt-card.is-gpt-producto   { --gpt-color: var(--gpt-producto);    --gpt-color-text: var(--gpt-producto-text); }
.gpt-card.is-gpt-oferta     { --gpt-color: var(--gpt-oferta);      --gpt-color-text: var(--gpt-oferta-text); }
.gpt-card.is-gpt-canales    { --gpt-color: var(--gpt-canales);     --gpt-color-text: var(--gpt-canales-text); }
.gpt-card.is-gpt-publicidad { --gpt-color: var(--gpt-publicidad);  --gpt-color-text: var(--gpt-publicidad-text); }

.gpt-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gpt-color);
  opacity: 0.6;
  transition: opacity 0.3s var(--ease-out);
}

.gpt-card:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
}

.gpt-card.is-completed {
  border-color: rgba(74, 222, 128, 0.45);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent);
  box-shadow: var(--gpt-success-glow);
}
.gpt-card.is-completed::before {
  background: var(--ok);
  opacity: 1;
}

.gpt-card.is-scoring {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.3), 0 0 24px -4px rgba(255, 184, 0, 0.4);
}

.gpt-card.has-error {
  border-color: var(--gpt-error);
  box-shadow: var(--gpt-error-glow);
}

.gpt-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.gpt-card-monogram {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--gpt-color-text);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-out);
}
.gpt-card.is-completed .gpt-card-monogram {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.45);
  color: var(--ok);
}

.gpt-card-meta {
  flex: 1;
  min-width: 0;
}
.gpt-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gpt-color-text);
  margin-bottom: 2px;
}
.gpt-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.gpt-card-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gpt-color-text);
  letter-spacing: -0.01em;
  animation: popIn 0.3s var(--ease-out);
}
.gpt-card-score-badge.is-low  { color: var(--danger); }
.gpt-card-score-badge.is-mid  { color: var(--warn); }
.gpt-card-score-badge.is-high { color: var(--ok); }
.gpt-card-score-badge .suffix {
  font-size: 10px;
  color: var(--fg-3);
  font-weight: 500;
  margin-left: 2px;
}

.gpt-card-check {
  color: var(--ok);
  font-weight: 700;
  font-size: 16px;
  animation: popIn 0.3s var(--ease-out);
}

.gpt-card-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gpt-card-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  resize: vertical;
  font-family: var(--font-sans);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.gpt-card-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.12);
}
.gpt-card-textarea::placeholder {
  color: var(--fg-4);
}
.gpt-card-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gpt-card-char-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  text-align: right;
  margin-top: -6px;
}
.gpt-card-char-count.is-ready {
  color: var(--fg-2);
}

.gpt-card-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--radius-sm);
  color: var(--gpt-error);
  font-size: 12px;
  line-height: 1.5;
}
.gpt-card-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.gpt-card-footer {
  padding: 0 20px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.gpt-card-status-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpt-card-status-text.is-completed { color: var(--ok); }
.gpt-card-status-text.is-scoring   { color: var(--warn); display: inline-flex; align-items: center; gap: 6px; }
.gpt-card-status-text.is-error     { color: var(--gpt-error); }

.gpt-card-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: var(--font-sans);
}
.gpt-card-complete-btn:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-2);
  border-style: solid;
}
.gpt-card-complete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.gpt-card-complete-btn.is-completed {
  border-style: solid;
  border-color: rgba(74, 222, 128, 0.45);
  color: var(--ok);
  background: rgba(74, 222, 128, 0.08);
}
.gpt-card-complete-btn.is-completed:hover {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--danger);
}

.paso1-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 18px 40px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.98));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.paso1-footer.is-ready { border-top-color: var(--accent); }
.paso1-footer-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paso1-footer-summary .primary {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.paso1-footer-summary .secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.paso1-footer-summary .secondary.is-ok { color: var(--ok); }
.paso1-footer-summary .secondary.is-warn { color: var(--warn); }

.paso1-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: #0a0a0a;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: var(--font-sans);
}
.paso1-generate-btn:hover:not(:disabled) {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.paso1-generate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-3);
  color: var(--fg-3);
}
.paso1-generate-btn.is-instant {
  animation: glowPulseAccent 2.4s var(--ease-in-out) infinite;
}

/* Insights panel — Paso 1 */
.paso1-insights {
  padding: 28px 24px 80px;
  border-left: 1px solid var(--line);
  background: var(--bg-1);
  overflow-y: auto;
  height: 100%;
}
.paso1-insights-pretitle {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.paso1-insights-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.paso1-insights-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.paso1-insights-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.paso1-insights-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.paso1-insights-big-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.paso1-insights-big-score .suffix {
  font-size: 18px;
  color: var(--fg-3);
  margin-left: 2px;
}
.paso1-insights-hint {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 6px;
  font-family: var(--font-mono);
}
.paso1-insights-hint.is-ok { color: var(--ok); }
.paso1-insights-hint.is-warn { color: var(--warn); }

.paso1-insights-gpt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  transition: background 0.2s var(--ease-out);
}
.paso1-insights-gpt-row:hover { background: rgba(255, 255, 255, 0.04); }
.paso1-insights-gpt-row .gpt-name {
  font-weight: 500;
  letter-spacing: 0.04em;
}
.paso1-insights-gpt-row .gpt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paso1-insights-gpt-row .score {
  font-weight: 700;
  color: var(--fg);
}
.paso1-insights-gpt-row .check { color: var(--ok); font-weight: 700; }
.paso1-insights-gpt-row .spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulseDot 1.4s var(--ease-in-out) infinite;
}
.paso1-insights-gpt-row .empty { color: var(--fg-4); }

.paso1-insights-last-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.paso1-insights-last-report .date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Report modal (Paso 1) */
.paso1-modal {
  max-width: 720px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.paso1-modal .modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.paso1-modal .modal-foot {
  padding: 16px 24px;
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.paso1-modal .modal-head { flex-shrink: 0; }

.paso1-report-disclaimer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: var(--radius-sm);
  color: var(--warn);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.paso1-report-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.paso1-report-summary .score {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.paso1-report-summary .score-suffix {
  font-size: 14px;
  color: var(--fg-3);
  margin-left: 2px;
}
.paso1-report-summary .body { flex: 1; }
.paso1-report-summary .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.paso1-report-summary .meta {
  font-size: 12px;
  color: var(--fg-2);
}

.paso1-report-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.paso1-report-section:last-child { border-bottom: 0; }
.paso1-report-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.paso1-report-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.paso1-report-section-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.paso1-report-section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.paso1-report-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paso1-report-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}
.paso1-report-list.tasks li { border-left-color: var(--ok); }
.paso1-report-list.tasks li .priority {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  min-width: 18px;
}

.paso1-report-per-gpt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.paso1-report-gpt-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.paso1-report-gpt-mini .mono {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.paso1-report-gpt-mini .name { flex: 1; }
.paso1-report-gpt-mini .reason { color: var(--fg-3); font-size: 11px; }
.paso1-report-gpt-mini .score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  margin-left: auto;
}

.paso1-report-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}
.paso1-report-skeleton-block {
  height: 60px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* Spinner inline */
.paso1-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}

/* Responsive Paso 1 */
@media (max-width: 1180px) {
  .paso1-layout { grid-template-columns: 1fr; }
  .paso1-insights {
    border-left: 0;
    border-top: 1px solid var(--line);
    height: auto;
    max-height: 60vh;
  }
  .paso1-grid { padding: 24px 24px 32px; }
  .paso1-header { padding: 32px 24px 24px; }
  .paso1-precalc-banner { padding: 12px 24px; }
  .paso1-footer { padding: 16px 24px; }
}
@media (max-width: 720px) {
  .paso1-grid { grid-template-columns: 1fr; padding: 20px 16px 24px; gap: 12px; }
  .paso1-header { padding: 24px 16px 20px; }
  .paso1-header-title { font-size: 28px; }
  .paso1-precalc-banner { padding: 10px 16px; font-size: 12px; }
  .paso1-footer { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 12px; }
  .paso1-footer.is-ready { padding-bottom: 14px; }
  .paso1-insights { padding: 20px 16px 60px; }
  .paso1-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .gpt-card-header { padding: 14px 16px; }
  .gpt-card-body { padding: 14px 16px; }
  .gpt-card-footer { padding: 0 16px 14px; }
  .gpt-card-textarea { min-height: 120px; }
}

/* ═══════════════════════════════════════════════════════════════
   LIENZO DEL EMBUDO — 5 strategy nodes + curved SVG connectors
   ═══════════════════════════════════════════════════════════════ */

.lienzo {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.lienzo-header {
  margin-bottom: 28px;
}
.lienzo-header-pretitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lienzo-header-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.lienzo-header-subtitle {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 14px;
}
.lienzo-progress {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.lienzo-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.lienzo-nodes {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lienzo-node {
  width: 100%;
  max-width: 520px;
}

.lienzo-node-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lienzo-node.is-expanded .lienzo-node-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.lienzo-node-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}
.lienzo-node-header:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.lienzo-node-ordinal {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  min-width: 28px;
}
.lienzo-node-titles { flex: 1; min-width: 0; }
.lienzo-node-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.lienzo-node-subdesc {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}

.lienzo-node-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lienzo-node-status-dot--empty { background: var(--line-2); }
.lienzo-node-status-dot--warn { background: var(--warn); }
.lienzo-node-status-dot--ok { background: var(--ok, #22c55e); }

.lienzo-node-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}
.lienzo-node-delta.is-up { color: var(--ok, #22c55e); background: rgba(34, 197, 94, 0.1); }
.lienzo-node-delta.is-down { color: var(--warn); background: rgba(234, 179, 8, 0.1); }

.lienzo-node-preview {
  padding: 0 18px 14px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.lienzo-node-kpi {
  padding: 0 18px 14px;
  font-size: 12px;
  color: var(--fg-3);
}
.lienzo-node-kpi .k {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg-2);
  margin-right: 6px;
}

.lienzo-node-progress {
  height: 3px;
  background: var(--line);
  margin: 0 18px 14px;
  border-radius: 2px;
  overflow: hidden;
}
.lienzo-node-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.lienzo-node-editor {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}
.lienzo-node-field { margin-bottom: 12px; }
.lienzo-node-field:last-child { margin-bottom: 0; }
.lienzo-node-field-label {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.lienzo-node-textarea,
.lienzo-node-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--fg);
  font-family: var(--font-sans);
  resize: vertical;
}
.lienzo-node-textarea:focus,
.lienzo-node-input:focus {
  outline: none;
  border-color: var(--accent);
}

.lienzo-connector {
  width: 60px;
  height: 40px;
  display: block;
  margin: 4px 0;
}
.lienzo-connector-path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  transition: stroke 0.3s ease;
}
.lienzo-connector-path.is-both-ok {
  stroke: var(--accent);
  stroke-dasharray: none;
}

.lienzo-error {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(234, 179, 8, 0.1);
  color: var(--warn);
  border-radius: 8px;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   MÉTRICAS DE SEGUIMIENTO — 4 KPI cards + stage-by-stage table
   ═══════════════════════════════════════════════════════════════ */

.metricas-view {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.metricas-header {
  margin-bottom: 24px;
}
.metricas-header-pretitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.metricas-header-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.metricas-header-subtitle {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
}

.metricas-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.metricas-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.metricas-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  position: relative;
}
.metricas-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.metricas-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.metricas-card-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}
.metricas-card-status-dot--ok { background: var(--ok, #22c55e); }
.metricas-card-status-dot--warn { background: var(--warn); }
.metricas-card-status-dot--err,
.metricas-card-status-dot--error { background: #ef4444; }

.metricas-card-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.metricas-card-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.metricas-card-unit {
  font-size: 12px;
  color: var(--fg-3);
}
.metricas-card-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}
.metricas-card-delta--up { color: var(--ok, #22c55e); }
.metricas-card-delta--down { color: var(--warn); }
.metricas-card-delta--flat { color: var(--fg-3); }
.metricas-card-sparkline {
  display: block;
  width: 100%;
  height: 40px;
  margin-bottom: 8px;
}
.metricas-card-target {
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}

.metricas-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.metricas-skeleton-bar {
  background: var(--line);
  height: 12px;
  border-radius: 4px;
  animation: metricas-pulse 1.4s ease-in-out infinite;
}
@keyframes metricas-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.metricas-table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.metricas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.metricas-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.metricas-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  vertical-align: middle;
}
.metricas-table tr:last-child td { border-bottom: 0; }

.metricas-table-stage {
  display: flex;
  align-items: center;
  gap: 10px;
}
.metricas-table-ordinal {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.metricas-table-metrica {
  color: var(--fg-2);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metricas-tendencia-up { color: var(--ok, #22c55e); }
.metricas-tendencia-down { color: var(--warn); }
.metricas-tendencia-flat { color: var(--fg-3); }

.metricas-estado {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.metricas-estado-ok { color: var(--ok, #22c55e); background: rgba(34, 197, 94, 0.1); }
.metricas-estado-warn { color: var(--warn); background: rgba(234, 179, 8, 0.1); }
.metricas-estado-err,
.metricas-estado-error { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.metricas-refresh-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}
.metricas-ai-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .lienzo { padding: 20px 16px 48px; }
  .lienzo-header-title { font-size: 24px; }
  .metricas-view { padding: 20px 16px 48px; }
  .metricas-header-title { font-size: 24px; }
  .metricas-cards { grid-template-columns: 1fr; }
  .metricas-table th, .metricas-table td { padding: 10px; font-size: 12px; }
  .metricas-table-metrica { max-width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING STEP 5 · Funnel type-picker + conversational chat
   ═══════════════════════════════════════════════════════════════ */

.funnel-type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.funnel-type-card {
  position: relative;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  font-family: var(--font-sans);
  color: var(--fg);
}
.funnel-type-card:hover {
  border-color: var(--fg-2);
  transform: translateY(-1px);
}
.funnel-type-card:focus-visible {
  outline: 2px solid var(--accent, #ff5b1f);
  outline-offset: 2px;
}

.funnel-type-monogram {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

.funnel-type-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.funnel-type-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}

.funnel-type-foot {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   Funnel chat (step 5 conversational)
   ═══════════════════════════════════════════════════════════════ */

.funnel-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.funnel-chat-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.funnel-chat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.funnel-chat-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.funnel-chat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.funnel-chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.funnel-chat-pill.is-done {
  color: var(--ok, #1f9d55);
  border-color: var(--ok, #1f9d55);
}
.funnel-chat-pill.is-active {
  color: var(--fg);
  border-color: var(--fg-2);
  background: var(--surface);
}

.funnel-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 2px 6px 2px;
  max-height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.funnel-chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.funnel-chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  flex-shrink: 0;
}
.funnel-chat-msg.is-user .funnel-chat-msg-avatar {
  background: var(--surface);
  color: var(--fg);
}
.funnel-chat-msg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.funnel-chat-msg.is-user .funnel-chat-msg-body {
  background: var(--surface-2);
}
.funnel-chat-msg-author {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.funnel-chat-msg-content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.funnel-chat-msg-content p { margin: 0 0 6px; }
.funnel-chat-msg-content p:last-child { margin-bottom: 0; }

.funnel-chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.funnel-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: funnelTyping 1.2s infinite ease-in-out;
}
.funnel-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.funnel-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes funnelTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.funnel-chat-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #c43838;
  background: rgba(196, 56, 56, 0.08);
  border: 1px solid rgba(196, 56, 56, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
}

.funnel-chat-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.funnel-chat-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.funnel-chat-confirm-text {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.4;
}
.funnel-chat-confirm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.funnel-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.funnel-chat-input {
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 4px;
  min-height: 40px;
  max-height: 140px;
  outline: none;
}
.funnel-chat-input::placeholder { color: var(--fg-3); }
.funnel-chat-input:disabled { opacity: 0.6; cursor: not-allowed; }

.funnel-chat-input-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding: 0 4px 4px;
  letter-spacing: 0.04em;
}

.funnel-chat-reentry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.funnel-chat-reentry-head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.funnel-chat-reentry-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.funnel-chat-reentry-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.funnel-chat-reentry-q {
  font-size: 12px;
  color: var(--fg-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-chat-reentry-a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  font-weight: 600;
}
.funnel-chat-reentry-actions {
  display: flex;
  gap: 6px;
}

.funnel-chat-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.funnel-chat-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.funnel-chat-summary-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.funnel-chat-summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  margin-top: 8px;
}
.funnel-chat-summary-key {
  font-size: 13px;
  color: var(--fg-2);
}
.funnel-chat-summary-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   Paso 1 · partial-report disclaimer + coverage pill
   ═══════════════════════════════════════════════════════════════ */

.paso1-report-partial {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(255, 91, 31, 0.06);
  border: 1px solid rgba(255, 91, 31, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paso1-report-partial-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #b04a17;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.paso1-report-partial-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}
.paso1-report-partial-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.paso1-report-partial-missing ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.paso1-report-partial-missing li {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-2);
}
.paso1-report-partial-disclaimer {
  font-size: 12px;
  color: var(--fg-3);
  font-style: italic;
}

.paso1-coverage-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-2);
  margin-left: auto;
}

/* When the report is partial, we hide the big score circle and
   replace the summary with a note explaining the report is action-driven. */
.paso1-report-summary--no-score {
  justify-content: flex-start;
  gap: 0;
}
.paso1-report-summary--no-score .body .label {
  margin-bottom: 4px;
}
.paso1-report-partial-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-2);
  font-style: italic;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--accent, #ff5b1f);
}

@media (max-width: 720px) {
  .funnel-type-picker { grid-template-columns: 1fr; }
  .funnel-chat-stream { max-height: 360px; }
  .paso1-report-partial-head { font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════
   POLISH v1 — animaciones sutiles + detalles de color (aditivo)
   ═══════════════════════════════════════════════════════════════ */

/* Dots de carga reutilizables (3 puntitos que rebotan). */
.fmla-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.fmla-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; opacity: 0.35;
  animation: fmlaBlink 1.2s infinite ease-in-out;
}
.fmla-dots i:nth-child(2) { animation-delay: 0.18s; }
.fmla-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes fmlaBlink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Entrada suave del contenido principal al cambiar de sección. */
.main > .content { animation: fmlaContentIn 0.28s cubic-bezier(.2,.8,.2,1); }
@keyframes fmlaContentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Nav: transición + barrita de acento en el item activo. */
.nav-item { transition: background 160ms ease, color 160ms ease; position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 56%; border-radius: 0 3px 3px 0; background: var(--accent);
}

/* Botones: micro-lift al pasar el mouse (sin romper estilos existentes). */
.btn { transition: transform 120ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

/* Inputs: foco con glow de acento suave. */
.auth-input:focus, .fb-q-input:focus, .p3-chat-input input:focus {
  box-shadow: 0 0 0 3px rgba(255,184,0,0.12);
}

/* Pill de conexión: leve realce. */
.conn-pill { transition: background 160ms ease, border-color 160ms ease; }
.conn-pill:hover { border-color: var(--line-2); }