@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');
/* Klar - tokens. Generated from tokens/tokens.json - do not edit by hand. */
:root, [data-theme="light"], .light {
  --canvas: #fafafa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --fill: #f4f4f5;
  --fill-hover: #e4e4e7;
  --border: #e4e4e7;
  --border-strong: #8b8b93;
  --text: #09090b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --text-disabled: #a1a1aa;
  --primary: #09090b;
  --primary-hover: #27272a;
  --on-primary: #fafafa;
  --focus-ring: var(--text);
  --success: #15803d;
  --success-soft: #f0fdf4;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-solid: #dc2626;
  --on-danger: #ffffff;
  --scrim: rgba(9, 9, 11, 0.5);
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
  --shadow-md: 0 8px 24px rgba(9, 9, 11, 0.08), 0 2px 6px rgba(9, 9, 11, 0.04);
  --shadow-lg: 0 24px 48px rgba(9, 9, 11, 0.14), 0 4px 12px rgba(9, 9, 11, 0.06);
}
[data-theme="dark"], .dark {
  --canvas: #09090b;
  --surface: #18181b;
  --surface-raised: #1f1f23;
  --fill: #27272a;
  --fill-hover: #3f3f46;
  --border: #27272a;
  --border-strong: #71717a;
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #8b8b94;
  --text-disabled: #52525b;
  --primary: #fafafa;
  --primary-hover: #e4e4e7;
  --on-primary: #09090b;
  --focus-ring: var(--text);
  --success: #4ade80;
  --success-soft: #0f2417;
  --warning: #fbbf24;
  --warning-soft: #2a1f0a;
  --danger: #f87171;
  --danger-soft: #2a1215;
  --danger-solid: #dc2626;
  --on-danger: #ffffff;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-xs: none;
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --canvas: #09090b;
    --surface: #18181b;
    --surface-raised: #1f1f23;
    --fill: #27272a;
    --fill-hover: #3f3f46;
    --border: #27272a;
    --border-strong: #71717a;
    --text: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #8b8b94;
    --text-disabled: #52525b;
    --primary: #fafafa;
    --primary-hover: #e4e4e7;
    --on-primary: #09090b;
    --focus-ring: var(--text);
    --success: #4ade80;
    --success-soft: #0f2417;
    --warning: #fbbf24;
    --warning-soft: #2a1f0a;
    --danger: #f87171;
    --danger-soft: #2a1215;
    --danger-solid: #dc2626;
    --on-danger: #ffffff;
    --scrim: rgba(0, 0, 0, 0.7);
    --shadow-xs: none;
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --control-sm: 28px;
  --control-md: 34px;
  --control-lg: 40px;
  --row: 44px;
  --sidebar: 300px;
  --z-dropdown: 50;
  --z-dialog: 100;
  --z-toast: 200;
  --z-tooltip: 300;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --font-sans: Manrope, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Type styles */
.k-display { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.035em; }
.k-h1 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.03em; }
.k-h2 { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.k-h3 { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.015em; }
.k-body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; }
.k-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.k-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 700; }
.k-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.k-overline { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.k-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }

/* Klar - component styles. Every value comes from tokens.css (var(--…)). */
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; background: var(--canvas); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.k-icon { flex: none; display: block; }

/* Scrollbars: thin, no track, and the thumb only shows while the pointer is over the area that scrolls.
   :where() keeps it at zero specificity so an app can restyle any scroller. Safari uses the ::-webkit rules. */
:where(*) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
:where(*:hover) { scrollbar-color: var(--fill-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--radius-full); background-color: transparent; background-clip: padding-box; }
:hover::-webkit-scrollbar-thumb { background-color: var(--fill-hover); }
::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); }
::-webkit-scrollbar-corner { background: transparent; }
:where(.k-btn, .k-seg__item, .k-switch, .k-check__box, .k-row--action, .k-sidebar__item, .k-navlist__item):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Demo layout helpers */
.k-demo { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-6); }
.k-demo--col { flex-direction: column; align-items: stretch; max-width: 400px; gap: var(--space-4); }

/* Kbd */
.k-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-secondary); }

/* Button */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; letter-spacing: -0.005em; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-btn--sm { height: var(--control-sm); padding: 0 10px; font-size: 13px; }
.k-btn--md { height: var(--control-md); padding: 0 14px; font-size: 14px; }
.k-btn--lg { height: var(--control-lg); padding: 0 18px; font-size: 15px; }
.k-btn--icon-only.k-btn--sm { width: var(--control-sm); padding: 0; }
.k-btn--icon-only.k-btn--md { width: var(--control-md); padding: 0; }
.k-btn--block { display: flex; width: 100%; }
.k-btn--primary { background: var(--primary); color: var(--on-primary); }
.k-btn--primary:hover { background: var(--primary-hover); }
.k-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-xs); }
.k-btn--secondary:hover { background: var(--fill); }
.k-btn--ghost { background: transparent; color: var(--text); }
.k-btn--ghost:hover { background: var(--fill); }
.k-btn--danger { background: var(--danger-solid); color: var(--on-danger); }
.k-btn--danger:hover { filter: brightness(.92); }
.k-btn:disabled { background: var(--fill); border-color: transparent; color: var(--text-disabled); box-shadow: none; cursor: default; filter: none; }
.k-btn__kbd { margin-left: 2px; padding: 0 5px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .7; }
.k-btn--primary .k-btn__kbd { background: rgba(127, 127, 127, .25); }
.k-btn--secondary .k-btn__kbd, .k-btn--ghost .k-btn__kbd { background: var(--fill); }

/* TextField */
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field__label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--text); }
.k-input { height: var(--control-md); padding: 0 var(--space-3); font: inherit; font-size: 14px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.k-input::placeholder { color: var(--text-muted); }
.k-input:hover { border-color: var(--text-secondary); }
.k-input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-input:disabled { color: var(--text-disabled); background: var(--fill); border-color: var(--border); }
.k-field__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.k-field--error .k-input { border-color: var(--danger); }
.k-field--error .k-input:focus { box-shadow: 0 0 0 1px var(--danger); }
.k-field--error .k-field__note { color: var(--danger); }

/* SearchField */
.k-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 6px 0 var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: text; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.k-search:hover { border-color: var(--border-strong); }
.k-search:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-search__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.k-search__input::placeholder { color: var(--text-muted); }
.k-search__input::-webkit-search-decoration, .k-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Checkbox */
.k-check { display: flex; align-items: flex-start; gap: 10px; }
.k-check__box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); color: var(--on-primary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.k-check__box--on { background: var(--primary); border-color: var(--primary); }
.k-check__box--on .k-icon { animation: k-check-in var(--duration-fast) var(--ease-out); }
.k-check__text { display: flex; flex-direction: column; cursor: pointer; }
.k-check__label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text); }
.k-check__desc { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.k-check--disabled { opacity: .5; }
.k-check--disabled .k-check__box, .k-check--disabled .k-check__text { cursor: default; }

/* Switch */
.k-switch { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-full); background: var(--fill); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.k-switch__knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: var(--radius-full); background: var(--text-secondary); transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.k-switch--on { background: var(--primary); border-color: var(--primary); }
.k-switch--on .k-switch__knob { transform: translateX(14px); background: var(--on-primary); }
.k-switch:disabled { opacity: .5; cursor: default; }
.k-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }

/* SegmentedControl */
.k-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--fill); border-radius: var(--radius-sm); }
.k-seg--block { display: flex; }
.k-seg--block .k-seg__item { flex: 1; }
.k-seg__item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-seg__item:hover { color: var(--text); }
.k-seg__item--on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }

/* List */
.k-list { margin: 0; }
.k-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-sm); margin-bottom: var(--space-2); }
.k-list__header { margin: 0; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-list__body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.k-list__footer { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.k-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; box-sizing: border-box; min-height: var(--row); padding: 10px var(--space-4); margin: 0; border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 20px; text-align: left; color: var(--text); text-decoration: none; }
.k-row + .k-row { border-top: 1px solid var(--border); }
.k-row--action { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-row--action:hover { background: var(--fill); }
.k-row__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--fill); color: var(--text); }
.k-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-row__title { font-weight: 700; }
.k-row__title--danger { color: var(--danger); }
.k-row__subtitle { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.k-row__value { flex: none; color: var(--text-secondary); }
.k-row__chev { color: var(--text-secondary); }
.k-row__check { color: var(--text); }

/* Card */
.k-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.k-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.k-card__eyebrow { margin: 0 0 2px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-card__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.k-card__body { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* Badge */
.k-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.k-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.k-badge--neutral { background: var(--fill); color: var(--text-secondary); }
.k-badge--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.k-badge--solid { background: var(--primary); color: var(--on-primary); }
.k-badge--success { background: var(--success-soft); color: var(--success); }
.k-badge--warning { background: var(--warning-soft); color: var(--warning); }
.k-badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ProgressBar */
.k-progress { height: 6px; border-radius: var(--radius-full); background: var(--fill); overflow: hidden; }
.k-progress__fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--duration-slow) var(--ease-out); }

/* Topbar */
.k-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 56px; padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.k-topbar__crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.k-topbar__crumb { font-size: 14px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.k-topbar__sep { color: var(--border-strong); font-weight: 500; }
.k-topbar__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Sidebar */
.k-sidebar { display: flex; flex-direction: column; width: var(--sidebar); box-sizing: border-box; padding: var(--space-3); background: var(--surface); border-right: 1px solid var(--border); }
.k-sidebar__header { padding: var(--space-2) var(--space-2) var(--space-4); }
.k-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.k-sidebar__section { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-2); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-sidebar__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-secondary); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-sidebar__item:hover { background: var(--fill); color: var(--text); }
.k-sidebar__item--on { background: var(--fill); color: var(--text); }
.k-sidebar__label { flex: 1; }
.k-sidebar__count { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.k-sidebar__footer { padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* NavList: sub-navigation inside a page, e.g. settings. Same rhythm as the sidebar. */
.k-navlist { display: flex; flex-direction: column; gap: 2px; }
.k-navlist__section { margin: var(--space-5) 0 var(--space-1); padding: 0 var(--space-2); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-navlist__section:first-child { margin-top: 0; }
.k-navlist__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-secondary); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-navlist__item:hover { background: var(--fill); color: var(--text); }
.k-navlist__item--on { background: var(--fill); color: var(--text); }
.k-navlist__label { flex: 1; }
.k-navlist__count { font-size: 12px; font-weight: 700; color: var(--text-secondary); }

/* SettingsSection: title and description on the left (1/3), the controls on the right (2/3), hairline between sections */
.k-setting { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.k-setting:first-child { border-top: 0; padding-top: 0; }
.k-setting__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.k-setting__desc { margin: 4px 0 0; max-width: 360px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-setting__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.k-setting__body > :where(.k-field, .k-list, .k-table-wrap, .k-radios) { align-self: stretch; }
@media (max-width: 860px) { .k-setting { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Dialog */
.k-scrim { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-6); background: var(--scrim); z-index: var(--z-dialog); }
.k-dialog { width: 420px; max-width: 100%; box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.k-dialog__content { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) var(--space-5) var(--space-4); }
.k-dialog__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.k-dialog__message { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }

/* ===== Extended components ===== */
:where(.k-radio, .k-tab, .k-pages__item, .k-acc__head, .k-menu__item, .k-toast__close):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Textarea & Select */
.k-textarea { height: auto; min-height: 88px; padding: 10px var(--space-3); line-height: 20px; resize: vertical; }
.k-field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.k-field__count { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.k-select { position: relative; display: flex; }
.k-select__el { flex: 1; padding-right: 36px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.k-select__chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }

/* Dropdown: custom select. The trigger is a field; the panel is a Klar menu. */
.k-dd__trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; }
.k-dd__trigger:disabled { cursor: default; }
.k-dd__trigger[aria-expanded="true"] { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-dd__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-dd__trigger--empty .k-dd__value { color: var(--text-muted); }
.k-dd__chev { color: var(--text-secondary); transition: transform var(--duration-base) var(--ease-out); }
.k-dd__trigger[aria-expanded="true"] .k-dd__chev { transform: rotate(180deg); }
/* Doubled class names so these win over the .k-menu rules further down */
.k-menu.k-dd__panel { position: fixed; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: 0; max-height: 280px; padding: 0; overflow: hidden; }
.k-dd__search { flex: none; display: flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.k-dd__search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.k-dd__search-input::placeholder { color: var(--text-muted); }
.k-dd__list { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
/* Lighter and more compact than action menus: a list to choose from, not commands */
.k-menu__item.k-dd__option { box-sizing: border-box; height: auto; min-height: 30px; gap: var(--space-2); padding-top: 5px; padding-bottom: 5px; font-size: 13px; line-height: 18px; font-weight: 500; cursor: pointer; }
.k-menu__item.k-dd__option[aria-selected="true"] { font-weight: 700; }
.k-menu__item.k-dd__option--disabled, .k-menu__item.k-dd__option--disabled:hover { color: var(--text-disabled); background: transparent; cursor: default; }
.k-dd__desc { display: block; font-size: 12px; line-height: 15px; font-weight: 500; color: var(--text-secondary); }
.k-dd__empty { margin: 0; padding: var(--space-4); text-align: center; color: var(--text-secondary); }

/* RadioGroup */
.k-radios { display: flex; flex-direction: column; gap: var(--space-3); }
.k-radio { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.k-radio:disabled { opacity: .5; cursor: default; }
.k-radio__dot { flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out); }
.k-radio--on .k-radio__dot { border: 5px solid var(--primary); }
.k-radio__text { display: flex; flex-direction: column; }
.k-radio__label { font-size: 14px; line-height: 20px; font-weight: 700; }
.k-radio__desc { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.k-radios--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: start; gap: var(--space-2); }
.k-radios--cards .k-radio { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.k-radios--cards .k-radio:hover { border-color: var(--border-strong); }
.k-radios--cards .k-radio--on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* Slider */
.k-slider { display: flex; flex-direction: column; gap: var(--space-2); }
.k-slider__head { display: flex; align-items: baseline; justify-content: space-between; }
.k-slider__value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.k-slider__input { width: 100%; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.k-slider__input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--primary) var(--k-pct), var(--fill) var(--k-pct)); }
.k-slider__input::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--fill); }
.k-slider__input::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--primary); }
.k-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: var(--radius-full); background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-xs); }
.k-slider__input::-moz-range-thumb { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--surface); border: 2px solid var(--primary); }
.k-slider__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-xs); }
.k-slider__input:disabled { opacity: .5; cursor: default; }

/* Avatar */
.k-avatar { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: var(--radius-full); background: var(--fill); color: var(--text); font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 0 0 1px var(--border); }
.k-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.k-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.k-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.k-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.k-avatar--more { color: var(--text-secondary); }
.k-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 7px; min-height: 7px; border-radius: var(--radius-full); box-shadow: 0 0 0 2px var(--surface); }
.k-avatar__status--online { background: var(--success); }
.k-avatar__status--away { background: var(--warning); }
.k-avatar__status--offline { background: var(--border-strong); }
.k-avatars { display: inline-flex; }
.k-avatars .k-avatar { box-shadow: 0 0 0 2px var(--surface); }
.k-avatars .k-avatar + .k-avatar { margin-left: -6px; }

/* Tooltip */
.k-tip { position: relative; display: inline-flex; }
.k-tip__bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: var(--z-tooltip); display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 2px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.k-tip--bottom .k-tip__bubble { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -2px); }
.k-tip:hover .k-tip__bubble, .k-tip:focus-within .k-tip__bubble, .k-tip--open .k-tip__bubble { opacity: 1; transform: translate(-50%, 0); transition-duration: var(--duration-base); }
/* A short pause on hover keeps tooltips from flickering as the pointer passes; keyboard focus shows them at once. */
.k-tip:hover .k-tip__bubble { transition-delay: var(--duration-base); }
.k-tip__kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .65; }

/* Tabs */
.k-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); }
.k-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); }
.k-tab:hover { color: var(--text); }
.k-tab--on { color: var(--text); }
.k-tab--on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.k-tab__count { padding: 0 6px; border-radius: var(--radius-full); background: var(--fill); font-size: 11px; line-height: 18px; font-weight: 700; color: var(--text-secondary); }

/* Stat */
.k-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.k-stat__label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--text-secondary); }
.k-stat__value { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.k-stat__foot { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; }
.k-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.k-stat__delta--up { color: var(--success); }
.k-stat__delta--down { color: var(--danger); }
.k-stat__delta--flat { color: var(--text-secondary); }
.k-stat__caption { font-weight: 500; color: var(--text-muted); }
.k-stat__value-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }

/* Charts: monochrome, thin marks, recessive grid. Series 1 is primary, series 2 border-strong (dashed for lines). */
.k-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-chart { position: relative; margin: 0; min-width: 0; }
.k-chart__plot { position: relative; overflow-x: clip; overflow-y: visible; }
.k-chart svg { display: block; overflow: visible; }
.k-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-secondary); }
.k-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.k-chart__key { flex: none; display: inline-block; }
.k-chart__key--bar { width: 10px; height: 10px; border-radius: 2px; }
.k-chart__key--line { width: 14px; height: 0; border-top: 2px solid; }
.k-chart__key--bar.k-chart__key--1 { background: var(--primary); }
.k-chart__key--bar.k-chart__key--2 { background: var(--border-strong); }
.k-chart__key--line.k-chart__key--1 { border-color: var(--primary); }
.k-chart__key--line.k-chart__key--2 { border-top-style: dashed; border-color: var(--border-strong); }
.k-chart__grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.k-chart__axis { fill: var(--text-muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.k-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-chart__line--1 { stroke: var(--primary); }
.k-chart__line--2 { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.k-chart__area { fill: var(--primary); opacity: .08; }
.k-chart__cross { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.k-chart__dot { stroke: var(--surface); stroke-width: 2; }
.k-chart__dot--1 { fill: var(--primary); }
.k-chart__dot--2 { fill: var(--border-strong); }
.k-chart__bar--1 { fill: var(--primary); }
.k-chart__bar--2 { fill: var(--border-strong); }
.k-chart__hit { fill: transparent; }
.k-chart__group { transition: opacity var(--duration-fast) var(--ease-out); }
.k-chart__group--dim { opacity: .35; }
.k-chart__tip { position: absolute; z-index: var(--z-tooltip); min-width: 140px; padding: var(--space-2) var(--space-3); transform: translate(-50%, calc(-100% - 8px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none; white-space: nowrap; animation: k-fade-in var(--duration-fast) var(--ease-out); }
.k-chart__tip--start { transform: translate(12px, 0); }
.k-chart__tip--end { transform: translate(calc(-100% - 12px), 0); }
.k-chart__tip-title { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--text); }
.k-chart__tip-row { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.k-chart__tip-label { flex: 1; }
.k-chart__tip-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.k-spark { display: block; overflow: visible; }
.k-spark__line { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.k-spark__dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.k-barlist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.k-barlist__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.k-barlist__bar { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-xs); background: var(--fill); }
.k-barlist__label, .k-barlist__value { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.k-barlist__label { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-barlist__value { flex: none; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Calendar: month grid with hairlines; the small size is the date picker's grid */
.k-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.k-cal__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.k-cal__nav { display: flex; align-items: center; gap: 2px; }
.k-cal__nav .k-btn--secondary { margin-right: var(--space-2); }
.k-cal__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-cal--lg .k-cal__weekdays span { padding: 0 var(--space-2) var(--space-2); }
.k-cal--lg .k-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); }
.k-cal--lg .k-cal__day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 112px; padding: 6px; box-sizing: border-box; background: var(--surface); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-cal--lg .k-cal__day:hover { background: var(--canvas); }
.k-cal--lg .k-cal__day--out { background: var(--canvas); }
.k-cal--lg .k-cal__day--out .k-cal__num { color: var(--text-muted); }
.k-cal--lg .k-cal__day--selected { box-shadow: inset 0 0 0 2px var(--primary); }
.k-cal__num { display: inline-grid; place-items: center; align-self: flex-start; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.k-cal__day--today .k-cal__num { background: var(--primary); color: var(--on-primary); }
.k-cal__event { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; height: 20px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: var(--fill); font: inherit; font-size: 12px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-cal__event:hover { background: var(--fill-hover); }
.k-cal__event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cal__time { flex: none; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.k-cal__tone { flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); }
.k-cal__tone--success { background: var(--success); }
.k-cal__tone--warning { background: var(--warning); }
.k-cal__tone--danger { background: var(--danger); }
.k-cal__more { padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.k-cal--sm { width: 252px; }
.k-cal--sm .k-cal__head { margin-bottom: var(--space-2); }
.k-cal--sm .k-cal__title { font-size: 14px; line-height: 20px; }
.k-cal--sm .k-cal__weekdays { text-align: center; padding-bottom: 4px; }
.k-cal--sm .k-cal__grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 0; }
.k-cal--sm .k-cal__day { position: relative; width: 36px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-cal--sm .k-cal__day:hover { background: var(--fill); }
.k-cal--sm .k-cal__day--out { color: var(--text-muted); }
.k-cal--sm .k-cal__day--today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.k-cal--sm .k-cal__day--selected, .k-cal--sm .k-cal__day--selected:hover { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.k-cal--sm .k-cal__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.k-cal__dot { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-full); background: currentColor; opacity: .6; }
.k-datepicker { position: fixed; z-index: var(--z-dropdown); padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transform-origin: top left; animation: k-drop-in var(--duration-base) var(--ease-out); }
.k-datepicker--up { transform-origin: bottom left; animation-name: k-rise-in; }
.k-datepicker.k-leaving { animation: k-drop-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }
@media (max-width: 720px) { .k-cal--lg .k-cal__day { min-height: 64px; } .k-cal--lg .k-cal__event-title, .k-cal--lg .k-cal__time { display: none; } .k-cal--lg .k-cal__event { width: 8px; height: 8px; padding: 0; border-radius: var(--radius-full); background: var(--text-secondary); } .k-cal--lg .k-cal__event .k-cal__tone { display: none; } }

/* Table */
.k-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.k-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.k-table th { height: 38px; padding: 0 var(--space-4); background: var(--canvas); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.k-table td { height: 48px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out); }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table__strong { font-weight: 700; color: var(--text) !important; }
.k-table__mono { font-family: var(--font-mono); font-size: 13px; }
.k-table__row--action { cursor: pointer; }
.k-table tbody tr:hover td, .k-table tbody tr.k-table__row--menu td { background: var(--canvas); }

/* EmptyState */
.k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--space-12) var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.k-empty__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--text); }
.k-empty__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.k-empty__desc { margin: 0; max-width: 340px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-empty__action { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

/* Skeleton & Spinner */
.k-skel { display: block; border-radius: var(--radius-xs); background: var(--fill-hover); animation: k-pulse 1.4s ease-in-out infinite; }
.k-skel--circle { border-radius: var(--radius-full); }
.k-skel-lines { display: flex; flex-direction: column; gap: 8px; width: 100%; }
@keyframes k-pulse { 50% { opacity: .5; } }
.k-spinner { display: inline-block; box-sizing: border-box; border: 2px solid var(--fill-hover); border-top-color: var(--text); border-radius: var(--radius-full); animation: k-spin 700ms linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* Pagination */
.k-pages { display: flex; align-items: center; gap: 2px; }
.k-pages__item { min-width: var(--control-sm); height: var(--control-sm); padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-pages__item:hover { background: var(--fill); color: var(--text); }
.k-pages__item--on { background: var(--primary); color: var(--on-primary); }
.k-pages__item--on:hover { background: var(--primary-hover); color: var(--on-primary); }
.k-pages__gap { min-width: 20px; text-align: center; color: var(--text-muted); }

/* Accordion */
.k-accordion { border-top: 1px solid var(--border); }
.k-acc { border-bottom: 1px solid var(--border); }
.k-acc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 52px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; text-align: left; color: var(--text); cursor: pointer; }
.k-acc__chev { color: var(--text-secondary); transition: transform var(--duration-base) var(--ease-out); }
.k-acc--open .k-acc__chev { transform: rotate(180deg); }
.k-acc__body { padding: 0 var(--space-8) var(--space-4) 0; font-size: 14px; line-height: 21px; color: var(--text-secondary); animation: k-reveal var(--duration-base) var(--ease-out); }

/* Callout */
.k-callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.k-callout__icon { margin-top: 2px; }
.k-callout__text { flex: 1; min-width: 0; }
.k-callout__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text); }
.k-callout__body { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-callout__action { flex: none; align-self: center; }
.k-callout--info .k-callout__icon { color: var(--text); }
.k-callout--success { background: var(--success-soft); border-color: transparent; }
.k-callout--success .k-callout__icon, .k-callout--success .k-callout__title { color: var(--success); }
.k-callout--warning { background: var(--warning-soft); border-color: transparent; }
.k-callout--warning .k-callout__icon, .k-callout--warning .k-callout__title { color: var(--warning); }
.k-callout--danger { background: var(--danger-soft); border-color: transparent; }
.k-callout--danger .k-callout__icon, .k-callout--danger .k-callout__title { color: var(--danger); }
.k-callout--success .k-callout__body, .k-callout--warning .k-callout__body, .k-callout--danger .k-callout__body { color: var(--text); }

/* Toast */
.k-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 360px; max-width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.k-toast__icon { margin-top: 2px; }
.k-toast__icon--success { color: var(--success); }
.k-toast__icon--warning { color: var(--warning); }
.k-toast__icon--danger { color: var(--danger); }
.k-toast__icon--info { color: var(--text); }
.k-toast__text { flex: 1; min-width: 0; }
.k-toast__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text); }
.k-toast__desc { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.k-toast__action { flex: none; align-self: center; }
.k-toast__close { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-toast__close:hover { background: var(--fill); color: var(--text); }
.k-toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }

/* Menu & dropdown */
.k-menu { min-width: 220px; box-sizing: border-box; padding: 4px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.k-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-xs); background: transparent; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: var(--text); cursor: pointer; }
.k-menu__item svg { color: var(--text-secondary); }
.k-menu__item:hover, .k-menu__item--active { background: var(--fill); }
.k-menu__item:disabled { color: var(--text-disabled); cursor: default; background: transparent; }
.k-menu__item--danger, .k-menu__item--danger svg { color: var(--danger); }
.k-menu__label { flex: 1; }
.k-menu__kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-muted); }
.k-menu__sep { height: 1px; margin: 4px -4px; background: var(--border); }
.k-menu__heading { margin: 0; padding: 8px var(--space-2) 4px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-menu__sub { position: relative; }
.k-menu__sub > .k-menu--nested { position: absolute; top: -5px; left: calc(100% + 4px); z-index: 1; }
.k-menu__sub > .k-menu--flip { left: auto; right: calc(100% + 4px); }
.k-menu__item--open { background: var(--fill); }
.k-menu__chev { margin-right: -2px; color: var(--text-secondary); }
.k-menu__check { flex: none; display: grid; place-items: center; width: 15px; color: var(--text); }
.k-menu__check svg { color: var(--text); }
.k-dropdown { position: relative; display: inline-flex; }
.k-dropdown__panel { position: fixed; z-index: var(--z-dropdown); }

/* Command palette */
.k-scrim--top { place-items: start center; padding-top: 12vh; }
.k-cmdk { width: 720px; max-width: 100%; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.k-cmdk__search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.k-cmdk__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); outline: none; }
.k-cmdk__input::placeholder { color: var(--text-muted); font-weight: 500; }
.k-cmdk__list { max-height: 420px; overflow-y: auto; padding: 4px; }
.k-cmdk__empty { margin: 0; padding: var(--space-6); text-align: center; color: var(--text-secondary); }
.k-cmdk__foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); background: var(--canvas); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.k-cmdk__foot .k-kbd { height: 18px; margin-right: 2px; padding: 0 4px; }

/* ContextMenu */
.k-ctx-area { display: block; }
.k-ctx { position: fixed; z-index: var(--z-dropdown); }

/* Toaster */
.k-toasts--inline { position: static; align-items: flex-end; }
.k-toasts__item { animation: k-toast-in var(--duration-base) var(--ease-out); }
.k-toasts__item--leaving { animation: k-toast-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }

/* Drawer */
.k-scrim--drawer { place-items: stretch end; padding: 0; }
.k-scrim--left { place-items: stretch start; }
.k-drawer { display: flex; flex-direction: column; width: 400px; max-width: 100%; height: 100%; box-sizing: border-box; background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.k-drawer--right { border-left: 1px solid var(--border); }
.k-drawer--left { border-right: 1px solid var(--border); }
.k-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border); }
.k-drawer__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.k-drawer__desc { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.k-drawer__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }

/* Modal: a large centered screen for editing and details, up to 1200 x 800 */
.k-modal { display: flex; flex-direction: column; width: 1200px; max-width: 100%; height: 800px; max-height: 100%; box-sizing: border-box; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.k-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.k-modal__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.k-modal__desc { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.k-modal__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.k-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .k-scrim:has(> .k-modal) { padding: 0; }
  .k-modal { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .k-modal__head, .k-modal__body, .k-modal__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Calendar: week and day views (a time grid), and a day highlighted while its right-click menu is open */
.k-cal--lg .k-cal__day--menu { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border-strong); }
.k-cal__nav .k-seg { margin-right: var(--space-2); }
/* The head and all-day row reserve the same scrollbar gutter as the body, so the columns line up. */
.k-cal__tg-head, .k-cal__tg-allday { display: grid; overflow-y: hidden; scrollbar-gutter: stable; border: 1px solid var(--border); background: var(--surface); }
.k-cal__tg-day .k-cal__num { align-self: center; }
.k-cal__tg-head { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.k-cal__tg-allday { border-top: 0; min-height: 32px; }
.k-cal__tg-corner, .k-cal__tg-label { border-right: 1px solid var(--border); }
.k-cal__tg-label { display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.k-cal__tg-day { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0; border: 0; border-left: 1px solid var(--border); background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-cal__tg-day:first-of-type { border-left: 0; }
.k-cal__tg-day:hover { background: var(--canvas); }
.k-cal__tg-day--selected { box-shadow: inset 0 -2px 0 var(--primary); }
.k-cal__tg-allday-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px; border-left: 1px solid var(--border); }
.k-cal__tg-allday-cell:first-of-type { border-left: 0; }
.k-cal__tg-body { max-height: 576px; overflow-y: auto; scrollbar-gutter: stable; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface); }
.k-cal__tg-grid { display: grid; position: relative; }
.k-cal__tg-gutter { position: relative; border-right: 1px solid var(--border); }
.k-cal__tg-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-cal__tg-col { position: relative; min-width: 0; border-left: 1px solid var(--border); background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 48px; cursor: default; }
.k-cal__tg-col:first-of-type { border-left: 0; }
.k-cal__tg-col--today { background-color: var(--canvas); }
.k-cal__tg-event { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; padding: 3px 6px; box-sizing: border-box; border: 0; border-left: 2px solid var(--primary); border-radius: var(--radius-xs); background: var(--fill); font: inherit; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-cal__tg-event:hover { background: var(--fill-hover); }
.k-cal__tg-event .k-cal__event-title { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.k-cal__tg-event .k-cal__time { font-size: 11px; }
.k-cal__now { position: absolute; left: 0; right: 0; z-index: 1; height: 0; border-top: 2px solid var(--primary); pointer-events: none; }
.k-cal__now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--primary); }
@media (max-width: 720px) { .k-cal__head { flex-wrap: wrap; } .k-cal__tg-weekday { display: none; } .k-cal__tg-event .k-cal__time { display: none; } }

/* Modal, medium size: forms and guides that do not need a full screen */
.k-modal--md { width: 720px; height: auto; max-height: min(680px, 100%); }

/* Popover */
.k-popover-anchor { position: relative; display: inline-flex; }
.k-popover { position: fixed; z-index: var(--z-dropdown); max-width: calc(100vw - 16px); box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* Notification inbox */
.k-inbox-trigger { position: relative; display: inline-flex; }
.k-inbox-trigger__count { position: absolute; top: -3px; right: -4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.k-inbox { display: flex; flex-direction: column; max-height: min(520px, calc(100vh - 96px)); }
.k-inbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4); }
.k-inbox__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 800; color: var(--text); }
.k-inbox__tabs { padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); }
.k-inbox__list { overflow-y: auto; padding: 4px; }
.k-inbox__item { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-inbox__item:hover { background: var(--fill); }
.k-inbox__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.k-inbox__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--fill); }
.k-inbox__text { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-right: var(--space-3); }
.k-inbox__item-title { font-size: 13px; line-height: 18px; font-weight: 500; }
.k-inbox__item--unread .k-inbox__item-title { font-weight: 700; }
.k-inbox__desc { font-size: 12px; line-height: 16px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-inbox__time { margin-top: 2px; font-size: 11px; line-height: 16px; color: var(--text-muted); }
.k-inbox__dot { position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--primary); }
.k-inbox__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); color: var(--text-secondary); text-align: center; }
.k-inbox__empty p { margin: 0; }

/* Kanban */
.k-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: 4px; }
.k-kanban__col { display: flex; flex-direction: column; min-width: 0; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--canvas); transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.k-kanban__col--over { border-color: var(--border-strong); background: var(--fill); }
.k-kanban__head { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-1) var(--space-2); }
.k-kanban__title { margin: 0; font-size: 13px; line-height: 18px; font-weight: 800; color: var(--text); }
.k-kanban__count { margin-right: auto; padding: 0 6px; border-radius: var(--radius-full); background: var(--fill); font-size: 11px; line-height: 18px; font-weight: 700; color: var(--text-secondary); }
.k-kanban__list { display: flex; flex-direction: column; gap: var(--space-2); min-height: 72px; }
.k-kanban__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: grab; transition: border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); animation: k-reveal var(--duration-base) var(--ease-out); }
.k-kanban__card:hover { border-color: var(--border-strong); }
.k-kanban__card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.k-kanban__card:active { cursor: grabbing; }
.k-kanban__card--dragging { opacity: .4; }
.k-kanban__card-title { font-size: 14px; line-height: 20px; font-weight: 700; }
.k-kanban__drop { height: 2px; margin: -5px 0; border-radius: 2px; background: var(--primary); }
.k-kanban__empty { margin: 0; padding: var(--space-5) var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 12px; color: var(--text-muted); text-align: center; }

/* MultiSelect: a field of tags with a search input */
.k-ms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; height: auto; min-height: var(--control-md); padding: 4px 32px 4px 4px; box-sizing: border-box; position: relative; cursor: text; }
.k-ms--open { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-ms--disabled { background: var(--fill); border-color: var(--border); cursor: default; }
.k-ms .k-dd__chev { position: absolute; right: 10px; top: 9px; }
.k-ms--open .k-dd__chev { transform: rotate(180deg); }
.k-ms__input { flex: 1; min-width: 80px; height: 24px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.k-ms__input::placeholder { color: var(--text-muted); }
.k-tag { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; box-sizing: border-box; border-radius: 3px; background: var(--fill); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; animation: k-check-in var(--duration-fast) var(--ease-out); }
.k-tag__remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-tag__remove:hover { background: var(--fill-hover); color: var(--text); }
.k-tag__remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }

/* FileDrop */
.k-filedrop { display: flex; flex-direction: column; gap: 6px; }
.k-filedrop__zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-6) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface); text-align: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.k-filedrop__zone:hover { background: var(--canvas); }
.k-filedrop__zone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.k-filedrop__zone--over { border-style: solid; border-color: var(--primary); background: var(--fill); }
.k-filedrop__zone--disabled { cursor: default; opacity: .5; }
.k-filedrop__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 2px; border-radius: var(--radius-sm); background: var(--fill); color: var(--text); }
.k-filedrop__title { font-size: 14px; font-weight: 700; color: var(--text); }
.k-filedrop__browse { text-decoration: underline; text-underline-offset: 3px; }
.k-filedrop__hint { font-size: 12px; color: var(--text-secondary); }
.k-filedrop__hint:empty { display: none; }
.k-filedrop__errors { display: flex; flex-direction: column; gap: 4px; }
.k-filedrop__errors .k-field__note { color: var(--danger); }
.k-filelist { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.k-filelist__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row); padding: 6px var(--space-2) 6px var(--space-3); animation: k-reveal var(--duration-base) var(--ease-out); }
.k-filelist__item + .k-filelist__item { border-top: 1px solid var(--border); }
.k-filelist__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--fill); }
.k-filelist__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.k-filelist__name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-filelist__meta { font-size: 12px; color: var(--text-secondary); }
.k-filelist__error { font-size: 12px; color: var(--danger); }

/* Timeline */
.k-timeline { margin: 0; padding: 0; list-style: none; }
.k-timeline__item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.k-timeline__item:last-child { padding-bottom: 0; }
.k-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px; background: var(--border); }
.k-timeline__marker { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.k-timeline__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background: var(--fill); color: var(--text); }
.k-timeline__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); }
.k-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.k-timeline__title { margin: 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text); }
.k-timeline__title strong { font-weight: 700; }
.k-timeline__desc { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--fill); font-size: 13px; line-height: 18px; color: var(--text); }
.k-timeline__time { margin: 0; font-size: 11px; line-height: 16px; color: var(--text-muted); }

/* Stepper */
.k-stepper { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.k-step { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.k-step:last-child { flex: none; }
.k-step:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 1px; background: var(--border); transition: background-color var(--duration-slow) var(--ease-out); }
.k-step--done:not(:last-child)::after { background: var(--primary); }
.k-step__btn { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; text-align: left; color: inherit; }
button.k-step__btn { cursor: pointer; }
button.k-step__btn:hover .k-step__label { text-decoration: underline; text-underline-offset: 3px; }
button.k-step__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.k-step__marker { flex: none; display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.k-step--current .k-step__marker { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.k-step--done .k-step__marker { background: var(--fill); border-color: var(--fill); color: var(--text); }
.k-step__text { display: flex; flex-direction: column; min-width: 0; }
.k-step__label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.k-step--current .k-step__label, .k-step--done .k-step__label { color: var(--text); }
.k-step__desc { font-size: 12px; line-height: 16px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) { .k-step:not(.k-step--current) .k-step__text { display: none; } }

/* Table: sorting, selection with bulk actions, column toggle, and a scroll area with a sticky header */
.k-table__toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); margin-bottom: var(--space-2); }
.k-table__toolbar-space { flex: 1; }
.k-table__bulk { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 4px 0 var(--space-3); border-radius: var(--radius-md); background: var(--fill); animation: k-reveal var(--duration-base) var(--ease-out); }
.k-table__bulk-count { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-table__bulk-actions { display: flex; flex-wrap: wrap; flex: 1; gap: var(--space-2); }
.k-table__sort { display: inline-flex; align-items: center; gap: 4px; margin: 0 -4px; padding: 2px 4px; border: 0; border-radius: var(--radius-xs); background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-table__sort:hover { background: var(--fill); color: var(--text); }
.k-table__sort:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.k-table__sort--on { color: var(--text); }
.k-table__sort-icon { opacity: .35; }
.k-table__sort--on .k-table__sort-icon { opacity: 1; }
.k-table th.k-table__select, .k-table td.k-table__select { width: 20px; padding-right: 0; }
.k-table__select .k-check__box { margin-top: 0; }
.k-table tbody tr.k-table__row--selected td { background: var(--canvas); }
.k-table-wrap--scroll { overflow: auto; }
.k-table-wrap--scroll th { position: sticky; top: 0; z-index: 1; }
.k-table td.k-table__spacer { height: auto; padding: 0; border: 0; }

/* Kanban: pointer dragging works with fingers too */
.k-kanban__card { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.k-kanban__card--dragging { opacity: .35; }
.k-kanban--dragging, .k-kanban--dragging * { cursor: grabbing !important; }
.k-kanban__ghost { position: fixed; top: 0; left: 0; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-md); color: var(--text); pointer-events: none; }

/* NumberField and CurrencyField: a field with a unit and small steppers */
.k-number { display: flex; align-items: center; gap: var(--space-2); padding: 0 4px 0 var(--space-3); }
.k-number:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-number--disabled { background: var(--fill); border-color: var(--border); }
.k-number__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; outline: none; }
.k-number__input::placeholder { color: var(--text-muted); }
.k-number__affix { flex: none; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.k-number__affix:last-child { margin-right: 8px; }
.k-number__steps { display: flex; gap: 2px; }
.k-number__step { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-number__step:hover:not(:disabled) { background: var(--fill); color: var(--text); }
.k-number__step:disabled { opacity: .4; cursor: default; }

/* CodeInput: one box per digit */
.k-code { display: flex; gap: var(--space-2); }
.k-code__box { width: 44px; height: 52px; padding: 0; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-mono); font-size: 22px; font-weight: 500; text-align: center; color: var(--text); caret-color: var(--text); outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.k-code__box:hover { border-color: var(--text-secondary); }
.k-code__box:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.k-code__box--gap { margin-left: var(--space-3); }
.k-field--error .k-code__box { border-color: var(--danger); }
@media (max-width: 420px) { .k-code__box { width: 38px; height: 46px; font-size: 18px; } .k-code__box--gap { margin-left: var(--space-1); } }

/* PasswordField with a strength meter: status colours only as thin bars next to the word */
.k-password { position: relative; display: flex; }
.k-password__input { flex: 1; min-width: 0; padding-right: 40px; }
.k-password__toggle { position: absolute; top: 3px; right: 3px; }
.k-strength { display: flex; align-items: center; gap: var(--space-3); }
.k-strength__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1; max-width: 200px; }
.k-strength__bar { height: 4px; border-radius: 2px; background: var(--fill); transition: background-color var(--duration-base) var(--ease-out); }
.k-strength__bar--danger { background: var(--danger); }
.k-strength__bar--warning { background: var(--warning); }
.k-strength__bar--success { background: var(--success); }
.k-strength__word { font-size: 12px; font-weight: 700; }
.k-strength__word--danger { color: var(--danger); }
.k-strength__word--warning { color: var(--warning); }
.k-strength__word--success { color: var(--success); }

/* DateRangePicker: presets on the left, two months on the right */
.k-popover-anchor--block { display: flex; }
.k-popover-anchor--block > .k-input { flex: 1; }
.k-range { display: flex; gap: var(--space-4); padding: var(--space-4); }
.k-range__presets { display: flex; flex-direction: column; gap: 2px; width: 140px; padding-right: var(--space-4); border-right: 1px solid var(--border); }
.k-range__preset { height: 30px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.k-range__preset:hover { background: var(--fill); color: var(--text); }
.k-range__preset--on { background: var(--fill); color: var(--text); font-weight: 700; }
.k-range__preset:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.k-range__months { display: flex; gap: var(--space-6); }
.k-cal--sm .k-cal__day--in-range { background: var(--fill); border-radius: 0; }
.k-cal--sm .k-cal__day--range-start, .k-cal--sm .k-cal__day--range-end, .k-cal--sm .k-cal__day--range-start:hover, .k-cal--sm .k-cal__day--range-end:hover { background: var(--primary); color: var(--on-primary); box-shadow: none; }
@media (max-width: 760px) {
  .k-range { flex-direction: column; }
  .k-range__presets { flex-direction: row; flex-wrap: wrap; width: auto; padding: 0 0 var(--space-3); border-right: 0; border-bottom: 1px solid var(--border); }
  .k-range__second { display: none; }
}

/* TimePicker and Combobox: a typed field with a list */
.k-time, .k-combo { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }
.k-combo { padding-right: 6px; }
.k-time__input, .k-combo__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.k-time__input { font-variant-numeric: tabular-nums; }
.k-time__input::placeholder, .k-combo__input::placeholder { color: var(--text-muted); }
.k-time .k-dd__chev, .k-time.k-ms--open .k-dd__chev { transform: none; }
.k-combo__icon { flex: none; color: var(--text-secondary); }
.k-time__slot { font-variant-numeric: tabular-nums; }
.k-combo__clear { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.k-combo__clear:hover { background: var(--fill); color: var(--text); }
.k-dd__status { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); font-size: 13px; color: var(--text-secondary); }
.k-dd__status--error { color: var(--danger); }

/* Stacked bars: up to four steps of gray, darkest first */
.k-chart__bar--3 { fill: var(--text-disabled); }
.k-chart__bar--4 { fill: var(--fill-hover); }
.k-chart__key--bar.k-chart__key--3 { background: var(--text-disabled); }
.k-chart__key--bar.k-chart__key--4 { background: var(--fill-hover); }

/* DonutChart */
.k-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0; }
.k-donut__chart { position: relative; flex: none; }
.k-donut svg { display: block; }
.k-donut__seg { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; transition: opacity var(--duration-fast) var(--ease-out); }
.k-donut__seg--1, .k-donut__key--1 { fill: var(--primary); background: var(--primary); }
.k-donut__seg--2, .k-donut__key--2 { fill: var(--text-secondary); background: var(--text-secondary); }
.k-donut__seg--3, .k-donut__key--3 { fill: var(--border-strong); background: var(--border-strong); }
.k-donut__seg--4, .k-donut__key--4 { fill: var(--text-disabled); background: var(--text-disabled); }
.k-donut__seg--5, .k-donut__key--5 { fill: var(--fill-hover); background: var(--fill-hover); }
.k-donut__seg--dim { opacity: .3; }
.k-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.k-donut__value { font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.k-donut__label { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-secondary); }
.k-donut__legend { display: flex; flex-direction: column; flex: 1; min-width: 200px; margin: 0; padding: 0; list-style: none; }
.k-donut__item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: 13px; transition: background-color var(--duration-fast) var(--ease-out); }
.k-donut__item--on { background: var(--fill); }
.k-donut__key { width: 10px; height: 10px; border-radius: 2px; }
.k-donut__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.k-donut__num { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.k-donut__pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Heatmap: five steps from fill to primary */
.k-heat { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.k-heat__scroll { overflow-x: auto; padding-top: 2px; }
.k-heat__plot { position: relative; }
.k-heat svg { display: block; overflow: visible; }
.k-heat__l0 { fill: var(--fill); background: var(--fill); }
.k-heat__l1 { fill: color-mix(in srgb, var(--primary) 25%, var(--fill)); background: color-mix(in srgb, var(--primary) 25%, var(--fill)); }
.k-heat__l2 { fill: color-mix(in srgb, var(--primary) 45%, var(--fill)); background: color-mix(in srgb, var(--primary) 45%, var(--fill)); }
.k-heat__l3 { fill: color-mix(in srgb, var(--primary) 70%, var(--fill)); background: color-mix(in srgb, var(--primary) 70%, var(--fill)); }
.k-heat__l4 { fill: var(--primary); background: var(--primary); }
.k-heat__cell:hover { stroke: var(--text); stroke-width: 1; }
.k-heat__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--text-muted); }
.k-heat__swatch { width: 11px; height: 11px; border-radius: 2px; }

/* Markdown and mentions */
.k-md { font-size: 14px; line-height: 21px; color: var(--text); overflow-wrap: anywhere; }
.k-md > * { margin: 0 0 var(--space-2); }
.k-md > :last-child { margin-bottom: 0; }
.k-md ul, .k-md ol { padding-left: 20px; }
.k-md blockquote { padding-left: var(--space-3); border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
.k-md a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.k-md__code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--fill); font-family: var(--font-mono); font-size: 12px; }
.k-mention { padding: 0 3px; border-radius: 3px; background: var(--fill-hover); font-weight: 700; color: var(--text); }
.k-mention-list { position: fixed; z-index: var(--z-tooltip); width: 240px; animation: k-drop-in var(--duration-base) var(--ease-out); }

/* MarkdownEditor */
.k-mdeditor__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.k-mdeditor__tools { display: flex; align-items: center; gap: 2px; }
.k-mdeditor__tools .k-seg { margin-left: var(--space-2); }
.k-mdeditor__preview { padding: 10px var(--space-3); box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.k-mdeditor__empty { margin: 0; color: var(--text-muted); }

/* CommentThread */
.k-comments { display: flex; flex-direction: column; gap: var(--space-4); }
.k-comments__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.k-comment { display: flex; gap: var(--space-3); animation: k-reveal var(--duration-base) var(--ease-out); }
.k-comment__main { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; }
.k-comment__meta { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: 13px; color: var(--text); }
.k-comment__meta span { font-size: 12px; color: var(--text-muted); }
.k-comment__body { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--fill); font-size: 13px; line-height: 20px; }
.k-comments__empty { margin: 0; font-size: 13px; color: var(--text-muted); }
.k-comments__composer { display: flex; gap: var(--space-3); }
.k-comments__field { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); min-width: 0; }
.k-comments__input { min-height: 64px; }
.k-comments__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.k-comments__hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }

/* Gantt */
.k-gantt { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.k-gantt__scroll { overflow: auto; }
.k-gantt__table { position: relative; }
.k-gantt__row { display: flex; height: 40px; border-bottom: 1px solid var(--border); }
.k-gantt__row:last-of-type { border-bottom: 0; }
.k-gantt__row--head { position: sticky; top: 0; z-index: 3; height: 48px; background: var(--canvas); }
.k-gantt__row--group { height: 32px; background: var(--canvas); }
.k-gantt__name { position: sticky; left: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-3); box-sizing: border-box; border-right: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); }
.k-gantt__row--head .k-gantt__name, .k-gantt__row--group .k-gantt__name { background: var(--canvas); }
.k-gantt__row--group .k-gantt__name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.k-gantt__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-gantt__track { position: relative; flex: none; }
.k-gantt__months, .k-gantt__ticks { position: relative; height: 24px; }
.k-gantt__month { position: absolute; top: 4px; height: 20px; padding-left: 6px; border-left: 1px solid var(--border); font-size: 11px; line-height: 20px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.k-gantt__tick { position: absolute; top: 4px; font-size: 11px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.k-gantt__tick--weekend { color: var(--text-disabled); }
.k-gantt__tick--today { font-weight: 800; color: var(--text); }
.k-gantt__bar { position: absolute; top: 11px; height: 18px; padding: 0; overflow: hidden; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--fill); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out); }
.k-gantt__bar:hover { border-color: var(--text); }
.k-gantt__bar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.k-gantt__progress { position: absolute; inset: 0 auto 0 0; background: var(--primary); }
.k-gantt__bar--milestone { top: 13px; width: 14px; height: 14px; border-color: var(--primary); border-radius: 2px; background: var(--primary); transform: rotate(45deg); }
.k-gantt__after { position: absolute; top: 12px; font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.k-gantt__today { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--primary); pointer-events: none; }

/* ===== Motion =====
   Opening uses --ease-out, closing the shorter --duration-fast with --ease-in.
   .k-leaving is set by the components while they animate out; the JS waits for the same tokens before unmounting. */
.k-scrim { animation: k-fade-in var(--duration-slow) var(--ease-out); }
.k-scrim.k-leaving { animation: k-fade-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }
.k-scrim > .k-dialog, .k-scrim > .k-modal { animation: k-rise-in var(--duration-slow) var(--ease-out); }
.k-scrim.k-leaving > .k-dialog, .k-scrim.k-leaving > .k-modal { animation: k-rise-out var(--duration-fast) var(--ease-in) forwards; }
.k-scrim--top > .k-cmdk { transform-origin: top center; animation: k-drop-in var(--duration-slow) var(--ease-out); }
.k-scrim--top.k-leaving > .k-cmdk { animation: k-drop-out var(--duration-fast) var(--ease-in) forwards; }
.k-scrim--drawer.k-leaving { animation-duration: var(--duration-base); }
.k-scrim--right > .k-drawer { animation: k-slide-in-right var(--duration-slow) var(--ease-out); }
.k-scrim--right.k-leaving > .k-drawer { animation: k-slide-out-right var(--duration-base) var(--ease-in) forwards; }
.k-scrim--left > .k-drawer { animation: k-slide-in-left var(--duration-slow) var(--ease-out); }
.k-scrim--left.k-leaving > .k-drawer { animation: k-slide-out-left var(--duration-base) var(--ease-in) forwards; }
.k-dropdown__panel { transform-origin: top left; animation: k-drop-in var(--duration-base) var(--ease-out); }
.k-dropdown--end .k-dropdown__panel { transform-origin: top right; }
.k-dropdown__panel--up { transform-origin: bottom left; animation-name: k-rise-in; }
.k-dropdown--end .k-dropdown__panel--up { transform-origin: bottom right; }
.k-ctx > .k-menu { transform-origin: top left; animation: k-drop-in var(--duration-base) var(--ease-out); }
.k-dropdown__panel.k-leaving, .k-ctx.k-leaving > .k-menu { animation: k-drop-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }
.k-menu--nested { animation: k-fade-in var(--duration-fast) var(--ease-out); }
.k-dd__panel { transform-origin: top center; animation: k-drop-in var(--duration-base) var(--ease-out); }
.k-dd__panel--up { transform-origin: bottom center; animation-name: k-rise-in; }
.k-dd__panel.k-leaving { animation: k-drop-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }
.k-popover { transform-origin: top left; animation: k-drop-in var(--duration-base) var(--ease-out); }
.k-popover--end { transform-origin: top right; }
.k-popover--up { transform-origin: bottom left; animation-name: k-rise-in; }
.k-popover.k-leaving { animation: k-drop-out var(--duration-fast) var(--ease-in) forwards; pointer-events: none; }

@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-fade-out { to { opacity: 0; } }
@keyframes k-rise-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes k-rise-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes k-drop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes k-drop-out { to { opacity: 0; transform: translateY(-2px) scale(.98); } }
@keyframes k-slide-in-right { from { transform: translateX(100%); } }
@keyframes k-slide-out-right { to { transform: translateX(100%); } }
@keyframes k-slide-in-left { from { transform: translateX(-100%); } }
@keyframes k-slide-out-left { to { transform: translateX(-100%); } }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes k-toast-out { to { opacity: 0; transform: scale(.98); } }
@keyframes k-reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes k-check-in { from { opacity: 0; transform: scale(.6); } }

/* Theme switch: setTheme() crossfades the whole page once instead of letting every color transition on its own. */
.k-theme-switching, .k-theme-switching *, .k-theme-switching *::before, .k-theme-switching *::after { transition: none !important; }
.k-theme-switching::view-transition-old(root), .k-theme-switching::view-transition-new(root) { animation-duration: var(--duration-slow); animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .k-scrim, .k-scrim > *, .k-dropdown__panel, .k-dd__panel, .k-datepicker, .k-popover, .k-kanban__card, .k-tag, .k-filelist__item, .k-chart__tip, .k-ctx > .k-menu, .k-menu--nested, .k-toasts__item, .k-acc__body, .k-check__box .k-icon { animation: none !important; }
  .k-skel, .k-spinner { animation-duration: 3s; }
}