:root { --ink:#181818; --muted:#6b6b6b; --line:#e7e4e1; --paper:#f8f7f5; --card:#fff; --red:#ca2427; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:242px 1fr; }
.sidebar { display:flex; flex-direction:column; padding:28px 18px; color:#f5f4f2; background:#181818; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; font-size:20px; font-weight:700; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:var(--red); border-radius:7px; }
nav { display:grid; gap:5px; margin-top:42px; }
nav a { padding:11px 12px; border-radius:7px; color:#c7c4c1; font-size:14px; text-decoration:none; }
nav a:hover, nav a.active { color:#fff; background:#303030; }
.sidebar-footer { margin-top:auto; padding:11px 12px; color:#aaa5a0; font-size:14px; }
main { min-width:0; padding:42px clamp(24px,5vw,72px); }
.topbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-.04em; }
h2 { margin-top:4px; font-size:22px; letter-spacing:-.025em; }
h3 { font-size:20px; letter-spacing:-.02em; }
.eyebrow { color:var(--red); font-size:11px; font-weight:800; letter-spacing:.12em; }
.primary-action,.secondary-action { border:0; border-radius:7px; padding:12px 16px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.primary-action { color:#fff; background:var(--red); }
.secondary-action { color:var(--ink); background:transparent; border:1px solid var(--line); }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:38px 0 48px; }
.summary-grid article,.panel,.empty-state { background:var(--card); border:1px solid var(--line); border-radius:10px; }
.summary-grid article { padding:20px; }
.summary-grid p,.panel p:not(.eyebrow),.empty-state p { color:var(--muted); font-size:14px; line-height:1.55; }
.summary-grid strong { display:block; margin:11px 0 4px; font-size:30px; letter-spacing:-.04em; }
.summary-grid span { color:#8a8783; font-size:12px; }
.workspace { margin-bottom:20px; }
.empty-state { display:grid; gap:13px; margin-top:18px; padding:34px; max-width:760px; }
.empty-state .primary-action { width:max-content; margin-top:6px; }
.two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.crm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:18px; }.crm-grid .panel { min-height:190px; }.panel h3 { margin-bottom:14px; }.panel-copy { color:var(--muted); font-size:14px; line-height:1.55; }
.task-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; color:var(--muted); font-size:14px; }.task-list li { padding-bottom:10px; border-bottom:1px solid var(--line); }.task-list li:last-child { border:0; }.cvm-list { display:grid; gap:11px; margin-top:18px; color:var(--muted); font-size:14px; }.cvm-list div { display:flex; justify-content:space-between; gap:12px; }.cvm-list strong { color:var(--ink); }
.client-heading { margin-top:28px; align-items:end; }.client-list { display:grid; margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:10px; }.client-list > p { padding:20px; color:var(--muted); }.client-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }.client-row:last-child { border:0; }.client-row div:first-child { display:grid; gap:3px; }.client-row strong { color:var(--ink); }.client-row span { font-size:12px; }
.catalog-summary { margin:18px 0 0; }.checks { display:block; margin-top:8px; color:var(--muted); font-size:13px; }.checks input { width:auto; margin:0 5px 0 0; padding:0; }
dialog { width:min(680px,calc(100vw - 32px)); border:0; border-radius:12px; padding:0; box-shadow:0 20px 60px #0004; } dialog::backdrop { background:#111a; } #client-form { padding:28px; }.dialog-head,.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; }.dialog-actions { justify-content:end; margin-top:24px; }.icon-button { border:0; background:transparent; color:var(--muted); font-size:28px; cursor:pointer; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }.form-grid label { display:grid; gap:6px; color:var(--muted); font-size:13px; }.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:1px solid var(--line); border-radius:7px; padding:10px; font:inherit; color:var(--ink); background:#fff; }.form-grid .wide { grid-column:1 / -1; }.form-error { margin-top:14px; color:#a31c1e; font-size:14px; }
.panel { min-height:210px; padding:28px; }
.panel > p:not(.eyebrow) { margin-top:14px; max-width:46ch; }
.status { display:inline-block; margin-top:22px; padding:6px 9px; border-radius:99px; color:#8e2628; background:#fff0f0; font-size:12px; font-weight:700; }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; } main { padding:28px 20px; }.summary-grid,.two-column,.crm-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .topbar,.section-heading { align-items:flex-start; flex-direction:column; }.summary-grid,.two-column,.crm-grid,.form-grid { grid-template-columns:1fr; }.client-row { align-items:flex-start; flex-direction:column; }.form-grid .wide { grid-column:auto; } }