/* Components. Names follow Polaris patterns: Page, Card, Button, Badge, Banner,
   IndexTable (k-table), Modal, EmptyState, Toast, Tabs. Only tokens, no raw colours. */

/* ---- Accent families (tool tiles, avatars, tags, teams) ------------------- */
[data-accent] {
  --accent: var(--p-color-accent-teal);
  --accent-soft: var(--p-color-accent-teal-soft);
  --accent-glow: var(--p-color-accent-teal-glow);
}
[data-accent='mint'] { --accent: var(--p-color-accent-mint); --accent-soft: var(--p-color-accent-mint-soft); --accent-glow: var(--p-color-accent-mint-glow); }
[data-accent='amber'] { --accent: var(--p-color-accent-amber); --accent-soft: var(--p-color-accent-amber-soft); --accent-glow: var(--p-color-accent-amber-glow); }
[data-accent='coral'] { --accent: var(--p-color-accent-coral); --accent-soft: var(--p-color-accent-coral-soft); --accent-glow: var(--p-color-accent-coral-glow); }
[data-accent='sky'] { --accent: var(--p-color-accent-sky); --accent-soft: var(--p-color-accent-sky-soft); --accent-glow: var(--p-color-accent-sky-glow); }
[data-accent='lilac'] { --accent: var(--p-color-accent-lilac); --accent-soft: var(--p-color-accent-lilac-soft); --accent-glow: var(--p-color-accent-lilac-glow); }
[data-accent='slate'] { --accent: var(--p-color-accent-slate); --accent-soft: var(--p-color-accent-slate-soft); --accent-glow: var(--p-color-accent-slate-glow); }

/* ---- Icon ----------------------------------------------------------------- */
.k-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-icon--xs { width: 14px; height: 14px; stroke-width: 2; }
.k-icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.k-icon--lg { width: 24px; height: 24px; }
.k-icon--xl { width: 32px; height: 32px; stroke-width: 1.5; }

/* ---- Layout helpers ------------------------------------------------------- */
.k-stack { display: flex; flex-direction: column; gap: var(--p-space-400); }
.k-stack--tight { gap: var(--p-space-200); }
.k-stack--loose { gap: var(--p-space-600); }
.k-row { display: flex; align-items: center; gap: var(--p-space-300); }
.k-row--between { justify-content: space-between; }
.k-row--wrap { flex-wrap: wrap; }
.k-row--top { align-items: flex-start; }
.k-grow { flex: 1 1 auto; min-width: 0; }
.k-grid { display: grid; gap: var(--p-space-400); }
.k-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.k-grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) {
  .k-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-grid--main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .k-grid--2, .k-grid--3, .k-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .k-grid--auto { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Page ----------------------------------------------------------------- */
.k-page {
  width: 100%;
  max-width: var(--p-layout-page-max);
  margin: 0 auto;
  padding: var(--p-space-600) var(--p-space-800) var(--p-space-1600);
}
.k-page--narrow { max-width: 880px; }
.k-page--wide { max-width: none; }
.k-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--p-space-400) var(--p-space-600);
  flex-wrap: wrap;
  margin-bottom: var(--p-space-600);
}
.k-page__heading { min-width: 0; flex: 1 1 320px; }
.k-page__title { font-size: var(--p-font-size-heading-2xl); margin-top: var(--p-space-100); }
.k-page__subtitle {
  margin-top: var(--p-space-200);
  max-width: 64ch;
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-lg);
}
.k-page__actions { display: flex; align-items: center; gap: var(--p-space-200); flex-wrap: wrap; }
.k-section { margin-top: var(--p-space-800); }
.k-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p-space-400);
  margin-bottom: var(--p-space-400);
}
.k-section__title { font-size: var(--p-font-size-heading-lg); }
.k-section__meta { color: var(--p-color-text-tertiary); font-size: var(--p-font-size-body-sm); }
@media (max-width: 767px) {
  .k-page { padding: var(--p-space-400) var(--p-space-400) var(--p-space-1200); }
  .k-page__title { font-size: var(--p-font-size-heading-xl); }
  .k-page__subtitle { font-size: var(--p-font-size-body-md); }
  .k-page__header { margin-bottom: var(--p-space-500); }
  .k-section { margin-top: var(--p-space-600); }
}

/* ---- Button --------------------------------------------------------------- */
.k-btn {
  --btn-bg: var(--p-color-bg-surface);
  --btn-fg: var(--p-color-text);
  --btn-border: var(--p-color-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-200);
  min-height: 40px;
  padding: 0 var(--p-space-400);
  border: 1px solid var(--btn-border);
  border-radius: var(--p-border-radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: var(--p-font-weight-semibold);
  font-size: var(--p-font-size-body-md);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--p-motion-duration-150) var(--p-motion-ease),
    border-color var(--p-motion-duration-150) var(--p-motion-ease),
    color var(--p-motion-duration-150) var(--p-motion-ease),
    transform var(--p-motion-duration-100) var(--p-motion-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-btn:hover { --btn-bg: var(--p-color-bg-surface-hover); --btn-border: var(--p-color-text); color: var(--btn-fg); }
.k-btn:active { transform: scale(0.98); }
.k-btn:focus-visible { border-radius: var(--p-border-radius-full); }
.k-btn[disabled], .k-btn[aria-disabled='true'] {
  --btn-bg: var(--p-color-bg-fill-disabled);
  --btn-fg: var(--p-color-text-disabled);
  --btn-border: transparent;
  cursor: not-allowed;
  transform: none;
}
.k-btn--primary {
  --btn-bg: var(--p-color-bg-fill-brand);
  --btn-fg: var(--p-color-text-brand-on-bg-fill);
  --btn-border: transparent;
}
.k-btn--primary:hover { --btn-bg: var(--p-color-bg-fill-brand-hover); --btn-border: transparent; }
.k-btn--primary:active { --btn-bg: var(--p-color-bg-fill-brand-active); }
.k-btn--magic {
  --btn-bg: var(--p-color-bg-fill-magic);
  --btn-fg: var(--p-color-brand-ink);
  --btn-border: transparent;
}
.k-btn--magic:hover { --btn-bg: #fff; --btn-border: transparent; }
.k-btn--critical {
  --btn-bg: var(--p-color-bg-fill-critical);
  --btn-fg: #fff;
  --btn-border: transparent;
}
.k-btn--critical:hover { --btn-bg: var(--p-color-bg-fill-critical-hover); --btn-border: transparent; }
.k-btn--plain {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--p-color-text-secondary);
  padding: 0 var(--p-space-300);
}
.k-btn--plain:hover { --btn-bg: var(--p-color-bg-surface-active); --btn-border: transparent; --btn-fg: var(--p-color-text); }
/* For ink surfaces, which stay dark in both themes: always light text. */
.k-btn--ghost-inverse {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.28);
}
.k-btn--ghost-inverse:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.6); }
.k-btn--sm { min-height: 32px; padding: 0 var(--p-space-300); font-size: var(--p-font-size-body-sm); }
.k-btn--lg { min-height: 48px; padding: 0 var(--p-space-600); font-size: var(--p-font-size-body-lg); }
.k-btn--block { width: 100%; }
.k-btn--icon { width: 40px; padding: 0; }
.k-btn--icon.k-btn--sm { width: 32px; }
@media (pointer: coarse) {
  .k-btn { min-height: 44px; }
  .k-btn--icon { width: 44px; }
  .k-btn--sm { min-height: 40px; }
  .k-btn--icon.k-btn--sm { width: 40px; }
}

/* ---- Card ----------------------------------------------------------------- */
.k-card {
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-400);
  padding: var(--p-space-500);
  box-shadow: var(--p-shadow-100);
  min-width: 0;
}
.k-card--flush { padding: 0; overflow: hidden; }
.k-card--sunken { background: var(--p-color-bg-surface-secondary); box-shadow: none; }
.k-card--inverse {
  background: var(--p-color-brand-ink);
  border-color: var(--p-color-nav-border);
  color: var(--p-color-nav-text-strong);
  --p-color-text-secondary: var(--p-color-nav-text);
  --p-color-text-brand: var(--p-color-brand-mint);
  --p-color-border-focus: var(--p-color-brand-mint);
}
.k-card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--p-motion-duration-200) var(--p-motion-ease-out),
    box-shadow var(--p-motion-duration-200) var(--p-motion-ease-out),
    border-color var(--p-motion-duration-200) var(--p-motion-ease);
}
.k-card--interactive:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--p-shadow-300);
  border-color: var(--p-color-border-strong);
}
.k-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-300);
  margin-bottom: var(--p-space-400);
}
.k-card__title { font-size: var(--p-font-size-heading-md); letter-spacing: -0.01em; }
.k-card__section { padding: var(--p-space-500); }
.k-card__section + .k-card__section { border-top: 1px solid var(--p-color-border-secondary); }
@media (max-width: 767px) {
  .k-card:not(.k-card--flush) { padding: var(--p-space-400); }
  .k-card__section { padding: var(--p-space-400); }
}

/* ---- Tile: the ink square with a glowing icon (the brand's signature) ----- */
.k-tile {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-brand-ink);
  color: var(--accent-glow, var(--p-color-brand-mint));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 16px -8px rgba(var(--p-shadow-rgb), 0.55);
}
.k-tile--sm { width: 32px; height: 32px; border-radius: var(--p-border-radius-200); }
.k-tile--lg { width: 56px; height: 56px; border-radius: var(--p-border-radius-400); }
.k-tile--xl { width: 72px; height: 72px; border-radius: var(--p-border-radius-500); }
.k-tile--soft { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
:root[data-theme='dark'] .k-tile:not(.k-tile--soft) { background: var(--p-color-bg-surface-tertiary); }

/* ---- Avatar --------------------------------------------------------------- */
.k-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--p-border-radius-full);
  background: var(--accent-soft, var(--p-color-bg-surface-brand));
  color: var(--accent, var(--p-color-text-brand));
  font-family: var(--p-font-family-display);
  font-size: 0.75rem;
  font-weight: var(--p-font-weight-semibold);
  letter-spacing: 0.01em;
  user-select: none;
  overflow: hidden;
}
.k-avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-avatar--xs { width: 20px; height: 20px; font-size: 0.5625rem; }
.k-avatar--sm { width: 24px; height: 24px; font-size: 0.625rem; }
.k-avatar--lg { width: 40px; height: 40px; font-size: 0.875rem; }
.k-avatar--xl { width: 56px; height: 56px; font-size: 1.125rem; }
.k-avatars { display: inline-flex; }
.k-avatars .k-avatar { box-shadow: 0 0 0 2px var(--p-color-bg-surface); }
.k-avatars .k-avatar + .k-avatar { margin-left: -8px; }

/* ---- Badge ---------------------------------------------------------------- */
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-150);
  min-height: 22px;
  padding: 0 var(--p-space-200);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-bg-fill-secondary);
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-xs);
  font-weight: var(--p-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.k-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.k-badge--plain::before { display: none; }
.k-badge--success { background: var(--p-color-bg-surface-success); color: var(--p-color-text-success); }
.k-badge--info { background: var(--p-color-bg-surface-info); color: var(--p-color-text-info); }
.k-badge--warning { background: var(--p-color-bg-surface-warning); color: var(--p-color-text-warning); }
.k-badge--critical { background: var(--p-color-bg-surface-critical); color: var(--p-color-text-critical); }
.k-badge--brand { background: var(--p-color-bg-surface-brand); color: var(--p-color-text-brand); }
.k-badge--accent { background: var(--accent-soft); color: var(--accent); }
.k-badge--inverse { background: rgba(255, 255, 255, 0.1); color: var(--p-color-brand-mint); }
.k-badge--mono { font-family: var(--p-font-family-mono); letter-spacing: 0; }
.k-badge--live::before { animation: k-pulse 1.8s ease-in-out infinite; }
@keyframes k-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); }
}

/* ---- Chip (filter pill, selectable) --------------------------------------- */
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-150);
  min-height: 34px;
  padding: 0 var(--p-space-300);
  border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-sm);
  font-weight: var(--p-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--p-motion-duration-150), border-color var(--p-motion-duration-150), color var(--p-motion-duration-150);
}
.k-chip:hover { border-color: var(--p-color-border-strong); color: var(--p-color-text); }
.k-chip[aria-pressed='true'], .k-chip[aria-selected='true'], .k-chip.is-active {
  background: var(--p-color-bg-inverse);
  border-color: var(--p-color-bg-inverse);
  color: var(--p-color-text-inverse);
}
.k-chip__count { font-family: var(--p-font-family-mono); font-size: 0.6875rem; opacity: 0.7; }
.k-chips { display: flex; gap: var(--p-space-200); overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.k-chips::-webkit-scrollbar { display: none; }
@media (pointer: coarse) { .k-chip { min-height: 40px; padding: 0 var(--p-space-400); } }

/* ---- Tag (static label) --------------------------------------------------- */
.k-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--p-space-200);
  border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-150);
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-xs);
  white-space: nowrap;
}

/* ---- Kbd ------------------------------------------------------------------ */
.k-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--p-space-150);
  border: 1px solid var(--p-color-border);
  border-bottom-width: 2px;
  border-radius: var(--p-border-radius-150);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text-tertiary);
  font-family: var(--p-font-family-mono);
  font-size: 0.6875rem;
  line-height: 1;
}

/* ---- Form ----------------------------------------------------------------- */
.k-field { display: flex; flex-direction: column; gap: var(--p-space-150); }
.k-label { font-size: var(--p-font-size-body-sm); font-weight: var(--p-font-weight-medium); color: var(--p-color-text); }
.k-help { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-tertiary); }
.k-error { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-critical); }
.k-input, .k-select, .k-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--p-space-400);
  border: 1px solid var(--p-color-border-strong);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text);
  font-size: var(--p-font-size-body-lg);
  transition: border-color var(--p-motion-duration-150), box-shadow var(--p-motion-duration-150);
}
.k-textarea { padding: var(--p-space-300) var(--p-space-400); min-height: 96px; resize: vertical; line-height: 1.5; }
.k-input::placeholder, .k-textarea::placeholder { color: var(--p-color-text-tertiary); }
.k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--p-color-text-secondary); }
.k-input:focus-visible, .k-select:focus-visible, .k-textarea:focus-visible {
  outline: none;
  border-color: var(--p-color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-color-border-focus) 22%, transparent);
  border-radius: var(--p-border-radius-300);
}
.k-input[aria-invalid='true'] { border-color: var(--p-color-border-critical); }
.k-input--sm, .k-select--sm { min-height: 36px; font-size: var(--p-font-size-body-md); padding: 0 var(--p-space-300); }
.k-select {
  appearance: none;
  padding-right: var(--p-space-1000);
  background-image: linear-gradient(45deg, transparent 50%, var(--p-color-icon) 50%), linear-gradient(135deg, var(--p-color-icon) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.k-input-group { position: relative; display: flex; align-items: center; }
.k-input-group > .k-icon { position: absolute; left: var(--p-space-400); color: var(--p-color-icon-secondary); pointer-events: none; }
.k-input-group > .k-input { padding-left: calc(var(--p-space-400) + 28px); }
.k-input-group__action { position: absolute; right: var(--p-space-150); }
.k-check { display: inline-flex; align-items: center; gap: var(--p-space-200); cursor: pointer; min-height: 28px; color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-md); }
.k-check input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--p-color-border-strong);
  border-radius: var(--p-border-radius-150);
  background: var(--p-color-bg-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.k-check input::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--p-color-text-brand-on-bg-fill); border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.k-check input:checked { background: var(--p-color-bg-fill-brand); border-color: var(--p-color-bg-fill-brand); }
.k-check input:checked::after { opacity: 1; }
.k-switch { position: relative; display: inline-flex; align-items: center; gap: var(--p-space-300); cursor: pointer; }
.k-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.k-switch__track { width: 44px; height: 26px; border-radius: var(--p-border-radius-full); background: var(--p-color-border-strong); transition: background var(--p-motion-duration-200); position: relative; flex: none; }
.k-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--p-shadow-200); transition: transform var(--p-motion-duration-200) var(--p-motion-ease-out); }
.k-switch input:checked + .k-switch__track { background: var(--p-color-bg-fill-accent); }
.k-switch input:checked + .k-switch__track::after { transform: translateX(18px); }
.k-switch input:focus-visible + .k-switch__track { outline: 2px solid var(--p-color-border-focus); outline-offset: 2px; }

/* Segmented control (language, theme, view switchers) */
.k-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-bg-fill-secondary);
  gap: 2px;
}
.k-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-150);
  min-height: 30px;
  min-width: 36px;
  padding: 0 var(--p-space-300);
  border-radius: var(--p-border-radius-full);
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-sm);
  font-weight: var(--p-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--p-motion-duration-150), color var(--p-motion-duration-150);
}
.k-segmented__item:hover { color: var(--p-color-text); }
.k-segmented__item[aria-pressed='true'], .k-segmented__item[aria-current='true'], .k-segmented__item.is-active {
  background: var(--p-color-bg-surface);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-100);
}
.k-segmented--mono .k-segmented__item { font-family: var(--p-font-family-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
@media (pointer: coarse) { .k-segmented__item { min-height: 38px; min-width: 44px; } }

/* ---- Tabs ----------------------------------------------------------------- */
.k-tabs {
  display: flex;
  gap: var(--p-space-100);
  border-bottom: 1px solid var(--p-color-border);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--p-space-600);
}
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-200);
  min-height: 44px;
  padding: 0 var(--p-space-300);
  color: var(--p-color-text-secondary);
  font-weight: var(--p-font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.k-tab:hover { color: var(--p-color-text); }
.k-tab[aria-current='page'], .k-tab[aria-selected='true'] { color: var(--p-color-text); }
.k-tab[aria-current='page']::after, .k-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: var(--p-space-300);
  right: var(--p-space-300);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--p-color-bg-fill-accent);
}

/* ---- Banner --------------------------------------------------------------- */
.k-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--p-space-300);
  padding: var(--p-space-300) var(--p-space-400);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-bg-surface-info);
  color: var(--p-color-text-info);
  font-size: var(--p-font-size-body-md);
}
.k-banner .k-icon { margin-top: 1px; }
.k-banner__title { font-weight: var(--p-font-weight-semibold); }
.k-banner--success { background: var(--p-color-bg-surface-success); color: var(--p-color-text-success); }
.k-banner--warning { background: var(--p-color-bg-surface-warning); color: var(--p-color-text-warning); }
.k-banner--critical { background: var(--p-color-bg-surface-critical); color: var(--p-color-text-critical); }
.k-banner--brand { background: var(--p-color-bg-surface-brand); color: var(--p-color-text-magic); }

/* ---- Table (IndexTable) --------------------------------------------------- */
.k-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-table { width: 100%; font-size: var(--p-font-size-body-md); }
.k-table th {
  padding: var(--p-space-300) var(--p-space-400);
  text-align: left;
  font-family: var(--p-font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--p-font-weight-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--p-color-text-tertiary);
  background: var(--p-color-bg-surface-secondary);
  border-bottom: 1px solid var(--p-color-border);
  white-space: nowrap;
}
.k-table td {
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: 1px solid var(--p-color-border-secondary);
  vertical-align: middle;
}
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr { transition: background var(--p-motion-duration-100); }
.k-table tbody tr:hover { background: var(--p-color-bg-surface-hover); }
.k-table .is-num, .k-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.k-table--compact td, .k-table--compact th { padding: var(--p-space-200) var(--p-space-300); }

/* ---- List (ResourceList) -------------------------------------------------- */
.k-list > li + li { border-top: 1px solid var(--p-color-border-secondary); }
.k-list__item {
  display: flex;
  align-items: center;
  gap: var(--p-space-300);
  padding: var(--p-space-300) var(--p-space-500);
  color: inherit;
  text-decoration: none;
  min-height: 56px;
  transition: background var(--p-motion-duration-100);
}
a.k-list__item:hover { background: var(--p-color-bg-surface-hover); color: inherit; }
.k-list__title { font-weight: var(--p-font-weight-medium); }
.k-list__meta { color: var(--p-color-text-tertiary); font-size: var(--p-font-size-body-sm); }

/* ---- KPI ------------------------------------------------------------------ */
.k-kpi { display: flex; flex-direction: column; gap: var(--p-space-200); min-width: 0; }
.k-kpi__label {
  font-family: var(--p-font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--p-color-text-tertiary);
}
.k-kpi__value {
  font-family: var(--p-font-family-display);
  font-size: var(--p-font-size-heading-2xl);
  font-weight: var(--p-font-weight-semibold);
  letter-spacing: var(--p-font-letter-spacing-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--p-font-family-mono);
  font-size: var(--p-font-size-body-xs);
  font-weight: var(--p-font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.k-delta--up { color: var(--p-color-text-success); }
.k-delta--down { color: var(--p-color-text-critical); }
.k-delta--flat { color: var(--p-color-text-tertiary); }

/* ---- Empty state ---------------------------------------------------------- */
.k-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--p-space-300);
  padding: var(--p-space-1200) var(--p-space-600);
  color: var(--p-color-text-secondary);
}
.k-empty__title { font-size: var(--p-font-size-heading-lg); color: var(--p-color-text); }
.k-empty p { max-width: 46ch; }
.k-empty__actions { display: flex; gap: var(--p-space-200); margin-top: var(--p-space-200); flex-wrap: wrap; justify-content: center; }

/* ---- Menu / popover ------------------------------------------------------- */
.k-menu {
  min-width: 220px;
  padding: var(--p-space-150);
  border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-400);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-400);
}
.k-menu__item {
  display: flex;
  align-items: center;
  gap: var(--p-space-300);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--p-space-300);
  border-radius: var(--p-border-radius-200);
  color: var(--p-color-text);
  font-size: var(--p-font-size-body-md);
  text-align: left;
  text-decoration: none;
}
.k-menu__item:hover { background: var(--p-color-bg-surface-active); color: var(--p-color-text); }
.k-menu__item .k-icon { color: var(--p-color-icon); }
.k-menu__item--critical, .k-menu__item--critical .k-icon { color: var(--p-color-text-critical); }
.k-menu__label { padding: var(--p-space-200) var(--p-space-300) var(--p-space-100); font-family: var(--p-font-family-mono); font-size: 0.6875rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--p-color-text-tertiary); }
.k-menu__divider { height: 1px; margin: var(--p-space-150) 0; background: var(--p-color-border-secondary); }
.k-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-300); padding: var(--p-space-150) var(--p-space-300); font-size: var(--p-font-size-body-md); color: var(--p-color-text-secondary); }

/* ---- Modal (native <dialog>) ---------------------------------------------- */
.k-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-500);
  background: var(--p-color-bg-surface);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-600);
  overflow: hidden;
}
.k-modal--lg { width: min(880px, calc(100vw - 32px)); }
.k-modal::backdrop { background: var(--p-color-backdrop); backdrop-filter: blur(3px); }
.k-modal[open] { display: flex; flex-direction: column; animation: k-pop var(--p-motion-duration-200) var(--p-motion-ease-out); }
.k-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-400); padding: var(--p-space-500) var(--p-space-600) var(--p-space-300); }
.k-modal__title { font-size: var(--p-font-size-heading-lg); }
.k-modal__body { padding: var(--p-space-300) var(--p-space-600) var(--p-space-500); overflow-y: auto; }
.k-modal__footer { display: flex; justify-content: flex-end; gap: var(--p-space-200); padding: var(--p-space-400) var(--p-space-600); border-top: 1px solid var(--p-color-border-secondary); background: var(--p-color-bg-surface-secondary); }
@keyframes k-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .k-modal { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: var(--p-border-radius-600) var(--p-border-radius-600) 0 0; border-bottom: 0; }
  .k-modal[open] { animation-name: k-sheet; }
  .k-modal__footer { padding-bottom: calc(var(--p-space-400) + env(safe-area-inset-bottom)); }
  .k-modal__footer .k-btn { flex: 1; }
}
@keyframes k-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Toast ---------------------------------------------------------------- */
.k-toasts {
  position: fixed;
  left: 50%;
  bottom: var(--p-space-600);
  z-index: var(--p-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-space-200);
  transform: translateX(-50%);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.k-toast {
  display: flex;
  align-items: center;
  gap: var(--p-space-300);
  padding: var(--p-space-300) var(--p-space-400);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-brand-ink);
  color: #fff;
  font-size: var(--p-font-size-body-md);
  font-weight: var(--p-font-weight-medium);
  box-shadow: var(--p-shadow-500);
  pointer-events: auto;
  animation: k-toast-in var(--p-motion-duration-300) var(--p-motion-ease-out);
}
.k-toast .k-icon { color: var(--p-color-brand-mint); }
.k-toast--critical .k-icon { color: #ff9e86; }
.k-toast__action { color: var(--p-color-brand-mint); font-weight: var(--p-font-weight-semibold); }
.k-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--p-motion-duration-200), transform var(--p-motion-duration-200); }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .k-toasts { bottom: calc(var(--p-layout-bottom-nav) + var(--p-space-800) + env(safe-area-inset-bottom)); } }

/* ---- Skeleton ------------------------------------------------------------- */
.k-skeleton {
  border-radius: var(--p-border-radius-200);
  background: linear-gradient(90deg, var(--p-color-bg-surface-tertiary) 0%, var(--p-color-bg-surface-secondary) 50%, var(--p-color-bg-surface-tertiary) 100%);
  background-size: 200% 100%;
  animation: k-shimmer 1.4s linear infinite;
  min-height: 12px;
}
@keyframes k-shimmer { to { background-position: -200% 0; } }

/* ---- Progress & meter ----------------------------------------------------- */
.k-meter { height: 6px; border-radius: var(--p-border-radius-full); background: var(--p-color-bg-fill-secondary); overflow: hidden; }
.k-meter__bar { height: 100%; border-radius: inherit; background: var(--p-color-bg-fill-accent); }
.k-meter--warning .k-meter__bar { background: var(--p-color-bg-fill-warning); }
.k-meter--critical .k-meter__bar { background: var(--p-color-bg-fill-critical); }

/* ---- Divider with label --------------------------------------------------- */
.k-divider { display: flex; align-items: center; gap: var(--p-space-300); color: var(--p-color-text-tertiary); font-size: var(--p-font-size-body-sm); }
.k-divider::before, .k-divider::after { content: ''; flex: 1; height: 1px; background: var(--p-color-border); }

/* ---- Status dot ----------------------------------------------------------- */
.k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-color-icon-secondary); flex: none; }
.k-dot--success { background: var(--p-color-bg-fill-success); }
.k-dot--warning { background: var(--p-color-bg-fill-warning); }
.k-dot--critical { background: var(--p-color-bg-fill-critical); }
.k-dot--live { background: var(--p-color-brand-mint); box-shadow: 0 0 0 0 rgba(126, 230, 207, 0.6); animation: k-live 2s ease-out infinite; }
@keyframes k-live { 0% { box-shadow: 0 0 0 0 rgba(126, 230, 207, 0.55); } 100% { box-shadow: 0 0 0 8px rgba(126, 230, 207, 0); } }

/* ---- Code block ----------------------------------------------------------- */
.k-code {
  display: block;
  padding: var(--p-space-400);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-brand-ink);
  color: #e3f3ef;
  font-family: var(--p-font-family-mono);
  font-size: var(--p-font-size-body-sm);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}