/* ==========================================================================
   AIDE design system — derived from the Productboard web app.
   Companion to docs/design-system.md.

   Provenance: layout, components and behaviour observed on ~60 Productboard
   app screens (Mobbin); colour, type, spacing, radius, shadow and motion
   values read from Productboard's own CSS custom properties shipped in its
   app bundle (cdn.productboard.com/apps/signup/assets/signup-*.css).
   Light-only by design: the reference product ships a single light theme.
   ========================================================================== */

/* ---------- 1. Primitive tokens (verbatim Productboard values) --------- */
:root {
  /* Type — Productboard uses Proxima Nova (Adobe Fonts). Mulish is the
     closest Google-hosted stand-in when the kit isn't licensed. */
  --font-sans: "proxima-nova", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-tiny: 10px;    --lh-tiny: 16px;     /* column-group headers, field labels */
  --text-small: 12px;   --lh-small: 16px;    /* tabs, section labels, meta, sm buttons */
  --text-medium: 13px;  --lh-medium: 16px;   /* dense rows, cards, table cells */
  --text-default: 14px; --lh-default: 24px; --lh-default-compact: 20px; /* body, inputs, buttons */
  --text-large: 16px;   --lh-large: 24px;    /* panel titles */
  --heading-5: 14px;  --lh-heading-5: 20px;
  --heading-4: 16px;  --lh-heading-4: 24px;
  --heading-3: 20px;  --lh-heading-3: 24px;  /* sidebar / drawer headings */
  --heading-2: 24px;  --lh-heading-2: 28px;  /* page titles ("Members") */
  --heading-1: 30px;  --lh-heading-1: 36px;
  --heading-page: 36px; --lh-heading-page: 40px;
  --heading-eyebrow: 12px; --lh-heading-eyebrow: 16px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-caps: 0.05em;

  /* Neutral (cool grey) */
  --neutral-100: #f8fafb;
  --neutral-200: #f2f5f7;
  --neutral-300: #e1e6ea;
  --neutral-400: #d4dbe1;
  --neutral-500: #bcc4cc;
  --neutral-600: #939da7;
  --neutral-700: #68707b;
  --neutral-800: #30363c;
  --neutral-900: #202428;
  --white: #ffffff;

  /* Midnight (navy-tinted neutrals: coachmarks, overlays, dark surfaces) */
  --midnight-50: #fafafb; --midnight-100: #ebecef; --midnight-200: #e0e2e5; --midnight-300: #cdcfd5;
  --midnight-400: #b3b7c1; --midnight-500: #9da1ae; --midnight-600: #7e8494; --midnight-700: #5f677b;
  --midnight-800: #2b334a; --midnight-900: #000c2c;

  /* Primary blue */
  --blue-50: #f1f8fe; --blue-100: #e2effd; --blue-200: #cce4fc; --blue-300: #94c7fa; --blue-400: #68b4ff;
  --blue-500: #2693ff; --blue-600: #0079f2; --blue-700: #0566c6; --blue-800: #084e9f; --blue-900: #004390;

  /* Hue scales (50 / 100 / 300 / 500 / 700 / 900 kept; full scales in the doc) */
  --green-50: #f0fde8;  --green-100: #dbf7ba;  --green-300: #96e421;  --green-400: #79ce17; --green-500: #5ec200; --green-700: #408500; --green-900: #204e03;
  --yellow-50: #fef7e1; --yellow-100: #ffedad; --yellow-300: #ffd659; --yellow-400: #ffc600; --yellow-500: #fab500; --yellow-700: #9b6b00; --yellow-900: #643602;
  --red-50: #fef0f0;    --red-100: #ffdbdb;    --red-300: #ffa8a8;    --red-400: #ff8585; --red-500: #ff4747; --red-600: #ff1f1f; --red-700: #f00000; --red-900: #ad0003;
  --orange-50: #fff5eb; --orange-100: #fee4cd; --orange-300: #fbb06f; --orange-400: #fb8f37; --orange-500: #fa7414; --orange-600: #dc5004; --orange-900: #6b2b00;
  --lime-50: #f3fbdf;   --lime-100: #e6f6b1;   --lime-300: #b9de26;   --lime-400: #a7d308; --lime-500: #90b607; --lime-900: #333b12;
  --teal-50: #e5fffa;   --teal-100: #c9fcf4;   --teal-300: #4dead5;   --teal-400: #18e2cc; --teal-500: #15c6b3; --teal-900: #034f4c;
  --purple-50: #f6f1fe; --purple-100: #eee5fe; --purple-300: #ccacfc; --purple-400: #bc80f9; --purple-500: #9c46f1; --purple-600: #8a25ee; --purple-900: #4f0a94;
  --pink-50: #fdedf8;   --pink-100: #fbddf1;   --pink-300: #f7a1dd;   --pink-500: #eb3db3; --pink-600: #d9169b; --pink-900: #7b0957;

  /* Spacing (Productboard's scale, named by pixel) */
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-44: 44px; --space-56: 56px; --space-72: 72px;

  /* Control sizes */
  --size-nano: 20px; --size-tiny: 24px; --size-small: 28px; --size-medium: 36px; --size-large: 44px; --size-xlarge: 60px;
  --icon-12: 12px; --icon-16: 16px; --icon-20: 20px; --icon-24: 24px;

  /* Radii */
  --radius-small: 2px;
  --radius-default: 4px;   /* buttons, inputs, chips, tags */
  --radius-large: 8px;     /* cards, menus, popovers, modals, banners */
  --radius-xlarge: 12px;
  --radius-rounded: 100px; /* pills, avatars, toggles */

  /* Elevation */
  --shadow-1: 0 1px 2px #3f474f26;
  --shadow-2: 0 4px 10px #3f474f26;
  --shadow-3: 0 10px 20px #3f474f26;
  --shadow-4: 0 20px 30px #3f474f26;
  --shadow-focus: 0 0 0 2px #94c7fa;
  --shadow-focus-outlined: 0 0 0 1px #fff, 0 0 0 3px #94c7fa;
  --shadow-field: 0 0 0 2px transparent, inset 0 0 0 1px #d4dbe1;
  --shadow-field-hover: 0 0 0 2px transparent, inset 0 0 0 1px #bcc4cc;
  --shadow-field-focus: 0 0 0 2px #94c7fa, inset 0 0 0 1px #e1e6ea;
  --shadow-field-error: 0 0 0 2px transparent, inset 0 0 0 1px #ff1f1f;

  /* Motion */
  --transition-instant: 100ms ease;
  --transition-fast: 200ms ease;
  --transition-medium: 400ms ease;
  --transition-slow: 700ms ease;

  /* Breakpoints (for reference; CSS can't read vars in media queries) */
  --bp-tablet: 768px; --bp-desktop-small: 1024px; --bp-desktop: 1280px; --bp-desktop-hd: 1440px;

  /* Layout */
  --sidebar-w: 240px;
  --settings-nav-w: 200px;
  --drawer-w: 44%;
  --row-h: 36px;
  --indent: 18px;
  --disabled-opacity: 0.4;
}

/* ---------- 2. Semantic tokens ----------------------------------------- */
:root {
  --bg-primary:   var(--white);        /* main working surface */
  --bg-secondary: var(--neutral-200);  /* grey canvas: settings, kanban columns */
  --bg-mid:       var(--neutral-100);  /* sidebar, toolbar chips, hover */
  --bg-hover:     var(--neutral-200);
  --bg-selected:  var(--blue-100);     /* selected row / active nav */
  --bg-selected-hover: var(--blue-200);
  --bg-inverse:   var(--midnight-900); /* toasts, tooltips, coachmarks */
  --bg-overlay:   #30363c99;           /* modal backdrop */

  --border-low:  var(--neutral-300);   /* dividers, table rules */
  --border-high: var(--neutral-400);   /* inputs, secondary buttons */

  --fg-high:    var(--neutral-900);    /* headings */
  --fg-base:    var(--neutral-800);    /* body */
  --fg-2:       var(--neutral-700);    /* secondary */
  --fg-3:       var(--neutral-600);    /* muted / placeholders / labels */
  --fg-4:       var(--neutral-500);    /* disabled */
  --fg-inverse: var(--white);
  --fg-link:    var(--blue-600);

  --cta: var(--blue-500);
  --cta-hover: var(--blue-600);
  --cta-soft: var(--blue-100);
  --focus-ring: var(--blue-300);

  --negative: var(--red-600);  --negative-hover: var(--red-700);  --negative-soft: var(--red-50);
  --positive: var(--green-500); --positive-hover: #51a800;        --positive-soft: var(--green-50);
  --warning: var(--orange-600); --warning-hover: var(--orange-500); --warning-soft: var(--orange-50);
  --info: var(--blue-600);      --info-hover: var(--blue-700);     --info-soft: var(--blue-100);
  --premium: var(--yellow-400);

  /* Status palette: base fill + "on" text colour for chips */
  --status-blue: #2693ff;    --on-status-blue: #fff;
  --status-yellow: #ffc600;  --on-status-yellow: #643602;
  --status-green: #79ce17;   --on-status-green: #204e03;
  --status-teal: #18e2cc;    --on-status-teal: #034f4c;
  --status-lime: #b9de26;    --on-status-lime: #333b12;
  --status-orange: #fb8f37;  --on-status-orange: #6b2b00;
  --status-red: #ff4747;     --on-status-red: #fff;
  --status-purple: #9c46f1;  --on-status-purple: #fff;
  --status-pink: #eb3db3;    --on-status-pink: #fff;
  --status-gray: #d4dbe1;    --on-status-gray: #30363c;
  --status-neutral: #7e8494; --on-status-neutral: #fff;

  /* Feature lifecycle mapping (Productboard's default statuses) */
  --status-idea: var(--status-teal);
  --status-candidate: var(--status-purple);
  --status-planned: var(--status-blue);
  --status-progress: var(--status-yellow);
  --status-released: var(--status-green);
  --status-blocked: var(--status-red);
  --status-none: var(--status-gray);

  /* Data bars */
  --bar-value: var(--blue-500);
  --bar-objective: var(--orange-400);
  --bar-track: var(--neutral-300);
}

/* ---------- 3. Base -------------------------------------------------- */
.ds, .ds * { box-sizing: border-box; }
.ds {
  font-family: var(--font-sans);
  font-size: var(--text-default);
  line-height: var(--lh-default-compact);
  color: var(--fg-base);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds a { color: var(--fg-link); text-decoration: none; }
.ds a:hover { text-decoration: underline; }
.ds :focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds svg { display: inline-block; vertical-align: middle; }

/* Type roles */
.ds .t-page { font-size: var(--heading-2); line-height: var(--lh-heading-2); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .t-section { font-size: var(--heading-3); line-height: var(--lh-heading-3); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .t-title { font-size: var(--heading-4); line-height: var(--lh-heading-4); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .t-subtitle { font-size: var(--heading-5); line-height: var(--lh-heading-5); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .t-body { font-size: var(--text-default); line-height: var(--lh-default); }
.ds .t-default { font-size: var(--text-default); line-height: var(--lh-default-compact); }
.ds .t-dense { font-size: var(--text-medium); line-height: var(--lh-medium); }
.ds .t-small { font-size: var(--text-small); line-height: var(--lh-small); color: var(--fg-2); }
.ds .t-meta { font-size: var(--text-small); line-height: var(--lh-small); color: var(--fg-3); }
.ds .t-caps { font-size: var(--text-tiny); line-height: var(--lh-tiny); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.ds .t-eyebrow { font-size: var(--heading-eyebrow); line-height: var(--lh-heading-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.ds .t-mono { font-family: var(--font-mono); font-size: var(--text-small); }

/* ---------- 4. Buttons ------------------------------------------------ */
.ds .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6);
  height: var(--size-small); padding: 0 var(--space-12);
  font: inherit; font-size: var(--text-medium); font-weight: var(--weight-semibold); line-height: 1;
  border-radius: var(--radius-default); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--transition-instant), border-color var(--transition-instant), color var(--transition-instant), box-shadow var(--transition-instant);
}
.ds .btn svg { width: var(--icon-16); height: var(--icon-16); flex: none; }
.ds .btn:focus-visible { box-shadow: var(--shadow-focus-outlined); }
.ds .btn-primary { background: var(--cta); color: var(--fg-inverse); }
.ds .btn-primary:hover { background: var(--cta-hover); }
.ds .btn-secondary { background: var(--bg-primary); color: var(--fg-base); border-color: var(--border-high); }
.ds .btn-secondary:hover { background: var(--bg-mid); border-color: var(--neutral-500); }
.ds .btn-ghost { background: transparent; color: var(--fg-2); }
.ds .btn-ghost:hover { background: var(--bg-hover); color: var(--fg-high); }
.ds .btn-danger { background: var(--negative); color: var(--fg-inverse); }
.ds .btn-danger:hover { background: var(--negative-hover); }
.ds .btn-danger-outline { background: var(--bg-primary); color: var(--negative); border-color: var(--border-high); }
.ds .btn-danger-outline:hover { background: var(--negative-soft); }
.ds .btn-tiny { height: var(--size-tiny); padding: 0 var(--space-8); font-size: var(--text-small); }
.ds .btn-md { height: var(--size-medium); padding: 0 var(--space-16); font-size: var(--text-default); }
.ds .btn-lg { height: var(--size-large); padding: 0 var(--space-20); font-size: var(--text-default); }
.ds .btn-icon { width: var(--size-small); padding: 0; }
.ds .btn-icon.btn-tiny { width: var(--size-tiny); }
.ds .btn[disabled], .ds .btn.is-disabled { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; }
.ds .btn-split { display: inline-flex; }
.ds .btn-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ds .btn-split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 var(--space-6); border-left: 1px solid rgba(255,255,255,0.3); }
.ds .fab {
  width: 40px; height: 40px; border-radius: var(--radius-rounded); border: 0;
  background: var(--cta); color: var(--fg-inverse); box-shadow: 0 4px 12px #2693ff66;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; line-height: 1;
}
.ds .fab:hover { background: var(--cta-hover); }
.ds .help-bubble {
  width: 24px; height: 24px; border-radius: var(--radius-rounded); border: 0;
  background: var(--neutral-800); color: var(--fg-inverse); font-size: var(--text-small); font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 5. Inputs ------------------------------------------------- */
.ds .input, .ds .select, .ds .textarea {
  display: block; width: 100%; height: var(--size-small); padding: 0 var(--space-8);
  font: inherit; font-size: var(--text-medium); color: var(--fg-base);
  background: var(--bg-primary); border: 0; border-radius: var(--radius-default);
  box-shadow: var(--shadow-field);
  transition: box-shadow var(--transition-instant);
}
.ds .input-md, .ds .select-md { height: var(--size-medium); padding: 0 var(--space-12); font-size: var(--text-default); }
.ds .input::placeholder, .ds .textarea::placeholder { color: var(--fg-3); }
.ds .input:hover, .ds .select:hover, .ds .textarea:hover { box-shadow: var(--shadow-field-hover); }
.ds .input:focus, .ds .select:focus, .ds .textarea:focus { outline: none; box-shadow: var(--shadow-field-focus); }
.ds .input.is-error, .ds .textarea.is-error, .ds .input.is-error:focus { box-shadow: var(--shadow-field-error); }
.ds .input[disabled], .ds .select[disabled], .ds .textarea[disabled] { opacity: var(--disabled-opacity); background: var(--bg-mid); }
.ds .textarea { height: auto; min-height: 96px; padding: var(--space-8) var(--space-12); resize: vertical; line-height: var(--lh-default-compact); }
.ds .select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2368707b' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.ds .field { display: flex; flex-direction: column; gap: var(--space-6); }
.ds .field > label { font-size: var(--text-small); line-height: var(--lh-small); font-weight: var(--weight-semibold); color: var(--fg-base); }
.ds .field .hint { font-size: var(--text-small); color: var(--fg-3); }
.ds .field .error { font-size: var(--text-small); color: var(--negative); }
.ds .field.is-inline { flex-direction: row; align-items: center; gap: var(--space-12); }
.ds .field.is-inline > label { min-width: 96px; font-size: var(--text-tiny); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }

/* Search: outlined (top bar) and filled (sidebar) */
.ds .search { position: relative; }
.ds .search .input { padding-left: 30px; }
.ds .search::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23939da7' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5L13 13'/%3E%3C/svg%3E") no-repeat center;
}
.ds .search.is-filled .input { background: var(--neutral-200); box-shadow: none; }
.ds .search.is-filled .input:hover { background: var(--neutral-300); }
.ds .search.is-filled .input:focus { background: var(--bg-primary); box-shadow: var(--shadow-field-focus); }

/* Toggle */
.ds .toggle { position: relative; display: inline-block; width: 32px; height: 18px; flex: none; }
.ds .toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds .toggle .track { position: absolute; inset: 0; background: var(--neutral-500); border-radius: var(--radius-rounded); transition: background var(--transition-instant); cursor: pointer; }
.ds .toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--transition-instant); }
.ds .toggle input:checked + .track { background: var(--cta); }
.ds .toggle input:checked + .track::after { transform: translateX(14px); }
.ds .toggle input:focus-visible + .track { box-shadow: var(--shadow-focus); }
.ds .toggle input:disabled + .track { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* Checkbox (square, lists) · radio · check-circle (round, table cells) */
.ds .checkbox, .ds .radio { display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; font-size: var(--text-medium); }
.ds .checkbox input, .ds .radio input { appearance: none; margin: 0; width: 14px; height: 14px; border: 1px solid var(--border-high); background: var(--bg-primary); flex: none; cursor: pointer; transition: all var(--transition-instant); }
.ds .checkbox input { border-radius: 3px; }
.ds .radio input { border-radius: 50%; }
.ds .checkbox input:hover, .ds .radio input:hover { border-color: var(--neutral-500); }
.ds .checkbox input:checked, .ds .radio input:checked { background: var(--cta); border-color: var(--cta); }
.ds .checkbox input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5'/%3E%3C/svg%3E"); }
.ds .radio input:checked { box-shadow: inset 0 0 0 3px #fff; }
.ds .check-circle { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-high); background: var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; }
.ds .check-circle.is-on { background: var(--cta); border-color: var(--cta); }
.ds .check-circle.is-on::after { content: ""; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }

/* ---------- 6. Navigation --------------------------------------------- */
.ds .tabs { display: flex; gap: var(--space-24); border-bottom: 1px solid var(--border-low); }
.ds .tab {
  padding: 10px 0 8px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3);
}
.ds .tab:hover { color: var(--fg-high); }
.ds .tab.is-active { color: var(--cta); border-bottom-color: var(--cta); }
.ds .tabs.is-centered .tab { flex: 1; text-align: center; }

.ds .seg { display: inline-flex; background: var(--neutral-200); border-radius: var(--radius-rounded); padding: 2px; }
.ds .seg button { border: 0; background: none; padding: 4px 12px; border-radius: var(--radius-rounded); font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--fg-2); cursor: pointer; }
.ds .seg button.is-active { background: var(--bg-primary); color: var(--cta); box-shadow: var(--shadow-1); }

.ds .chip { display: inline-flex; align-items: center; gap: var(--space-6); height: var(--size-small); padding: 0 var(--space-8); border-radius: var(--radius-default); border: 1px solid transparent; background: transparent; font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--fg-2); cursor: pointer; }
.ds .chip svg { width: 14px; height: 14px; }
.ds .chip:hover { background: var(--bg-hover); color: var(--fg-high); }
.ds .chip.is-active { background: var(--cta-soft); color: var(--cta-hover); }
.ds .chip.is-outlined { border-color: var(--border-low); background: var(--bg-primary); }

.ds .breadcrumb { display: flex; align-items: center; gap: var(--space-6); font-size: var(--text-medium); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .breadcrumb .sep { color: var(--fg-3); font-weight: var(--weight-regular); }
.ds .breadcrumb .star { color: var(--fg-3); }

/* Sidebar nav */
.ds .nav { display: flex; flex-direction: column; gap: 1px; }
.ds .nav-section { padding: var(--space-16) var(--space-8) var(--space-4); display: flex; align-items: center; justify-content: space-between; }
.ds .nav-item, .ds a.nav-item {
  display: flex; align-items: center; gap: var(--space-8); height: var(--size-small); padding: 0 var(--space-8); border-radius: var(--radius-default);
  color: var(--fg-base); font-size: var(--text-medium); font-weight: var(--weight-medium); cursor: pointer; text-decoration: none;
}
.ds .nav-item svg { width: var(--icon-16); height: var(--icon-16); color: var(--fg-2); flex: none; }
.ds .nav-item:hover { background: var(--bg-hover); text-decoration: none; }
.ds .nav-item.is-active, .ds a.nav-item.is-active { background: var(--cta-soft); color: var(--cta-hover); }
.ds .nav-item.is-active svg { color: var(--cta-hover); }
.ds .nav-item .count { margin-left: auto; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--fg-3); }
.ds .nav-item.is-nested { padding-left: 26px; }
.ds .nav-item.is-nested-2 { padding-left: 44px; }

/* Settings nav (secondary column) */
.ds .settings-nav { display: flex; flex-direction: column; gap: 2px; }
.ds .settings-nav a { display: flex; align-items: center; gap: var(--space-8); height: var(--size-small); padding: 0 var(--space-8); border-radius: var(--radius-default); font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-2); }
.ds .settings-nav a svg { width: 14px; height: 14px; }
.ds .settings-nav a.is-active { color: var(--cta-hover); }
.ds .settings-nav a:hover { text-decoration: none; background: var(--bg-hover); }
.ds .settings-nav hr { border: 0; border-top: 1px solid var(--border-low); margin: var(--space-8) 0; }

/* ---------- 7. Indicators --------------------------------------------- */
.ds .badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--space-8); border-radius: var(--radius-rounded);
  font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.ds .badge-idea { background: var(--status-teal);   color: var(--on-status-teal); }
.ds .badge-candidate { background: var(--status-purple); color: var(--on-status-purple); }
.ds .badge-planned { background: var(--status-blue);   color: var(--on-status-blue); }
.ds .badge-progress { background: var(--status-yellow); color: var(--on-status-yellow); }
.ds .badge-released { background: var(--status-green);  color: var(--on-status-green); }
.ds .badge-blocked { background: var(--status-red);    color: var(--on-status-red); }
.ds .badge-none { background: var(--status-gray);   color: var(--on-status-gray); }
.ds .badge-neutral { background: var(--status-neutral); color: var(--on-status-neutral); }
.ds .badge.is-soft.badge-idea { background: var(--teal-100);   color: var(--teal-900); }
.ds .badge.is-soft.badge-candidate { background: var(--purple-100); color: var(--purple-900); }
.ds .badge.is-soft.badge-planned { background: var(--blue-100);   color: var(--blue-900); }
.ds .badge.is-soft.badge-progress { background: var(--yellow-100); color: var(--yellow-900); }
.ds .badge.is-soft.badge-released { background: var(--green-100);  color: var(--green-900); }
.ds .badge.is-soft.badge-blocked { background: var(--red-100);    color: var(--red-900); }
.ds .badge.is-soft.badge-none { background: var(--neutral-200); color: var(--fg-2); }
.ds .badge-premium { background: var(--yellow-100); color: var(--yellow-900); }

.ds .tag { display: inline-flex; align-items: center; gap: var(--space-4); height: 20px; padding: 0 var(--space-8); border-radius: var(--radius-default); background: var(--neutral-200); color: var(--fg-2); font-size: var(--text-small); }
.ds .tag.is-add { background: transparent; border: 1px dashed var(--border-high); color: var(--fg-3); cursor: pointer; }
.ds .tag.is-add:hover { border-color: var(--neutral-500); color: var(--fg-2); }

.ds .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; vertical-align: middle; }
.ds .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ds .dot-list { display: inline-flex; gap: 3px; }
.ds .dot-list .dot { background: var(--neutral-400); width: 6px; height: 6px; }
.ds .dot-list .dot.is-on { background: var(--cta); }

.ds .avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-bold); color: #fff; background: var(--neutral-600); flex: none; letter-spacing: 0; }
.ds .avatar-sm { width: 18px; height: 18px; font-size: 8px; }
.ds .avatar-lg { width: 36px; height: 36px; font-size: 13px; }
.ds .avatar-rose { background: #f0788f; } .avatar-blue { background: var(--blue-400); } .avatar-teal { background: var(--teal-400); color: var(--teal-900); } .avatar-amber { background: var(--yellow-300); color: var(--yellow-900); } .avatar-slate { background: var(--midnight-600); } .avatar-pending { background: var(--neutral-300); color: var(--fg-3); }

.ds .progress { display: inline-block; vertical-align: middle; width: 100%; height: 4px; border-radius: 2px; background: var(--bar-track); overflow: hidden; }
.ds .progress > span { display: block; height: 100%; background: var(--bar-value); border-radius: 2px; }
.ds .bar-cell { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--text-small); }
.ds .bar-cell .num { font-weight: var(--weight-bold); min-width: 14px; text-align: right; color: var(--fg-high); }
.ds .bar-cell .bar { width: 36px; height: 3px; background: var(--bar-track); border-radius: 2px; overflow: hidden; }
.ds .bar-cell .bar > span { display: block; height: 100%; background: var(--bar-value); }
.ds .bar-cell.is-objective .bar > span { background: var(--bar-objective); }

.ds .spinner { width: 14px; height: 14px; border: 2px solid var(--blue-200); border-top-color: var(--cta); border-radius: 50%; animation: ds-spin 0.8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- 8. Surfaces ---------------------------------------------- */
.ds .card { background: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-1); }
.ds .card.is-outlined { box-shadow: none; border: 1px solid var(--border-low); }
.ds .card-pad { padding: var(--space-16); }
.ds .card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-16); }
.ds .card-head .t-title { font-size: var(--heading-5); line-height: var(--lh-heading-5); }

.ds .stat { background: var(--bg-primary); border-radius: var(--radius-large); border: 1px solid var(--border-low); padding: var(--space-12) var(--space-16); }
.ds .stat .label { font-size: var(--text-medium); font-weight: var(--weight-semibold); color: var(--fg-high); display: flex; align-items: center; gap: var(--space-4); }
.ds .stat .value { font-size: var(--heading-2); line-height: var(--lh-heading-2); font-weight: var(--weight-bold); color: var(--fg-high); margin-top: 2px; white-space: nowrap; }
.ds .stat .meta { display: block; font-size: var(--text-tiny); line-height: var(--lh-tiny); color: var(--fg-3); font-weight: var(--weight-regular); }

.ds .panel-section { padding: var(--space-12) 0; border-top: 1px solid var(--border-low); }
.ds .panel-row { display: flex; align-items: center; gap: var(--space-8); min-height: var(--size-small); }
.ds .panel-row .label { display: flex; align-items: center; gap: var(--space-6); min-width: 110px; font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.ds .panel-row .label svg { width: 14px; height: 14px; }
.ds .panel-row .value { display: flex; align-items: center; gap: var(--space-8); flex: 1; min-width: 0; font-size: var(--text-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .panel-row .action { margin-left: auto; flex: none; white-space: nowrap; }

.ds .banner { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-large); background: var(--cta); color: #fff; font-size: var(--text-small); line-height: var(--lh-small); }
.ds .banner strong { display: block; font-size: var(--text-medium); font-weight: var(--weight-bold); margin-bottom: var(--space-4); }
.ds .banner .close { margin-left: auto; opacity: .7; cursor: pointer; background: none; border: 0; color: inherit; font-size: 14px; }
.ds .banner-neutral { background: var(--bg-secondary); color: var(--fg-base); }
.ds .banner-warning { background: var(--warning-soft); color: var(--orange-900); }
.ds .banner-negative { background: var(--negative-soft); color: var(--red-900); }

.ds .toast { display: inline-flex; align-items: center; gap: var(--space-12); padding: 10px var(--space-16); border-radius: var(--radius-large); background: var(--neutral-800); color: var(--fg-inverse); font-size: var(--text-small); box-shadow: var(--shadow-3); }
.ds .toast .close { opacity: .7; cursor: pointer; background: none; border: 0; color: inherit; }
.ds .tooltip { display: inline-block; padding: 4px 8px; border-radius: var(--radius-default); background: var(--neutral-800); color: var(--fg-inverse); font-size: var(--text-small); line-height: var(--lh-small); white-space: nowrap; }
.ds .tooltip-danger { background: var(--status-red); }
.ds .coachmark { background: var(--midnight-900); color: var(--midnight-200); border-radius: var(--radius-large); padding: var(--space-16); box-shadow: 0 4px 32px #000c2c14; font-size: var(--text-medium); }
.ds .coachmark strong { color: #fff; display: block; margin-bottom: var(--space-4); }

.ds .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); padding: var(--space-44) var(--space-24); }
.ds .empty .art { width: 120px; height: 84px; border-radius: var(--radius-large); background: var(--neutral-200); margin-bottom: var(--space-8); }
.ds .empty .title { font-size: var(--heading-5); font-weight: var(--weight-bold); color: var(--fg-high); }
.ds .empty .sub { font-size: var(--text-small); color: var(--fg-3); max-width: 320px; }
.ds .empty .btn { margin-top: var(--space-8); }

/* ---------- 9. Menus, popovers, modals ------------------------------- */
.ds .menu { min-width: 200px; padding: var(--space-4) 0; background: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-2), 0 0 0 1px #3f474f14; }
.ds .menu-item { display: flex; align-items: center; gap: var(--space-8); height: var(--size-small); padding: 0 var(--space-12); font-size: var(--text-medium); color: var(--fg-base); cursor: pointer; }
.ds .menu-item svg { width: 14px; height: 14px; color: var(--fg-2); }
.ds .menu-item:hover { background: var(--bg-hover); }
.ds .menu-item.is-active { color: var(--cta-hover); }
.ds .menu-item.is-danger { color: var(--negative); }
.ds .menu-item .kbd, .ds .menu-item .chev { margin-left: auto; color: var(--fg-3); font-size: var(--text-small); }
.ds .menu-item .desc { display: block; font-size: var(--text-small); color: var(--fg-3); }
.ds .menu-item.is-rich { height: auto; padding: var(--space-8) var(--space-12); flex-direction: column; align-items: flex-start; gap: 1px; }
.ds .menu-sep { border: 0; border-top: 1px solid var(--border-low); margin: var(--space-4) 0; }
.ds .menu-foot { padding: var(--space-8) var(--space-12); font-size: var(--text-small); color: var(--fg-3); }
.ds .menu-search { padding: var(--space-8) var(--space-8) var(--space-4); }
.ds .menu-search .input { height: var(--size-tiny); font-size: var(--text-small); }

.ds .popover { background: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-2), 0 0 0 1px #3f474f14; padding: var(--space-12); }

.ds .modal-backdrop { background: var(--bg-overlay); }
.ds .modal { background: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-4); width: 100%; max-width: 480px; }
.ds .modal-lg { max-width: 720px; }
.ds .modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-16) 0; }
.ds .modal-head .t-title { font-size: var(--heading-4); }
.ds .modal-head .sub { font-size: var(--text-small); color: var(--fg-3); margin-top: 2px; }
.ds .modal-body { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); }
.ds .modal-foot { display: flex; justify-content: flex-end; gap: var(--space-8); padding: 0 var(--space-16) var(--space-16); }
.ds .modal-foot.is-split { justify-content: space-between; }
.ds .modal.is-centered .modal-head { justify-content: center; padding-top: var(--space-24); }
.ds .modal.is-centered .modal-foot { justify-content: center; }
.ds .modal.is-centered .modal-head .t-title { font-size: var(--heading-3); font-weight: var(--weight-regular); }
.ds .modal .btn { height: var(--size-medium); padding: 0 var(--space-16); font-size: var(--text-default); }
.ds .modal .input, .ds .modal .select { height: var(--size-medium); padding: 0 var(--space-12); font-size: var(--text-default); }

/* ---------- 10. Data display ----------------------------------------- */
.ds .table { width: 100%; border-collapse: collapse; font-size: var(--text-medium); }
.ds .table th { text-align: left; padding: 0 var(--space-12); height: 30px; font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--border-low); white-space: nowrap; }
.ds .table th.is-num, .ds .table td.is-num { text-align: right; }
.ds .table td { padding: 0 var(--space-12); height: var(--row-h); border-bottom: 1px solid var(--neutral-200); vertical-align: middle; }
.ds .table tr:hover td { background: var(--bg-mid); }
.ds .table tr.is-selected td { background: var(--bg-selected); }
.ds .table tr.is-group td { font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .table .cell-title { display: flex; align-items: center; gap: var(--space-8); }
.ds .table .col-head { text-align: center; }
.ds .table .col-head .t-caps { display: block; }
.ds .table .col-head .name { display: block; font-size: var(--text-small); color: var(--fg-base); text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); margin-top: 2px; }

/* Tree rows (Products hierarchy) */
.ds .tree { display: flex; flex-direction: column; }
.ds .tree-row { display: flex; align-items: center; gap: var(--space-6); height: var(--row-h); padding: 0 var(--space-12); border-bottom: 1px solid var(--neutral-200); font-size: var(--text-medium); cursor: pointer; }
.ds .tree-row:hover { background: var(--bg-mid); }
.ds .tree-row.is-selected { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--cta); }
.ds .tree-row.is-selected .name { color: var(--cta-hover); }
.ds .tree-row .chev { width: 14px; height: 14px; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.ds .tree-row .drag { width: 10px; color: var(--neutral-400); font-size: 10px; letter-spacing: -2px; visibility: hidden; }
.ds .tree-row:hover .drag { visibility: visible; }
.ds .tree-row.is-l1 { padding-left: calc(var(--space-12) + var(--indent)); }
.ds .tree-row.is-l2 { padding-left: calc(var(--space-12) + var(--indent) * 2); }
.ds .tree-row.is-l3 { padding-left: calc(var(--space-12) + var(--indent) * 3); }
.ds .tree-row.is-group .name { font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .tree-row .name .hint { color: var(--fg-3); font-weight: var(--weight-regular); }
.ds .tree-row .add { color: var(--fg-3); }

/* List rows (Insights notes) */
.ds .note { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); background: var(--bg-primary); border: 1px solid var(--border-low); border-radius: var(--radius-large); cursor: pointer; }
.ds .note:hover { border-color: var(--border-high); }
.ds .note.is-selected { border-color: var(--blue-300); background: var(--blue-50); }
.ds .note .head { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-small); }
.ds .note .head .who { font-weight: var(--weight-bold); color: var(--fg-high); }
.ds .note .head .meta { color: var(--fg-3); }
.ds .note .head .unread { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--status-red); }
.ds .note .body { font-size: var(--text-small); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kanban / roadmap */
.ds .kanban { display: flex; gap: var(--space-12); align-items: flex-start; }
.ds .kanban-col { flex: 1; min-width: 200px; background: var(--bg-secondary); border-radius: var(--radius-large); padding: var(--space-8); }
.ds .kanban-col .head { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-12); font-size: var(--text-medium); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .kanban-col .head .count { margin-left: auto; color: var(--fg-3); font-size: var(--text-small); font-weight: var(--weight-regular); }
.ds .kcard { background: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-1); padding: var(--space-8) var(--space-12); margin-bottom: var(--space-8); }
.ds .kcard:hover { box-shadow: var(--shadow-2); }
.ds .kcard .title { display: flex; align-items: flex-start; gap: var(--space-8); font-size: var(--text-medium); font-weight: var(--weight-semibold); color: var(--fg-high); line-height: 1.35; }
.ds .kcard .title .swatch { margin-top: 5px; }
.ds .kcard .meta { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); font-size: var(--text-small); color: var(--fg-3); }
.ds .kcard .meta .avatar { margin-left: auto; }
.ds .kcard.is-sub { padding: var(--space-6) var(--space-12); font-size: var(--text-small); }
.ds .kcard.is-ghost { border: 1px dashed var(--border-high); background: transparent; box-shadow: none; color: var(--fg-3); text-align: center; }

/* Timeline */
.ds .timeline-head { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border-low); }
.ds .timeline-head > div { padding: var(--space-8) var(--space-12); font-size: var(--text-tiny); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); border-left: 1px solid var(--neutral-200); }
.ds .timeline-head > div strong { display: block; color: var(--fg-high); }
.ds .marker { display: inline-flex; align-items: center; height: 16px; padding: 0 var(--space-8); border-radius: var(--radius-rounded); background: var(--status-red); color: #fff; font-size: 9px; font-weight: var(--weight-bold); }

/* Definition list (Account info) */
.ds .dl { display: grid; grid-template-columns: 140px 1fr; row-gap: var(--space-12); column-gap: var(--space-16); align-items: center; }
.ds .dl dt { font-size: var(--text-tiny); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.ds .dl dd { margin: 0; font-size: var(--text-medium); }

/* Setting row (icon tile + text + toggle) */
.ds .setting { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-low); }
.ds .setting .tile { width: 24px; height: 24px; border-radius: var(--radius-default); border: 1px solid var(--green-500); color: var(--green-500); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds .setting .tile svg { width: 14px; height: 14px; }
.ds .setting .tile.is-muted { border-color: var(--neutral-500); color: var(--fg-3); }
.ds .setting .text { flex: 1; }
.ds .setting .text strong { display: block; font-size: var(--text-medium); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds .setting .text span { font-size: var(--text-small); color: var(--fg-2); }

/* Rich text toolbar */
.ds .rt-toolbar { display: flex; align-items: center; gap: 2px; padding: var(--space-4); }
.ds .rt-toolbar button { width: 24px; height: 24px; border: 0; background: none; border-radius: var(--radius-default); color: var(--fg-2); font-size: var(--text-small); cursor: pointer; }
.ds .rt-toolbar button:hover { background: var(--bg-hover); color: var(--fg-high); }
.ds .rt-toolbar .sep { width: 1px; height: 14px; background: var(--border-low); margin: 0 var(--space-4); }

/* ---------- 11. App shell -------------------------------------------- */
.ds .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100%; }
.ds .shell-sidebar { background: var(--bg-mid); border-right: 1px solid var(--border-low); padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
.ds .shell-main { display: flex; flex-direction: column; min-width: 0; }
.ds .topbar { display: flex; align-items: center; gap: var(--space-12); height: 48px; padding: 0 var(--space-16); border-bottom: 1px solid var(--border-low); }
.ds .topbar .spacer { flex: 1; }
.ds .toolbar { display: flex; align-items: center; gap: var(--space-4); height: var(--size-medium); padding: 0 var(--space-12); border-bottom: 1px solid var(--border-low); }
.ds .toolbar .spacer { flex: 1; }
.ds .workspace { display: flex; align-items: center; gap: var(--space-8); height: var(--size-small); padding: 0 var(--space-8); font-weight: var(--weight-bold); font-size: var(--text-medium); color: var(--fg-high); }
.ds .workspace .logo { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--blue-500), var(--purple-500)); }
.ds .trial { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: auto; padding: var(--space-8); font-size: var(--text-small); color: var(--fg-2); }

/* Drawer (right detail panel) */
.ds .drawer { background: var(--bg-primary); border-left: 1px solid var(--border-low); display: flex; flex-direction: column; }
.ds .drawer-head { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16) 0; }
.ds .drawer-head .t-title { flex: 1; font-size: var(--heading-4); }
.ds .drawer-body { padding: var(--space-12) var(--space-16); flex: 1; overflow: auto; }
.ds .drawer-foot { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-top: 1px solid var(--border-low); font-size: var(--text-small); }
.ds .drawer-foot .spacer { flex: 1; }

/* Utilities */
.ds .row { display: flex; align-items: center; gap: var(--space-8); }
.ds .stack { display: flex; flex-direction: column; gap: var(--space-8); }
.ds .muted { color: var(--fg-3); }
.ds .secondary { color: var(--fg-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }