/* ═══════════════════════════════════════════════════════════════════
   MYTHOS DESIGN LANGUAGE — Components
   One implementation of every shared surface. Artemis, Atlas and Plutus
   render these identically — only the module name + glyph + active tab
   change. No app ships its own button / pill / table dialect.
   No !important: this is the canonical layer, nothing to override.
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   WORDMARK  — the "Mythos." lockup and every app name share one face
   ════════════════════════════════════════════════════════════════════ */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
}
/* Round brand dot — drawn as a circle, replacing the squared period glyph.
   The span is emptied in markup; size is relative so it scales with the wordmark. */
.wordmark .dot,
.ms-wm .dot,
.ms-dd-head .mk .dot,
.sg-brand .wm .dot,
.sg-applabel .nm .dot,
.sg-wm-card .nm .dot,
.wm-dot {
  display: inline-block;
  width: 0.2em; height: 0.2em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--brand-orange);
  vertical-align: baseline;
}
/* Optical kern for "r"-ending wordmarks (Demeter): Inter's lowercase "r"
   leaves a wide right side-bearing, so the dot reads as drifting away. A tiny
   negative margin pulls it back in to match the "s"-ending names. !important
   beats the more-specific base selectors above. */
.dot.kern-r { margin-left: -0.012em !important; }
.wordmark.on-dark { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   BASE  — base reset etc continues below
   ════════════════════════════════════════════════════════════════════ */
/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Numbers ride the UI typeface (Inter) — one voice across display,
   KPI values and table cells. Tabular figures keep every column aligned;
   cv11/ss01 give Inter its single-storey, unambiguous numerals. */
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
  letter-spacing: -0.01em;
}
/* Mono is reserved for machine tokens: SKUs, timestamps, versions, code. */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER CHROME  — sticky top bar, 56px, blurred glass
   ════════════════════════════════════════════════════════════════════ */
.m-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--border-light);
}
.m-logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--brand-black);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.m-logo img { width: 100%; height: 100%; object-fit: cover; }
.m-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
  color: var(--text-primary);
  padding-right: 14px;
  position: relative;
}
.m-title::after {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--border-medium);
}
.m-header-spacer { flex: 1; }
.m-header-right { display: flex; align-items: center; gap: 8px; }

/* Module-switcher pill — a typographic logo: the app wordmark + chevron */
.ms-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 10px 0 12px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ms-pill:hover { border-color: var(--border-heavy); background: var(--bg-tinted); }
.ms-wm {
  font-family: var(--font-wordmark); font-weight: 800;
  font-size: 14.5px; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary);
  white-space: nowrap;
}
.ms-wm .dot { color: var(--brand-orange); }
.ms-pill-chev { color: var(--text-tertiary); display: inline-flex; }

/* Switcher dropdown — every row is the app's wordmark logo */
.ms-dd {
  width: 300px; padding: 6px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}
.ms-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 10px;
}
.ms-dd-head .mk { font-family: var(--font-wordmark); font-weight: 800; font-size: 17px; letter-spacing: -0.03em; }
.ms-dd-head .mk .dot { color: var(--brand-orange); }
.ms-dd-head .kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
  background: var(--bg-page); border: 0.5px solid var(--border-light); border-radius: 4px; padding: 3px 6px;
}
.ms-dd-label {
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-tertiary); padding: 8px 10px 4px;
}
.ms-dd-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ms-dd-row:hover { background: var(--bg-tinted); }
.ms-dd-row .ms-wm { font-size: 16px; }
.ms-dd-row .role { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.ms-dd-row .spacer { flex: 1; }
.ms-dd-row .cur { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.4px; color: var(--brand-orange); align-self: center; }
.ms-dd-row .arrow { color: var(--text-tertiary); align-self: center; display: inline-flex; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ms-dd-row:hover .arrow { color: var(--accent); transform: translateX(2px); }
.ms-dd-row.is-current { background: var(--brand-orange-tint); cursor: default; }
.ms-dd-row.is-locked { opacity: 0.5; cursor: not-allowed; }
.ms-dd-row.is-locked .ms-wm .dot { color: var(--text-tertiary); }
.ms-dd-row .lock { align-self: center; display: inline-flex; color: var(--text-tertiary); }
.ms-dd-divider { height: 0.5px; background: var(--border-light); margin: 6px 0; }

/* Activity / scheduler chip */
.activity-chip {
  height: 26px; padding: 0 10px;
  border-radius: 10px;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--accent-dark);
  border: none;
}
.activity-chip.scheduler { background: var(--warning-bg); color: var(--warning-dark); }
.activity-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Icon button (bell, settings gear) */
.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-tinted); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .badge-count {
  position: absolute; top: 0; right: 0;
  background: var(--brand-orange); color: #fff;
  font: var(--fw-semibold) 10px/1 var(--font-sans);
  padding: 2px 5px; border-radius: 999px; min-width: 16px; text-align: center;
}

/* User menu button */
.user-btn {
  height: 32px; padding: 0 6px 0 4px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.user-btn:hover { background: var(--bg-tinted); }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #4A4A4F 0%, #1A1A1A 100%);
  color: #fff; font: var(--fw-bold) 10.5px/1 var(--font-sans);
  display: grid; place-items: center; letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════════════════════
   NAV TABS  — 44px, 2px brand underline indicator
   ════════════════════════════════════════════════════════════════════ */
.m-nav {
  height: var(--nav-height);
  display: flex; align-items: stretch; gap: 2px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--border-light);
}
.nav-tab {
  position: relative;
  padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-tab:hover { color: var(--text-primary); }
.nav-tab.active { color: var(--text-primary); font-weight: var(--fw-semibold); }
.nav-tab.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -0.5px;
  height: 2px; background: var(--brand-orange); border-radius: 2px 2px 0 0;
}
.nav-tab .badge-count {
  font: var(--fw-semibold) 10.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: var(--bg-tinted); color: var(--text-secondary);
  border: 0.5px solid var(--border-light);
  padding: 2px 6px; border-radius: 10px;
}
.nav-tab.active .badge-count { background: var(--brand-orange-tint); color: var(--brand-orange-hover); border-color: transparent; }

/* Sub-tabs (lighter weight, same indicator) */
.sub-tabs { display: flex; gap: 2px; border-bottom: 0.5px solid var(--border-light); }
.sub-tab {
  position: relative; padding: 8px 14px;
  font-size: 13px; font-weight: var(--fw-medium); color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.sub-tab:hover { color: var(--text-primary); }
.sub-tab.active { color: var(--text-primary); font-weight: var(--fw-semibold); }
.sub-tab.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -0.5px;
  height: 2px; background: var(--brand-orange); border-radius: 2px 2px 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED SYNC PILL  — one button, one tray. The single most-seen control.
   Shows only the dominant activity; every source & job lives in the tray.
   read = --accent (blue, pull data IN) · execute = --brand-orange (push OUT).
   Replaces the divergent Atlas/Artemis implementations and the old
   segmented pill. One component, identical across every module.
   ════════════════════════════════════════════════════════════════════ */
.sync-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px 0 10px; overflow: hidden;
  border: 0.5px solid var(--border-medium); border-radius: var(--radius-pill);
  background: var(--bg-card); cursor: pointer;
  font: var(--fw-semibold) 12px/1 var(--font-sans); color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* progress fill — tinted by operation */
.sync-pill__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%);
  opacity: 0.15; pointer-events: none; transition: width 0.32s var(--ease-out);
}
.sync-pill__ic { width: 15px; display: inline-flex; justify-content: center; flex-shrink: 0; color: var(--success); }
.sync-pill__tx { font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }
.sync-pill__sub { color: var(--text-tertiary); font-weight: var(--fw-medium); }
.sync-pill__chev { color: var(--text-tertiary); display: inline-flex; margin-left: 1px;
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* tones */
.sync-pill.is-sync { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.sync-pill.is-sync .sync-pill__ic { color: var(--accent); }
.sync-pill.is-sync .sync-pill__fill { background: var(--accent); }
.sync-pill.is-exec { border-color: color-mix(in oklab, var(--brand-orange) 45%, transparent); }
.sync-pill.is-exec .sync-pill__ic, .sync-pill.is-multi .sync-pill__ic { color: var(--brand-orange); }
.sync-pill.is-exec .sync-pill__fill, .sync-pill.is-multi .sync-pill__fill { background: var(--brand-orange); }

/* interaction states */
.sync-pill:hover, .sync-pill.is-hover { border-color: var(--border-heavy); background: var(--bg-tinted); }
.sync-pill:hover .sync-pill__chev, .sync-pill.is-hover .sync-pill__chev { color: var(--text-secondary); }
.sync-pill:focus-visible, .sync-pill.is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.sync-pill:active, .sync-pill.is-press { transform: scale(0.97); }
.sync-pill.is-open { border-color: var(--border-heavy); background: var(--bg-tinted); }
.sync-pill.is-open .sync-pill__chev { transform: rotate(180deg); color: var(--text-secondary); }

/* active fill leading edge */
.sync-pill.is-active .sync-pill__fill::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, currentColor); opacity: 0.5;
}
.sync-pill.is-sync .sync-pill__fill::after { color: var(--accent); }
.sync-pill.is-exec .sync-pill__fill::after, .sync-pill.is-multi .sync-pill__fill::after { color: var(--brand-orange); }

/* indeterminate (connecting / queued, % unknown) */
.sync-pill.is-indet .sync-pill__fill { width: 38% !important; opacity: 0.14; animation: sync-indet 1.15s var(--ease-in-out) infinite; }
@keyframes sync-indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* success flash on completion */
.sync-pill.is-done { border-color: color-mix(in oklab, var(--success) 55%, transparent); animation: sync-doneflash 1.6s var(--ease-out); }
.sync-pill.is-done .sync-pill__ic { color: var(--success); }
@keyframes sync-doneflash { 0% { background: var(--success-bg); } 100% { background: var(--bg-card); } }

/* attention sub-tones + status dot */
.sync-pill__sub.warn { color: var(--warning-dark); font-weight: var(--fw-semibold); }
.sync-pill__sub.err  { color: var(--error-dark); font-weight: var(--fw-semibold); }
.sync-pill__statusdot { width: 7px; height: 7px; border-radius: 50%; margin-left: 1px; flex-shrink: 0; }
.sync-pill__statusdot.warn { background: var(--warning); }
.sync-pill__statusdot.err  { background: var(--error); }

/* spinner */
.sync-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: sync-spin 0.72s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }

/* ── the tray (pop-over) ───────────────────────────────────────────── */
.sync-tray {
  width: 344px; padding: 6px; border-radius: var(--radius-md);
  background: var(--bg-elevated, var(--bg-card)); border: 0.5px solid var(--border-light);
  box-shadow: var(--shadow-popover);
}
.sync-tray__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); padding: 8px 10px 5px; }
.sync-tray__div { height: 0.5px; background: var(--border-light); margin: 5px 4px; }
.sync-tray__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: 11px; color: var(--text-tertiary); }
.sync-tray__foot .ok { color: var(--success-dark); font-weight: var(--fw-semibold); }
.sync-tray__allrow { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px 4px; }
.sync-tray__allrow .lbl { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-secondary); }

/* tray rows */
.sync-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background var(--dur-fast) var(--ease-out); }
.sync-row:hover { background: var(--bg-tinted); }
.sync-row__glyph { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; background: var(--bg-tinted); color: var(--text-secondary); }
.sync-row.read .sync-row__glyph { color: var(--accent); background: var(--accent-bg); }
.sync-row.exec .sync-row__glyph { color: var(--brand-orange); background: var(--brand-orange-tint); }
.sync-row__glyph.is-err { color: var(--error); background: var(--error-bg); }
.sync-row__glyph.is-warn { color: var(--warning-dark); background: var(--warning-bg); }
.sync-row__body { flex: 1; min-width: 0; padding-top: 1px; }
.sync-row__nm { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.sync-row__meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sync-row__meta.warn { color: var(--warning-dark); }
.sync-row__meta.err  { color: var(--error-dark); }
.sync-row__mini { position: relative; height: 4px; border-radius: 2px; background: var(--track-bg); margin-top: 6px; overflow: hidden; }
.sync-row__mini > span { position: absolute; inset: 0; width: var(--p, 0%); border-radius: 2px; }
.sync-row.read .sync-row__mini > span { background: var(--accent); }
.sync-row.exec .sync-row__mini > span { background: var(--brand-orange); }
/* right-side action cluster */
.sync-row__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 1px; }
.sync-seg { display: inline-flex; border-radius: 7px; overflow: hidden; border: 0.5px solid var(--border-medium); background: var(--bg-card); }
.sync-seg button { border: none; background: transparent; cursor: pointer; font: var(--fw-semibold) 10.5px/1 var(--font-sans); color: var(--text-secondary); padding: 5px 8px; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sync-seg button + button { border-left: 0.5px solid var(--border-light); }
.sync-row.read .sync-seg button:hover { background: var(--accent-bg); color: var(--accent-dark); }
.sync-row.exec .sync-seg button:hover { background: var(--brand-orange-tint); color: var(--brand-orange-hover); }
.sync-rowbtn { border: 0.5px solid var(--border-light); background: var(--bg-card); cursor: pointer; font: var(--fw-semibold) 10.5px/1 var(--font-sans); padding: 6px 9px; border-radius: 7px; white-space: nowrap; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out); }
.sync-row.read .sync-rowbtn { color: var(--accent); }
.sync-row.exec .sync-rowbtn { color: var(--brand-orange); }
.sync-row.read .sync-rowbtn:hover { background: var(--accent-bg); }
.sync-row.exec .sync-rowbtn:hover { background: var(--brand-orange-tint); }
.sync-rowbtn.retry { color: var(--error-dark); border-color: color-mix(in oklab, var(--error) 30%, transparent); }
.sync-rowbtn.retry:hover { background: var(--error-bg); }
.sync-cancel { border: none; background: transparent; cursor: pointer; font: var(--fw-medium) 10.5px/1 var(--font-sans); color: var(--text-tertiary); padding: 5px 6px; border-radius: 6px; }
.sync-cancel:hover { color: var(--text-secondary); background: var(--bg-tinted); }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
  height: 32px; padding: 0 13px;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0.5px solid transparent; background: transparent; cursor: pointer;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { height: 28px; padding: 0 11px; font-size: 11.5px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 13.5px; }
.btn-primary { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); font-weight: var(--fw-semibold); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-orange-hover); border-color: var(--brand-orange-hover); box-shadow: var(--shadow-brand-lg); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-accent  { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: var(--fw-semibold); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost   { background: var(--bg-card); border-color: var(--border-medium); color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-tinted); border-color: var(--border-heavy); }
.btn-danger  { background: var(--error); color: #fff; border-color: var(--error); font-weight: var(--fw-semibold); }
.btn-danger:hover { background: var(--error-dark); border-color: var(--error-dark); }
.btn-quiet   { background: transparent; color: var(--text-secondary); }
.btn-quiet:hover { background: var(--bg-tinted); color: var(--text-primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL + CHIPS
   ════════════════════════════════════════════════════════════════════ */
.pill-group {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--bg-tinted);
  border: 0.5px solid var(--border-light);
  border-radius: 9px;
}
.pill-btn {
  height: 24px; padding: 0 10px;
  border-radius: 6px; border: none; background: transparent;
  font-size: 11.5px; font-weight: var(--fw-medium); color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pill-btn:hover:not(.active) { color: var(--text-primary); }
.pill-btn.active {
  background: var(--bg-card); color: var(--text-primary); font-weight: var(--fw-semibold);
  box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.06), 0 0 0 0.5px var(--border-medium);
}
.chip {
  height: 26px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-medium); background: var(--bg-card);
  font-size: 11.5px; font-weight: var(--fw-medium); color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--border-heavy); color: var(--text-primary); }
.chip.active { border-color: var(--brand-orange); color: var(--brand-orange-hover); background: var(--brand-orange-tint); }

/* ════════════════════════════════════════════════════════════════════
   CARDS + KPI
   ════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--border-medium); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-title { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -0.2px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi-label {
  font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary);
}
.kpi-value {
  font-size: 30px; font-weight: var(--fw-bold);
  letter-spacing: -0.8px; line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
}
.kpi-sub { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.kpi-delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--success-dark); }
.kpi-delta.down { color: var(--error-dark); }

/* ════════════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════════════ */
.table-wrap {
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
table.m-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.m-table thead tr { background: var(--bg-tinted); }
.m-table th {
  font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 9px 12px; text-align: left; border-bottom: 0.5px solid var(--border-light);
}
.m-table th.num, .m-table td.num { text-align: right; }
.m-table td { padding: 11px 12px; border-bottom: 0.5px solid var(--border-light); }
.m-table tbody tr { transition: background 120ms var(--ease-out); }
.m-table tbody tr:hover { background: var(--bg-tinted); }
.m-table tbody tr:last-child td { border-bottom: none; }
.m-table tr.is-current { background: var(--bg-current); }
.cell-strong { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════════
   BADGES + STATUS
   ════════════════════════════════════════════════════════════════════ */
.badge {
  font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.2px;
  padding: 3px 7px; border-radius: 5px; border: 0.5px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-cmc      { background: rgba(31,78,156,0.10);  color: var(--src-cmc-1); }
.badge-ams      { background: rgba(107,79,143,0.10); color: var(--src-ams-1); }
.badge-up       { background: var(--success-bg); color: var(--success-dark); }
.badge-down     { background: var(--error-bg);   color: var(--error-dark); }
.badge-neutral  { background: var(--bg-tinted);  color: var(--text-secondary); border-color: var(--border-light); }
.badge-pending  { background: var(--warning-bg); color: var(--warning-dark); }
.badge-approved { background: var(--success-bg); color: var(--success-dark); }
.badge-failed   { background: var(--error-bg);   color: var(--error-dark); }
.badge-info     { background: var(--accent-bg);  color: var(--accent-dark); }
.badge-variant  { background: rgba(175,82,222,0.10); color: #6F2DAA; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); }
.status-dot.ok::before   { background: var(--success); }
.status-dot.warn::before { background: var(--warning); }
.status-dot.err::before  { background: var(--error); }

/* ════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ════════════════════════════════════════════════════════════════════ */
.field-label {
  display: block; font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: 6px;
}
.m-input, .m-select {
  width: 100%; height: 34px; padding: 0 11px;
  font-family: inherit; font-size: 12.5px; color: var(--text-primary);
  background: var(--bg-card);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.m-input::placeholder { color: var(--text-tertiary); }
.m-input:focus, .m-select:focus {
  outline: none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(232, 97, 26, 0.10);
}
.m-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.m-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.m-toggle .track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--track-bg);
  transition: background var(--dur) var(--ease-out);
}
.m-toggle .thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-pressed);
  transition: transform var(--dur) var(--ease-spring);
}
.m-toggle input:checked ~ .track { background: var(--success); }
.m-toggle input:checked ~ .thumb { transform: translateX(16px); }

/* ════════════════════════════════════════════════════════════════════
   TOAST + DIALOG
   ════════════════════════════════════════════════════════════════════ */
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-black); color: #fff;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: var(--fw-medium);
  box-shadow: var(--shadow-elev); letter-spacing: -0.005em;
}
.toast.success { background: var(--success-dark); }
.toast.error   { background: var(--error-dark); }
.toast.warning { background: var(--warning-dark); }
.toast .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dialog {
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-modal);
  max-width: 380px;
}
.dialog h3 { font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.2px; margin: 0 0 8px; }
.dialog p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════
   EMPTY + LOADING STATES
   ════════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 20px; text-align: center; color: var(--text-secondary);
}
.empty-state .ic {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-tinted); color: var(--text-tertiary);
}
.empty-state .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-title { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.empty-sub { font-size: 12px; color: var(--text-tertiary); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-tinted) 25%, #F0F0F2 37%, var(--bg-tinted) 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  animation: sk-shimmer 1.4s ease infinite;
}
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-medium); border-top-color: var(--brand-orange);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.m-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-top: 0.5px solid var(--border-light);
  font-size: 11px; color: var(--text-tertiary); background: var(--bg-page);
}
.m-footer .env-pill {
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--success-bg); color: var(--success-dark);
}
.m-footer .powered { margin-left: auto; font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}