:root {
  --ink: #202338;
  --muted: #6b6f82;
  --line: #e7e5ee;
  --paper: #fcfaf7;
  --white: #fff;
  --soft: #f0edff;
  --accent: #37306f;
  --purple: #7c3aed;
  --red: #dc2626;
  --blue: #2563eb;
  --gray: #64748b;
  --yellow: #eab308;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: #f6f3fb; border-right: 1px solid var(--line); padding: 28px 22px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: white; font: 600 23px "Fraunces", serif; }
.brand div { display: grid; }.brand strong { font-size: 15px; }.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
nav { display: grid; gap: 7px; }
nav a { color: #56566d; text-decoration: none; font-size: 13px; padding: 10px 12px; border-radius: 10px; }
nav a:hover, nav a.active { color: var(--ink); background: white; box-shadow: 0 4px 18px rgb(55 48 111 / 7%); }
.legend { margin-top: auto; border-top: 1px solid #e1deeb; padding-top: 18px; }
.legend p { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; margin: 9px 0; }
.legend i, .dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }.purple{background:var(--purple)}.red{background:var(--red)}.blue{background:var(--blue)}.gray{background:var(--gray)}.yellow{background:var(--yellow)}
main { min-width: 0; padding: 40px clamp(22px, 4vw, 64px) 72px; }
header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: #898d83; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
h1, h2 { font-family: "Fraunces", serif; font-weight: 600; margin: 0; } h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.03em; } h2 { font-size: 20px; }
header p:not(.eyebrow) { color: var(--muted); margin: 8px 0 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.status { font-size: 11px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: white; }.status.ok{color:#2349a0;background:#eef3ff;border-color:#cad7f5}.status.warn{color:#8a6400;background:#fff9dd;border-color:#f4e5a1}.status.error{color:#9d2727;background:#fff0f0;border-color:#f1c7c7}
button, .primary-button { font: inherit; border: 0; cursor: pointer; text-decoration: none; }.ghost { background: transparent; color: var(--muted); padding: 8px 10px; }
.setup-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 1px solid #ddd7f1; background: var(--soft); border-radius: 18px; margin-bottom: 22px; }.setup-panel > div { display: flex; align-items: center; gap: 14px; }.setup-panel h2 { font-size: 17px; }.setup-panel p { color: var(--muted); font-size: 13px; margin: 3px 0 0; }.setup-icon { width: 34px; height: 34px; border-radius: 50%; background: white; display: grid; place-items: center; color: var(--accent); font-weight: 700; }.primary-button { background: var(--accent); color: white; padding: 11px 16px; border-radius: 11px; white-space: nowrap; font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }.stats article, .panel { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 28px rgb(55 48 111 / 5%); }.stats article { padding: 18px; display: grid; }.stats span { color: var(--muted); font-size: 11px; }.stats strong { font: 600 28px "Fraunces", serif; margin: 7px 0 2px; }.stats small { color: #9897a5; font-size: 10px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr); gap: 18px; margin-bottom: 18px; }.panel { padding: 22px; }.panel.large { min-height: 440px; }.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }.panel-heading > span:not(.dot) { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 99px; padding: 6px 9px; }
.timeline { display: grid; }.timeline-item { display: grid; grid-template-columns: 64px 11px 1fr; gap: 13px; min-height: 70px; }.timeline-time { color: var(--muted); font-size: 12px; text-align: right; padding-top: 2px; }.timeline-rail { position: relative; }.timeline-rail::before { content:""; position:absolute; width:1px; background:var(--line); top:10px; bottom:-10px; left:5px; }.timeline-item:last-child .timeline-rail::before { display:none; }.timeline-rail i { position:relative; z-index:1; display:block; width:11px; height:11px; border-radius:50%; background:var(--gray); border:3px solid white; box-shadow:0 0 0 1px currentColor; }.timeline-content strong { display:block; font-size:13px; }.timeline-content small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.assistant-card { background: #222846; color: white; border-color: #222846; }.assistant-card .eyebrow, .assistant-card small { color:#c5c9df; }.assistant-card h2 { font-size:26px; line-height:1.15; margin-bottom:22px; }.phone-mock { display:grid; gap:10px; margin-bottom:20px; }.phone-mock p { background:#303858; border:1px solid #465071; padding:12px 13px; border-radius:13px 13px 13px 3px; margin:0; font-size:12px; line-height:1.4; }
.grid-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.compact-list { display:grid; gap:10px; }.compact-item { padding:11px 0; border-top:1px solid var(--line); }.compact-item:first-child { border-top:0; padding-top:0; }.compact-item strong { display:block; font-size:12px; }.compact-item small { color:var(--muted); font-size:10px; }.empty { color:#a0a39c; font-size:12px; padding:24px 0; text-align:center; }
@media (max-width: 980px) { .shell{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:repeat(2,1fr)}.grid-main{grid-template-columns:1fr}.grid-bottom{grid-template-columns:1fr 1fr}.grid-bottom article:last-child{grid-column:1/-1}main{padding-top:28px} }
@media (max-width: 580px) { header{display:grid}.header-actions{position:absolute;right:20px;top:22px}.stats{grid-template-columns:1fr 1fr}.grid-bottom{grid-template-columns:1fr}.grid-bottom article:last-child{grid-column:auto}.setup-panel{align-items:flex-start;flex-direction:column}.primary-button{width:100%;text-align:center}.panel{padding:18px}.timeline-item{grid-template-columns:52px 10px 1fr;gap:10px} }