:root {
  --page-bg: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #fbfcfe;
  --surface-muted: #f3f5f8;
  --surface-hover: #f8fafc;
  --text: #172033;
  --text-strong: #0f172a;
  --text-secondary: #667085;
  --text-tertiary: #98a2b3;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --primary: #3157d5;
  --primary-hover: #2648bd;
  --primary-soft: #eef2ff;
  --primary-border: #c7d2fe;
  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --info: #175cd3;
  --info-soft: #eff8ff;
  --focus: rgba(49, 87, 213, .28);
  --sidebar-w: 248px;
  --topbar-h: 68px;
  --content-max: 1440px;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --shadow-sm: 0 2px 8px rgba(16,24,40,.06);
  --shadow-md: 0 10px 30px rgba(16,24,40,.08);
  --font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body.theme-light {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  background: var(--text-strong);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--border);
}
.sidebar-backdrop { display: none; }
.sidebar-brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  text-decoration: none;
}
.brand-logo {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #385bd7, #243ca8);
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(49,87,213,.22);
}
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: .98rem; letter-spacing: -.015em; }
.brand-copy small { margin-top: 4px; color: var(--text-secondary); font-size: .72rem; font-weight: 600; }
.sidebar-close { display: none !important; }

.sidebar-nav {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px 12px;
}
.nav-section + .nav-section { margin-top: 24px; }
.nav-section-system { padding-top: 18px; border-top: 1px solid var(--border); }
.nav-section-label {
  margin: 0 10px 8px;
  color: var(--text-tertiary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #475467;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.sidebar-link:hover { background: var(--surface-muted); color: var(--text-strong); }
.sidebar-link.active {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(49,87,213,.05);
}
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.sidebar-footer {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--border);
}
.environment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 650;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #12b76a;
  box-shadow: 0 0 0 4px #ecfdf3;
}

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-title { display: grid; line-height: 1.1; }
.topbar-title strong { color: var(--text-strong); font-size: 1rem; letter-spacing: -.01em; }
.topbar-eyebrow { display: none; color: var(--text-tertiary); font-size: .7rem; font-weight: 700; }
.menu-btn { display: none !important; }
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-muted); }
.menu-btn span {
  display: block;
  width: 17px;
  height: 1.5px;
  margin: 2px 0;
  border-radius: 999px;
  background: currentColor;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 32px 48px;
  flex: 1 0 auto;
}
.site-footer {
  max-width: var(--content-max);
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 18px 0 26px;
  color: var(--text-tertiary);
  font-size: .76rem;
  display: flex;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.footer-sep { color: var(--border-strong); }

h1, h2, h3, h4 {
  color: var(--text-strong);
  letter-spacing: -.025em;
  line-height: 1.2;
}
h1 { margin: 0 0 8px; font-size: clamp(1.65rem, 2vw, 2.15rem); font-weight: 750; }
h2 { margin: 0 0 8px; font-size: 1.28rem; font-weight: 730; }
h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
h4 { margin: 0 0 4px; font-size: .94rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.purpose, .subtitle { margin: 0 0 24px; color: var(--text-secondary); max-width: 760px; }
.fine, .fineprint, .note, .muted { color: var(--text-secondary); font-size: .84rem; }
.text-strong { color: var(--text-strong); font-weight: 700; }
.text-muted { color: var(--text-secondary); }
.text-success, .ok { color: var(--success); }
.text-warning, .warn { color: var(--warning); }
.text-danger, .bad { color: var(--danger); }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-header-copy { min-width: 0; }
.page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.panel, .card, .tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.panel { padding: 20px; margin: 0 0 18px; }
.card { padding: 20px; }
.tile { padding: 18px 20px; }
.panel-header, .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.panel-title { margin: 0; }
.panel-subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: .88rem; }

.grid, .grid2, .summary-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}
.grid, .summary-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }

.tile h3, .stat-label {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tile p, .stat-value { margin: 0; color: var(--text-strong); font-size: 1.65rem; font-weight: 760; line-height: 1.1; }
.tile .meta, .stat-meta { margin-top: 8px; color: var(--text-secondary); font-size: .82rem; font-weight: 500; }
.stat-card {
  min-height: 126px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.stat-top { display:flex; justify-content:space-between; gap:12px; }
.stat-icon {
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary);
}

.quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 22px; }
.section-stack { display:grid; gap:18px; }
.two-column-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:18px; align-items:start; }
.three-column-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }

.progress-shell { margin: 12px 0 4px; }
.progress-track { height:8px; border-radius:999px; background:#eef1f5; overflow:hidden; }
.progress-bar { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#6c7cff); transition:width .2s ease; }
.progress-meta { display:flex; justify-content:space-between; gap:16px; margin-top:8px; color:var(--text-secondary); font-size:.8rem; }
.checklist { display:grid; gap:8px; margin:16px 0 0; }
.check-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft);
}
.check-row-left { display:flex; align-items:center; gap:10px; min-width:0; }
.check-dot {
  width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  background:#eef1f5;color:var(--text-secondary);font-size:.72rem;font-weight:800;
}
.check-row.complete .check-dot { background:var(--success-soft); color:var(--success); }
.check-row.blocked .check-dot { background:var(--danger-soft); color:var(--danger); }

.wizard-shell { display:grid; gap:20px; }
.wizard-header {
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;
}
.wizard-stepper {
  display:grid;
  grid-template-columns:repeat(8,minmax(92px,1fr));
  gap:8px;
  overflow-x:auto;
  padding:2px 0 8px;
  scrollbar-width:thin;
}
.wizard-step {
  min-width:92px;
  display:grid;
  gap:7px;
  color:var(--text-secondary);
  text-decoration:none;
  font-size:.76rem;
  font-weight:700;
}
.wizard-step-number {
  width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  background:#f2f4f7;color:var(--text-secondary);
  border:1px solid var(--border);
}
.wizard-step.current { color:var(--primary); }
.wizard-step.current .wizard-step-number { background:var(--primary);border-color:var(--primary);color:#fff; }
.wizard-step.complete { color:var(--success); }
.wizard-step.complete .wizard-step-number { background:var(--success-soft);border-color:#abefc6;color:var(--success); }
.wizard-step.blocked { color:var(--danger); }
.wizard-step.blocked .wizard-step-number { background:var(--danger-soft);border-color:#fecdca;color:var(--danger); }
.wizard-actions {
  position:sticky;bottom:12px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding:12px;
  border:1px solid var(--border);border-radius:14px;
  background:rgba(255,255,255,.95);box-shadow:var(--shadow-md);backdrop-filter:blur(10px);
}
.save-state { font-size:.8rem;color:var(--text-secondary);font-weight:650; }
.save-state[data-state="saving"] { color:var(--warning); }
.save-state[data-state="saved"] { color:var(--success); }
.save-state[data-state="failed"] { color:var(--danger); }

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 16px;
}
.form-grid-3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px; }
.field-group { margin: 0 0 18px; }
label {
  display:block;
  margin:12px 0;
  color:var(--text);
  font-size:.86rem;
  font-weight:680;
}
label .help, .help-text {
  display:block;
  margin-top:5px;
  color:var(--text-secondary);
  font-size:.76rem;
  font-weight:500;
}
input, select, textarea {
  width:100%;
  max-width:100%;
  margin-top:7px;
  padding:10px 12px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:#fff;
  color:var(--text-strong);
  min-height:42px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height:112px; resize:vertical; }
input::placeholder, textarea::placeholder { color:#98a2b3; }
input:hover, select:hover, textarea:hover { border-color:#b8c0cc; }
input:focus, select:focus, textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background:var(--surface-muted);color:var(--text-secondary);cursor:not-allowed;
}
input[type="checkbox"], input[type="radio"] {
  width:18px;height:18px;min-height:0;margin:0;vertical-align:middle;accent-color:var(--primary);
}
.field-error { margin-top:5px;color:var(--danger);font-size:.78rem; }
.input-prefix { display:flex;align-items:stretch; }
.input-prefix > span {
  display:flex;align-items:center;padding:0 11px;
  border:1px solid var(--border-strong);border-right:0;border-radius:10px 0 0 10px;
  background:var(--surface-muted);color:var(--text-secondary);
}
.input-prefix input { margin:0;border-radius:0 10px 10px 0; }

.btn, button, .inline button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  font-size:.88rem;
  font-weight:720;
  text-decoration:none;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover, button:hover:not(:disabled) { background:var(--primary-hover); color:#fff; }
.btn:active, button:active:not(:disabled) { transform:translateY(1px); }
.btn-secondary, button.btn-secondary {
  background:#fff;color:var(--text);border-color:var(--border-strong);
}
.btn-secondary:hover, button.btn-secondary:hover:not(:disabled) {
  background:var(--surface-muted);color:var(--text-strong);border-color:#b8c0cc;
}
.btn-ghost { background:transparent;color:var(--text-secondary);border-color:transparent; }
.btn-ghost:hover { background:var(--surface-muted);color:var(--text-strong); }
.btn-danger { background:var(--danger); }
.btn-danger:hover { background:#912018; }
.btn-success { background:var(--success); }
.btn-sm { min-height:34px;padding:6px 10px;font-size:.8rem;border-radius:8px; }
.btn-lg { min-height:46px;padding:11px 18px;font-size:.94rem; }
.btn-block { width:100%; }
button:disabled, .btn:disabled, .btn-disabled {
  background:#eaecf0 !important;
  color:#98a2b3 !important;
  border-color:#eaecf0 !important;
  cursor:not-allowed;
  opacity:1;
}
.actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.inline { display:inline; margin:0; }

.badge, .status-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  font-size:.74rem;
  font-weight:750;
  line-height:1.2;
}
.badge { padding:4px 8px;background:var(--primary-soft);color:var(--primary); }
.status-pill { padding:6px 10px;background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border); }
.badge-ok, .badge-success { background:var(--success-soft);color:var(--success); }
.badge-warn, .badge-warning { background:var(--warning-soft);color:var(--warning); }
.badge-bad, .badge-danger { background:var(--danger-soft);color:var(--danger); }
.badge-idle, .badge-neutral { background:#f2f4f7;color:#475467; }
.badge-info { background:var(--info-soft);color:var(--info); }

.table-wrap {
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-xs);
}
table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}
body > table, .panel > table { border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
th, td {
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:.87rem;
  vertical-align:middle;
}
th {
  background:#fafbfc;
  color:#475467;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
tbody tr:hover { background:#fbfcfe; }
tbody tr:last-child td { border-bottom:0; }

.tabs {
  display:flex;
  gap:4px;
  margin:18px 0 22px;
  padding:4px;
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.tabs a {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:8px;
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:680;
  text-decoration:none;
  white-space:nowrap;
}
.tabs a:hover { background:var(--surface-muted);color:var(--text-strong); }
.tabs .on, .tabs .active { background:var(--primary-soft);color:var(--primary); }

.empty-state {
  padding:28px;
  text-align:center;
  color:var(--text-secondary);
  background:var(--surface-soft);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
}
.empty-state h3 { margin-bottom:6px; }
.empty-state p { max-width:520px;margin:0 auto 16px; }

.alert {
  display:flex;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  margin:0 0 14px;
  font-size:.84rem;
}
.alert-info { background:var(--info-soft);border-color:#b2ddff;color:#1849a9; }
.alert-success { background:var(--success-soft);border-color:#abefc6;color:#05603a; }
.alert-warning { background:var(--warning-soft);border-color:#fedf89;color:#93370d; }
.alert-danger { background:var(--danger-soft);border-color:#fecdca;color:#912018; }

.agent-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
}
.agent-card-title { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.agent-card-meta { display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;color:var(--text-secondary);font-size:.8rem; }

.knowledge-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.knowledge-card {
  padding:16px;border:1px solid var(--border);border-radius:12px;background:#fff;
  display:grid;gap:10px;
}
.knowledge-card-top { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }

.choice-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.choice-card {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:72px;
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}
.choice-card:hover { border-color:#b8c0cc;background:var(--surface-soft); }
.choice-card:has(input:checked) { border-color:var(--primary);box-shadow:0 0 0 2px var(--focus);background:var(--primary-soft); }

code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.84em;
  background:#f2f4f7;
  border:1px solid #eaecf0;
  border-radius:5px;
  padding:.08rem .32rem;
  color:#344054;
}
.out, pre.out, .live {
  background:#0f172a;
  color:#d7e0f0;
  border:1px solid #1e293b;
  border-radius:10px;
  padding:12px;
  min-height:64px;
  white-space:pre-wrap;
  overflow:auto;
  max-height:360px;
  font-size:.8rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
details.panel summary { cursor:pointer;font-weight:700;color:var(--text-strong); }
details.panel[open] summary { margin-bottom:14px; }
.loader-error {
  margin-top:8px;padding:11px 12px;border-radius:9px;
  border:1px solid #fecdca;background:var(--danger-soft);color:var(--danger);
}

.live-layout {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:18px;
  align-items:start;
}
.live-conversation {
  min-height:260px;
  max-height:560px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  background:#fff;
}
.conv-row { margin:0 0 12px; }
.conv-label { margin-bottom:4px;color:var(--text-secondary);font-size:.7rem;font-weight:780;text-transform:uppercase;letter-spacing:.04em; }
.conv-text {
  display:inline-block;
  max-width:min(100%,620px);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface-muted);
  color:var(--text);
}
.conv-caller .conv-text { background:#f2f4f7; }
.conv-agent .conv-text, .conv-ai .conv-text { background:var(--primary-soft);border-color:var(--primary-border); }
.demo-actions { display:flex;gap:8px;flex-wrap:wrap;margin:16px 0; }
.demo-timer { margin:6px 0 12px;color:var(--text-secondary);font-variant-numeric:tabular-nums; }

.agent-summary dl { margin:0;display:grid;gap:10px; }
.agent-summary dt { color:var(--text-tertiary);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; }
.agent-summary dd { margin:2px 0 0;color:var(--text-strong);font-weight:650; }
.layer { margin:7px 0;padding:9px 11px;border-left:3px solid var(--primary);background:var(--surface-soft);border-radius:0 8px 8px 0; }

.toast-region {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:200;
  display:grid;
  gap:8px;
  pointer-events:none;
}
.toast {
  min-width:220px;
  max-width:360px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow-md);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;
  font-size:.84rem;
  font-weight:650;
}
.toast.show { opacity:1;transform:none; }
.toast-success { border-color:#abefc6;background:var(--success-soft);color:var(--success); }
.toast-danger { border-color:#fecdca;background:var(--danger-soft);color:var(--danger); }

.login {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(49,87,213,.11), transparent 34%),
    var(--page-bg);
}
.login > .card, .login .card { width:min(440px,100%);padding:28px;box-shadow:var(--shadow-md); }
.login-brand { position:fixed;left:24px;top:20px;display:flex;align-items:center;gap:10px;color:var(--text-strong); }

:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:2px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
  outline:none;
}

@media (max-width: 1180px) {
  .grid, .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .three-column-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wizard-stepper { grid-template-columns:repeat(8,minmax(100px,1fr)); }
}

@media (max-width: 1024px) {
  .sidebar {
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:var(--shadow-md);
  }
  .sidebar-open .sidebar { transform:translateX(0); }
  .sidebar-backdrop {
    position:fixed;inset:0;z-index:80;
    background:rgba(15,23,42,.36);
    backdrop-filter:blur(2px);
  }
  .sidebar-open .sidebar-backdrop { display:block; }
  .sidebar-close { display:inline-grid !important; }
  .app-main { margin-left:0; }
  .menu-btn { display:inline-grid !important; }
  .topbar-eyebrow { display:block; }
  .app-topbar { padding:0 20px; }
  .page { padding:26px 22px 40px; }
  .site-footer { width:calc(100% - 44px); }
  .live-layout, .two-column-layout { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  :root { --topbar-h:62px; }
  .page { padding:20px 16px 34px; }
  .app-topbar { padding:0 14px; }
  .hide-mobile { display:none !important; }
  .topbar-actions .btn { padding:7px 10px;min-height:36px; }
  .site-footer { width:calc(100% - 32px);flex-wrap:wrap;text-align:center; }
  .grid, .grid2, .grid3, .summary-grid, .three-column-layout, .form-grid, .form-grid-3, .knowledge-cards, .choice-grid {
    grid-template-columns:1fr;
  }
  .page-header { display:grid; }
  .page-header-actions { width:100%; }
  .page-header-actions .btn { flex:1 1 auto; }
  .wizard-header { display:grid; }
  .wizard-actions { bottom:8px;flex-wrap:wrap; }
  .wizard-actions > * { flex:1 1 auto; }
  .agent-card { grid-template-columns:1fr; }
  .panel, .card { padding:16px; }
  h1 { font-size:1.6rem; }
  .toast-region { left:12px;right:12px;bottom:12px; }
  .toast { min-width:0;max-width:none;width:100%; }

  .table-wrap.mobile-cards table,
  .table-wrap.mobile-cards thead,
  .table-wrap.mobile-cards tbody,
  .table-wrap.mobile-cards tr,
  .table-wrap.mobile-cards td { display:block;width:100%; }
  .table-wrap.mobile-cards thead { display:none; }
  .table-wrap.mobile-cards tbody tr { padding:10px;border-bottom:1px solid var(--border); }
  .table-wrap.mobile-cards tbody tr:last-child { border-bottom:0; }
  .table-wrap.mobile-cards td {
    display:grid;
    grid-template-columns:minmax(100px,.42fr) 1fr;
    gap:12px;
    padding:8px 4px;
    border:0;
  }
  .table-wrap.mobile-cards td::before {
    content:attr(data-label);
    color:var(--text-tertiary);
    font-size:.69rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
}

@media (max-width: 480px) {
  .brand-copy small { display:none; }
  .sidebar { width:min(88vw,288px); }
  .topbar-title strong { font-size:.92rem; }
  .topbar-actions .btn { font-size:.78rem; }
  .quick-actions .btn { width:100%; }
  .btn-lg { width:100%; }
  .footer-sep { display:none; }
  .site-footer span { width:100%; }
}

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


/* === FINAL EXACT MOCKUP UI OVERRIDES === */
:root{
  --yc-bg:#f6f8fc;
  --yc-card:#ffffff;
  --yc-border:#e6eaf2;
  --yc-text:#101828;
  --yc-muted:#667085;
  --yc-primary:#2f5bea;
  --yc-primary-2:#2447d8;
  --yc-blue-soft:#eef4ff;
  --yc-green:#12b76a;
  --yc-green-soft:#ecfdf3;
  --yc-purple-soft:#f4efff;
  --yc-orange-soft:#fff4e8;
  --yc-shadow:0 8px 24px rgba(16,24,40,.05);
  --yc-sidebar:226px;
  --yc-radius:16px;
}
body.theme-light{background:var(--yc-bg);color:var(--yc-text);font-size:14px}
.sidebar{width:var(--yc-sidebar);background:#fff;border-right:1px solid var(--yc-border)}
.app-main{margin-left:var(--yc-sidebar)}
.sidebar-brand{height:74px;padding:0 18px;border-bottom:1px solid var(--yc-border)}
.brand-logo{width:38px;height:38px;flex-basis:38px;border-radius:11px;background:linear-gradient(145deg,#3f68ee,#2447d8);box-shadow:0 7px 18px rgba(47,91,234,.18)}
.brand-copy strong{font-size:1rem}
.brand-copy small{font-size:.72rem;color:#667085}
.sidebar-nav{padding:18px 12px}
.nav-section+.nav-section{margin-top:18px}
.nav-section-label{margin:0 10px 8px;font-size:.66rem;color:#98a2b3;letter-spacing:.1em}
.sidebar-link{min-height:40px;padding:9px 11px;border-radius:9px;color:#344054;font-size:.87rem;font-weight:650}
.sidebar-link.active{background:#edf2ff;color:#2f5bea}
.sidebar-footer{padding:14px 16px 18px;border-top:1px solid var(--yc-border)}
.environment-chip{background:#edfdf3;border:1px solid #d1fadf;border-radius:9px;padding:9px 11px;color:#067647;margin-bottom:10px}
.app-topbar{height:74px;padding:0 28px;background:#fff;border-bottom:1px solid var(--yc-border);backdrop-filter:none}
.topbar-search{width:min(460px,45vw);height:40px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid #dfe4ec;border-radius:10px;background:#fff}
.topbar-search svg{width:18px;height:18px;fill:none;stroke:#667085;stroke-width:1.8}
.topbar-search input{border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;min-height:0!important;background:transparent!important;font-size:.86rem}
.topbar-search kbd{margin-left:auto;border:1px solid #e4e7ec;border-radius:6px;background:#f8fafc;color:#98a2b3;padding:1px 6px;font-size:.72rem}
.health-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:.78rem;font-weight:700}
.user-avatar{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:#2f5bea;color:#fff;font-weight:800}
.show-tablet{display:none}
.page{max-width:1320px;padding:30px 34px 50px}
.site-footer{display:none}
h1{font-size:2rem;font-weight:780;letter-spacing:-.04em}
.purpose{font-size:.92rem;margin-bottom:22px}
.page-header{margin-bottom:20px}
.btn,button,.inline button{min-height:38px;border-radius:9px;padding:9px 14px;font-size:.84rem;font-weight:740}
.btn.btn-primary,.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-success){box-shadow:0 5px 14px rgba(47,91,234,.18)}
.panel,.card,.tile{border:1px solid var(--yc-border);border-radius:14px;box-shadow:var(--yc-shadow)}
.panel{padding:20px}
.form-grid{gap:4px 22px}
label{font-size:.8rem;margin:10px 0;color:#344054;font-weight:700}
input,select,textarea{min-height:40px;margin-top:6px;border-radius:8px;border:1px solid #d8dee9;padding:9px 11px;font-size:.84rem}
textarea{min-height:100px}
input:focus,select:focus,textarea:focus{border-color:#7f9cf5;box-shadow:0 0 0 3px rgba(47,91,234,.11)}
.table-wrap{border-radius:12px;box-shadow:none}
th{font-size:.68rem;background:#f8fafc;color:#667085}
td{font-size:.82rem}
.skip-link{left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;padding:0}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:.7rem 1rem;z-index:1000}

/* Dashboard - exact approved target */
.yc-dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.yc-dashboard-title h1{margin:0 0 5px}
.yc-dashboard-title p{margin:0;color:var(--yc-muted);font-size:.9rem}
.yc-quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.yc-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.yc-metric{background:#fff;border:1px solid var(--yc-border);border-radius:13px;padding:16px;display:flex;gap:12px;align-items:flex-start;min-height:102px}
.yc-metric-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;font-weight:800}
.yc-metric-icon.blue{background:#edf4ff;color:#2f5bea}.yc-metric-icon.green{background:#ecfdf3;color:#12b76a}.yc-metric-icon.purple{background:#f4efff;color:#7f56d9}.yc-metric-icon.orange{background:#fff4e8;color:#f79009}
.yc-metric-copy strong{display:block;color:#344054;font-size:.78rem;margin-bottom:4px}.yc-metric-copy b{display:block;font-size:1.55rem;line-height:1.05}.yc-metric-copy span{display:block;color:#98a2b3;font-size:.72rem;margin-top:7px}
.yc-onboarding-card{background:#fff;border:1px solid var(--yc-border);border-radius:16px;box-shadow:var(--yc-shadow);overflow:hidden;margin-bottom:16px}
.yc-onboarding-inner{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:center;min-height:216px;padding:28px 34px}
.yc-onboarding-copy h2{font-size:1.45rem;margin-bottom:8px}.yc-onboarding-copy p{color:#667085;max-width:620px;margin-bottom:18px}
.yc-hero-visual{position:relative;height:170px;display:grid;place-items:center}
.yc-hero-orb{width:164px;height:164px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#f8fbff 0,#e8f0ff 58%,#dce8ff 100%);display:grid;place-items:center;position:relative}
.yc-hero-headset{width:92px;height:92px;border:7px solid #3f66df;border-bottom-color:transparent;border-radius:46px 46px 22px 22px;position:relative}
.yc-hero-headset:before,.yc-hero-headset:after{content:"";position:absolute;top:38px;width:18px;height:40px;border-radius:9px;background:#4d73e8}
.yc-hero-headset:before{left:-14px}.yc-hero-headset:after{right:-14px}
.yc-hero-wave{position:absolute;width:54px;height:54px;border-radius:13px;background:#fff;box-shadow:0 8px 22px rgba(47,91,234,.13);display:grid;place-items:center;color:#2f5bea;font-size:1.4rem;font-weight:800}
.yc-onboarding-features{border-top:1px solid var(--yc-border);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.yc-feature{padding:14px 20px;display:flex;gap:10px;align-items:center}.yc-feature+.yc-feature{border-left:1px solid var(--yc-border)}
.yc-feature-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#f4f7ff;color:#2f5bea;font-weight:800}.yc-feature strong{display:block;font-size:.78rem}.yc-feature span{display:block;color:#98a2b3;font-size:.69rem;margin-top:2px}
.yc-empty-agents{background:#fff;border:1px solid var(--yc-border);border-radius:14px;padding:30px;text-align:center;color:#667085}
.yc-empty-agents strong{display:block;color:#101828;font-size:1rem;margin-bottom:4px}
.yc-flow{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.yc-flow-item{min-width:96px;text-align:center}.yc-flow-icon{margin:0 auto 7px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#edf4ff;color:#2f5bea}.yc-flow-item b{display:block;font-size:.78rem}.yc-flow-item span{display:block;font-size:.66rem;color:#98a2b3;margin-top:2px}.yc-flow-arrow{color:#98a2b3}

/* Wizard and forms - exact alignment */
.yc-wizard-page{max-width:1180px;margin:0 auto}
.yc-wizard-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.yc-save-chip{display:inline-flex;align-items:center;gap:8px;background:#ecfdf3;color:#067647;border-radius:999px;padding:8px 12px;font-size:.76rem;font-weight:750}
.yc-stepper{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--yc-border);border-radius:14px;padding:14px 18px;margin-bottom:16px}
.yc-step{position:relative;text-align:center;font-size:.71rem;color:#667085;font-weight:700}.yc-step:after{content:"";position:absolute;top:13px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:#dce3ef}.yc-step:last-child:after{display:none}
.yc-step-dot{width:27px;height:27px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:#f4f6f9;border:1px solid #e0e5ed;color:#667085;position:relative;z-index:1}.yc-step.active{color:#2f5bea}.yc-step.active .yc-step-dot{background:#2f5bea;color:#fff;border-color:#2f5bea}.yc-step.complete{color:#067647}.yc-step.complete .yc-step-dot{background:#ecfdf3;color:#12b76a;border-color:#abefc6}.yc-step.complete:after{background:#abefc6}
.yc-form-card{background:#fff;border:1px solid var(--yc-border);border-radius:15px;box-shadow:var(--yc-shadow);overflow:hidden}.yc-form-body{padding:24px 28px}.yc-form-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}.yc-form-head-icon{width:42px;height:42px;border-radius:11px;background:#edf4ff;color:#2f5bea;display:grid;place-items:center;font-size:1.1rem}.yc-form-head h2{margin:0 0 4px;font-size:1.16rem}.yc-form-head p{margin:0;color:#667085;font-size:.8rem}
.yc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}.yc-form-grid .full{grid-column:1/-1}
.yc-form-actions{border-top:1px solid var(--yc-border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff}
.yc-field-help{display:block;color:#98a2b3;font-size:.7rem;margin-top:4px}

/* Empty-state pages from approved mockups */
.yc-empty-page{background:#fff;border:1px solid var(--yc-border);border-radius:15px;min-height:470px;display:grid;place-items:center;text-align:center;padding:38px;box-shadow:var(--yc-shadow)}
.yc-empty-visual{width:118px;height:118px;border-radius:50%;background:#edf4ff;display:grid;place-items:center;margin:0 auto 18px;color:#2f5bea;font-size:2.2rem}.yc-empty-page h2{font-size:1.45rem;margin-bottom:6px}.yc-empty-page p{color:#667085;margin-bottom:18px}

/* Toggle cards */
.yc-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yc-toggle-card{border:1px solid var(--yc-border);border-radius:12px;background:#fff;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:14px}.yc-toggle-card strong{display:block;font-size:.82rem}.yc-toggle-card span{display:block;color:#98a2b3;font-size:.7rem;margin-top:3px}
.yc-switch{width:38px;height:22px;border-radius:999px;background:#d0d5dd;position:relative;flex:0 0 auto}.yc-switch.on{background:#2f5bea}.yc-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}.yc-switch.on:after{left:19px}

@media(max-width:1100px){.yc-metrics{grid-template-columns:repeat(2,1fr)}.yc-onboarding-inner{grid-template-columns:1fr 260px}.yc-stepper{overflow-x:auto}.yc-step{min-width:105px}.topbar-search{width:380px}.hide-tablet{display:none!important}.show-tablet{display:grid}}
@media(max-width:1024px){.app-main{margin-left:0}.page{padding:24px 20px 40px}.yc-onboarding-inner{grid-template-columns:1fr}.yc-hero-visual{display:none}.yc-dashboard-head{align-items:flex-start}.yc-form-grid{grid-template-columns:1fr}.yc-form-grid .full{grid-column:auto}}
@media(max-width:760px){.yc-dashboard-head{display:grid}.yc-quick-actions{width:100%}.yc-quick-actions .btn{flex:1}.yc-metrics{grid-template-columns:1fr}.yc-onboarding-features{grid-template-columns:1fr}.yc-feature+.yc-feature{border-left:0;border-top:1px solid var(--yc-border)}.yc-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.yc-flow-arrow{display:none}.yc-wizard-title-row{display:grid}.yc-stepper{display:flex;overflow-x:auto}.yc-step:after{display:none}.yc-form-body{padding:18px}.yc-form-actions{padding:12px 18px;flex-wrap:wrap}.yc-form-actions .btn{flex:1}.yc-toggle-grid{grid-template-columns:1fr}}


/* final-ui-v3 mobile wizard + progress */
.yc-mobile-step { display: none; margin: 8px 0 12px; font-weight: 600; }
@media (max-width: 768px) {
  .yc-stepper { display: none !important; }
  .yc-mobile-step { display: block; }
}
.progress-track { height: 8px; background: #eef2f6; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progress-bar { height: 100%; background: #4f46e5; border-radius: 999px; }
.save-state[data-state="saving"] { color: #667085; }
.save-state[data-state="saved"] { color: #027a48; }
.save-state[data-state="error"] { color: #b42318; }