/* Workflow Dashboard styles. Tokens live in tokens.css. Motion: transform and opacity only. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14px/20px var(--font);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss03";
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
::selection { background: var(--bg-accent-soft); }

.i {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Type scale (Figma text styles) */
.t-display { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.02em; }
.t-display-sm { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; }
.t-stat { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; }
.t-page { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.t-welcome { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.t-section { font-size: 16px; line-height: 24px; font-weight: 500; }
.t-caps { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.num, .t-stat, .t-display, td, .money { font-variant-numeric: tabular-nums; }
.tone-negative { color: var(--text-negative); }
.tone-warning { color: var(--text-warning); }
.tone-positive { color: var(--text-positive); }
.tone-muted { color: var(--text-muted); }
.strong { color: var(--text-primary); font-weight: 500; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Category colors: one class sets the three pastel values */
.c-blue { --c-bg: var(--blue-bg); --c-text: var(--blue-text); --c-bar: var(--blue-bar); }
.c-green { --c-bg: var(--green-bg); --c-text: var(--green-text); --c-bar: var(--green-bar); }
.c-purple { --c-bg: var(--purple-bg); --c-text: var(--purple-text); --c-bar: var(--purple-bar); }
.c-pink { --c-bg: var(--pink-bg); --c-text: var(--pink-text); --c-bar: var(--pink-bar); }
.c-orange { --c-bg: var(--orange-bg); --c-text: var(--orange-text); --c-bar: var(--orange-bar); }
.c-yellow { --c-bg: var(--yellow-bg); --c-text: var(--yellow-text); --c-bar: var(--yellow-bar); }
.c-gray { --c-bg: var(--bg-muted); --c-text: var(--text-secondary); --c-bar: var(--border-strong); }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 20px 12px 12px 20px;
  view-transition-name: side;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; padding: 0 0 20px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--bg-inverse); color: #fff; }
.side-nav {
  flex: 1; overflow-y: auto; margin: 0 -8px; padding: 0 8px 16px; scrollbar-width: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.side-nav::-webkit-scrollbar { display: none; }
.side-label { margin: 16px 4px 8px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.side-label:first-child { margin-top: 4px; }
.side-label-row { display: flex; align-items: center; justify-content: space-between; }
.side-rule { margin: 16px 0 0; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; margin-bottom: 2px;
  border-radius: var(--r-md);
  color: var(--text-secondary); font-weight: 400;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.nav-item > span:not(.cat-tile) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--bg-muted); color: var(--text-primary); }
.nav-item:active { transform: scale(0.99); }
.nav-item.is-active { background: var(--bg-accent); color: #fff; font-weight: 500; }
.nav-item.is-active .nav-count { background: rgb(255 255 255 / 0.18); color: #fff; }
.nav-count {
  font-style: normal; font-size: 12px; line-height: 16px; font-weight: 500;
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--bg-muted); color: var(--text-secondary);
}
.nav-count.is-urgent { background: var(--bg-accent-soft); color: var(--text-accent); }
.nav-num { font-style: normal; font-size: 12px; color: var(--text-muted); padding-right: 6px; }
.nav-cat { gap: 10px; padding-left: 8px; }
.cat-tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); flex: none; }

.side-scrim { display: none; }
.profile-wrap { margin-top: 12px; }
.profile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--r-inner);
  background: var(--bg-surface); text-align: left;
  transition: border-color var(--fast) var(--ease-out);
}
.profile:hover { border-color: var(--border-strong); }
.profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-text small { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-accent-soft); color: var(--text-accent);
  font-size: 12px; font-weight: 600;
}

.main {
  margin: 12px 12px 12px 0;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  min-height: calc(100vh - 24px);
}
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 72px; padding: 0 16px 0 28px; flex: none;
  border-bottom: 1px solid var(--border);
}
.topbar h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-menu { display: none; }
.search {
  display: flex; align-items: center; gap: 10px;
  width: 340px; height: 40px; padding: 0 8px 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-field);
  color: var(--text-muted); text-align: left;
  transition: border-color var(--fast) var(--ease-out);
}
.search:hover { border-color: var(--border-strong); }
.search span { flex: 1; }
kbd {
  font: 500 11px/16px var(--font); color: var(--text-muted);
  padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg-muted);
}
.clock {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-field);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.clock b { font-weight: 500; }
.clock span { color: var(--text-muted); }
.page { flex: 1; padding: 28px; min-width: 0; view-transition-name: page; }

/* Page header: welcome line or section title, subtitle, actions */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { color: var(--text-muted); margin-top: 4px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--text-primary);
  font-weight: 500; white-space: nowrap; user-select: none;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.btn:hover { background: var(--bg-subtle); border-color: var(--border-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-primary { background: var(--bg-inverse); border-color: var(--bg-inverse); color: #fff; }
.btn-primary:hover { background: #2a2a2a; border-color: #2a2a2a; }
.btn-danger { color: var(--text-negative); }
.btn-danger:hover { background: var(--bg-negative-soft); border-color: var(--text-negative); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--text-secondary); padding: 0 8px; }
.btn-quiet:hover { background: var(--bg-muted); border-color: transparent; color: var(--text-primary); }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn-xs { height: 28px; padding: 0 8px; font-size: 12px; gap: 4px; border-radius: var(--r-sm); }
.btn-lg { height: 44px; font-size: 15px; border-radius: var(--r-field); }
.btn-block { width: 100%; }
.btn.is-active { background: var(--bg-accent); border-color: var(--bg-accent); color: #fff; }
.btn.is-loading { pointer-events: none; opacity: 0.7; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--r-field);
  color: var(--text-secondary); background: var(--bg-surface);
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn-sm { width: 28px; height: 28px; border-color: transparent; border-radius: var(--r-sm); background: transparent; }
.icon-btn-sm:hover { background: var(--bg-muted); border-color: transparent; }
.icon-btn-xs { width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); }
.icon-btn-xs:hover { background: var(--bg-muted); }
.bell { position: relative; }
.bell.has-dot::after {
  content: ""; position: absolute; top: 9px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-accent); box-shadow: 0 0 0 2px var(--bg-surface);
}
.link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.link:hover { color: var(--text-primary); }

/* ---------- Cards (Flowza nested shell) ---------- */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-shell);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px;
}
.card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 12px; }
.card-head > .i { color: var(--text-secondary); }
.card-head h2, .card-head h3 { font-size: 16px; line-height: 24px; font-weight: 500; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head .count { margin-left: -2px; }
.card-head-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.panel {
  flex: 1; min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.panel-flush { padding: 0; overflow: hidden; }
.panel + .panel { margin-top: 4px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.grid-side { grid-template-columns: minmax(0, 1fr) 340px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.self-start { align-self: flex-start; }
.toggles { gap: 20px; margin-top: 16px; }
.section-gap { margin-top: 16px; }

/* KPI card */
.kpi .panel { padding: 0; display: flex; flex-direction: column; }
.kpi-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; }
.kpi-foot { padding: 10px 16px 12px; border-top: 1px solid var(--border); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-foot b { font-weight: 500; color: var(--text-primary); }
.kpi-foot b.tone-negative { color: var(--text-negative); }

/* ---------- Pills, chips, badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  background: var(--c-bg, var(--bg-muted)); color: var(--c-text, var(--text-secondary));
}
.pill .i { width: 14px; height: 14px; }
.prio-urgent { --c-bg: var(--bg-negative-soft); --c-text: var(--text-negative); }
.prio-moderate { --c-bg: var(--orange-bg); --c-text: var(--orange-text); }
.prio-low { --c-bg: var(--green-bg); --c-text: var(--green-text); }
.tone-bg-positive { --c-bg: var(--bg-positive-soft); --c-text: var(--text-positive); }
.tone-bg-warning { --c-bg: var(--bg-warning-soft); --c-text: var(--text-warning); }
.tone-bg-negative { --c-bg: var(--bg-negative-soft); --c-text: var(--text-negative); }
.tone-bg-accent { --c-bg: var(--bg-accent-soft); --c-text: var(--text-accent); }
.tone-bg-muted { --c-bg: var(--bg-muted); --c-text: var(--text-secondary); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 6px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--c-bg); color: var(--c-text);
}
.chip .i { width: 14px; height: 14px; }
.count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: var(--r-sm); background: var(--bg-muted); color: var(--text-secondary);
  font-size: 12px; font-weight: 500; font-style: normal; font-variant-numeric: tabular-nums;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-bar, var(--border-strong)); flex: none; }
.dot-solid { background: var(--c-text); }

/* Filter chips (All / category) */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--text-primary); font-weight: 500;
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.fchip:hover { border-color: var(--border-strong); }
.fchip em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.fchip .cat-tile { width: 24px; height: 24px; border-radius: var(--r-sm); }
.fchip.is-active { background: var(--bg-inverse); border-color: var(--bg-inverse); color: #fff; padding-left: 12px; }
.fchip.is-active em { color: rgb(255 255 255 / 0.7); }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--bg-muted); }
.seg > * {
  height: 28px; padding: 0 12px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.seg > *:hover { color: var(--text-primary); }
.seg > .is-active { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 2px rgb(17 17 17 / 0.08); }
.seg-sm > * { height: 24px; padding: 0 10px; font-size: 12px; }

/* View switch (List / Board / Timeline / Calendar) */
.views { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Progress ---------- */
.bar { height: 8px; border-radius: var(--r-full); background: var(--bg-muted); overflow: hidden; }
.bar > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-bar, var(--chart-ink)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 400ms var(--ease-out); }
.bar-thin { height: 6px; }
.bar-thick { height: 10px; }
.segbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.segbar > span { height: 4px; border-radius: var(--r-full); background: var(--bg-muted); transition: background-color var(--base) var(--ease-out); }
.segbar > span.on { background: var(--text-primary); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl-fixed { table-layout: fixed; }
.tbl .w-100 { width: 100px; } .tbl .w-120 { width: 120px; } .tbl .w-140 { width: 140px; } .tbl .w-160 { width: 160px; }
.tbl th {
  text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-subtle);
}
.tbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color var(--fast) var(--ease-out); }
.tbl tbody tr:hover { background: var(--bg-subtle); }
.tbl .col-check { width: 44px; padding-left: 16px; padding-right: 0; }
.tbl .col-menu { width: 48px; text-align: right; }
.tbl .num { text-align: right; }
.cell-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { font-size: 12px; line-height: 16px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.due { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.due .i { color: var(--text-muted); }
.due.tone-negative .i { color: var(--text-negative); }
.table-scroll { position: relative; overflow-x: auto; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field + .field, .form-grid + .field, .field + .form-grid { margin-top: 14px; }
.field-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }
.field-help { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.control {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-field);
  background: var(--bg-surface);
  transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.control:hover { border-color: var(--border-hover); }
.control:focus-within { border-color: var(--border-accent); box-shadow: var(--ring); }
.control > .i { color: var(--text-muted); }
.control input, .control select, .control textarea {
  flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; padding: 0;
}
.control textarea { height: auto; min-height: 76px; padding: 9px 0; resize: vertical; line-height: 20px; }
.control select { appearance: none; cursor: pointer; padding-right: 20px; }
.control-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); pointer-events: none;
}
.control-btn { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; border-radius: var(--r-sm); color: var(--text-muted); }
.control-btn:hover { background: var(--bg-muted); color: var(--text-primary); }
.control-prefix { color: var(--text-muted); font-weight: 500; }
.field.is-error .control { border-color: var(--border-negative, var(--text-negative)); }
.field.is-error .field-help { color: var(--text-negative); }
.form-grid > .field { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group-label { margin: 20px 0 10px; }
.input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-field); padding: 10px 12px; background: var(--bg-surface); }
.code { font: 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; }

.check {
  appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--bg-surface);
  display: inline-grid; place-items: center;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.check::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform var(--base) var(--ease-out);
}
.check:hover { border-color: var(--border-hover); }
.check:active { transform: scale(0.9); }
.check:checked { background: var(--bg-inverse); border-color: var(--bg-inverse); }
.check:checked::after { transform: rotate(-45deg) scale(1); }
.check-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; cursor: pointer; }

.switch {
  appearance: none; flex: none; margin: 0; cursor: pointer; position: relative;
  width: 36px; height: 20px; border-radius: var(--r-full); background: var(--border-strong);
  transition: background-color var(--base) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(17 17 17 / 0.2); transition: transform var(--base) var(--ease-out);
}
.switch:checked { background: var(--bg-inverse); }
.switch:checked::after { transform: translateX(16px); }

/* Option cards: radio choices that look like cards */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option { position: relative; display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-inner); cursor: pointer; transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.option:hover { border-color: var(--border-hover); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option b { display: block; font-weight: 500; }
.option small { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); margin-top: 2px; }
.option:has(input:checked) { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.option:has(input:focus-visible) { outline: 2px solid var(--border-accent); outline-offset: 2px; }

/* Pill radio group (category, priority) */
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick label { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .pill { height: 30px; padding: 0 10px; border: 1px solid transparent; transition: box-shadow var(--fast) var(--ease-out), transform var(--fast) var(--ease-out); }
.pick label:active .pill { transform: scale(0.96); }
.pick input:checked + .pill { box-shadow: inset 0 0 0 1.5px var(--c-text, var(--text-primary)); }
.pick input:focus-visible + .pill { outline: 2px solid var(--border-accent); outline-offset: 2px; }

/* ---------- Menus and popovers ---------- */
.menu-wrap { position: relative; }
.menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 200px;
  padding: 6px; border: 1px solid var(--border); border-radius: var(--r-inner);
  background: var(--bg-surface); box-shadow: var(--shadow-menu);
  transform-origin: top right;
  animation: pop-in var(--base) var(--ease-out);
}
.menu-up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; transform-origin: bottom left; }
.menu-wide { width: 340px; }
.menu.is-closing { animation: pop-out var(--fast) var(--ease-in) forwards; }
.menu-title { padding: 6px 8px 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.menu-empty { padding: 8px 8px 12px; color: var(--text-muted); }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 34px; padding: 6px 8px; border-radius: var(--r-md);
  color: var(--text-secondary); text-align: left;
  transition: background-color var(--fast) var(--ease-out);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-muted); color: var(--text-primary); outline: 0; }
.menu-item.is-danger { color: var(--text-negative); }
.menu-item.is-danger:hover { background: var(--bg-negative-soft); }
.menu-note { align-items: flex-start; }
.menu-note b { display: block; font-weight: 500; color: var(--text-primary); }
.menu-note small { display: block; font-size: 12px; line-height: 16px; }
.note-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--bg-muted); }
.note-icon.tone-negative { background: var(--bg-negative-soft); }
.note-icon.tone-warning { background: var(--bg-warning-soft); }

@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ---------- Dialogs ---------- */
dialog {
  padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-surface); color: inherit; box-shadow: var(--shadow-menu);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
dialog[open] { animation: rise-in var(--base) var(--ease-out); }
dialog.is-closing { animation: pop-out var(--fast) var(--ease-in) forwards; }
dialog::backdrop { background: var(--bg-scrim); animation: fade-in var(--base) var(--ease-out); }
dialog.is-closing::backdrop { animation: fade-out var(--fast) var(--ease-in) forwards; }
.dialog-sm { width: min(400px, calc(100vw - 32px)); }
.dialog-wide { width: min(880px, calc(100vw - 32px)); }
.dialog-form { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.dialog-head h2 { flex: 1; font-size: 18px; line-height: 24px; font-weight: 500; }
.dialog-body { padding: 4px 20px 20px; overflow-y: auto; }
.dialog-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-subtle); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.dialog-foot .spacer { flex: 1; }

/* Checklist editor inside the task dialog */
.checklist-edit { display: flex; flex-direction: column; gap: 6px; }
.checklist-edit .ci { display: flex; align-items: center; gap: 8px; }
.checklist-edit .ci input[type="text"] { flex: 1; height: 34px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; outline: 0; }
.checklist-edit .ci input[type="text"]:focus { border-color: var(--border-accent); box-shadow: var(--ring); }

/* Command palette */
.palette { width: min(620px, calc(100vw - 32px)); margin-top: 12vh; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette-input .i { color: var(--text-muted); }
.palette-input input { flex: 1; height: 54px; border: 0; outline: 0; font-size: 16px; background: transparent; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; }
.palette-item.is-active { background: var(--bg-muted); }
.palette-item small { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.palette-empty { padding: 20px; text-align: center; color: var(--text-muted); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 100; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  padding: 10px 12px 10px 14px; border-radius: var(--r-inner);
  background: var(--bg-inverse); color: #fff; box-shadow: var(--shadow-menu);
  animation: rise-in var(--base) var(--ease-out);
}
.toast.is-error { background: var(--bg-negative); }
.toast.is-closing { animation: pop-out var(--fast) var(--ease-in) forwards; }
.toast button { color: #fff; font-weight: 600; padding: 2px 6px; border-radius: var(--r-sm); }
.toast button:hover { background: rgb(255 255 255 / 0.14); }

/* Tooltip for charts */
.tip {
  position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none;
  transform: translate3d(var(--x, -999px), var(--y, 0), 0);
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface); box-shadow: var(--shadow-menu);
  font-size: 12px; line-height: 18px; white-space: nowrap;
  opacity: 0; transition: opacity var(--fast) var(--ease-out);
}
.tip.is-on { opacity: 1; }
.tip b { font-weight: 600; }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-row span:last-child { margin-left: auto; padding-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- States ---------- */
.flash { animation: flash 1.2s var(--ease-out); }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--bg-accent-soft), 0 0 0 4px var(--border-accent); } }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--text-muted); }
.empty h2, .empty h3 { color: var(--text-primary); }
.empty .btn { margin-top: 8px; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-inner); background: var(--bg-muted); color: var(--text-secondary); margin-bottom: 4px; }
.empty-page { min-height: 50vh; }
.empty-sm { padding: 20px 12px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-inner); background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-secondary); }
.notice-negative { background: var(--bg-negative-soft); border-color: #f6d0d0; color: var(--text-negative); }

/* ---------- Sign in and install ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 100vh; background: var(--bg-surface); }
.auth-single { grid-template-columns: 1fr; }
.auth-form { display: flex; flex-direction: column; align-items: center; padding: 40px 32px 28px; }
.brand-center { padding: 0; }
.auth-card { width: 100%; max-width: 400px; margin: auto 0; padding: 32px 0; }
.auth-single .auth-card { max-width: 520px; }
.auth-lead { color: var(--text-muted); margin: 8px 0 28px; font-size: 15px; line-height: 22px; }
.auth-note { display: flex; gap: 10px; margin-top: 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--bg-subtle); color: var(--text-secondary); font-size: 13px; line-height: 18px; }
.auth-note .i { margin-top: 1px; }
.auth-foot { width: 100%; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--text-muted); }
.auth-preview { margin: 16px; border-radius: 24px; background: var(--bg-canvas); border: 1px solid var(--border); padding: 48px 0 0 48px; overflow: hidden; display: flex; flex-direction: column; }
.auth-headline { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; margin: 10px 48px 32px 0; max-width: 560px; }
.auth-preview img { width: 100%; height: auto; border-radius: 14px 0 0 0; border: 1px solid var(--border); border-right: 0; border-bottom: 0; box-shadow: var(--shadow-menu); object-fit: cover; object-position: left top; flex: 1; min-height: 0; }

/* ---------- Charts ---------- */
.legend { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-upwork { background: var(--chart-green); }
.legend-direct { background: var(--green-bar); }
.legend-short { background: var(--chart-rose); }
.legend-blue { background: var(--blue-text); }
.legend-future { background: transparent; border: 1px dashed var(--text-muted); }

.vchart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.vchart-axis { height: var(--h); display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.vchart-axis span { transform: translateY(-1px); }
.vchart-plot { position: relative; height: calc(var(--h) + 26px); }
.vchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); transform: translateY(calc(-1 * var(--h) * 0)); }
.vchart-plot > .vchart-grid { bottom: 0; }
.vchart-grid, .vchart-line { margin-bottom: 26px; }
.vchart-line { position: absolute; left: 0; right: 0; z-index: 2; border-top: 1.5px dashed var(--text-primary); pointer-events: none; }
.vchart-line span { position: absolute; left: 0; bottom: 4px; padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); font-size: 12px; white-space: nowrap; }
.vchart-bars { position: absolute; inset: 0; display: flex; gap: 12px; padding: 0 8px; }
.vchart-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: default; }
.vchart-stack { width: min(72px, 70%); height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; transition: opacity var(--fast) var(--ease-out); }
.vchart-bars:hover .vchart-col:not(:hover) .vchart-stack { opacity: 0.55; }
.vchart-stack.is-grouped { flex-direction: row; align-items: flex-end; justify-content: center; gap: 6px; }
.is-grouped .seg { width: min(22px, 40%); }
.vchart-label { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--text-muted); white-space: nowrap; }
.seg { display: block; border-radius: 6px; min-height: 4px; }
.seg-upwork { background: var(--chart-green); }
.seg-direct { background: var(--green-bar); }
.seg-short { background: repeating-linear-gradient(135deg, var(--chart-rose) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1px var(--chart-rose); }
.seg-future { border: 1.5px dashed var(--border-strong); background: transparent; }
.seg-ink { background: var(--chart-ink); }
.seg-peri { background: var(--chart-periwinkle); }
.seg-steel { background: var(--chart-steel); }
.seg-mint { background: var(--chart-mint); }
.seg-rose { background: var(--chart-rose); }
.seg-accent { background: var(--bg-accent); }
.seg-muted { background: var(--bg-muted); }

.donut-wrap { position: relative; flex: none; width: var(--size); height: var(--size); }
.donut circle[data-tip] { transition: opacity var(--fast) var(--ease-out); }
.donut:hover circle[data-tip]:not(:hover) { opacity: 0.5; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: calc(var(--size) * 0.14); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.donut-center span { font-size: 12px; color: var(--text-muted); }

.hstack { display: flex; gap: 3px; height: 12px; }
.hstack > b, .hstack > i { display: block; border-radius: var(--r-full); min-width: 4px; }
.hstack > i { background: var(--bg-muted); }

/* ---------- Overview ---------- */
.income-panel { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.income-figure { display: flex; align-items: baseline; gap: 10px; }
.income-meta { color: var(--text-muted); flex-wrap: wrap; }
.agenda { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.agenda-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--c-bg); border-left: 3px solid var(--c-text);
}
.agenda-item b { font-weight: 500; color: var(--text-primary); }
.agenda-item small { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.agenda-time { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--c-text); font-variant-numeric: tabular-nums; }
.agenda-item.is-past { opacity: 0.55; }
.now-line { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.now-line::after { content: ""; flex: 1; border-top: 1.5px solid var(--text-primary); }
.now-line span { padding: 2px 8px; border-radius: var(--r-full); background: var(--bg-inverse); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

.attention { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.attention-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); }
.attention-item:hover { background: var(--bg-subtle); }
.attention-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attention-text b { font-weight: 500; }
.attention-text small { font-size: 12px; line-height: 16px; }

.goal-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.goal-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-radius: var(--r-md); transition: background-color var(--fast) var(--ease-out); }
.goal-row:hover { background: var(--bg-subtle); }
.goal-row b { font-weight: 500; }

.focus-sum { color: var(--text-muted); margin-bottom: 14px; }
.focus-sum b { color: var(--text-primary); font-weight: 600; }
.heatmap { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hm-cell { display: block; height: 26px; border-radius: 6px; background: var(--bg-muted); }
.hm-0 { background: var(--bg-muted); }
.hm-1 { background: var(--bg-accent-soft); }
.hm-2 { background: var(--chart-periwinkle); }
.hm-3 { background: #6c78f7; }
.hm-4 { background: var(--bg-accent); }
.hm-cell.is-future { background: transparent; border: 1px dashed var(--border); }
.hm-cell.is-out { opacity: 0.35; }
.hm-cell.is-today { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3.5px var(--text-primary); }
.hm-day { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.hm-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.hm-legend .hm-cell { width: 12px; height: 12px; border-radius: 3px; }
.hm-legend span:first-child { margin-right: 4px; }
.hm-legend span:last-child { margin-left: 4px; }

tr.is-done td { opacity: 0.45; transition: opacity var(--base) var(--ease-out); }
tr.is-done .cell-title { text-decoration: line-through; }

/* ---------- Kanban board ---------- */
.board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; margin: 0 -28px; padding-inline: 28px; scroll-padding-inline: 28px; }
.kcol { flex: 1 0 256px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-shell); }
.kcol-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 4px 2px 8px; color: var(--text-secondary); }
.kcol-head h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); }
.kcol-tools { margin-left: auto; display: flex; gap: 2px; }
.kcol-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kcol-empty { display: none; padding: 20px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-inner); text-align: center; color: var(--text-muted); font-size: 13px; }
.kcol-list:not(:has(.kcard, .drag-placeholder)) .kcol-empty { display: block; }
.kcol-more, .kcol-add { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out); }
.kcol-more { background: var(--bg-surface); border: 1px solid var(--border); }
.kcol-more:hover { border-color: var(--border-strong); color: var(--text-primary); }
.kcol-add { border: 1.5px dashed var(--border-strong); }
.kcol-add:hover { background: var(--bg-surface); color: var(--text-primary); }
.kcol-rail { flex: 0 0 44px; align-items: center; padding: 8px 4px; cursor: pointer; }
.kcol-rail > :not(.kcol-rail-toggle) { display: none; }
.kcol-rail-toggle { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 12px; color: var(--text-secondary); font-weight: 600; }
.kcol-rail-toggle span { writing-mode: vertical-rl; }
.kcol-rail.is-open { flex: 1 0 256px; align-items: stretch; padding: 6px 6px 8px; cursor: default; }
.kcol-rail.is-open > :not(.kcol-rail-toggle) { display: flex; }
.kcol-rail.is-open > .kcol-rail-toggle { display: none; }

.kcard {
  --band-bg: var(--bg-negative-soft); --band-text: var(--text-negative); --band-border: #f6d0d0;
  display: flex; flex-direction: column; padding: 0 4px 4px; border-radius: var(--r-inner);
  background: var(--band-bg); border: 1px solid var(--band-border);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transition: box-shadow var(--fast) var(--ease-out);
}
.kcard:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.kcard.prio-moderate { --band-bg: var(--orange-bg); --band-text: var(--orange-text); --band-border: #f5d9bd; }
.kcard.prio-low { --band-bg: #e9f6eb; --band-text: var(--green-text); --band-border: #cfe9d3; }
.kcard.is-extra { display: none; }
.kcard-band { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--band-text); }
.kcard-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; background: var(--bg-surface); border-radius: 9px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.kcard-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.kcard-notes { color: var(--text-muted); font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kcard-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.kcard-checks .check { width: 16px; height: 16px; border-radius: 4px; }
.kcard-checks .check:checked + span { text-decoration: line-through; color: var(--text-muted); }
.kcard-progress { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: -4px; }
.kcard-progress b { font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.kcard-foot .due { font-size: 12px; }
.kcard-meta { display: flex; gap: 10px; color: var(--text-muted); }
.kcard-meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.kcard-meta b { font-weight: 400; }
.kcard.is-done .kcard-title { color: var(--text-secondary); }
.kcard.is-done .kcard-body { opacity: 0.8; }

/* Drag and drop (shared by board, pipeline and buy list) */
.drag-placeholder { flex: none; border: 1.5px dashed var(--border-hover); border-radius: var(--r-inner); background: rgb(255 255 255 / 0.5); }
.is-dragging {
  position: fixed !important; z-index: 80; margin: 0; pointer-events: none;
  box-shadow: var(--shadow-drag); cursor: grabbing;
  will-change: transform;
}
.is-landing { transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); box-shadow: var(--shadow-card); }
body.is-drag-active, body.is-drag-active * { cursor: grabbing !important; user-select: none; }

/* ---------- Tasks: list groups ---------- */
.groups { display: flex; flex-direction: column; gap: 16px; }
.group { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-shell); padding: 4px; }
.group-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.group-toggle { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); color: var(--text-muted); transition: transform var(--base) var(--ease-out), background-color var(--fast); }
.group-toggle:hover { background: var(--bg-muted); }
.is-collapsed .group-toggle { transform: rotate(-90deg); }
.group-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text); font-weight: 600; font-size: 13px; }
.group-add { margin-left: auto; }
.group-body { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-inner); overflow: hidden; }
.is-collapsed .group-body { display: none; }
.group-empty { padding: 14px 16px; color: var(--text-muted); }
.tbl th .i { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--text-muted); }
.range-nav { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-weight: 500; white-space: nowrap; }
.range-nav span { padding: 0 8px; min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Tasks: timeline (Gantt) ---------- */
.tl { --name: 300px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-shell); padding: 4px; }
.tl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--bg-surface); }
.tl-inner { min-width: calc(var(--name) + var(--days) * var(--col)); }
.zoom-day { --col: 110px; } .zoom-week { --col: 56px; } .zoom-month { --col: 30px; } .zoom-quarter { --col: 12px; }
.tl-head { display: grid; grid-template-columns: var(--name) 1fr; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-surface); z-index: 3; }
.tl-corner { display: flex; align-items: center; padding: 0 18px; font-size: 12px; font-weight: 500; color: var(--text-muted); border-right: 1px solid var(--border); }
.tl-dates { display: grid; grid-template-columns: repeat(var(--days), 1fr); }
.tl-date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 12px; line-height: 16px; color: var(--text-muted); white-space: nowrap; }
.tl-date b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: var(--r-full); font-weight: 500; color: var(--text-primary); }
.tl-date.is-today b { background: var(--bg-inverse); color: #fff; }
.zoom-quarter .tl-date { overflow: visible; align-items: flex-start; }
.tl-body { position: relative; }
.tl-cols { position: absolute; top: 0; bottom: 0; left: var(--name); right: 0; display: grid; grid-template-columns: repeat(var(--days), 1fr); pointer-events: none; border-left: 1px solid var(--border); }
.tl-cols i { border-right: 1px solid var(--bg-muted); }
.tl-cols i.is-weekend { background: var(--bg-subtle); }
.zoom-quarter .tl-cols i, .zoom-month .tl-cols i { border-right-color: transparent; }
.tl-now { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100% / var(--days)); width: 0; border-left: 1.5px solid var(--text-primary); z-index: 2; }
.tl-now::before { content: ""; position: absolute; top: -4px; left: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary); }
.tl-group-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--bg-canvas); border-bottom: 1px solid var(--border); }
.tl-group-head b { font-weight: 600; }
.tl-group.is-collapsed .tl-row { display: none; }
.tl-group.is-collapsed .group-toggle { transform: rotate(-90deg); }
.tl-row { display: grid; grid-template-columns: var(--name) 1fr; height: 44px; border-bottom: 1px solid var(--border); }
.tl-name { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 12px 0 36px; text-align: left; color: var(--text-primary); border-right: 1px solid var(--border); background: var(--bg-surface); position: relative; z-index: 1; }
.tl-name .i { color: var(--text-muted); }
.tl-name:hover { background: var(--bg-subtle); }
.tl-track { position: relative; }
.tl-bar, .tl-late {
  position: absolute; top: 8px; bottom: 8px;
  left: calc(var(--s) * 100% / var(--days) + 2px);
  width: calc((var(--e) - var(--s) + 1) * 100% / var(--days) - 4px);
  border-radius: var(--r-md);
}
.tl-bar { z-index: 2; background: var(--c-bar); color: var(--c-text); overflow: hidden; cursor: grab; touch-action: none; transition: box-shadow var(--fast) var(--ease-out); }
.tl-bar:hover { box-shadow: 0 0 0 1.5px var(--c-text); }
.tl-bar.is-active { cursor: grabbing; box-shadow: 0 0 0 1.5px var(--text-primary), var(--shadow-drag); z-index: 5; overflow: visible; }
.tl-bar.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-bar.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-fill { position: absolute; inset: 0; background: var(--c-text); opacity: 0.14; transform-origin: left; transform: scaleX(var(--p)); border-radius: inherit; pointer-events: none; }
.tl-label { position: relative; display: block; padding: 0 8px; font-size: 12px; line-height: 28px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tl-handle.is-start { left: 0; } .tl-handle.is-end { right: 0; }
.tl-handle::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 3px; width: 2px; border-radius: 2px; background: var(--c-text); opacity: 0; transition: opacity var(--fast); }
.tl-bar:hover .tl-handle::after { opacity: 0.5; }
.tl-late { z-index: 1; border: 1.5px dashed var(--text-negative); background: var(--bg-negative-soft); color: var(--text-negative); font-size: 12px; line-height: 24px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.tl-nodate { position: absolute; left: 10px; top: 13px; font-size: 12px; color: var(--text-muted); }
.tl-tip { position: absolute; bottom: calc(100% + 8px); left: 0; padding: 4px 10px; border-radius: var(--r-md); background: var(--bg-inverse); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; }

/* ---------- Tasks: calendar ---------- */
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--border); gap: 1px; }
.cal-wd { background: var(--bg-subtle); padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cal-day { background: var(--bg-surface); min-height: 118px; padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background-color var(--fast) var(--ease-out); min-width: 0; }
.cal-day:hover { background: var(--bg-subtle); }
.cal-day.is-out { background: var(--bg-subtle); }
.cal-day.is-out .cal-num { color: var(--text-muted); }
.cal-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-day.is-today .cal-num { background: var(--bg-inverse); color: #fff; }
.cal-pill { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text); font-size: 12px; font-weight: 500; text-align: left; min-width: 0; transition: transform var(--fast) var(--ease-out); }
.cal-pill:hover { transform: translateY(-1px); }
.cal-pill.is-done { opacity: 0.55; text-decoration: line-through; }
.cal-more { font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 0 8px; }
.cal-more:hover { color: var(--text-primary); }

/* ---------- Schedule ---------- */
.sched { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.mini-cal { padding: 16px; }
.mini-cal-head { margin-bottom: 10px; }
.mini-cal-head b { font-size: 16px; font-weight: 500; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-wd { font-size: 12px; color: var(--text-muted); padding: 4px 0 6px; }
.mini-day { position: relative; display: grid; place-items: center; height: 36px; border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; transition: background-color var(--fast) var(--ease-out); }
.mini-day:hover { background: var(--bg-muted); }
.mini-day.is-out { color: var(--border-strong); }
.mini-day.is-range { background: var(--bg-muted); }
.mini-day.is-today { background: var(--bg-inverse); color: #fff; font-weight: 600; }
.mini-day.has-blocks::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.agenda-side { margin-top: 4px; max-height: 540px; overflow-y: auto; }
.agenda-side .agenda-item { text-align: left; width: 100%; transition: transform var(--fast) var(--ease-out); }
.agenda-side .agenda-item:hover { transform: translateX(2px); }
.agenda-label { display: flex; align-items: baseline; gap: 6px; margin: 6px 2px 2px; }
.agenda-label .t-caps { color: var(--text-primary); }
.agenda-none { padding: 4px 2px 8px; }

.week-card { padding: 4px; }
.maker-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px 12px; }
.maker-bar > span { flex: 1; min-width: 0; }
.week { --gutter: 64px; }
.week-head { display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr)) var(--gutter); border-bottom: 1px solid var(--border); }
.week-tz { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.week-day { display: flex; flex-direction: column; padding: 10px 10px 8px; border-left: 1px solid var(--border); transition: background-color var(--fast); }
.week-day:hover { background: var(--bg-subtle); }
.week-day small { font-size: 12px; color: var(--text-muted); }
.week-day b { font-size: 18px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.week-day.is-today { background: var(--bg-accent-soft); color: var(--text-accent); }
.week-day.is-today small { color: var(--text-accent); }
.week-body { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); max-height: 760px; overflow-y: auto; }
.week-hours { display: flex; flex-direction: column; }
.week-hours span { height: var(--hour); padding: 0 8px; text-align: right; font-size: 12px; line-height: 12px; color: var(--text-muted); transform: translateY(-6px); white-space: nowrap; }
.week-hours span:first-child { transform: none; }
.week-hours-2 span { text-align: left; }
.week-cols {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); height: calc(var(--rows) * var(--hour));
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 100% var(--hour);
}
.week-col { position: relative; border-left: 1px solid var(--border); cursor: cell; }
.week-col:last-child { border-right: 1px solid var(--border); }
.week-col.is-today { background: rgb(233 235 254 / 0.45); }
.block {
  position: absolute; left: 4px; right: 4px; top: calc(var(--top) * var(--hour) / 60 + 1px); height: calc(var(--len) * var(--hour) / 60 - 3px);
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-bg); border-left: 3px solid var(--c-text);
  font-size: 12px; line-height: 16px; cursor: grab; touch-action: none; user-select: none;
  transition: box-shadow var(--fast) var(--ease-out), opacity var(--fast);
}
.block:hover { box-shadow: 0 0 0 1px var(--c-text); z-index: 2; }
.block.is-active { cursor: grabbing; z-index: 6; box-shadow: var(--shadow-drag); opacity: 0.95; }
.block.is-past { opacity: 0.5; }
.block.is-done .block-title { text-decoration: line-through; }
.block.is-suggested { background: var(--bg-surface); border: 1.5px dashed var(--c-text); }
.block.is-short { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 3px; }
.block-time { color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.block-title { font-weight: 500; color: var(--text-primary); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); }
.block-flag { color: var(--c-text); font-weight: 500; }
.block-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.week-now { position: absolute; left: 0; right: 0; top: calc(var(--top) * var(--hour) / 60); height: 0; border-top: 1.5px solid var(--text-primary); z-index: 4; pointer-events: none; }
.week-now::before { content: ""; position: absolute; left: -4px; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary); }
.week-now span { position: absolute; right: 4px; top: -10px; padding: 1px 6px; border-radius: var(--r-full); background: var(--bg-inverse); color: #fff; font-size: 11px; font-weight: 500; }
.cal-flat { border: 0; border-radius: var(--r-inner); }
.cal-pill.is-suggested { background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--c-text); }

/* ---------- Goals ---------- */
.goals { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.goal-cards { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 480px; }
.goal-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: var(--r-inner); transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out); }
.goal-card:hover { background: var(--bg-subtle); }
.goal-card.is-selected { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); background: var(--bg-subtle); }
.goal-card .cat-tile { width: 32px; height: 32px; }
.goal-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.goal-card-text b { font-weight: 600; }
.goal-card-text small { font-size: 12px; color: var(--text-muted); }
.goal-switch { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-inner); transition: border-color var(--fast); }
.goal-switch:hover { border-color: var(--border-strong); }
.goal-switch span { flex: 1; font-weight: 500; }
.goal-head { align-items: center; padding: 8px 8px 8px 12px; }
.goal-head .cat-tile { width: 36px; height: 36px; }
.goal-head-text { display: flex; flex-direction: column; min-width: 0; }
.goal-head-text h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.goal-detail { padding: 20px; }
.goal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.goal-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; border-left: 1px solid var(--border); }
.goal-stats > div:first-child { padding-left: 0; border-left: 0; }
.goal-stats span { font-size: 12px; color: var(--text-muted); }
.goal-stats b { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal-stats small { font-size: 12px; color: var(--text-muted); }
.goal-note { margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.goal-parts-head { margin: 20px 0 8px; }
.goal-noparts { padding: 8px 0 12px; }
.parts { list-style: none; margin: 0; padding: 0; }
.part { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) 150px 120px 72px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.part > .i { color: var(--text-muted); }
.part.is-done > .i { color: var(--text-positive); }
.part.is-current > .i { color: var(--text-accent); }
.part.is-current .part-title { font-weight: 600; }
.part-num { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.part-when { font-size: 12px; color: var(--text-muted); }
.part.is-current .part-when { color: var(--text-primary); }
.part-amount { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.goal-actions { margin-top: 20px; }
.mt-8 { margin-top: 8px; }

/* Wizard */
.wizard { width: min(880px, calc(100vw - 32px)); }
.wizard-head { align-items: flex-start; padding: 22px 24px 16px; }
.wizard-head > div { flex: 1; }
.wizard-head h2 { font-size: 24px; line-height: 32px; }
.wizard-head p { margin-top: 2px; }
.steps { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 24px; list-style: none; background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); counter-reset: step; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 500; }
.steps li + li::before { content: ""; width: 40px; height: 1.5px; background: var(--border-strong); margin-right: 4px; }
.steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 12px; transition: background-color var(--base), border-color var(--base), color var(--base); }
.steps .is-current { color: var(--text-primary); }
.steps .is-current span { border-color: var(--text-primary); }
.steps .is-done { color: var(--text-primary); }
.steps .is-done span { background: var(--bg-inverse); border-color: var(--bg-inverse); color: #fff; font-size: 0; }
.steps .is-done span::after { content: ""; display: block; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.steps .is-done + li::before, .steps .is-current::before { background: var(--text-primary); }
.wizard-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding: 24px; }
.wizard-form section { animation: fade-in var(--base) var(--ease-out); }
.parts-edit { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 2px; }
.pe { display: grid; grid-template-columns: minmax(0, 1fr) 72px 24px; gap: 6px; align-items: center; }
.pe input { height: 34px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; outline: 0; min-width: 0; }
.pe input:focus { border-color: var(--border-accent); box-shadow: var(--ring); }
.toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--bg-subtle); cursor: pointer; }
.toggle-card b { display: block; font-weight: 500; }
.toggle-card small { display: block; font-size: 12px; color: var(--text-muted); }
.plan { align-self: start; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-shell); }
.plan-label { display: flex; align-items: center; gap: 6px; }
.plan-big { margin: 10px 0 4px; color: var(--text-muted); }
.plan-big b { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plan hr { margin: 16px 0; }
.plan-parts-title { font-weight: 600; margin-bottom: 8px; }
.plan-parts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.plan-parts li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.plan-parts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chart-periwinkle); flex: none; }
.plan-parts li.muted::before { display: none; }
.plan-parts small { margin-left: auto; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-block { background: var(--bg-surface); }
.review { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin: 20px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-inner); }
.review dt { color: var(--text-muted); }
.review dd { margin: 0; font-weight: 500; }

/* ---------- LinkedIn ---------- */
.outreach-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.counter { padding: 16px 20px; border-left: 1px solid var(--border); }
.counter:first-child { border-left: 0; }
.counter-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.counter-met { margin-left: auto; }
.counter-value { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 12px; color: var(--text-muted); }
.counter-value b { font-size: 32px; line-height: 36px; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.counter-btns { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity var(--fast) var(--ease-out); }
.counter:hover .counter-btns, .counter:focus-within .counter-btns { opacity: 1; }
.counter-btns .icon-btn { border: 1px solid var(--border); background: var(--bg-surface); }
.counter-bar { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
.counter-bar i { height: 4px; border-radius: var(--r-full); background: var(--bg-muted); transition: background-color var(--base) var(--ease-out); }
.counter-bar i.on { background: var(--text-primary); }
.counter-bar.is-met i.on { background: var(--chart-green); }
@media (hover: none) { .counter-btns { opacity: 1; } }

.pipeline { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; margin: 16px -28px 0; padding: 0 28px 8px; }
.pcol { flex: 0 0 216px; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-shell); }
.pcol-end { opacity: 0.85; }
.pcol-head { padding: 6px 6px 2px; }
.pcol-head p { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.pcol-head b { color: var(--text-primary); font-weight: 600; }
.pcol-head .count { margin-left: auto; }
.pcol-head small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pcol-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.pcol-list:not(:has(.lead, .drag-placeholder)) .kcol-empty { display: block; }
.lead { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--bg-surface); box-shadow: var(--shadow-card); cursor: grab; user-select: none; touch-action: pan-y; transition: border-color var(--fast) var(--ease-out); }
.lead:hover { border-color: var(--border-strong); }
.lead.is-late { border-color: var(--text-negative); box-shadow: 0 0 0 1px var(--text-negative); }
.lead-top { display: flex; align-items: flex-start; gap: 8px; }
.lead-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lead-name b { font-weight: 600; }
.lead-name small { font-size: 12px; color: var(--text-muted); }
.lead-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 12px; color: var(--text-secondary); }
.lead-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.lead-foot > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.post-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; transition: background-color var(--fast) var(--ease-out); }
.post-row:last-child { border-bottom: 0; }
.post-row:hover { background: var(--bg-subtle); }
.post-topic { flex: 1; font-weight: 500; }
.date-tile { display: flex; flex-direction: column; align-items: center; width: 44px; padding: 4px 0; border: 1px solid var(--border); border-radius: var(--r-md); line-height: 16px; flex: none; }
.date-tile small { font-size: 11px; color: var(--text-muted); }
.date-tile b { font-size: 15px; font-weight: 600; line-height: 20px; }
.funnel { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.funnel-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; align-items: center; gap: 12px; font-size: 13px; }
.funnel-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Income and expenses ---------- */
.tbl tfoot td { padding: 14px 12px; border-top: 1px solid var(--border); background: var(--bg-subtle); }
.range-nav-sm { height: 30px; gap: 2px; padding: 0 2px; }
.donut-row { display: flex; align-items: center; gap: 24px; padding: 4px 0 16px; border-bottom: 1px solid var(--border); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.donut-legend li { display: grid; grid-template-columns: 8px auto; column-gap: 8px; align-items: center; }
.donut-legend span { font-size: 12px; color: var(--text-secondary); }
.donut-legend b { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.donut-legend small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.waiting-label { margin: 16px 0 8px; }
.waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.waiting .waiting-text { flex-basis: 100%; }
.waiting .pill { margin-right: auto; }
.waiting:last-child { border-bottom: 0; }
.waiting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.waiting-text b { font-weight: 500; }
.waiting-text small { font-size: 12px; color: var(--text-muted); }
.split-bar { display: flex; gap: 4px; height: 10px; }
.split-bar i { border-radius: var(--r-full); background: var(--c-bar); min-width: 6px; }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.kind { display: flex; gap: 10px; padding: 0 14px; border-left: 1px solid var(--border); min-width: 0; }
.kind:first-child { padding-left: 0; border-left: 0; }
.kind > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kind small { font-size: 12px; color: var(--text-muted); }
.kind b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kind em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.cat-tile-sm { width: 22px; height: 22px; border-radius: var(--r-sm); }
.connects-left b { font-size: 40px; line-height: 48px; font-weight: 500; font-variant-numeric: tabular-nums; }
.connects-bar { margin-top: 10px; }
.connects-bar i.on { background: var(--orange-text); }
.connects-bar.is-low i.on { background: var(--text-negative); }
.renewal { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.renewal > span:nth-child(2) { flex: 1; }
.grow { flex: 1; min-width: 0; }

/* ---------- Buy list (Eisenhower) ---------- */
.matrix { display: grid; grid-template-columns: 24px repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 12px 16px; }
.axis { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.axis-top:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.axis-top:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.axis-side { writing-mode: vertical-rl; transform: rotate(180deg); grid-column: 1; align-self: start; padding-bottom: 20px; }
.axis-important { grid-row: 2; }
.axis-not { grid-row: 3; }
.quad-iu { grid-column: 2; grid-row: 2; } .quad-in { grid-column: 3; grid-row: 2; }
.quad-nu { grid-column: 2; grid-row: 3; } .quad-nn { grid-column: 3; grid-row: 3; }
.quad { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-bar) 70%, white); padding: 4px; }
.quad-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; color: var(--c-text); }
.quad-head > .i { margin-top: 2px; }
.quad-title { flex: 1; display: flex; flex-direction: column; }
.quad-title b { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.quad-title small, .quad-total small { font-size: 12px; }
.quad-total { display: flex; flex-direction: column; align-items: flex-end; }
.quad-total b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.quad-total small { color: var(--text-muted); }
.quad-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: 1; background: var(--bg-surface); border-radius: var(--r-inner); border: 1px solid var(--border); min-height: 80px; }
.buy { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); cursor: grab; user-select: none; touch-action: pan-y; transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out); }
.buy:hover { border-color: var(--border-strong); }
.buy-grip { color: var(--text-muted); }
.buy-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buy-text b { font-weight: 600; }
.buy-text small { font-size: 12px; color: var(--text-muted); }
.buy.is-leaving { opacity: 0; transform: translateX(12px); }

/* ---------- Figma projects ---------- */
.project-cell { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; text-align: left; }
.project-cell .cat-tile { width: 36px; height: 36px; }
.project-cell:hover .cell-title { text-decoration: underline; text-underline-offset: 3px; }
.progress-cell .segbar { margin-top: 6px; }
.min-0 { min-width: 0; display: flex; flex-direction: column; }
.mt-4 { margin-top: 4px; }
.recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.recent-file { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.recent-thumb { position: relative; display: block; height: 96px; border-radius: var(--r-inner); background: var(--c-bg); overflow: hidden; transition: transform var(--base) var(--ease-out); }
.recent-file:hover .recent-thumb { transform: translateY(-2px); }
.recent-thumb i { position: absolute; left: 14px; top: 16px; width: 38%; height: 54%; border-radius: var(--r-md); background: #fff; }
.recent-thumb b { position: absolute; left: calc(38% + 28px); top: 22px; width: 30%; height: 6px; border-radius: var(--r-full); background: var(--c-bar); }
.recent-thumb b + b { top: 36px; width: 20%; }
.recent-name { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.recent-name b { font-weight: 600; }
.recent-file small { font-size: 12px; color: var(--text-muted); padding-left: 20px; }

/* ---------- Analytics ---------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin: -4px 0 20px; }
.tabs a { position: relative; padding: 8px 0 12px; color: var(--text-muted); font-weight: 500; transition: color var(--fast); }
.tabs a:hover { color: var(--text-primary); }
.tabs a.is-active { color: var(--text-primary); }
.tabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text-primary); }
.kpi-table td:first-child { color: var(--text-secondary); width: 90px; }
.kpi-table th { background: var(--bg-accent-soft); color: var(--text-primary); }
.donut-row-plain { border: 0; justify-content: center; gap: 28px; padding: 20px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 120px; }
.legend-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.legend-list b { margin-left: auto; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot-ink { background: var(--chart-ink); } .dot-peri { background: var(--chart-periwinkle); } .dot-steel { background: var(--chart-steel); }
.dot-mint { background: var(--chart-mint); } .dot-rose { background: var(--chart-rose); }
.c-steel { --c-bar: var(--chart-steel); }
.seg-orange { background: var(--orange-bar); } .seg-purple { background: var(--purple-bar); }
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13px; }
.hbar-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar-row b small { font-weight: 400; }
.hbar-row .bar { grid-column: 1 / -1; }
.diverge { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.diverge-row { display: grid; grid-template-columns: 90px 1fr 1fr; align-items: center; font-size: 13px; }
.diverge-left, .diverge-right { display: flex; align-items: center; gap: 6px; height: 20px; }
.diverge-left { justify-content: flex-end; border-right: 1px solid var(--border-strong); padding-right: 4px; }
.diverge-right { padding-left: 4px; }
.diverge-left i, .diverge-right i { display: block; height: 16px; width: var(--w); max-width: 80%; border-radius: var(--r-full); }
.diverge-left i { background: var(--chart-steel); order: 2; }
.diverge-left small { order: 1; }
.diverge-right i { background: var(--chart-mint); }
.diverge small { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.workload { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.workload-row { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 8px; font-size: 13px; }
.workload-row b { font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.workload .hstack { height: 16px; }
.net { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; }
.net b { display: block; font-size: 16px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

@media print {
  .side, .topbar, .page-head .actions, .tabs, .toasts { display: none !important; }
  .app { display: block; }
  .main { margin: 0; border: 0; box-shadow: none; }
  .card { break-inside: avoid; }
}

/* ---------- Settings ---------- */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-nav { position: sticky; top: 16px; padding: 6px; gap: 2px; }
.settings .card { scroll-margin-top: 16px; }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-edit { display: flex; flex-direction: column; gap: 8px; }
.ce { display: grid; grid-template-columns: minmax(0, 1fr) 120px 170px 28px; gap: 8px; align-items: center; }
.ce input, .ce select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 10px; background: var(--bg-surface); outline: 0; min-width: 0; }
.ce input:focus, .ce select:focus { border-color: var(--border-accent); box-shadow: var(--ring); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; text-align: right; font-weight: 500; }
.facts dd .pill { float: right; }

/* ---------- Help ---------- */
.help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.help p, .help li { color: var(--text-secondary); }
.help ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }

/* ---------- Page transitions ---------- */
.page-enter { animation: fade-in 140ms var(--ease-out); }
@view-transition { navigation: auto; }
::view-transition-group(side) { animation: none; }
::view-transition-old(page) { animation: fade-out 90ms var(--ease-in) both; }
::view-transition-new(page) { animation: fade-in 160ms var(--ease-out) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main, .grid-side, .sched, .goals, .wizard-body, .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { display: none; }
  .search { width: 240px; }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; z-index: 60; left: 0; top: 0; width: 272px;
    background: var(--bg-canvas); box-shadow: var(--shadow-menu);
    transform: translateX(-105%); transition: transform var(--base) var(--ease-out);
  }
  .side.is-open { transform: none; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--bg-scrim); opacity: 0; pointer-events: none; transition: opacity var(--base) var(--ease-out); }
  .side.is-open + .side-scrim { opacity: 1; pointer-events: auto; }
  .main { margin: 8px; }
  .topbar { padding: 0 12px; }
  .topbar-menu { display: inline-grid; }
  .auth { grid-template-columns: 1fr; }
  .auth-preview { display: none; }
}
@media (max-width: 720px) {
  .outreach-grid, .goal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search span, .search kbd { display: none; }
  .search { width: 40px; padding: 0; justify-content: center; }
  .clock { display: none; }
  .page { padding: 16px; }
  .grid-4, .grid-3, .grid-2, .form-grid, .form-grid-3, .form-grid-4, .options, .kinds, .help { grid-template-columns: minmax(0, 1fr); }
  .ce { grid-template-columns: minmax(0, 1fr) 28px; }
  .ce select { grid-column: 1; }
  .matrix { grid-template-columns: minmax(0, 1fr); }
  .recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix .axis { display: none; }
  .quad-iu, .quad-in, .quad-nu, .quad-nn { grid-column: 1; grid-row: auto; }
  .kind { padding: 0; border: 0; }
  .topbar h1 { font-size: 20px; }
  .board, .pipeline { margin-inline: -16px; padding-inline: 16px; }
  .part { grid-template-columns: 20px 24px minmax(0, 1fr) 64px; }
  .part .bar, .part-when { display: none; }
  .page-head .actions { width: 100%; }
  .donut-row { flex-direction: column; align-items: flex-start; }
}