/* Growth Desk design system tokens (see the Growth Desk Design System artifact). */
:root {
  --ground:#EEF0F7; --surface:#FFFFFF; --surface-muted:#F5F6FA; --line:#E3E6EF;
  --ink:#1B1E2B; --ink-muted:#5B6175;
  --primary:#3461F5; --primary-ink:#FFFFFF; --primary-hover:#2148C9;
  --blue-bg:#DDE5FE; --blue-fg:#2148C9; --purple-bg:#ECE6FD; --purple-fg:#5532C2;
  --orange-bg:#FDEBDB; --orange-fg:#8A4B08; --teal-bg:#DDF3F0; --teal-fg:#0B6760;
  --rose-bg:#FCE3E8; --rose-fg:#A3203E;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(27,30,43,0.06);
  --font-sans:Poppins, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#111318; --surface:#1A1D25; --surface-muted:#20242E; --line:#2E3340;
    --ink:#EEF0F6; --ink-muted:#A3A9BA;
    --primary:#6F8EFF; --primary-ink:#0D1020; --primary-hover:#94ABFF;
    --blue-bg:#1E2A55; --blue-fg:#AFC2FF; --purple-bg:#2D2450; --purple-fg:#C9B8FF;
    --orange-bg:#3D2A18; --orange-fg:#F5C08A; --teal-bg:#133A36; --teal-fg:#8EE0D5;
    --rose-bg:#45202A; --rose-fg:#F7A8B9;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-sans); }
a { color:var(--primary); } a:hover { color:var(--primary-hover); }
button, input, select, textarea { font-family:inherit; font-size:13px; color:inherit; }
.loading { padding:40px; color:var(--ink-muted); }

.shell { max-width:1440px; margin:24px auto; background:var(--surface); border-radius:var(--radius-xl); display:flex; flex-wrap:wrap; overflow:hidden; box-shadow:var(--shadow-card); min-height:calc(100vh - 48px); }
@media (max-width:640px){ .shell { margin:0; border-radius:0; } }
nav.side { flex:1 1 220px; padding:28px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.brandmark { display:flex; align-items:center; gap:10px; padding:0 10px 22px; font-weight:600; font-size:18px; }
.logo { width:32px; height:32px; border-radius:var(--radius-md); background:var(--primary); color:var(--primary-ink); display:grid; place-items:center; font-weight:600; }
nav.side button.nav { text-align:left; border:0; background:transparent; color:var(--ink-muted); padding:11px 12px; border-radius:var(--radius-md); font-size:14px; cursor:pointer; min-height:44px; }
nav.side button.nav[aria-current="page"] { background:var(--primary); color:var(--primary-ink); font-weight:500; }
.spacer { flex:1; min-height:24px; }
.me { display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; background:var(--surface-muted); }
.me .av { background:var(--blue-bg); color:var(--blue-fg); }
.me small { display:block; color:var(--ink-muted); font-size:12px; }
.linkbtn { border:0; background:none; color:var(--primary); cursor:pointer; padding:0; font-size:12px; }

main.content { flex:999 1 560px; min-width:0; padding:28px 32px 36px; display:flex; flex-direction:column; gap:22px; }
@media (max-width:640px){ main.content { padding:20px 16px; } }
.head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.head h1 { margin:0; font-size:26px; line-height:32px; font-weight:600; }
.head p { margin:4px 0 0; font-size:13px; color:var(--ink-muted); }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.track { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--surface-muted); }
.track button { min-height:40px; padding:0 14px; border:0; border-radius:9px; font-weight:500; cursor:pointer; background:transparent; color:var(--ink-muted); }
.track button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.tab { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:var(--radius-md); font-size:14px; font-weight:500; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.tab[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.count { font-size:11px; padding:2px 7px; border-radius:var(--radius-pill); background:var(--surface-muted); color:var(--ink-muted); }
.tab[aria-pressed="true"] .count { background:var(--ink-muted); color:var(--surface); }
select.person { min-height:40px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:0 10px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.kpi { border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.kpi .l { font-size:12px; color:var(--ink-muted); }
.kpi .v { font-size:24px; line-height:30px; font-weight:600; }

.board-wrap { overflow-x:auto; padding-bottom:6px; }
.board { display:grid; gap:16px; align-items:start; }
.col { background:var(--surface-muted); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.colhead { display:flex; justify-content:space-between; align-items:center; border-radius:var(--radius-md); padding:10px 12px; font-size:14px; font-weight:600; }
.colhead span:last-child { font-size:12px; font-weight:400; }
.blue { background:var(--blue-bg); color:var(--blue-fg); } .purple { background:var(--purple-bg); color:var(--purple-fg); }
.orange { background:var(--orange-bg); color:var(--orange-fg); } .teal { background:var(--teal-bg); color:var(--teal-fg); }
.rose { background:var(--rose-bg); color:var(--rose-fg); } .gray { background:var(--line); color:var(--ink); }
.empty { font-size:12px; color:var(--ink-muted); text-align:center; padding:8px; }

.card { background:var(--surface); border-radius:var(--radius-lg); padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-card); }
.who { display:flex; align-items:center; gap:10px; }
.av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; flex-shrink:0; }
.name { font-size:13px; font-weight:600; }
.meta { font-size:12px; color:var(--ink-muted); }
.excerpt { margin:0; font-size:12px; line-height:1.5; color:var(--ink-muted); }
.quote { margin:0; font-size:12px; line-height:1.5; background:var(--surface-muted); border-radius:var(--radius-sm); padding:8px 10px; }
.draft { border-radius:var(--radius-md); padding:10px 12px; display:flex; flex-direction:column; gap:4px; background:var(--surface-muted); }
.lbl { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.draft textarea { width:100%; border:0; background:transparent; resize:vertical; min-height:72px; line-height:1.5; font-size:13px; padding:0; }
.draft textarea:focus { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
.btns { display:flex; flex-wrap:wrap; gap:6px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 12px; border-radius:var(--radius-md); font-size:12px; font-weight:500; cursor:pointer; text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.btn.primary { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-hover); color:var(--primary-ink); }
.btn.done { background:var(--teal-bg); color:var(--teal-fg); border-color:var(--teal-bg); }
.btn:disabled { opacity:.6; cursor:default; }
.chip { font-size:11px; font-weight:500; padding:4px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.chip.ar { background:var(--blue-bg); color:var(--blue-fg); } .chip.fx { background:var(--purple-bg); color:var(--purple-fg); }
.top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.card label.cb { display:flex; align-items:center; gap:8px; font-size:12px; min-height:28px; cursor:pointer; }
.card input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); }
.steps { display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:10px; }
.steps .done-t { color:var(--ink-muted); text-decoration:line-through; }
.addstep { display:flex; gap:6px; }
.addstep input, .field { flex:1; min-height:36px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 8px; background:var(--surface); }
.fu { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.fu input { min-height:32px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 6px; background:var(--surface); }
.fu input.over { background:var(--rose-bg); color:var(--rose-fg); border-color:var(--rose-bg); }
.notes { width:100%; min-height:64px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; line-height:1.5; background:var(--surface-muted); font-size:12px; resize:vertical; }
.stage-sel { min-height:32px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:0 6px; font-size:12px; }

dialog { border:0; border-radius:var(--radius-xl); padding:24px; width:min(440px, 92vw); background:var(--surface); color:var(--ink); }
dialog::backdrop { background:rgba(17,19,24,.4); }
dialog form { display:flex; flex-direction:column; gap:10px; }
dialog label { font-size:12px; color:var(--ink-muted); display:flex; flex-direction:column; gap:4px; }
dialog h2 { margin:0 0 4px; font-size:18px; }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:var(--radius-md); font-size:13px; z-index:10; }
.login { margin:auto; text-align:center; padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.login h1 { margin:0; font-size:26px; } .login p { margin:0; color:var(--ink-muted); font-size:14px; max-width:320px; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }
.table th { font-size:12px; color:var(--ink-muted); font-weight:500; }