:root {
  --ink:#111111;
  --ink-2:#5a5a5a;
  --ink-3:#8a8a8a;
  --paper:#faf9f7;
  --paper-2:#f2efea;
  --line:#ddd7cf;
  --line-soft:#ece7df;
  --navy:#0d2240;
  --rust:#b83a08;
  --white:#ffffff;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:"Plus Jakarta Sans",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a, button, input { font:inherit; }
.app-bg { display:none; }

.app-top {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 6vw 14px;
  background:rgba(250,249,247,0.96);
  position:sticky;
  top:0;
  backdrop-filter:blur(8px);
  z-index:10;
  border-bottom:1px solid var(--line);
}
.app-logo {
  font-family:"Playfair Display",serif;
  font-size:1.45rem;
  font-weight:700;
  color:var(--navy);
  flex-shrink:0;
}
.app-search { flex:1; }
.app-search input {
  width:100%;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:2px;
  background:var(--white);
}
.app-actions { display:flex; gap:10px; }
.primary,.ghost {
  padding:9px 14px;
  cursor:pointer;
  font-weight:700;
  border-radius:2px;
}
.primary { background:var(--navy); color:#fff; border:1px solid var(--navy); }
.ghost { background:transparent; border:1px solid var(--navy); color:var(--navy); }

.app-shell { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 72px); }
.sidebar {
  padding:24px 18px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidebar-title {
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:10px;
}
.tab {
  border:none;
  background:transparent;
  text-align:left;
  padding:10px 0;
  border-top:1px solid var(--line-soft);
  cursor:pointer;
  font-weight:600;
  color:var(--ink-2);
  border-radius:0;
}
.tab.active { color:var(--navy); }
.sidebar-footer {
  margin-top:auto;
  font-size:0.82rem;
  color:var(--ink-3);
  display:grid;
  gap:6px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.content { padding:28px 6vw 60px; }
.panel { display:none; }
.panel.show { display:block; animation:fadeIn .25s ease-out; }
.panel-header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.panel-header h1 {
  font-family:"Playfair Display",serif;
  font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--navy);
  margin-bottom:4px;
  line-height:1.1;
}
.panel-header p { color:var(--ink-2); }
.status {
  padding:0;
  text-align:right;
  background:transparent;
  box-shadow:none;
}
.status span { color:var(--rust); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.1em; }
.status p { color:var(--ink-3); font-size:13px; margin-top:2px; }

.kpi-row,.grid,.agent-grid,.insight-grid,.pipeline,.journey-flow,.integration-summary,.integration-grid { display:grid; gap:16px; }
.kpi-row { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-bottom:24px; }
.kpi {
  padding:0 0 12px;
  background:transparent;
  box-shadow:none;
  border-bottom:1px solid var(--line);
}
.kpi h3 {
  font-family:"Playfair Display",serif;
  font-size:2rem;
  color:var(--navy);
  line-height:1;
  margin-bottom:6px;
}
.kpi p { color:var(--ink-3); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }

.grid,.agent-grid,.insight-grid,.integration-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card, .flow-step, .pipeline div, .row {
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:none;
  border-radius:2px;
  padding:18px;
}
.card h2, .card h3, .flow-step h3, .pipeline h3 {
  font-family:"Playfair Display",serif;
  color:var(--navy);
}
.card p, .pipeline span, .integration-card p, .integration-meta { color:var(--ink-2); }
.card ul { list-style:none; margin-top:12px; display:grid; gap:8px; color:var(--ink-2); }
.card li::before { content:"—"; color:var(--rust); margin-right:8px; }

.pipeline { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:20px; }
.table { display:grid; gap:10px; }
.row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.row.head { background:transparent; box-shadow:none; border:none; padding:0 4px; font-weight:700; color:var(--ink-3); text-transform:uppercase; font-size:12px; letter-spacing:.06em; }

.flow-step span {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  color:var(--rust);
  font-weight:700;
}
.note { margin-top:12px; background:var(--paper-2); padding:10px; border-radius:2px; font-size:.9rem; }
.integration-summary { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:20px; }
.integration-bar { height:4px; background:#e6e0d8; overflow:hidden; margin-top:12px; }
.integration-bar span { display:block; height:100%; background:var(--rust); }
.integration-bar.warn span { background:#b06b2c; }
.integration-bar.accent span { background:var(--navy); }
.integration-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.status-pill { font-size:.7rem; font-weight:700; padding:4px 8px; border-radius:0; text-transform:uppercase; letter-spacing:.08em; }
.status-pill.good { background:#edf2f8; color:#24456f; }
.status-pill.warn { background:#f7eadb; color:#8b5716; }

@media (max-width:960px){
  .app-top { display:grid; grid-template-columns:1fr auto; gap:10px 12px; }
  .app-search { grid-column:1 / -1; }
  .app-actions { grid-column:1 / -1; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar {
    flex-direction:row;
    flex-wrap:wrap;
    border-right:none;
    border-bottom:1px solid var(--line);
    gap:10px 18px;
  }
  .sidebar-title, .sidebar-footer { width:100%; }
  .tab { flex:1 1 120px; padding:10px 0; }
  .row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .app-top { padding:16px 5vw 12px; }
  .app-logo { font-size:1.25rem; }
  .app-actions { display:grid; grid-template-columns:1fr 1fr; }
  .content { padding:22px 5vw 46px; }
  .row { grid-template-columns:1fr; }
}
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }