/* ════════════════════════════════════════════════════════════════════
   FM-218 — Component Library (8 primitives + 5 helpers)
   ════════════════════════════════════════════════════════════════════

   Loads AFTER design-system.css. All styles consume tokens, never
   raw hex. Every component is single source of truth.

   Components:
     AppShell  PageHeader  MetricCard  DataCard
     RowItem   EmptyState  StatusPill  Button

   Helpers:
     DataTable  FormField  Modal  Toast  Skeleton

   ════════════════════════════════════════════════════════════════════ */


/* ════ AppShell — sidebar + main + mobile tabbar ════════════════════ */

.ds-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w-expanded) 1fr;
  min-height: 100vh;
}
@media (max-width: 1023px) {
  .ds-shell { grid-template-columns: 1fr; }
}

/* — Sidebar (desktop) — */
.ds-shell {
  --sidebar-w: var(--sidebar-w-expanded);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}
.ds-shell[data-collapsed="true"] {
  --sidebar-w: var(--sidebar-w-collapsed);
}
@media (max-width: 1023px) {
  .ds-shell { grid-template-columns: 1fr; }
}

.ds-shell-sidebar {
  background: var(--grad-sidebar);
  color: var(--c-text-inv);
  padding: var(--space-4) var(--space-3);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  z-index: var(--z-sidebar);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sidebar-inset);
  border-inline-end: 1px solid rgba(0,0,0,.25);
  transition: width var(--dur-2) var(--ease);
}
.ds-shell-sidebar::-webkit-scrollbar { width: 4px; }
.ds-shell-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
@media (max-width: 1023px) {
  .ds-shell-sidebar { display: none; }
}
.ds-shell[data-collapsed="true"] .ds-shell-sidebar {
  padding: var(--space-4) var(--space-2);
}

/* Brand row: org logo + name + collapse button */
.ds-sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-4);
  border-block-end: 1px solid rgba(255,255,255,.08);
  margin-block-end: var(--space-3);
  min-height: 56px;
}
.ds-sidebar-brand-link {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.ds-sidebar-brand-mark {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--grad-gold);
  color: var(--c-primary-deep);
  display: grid; place-items: center;
  font: var(--w-extrabold) var(--text-md)/1 var(--font-display);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 14px -6px rgba(0,0,0,.20),
    0 4px 10px -4px rgba(201,161,74,.45);
  letter-spacing: -.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-sidebar-brand-mark img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md);
}
.ds-sidebar-brand-text {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
  font-family: var(--font-display);
}
.ds-sidebar-brand-text strong {
  font-size: var(--text-sm); font-weight: var(--w-bold);
  color: var(--c-text-inv);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-sidebar-brand-text small {
  font-size: var(--text-xs); font-weight: var(--w-regular);
  color: rgba(232,207,144,.72);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ds-sidebar-collapse-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: rgba(251,248,240,.55);
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.ds-sidebar-collapse-btn:hover {
  background: rgba(255,255,255,.06);
  color: var(--c-text-inv);
  border-color: rgba(255,255,255,.14);
}
.ds-sidebar-collapse-btn i {
  font-size: var(--text-xs);
  transition: transform var(--dur-2) var(--ease);
}
.ds-shell[data-collapsed="true"] .ds-sidebar-collapse-btn i {
  transform: scaleX(-1);
}
.ds-shell[data-collapsed="true"] .ds-sidebar-brand-text { display: none; }
.ds-shell[data-collapsed="true"] .ds-sidebar-brand { justify-content: center; }
.ds-shell[data-collapsed="true"] .ds-sidebar-brand-link { flex: 0 0 auto; }

/* Nav rail */
.ds-sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.ds-sidebar-section-label {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .06em; color: rgba(232,207,144,.55);
  font-weight: var(--w-bold);
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.ds-shell[data-collapsed="true"] .ds-sidebar-section-label { display: none; }

.ds-sidebar-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--r-md);
  color: rgba(251,248,240,.78);
  font-size: var(--text-sm); font-weight: var(--w-medium);
  letter-spacing: -.005em;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-1) var(--ease);
  position: relative;
  white-space: nowrap;
}
.ds-sidebar-item i, .ds-sidebar-item svg {
  font-size: var(--text-md);
  width: 20px; text-align: center;
  color: rgba(251,248,240,.55);
  transition: color var(--dur-2) var(--ease);
  flex-shrink: 0;
}
.ds-sidebar-item:hover {
  background: rgba(255,255,255,.05);
  color: var(--c-text-inv);
}
.ds-sidebar-item:hover i { color: var(--c-text-inv); }
.ds-sidebar-item.is-active {
  background: rgba(255,255,255,.07);
  color: var(--c-text-inv);
  font-weight: var(--w-semibold);
}
.ds-sidebar-item.is-active i { color: var(--c-gold); }
.ds-sidebar-item.is-active::after {
  content: ''; position: absolute;
  inset-block: 6px; inset-inline-start: -8px;
  width: 3px; background: var(--c-gold); border-radius: var(--r-full);
  box-shadow: 0 0 12px rgba(201,161,74,.55);
}
.ds-sidebar-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-shell[data-collapsed="true"] .ds-sidebar-item-label { display: none; }
.ds-shell[data-collapsed="true"] .ds-sidebar-item {
  justify-content: center;
  padding: 10px;
}
.ds-shell[data-collapsed="true"] .ds-sidebar-item.is-active::after { inset-inline-start: 0; }

.ds-sidebar-item-badge {
  margin-inline-start: auto;
  min-width: 22px; height: 20px;
  padding: 0 7px;
  background: var(--c-gold);
  color: var(--c-primary-deep);
  border-radius: var(--r-full);
  font: var(--w-extrabold) var(--text-xs)/1 var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  font-variant-numeric: tabular-nums;
}
.ds-sidebar-item-badge.tone-danger { background: var(--c-danger); color: #fff; }
.ds-shell[data-collapsed="true"] .ds-sidebar-item-badge {
  position: absolute;
  inset-block-start: 4px; inset-inline-end: 4px;
  min-width: 16px; height: 16px;
  font-size: 9px; padding: 0 4px;
}

.ds-sidebar-footer {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 2px;
}
.ds-sidebar-footer .ds-sidebar-item { color: rgba(251,248,240,.62); }
.ds-sidebar-user {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-block-start: var(--space-2);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.05);
}
.ds-shell[data-collapsed="true"] .ds-sidebar-user {
  padding: var(--space-2);
  justify-content: center;
}
.ds-shell[data-collapsed="true"] .ds-sidebar-user > div:not(.ds-sidebar-user-avatar) {
  display: none;
}
.ds-sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--grad-gold); color: var(--c-primary-deep);
  display: grid; place-items: center;
  font-weight: var(--w-extrabold); font-size: var(--text-sm);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 4px 10px -4px rgba(201,161,74,.50);
}
.ds-sidebar-user-name {
  font-size: var(--text-sm); font-weight: var(--w-semibold);
  color: var(--c-text-inv);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-sidebar-user-role {
  font-size: var(--text-xs); color: rgba(255,255,255,.6);
}

/* — Top bar (mobile + desktop sticky header) — */
.ds-shell-main {
  display: flex; flex-direction: column;
  min-width: 0;   /* prevent grid blowout */
}
.ds-shell-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: rgba(255,254,251,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--c-border);
  box-shadow: 0 1px 0 rgba(6,28,51,.02), 0 8px 24px -16px rgba(6,28,51,.10);
  height: var(--topbar-h); padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
@media (max-width: 1023px) {
  .ds-shell-topbar { padding: 0 var(--space-4); }
}
.ds-shell-topbar-menu {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: none; place-items: center;
  background: transparent; color: var(--c-text-2);
}
.ds-shell-topbar-menu:hover { background: var(--c-surface-2); }
@media (max-width: 1023px) {
  .ds-shell-topbar-menu { display: grid; }
}
.ds-shell-topbar-title {
  font-size: var(--text-md); font-weight: var(--w-bold);
  color: var(--c-text-1);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.ds-shell-topbar-actions {
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}

/* — Content area — */
.ds-shell-content {
  flex: 1;
  padding: var(--space-5);
  padding-block-end: calc(var(--space-5) + var(--tabbar-h));   /* mobile tabbar clearance */
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .ds-shell-content { padding: var(--space-4); padding-block-end: calc(var(--space-4) + var(--tabbar-h)); }
}
@media (min-width: 1024px) {
  .ds-shell-content { padding-block-end: var(--space-7); }
}

/* — Mobile bottom tab bar — */
.ds-shell-tabbar {
  display: none;
  position: fixed; inset-inline: 0; inset-block-end: 0;
  height: var(--tabbar-h); background: var(--c-surface-1);
  border-block-start: 1px solid var(--c-border);
  z-index: var(--z-tabbar);
  box-shadow: 0 -4px 16px rgba(12,53,89,.06);
}
@media (max-width: 1023px) {
  .ds-shell-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.ds-tabbar-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  color: var(--c-text-3); font-size: var(--text-xs);
  font-weight: var(--w-medium);
  position: relative;
  transition: color var(--dur-1) var(--ease);
}
.ds-tabbar-item i { font-size: 18px; }
.ds-tabbar-item.is-active { color: var(--c-primary); font-weight: var(--w-semibold); }
.ds-tabbar-item.is-active::before {
  content: ''; position: absolute;
  inset-block-start: 0; inset-inline: 25%;
  height: 3px; background: var(--c-gold); border-radius: var(--r-full);
}

/* — Sidebar drawer (mobile) — */
.ds-shell-drawer {
  display: none;
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(15,23,42,.55);
}
.ds-shell-drawer[data-open="true"] { display: block; }
.ds-shell-drawer-panel {
  position: absolute; inset-block: 0;
  inset-inline-start: 0;
  width: 80%; max-width: 280px;
  background: var(--c-primary); color: var(--c-text-inv);
  padding: var(--space-5) var(--space-3);
  overflow-y: auto;
  animation: ds-drawer-in var(--dur-3) var(--ease);
}
@keyframes ds-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}


/* ════ PageHeader ════════════════════════════════════════════════════ */
.ds-page-header {
  display: flex; align-items: flex-end; gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--c-border);
  position: relative;
}
.ds-page-header::after {
  /* gold accent line sitting under the divider, aligned to the inline-start */
  content: ''; position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 56px; height: 2px;
  background: var(--grad-gold);
  border-radius: var(--r-full);
  box-shadow: 0 0 12px rgba(201,161,74,.45);
}
.ds-page-header-text { flex: 1; min-width: 0; }
.ds-page-header h1 {
  font-size: var(--text-xl);
  font-weight: var(--w-extrabold);
  color: var(--c-text-1);
  line-height: var(--lh-tight);
  letter-spacing: -.018em;
}
@media (min-width: 1024px) {
  .ds-page-header h1 { font-size: var(--text-3xl); }
}
.ds-page-header-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--c-gold-2);
  font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: .08em;
  margin-block-end: var(--space-3);
  padding: 3px 10px 3px 8px;
  background: var(--c-gold-soft);
  border-radius: var(--r-full);
  border: 1px solid rgba(201,161,74,.22);
}
.ds-page-header-eyebrow i { font-size: 10px; color: var(--c-gold-2); }
.ds-page-header-subtitle {
  font-size: var(--text-base); color: var(--c-text-2);
  margin-block-start: var(--space-2);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.ds-page-header-actions {
  display: flex; gap: var(--space-2); flex-shrink: 0;
}


/* ════ MetricCard ════════════════════════════════════════════════════ */
.ds-metric {
  background: var(--c-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}
.ds-metric::before {
  /* hairline gold accent at top — quiet but present */
  content: ''; position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background: var(--grad-gold);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.ds-metric:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--c-border-2);
}
.ds-metric:hover::before { opacity: 1; }

.ds-metric--hero {
  background: var(--grad-primary-hero);
  color: var(--c-text-inv);
  border-color: var(--c-primary-deep);
  box-shadow: var(--shadow-lg);
}
.ds-metric--hero::before { opacity: 1; }
.ds-metric--hero .ds-metric-label { color: rgba(232,207,144,.92); }
.ds-metric--hero .ds-metric-value {
  color: var(--c-text-inv);
  font-size: var(--text-4xl);
}
.ds-metric--hero .ds-metric-meta  { color: rgba(251,248,240,.70); }

.ds-metric--gold {
  background: var(--grad-gold-soft);
  border-color: rgba(201,161,74,.30);
}
.ds-metric--gold::before { opacity: 1; }

.ds-metric-head {
  display: flex; align-items: center; gap: var(--space-3);
}
.ds-metric-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--c-primary-soft); color: var(--c-primary);
  display: grid; place-items: center;
  font-size: var(--text-md);
  flex-shrink: 0;
}
.ds-metric--hero .ds-metric-icon {
  background: rgba(255,255,255,.10); color: var(--c-gold-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.ds-metric--gold .ds-metric-icon {
  background: var(--grad-gold); color: var(--c-primary-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px -4px rgba(201,161,74,.40);
}

.ds-metric-label {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ds-metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--w-extrabold);
  color: var(--c-text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: var(--space-2);
}
.ds-metric-value-suffix {
  font-size: var(--text-md);
  color: var(--c-text-3);
  font-weight: var(--w-medium);
  font-family: var(--font-display);
  letter-spacing: 0;
}
.ds-metric--hero .ds-metric-value-suffix { color: rgba(232,207,144,.80); }
.ds-metric-meta {
  font-size: var(--text-xs); color: var(--c-text-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.ds-metric-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: var(--w-bold);
  padding: 2px 8px; border-radius: var(--r-full);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.ds-metric-trend.up   { color: var(--c-success); background: var(--c-success-soft); }
.ds-metric-trend.down { color: var(--c-danger);  background: var(--c-danger-soft); }
.ds-metric-trend.flat { color: var(--c-text-3);  background: var(--c-surface-2); }
.ds-metric--hero .ds-metric-trend.up   { background: rgba(22,121,77,.30); color: #b4eccb; }
.ds-metric--hero .ds-metric-trend.down { background: rgba(168,38,28,.30); color: #f5b8b1; }
.ds-metric--hero .ds-metric-trend.flat { background: rgba(255,255,255,.10); color: rgba(255,255,255,.75); }

.ds-metric-spark {
  height: 36px; width: 100%;
  background:
    linear-gradient(180deg, rgba(26,77,126,.10) 0%, rgba(26,77,126,0) 100%),
    repeating-linear-gradient(90deg, rgba(20,32,44,.04) 0 1px, transparent 1px 24px);
  border-radius: var(--r-sm);
  display: flex; align-items: flex-end; gap: 3px; padding: 4px;
}
.ds-metric--hero .ds-metric-spark {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.04);
}
.ds-metric-spark-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--c-primary-3) 0%, var(--c-primary) 100%);
  border-radius: 2px;
  min-height: 4px;
}
.ds-metric--hero .ds-metric-spark-bar {
  background: linear-gradient(180deg, var(--c-gold-light) 0%, var(--c-gold) 100%);
}


/* ════ DataCard ══════════════════════════════════════════════════════ */
.ds-card {
  background: var(--c-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;   /* clip table headers etc. */
  min-width: 0;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: box-shadow var(--dur-2) var(--ease);
}
.ds-card:hover { box-shadow: var(--shadow-card-hover); }
.ds-card--accent::before {
  content: ''; position: absolute;
  inset-block-start: 0; inset-inline: 0; height: 3px;
  background: var(--grad-gold);
}
.ds-card-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(180deg, #fefcf6 0%, var(--c-elevated) 100%);
  border-block-end: 1px solid var(--c-border);
}
.ds-card-title {
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  color: var(--c-text-1);
  flex: 1; min-width: 0;
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: var(--space-2);
}
.ds-card-title i {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--c-primary-soft); color: var(--c-primary);
  display: grid; place-items: center;
  font-size: var(--text-sm);
}
.ds-card-meta {
  font-size: var(--text-xs); color: var(--c-text-3);
  font-weight: var(--w-medium);
  letter-spacing: .02em;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--c-border);
}
.ds-card-actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.ds-card-body {
  padding: var(--space-5);
  overflow-wrap: anywhere;
}
.ds-card-body--flush { padding: 0; }
.ds-card-footer {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: var(--text-sm); color: var(--c-text-2);
}


/* ════ RowItem ═══════════════════════════════════════════════════════ */
.ds-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--c-border);
  background: var(--c-surface-1);
  transition: background var(--dur-1) var(--ease);
}
.ds-row:last-child { border-block-end: 0; }
.ds-row:hover { background: var(--c-surface-2); cursor: pointer; }
.ds-row.is-disabled { opacity: .55; cursor: not-allowed; }
.ds-row.is-selected { background: var(--c-primary-soft); }
.ds-row.is-unread { background: var(--c-info-soft); }
.ds-row.is-unread::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: var(--r-full); background: var(--c-primary);
  margin-inline-end: -var(--space-2);
}

.ds-row-avatar {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-surface-3); color: var(--c-text-2);
  font-size: var(--text-md); font-weight: var(--w-bold);
  flex-shrink: 0;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.ds-row-avatar.tone-primary { background: var(--c-primary-soft); color: var(--c-primary); }
.ds-row-avatar.tone-gold    { background: var(--grad-gold-soft); color: var(--c-gold-deep); border: 1px solid rgba(201,161,74,.18); }
.ds-row-avatar.tone-info    { background: var(--c-info-soft);    color: var(--c-info); }
.ds-row-avatar.tone-success { background: var(--c-success-soft); color: var(--c-success); }
.ds-row-avatar.tone-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.ds-row-avatar.tone-danger  { background: var(--c-danger-soft);  color: var(--c-danger); }

.ds-row-body { min-width: 0; }
.ds-row-title {
  font-weight: var(--w-semibold);
  font-size: var(--text-base);
  color: var(--c-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-row-subtitle {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  margin-block-start: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-row-tags {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-block-start: var(--space-1);
}
.ds-row-meta {
  font-size: var(--text-xs); color: var(--c-text-3);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: end;
}
.ds-row-actions {
  display: flex; gap: var(--space-1);
  flex-shrink: 0;
}


/* ════ EmptyState ════════════════════════════════════════════════════ */
.ds-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--c-text-3);
}
.ds-empty-icon {
  width: 84px; height: 84px; border-radius: var(--r-full);
  background: var(--grad-gold-soft);
  border: 1px solid rgba(201,161,74,.20);
  margin-inline: auto;
  display: grid; place-items: center;
  font-size: 32px;
  color: var(--c-gold-2);
  margin-block-end: var(--space-5);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 24px -10px rgba(201,161,74,.30);
}
.ds-empty-icon::before {
  /* halo ring */
  content: ''; position: absolute;
  inset: -8px; border-radius: var(--r-full);
  border: 1px dashed rgba(201,161,74,.30);
  animation: ds-empty-halo 6s linear infinite;
}
@keyframes ds-empty-halo { to { transform: rotate(360deg); } }
.ds-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  color: var(--c-text-1);
  letter-spacing: -.01em;
}
.ds-empty-hint {
  font-size: var(--text-sm);
  color: var(--c-text-2);
  margin-block-start: var(--space-2);
  max-width: 380px;
  margin-inline: auto;
  line-height: var(--lh-relaxed);
}
.ds-empty-action { margin-block-start: var(--space-5); }


/* ════ Action Zone — the dominant "needs your attention" surface ═════
   Drop-in component for operations command-center pages. ALWAYS the
   single most prominent block on the page. Two visual modes:
     - default (red gradient)  → there are urgent items
     - .tone-ok (green)        → nothing urgent, "all clear"
   ─────────────────────────────────────────────────────────────────── */
.ds-action-zone {
  border-radius: var(--r-lg);
  padding: var(--space-5);
  position: relative;
  color: var(--c-text-1);
  /* Default (no tone modifier) = quiet neutral — red is reserved for
     tone-critical only. */
  background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-1) 100%);
  border: 1px solid var(--c-border);
  box-shadow:
    inset 4px 0 0 var(--c-text-3),
    var(--shadow-card);
}
.ds-action-zone.tone-critical {
  background: linear-gradient(135deg, var(--c-danger-soft) 0%, #f9dcd6 100%);
  border-color: rgba(168,38,28,.22);
  box-shadow:
    inset 4px 0 0 var(--c-danger),
    0 1px 2px rgba(168,38,28,.06),
    0 18px 36px -16px rgba(168,38,28,.30);
}
.ds-action-zone.tone-warning {
  background: linear-gradient(135deg, var(--c-warning-soft) 0%, #f6e2bd 100%);
  border-color: rgba(168,101,15,.22);
  box-shadow:
    inset 4px 0 0 var(--c-warning),
    0 1px 2px rgba(168,101,15,.06),
    0 18px 36px -16px rgba(168,101,15,.24);
}
.ds-action-zone.tone-info {
  background: linear-gradient(135deg, var(--c-info-soft) 0%, #cfdfee 100%);
  border-color: rgba(26,77,126,.22);
  box-shadow:
    inset 4px 0 0 var(--c-info),
    0 1px 2px rgba(26,77,126,.06),
    0 18px 36px -16px rgba(26,77,126,.22);
}
.ds-action-zone.tone-ok {
  background: linear-gradient(135deg, var(--c-success-soft) 0%, #c8ebd4 100%);
  border-color: rgba(22,121,77,.22);
  box-shadow:
    inset 4px 0 0 var(--c-success),
    0 1px 2px rgba(22,121,77,.06),
    0 18px 36px -16px rgba(22,121,77,.22);
}
.ds-action-zone-head {
  display: flex; align-items: center; gap: var(--space-4);
}
.ds-action-zone-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: var(--text-xl);
  background: rgba(20,32,44,.08);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.ds-action-zone.tone-critical .ds-action-zone-icon {
  background: rgba(168,38,28,.14); color: var(--c-danger); border-color: rgba(168,38,28,.18);
}
.ds-action-zone.tone-warning .ds-action-zone-icon {
  background: rgba(168,101,15,.14); color: var(--c-warning); border-color: rgba(168,101,15,.18);
}
.ds-action-zone.tone-info .ds-action-zone-icon {
  background: rgba(26,77,126,.14); color: var(--c-info); border-color: rgba(26,77,126,.18);
}
.ds-action-zone.tone-ok .ds-action-zone-icon {
  background: rgba(22,121,77,.14); color: var(--c-success); border-color: rgba(22,121,77,.18);
}
.ds-action-zone-text { flex: 1; min-width: 0; }
.ds-action-zone-title {
  font-size: var(--text-lg); font-weight: var(--w-extrabold);
  color: var(--c-text-1); letter-spacing: -.01em;
}
.ds-action-zone-subtitle {
  font-size: var(--text-sm); color: var(--c-text-2);
  margin-block-start: 2px;
}
.ds-action-zone-count {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--w-extrabold);
  color: var(--c-text-3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  text-shadow: none;
}
.ds-action-zone.tone-critical .ds-action-zone-count {
  color: var(--c-danger);  text-shadow: 0 2px 6px rgba(168,38,28,.20);
}
.ds-action-zone.tone-warning .ds-action-zone-count {
  color: var(--c-warning); text-shadow: 0 2px 6px rgba(168,101,15,.20);
}
.ds-action-zone.tone-info .ds-action-zone-count {
  color: var(--c-info);    text-shadow: 0 2px 6px rgba(26,77,126,.18);
}
.ds-action-zone.tone-ok .ds-action-zone-count {
  color: var(--c-success); text-shadow: 0 2px 6px rgba(22,121,77,.20);
}
.ds-action-zone-list {
  margin-block-start: var(--space-4);
  display: grid; gap: var(--space-2);
}
.ds-action-zone-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(168,38,28,.10);
  border-radius: var(--r-md);
  color: var(--c-text-1);
  text-decoration: none;
  font-family: var(--font-display);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.ds-action-zone-item:hover {
  background: rgba(255,255,255,.85);
  transform: translateX(-2px);
}
.ds-action-zone-item-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(20,32,44,.08);
  color: var(--c-text-2);
  flex-shrink: 0;
  font-size: var(--text-sm);
}
.ds-action-zone-item.tone-critical .ds-action-zone-item-icon {
  background: rgba(168,38,28,.10); color: var(--c-danger);
}
.ds-action-zone-item.tone-warning .ds-action-zone-item-icon {
  background: rgba(168,101,15,.10); color: var(--c-warning);
}
.ds-action-zone-item.tone-info .ds-action-zone-item-icon {
  background: rgba(26,77,126,.10); color: var(--c-info);
}
.ds-action-zone-item-body {
  flex: 1; min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-action-zone-item-cta {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  color: var(--c-text-2);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ds-action-zone-item-cta i { transition: transform var(--dur-1) var(--ease); }
.ds-action-zone-item:hover .ds-action-zone-item-cta i { transform: translateX(-3px); }


/* ════ Health Row — at-a-glance traffic-light status ════════════════ */
.ds-health-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.ds-health-cell {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ds-health-cell:hover { box-shadow: var(--shadow-sm); }
.ds-health-cell-light {
  width: 12px; height: 12px; border-radius: var(--r-full);
  flex-shrink: 0;
  background: var(--c-text-4);
  box-shadow: 0 0 0 4px rgba(170,181,192,.18);
}
.ds-health-cell.tone-ok      .ds-health-cell-light { background: var(--c-success); box-shadow: 0 0 0 4px rgba(22,121,77,.18), 0 0 12px rgba(22,121,77,.45); }
.ds-health-cell.tone-warning .ds-health-cell-light { background: var(--c-warning); box-shadow: 0 0 0 4px rgba(168,101,15,.18), 0 0 12px rgba(168,101,15,.45); }
.ds-health-cell.tone-danger  .ds-health-cell-light { background: var(--c-danger);  box-shadow: 0 0 0 4px rgba(168,38,28,.18),  0 0 12px rgba(168,38,28,.45); animation: ds-pulse 2s ease-in-out infinite; }
.ds-health-cell.tone-info    .ds-health-cell-light { background: var(--c-info);    box-shadow: 0 0 0 4px rgba(26,77,126,.18); }
@keyframes ds-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(168,38,28,.18),  0 0 12px rgba(168,38,28,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(168,38,28,.10),  0 0 18px rgba(168,38,28,.65); }
}
.ds-health-cell-text { flex: 1; min-width: 0; }
.ds-health-cell-label {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ds-health-cell-status {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--c-text-1);
  margin-block-start: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ════ Compact metric variant (Executive Strip — quiet KPIs) ════════ */
.ds-metric--compact {
  padding: var(--space-3) var(--space-4);
  gap: 6px;
  background: var(--c-surface-1);
  box-shadow: var(--shadow-xs);
}
.ds-metric--compact .ds-metric-label { font-size: 10px; letter-spacing: .08em; }
.ds-metric--compact .ds-metric-value {
  font-size: var(--text-xl);
}
@media (min-width: 1024px) {
  .ds-metric--compact .ds-metric-value { font-size: var(--text-2xl); }
}
.ds-metric--compact .ds-metric-spark { display: none; }
.ds-metric--compact:hover { transform: none; box-shadow: var(--shadow-sm); }


/* ════ Section divider with label ═══════════════════════════════════ */
.ds-section-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin-block: var(--space-6) var(--space-4);
}
.ds-section-divider-label {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.ds-section-divider-label i {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: 11px;
}
.ds-section-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--c-border), transparent);
}


/* ════ StatusPill ════════════════════════════════════════════════════ */
.ds-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  line-height: 1.5;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.ds-pill::before {
  /* status dot */
  content: ''; width: 6px; height: 6px; border-radius: var(--r-full);
  background: currentColor; flex-shrink: 0; opacity: .85;
}
.ds-pill i { font-size: 10px; }
.ds-pill.tone-primary { background: var(--c-primary-soft); color: var(--c-primary);  border-color: rgba(12,53,89,.12); }
.ds-pill.tone-gold    { background: var(--c-gold-soft);    color: var(--c-gold-deep); border-color: rgba(138,106,28,.18); }
.ds-pill.tone-success { background: var(--c-success-soft); color: var(--c-success);  border-color: rgba(22,121,77,.18); }
.ds-pill.tone-warning { background: var(--c-warning-soft); color: var(--c-warning);  border-color: rgba(168,101,15,.18); }
.ds-pill.tone-danger  { background: var(--c-danger-soft);  color: var(--c-danger);   border-color: rgba(168,38,28,.18); }
.ds-pill.tone-info    { background: var(--c-info-soft);    color: var(--c-info);     border-color: rgba(26,77,126,.12); }


/* ════ Button ════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -.005em;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ds-btn i { font-size: var(--text-sm); }

/* — Variants — */
.ds-btn.primary {
  background: var(--grad-primary);
  color: var(--c-text-inv);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(6,28,51,.20),
    0 4px 12px -4px rgba(6,28,51,.30);
}
.ds-btn.primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 4px rgba(6,28,51,.25),
    0 10px 20px -6px rgba(6,28,51,.40);
}

.ds-btn.gold {
  background: var(--grad-gold);
  color: var(--c-primary-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    var(--shadow-gold);
}
.ds-btn.gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 12px 28px -8px rgba(201,161,74,.55);
}

.ds-btn.ghost {
  background: var(--c-surface-1); color: var(--c-text-1);
  border-color: var(--c-border-2);
  box-shadow: var(--shadow-xs);
}
.ds-btn.ghost:hover {
  background: var(--c-elevated);
  border-color: var(--c-primary);
  color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}

.ds-btn.danger {
  background: linear-gradient(180deg, #b8392f 0%, var(--c-danger) 100%);
  color: var(--c-text-inv);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px -4px rgba(168,38,28,.30);
}
.ds-btn.danger:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 20px -6px rgba(168,38,28,.45); }

.ds-btn.success {
  background: linear-gradient(180deg, #1e8a5a 0%, var(--c-success) 100%);
  color: var(--c-text-inv);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px -4px rgba(22,121,77,.30);
}

/* — Sizes — */
.ds-btn.sm { padding: 7px 12px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.ds-btn.lg { padding: 14px var(--space-5); font-size: var(--text-base); }

/* — Icon-only — */
.ds-icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-surface-1); color: var(--c-text-2);
  border: 1px solid var(--c-border);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.ds-icon-btn:hover {
  background: var(--c-elevated); color: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}
.ds-icon-btn.danger:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
.ds-icon-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }


/* ════ DataTable (helper) ═══════════════════════════════════════════ */
.ds-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
}
.ds-table thead th {
  background: var(--c-surface-2);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-block-end: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: var(--z-base);
  overflow-wrap: anywhere;
}
.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--c-text-1);
  border-block-end: 1px solid var(--c-border);
  overflow-wrap: anywhere;
}
.ds-table tbody tr:last-child td { border-block-end: 0; }
.ds-table tbody tr:hover { background: var(--c-surface-2); }
.ds-table tbody tr.is-active { background: var(--c-primary-soft); }


/* ════ FormField ════════════════════════════════════════════════════ */
.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-field-label {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--c-text-1);
  display: flex; align-items: center; gap: var(--space-2);
}
.ds-field-label .required { color: var(--c-danger); }
.ds-field-hint {
  font-size: var(--text-xs);
  color: var(--c-text-3);
}
.ds-field-error {
  font-size: var(--text-xs);
  color: var(--c-danger);
  font-weight: var(--w-medium);
}

.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface-1);
  color: var(--c-text-1);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--c-text-3); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.ds-input:disabled { background: var(--c-surface-2); color: var(--c-text-3); }
.ds-textarea { min-height: 100px; resize: vertical; line-height: var(--lh-relaxed); }

.ds-input--icon {
  position: relative;
}
.ds-input--icon input {
  padding-inline-start: 38px;
}
.ds-input--icon i {
  position: absolute; inset-block: 0; inset-inline-start: 12px;
  display: grid; place-items: center;
  color: var(--c-text-3); pointer-events: none;
}


/* ════ Modal ════════════════════════════════════════════════════════ */
.ds-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(15,23,42,.55);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: ds-fade-in var(--dur-2) var(--ease);
}
.ds-modal-backdrop[data-open="true"] { display: flex; }
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ds-modal {
  background: var(--c-surface-1);
  border-radius: var(--r-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: ds-modal-in var(--dur-3) var(--ease);
}
@keyframes ds-modal-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ds-modal-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
}
.ds-modal-title {
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  color: var(--c-text-1);
}
.ds-modal-subtitle {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  margin-block-start: var(--space-1);
}
.ds-modal-close {
  position: absolute; inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: transparent; color: var(--c-text-3);
  cursor: pointer;
}
.ds-modal-close:hover { background: var(--c-surface-2); color: var(--c-text-1); }
.ds-modal-body { padding: var(--space-3) var(--space-5) var(--space-5); }
.ds-modal-footer {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-end-end-radius: var(--r-lg);
  border-end-start-radius: var(--r-lg);
}


/* ════ Toast ════════════════════════════════════════════════════════ */
.ds-toast-host {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  display: flex; flex-direction: column-reverse; gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: 360px;
}
@media (max-width: 1023px) {
  .ds-toast-host {
    inset-inline-start: var(--space-4); inset-inline-end: var(--space-4);
    inset-block-end: calc(var(--tabbar-h) + var(--space-4));
    max-width: none;
  }
}
.ds-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: ds-toast-in var(--dur-3) var(--ease);
}
.ds-toast.tone-success { border-inline-start: 3px solid var(--c-success); }
.ds-toast.tone-warning { border-inline-start: 3px solid var(--c-warning); }
.ds-toast.tone-danger  { border-inline-start: 3px solid var(--c-danger); }
.ds-toast.tone-info    { border-inline-start: 3px solid var(--c-info); }
@keyframes ds-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ds-toast-icon { font-size: 20px; flex-shrink: 0; }
.ds-toast.tone-success .ds-toast-icon { color: var(--c-success); }
.ds-toast.tone-warning .ds-toast-icon { color: var(--c-warning); }
.ds-toast.tone-danger  .ds-toast-icon { color: var(--c-danger); }
.ds-toast.tone-info    .ds-toast-icon { color: var(--c-info); }
.ds-toast-body { flex: 1; min-width: 0; }
.ds-toast-title { font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--c-text-1); }
.ds-toast-message { font-size: var(--text-sm); color: var(--c-text-2); margin-block-start: 2px; }
.ds-toast-close {
  flex-shrink: 0; padding: 4px;
  background: transparent; color: var(--c-text-3);
  font-size: 16px; line-height: 1;
}


/* ════ Skeleton loaders ═════════════════════════════════════════════ */
.ds-skel {
  background: linear-gradient(
    90deg,
    var(--c-surface-2) 0%,
    var(--c-surface-3) 50%,
    var(--c-surface-2) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: ds-shimmer 1.4s linear infinite;
}
@keyframes ds-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.ds-skel-line { height: var(--text-base); }
.ds-skel-line--short { width: 40%; }
.ds-skel-line--md    { width: 70%; }
.ds-skel-line--lg    { width: 100%; }
.ds-skel-circle { width: 40px; height: 40px; border-radius: var(--r-full); }
.ds-skel-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3);
  align-items: center; padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--c-border);
}


/* ════ Sticky subscription banner (optional, used on trial tenants) ═ */
.ds-sub-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-warning-soft);
  color: var(--c-warning);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  margin-block-end: var(--space-4);
}
.ds-sub-banner.tone-danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.ds-sub-banner.tone-info    { background: var(--c-info-soft);    color: var(--c-info); }
.ds-sub-banner.tone-success { background: var(--c-success-soft); color: var(--c-success); }