/* ============================================================
   NORTHSTAR components - every value comes from tokens.css
   ============================================================ */

.ns { font-family: var(--ns-font-sans); color: var(--ns-text-primary); }
.ns *, .ns *::before, .ns *::after { box-sizing: border-box; }

/* ---------- Button (Figma: Hierarchy x Content x State x Size x Shape) ---------- */
.ns-btn {
  --_bg: var(--ns-interactive-primary); --_fg: var(--ns-white); --_bd: transparent;
  --_hover: var(--ns-interactive-primary-hover); --_press: var(--ns-interactive-primary-active); --_h: var(--ns-density-control);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ns-space-3);
  min-height: var(--_h); padding: 0 var(--ns-space-6);
  font: 600 var(--ns-type-button-size)/var(--ns-type-button-line) var(--ns-font-sans);
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--ns-radius-md);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--ns-duration-fast) var(--ns-easing-standard), border-color var(--ns-duration-fast) var(--ns-easing-standard), transform var(--ns-duration-fast) var(--ns-easing-standard);
}
.ns-btn:hover, .ns-btn.is-hover { background: var(--_hover); }
.ns-btn:active, .ns-btn.is-pressed { background: var(--_press); transform: translateY(1px); }
.ns-btn:focus-visible, .ns-btn.is-focus { outline: 2px solid var(--ns-focus-ring); outline-offset: 2px; }
.ns-btn[disabled], .ns-btn.is-disabled { --_bg: var(--ns-gray-4); --_hover: var(--ns-gray-4); --_press: var(--ns-gray-4); --_bd: transparent; color: color-mix(in srgb, var(--ns-white) 55%, transparent); cursor: not-allowed; transform: none; }
.ns-btn--secondary { --_bg: var(--ns-interactive-secondary-bg); --_fg: var(--ns-text-primary); --_hover: var(--ns-interactive-secondary-hover); --_press: var(--ns-interactive-secondary-hover); }
.ns-btn--secondary:active, .ns-btn--secondary.is-pressed { --_bd: var(--ns-interactive-primary); }
.ns-btn--outline, .ns-btn--tertiary { --_bg: transparent; --_fg: var(--ns-text-primary); --_bd: var(--ns-border-strong); --_hover: transparent; --_press: transparent; }
.ns-btn--outline:hover, .ns-btn--outline.is-hover, .ns-btn--outline:active, .ns-btn--outline.is-pressed, .ns-btn--tertiary:hover, .ns-btn--tertiary:active { --_bd: var(--ns-interactive-primary); }
.ns-btn--outline[disabled], .ns-btn--tertiary[disabled] { --_bg: transparent; --_bd: var(--ns-gray-6); color: var(--ns-text-disabled); }
.ns-btn--ghost { --_bg: transparent; --_fg: var(--ns-text-link); --_hover: var(--ns-interactive-ghost-hover); --_press: var(--ns-interactive-ghost-hover); }
.ns-btn--ghost[disabled] { --_bg: transparent; color: var(--ns-text-disabled); }
.ns-btn--danger { --_bg: var(--ns-status-error); --_hover: #ff4a82; --_press: var(--ns-red-500); }
.ns-btn--sm { --_h: var(--ns-density-control-sm); padding: 0 var(--ns-space-5); font-size: 13px; }
.ns-btn--lg { --_h: 48px; padding: 0 var(--ns-space-7); font-size: var(--ns-type-body1-size); }
.ns-btn--xl { --_h: 52px; padding: 0 var(--ns-space-8); font: 700 16px/24px var(--ns-font-sans); }
.ns-btn--square { border-radius: var(--ns-radius-xs); }
.ns-btn--icon { padding: 0; width: var(--_h); }
.ns-btn--block { width: 100%; }
.ns-btn svg { width: 18px; height: 18px; flex: none; }
.ns-btn .ns-spin { width: 14px; height: 14px; border-width: 2px; }

/* ---------- Form fields ---------- */
.ns-field { display: grid; gap: var(--ns-space-2); min-width: 0; }
.ns-label { font: 600 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); letter-spacing: var(--ns-type-caption-tracking); color: var(--ns-text-secondary); }
.ns-helper { font: 400 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); color: var(--ns-text-tertiary); }
.ns-input, .ns-select, .ns-textarea {
  width: 100%; min-height: var(--ns-density-control); padding: 0 var(--ns-space-4);
  font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans);
  color: var(--ns-text-primary); background: var(--ns-field, var(--ns-field-bg));
  border: 1px solid transparent; border-radius: var(--ns-radius-sm);
  transition: border-color var(--ns-duration-fast) var(--ns-easing-standard), box-shadow var(--ns-duration-fast) var(--ns-easing-standard);
}
.ns-textarea { padding: var(--ns-space-3) var(--ns-space-4); min-height: 88px; resize: vertical; }
.ns-input::placeholder, .ns-textarea::placeholder { color: var(--ns-text-disabled); }
.ns-input:hover, .ns-select:hover { border-color: var(--ns-border-default); }
.ns-input:focus, .ns-select:focus, .ns-textarea:focus, .ns-input.is-focus { outline: none; border-color: var(--ns-focus-field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-field) 35%, transparent); }
.ns-input[disabled], .ns-select[disabled] { opacity: .45; cursor: not-allowed; }
.ns-select { appearance: none; padding-right: var(--ns-space-9); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ns-field.is-error .ns-input, .ns-field.is-error .ns-select { border-color: var(--ns-status-error); }
.ns-field.is-error .ns-helper { color: var(--ns-status-error); }
.ns-field.is-warning .ns-input { border-color: var(--ns-status-warning); }
.ns-field.is-warning .ns-helper { color: var(--ns-status-warning); }
.ns-field.is-success .ns-input { border-color: var(--ns-status-success); }
.ns-input--sm { min-height: 32px; }
.ns-input--md { min-height: 36px; }
.ns-field.is-error .ns-input::placeholder { color: var(--ns-status-error); }
.ns-field.is-warning .ns-input::placeholder { color: var(--ns-status-warning); }
.ns-input--lg { min-height: 48px; }

/* Search */
.ns-search { position: relative; display: flex; align-items: center; }
.ns-search svg { position: absolute; left: var(--ns-space-4); width: 16px; height: 16px; color: var(--ns-text-tertiary); pointer-events: none; }
.ns-search .ns-input { padding-left: var(--ns-space-9); border-radius: var(--ns-radius-full); }
.ns-search kbd { position: absolute; right: var(--ns-space-3); }

/* Checkbox / radio */
.ns-check { display: inline-flex; align-items: center; gap: var(--ns-space-3); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); cursor: pointer; user-select: none; }
.ns-check input { appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--ns-border-strong); border-radius: var(--ns-radius-xs); background: var(--ns-background-surface); display: grid; place-content: center; cursor: pointer; transition: all var(--ns-duration-fast) var(--ns-easing-standard); }
.ns-check input[type="radio"] { border-radius: var(--ns-radius-full); }
.ns-check input:checked, .ns-check input:indeterminate { background: var(--ns-interactive-primary); border-color: var(--ns-interactive-primary); }
.ns-check input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--ns-white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ns-check input[type="radio"] { width: 16px; height: 16px; border-width: 1.5px; border-color: var(--ns-gray-5); background: transparent; }
.ns-check input[type="radio"]:checked { background: transparent; border: 5px solid var(--ns-interactive-primary); }
.ns-check input[type="radio"]:checked::after { content: none; }
.ns-check:hover input[type="radio"]:not(:checked):not(:disabled) { border-color: var(--ns-text-primary); }
.ns-check:hover input[type="radio"]:checked { border-color: var(--ns-blue-700); }
.ns-check--radio { color: var(--ns-text-secondary); }
.ns-check--radio:hover { color: var(--ns-text-primary); font-weight: 600; }
.ns-check input:indeterminate::after { content: ""; width: 9px; height: 2px; background: var(--ns-white); }
.ns-check input:focus-visible { outline: 2px solid var(--ns-focus-ring); outline-offset: 2px; }
.ns-check input:disabled { opacity: .4; cursor: not-allowed; }

/* Toggle */
.ns-toggle { display: inline-flex; align-items: center; gap: var(--ns-space-4); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); cursor: pointer; }
.ns-toggle input { appearance: none; margin: 0; width: 40px; height: 22px; border-radius: var(--ns-radius-full); background: var(--ns-gray-6); position: relative; cursor: pointer; flex: none; transition: background var(--ns-duration-base) var(--ns-easing-standard); }
.ns-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ns-white); transition: transform var(--ns-duration-base) var(--ns-easing-standard); }
.ns-toggle input:checked { background: var(--ns-interactive-primary); }
.ns-toggle input:checked::after { transform: translateX(18px); }
.ns-toggle input:focus-visible { outline: 2px solid var(--ns-focus-ring); outline-offset: 2px; }
.ns-toggle input:disabled { opacity: .4; cursor: not-allowed; }
.ns-toggle--sm input { width: 32px; height: 18px; }
.ns-toggle--sm input::after { width: 12px; height: 12px; }
.ns-toggle--sm input:checked::after { transform: translateX(14px); }

/* Slider */
.ns-slider { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; appearance: none; height: 4px; border-radius: var(--ns-radius-full); background: linear-gradient(90deg, var(--ns-interactive-primary) var(--_pct, 50%), var(--ns-border-default) var(--_pct, 50%)); outline: none; cursor: pointer; }
.ns-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ns-white); border: 2px solid var(--ns-interactive-primary); }
.ns-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ns-white); border: 2px solid var(--ns-interactive-primary); }
.ns-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ns-focus-ring); }
.ns-slider-ticks { display: flex; justify-content: space-between; font: 400 var(--ns-type-caption-size)/1 var(--ns-font-mono); color: var(--ns-text-tertiary); margin-top: var(--ns-space-3); }

/* ---------- Tag (Figma: Size x Emphasis x Shape x State) ---------- */
.ns-tag { --_h: 36px; display: inline-flex; align-items: center; gap: var(--ns-space-3); height: var(--_h); padding: 0 var(--ns-space-4); border-radius: var(--ns-radius-full); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); letter-spacing: var(--ns-type-body2-tracking); color: var(--ns-text-primary); background: var(--ns-interactive-secondary-bg); border: 1px solid transparent; white-space: nowrap; }
.ns-tag--sm { --_h: 28px; padding: 0 var(--ns-space-3); font-size: 13px; }
.ns-tag--ghost { background: transparent; border-color: var(--ns-gray-5); }
.ns-tag--square { border-radius: var(--ns-radius-sm); }
.ns-tag__ind { width: 8px; height: 8px; border-radius: 50%; background: var(--_c, var(--ns-teal-500)); flex: none; }
.ns-tag b { font-weight: 700; }
.ns-tag button { all: unset; cursor: pointer; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--ns-radius-xs); color: var(--ns-text-secondary); font-size: 14px; line-height: 1; }
.ns-tag button:hover { background: var(--ns-interactive-ghost-hover); color: var(--ns-text-primary); }
.ns-tag button:focus-visible { outline: 2px solid var(--ns-focus-ring); }
/* Color chips (categorical labels, used in docs chrome) */
.ns-tag--teal, .ns-tag--purple, .ns-tag--blue, .ns-tag--green, .ns-tag--yellow, .ns-tag--red { --_h: 24px; padding: 0 var(--ns-space-3); font: 600 var(--ns-type-caption-size)/1 var(--ns-font-sans); color: var(--_c); background: color-mix(in srgb, var(--_c) 14%, transparent); border-color: color-mix(in srgb, var(--_c) 35%, transparent); }
.ns-tag--teal.ns-tag--sm, .ns-tag--purple.ns-tag--sm, .ns-tag--blue.ns-tag--sm, .ns-tag--green.ns-tag--sm, .ns-tag--yellow.ns-tag--sm, .ns-tag--red.ns-tag--sm { --_h: 20px; font-size: 11px; }
.ns-tag--teal { --_c: var(--ns-teal-500); } .ns-tag--purple { --_c: var(--ns-purple-500); } .ns-tag--blue { --_c: var(--ns-status-info); }
.ns-tag--green { --_c: var(--ns-status-success); } .ns-tag--yellow { --_c: var(--ns-status-warning); } .ns-tag--red { --_c: var(--ns-status-error); }
:root[data-theme="light"] .ns-tag--teal { --_c: var(--ns-text-accent); }

/* ---------- Badge (Figma: Size x Icon x Type x State) ---------- */
.ns-badge { --_c: var(--ns-purple-400); --_h: 24px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ns-space-2); height: var(--_h); min-width: var(--_h); padding: 0 var(--ns-space-3); border-radius: var(--ns-radius-sm); font: 700 var(--ns-type-caption-size)/1 var(--ns-font-sans); color: var(--ns-white); background: var(--_c); border: 1px solid var(--_c); white-space: nowrap; }
.ns-badge--sm { --_h: 20px; padding: 0 6px; font-size: 11px; }
.ns-badge--lg { --_h: 28px; padding: 0 var(--ns-space-4); font-size: 13px; }
.ns-badge--outline { background: transparent; color: var(--_c); }
.ns-badge--icon { padding: 0; }
.ns-badge svg { width: 12px; height: 12px; }
.ns-badge--positive, .ns-badge--success { --_c: var(--ns-status-success); } .ns-badge--positive:not(.ns-badge--outline), .ns-badge--success:not(.ns-badge--outline) { color: var(--ns-black); }
.ns-badge--negative, .ns-badge--error { --_c: var(--ns-status-error); }
.ns-badge--warning { --_c: var(--ns-status-warning); } .ns-badge--warning:not(.ns-badge--outline) { color: var(--ns-black); }
.ns-badge--neutral { --_c: var(--ns-gray-5); }
/* Status dot indicator (tables, headers) */
.ns-dot { --_c: var(--ns-status-info); display: inline-flex; align-items: center; gap: 6px; font: 700 var(--ns-type-overline-size)/1 var(--ns-font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--_c); }
.ns-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ns-dot--success { --_c: var(--ns-status-success); } .ns-dot--warning { --_c: var(--ns-status-warning); } .ns-dot--error { --_c: var(--ns-status-error); } .ns-dot--neutral { --_c: var(--ns-text-tertiary); }
.ns-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ns-radius-full); background: var(--ns-status-error); color: var(--ns-white); font: 700 11px/1 var(--ns-font-sans); }

/* ---------- Layers: nesting sets which layer, field and border tokens apply ---------- */
/* A layer is .ns-layer, or a card, modal or table inside one. Each level of nesting moves to the next layer. Outside .ns-layer nothing changes. */
.ns-layer, [data-layer="1"] { --ns-layer: var(--ns-layer-01); --ns-layer-hover: var(--ns-layer-hover-01); --ns-layer-selected: var(--ns-layer-selected-01); --ns-layer-border: var(--ns-border-subtle-01); --ns-layer-border-strong: var(--ns-border-strong-01); --ns-field: var(--ns-field-01); --ns-field-hover: var(--ns-field-hover-01); }
.ns-layer :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap), [data-layer="2"] { --ns-layer: var(--ns-layer-02); --ns-layer-hover: var(--ns-layer-hover-02); --ns-layer-selected: var(--ns-layer-selected-02); --ns-layer-border: var(--ns-border-subtle-02); --ns-layer-border-strong: var(--ns-border-strong-02); --ns-field: var(--ns-field-02); --ns-field-hover: var(--ns-field-hover-02); }
.ns-layer :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap) :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap), .ns-layer :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap) :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap) :is(.ns-layer, .ns-card, .ns-modal, .ns-table-wrap), [data-layer="3"] { --ns-layer: var(--ns-layer-03); --ns-layer-hover: var(--ns-layer-hover-03); --ns-layer-selected: var(--ns-layer-selected-03); --ns-layer-border: var(--ns-border-subtle-03); --ns-layer-border-strong: var(--ns-border-strong-03); --ns-field: var(--ns-field-03); --ns-field-hover: var(--ns-field-hover-03); }
.ns-layer { background: var(--ns-layer); color: var(--ns-text-primary); }
.ns-layer-demo { padding: var(--ns-space-5); border-radius: var(--ns-radius-lg); border: 1px solid var(--ns-layer-border); display: grid; gap: var(--ns-space-4); }
.ns-layer-demo input { background: var(--ns-field); border: 1px solid var(--ns-layer-border); border-bottom-color: var(--ns-layer-border-strong); border-radius: var(--ns-radius-sm); color: var(--ns-text-primary); padding: 0 var(--ns-space-4); height: 36px; font: inherit; }
.ns-layer-demo__row { padding: var(--ns-space-3) var(--ns-space-4); border-radius: var(--ns-radius-sm); }
.ns-layer-demo__row:hover { background: var(--ns-layer-hover); }
.ns-layer-demo__row[aria-selected="true"] { background: var(--ns-layer-selected); }

/* ---------- Card / tile ---------- */
.ns-card { background: var(--ns-layer, var(--ns-background-surface)); border: 1px solid var(--ns-layer-border, var(--ns-border-subtle)); border-radius: var(--ns-radius-lg); padding: var(--ns-space-7); display: grid; gap: var(--ns-space-4); align-content: start; }
.ns-card--elevated { background: var(--ns-layer, var(--ns-background-elevated)); border-color: transparent; box-shadow: var(--ns-elevation-02); }
.ns-card--clickable { cursor: pointer; transition: border-color var(--ns-duration-base) var(--ns-easing-standard), transform var(--ns-duration-base) var(--ns-easing-standard); }
.ns-card--clickable:hover { border-color: var(--ns-border-strong); transform: translateY(-2px); }
.ns-card__title { margin: 0; font: 700 var(--ns-type-h6-size)/var(--ns-type-h6-line) var(--ns-font-sans); }
.ns-card__body { margin: 0; font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-secondary); }
.ns-card__strip { margin: calc(var(--ns-space-7) * -1) calc(var(--ns-space-7) * -1) 0; padding: var(--ns-space-3) var(--ns-space-7); border-bottom: 1px solid var(--ns-border-subtle); font: 700 var(--ns-type-overline-size)/var(--ns-type-overline-line) var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); background: var(--ns-background-secondary); border-radius: var(--ns-radius-lg) var(--ns-radius-lg) 0 0; }

/* KPI tile */
.ns-kpi { background: var(--ns-background-elevated); border-radius: var(--ns-radius-lg); padding: var(--ns-space-6); display: grid; gap: var(--ns-space-2); }
.ns-kpi__label { font: 700 var(--ns-type-overline-size)/1 var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); }
.ns-kpi__value { font: 800 32px/1.1 var(--ns-font-sans); letter-spacing: -0.5px; }
.ns-kpi__delta { font: 600 var(--ns-type-caption-size)/1 var(--ns-font-mono); color: var(--ns-status-success); }
.ns-kpi__delta.is-down { color: var(--ns-status-error); }

/* ---------- Table ---------- */
.ns-table-wrap { border: 1px solid var(--ns-layer-border, var(--ns-border-subtle)); border-radius: var(--ns-radius-lg); overflow: auto; background: var(--ns-layer, var(--ns-background-surface)); }
.ns-table { width: 100%; border-collapse: collapse; font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }
.ns-table th { text-align: left; padding: var(--ns-space-3) var(--ns-space-5); font: 700 var(--ns-type-overline-size)/var(--ns-type-overline-line) var(--ns-font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ns-text-tertiary); background: var(--ns-background-secondary); border-bottom: 1px solid var(--ns-border-subtle); white-space: nowrap; }
.ns-table th[data-sort] { cursor: pointer; user-select: none; }
.ns-table th[data-sort]:hover { color: var(--ns-text-primary); }
.ns-table th .ns-sort { margin-left: var(--ns-space-2); opacity: .5; }
.ns-table th.is-sorted .ns-sort { opacity: 1; color: var(--ns-text-accent); }
.ns-table td { padding: var(--ns-density-row-y) var(--ns-density-pad-x); border-bottom: 1px solid var(--ns-layer-border, var(--ns-border-subtle)); }
.ns-table tr:last-child td { border-bottom: 0; }
.ns-table tbody tr { transition: background var(--ns-duration-fast) var(--ns-easing-standard); }
.ns-table tbody tr:hover { background: var(--ns-layer-hover, var(--ns-background-hover)); }
.ns-table tbody tr.is-selected { background: var(--ns-layer-selected, var(--ns-background-selected)); }
.ns-table--compact td { padding: var(--ns-space-2) var(--ns-space-5); }
.ns-table--zebra tbody tr:nth-child(even) { background: var(--ns-background-secondary); }
.ns-table .num { text-align: right; font-family: var(--ns-font-mono); font-size: var(--ns-type-body3-size); }
.ns-table-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5); border-bottom: 1px solid var(--ns-border-subtle); flex-wrap: wrap; }
.ns-table-bar.is-batch { background: var(--ns-interactive-primary); color: var(--ns-white); }

/* ---------- Avatar (Figma: Shape x Avatar x Size x Status) ---------- */
.ns-avatar { --_s: 40px; position: relative; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); border-radius: 50%; background: var(--ns-persian-500); color: var(--ns-white); font: 700 calc(var(--_s) * .36)/1 var(--ns-font-sans); flex: none; background-size: cover; background-position: center; }
.ns-avatar--16 { --_s: 16px; } .ns-avatar--20 { --_s: 20px; } .ns-avatar--24, .ns-avatar--sm { --_s: 24px; } .ns-avatar--28 { --_s: 28px; } .ns-avatar--32 { --_s: 32px; } .ns-avatar--36 { --_s: 36px; } .ns-avatar--48, .ns-avatar--lg { --_s: 48px; } .ns-avatar--64, .ns-avatar--xl { --_s: 64px; }
.ns-avatar--square { border-radius: calc(var(--_s) * .125); }
.ns-avatar--brand { background: var(--ns-gradient-brand); }
.ns-avatar--memoji { background: var(--_m, #ffd9c2); font-size: calc(var(--_s) * .55); }
.ns-avatar[data-status]::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 6px; min-height: 6px; border-radius: 50%; border: 2px solid var(--ns-background-primary); background: var(--ns-green-2); }
.ns-avatar--square[data-status]::after { right: -2px; bottom: -2px; }
.ns-avatar[data-status="away"]::after { background: var(--ns-status-warning); }
.ns-avatar[data-status="busy"]::after { background: var(--ns-status-error); }
.ns-avatar-group { display: inline-flex; }
.ns-avatar-group .ns-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--ns-background-primary); }
.ns-avatar-group .ns-avatar:first-child { margin-left: 0; }
.ns-avatar--more { background: var(--ns-gray-7); color: var(--ns-text-secondary); }

/* ---------- Progress ---------- */
.ns-progress { display: grid; gap: var(--ns-space-2); }
.ns-progress__track { height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-border-default); overflow: hidden; }
.ns-progress__bar { height: 100%; width: var(--_v, 50%); border-radius: inherit; background: var(--ns-gradient-brand); transition: width var(--ns-duration-slow) var(--ns-easing-standard); }
.ns-progress--purple .ns-progress__bar { background: var(--ns-gradient-bruise); }
.ns-progress--warning .ns-progress__bar { background: linear-gradient(90deg, var(--ns-yellow-500), #ffd23f); }
.ns-progress--error .ns-progress__bar { background: var(--ns-status-error); }
.ns-progress--indeterminate .ns-progress__bar { width: 35%; animation: ns-indet 1.4s var(--ns-easing-standard) infinite; }
@keyframes ns-indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.ns-progress__meta { display: flex; justify-content: space-between; font: 400 var(--ns-type-caption-size)/1 var(--ns-font-sans); color: var(--ns-text-secondary); }
.ns-ring { --_v: 65; --_s: 72px; width: var(--_s); height: var(--_s); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ns-teal-500) calc(var(--_v) * 1%), var(--ns-border-default) 0); position: relative; font: 700 var(--ns-type-body2-size)/1 var(--ns-font-mono); }
.ns-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--ns-background-surface); }
.ns-ring span { position: relative; }
.ns-steps { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ns-steps li { flex: 1 1 56px; display: grid; gap: var(--ns-space-3); font: 400 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); color: var(--ns-text-tertiary); counter-increment: s; }
.ns-steps li::before { content: ""; height: 3px; border-radius: var(--ns-radius-full); background: var(--ns-border-default); }
.ns-steps li.is-done::before { background: var(--ns-teal-500); }
.ns-steps li.is-current::before { background: var(--ns-interactive-primary); }
.ns-steps li.is-current, .ns-steps li.is-done { color: var(--ns-text-primary); }
.ns-steps li b { font-weight: 700; display: block; }

/* Spinner + skeleton */
.ns-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--ns-border-default); border-top-color: var(--ns-teal-500); animation: ns-rot .8s linear infinite; display: inline-block; }
@keyframes ns-rot { to { transform: rotate(360deg); } }
.ns-skel { border-radius: var(--ns-radius-sm); background: linear-gradient(90deg, var(--ns-background-elevated) 0%, var(--ns-border-default) 50%, var(--ns-background-elevated) 100%); background-size: 200% 100%; animation: ns-shimmer 1.4s linear infinite; }
@keyframes ns-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Tabs (Figma: Icon x Items) ---------- */
.ns-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ns-gray-8); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ns-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: var(--ns-space-5) var(--ns-space-6); font: 600 var(--ns-type-body2-size)/1 var(--ns-font-sans); color: var(--ns-gray-4); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: var(--ns-space-3); align-items: center; transition: color var(--ns-duration-fast) var(--ns-easing-standard), border-color var(--ns-duration-fast) var(--ns-easing-standard); }
.ns-tab svg { width: 18px; height: 18px; }
.ns-tab:hover { color: var(--ns-text-primary); }
.ns-tab[aria-selected="true"] { color: var(--ns-text-primary); border-bottom-color: var(--ns-blue-700); }
.ns-tab:focus-visible { outline: 2px solid var(--ns-focus-ring); outline-offset: -2px; }
.ns-tabs--fill .ns-tab { flex: 1; justify-content: center; }
.ns-tabs--pill { border: 0; background: var(--ns-background-secondary); padding: var(--ns-space-2); border-radius: var(--ns-radius-full); display: inline-flex; }
.ns-tabs--pill .ns-tab { border: 0; margin: 0; padding: var(--ns-space-3) var(--ns-space-5); border-radius: var(--ns-radius-full); }
.ns-tabs--pill .ns-tab[aria-selected="true"] { background: var(--ns-background-elevated); box-shadow: var(--ns-elevation-01); }
:root[data-theme="light"] .ns-tab { color: var(--ns-gray-5); }
:root[data-theme="light"] .ns-tabs { border-bottom-color: var(--ns-gray-1); }

/* ---------- Breadcrumb ---------- */
.ns-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); list-style: none; margin: 0; padding: 0; font: 400 var(--ns-type-body2-size)/1 var(--ns-font-sans); }
.ns-breadcrumb li { display: inline-flex; align-items: center; gap: var(--ns-space-3); color: var(--ns-text-secondary); }
.ns-breadcrumb li + li::before { content: var(--_sep, "/"); color: var(--ns-text-disabled); }
.ns-breadcrumb--chevron { --_sep: "\203A"; }
.ns-breadcrumb a { color: var(--ns-text-link); text-decoration: none; }
.ns-breadcrumb a:hover { text-decoration: underline; }
.ns-breadcrumb [aria-current] { color: var(--ns-text-primary); font-weight: 600; }

/* ---------- Pagination ---------- */
.ns-pagination { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; font: 400 var(--ns-type-body2-size)/1 var(--ns-font-sans); color: var(--ns-text-secondary); }
.ns-page { all: unset; box-sizing: border-box; cursor: pointer; min-width: 32px; height: 32px; padding: 0 var(--ns-space-3); display: inline-grid; place-items: center; border-radius: var(--ns-radius-sm); color: var(--ns-text-secondary); font: 600 var(--ns-type-body2-size)/1 var(--ns-font-sans); }
.ns-page:hover { background: var(--ns-background-hover); color: var(--ns-text-primary); }
.ns-page[aria-current="page"] { background: var(--ns-interactive-primary); color: var(--ns-white); }
.ns-page:disabled { opacity: .35; cursor: not-allowed; }
.ns-page:focus-visible { outline: 2px solid var(--ns-focus-ring); }

/* ---------- Notification / alert ---------- */
.ns-notice { --_c: var(--ns-status-info); display: grid; grid-template-columns: auto 1fr auto; gap: var(--ns-space-4); align-items: start; padding: var(--ns-space-5); border-radius: var(--ns-radius-md); border: 1px solid color-mix(in srgb, var(--_c) 45%, transparent); border-left: 3px solid var(--_c); background: color-mix(in srgb, var(--_c) 9%, var(--ns-background-surface)); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }
.ns-notice__icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--_c); color: var(--ns-black); font: 800 12px/1 var(--ns-font-sans); }
.ns-notice__title { font-weight: 700; margin: 0 0 var(--ns-space-1); }
.ns-notice__body { margin: 0; color: var(--ns-text-secondary); }
.ns-notice__close { all: unset; cursor: pointer; color: var(--ns-text-tertiary); font-size: 18px; line-height: 20px; padding: 0 var(--ns-space-2); border-radius: var(--ns-radius-xs); }
.ns-notice__close:hover { color: var(--ns-text-primary); }
.ns-notice__close:focus-visible { outline: 2px solid var(--ns-focus-ring); }
.ns-notice--success { --_c: var(--ns-status-success); } .ns-notice--warning { --_c: var(--ns-status-warning); } .ns-notice--error { --_c: var(--ns-status-error); }
.ns-notice--toast { box-shadow: var(--ns-elevation-03); background: var(--ns-background-elevated); max-width: 380px; }
.ns-banner { --_c: var(--ns-status-info); display: flex; align-items: center; gap: var(--ns-space-4); padding: var(--ns-space-3) var(--ns-space-5); background: var(--_c); color: var(--ns-white); font: 600 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); border-radius: var(--ns-radius-sm); }
.ns-banner a { color: inherit; }
.ns-banner--warning { --_c: var(--ns-yellow-500); color: var(--ns-black); }
.ns-banner--error { --_c: var(--ns-red-400); }
.ns-banner--brand { background: var(--ns-gradient-brand); }
.ns-toast-stack { position: fixed; right: var(--ns-space-7); bottom: var(--ns-space-7); display: grid; gap: var(--ns-space-3); z-index: 900; }
.ns-toast-stack .ns-notice { animation: ns-toast-in var(--ns-duration-slow) var(--ns-easing-enter); }
@keyframes ns-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Modal ---------- */
.ns-modal-backdrop { position: fixed; inset: 0; background: #05050fb3; backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 1000; padding: var(--ns-space-5); animation: ns-fade var(--ns-duration-base) var(--ns-easing-enter); }
@keyframes ns-fade { from { opacity: 0; } }
.ns-modal { width: min(100%, var(--_w, 520px)); max-height: 85vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--ns-layer, var(--ns-background-elevated)); border-radius: var(--ns-radius-xl); box-shadow: var(--ns-elevation-04); animation: ns-rise var(--ns-duration-slow) var(--ns-easing-enter); }
@keyframes ns-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.ns-modal--sm { --_w: 400px; } .ns-modal--lg { --_w: 760px; }
.ns-modal__head { padding: var(--ns-space-7) var(--ns-space-7) var(--ns-space-4); display: flex; justify-content: space-between; gap: var(--ns-space-5); }
.ns-modal__label { font: 700 var(--ns-type-overline-size)/1 var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); margin: 0 0 var(--ns-space-3); }
.ns-modal__title { margin: 0; font: 700 var(--ns-type-h6-size)/var(--ns-type-h6-line) var(--ns-font-sans); }
.ns-modal__body { padding: 0 var(--ns-space-7) var(--ns-space-7); overflow: auto; color: var(--ns-text-secondary); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }
.ns-modal__foot { display: flex; justify-content: flex-end; gap: var(--ns-space-3); padding: var(--ns-space-5) var(--ns-space-7); border-top: 1px solid var(--ns-layer-border, var(--ns-border-subtle)); }
.ns-modal--inline { animation: none; box-shadow: var(--ns-elevation-03); }

/* ---------- Tooltip / popover ---------- */
.ns-tip { position: relative; display: inline-flex; }
.ns-tip__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--ns-background-inverse); color: var(--ns-text-inverse); font: 400 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); padding: var(--ns-space-2) var(--ns-space-3); border-radius: var(--ns-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--ns-duration-base) var(--ns-easing-standard) .15s, transform var(--ns-duration-base) var(--ns-easing-standard) .15s; z-index: 10; }
.ns-tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ns-background-inverse); }
.ns-tip:hover .ns-tip__bubble, .ns-tip:focus-within .ns-tip__bubble, .ns-tip.is-open .ns-tip__bubble { opacity: 1; transform: translateX(-50%); }
.ns-tip--bottom .ns-tip__bubble { bottom: auto; top: calc(100% + 8px); }
.ns-tip--bottom .ns-tip__bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ns-background-inverse); }
.ns-popover { position: relative; display: inline-block; }
.ns-popover__panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--ns-background-elevated); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-elevation-02); padding: var(--ns-space-5); z-index: 20; display: none; font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }
.ns-popover.is-open .ns-popover__panel { display: grid; gap: var(--ns-space-3); animation: ns-rise var(--ns-duration-base) var(--ns-easing-enter); }
.ns-menu { list-style: none; margin: 0; padding: var(--ns-space-2); display: grid; }
.ns-menu button { all: unset; cursor: pointer; padding: var(--ns-space-3) var(--ns-space-4); border-radius: var(--ns-radius-sm); font: 400 var(--ns-type-body2-size)/1.2 var(--ns-font-sans); }
.ns-menu button:hover, .ns-menu button:focus-visible { background: var(--ns-background-hover); }

/* ---------- Accordion ---------- */
.ns-accordion { border-top: 1px solid var(--ns-border-subtle); }
.ns-accordion details { border-bottom: 1px solid var(--ns-border-subtle); }
.ns-accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--ns-space-5) var(--ns-space-3); font: 600 var(--ns-type-body1-size)/var(--ns-type-body1-line) var(--ns-font-sans); }
.ns-accordion summary::-webkit-details-marker { display: none; }
.ns-accordion summary::after { content: "+"; font: 400 20px/1 var(--ns-font-mono); color: var(--ns-text-tertiary); transition: transform var(--ns-duration-base) var(--ns-easing-standard); }
.ns-accordion details[open] summary::after { transform: rotate(45deg); color: var(--ns-text-accent); }
.ns-accordion summary:hover { background: var(--ns-background-hover); }
.ns-accordion summary:focus-visible { outline: 2px solid var(--ns-focus-ring); outline-offset: -2px; }
.ns-accordion .ns-accordion__body { padding: 0 var(--ns-space-3) var(--ns-space-5); color: var(--ns-text-secondary); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }

/* ---------- Divider ---------- */
.ns-divider { border: 0; border-top: 1px solid var(--ns-border-subtle); margin: var(--ns-space-5) 0; width: 100%; }
.ns-divider--v { border-top: 0; border-left: 1px solid var(--ns-border-subtle); width: 0; align-self: stretch; margin: 0 var(--ns-space-5); }
.ns-divider-label { display: flex; align-items: center; gap: var(--ns-space-4); font: 700 var(--ns-type-overline-size)/1 var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); }
.ns-divider-label::before, .ns-divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--ns-border-subtle); }

/* ---------- Date picker ---------- */
.ns-cal { width: 100%; max-width: 280px; min-width: 224px; box-sizing: border-box; background: var(--ns-background-elevated); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-elevation-02); padding: var(--ns-space-5); font: 400 var(--ns-type-body3-size)/1 var(--ns-font-sans); }
.ns-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ns-space-4); font-weight: 700; font-size: var(--ns-type-body2-size); }
.ns-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--ns-space-1); text-align: center; }
.ns-cal__dow { color: var(--ns-text-tertiary); font-size: 11px; padding: var(--ns-space-2) 0; }
.ns-cal__day { all: unset; cursor: pointer; height: 32px; display: grid; place-items: center; border-radius: var(--ns-radius-sm); }
.ns-cal__day:hover { background: var(--ns-background-hover); }
.ns-cal__day.is-muted { color: var(--ns-text-disabled); }
.ns-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--ns-teal-500); }
.ns-cal__day.is-range { background: var(--ns-background-selected); border-radius: 0; }
.ns-cal__day.is-selected { background: var(--ns-interactive-primary); color: var(--ns-white); font-weight: 700; }
.ns-cal__day:focus-visible { outline: 2px solid var(--ns-focus-ring); }

/* ---------- File uploader ---------- */
.ns-drop { border: 1.5px dashed var(--ns-border-strong); border-radius: var(--ns-radius-lg); padding: var(--ns-space-8) var(--ns-space-7); text-align: center; display: grid; gap: var(--ns-space-3); justify-items: center; color: var(--ns-text-secondary); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); cursor: pointer; transition: all var(--ns-duration-base) var(--ns-easing-standard); }
.ns-drop:hover, .ns-drop.is-over { border-color: var(--ns-teal-500); background: color-mix(in srgb, var(--ns-teal-500) 6%, transparent); color: var(--ns-text-primary); }
.ns-drop b { color: var(--ns-text-link); }
.ns-file { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ns-space-4); align-items: center; padding: var(--ns-space-4); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-md); font: 400 var(--ns-type-body3-size)/1.3 var(--ns-font-sans); }
.ns-file__ext { width: 32px; height: 32px; border-radius: var(--ns-radius-sm); display: grid; place-items: center; background: var(--ns-background-elevated); font: 700 10px/1 var(--ns-font-mono); color: var(--ns-text-accent); }

/* ---------- Side nav (component) ---------- */
.ns-sidenav { width: 240px; background: var(--ns-background-shell); border-radius: var(--ns-radius-lg); padding: var(--ns-space-4); display: grid; gap: var(--ns-space-1); font: 400 var(--ns-type-body2-size)/1 var(--ns-font-sans); }
.ns-sidenav__group { font: 700 var(--ns-type-overline-size)/1 var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); padding: var(--ns-space-4) var(--ns-space-3) var(--ns-space-3); }
.ns-sidenav a { color: var(--ns-text-secondary); text-decoration: none; padding: var(--ns-space-3); border-radius: var(--ns-radius-sm); display: flex; justify-content: space-between; }
.ns-sidenav a:hover { background: var(--ns-background-hover); color: var(--ns-text-primary); }
.ns-sidenav a[aria-current] { background: var(--ns-background-selected); color: var(--ns-text-accent); font-weight: 600; }

/* ---------- Kbd ---------- */
.ns-kbd, kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--ns-radius-xs); border: 1px solid var(--ns-border-default); border-bottom-width: 2px; background: var(--ns-background-secondary); font: 600 11px/1 var(--ns-font-mono); color: var(--ns-text-secondary); }

/* ---------- Alert banner (Figma: Type x Buttons x Description) ---------- */
.ns-alert { --_c: var(--ns-teal-500); --_bg: var(--ns-navy-900); display: grid; grid-template-columns: 20px 1fr auto; gap: var(--ns-space-4); align-items: start; padding: var(--ns-space-5) var(--ns-space-5); border-radius: var(--ns-radius-sm); background: var(--_bg); color: var(--ns-gray-0); font-family: var(--ns-font-sans); }
.ns-alert--compact { align-items: center; }
.ns-alert__icon { color: var(--_c); display: grid; place-items: center; padding-top: var(--ns-space-1); }
.ns-alert__icon svg { width: 16px; height: 16px; }
.ns-alert__title { margin: 0; font: 700 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); }
.ns-alert__desc { margin: var(--ns-space-1) 0 0; font: 400 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); letter-spacing: var(--ns-type-caption-tracking); color: color-mix(in srgb, var(--ns-gray-0) 80%, transparent); }
.ns-alert__actions { display: flex; gap: var(--ns-space-3); margin-top: var(--ns-space-4); flex-wrap: wrap; }
.ns-alert__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); }
.ns-alert .ns-btn { --_h: 32px; padding: 0 var(--ns-space-4); font-size: 13px; }
.ns-alert .ns-btn--outline { --_fg: var(--ns-gray-0); --_bd: color-mix(in srgb, var(--ns-gray-0) 45%, transparent); }
.ns-alert .ns-btn--ghost { --_fg: var(--ns-gray-0); }
.ns-alert__close { all: unset; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--ns-radius-xs); color: var(--ns-gray-0); font-size: 16px; }
.ns-alert__close:focus-visible { outline: 2px solid var(--ns-focus-ring); }
.ns-alert--accent { --_bg: var(--ns-blue-500); --_c: var(--ns-white); }
.ns-alert--error { --_bg: #5a1a2e; --_c: var(--ns-red-400); }
.ns-alert--success { --_bg: #1e4a2a; --_c: var(--ns-green-500); }
.ns-alert--warning { --_bg: #2a1640; --_c: var(--ns-purple-500); }
:root[data-theme="light"] .ns-alert:not(.ns-alert--accent) { --_bg: color-mix(in srgb, var(--_c) 12%, var(--ns-white)); color: var(--ns-black); }
:root[data-theme="light"] .ns-alert:not(.ns-alert--accent) .ns-alert__desc, :root[data-theme="light"] .ns-alert:not(.ns-alert--accent) .ns-alert__close { color: var(--ns-gray-6); }
:root[data-theme="light"] .ns-alert:not(.ns-alert--accent) .ns-btn--outline, :root[data-theme="light"] .ns-alert:not(.ns-alert--accent) .ns-btn--ghost { --_fg: var(--ns-black); --_bd: var(--ns-gray-4); }
:root[data-theme="light"] .ns-alert--default { --_c: #007f78; }

/* ---------- Dropdown (Figma: Trigger, Menu, List item) ---------- */
.ns-dd { position: relative; display: inline-block; }
.ns-dd__trigger { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ns-space-3); height: 42px; min-width: 150px; padding: 0 var(--ns-space-4); border-radius: var(--ns-radius-sm); background: var(--ns-interactive-secondary-bg); color: var(--ns-gray-0); font: 700 var(--ns-type-body1-size)/24px var(--ns-font-sans); transition: background var(--ns-duration-fast) var(--ns-easing-standard); }
:root[data-theme="light"] .ns-dd__trigger { color: var(--ns-black); }
.ns-dd__trigger:hover, .ns-dd__trigger.is-hover { background: var(--ns-interactive-secondary-hover); }
.ns-dd__trigger:focus-visible { outline: 2px solid var(--ns-focus-ring); }
.ns-dd__trigger[disabled] { background: color-mix(in srgb, var(--ns-gray-8) 40%, transparent); color: var(--ns-gray-5); cursor: not-allowed; }
.ns-dd__trigger .caret { margin-left: auto; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid currentColor; border-bottom: 0; }
.ns-dd__trigger--icon { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
.ns-dd__trigger svg { width: 18px; height: 18px; }
.ns-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; width: 200px; padding: var(--ns-space-2) 0; background: var(--ns-interactive-secondary-bg); border-radius: var(--ns-radius-sm); box-shadow: var(--ns-elevation-02); z-index: 30; display: none; list-style: none; margin: 0; }
.ns-dd.is-open .ns-dd__menu, .ns-dd__menu.is-static { display: block; position: static; animation: ns-rise var(--ns-duration-base) var(--ns-easing-enter); }
.ns-dd.is-open .ns-dd__menu { position: absolute; }
.ns-dd__item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--ns-space-3); width: 100%; height: 40px; padding: 0 var(--ns-space-5); font: 600 var(--ns-type-body2-size)/1 var(--ns-font-sans); color: var(--ns-gray-2); }
.ns-dd__item svg { width: 16px; height: 16px; }
.ns-dd__item:hover, .ns-dd__item.is-hover, .ns-dd__item:focus-visible { background: var(--ns-interactive-secondary-hover); color: var(--ns-text-primary); }
.ns-dd__item[aria-selected="true"] { color: var(--ns-text-primary); box-shadow: inset 3px 0 0 var(--ns-blue-700); }

/* ---------- Tooltip with icon (Figma: Placement x Icon) ---------- */
.ns-tooltip { display: inline-flex; align-items: center; gap: var(--ns-space-3); max-width: 264px; padding: var(--ns-space-3) var(--ns-space-4); border-radius: var(--ns-radius-sm); background: var(--ns-background-inverse); color: var(--ns-text-inverse); font: 400 var(--ns-type-caption-size)/var(--ns-type-caption-line) var(--ns-font-sans); position: relative; }
.ns-tooltip svg { width: 16px; height: 16px; flex: none; }
.ns-tooltip::after { content: ""; position: absolute; border: 6px solid transparent; }
.ns-tooltip[data-place="n"]::after { top: 100%; left: 50%; margin-left: -6px; border-top-color: var(--ns-background-inverse); }
.ns-tooltip[data-place="s"]::after { bottom: 100%; left: 50%; margin-left: -6px; border-bottom-color: var(--ns-background-inverse); }
.ns-tooltip[data-place="nw"]::after { top: 100%; left: 16px; border-top-color: var(--ns-background-inverse); }
.ns-tooltip[data-place="ne"]::after { top: 100%; right: 16px; border-top-color: var(--ns-background-inverse); }
.ns-tooltip[data-place="w"]::after { left: 100%; top: 50%; margin-top: -6px; border-left-color: var(--ns-background-inverse); }
.ns-tooltip[data-place="e"]::after { right: 100%; top: 50%; margin-top: -6px; border-right-color: var(--ns-background-inverse); }

/* ---------- Switch (Figma: 29x16) ---------- */
.ns-toggle--xs input { width: 29px; height: 16px; }
.ns-toggle--xs input::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.ns-toggle--xs input:checked::after { transform: translateX(13px); }

/* ---------- Batch 3: icon button, link, menu, bulk bar, textarea, combobox, stepper, inline edit ---------- */
.ns-btn--icon svg { width: 16px; height: 16px; flex: none; }
.ns-btn--icon.ns-btn--lg svg { width: 20px; height: 20px; }

.ns-link { color: var(--ns-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: var(--ns-space-1); border-radius: var(--ns-radius-xs); cursor: pointer; }
.ns-link:hover, .ns-link.is-hover { color: var(--ns-text-accent); text-decoration-thickness: 2px; }
.ns-link:focus-visible, .ns-link.is-focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-field) 35%, transparent); }
.ns-link[aria-disabled="true"] { color: var(--ns-text-disabled); text-decoration: none; pointer-events: none; }
.ns-link__arrow { font-size: 0.85em; line-height: 1; }

.ns-menu--panel { min-width: min(220px, 100%); box-sizing: border-box; padding: var(--ns-space-2); background: var(--ns-background-elevated); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-elevation-03); }
.ns-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-4); width: 100%; box-sizing: border-box; }
.ns-menu button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ns-focus-field); }
.ns-menu button[aria-disabled="true"] { color: var(--ns-text-disabled); pointer-events: none; }
.ns-menu button.is-destructive { color: var(--ns-status-error); }
.ns-menu__sep { height: 1px; margin: var(--ns-space-2) 0; background: var(--ns-border-subtle); }

.ns-bulkbar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ns-space-2); max-width: 100%; box-sizing: border-box; padding: var(--ns-space-3) var(--ns-space-4); background: var(--ns-background-elevated); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-elevation-03); }
.ns-bulkbar__count { font: 600 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); padding-right: var(--ns-space-2); white-space: nowrap; }
.ns-bulkbar__sep { width: 1px; height: 20px; margin: 0 var(--ns-space-2); background: var(--ns-border-default); }
.ns-bulkbar .ns-btn { --_h: var(--ns-density-control-sm); }

.ns-textarea.is-focus { border-color: var(--ns-focus-field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-field) 35%, transparent); }
.ns-textarea[disabled] { opacity: .45; cursor: not-allowed; }
.ns-field.is-error .ns-textarea { border-color: var(--ns-status-error); }
.ns-helper.is-over { color: var(--ns-status-error); }

.ns-combobox { position: relative; width: 100%; }
.ns-combobox__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2); min-height: var(--ns-density-control); box-sizing: border-box; padding: var(--ns-space-2) var(--ns-space-3); background: var(--ns-background-secondary); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-md); }
.ns-combobox__control:focus-within, .ns-combobox.is-open .ns-combobox__control { border-color: var(--ns-focus-field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-field) 35%, transparent); }
.ns-combobox input { all: unset; flex: 1 1 120px; min-width: 120px; height: 24px; font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); }
.ns-combobox input::placeholder { color: var(--ns-text-disabled); }
.ns-combobox[aria-disabled="true"], .ns-combobox.is-disabled { opacity: .45; pointer-events: none; }
.ns-combobox__list { margin-top: var(--ns-space-2); max-height: 240px; overflow: auto; }
.ns-combobox__list [role="option"] { padding-left: var(--ns-space-7); }
.ns-combobox__list [role="option"][aria-selected="true"] { background: var(--ns-background-selected); }
.ns-combobox__list [role="option"][aria-selected="true"]::before { content: "\2713"; position: absolute; margin-left: calc(var(--ns-space-4) * -1); color: var(--ns-text-accent); }
.ns-combobox__count { display: block; margin-top: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-4); border-top: 1px solid var(--ns-border-subtle); }

.ns-stepper { display: inline-flex; align-items: stretch; height: var(--ns-density-control); box-sizing: border-box; background: var(--ns-background-secondary); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-md); overflow: hidden; }
.ns-stepper:focus-within { border-color: var(--ns-focus-field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-focus-field) 35%, transparent); }
.ns-stepper button { all: unset; box-sizing: border-box; width: var(--ns-density-control); display: grid; place-items: center; cursor: pointer; color: var(--ns-text-secondary); }
.ns-stepper button svg { width: 16px; height: 16px; }
.ns-stepper button:hover { background: var(--ns-background-hover); color: var(--ns-text-primary); }
.ns-stepper button:focus-visible { box-shadow: inset 0 0 0 2px var(--ns-focus-field); }
.ns-stepper button[disabled] { color: var(--ns-text-disabled); background: transparent; cursor: not-allowed; }
.ns-stepper input { all: unset; box-sizing: border-box; width: 64px; text-align: center; font: 600 var(--ns-type-body2-size)/1 var(--ns-font-sans); font-variant-numeric: tabular-nums; color: var(--ns-text-primary); border-inline: 1px solid var(--ns-border-subtle); -moz-appearance: textfield; }
.ns-stepper input::-webkit-outer-spin-button, .ns-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ns-stepper.is-disabled { opacity: .45; }

.ns-inline-edit { position: relative; display: inline-flex; align-items: center; gap: var(--ns-space-3); max-width: 100%; box-sizing: border-box; min-height: var(--ns-density-control-sm); padding: var(--ns-space-1) var(--ns-space-3); border: 1px solid transparent; border-radius: var(--ns-radius-sm); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); cursor: text; }
.ns-inline-edit::after { content: "\270E"; color: var(--ns-text-tertiary); opacity: 0; transition: opacity var(--ns-duration-fast) var(--ns-easing-standard); }
.ns-inline-edit:hover, .ns-inline-edit.is-hover { background: var(--ns-background-hover); }
.ns-inline-edit:hover::after, .ns-inline-edit.is-hover::after, .ns-inline-edit:focus-visible::after { opacity: 1; }
.ns-inline-edit:focus-visible { outline: none; border-color: var(--ns-focus-field); }
.ns-inline-edit.is-editing { background: var(--ns-background-secondary); border-color: var(--ns-focus-field); }
.ns-inline-edit.is-editing::after { content: none; }
.ns-inline-edit__input { all: unset; flex: 1 1 96px; min-width: 0; font: inherit; color: inherit; }
.ns-inline-edit__btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ns-radius-sm); color: var(--ns-text-secondary); }
.ns-inline-edit__btn:hover { background: var(--ns-interactive-ghost-hover); color: var(--ns-text-primary); }
.ns-inline-edit .ns-spin { width: 14px; height: 14px; border-width: 2px; }

/* ---------- Batch 4: segmented control, tree view, command palette, status dot ---------- */
.ns-segmented { overflow-x: auto; scrollbar-width: none; display: inline-flex; align-items: stretch; gap: var(--ns-space-1); max-width: 100%; box-sizing: border-box; padding: var(--ns-space-1); background: var(--ns-background-secondary); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-md); }
.ns-segmented button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--ns-space-2); height: var(--ns-density-control-sm); padding: 0 var(--ns-space-4); border-radius: var(--ns-radius-sm); font: 600 var(--ns-type-body2-size)/1 var(--ns-font-sans); color: var(--ns-text-secondary); cursor: pointer; white-space: nowrap; }
.ns-segmented button svg { width: 16px; height: 16px; flex: none; }
.ns-segmented button:hover, .ns-segmented button.is-hover { color: var(--ns-text-primary); background: var(--ns-background-hover); }
.ns-segmented button[aria-checked="true"] { background: var(--ns-background-elevated); color: var(--ns-text-primary); box-shadow: var(--ns-elevation-02); }
.ns-segmented button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ns-focus-field); }
.ns-segmented button[disabled] { color: var(--ns-text-disabled); background: transparent; box-shadow: none; cursor: not-allowed; }

.ns-tree { list-style: none; margin: 0; padding: 0; font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); }
.ns-tree ul { list-style: none; margin: 0; padding: 0; }
.ns-tree__row { display: flex; align-items: center; gap: var(--ns-space-2); box-sizing: border-box; min-height: var(--ns-density-control-sm); padding: 0 var(--ns-space-3) 0 calc(var(--ns-space-3) + var(--ns-tree-level, 0) * var(--ns-space-6)); border-radius: var(--ns-radius-sm); cursor: pointer; }
.ns-tree__row:hover { background: var(--ns-background-hover); }
.ns-tree__row[aria-selected="true"] { background: var(--ns-background-selected); }
.ns-tree__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ns-focus-field); }
.ns-tree__row > span:not(.ns-tree__count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-tree__chev { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--ns-text-tertiary); transition: transform var(--ns-duration-fast) var(--ns-easing-standard); }
.ns-tree__chev svg { width: 14px; height: 14px; }
.ns-tree__chev.is-leaf { visibility: hidden; }
.ns-tree__row[aria-expanded="true"] > .ns-tree__chev { transform: rotate(90deg); }
.ns-tree__count { margin-left: auto; padding: 1px 6px; border-radius: var(--ns-radius-full); background: var(--ns-background-secondary); color: var(--ns-text-tertiary); font: 600 var(--ns-type-caption-size)/1.4 var(--ns-font-sans); }

.ns-cmdk { width: 100%; max-width: 560px; box-sizing: border-box; background: var(--ns-background-elevated); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-xl); box-shadow: var(--ns-elevation-04); overflow: hidden; font-family: var(--ns-font-sans); }
.ns-cmdk__query { display: flex; align-items: center; gap: var(--ns-space-3); padding: var(--ns-space-4) var(--ns-space-5); border-bottom: 1px solid var(--ns-border-subtle); }
.ns-cmdk__query svg { width: 18px; height: 18px; flex: none; color: var(--ns-text-tertiary); }
.ns-cmdk__query input { all: unset; flex: 1; min-width: 0; font: 400 var(--ns-type-body1-size)/1.3 var(--ns-font-sans); color: var(--ns-text-primary); }
.ns-cmdk__query input::placeholder { color: var(--ns-text-disabled); }
.ns-cmdk__list { padding: var(--ns-space-2); max-height: 320px; overflow: auto; }
.ns-cmdk__group { padding: var(--ns-space-3) var(--ns-space-3) var(--ns-space-1); font: 700 var(--ns-type-overline-size)/var(--ns-type-overline-line) var(--ns-font-sans); letter-spacing: var(--ns-type-overline-tracking); text-transform: uppercase; color: var(--ns-text-tertiary); }
.ns-cmdk__item { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-4); padding: var(--ns-space-3) var(--ns-space-4); border-radius: var(--ns-radius-sm); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); cursor: pointer; }
.ns-cmdk__item[aria-selected="true"] { background: var(--ns-background-selected); }
.ns-cmdk__item mark { background: none; color: var(--ns-text-accent); font-weight: 700; }
.ns-cmdk__meta { font: 400 var(--ns-type-caption-size)/1.3 var(--ns-font-sans); color: var(--ns-text-tertiary); white-space: nowrap; }
.ns-cmdk__foot { display: flex; flex-wrap: wrap; gap: var(--ns-space-5); padding: var(--ns-space-3) var(--ns-space-5); border-top: 1px solid var(--ns-border-subtle); font: 400 var(--ns-type-caption-size)/1.3 var(--ns-font-sans); color: var(--ns-text-tertiary); }
.ns-cmdk__foot span { display: inline-flex; align-items: center; gap: var(--ns-space-2); }

.ns-status-dot { --_c: var(--ns-text-tertiary); display: inline-flex; align-items: center; gap: var(--ns-space-2); font: 400 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); white-space: nowrap; }
.ns-status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c); flex: none; }
.ns-status-dot--positive { --_c: var(--ns-status-success); }
.ns-status-dot--critical { --_c: var(--ns-status-warning); }
.ns-status-dot--negative { --_c: var(--ns-status-error); }
.ns-status-dot--informative { --_c: var(--ns-status-info); }
.ns-status-dot--neutral { --_c: var(--ns-text-tertiary); }

/* ---------- Batch 5: guide pages ---------- */
.ns-guide-split { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--ns-space-5); align-items: start; }
.ns-guide-split > * { min-width: 0; }
.ns-cmd-preview { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-5); border: 1px solid var(--ns-border-default); border-radius: var(--ns-radius-lg); background: var(--ns-background-surface); }
.ns-ref-row { display: grid; grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) auto; gap: var(--ns-space-4); align-items: start; padding: var(--ns-space-4); border: 1px solid transparent; border-radius: var(--ns-radius-md); }
.ns-ref-row:hover { background: var(--ns-background-hover); border-color: var(--ns-border-subtle); }
.ns-ref-row__name { font: 700 var(--ns-type-body2-size)/var(--ns-type-body2-line) var(--ns-font-sans); color: var(--ns-text-primary); }
.ns-ref-row__desc { margin: 0 0 var(--ns-space-2); color: var(--ns-text-secondary); }
.ns-ref-row__aliases { display: flex; flex-wrap: wrap; gap: var(--ns-space-1); }
.ns-ref-row__aliases span { padding: 1px var(--ns-space-3); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-xs); background: var(--ns-background-secondary); color: var(--ns-text-tertiary); font: 400 var(--ns-type-caption-size)/1.4 var(--ns-font-sans); }
.ns-ref-row__meta { display: grid; justify-items: end; gap: var(--ns-space-1); }
@media (max-width: 760px) { .ns-guide-split, .ns-ref-row { grid-template-columns: 1fr; } .ns-ref-row__meta { justify-items: start; } }

/* Bullet chart (Figma: Data Visualization / Bullet Chart, 4443:314) */
.ns-bullet { display: grid; gap: var(--ns-space-6); padding: var(--ns-space-7); background: var(--ns-widget-bg); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-xl); font-family: var(--ns-font-sans); color: var(--ns-text-primary); box-sizing: border-box; }
.ns-bullet--small { flex-wrap: wrap; display: flex; align-items: center; gap: var(--ns-space-5); padding: var(--ns-space-5); }
.ns-bullet--vertical { gap: var(--ns-space-5); padding: var(--ns-space-5); }
.ns-bullet__head { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ns-space-4); }
.ns-bullet__text, .ns-bullet__kpi { display: grid; gap: var(--ns-space-2); align-content: start; flex: 1; min-width: 0; }
.ns-bullet--small .ns-bullet__text { gap: var(--ns-space-1); }
.ns-bullet__kpis .ns-bullet__kpi { flex: 1 1 140px; }
.ns-bullet__kpis { display: flex; flex-wrap: wrap; gap: var(--ns-space-5) var(--ns-space-9); min-width: 0; }
.ns-bullet__title { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/20px var(--ns-font-sans); }
.ns-bullet--small .ns-bullet__title, .ns-bullet--vertical .ns-bullet__title, .ns-bullet__summary .ns-bullet__title { font-size: 12px; line-height: 16px; }
.ns-bullet__summary .ns-bullet__title { color: var(--ns-text-secondary); }
.ns-bullet__title--lg { font-size: 16px; line-height: 24px; }
.ns-bullet__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); flex: none; }
.ns-bullet__value { flex-wrap: wrap; display: flex; align-items: baseline; gap: var(--ns-space-3); font: 700 28px/36px var(--ns-font-sans); }
.ns-bullet__value--sm { font-size: 24px; line-height: 32px; }
.ns-bullet__trend { font: 600 12px/16px var(--ns-font-sans); color: var(--ns-chart-trend-text); }
.ns-bullet__desc { font: 400 12px/16px var(--ns-font-sans); color: var(--ns-chart-label-text); }
.ns-bullet--small .ns-bullet__desc, .ns-bullet--vertical .ns-bullet__desc { font-size: 11px; line-height: 14px; }
.ns-bullet__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--ns-radius-full); background: var(--ns-widget-band); color: var(--ns-chart-series-1); }
.ns-bullet__rows { display: block; max-width: 100%; height: auto; overflow: visible; }
.ns-bullet__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ns-space-5); padding-top: var(--ns-space-6); border-top: 1px solid var(--ns-border-subtle); }

/* Chart cards (Figma: Chart / <Name> sets; plots are SVG rendered from NS.charts) */
.ns-chart { display: grid; gap: var(--ns-space-6); padding: var(--ns-space-7); background: var(--ns-widget-bg); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-xl); font-family: var(--ns-font-sans); color: var(--ns-text-primary); box-sizing: border-box; }
.ns-chart--small { display: flex; align-items: center; gap: var(--ns-space-5); padding: var(--ns-space-5); }
.ns-chart--vertical { gap: var(--ns-space-5); padding: var(--ns-space-5); }
.ns-chart__head { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ns-space-4); }
.ns-chart__kpi { display: grid; gap: var(--ns-space-2); align-content: start; flex: 1; min-width: 0; }
.ns-chart--small .ns-chart__kpi, .ns-chart--vertical .ns-chart__kpi { gap: var(--ns-space-1); }
.ns-chart__kpis { display: flex; flex-wrap: wrap; gap: var(--ns-space-5) var(--ns-space-9); flex: 1; min-width: 0; }
.ns-chart__title { display: inline-flex; align-items: center; gap: var(--ns-space-3); font: 600 14px/20px var(--ns-font-sans); }
.ns-chart__title--sm { font-size: 12px; line-height: 16px; }
.ns-chart__title--lg { font-size: 16px; line-height: 24px; }
.ns-chart__summary .ns-chart__title { color: var(--ns-text-secondary); }
.ns-chart__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); flex: none; }
.ns-chart__value { flex-wrap: wrap; display: flex; align-items: flex-end; gap: var(--ns-space-3); font: 700 28px/36px var(--ns-font-sans); }
.ns-chart__value--sm { font-size: 24px; line-height: 32px; }
.ns-chart__trend { font: 600 12px/16px var(--ns-font-sans); color: var(--ns-chart-trend-text); }
.ns-chart__desc { font: 400 12px/16px var(--ns-font-sans); color: var(--ns-chart-label-text); }
.ns-chart__desc--sm { font-size: 11px; line-height: 14px; }
.ns-chart__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--ns-radius-full); background: var(--ns-widget-band); color: var(--ns-chart-series-1); }
.ns-chart__plot { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; flex: none; font-family: var(--ns-font-sans); }
.ns-chart--small { flex-wrap: wrap; }
.ns-chart--small .ns-chart__kpi { flex: 1 1 140px; }
.ns-chart--small .ns-chart__plot { flex: 1 1 120px; width: auto; min-width: 0; }
.ns-chart__summary .ns-chart__kpi { flex: 1 1 120px; }
.ns-chart__kpis .ns-chart__kpi { flex: 1 1 140px; }
.ns-chart__summary { display: flex; flex-wrap: wrap; gap: var(--ns-space-5); padding-top: var(--ns-space-6); border-top: 1px solid var(--ns-border-subtle); }

/* Hit areas: small controls keep their look but get a 24px target (WCAG 2.2, 2.5.8) */
.ns-tag button, .ns-alert__close, .ns-notice__close, .ns-breadcrumb a { position: relative; }
.ns-tag button::after, .ns-alert__close::after, .ns-notice__close::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.ns-breadcrumb a::after { content: ""; position: absolute; inset: -5px 0; }