:root {
  --bg: #fbfbfb;
  --surface: #ffffff;
  --surface-soft: #f7f7f7;
  --ink: #0a0a0a;
  --ink-soft: #303030;
  --muted: #737373;
  --muted-2: #9a9a9a;
  --line: #d8d8d8;
  --line-strong: #111111;
  --lime: #ccff00;
  --lime-soft: #edff99;
  --purple: #7a22ff;
  --purple-soft: #f0e4ff;
  --lavender: #ead9ff;
  --yellow: #fff200;
  --green: #27ae60;
  --red: #e53935;
  --orange: #f59e0b;
  --shadow: 0 18px 44px rgba(0, 0, 0, .08);
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar: 274px;
  --copilot: 520px;
  --font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Inter Tight', sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 6%, rgba(204,255,0,.14), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(122,34,255,.08), transparent 26rem),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
button, input, textarea, select { font: inherit; }
button { border: 0; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-panel {
  width: min(100%, 460px);
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 8px 8px 0 #000;
  padding: 28px;
}
.auth-brand {
  margin-bottom: 26px;
}
.auth-brand p {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.auth-copy h2 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: 0;
}
.auth-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.auth-form label {
  display: grid;
  gap: 7px;
  font-weight: 850;
}
.auth-form input {
  width: 100%;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 13px 14px;
  background: #fff;
}
.auth-error {
  border: 2px solid #000;
  border-radius: 8px;
  background: #ffe7e7;
  color: #8d1111;
  padding: 12px;
  font-weight: 800;
}
.auth-loader {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.auth-loader span {
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  background: var(--lime);
  animation: authPulse 900ms ease-in-out infinite alternate;
}
.auth-loader span:nth-child(2) { animation-delay: 120ms; }
.auth-loader span:nth-child(3) { animation-delay: 240ms; }
@keyframes authPulse {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--sidebar); padding: 24px 22px;
  background: rgba(255,255,255,.88);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.logo-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; background: var(--lime); color: #000;
  border: 2px solid #000; font-weight: 950; transform: rotate(-4deg);
  box-shadow: 5px 5px 0 #000;
}
.brand h1 { margin: 0; font-size: 28px; letter-spacing: -.06em; font-weight: 950; }
.brand p { display: none; }
.nav-section-title { display: none; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 52px; margin-bottom: 8px; padding: 13px 14px;
  border-radius: 12px; background: transparent; color: var(--ink);
  cursor: pointer; text-align: left; font-weight: 760; transition: .15s ease;
}
.nav-item:hover { background: #f4f4f4; }
.nav-item.active {
  background: var(--lime); color: #000; border: 2px solid var(--line-strong);
  box-shadow: 4px 4px 0 #000;
}
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; }
.sidebar-card {
  margin-top: auto; padding: 18px; border-radius: 14px;
  border: 2px solid #000; background: #fff; box-shadow: 4px 4px 0 #000;
}
.sidebar-card strong { display: block; font-size: 16px; margin-bottom: 8px; }
.sidebar-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.main { width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); padding: 24px 26px 34px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.search-box {
  flex: 1; max-width: 760px; height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-box input::placeholder { color: var(--muted-2); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.account-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 15px; border-radius: 11px;
  border: 1.7px solid #000; color: #000; background: #fff; cursor: pointer;
  text-decoration: none; font-weight: 850; transition: .15s ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #000; }
.btn.primary { background: var(--lime); color: #000; box-shadow: 3px 3px 0 #000; }
.btn.black { background: #000; color: #fff; }
.btn.purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.btn.outline { background: #fff; }
.btn.ghost { background: #f8f8f8; border-color: var(--line); color: var(--ink-soft); }
.btn.small { min-height: 34px; padding: 7px 11px; border-radius: 9px; font-size: 13px; }

.workspace { display: grid; grid-template-columns: minmax(0,1fr) var(--copilot); gap: 22px; align-items: start; }
.content-panel, .copilot-panel {
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.content-panel { padding: 22px; min-height: calc(100vh - 110px); }
.copilot-panel {
  position: sticky; top: 22px; min-height: calc(100vh - 110px); padding: 22px; border: 2px solid #000;
  background: #fff;
}
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.eyebrow { display: none; }
.page-header h2, .hero h2, .display-title {
  margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(38px, 4vw, 68px); line-height: .88; font-weight: 950;
}
.page-header p, .hero p { margin: 10px 0 0; max-width: 720px; color: var(--muted); line-height: 1.5; }

.copilot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.copilot-title { display: flex; align-items: center; gap: 12px; }
.copilot-stars { color: var(--purple); font-size: 31px; line-height: 1; }
.copilot-title h2 { margin: 0; font-family: var(--font-display); font-size: 52px; text-transform: uppercase; letter-spacing: -.03em; }
.tabbar { display: flex; align-items: center; gap: 0; border: 2px solid #000; border-radius: 5px; overflow: hidden; margin: 16px 0 18px; }
.tabbar span { flex: 1; text-align: center; padding: 11px 8px; font-family: var(--font-display); text-transform: uppercase; font-size: 17px; border-right: 1px solid #000; }
.tabbar span:last-child { border-right: 0; }
.tabbar span.active { color: var(--purple); box-shadow: inset 0 -4px 0 var(--purple); }
.copilot-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.copilot-grid.two { grid-template-columns: 1fr 1fr; }
.ai-card {
  padding: 18px; border: 2px solid #000; border-radius: 11px; background: #fff;
  min-height: 142px;
}
.ai-card.lime { background: linear-gradient(135deg, var(--lime), #e6ff70); }
.ai-card.yellow { background: linear-gradient(135deg, #fff200, #ffe500); }
.ai-card.lavender { background: linear-gradient(135deg, #efe1ff, #ddc1ff); }
.ai-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; text-transform: uppercase; }
.ai-card p, .ai-card li { font-size: 13px; line-height: 1.45; color: #151515; }
.ai-card ul { padding-left: 18px; margin: 0; }
.confidence { display: inline-flex; margin-top: 10px; padding: 7px 10px; border: 2px solid #000; font-weight: 950; text-transform: uppercase; font-family: var(--font-display); }
.bottom-settings { display: grid; grid-template-columns: repeat(4,1fr) 1.2fr; gap: 10px; margin-top: 14px; padding: 14px; border: 2px solid #000; border-radius: 10px; }
.setting-pill { text-align: center; font-size: 12px; color: var(--muted); }
.setting-pill strong { display:block; color:#000; margin-top:3px; }

.card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 16px; margin-top: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.card, .kpi-card, .table-card, .form-card, .stat-card, .campaign-card, .material-card, .lead-card, .metric-box {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.kpi-card { padding: 18px; min-height: 128px; position: relative; overflow: hidden; }
.kpi-card::after { content:""; position:absolute; right:18px; bottom:16px; width:80px; height:28px; background: linear-gradient(90deg, transparent, rgba(122,34,255,.20)); border-bottom: 3px solid var(--purple); transform: skewX(-18deg); }
.kpi-top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.kpi-label { font-weight: 850; font-size: 13px; }
.kpi-value { margin:0; font-size: 34px; letter-spacing:-.06em; }
.kpi-delta { color: var(--green); font-weight: 900; font-size:12px; }
.table-card, .form-card, .stat-card { padding: 18px; }
.table-header, .card-header { display:flex; justify-content:space-between; gap: 12px; align-items:center; margin-bottom: 14px; }
h3 { margin: 0; }
.table-header h3, .card-header h3, .form-card h3, .stat-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; letter-spacing: -.02em; }
.table-header p, .card-header p, .form-card p, .stat-card p, .muted { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width: 660px; }
th, td { padding: 14px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
th { font-family: var(--font-display); text-transform:uppercase; font-size:15px; color:#000; }
tr:last-child td { border-bottom:0; }
.status-pill, .tag, .badge, .filter-chip {
  display:inline-flex; align-items:center; gap:6px; border-radius: 8px; border:1px solid var(--line); padding:6px 10px; background:#fff; font-size:12px; font-weight:850;
}
.status-pill.live { background:#d8ff5f; border-color:#8fc300; color:#000; }
.status-pill.draft, .status-pill.paused { background:#eee; color:#222; }
.badge.hot { color:#000; background:#ffe2e2; border-color:#ff9c9c; }
.badge.warm { color:#000; background:#fff1c7; border-color:#f7cf6b; }
.badge.cold { color:#000; background:#eaffbd; border-color:#bae35b; }
.filter-row { display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 16px; }
.filter-chip { cursor:pointer; min-height: 38px; }
.filter-chip.active { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 3px 3px 0 #000; }
.campaign-list, .material-list, .lead-list { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.campaign-card, .material-card, .lead-card { padding: 16px; display:grid; gap:12px; }
.campaign-card:hover, .material-card:hover, .lead-card:hover { outline:2px solid var(--purple); }
.card-meta { display:flex; flex-wrap:wrap; gap:8px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.metric-box { padding: 10px; }
.metric-box span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; }
.metric-box strong { display:block; margin-top:3px; font-size:18px; }
.progress-row { display:grid; grid-template-columns:120px 1fr 60px; align-items:center; gap:12px; margin:12px 0; }
.progress-track { height: 18px; border:1px solid #000; background:#fff; border-radius:4px; overflow:hidden; }
.progress-bar { height:100%; background: linear-gradient(90deg, var(--purple), var(--lime)); }
.score-circle { width:132px; height:132px; margin: 12px auto; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at center,#fff 58%,transparent 59%), conic-gradient(var(--lime) 0 86%, #e8e8e8 86% 100%); border:2px solid #000; }
.score-circle strong { display:block; text-align:center; font-size:34px; }
.score-circle span { display:block; font-size:12px; color:var(--muted); text-align:center; }

.form-grid { display:grid; gap:14px; }
.form-grid.two { grid-template-columns: repeat(2,1fr); }
.field { display:grid; gap:8px; }
.field label { font-weight:900; font-size:13px; }
.input, .textarea, .select { width:100%; min-height:44px; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:#000; outline:0; }
.textarea { min-height:112px; resize:vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(122,34,255,.12); }
.helper-text { color:var(--muted); font-size:12px; }
.preview-phone { max-width:360px; margin: 0 auto; border:2px solid #000; border-radius:28px; background:#fff; padding:12px; box-shadow: 8px 8px 0 #000; }
.phone-header { display:flex; justify-content:space-between; padding: 10px 12px 14px; font-size:12px; color:var(--muted); }
.phone-screen { min-height: 370px; border-radius:20px; background:#fafafa; padding:16px; border:1px solid var(--line); }
.dm-row { display:flex; margin-bottom:10px; }
.dm-row.user { justify-content:flex-end; }
.dm-bubble { max-width:80%; padding: 11px 13px; border-radius: 14px; background:#fff; border:1px solid var(--line); font-size:13px; }
.dm-row.user .dm-bubble { background: var(--purple); color:#fff; }
.quick-replies { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quick-reply { padding:8px 10px; border-radius: 999px; background:var(--lime); border:1.5px solid #000; font-size:12px; }
.check-list, .timeline { display:grid; gap:10px; margin-top:12px; }
.check-item { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:13px; line-height:1.4; }
.check-icon, .timeline-dot { width:24px; height:24px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center; background:var(--lime); color:#000; font-weight:900; border:1px solid #000; }
.check-icon.warn { background:#ffe48a; }
.timeline-item { display:grid; grid-template-columns:32px 1fr; gap:10px; }
.timeline-item p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.switch-row:last-child { border-bottom:0; }
.switch-row span { color:var(--muted); font-size:13px; }
.switch { width:58px; height:32px; border:2px solid #000; border-radius:999px; padding:3px; background:#fff; cursor:pointer; }
.switch::after { content:""; display:block; width:22px; height:22px; border-radius:50%; background:#000; transition:.16s ease; }
.switch.on { background:var(--lime); }
.switch.on::after { transform:translateX(24px); }
.code-block { overflow:auto; padding:16px; border:1.5px solid var(--line); background:#fafafa; border-radius:12px; color:#111; font-size:12px; line-height:1.55; }
.toast { position:fixed; right:22px; bottom:22px; z-index:60; padding:14px 16px; border:2px solid #000; border-radius:12px; background:var(--lime); color:#000; font-weight:900; box-shadow:5px 5px 0 #000; }
.mobile-menu { display:none; }

@media (max-width: 1480px) { :root { --copilot: 460px; } .copilot-grid { grid-template-columns:1fr; } .bottom-settings { grid-template-columns:repeat(2,1fr); } .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1180px) { .workspace { grid-template-columns:1fr; } .copilot-panel { position:static; min-height:auto; } }
@media (max-width: 860px) { .sidebar { display:none; } .main { width:100%; margin-left:0; padding:14px; } .mobile-menu { display:flex; gap:8px; overflow-x:auto; margin-bottom:14px; } .mobile-menu .nav-item { min-width:max-content; } .topbar { flex-direction:column; align-items:stretch; } .topbar-actions { flex-wrap:wrap; } .campaign-list,.material-list,.lead-list,.grid-2,.grid-3,.card-grid { grid-template-columns:1fr; } .content-panel,.copilot-panel { padding:16px; } .page-header { flex-direction:column; } .page-header h2,.display-title { font-size:42px; } .copilot-title h2 { font-size:40px; } }

/* v3 production-polish: light-only neo brutal system */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
  margin-bottom: 16px;
}
.hero, .hero-panel {
  border: 2px solid #000;
  border-radius: 16px;
  background: #fff;
  box-shadow: 5px 5px 0 #000;
  padding: 24px;
}
.hero {
  background:
    linear-gradient(135deg, rgba(204,255,0,.26), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
}
.hero h2 { max-width: 980px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-panel .panel-title { margin-bottom: 10px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 28px; }
.integration-card {
  border: 2px solid #000;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}
.integration-card h4 { margin: 0 0 8px; font-size: 20px; }
.integration-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 2px dashed #000;
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  padding: 22px;
}
.action-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.lead-actions { margin: 16px 0 0; }
.btn.danger { background: #fff; border-color: var(--red); color: var(--red); }
.btn.danger:hover { box-shadow: 4px 4px 0 var(--red); }
.btn.purple-soft { background: var(--purple-soft); color: #000; border-color: var(--purple); }
.kpi-delta.warning { color: var(--orange); }
.lead-card { cursor: pointer; transition: .15s ease; }
.lead-card.selected {
  border: 2px solid var(--purple);
  box-shadow: 5px 5px 0 #000;
  background: linear-gradient(135deg, #fff, var(--purple-soft));
}
.nav-item .nav-badge,
.nav-item span:last-child + .nav-badge { margin-left: auto; }
.badge, .status-pill, .tag, .filter-chip { text-transform: none; }
.code-block { word-break: break-word; }
.copilot-panel { overflow: hidden; }
.copilot-panel::before {
  content: "";
  display: block;
  height: 10px;
  margin: -22px -22px 18px;
  background: linear-gradient(90deg, var(--lime), var(--purple), var(--yellow));
}
.ai-card { box-shadow: 3px 3px 0 rgba(0,0,0,.08); }
.ai-card .btn { margin-right: 8px; margin-top: 8px; }
.material-card .code-block { background: #fff; border: 2px solid #000; }
.table-card, .form-card, .stat-card, .campaign-card, .material-card, .lead-card, .kpi-card {
  border: 1.7px solid #111;
}
.table-card:hover, .form-card:hover, .stat-card:hover, .kpi-card:hover {
  box-shadow: 4px 4px 0 rgba(0,0,0,.12);
}
.sidebar-card + .sidebar-card { margin-top: 14px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero, .hero-panel { box-shadow: 3px 3px 0 #000; }
  .action-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .action-toolbar .btn { width: 100%; }
}

/* v4: product-readiness and operational controls */
.readiness-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 16px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(204,255,0,.34), transparent 38%),
    linear-gradient(90deg, #fff, #fbfbfb);
  box-shadow: 5px 5px 0 #000;
}
.readiness-strip h3 {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.readiness-strip p { margin: 0; color: var(--muted); max-width: 680px; }
.readiness-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.readiness-metrics div {
  min-height: 92px;
  display: grid;
  align-content: center;
  padding: 12px;
  border: 2px solid #000;
  border-radius: 12px;
  background: #fff;
}
.readiness-metrics strong {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: .9;
}
.readiness-metrics span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.btn.danger { background: #fff4f4; }
.btn.danger:hover { background: #ffe8e8; }
@media (max-width: 1180px) {
  .readiness-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .readiness-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* v5: production workspace additions */
.pipeline-health {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 20px;
  border: 2px solid #111;
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(122,34,255,.13), transparent 30%),
    linear-gradient(135deg, #fff, #f8f8f8 62%, rgba(204,255,0,.22));
  box-shadow: 5px 5px 0 #111;
}
.pipeline-health h3 {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.pipeline-health p { margin: 0; color: var(--muted); max-width: 720px; }
.pipeline-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.step-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 #111;
}
.step-chip.done { background: var(--lime); }
.step-chip.warn { background: var(--yellow); }
.knowledge-list,
.integration-grid {
  display: grid;
  gap: 14px;
}
.knowledge-card { background: linear-gradient(135deg, #fff, #fff, rgba(234,217,255,.54)); }
.integration-card {
  border: 2px solid #111;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.1);
}
.integration-card:hover,
.knowledge-card:hover {
  transform: translateY(-1px);
  box-shadow: 6px 6px 0 rgba(0,0,0,.16);
}
@media (max-width: 960px) {
  .pipeline-health { grid-template-columns: 1fr; }
  .pipeline-steps { justify-content: flex-start; }
}

.brutal-card { border: 2px solid #000; box-shadow: 6px 6px 0 #000; }
.lime-card { background: linear-gradient(135deg, var(--lime), #f3ffbd); }
.lavender-card { background: linear-gradient(135deg, var(--lavender), #fff); }
.yellow-card { background: linear-gradient(135deg, var(--yellow), #fff4a8); }
.stacked-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.api-check-list { display: grid; gap: 10px; margin-top: 18px; }
.api-check-row { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.api-check-row small { grid-column: 2; color: var(--muted); }
.api-output { max-height: 440px; overflow: auto; }
@media (max-width: 760px) { .stacked-actions { grid-template-columns: 1fr; } .api-check-row { grid-template-columns: 1fr; } .api-check-row small { grid-column: auto; } }

/* v7: queue, OAuth and production readiness */
.table-list {
  display: grid;
  gap: 10px;
}
.table-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1.1fr 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border: 2px solid #111;
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.12);
}
.table-row small {
  grid-column: 2 / -1;
  color: var(--muted);
  line-height: 1.35;
}
.queue-row { grid-template-columns: 90px 1fr minmax(120px, .7fr) auto; }
.integration-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 2px solid #111;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lime), #fff 70%);
  box-shadow: 4px 4px 0 #111;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  font-weight: 900;
  font-size: 12px;
}
.big-number {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 82px);
  line-height: .9;
  letter-spacing: -.05em;
  margin: 10px 0;
}
@media (max-width: 860px) {
  .table-row, .queue-row { grid-template-columns: 1fr; }
  .table-row small { grid-column: auto; }
}


/* v9 operator workspace additions */
.split-list{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);gap:18px;margin-top:18px}
.stack-list{display:grid;gap:10px}
.mini-row{display:flex;justify-content:space-between;gap:12px;border:2px solid var(--ink);border-radius:16px;padding:14px;background:var(--surface);box-shadow:4px 4px 0 var(--ink)}
.mini-row.alert{background:var(--lime)}
.mini-row p{margin:4px 0;color:var(--muted)}
.chat-preview{display:grid;gap:10px;margin:12px 0 16px}
.bubble{max-width:78%;border:2px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:3px 3px 0 var(--ink);background:var(--surface)}
.bubble.ai{margin-left:auto;background:var(--lavender)}
.bubble.user{background:var(--lime-soft)}
.task-card h3{font-size:22px;margin:12px 0}.task-card p{margin:7px 0;color:var(--muted)}
.badge.danger{background:#ff5c77;color:#000;border-color:#000}
@media(max-width:1100px){.split-list{grid-template-columns:1fr}}

/* v12 mobile stability: keep the app inside the viewport */
@media (max-width: 860px) {
  html, body, .app-shell, .main, .workspace, .content-panel, .copilot-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  html, body {
    overflow-x: hidden;
  }
  .app-shell {
    display: block;
  }
  .main {
    overflow-x: hidden;
  }
  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }
  .content-panel, .copilot-panel {
    width: 100%;
  }
  .copilot-panel {
    overflow: visible;
  }
  .hero h2, .page-header h2, .display-title {
    font-size: clamp(30px, 10vw, 42px);
    line-height: .94;
    overflow-wrap: anywhere;
  }
  .hero, .hero-panel, .table-card, .form-card, .stat-card, .integration-card, .material-card, .campaign-card, .lead-card {
    overflow: hidden;
  }
  .action-toolbar {
    grid-template-columns: 1fr;
  }
  .action-toolbar .btn {
    min-width: 0;
    white-space: normal;
  }
}

/* v16 readability pass: calm product UI, lighter hierarchy, less visual noise */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #f3f5f8;
  --ink: #111827;
  --ink-soft: #243041;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #d9dee8;
  --line-strong: #b8c0cc;
  --lime: #b9f227;
  --lime-soft: #effbd0;
  --purple: #6f3af2;
  --purple-soft: #f1ebff;
  --yellow: #ffe66d;
  --shadow: 0 16px 34px rgba(17, 24, 39, .07);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar: 232px;
  --copilot: 360px;
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    linear-gradient(rgba(17, 24, 39, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .028) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
}

.sidebar {
  background: rgba(255,255,255,.92);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
}

.logo-mark {
  border: 1px solid var(--line-strong);
  box-shadow: none;
  transform: none;
  border-radius: 12px;
}

.brand h1 {
  font-size: 24px;
  letter-spacing: -.03em;
}

.nav-item {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.nav-item.active {
  background: #eefbd1;
  border: 1px solid #c7e879;
  box-shadow: none;
}

.nav-icon {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.main {
  padding: 14px 20px 28px;
}

.topbar {
  margin-bottom: 16px;
  gap: 12px;
}

.search-box {
  min-height: 48px;
  border-radius: 12px;
  box-shadow: none;
}

.workspace {
  gap: 18px;
}

.content-panel,
.copilot-panel,
.hero,
.hero-panel,
.table-card,
.form-card,
.stat-card,
.integration-card,
.material-card,
.campaign-card,
.lead-card,
.brutal-card,
.readiness-strip,
.pipeline-health,
.mini-row,
.bubble {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.content-panel {
  padding: 0;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
}

.hero,
.hero-panel {
  padding: 24px;
}

.page-header h2,
.hero h2,
.display-title,
.readiness-strip h3,
.pipeline-health h3,
.brutal-hero h2 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -.04em;
  font-weight: 850;
  line-height: 1.04;
  font-size: clamp(30px, 2.8vw, 48px);
}

.hero p,
.page-header p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.panel-title h3,
.table-header h3,
.card-header h3,
.form-card h3,
.stat-card h3,
.ai-card h3 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -.02em;
  font-size: 18px;
  line-height: 1.22;
}

.btn {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-weight: 800;
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(17, 24, 39, .08);
}

.btn.primary {
  background: #c7f83d;
  box-shadow: none;
}

.btn.black {
  background: #111827;
  color: #fff;
  border-color: #111827;
  box-shadow: none;
}

.status-pill,
.badge,
.tag,
.filter-chip,
.confidence {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  text-transform: none;
  box-shadow: none;
}

.copilot-panel {
  padding: 18px;
  border: 1px solid var(--line);
  max-height: calc(100vh - 84px);
  overflow: auto;
  box-shadow: var(--shadow);
}

.copilot-panel::before {
  height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--lime));
}

.copilot-title h2 {
  font-size: 24px;
  text-transform: none;
  letter-spacing: -.03em;
}

.copilot-stars {
  font-size: 18px;
}

.tabbar {
  border: 1px solid var(--line);
  border-radius: 10px;
}

.tabbar span {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 12px;
  padding: 9px 6px;
  border-right: 1px solid var(--line);
}

.tabbar span.active {
  color: var(--purple);
  box-shadow: inset 0 -2px 0 var(--purple);
}

.ai-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.ai-card.summary {
  background: #f1ffd2;
}

.ai-card.action {
  background: #fff7c7;
}

.ai-card p,
.ai-card li {
  font-size: 13px;
  line-height: 1.55;
}

.score-circle {
  border: 1px solid var(--line);
}

.kpi-card,
.metric-box,
.table-row,
.queue-row,
.api-check-row {
  border: 1px solid var(--line);
  box-shadow: none;
}

.kpi-value,
.metric-box strong,
.big-number {
  letter-spacing: -.04em;
  font-weight: 850;
}

th {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 12px;
  color: var(--muted);
}

.auth-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.auth-copy h2 {
  font-family: var(--font-display);
  text-transform: none;
  font-size: 30px;
  line-height: 1.12;
}

@media (min-width: 1680px) {
  :root {
    --sidebar: 232px;
    --copilot: 360px;
  }

  .page-header h2,
  .hero h2,
  .display-title {
    font-size: 48px;
  }
}

@media (max-width: 1320px) {
  :root {
    --copilot: 330px;
  }
}

@media (max-width: 860px) {
  .page-header h2,
  .hero h2,
  .display-title {
    font-size: 30px;
  }
}

/* v15 design polish: wider operator workspace, calmer hierarchy, denser data surfaces */
:root {
  --sidebar: 204px;
  --copilot: 336px;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

body {
  background:
    linear-gradient(90deg, rgba(10,10,10,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10,10,10,.035) 1px, transparent 1px),
    linear-gradient(180deg, #fff 0%, #f7f8f5 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

button,
.btn,
.nav-item,
.filter-chip,
.switch {
  touch-action: manipulation;
}

.sidebar {
  padding: 18px 14px;
  background: rgba(255,255,255,.94);
}

.brand {
  gap: 10px;
  margin-bottom: 18px;
}

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #000;
}

.brand h1 {
  font-size: 21px;
  letter-spacing: 0;
}

.nav-item {
  min-height: 40px;
  margin-bottom: 5px;
  padding: 9px 10px;
  gap: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 820;
}

.nav-item.active {
  box-shadow: 3px 3px 0 #000;
}

.nav-icon {
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-radius: 6px;
}

.sidebar-card {
  padding: 12px;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #000;
}

.sidebar-card strong {
  font-size: 14px;
  margin-bottom: 5px;
}

.sidebar-card p {
  font-size: 12px;
  line-height: 1.38;
}

.main {
  padding: 18px 18px 28px;
}

.topbar {
  margin-bottom: 14px;
}

.search-box {
  max-width: none;
  height: 44px;
  border-radius: 8px;
  box-shadow: none;
}

.topbar-actions {
  gap: 8px;
}

.account-pill {
  border-radius: 8px;
}

.btn {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 8px;
  font-weight: 820;
}

.btn.small {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
}

.workspace {
  grid-template-columns: minmax(0, 1fr) var(--copilot);
  gap: 16px;
}

.content-panel {
  min-height: calc(100vh - 94px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.copilot-panel {
  top: 18px;
  min-height: 0;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.12);
}

.copilot-panel::before {
  height: 7px;
  margin: -14px -14px 12px;
}

.page-header {
  margin-bottom: 14px;
}

.page-header h2,
.hero h2,
.display-title {
  font-size: 46px;
  line-height: .96;
  letter-spacing: 0;
  max-width: 1040px;
}

.page-header p,
.hero p {
  max-width: 880px;
  line-height: 1.48;
}

.copilot-head {
  margin-bottom: 10px;
}

.copilot-title {
  gap: 8px;
}

.copilot-stars {
  font-size: 20px;
}

.copilot-title h2 {
  font-size: 29px;
  letter-spacing: 0;
}

.tabbar {
  margin: 10px 0 12px;
  border-radius: 8px;
}

.tabbar span {
  padding: 8px 6px;
  font-size: 12px;
  letter-spacing: 0;
}

.copilot-grid,
.copilot-grid.two {
  grid-template-columns: 1fr;
  gap: 10px;
}

.ai-card {
  min-height: 0;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.08);
}

.ai-card h3 {
  margin-bottom: 7px;
  font-size: 18px;
  letter-spacing: 0;
}

.ai-card p,
.ai-card li {
  font-size: 12px;
  line-height: 1.38;
}

.confidence {
  margin-top: 7px;
  padding: 5px 8px;
  font-size: 12px;
  letter-spacing: 0;
}

.bottom-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
}

.setting-pill {
  font-size: 11px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr);
  gap: 12px;
  margin-bottom: 12px;
}

.hero,
.hero-panel,
.readiness-strip,
.pipeline-health {
  border-radius: 10px;
  box-shadow: 4px 4px 0 #000;
  padding: 18px;
}

.hero-actions {
  margin-top: 16px;
}

.readiness-strip {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .68fr);
  gap: 12px;
  margin-bottom: 12px;
  background:
    linear-gradient(135deg, rgba(204,255,0,.28), transparent 34%),
    linear-gradient(90deg, #fff, #fbfbfb);
}

.readiness-strip h3,
.pipeline-health h3 {
  font-size: 30px;
  letter-spacing: 0;
}

.readiness-metrics {
  gap: 8px;
}

.readiness-metrics div {
  min-height: 76px;
  padding: 10px;
  border-radius: 8px;
}

.readiness-metrics strong {
  font-size: 32px;
}

.pipeline-health {
  margin-bottom: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
  gap: 12px;
}

.pipeline-steps {
  justify-content: flex-start;
}

.step-chip {
  min-height: 32px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: 2px 2px 0 #111;
}

.card-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.grid-2 {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 12px;
  margin-top: 12px;
}

.grid-3 {
  gap: 10px;
}

.card,
.kpi-card,
.table-card,
.form-card,
.stat-card,
.campaign-card,
.material-card,
.lead-card,
.metric-box,
.integration-card,
.knowledge-card,
.mini-row,
.table-row,
.integration-head,
.empty-state,
.code-block {
  border-radius: 8px;
}

.kpi-card,
.table-card,
.form-card,
.stat-card,
.campaign-card,
.material-card,
.lead-card,
.integration-card {
  padding: 14px;
}

.kpi-card {
  min-height: 104px;
}

.kpi-card::after {
  width: 58px;
  height: 20px;
  right: 12px;
  bottom: 12px;
}

.kpi-top {
  margin-bottom: 8px;
}

.kpi-label,
.kpi-delta {
  font-size: 12px;
}

.kpi-value {
  font-size: 29px;
  letter-spacing: 0;
}

.table-header h3,
.card-header h3,
.form-card h3,
.stat-card h3,
.panel-title h3 {
  font-size: 21px;
  letter-spacing: 0;
}

.table-header,
.card-header {
  margin-bottom: 10px;
}

th,
td {
  padding: 11px 9px;
}

.campaign-list,
.material-list,
.lead-list,
.integration-grid,
.knowledge-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.metric-row {
  gap: 7px;
}

.metric-box {
  padding: 9px;
}

.progress-row {
  grid-template-columns: 104px 1fr 50px;
  gap: 9px;
  margin: 9px 0;
}

.score-circle {
  width: 108px;
  height: 108px;
}

.score-circle strong {
  font-size: 28px;
}

.form-grid {
  gap: 10px;
}

.input,
.textarea,
.select {
  border-radius: 8px;
}

.preview-phone {
  max-width: 320px;
  border-radius: 20px;
  box-shadow: 5px 5px 0 #000;
}

.phone-screen {
  min-height: 310px;
  border-radius: 14px;
}

.split-list {
  grid-template-columns: minmax(260px, .8fr) minmax(340px, 1.2fr);
  gap: 12px;
}

.table-row,
.queue-row {
  gap: 8px 12px;
  padding: 12px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
}

.big-number {
  letter-spacing: 0;
}

@media (min-width: 1680px) {
  :root {
    --sidebar: 216px;
    --copilot: 372px;
  }

  .main {
    padding-inline: 24px;
  }

  .page-header h2,
  .hero h2,
  .display-title {
    font-size: 54px;
  }
}

@media (max-width: 1320px) {
  :root {
    --copilot: 318px;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readiness-strip,
  .pipeline-health,
  .hero-grid,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .copilot-panel {
    position: static;
    max-height: none;
  }

  .copilot-grid,
  .copilot-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .main {
    padding: 12px;
  }

  .content-panel {
    min-height: auto;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .account-pill {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .page-header h2,
  .hero h2,
  .display-title {
    font-size: 32px;
    line-height: 1;
  }

  .copilot-grid,
  .copilot-grid.two,
  .card-grid,
  .grid-2,
  .grid-3,
  .campaign-list,
  .material-list,
  .lead-list,
  .integration-grid,
  .knowledge-list,
  .split-list {
    grid-template-columns: 1fr;
  }

  .readiness-strip h3,
  .pipeline-health h3 {
    font-size: 26px;
  }
}