/* Makez Admin Panel — Makez design system (makez-frontend src/index.css tokens).
   Dark by default; [data-theme] switches every token. Components below mirror the
   Makez primitives: Header, Sidebar, TopBar, StatusCard, Card, Chip, Button,
   TextField, Field, Table, Badge, Empty, Skeleton, Toast, ThreeDotMenu. */

/* ---------------------------------------------------------------- tokens ---- */
:root {
  --brand-active: #4a2cbe;
  --brand-fill: #6847e8;
  --brand-fill-active: #4a2cbe;
  --brand-fill-hover: #5636d4;
  --brand-hover: #5636d4;
  --brand-light: #7c5cfc;
  --brand-muted: #b4a4f7;
  --brand-primary: #6847e8;
  --brand-subtle: #efeaff;
  --brand-text: #6847e8;

  --chart-1: #6847e8;
  --chart-2: #0e7e99;
  --chart-3: #9c7bf5;
  --chart-4: #1d5bd6;
  --chart-5: #12805b;
  --chart-6: #8a6206;
  --chart-7: #c22e45;
  --chart-axis: #c3c8d0;
  --chart-grid: #e7e9ed;
  --data-primary: #0e7e99;
  --data-hover: #0b6a82;
  --data-subtle: #e4f5fa;
  --data-text: #0d7690;

  --bg-active: #e7eaef;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f7f9;
  --bg-elevated: #ffffff;
  --bg-hover: #eff1f4;
  --bg-primary: #f6f7f9;
  --bg-secondary: #ffffff;
  --bg-surface: #ffffff;
  --surface-card: #ffffff;
  --surface-input: #ffffff;
  --surface-nav: #ffffff;
  --surface-page: #f6f7f9;
  --scrim-modal: rgba(20, 23, 27, 0.32);

  --border-default: #dcdfe5;
  --border-focus: #6847e8;
  --border-hover: #a8aeb8;
  --border-strong: #c3c8d0;
  --border-subtle: #e7e9ed;
  --border-control: #808a9b;
  --border-control-hover: #6f7a8d;

  --error-border: #f0bdc6;
  --error-primary: #c22e45;
  --error-subtle: #fdebee;
  --error-text: #a72538;
  --info-border: #bdd1f6;
  --info-primary: #1d5bd6;
  --info-subtle: #e9f0fd;
  --info-text: #1748ae;
  --success-border: #b5decb;
  --success-primary: #12805b;
  --success-subtle: #e6f6ef;
  --success-text: #0d6247;
  --warning-border: #e8d2a0;
  --warning-primary: #8a6206;
  --warning-subtle: #fcf3e0;
  --warning-text: #7a5605;

  --focus-outline: 2px solid #4a2cbe;
  --focus-ring: rgba(104, 71, 232, 0.2);
  --nav-active-bg: #efeaff;
  --nav-active-fg: #3e22b0;
  --nav-active-icon: #6847e8;

  --shadow-dropdown: 0 8px 24px rgba(20, 23, 27, 0.1);
  --shadow-elevated: 0 12px 32px rgba(20, 23, 27, 0.14);

  --text-disabled: #9aa1aa;
  --text-inverse: #ffffff;
  --text-meta: #626a74;
  --text-muted: #68707a;
  --text-on-brand: #ffffff;
  --text-primary: #14171b;
  --text-secondary: #3f464e;
  --text-tertiary: #5a626b;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 9999px;

  --text-2xs: 11.5px;
  --text-xs: 12.5px;
  --text-label: 12px;
  --text-sm: 13.5px;
  --text-base: 14px;
  --text-md: 14.5px;
  --text-lg: 17px;
  --text-h3: 19px;
  --text-h2: 24px;
  --text-kpi: 26px;

  --pad-card: 20px;
  --pad-card-lg: 24px;
  --pad-chip: 6px 13px;
  --pad-badge: 5px 11px;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --row-h: 46px;
  --table-head-h: 54px;
  --logo-h: 24px;

  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --scrollbar-thumb: var(--border-strong);
  --scrollbar-thumb-hover: var(--border-hover);
}

[data-theme='dark'] {
  --brand-active: #6847e8;
  --brand-fill-active: #5636d4;
  --brand-fill-hover: #7454f5;
  --brand-hover: #9278ff;
  --brand-light: #a78bfa;
  --brand-muted: #51468a;
  --brand-primary: #7c5cfc;
  --brand-subtle: #211a3d;
  --brand-text: #a78bfa;
  --chart-1: #7c5cfc;
  --chart-2: #35b8d8;
  --chart-3: #a78bfa;
  --chart-4: #5b9ff5;
  --chart-5: #36c98f;
  --chart-6: #e7b84b;
  --chart-7: #e45b6f;
  --chart-axis: #343a41;
  --chart-grid: #20252a;
  --data-hover: #4cc8e3;
  --data-primary: #35b8d8;
  --data-subtle: #102b32;
  --data-text: #6ed8ea;
  --bg-active: #272d35;
  --bg-card: #191d22;
  --bg-card-hover: #1d2228;
  --bg-elevated: #20252b;
  --bg-hover: #22282f;
  --bg-primary: #0b0d0f;
  --bg-secondary: #111418;
  --bg-surface: #14171b;
  --surface-card: var(--bg-card);
  --surface-input: var(--bg-secondary);
  --surface-nav: var(--bg-secondary);
  --surface-page: var(--bg-primary);
  --scrim-modal: rgba(0, 0, 0, 0.5);
  --border-default: #292e34;
  --border-focus: #7c5cfc;
  --border-hover: #464e58;
  --border-strong: #373e46;
  --border-subtle: #20252a;
  --border-control: #63707f;
  --border-control-hover: #717f90;
  --error-border: #4d2129;
  --error-primary: #e45b6f;
  --error-subtle: #32171d;
  --error-text: #ff8797;
  --info-border: #1c3552;
  --info-primary: #5b9ff5;
  --info-subtle: #12243a;
  --info-text: #8bbdf8;
  --success-border: #1c3f33;
  --success-primary: #36c98f;
  --success-subtle: #102c23;
  --success-text: #65e2b0;
  --warning-border: #4a3a1c;
  --warning-primary: #e7b84b;
  --warning-subtle: #302712;
  --warning-text: #f4cf70;
  --focus-outline: 2px solid #b9a6ff;
  --focus-ring: rgba(124, 92, 252, 0.18);
  --nav-active-bg: var(--brand-subtle);
  --nav-active-fg: #ffffff;
  --nav-active-icon: var(--brand-hover);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 255, 255, 0.04);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.06);
  --text-disabled: #4c545d;
  --text-inverse: #0b0d0f;
  --text-meta: #8a939d;
  --text-muted: #69727c;
  --text-primary: #f3f5f7;
  --text-secondary: #a4acb5;
  --text-tertiary: #7f8892;
}

/* raised-contrast boundaries, opt in with data-contrast="high" */
[data-contrast='high'] {
  --border-default: #5a626b;
  --border-hover: #8a939d;
  --border-strong: #727b85;
  --border-subtle: #3a4149;
}
[data-theme='light'][data-contrast='high'] {
  --border-default: #8c939c;
  --border-hover: #565d66;
  --border-strong: #6b727b;
  --border-subtle: #b7bcc4;
}

/* ------------------------------------------------------------------ base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible:not(input):not(select) { outline: var(--focus-outline); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb); border: 2px solid transparent;
  border-radius: 9999px; background-clip: padding-box; min-height: 32px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}

@keyframes mk-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@keyframes mk-toast-in { from { opacity: 0; transform: translate3d(100%, 0, 0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mk-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(100%, 0, 0) scale(0.96); } }
.spin { animation: mk-spin 700ms linear infinite; }

/* ------------------------------------------------------------ typography ---- */
.h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); }
.card-title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.card-desc { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-meta); line-height: 1.55; }
.meta { color: var(--text-meta); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi { font-family: var(--font-display); font-size: var(--text-kpi); font-weight: 800; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- header ---- */
.app { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); }
.hdr {
  z-index: 30; display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); flex-shrink: 0; padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--border-default); background: var(--bg-secondary);
}
.logo-btn { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity var(--dur-base); }
.logo-btn:hover { opacity: 0.85; }
.logo { display: block; height: var(--logo-h); width: auto; color: var(--text-primary); }
.hdr-right { display: flex; align-items: center; gap: 4px; }
.tenant-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; padding: 4px 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-primary);
}
.tenant-pill svg { width: 13px; height: 13px; color: var(--brand-primary); }
.vsep { width: 1px; height: 16px; margin: 0 2px; background: var(--border-default); }
.user { display: flex; align-items: center; gap: 10px; padding-left: 2px; }
.avatar {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px;
  background: var(--brand-subtle); color: var(--brand-text); font-size: 11px; font-weight: 700;
}
.user-name { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); }

/* ---------------------------------------------------------------- buttons ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.btn svg.i { width: 14px; height: 14px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--text-xs); }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-md); }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand-fill); color: var(--text-on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-fill-hover); }
.btn-primary:active:not(:disabled) { background: var(--brand-fill-active); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-elevated); border-color: var(--border-hover); }
.btn-secondary:active:not(:disabled) { background: var(--bg-active); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-card); color: var(--text-primary); }
.btn-ghost:active:not(:disabled) { background: var(--bg-hover); }
.btn-ghost.on { background: var(--bg-active); font-weight: 600; }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled) .arrow { transform: translateX(3px); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-meta); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover, .icon-btn.open { background: var(--bg-hover); color: var(--text-primary); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--brand-primary); border-radius: 9999px; animation: mk-spin 700ms linear infinite; }
.btn-primary .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

/* ---------------------------------------------------------------- menu ---- */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 220px; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-elevated);
  box-shadow: var(--shadow-dropdown); animation: mk-pop var(--dur-base) var(--ease-out);
}
.menu-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item svg.i { width: 15px; height: 15px; margin-top: 2px; color: var(--text-meta); }
.menu-item:hover svg.i { color: var(--text-primary); }
.menu-item b { display: block; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--text-primary); }
.menu-item small { display: block; margin-top: 1px; font-size: var(--text-2xs); color: var(--text-meta); }
.menu-item.danger b, .menu-item.danger svg.i, .menu-item.danger small { color: var(--error-text); }
.menu-sep { height: 1px; margin: 6px 0; background: var(--border-subtle); }

/* ----------------------------------------------------------- shell/rail ---- */
.shell { position: relative; display: flex; flex: 1; min-height: 0; background: var(--surface-page); }
.rail {
  position: relative; display: flex; flex-direction: column; flex-shrink: 0; width: var(--sidebar-w);
  min-height: 0; overflow: hidden; border-right: 1px solid var(--border-subtle); background: var(--surface-nav);
  transition: width var(--dur-slow) var(--ease-drawer);
}
.shell.collapsed .rail { width: var(--sidebar-w-collapsed); }
.rail-head { display: flex; align-items: center; height: 50px; flex-shrink: 0; padding: 0 16px; overflow: hidden; }
.rail-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.rail-short { display: none; padding: 3px 10px; border-radius: 9999px; background: var(--brand-subtle); color: var(--brand-text); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.shell.collapsed .rail-head { justify-content: center; padding: 0; }
.shell.collapsed .rail-title { display: none; }
.shell.collapsed .rail-short { display: inline-block; }
.rail-nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 12px; }
.rail-group { margin: 16px 0 4px; padding: 4px 10px; overflow: hidden; white-space: nowrap; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-meta); }
.shell.collapsed .rail-group { height: 1px; margin: 12px 6px; padding: 0; background: var(--border-subtle); color: transparent; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; margin-bottom: 10px;
  padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-item svg.i { width: 18px; height: 18px; }
.nav-item:hover { background: var(--bg-surface); color: var(--text-primary); }
.nav-item[aria-current='page'] { background: var(--nav-active-bg); font-weight: 600; color: var(--nav-active-fg); }
.nav-item[aria-current='page'] svg.i { color: var(--nav-active-icon); }
.nav-item[aria-current='page']::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: -6px; width: 2px; background: var(--brand-hover); }
.nav-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .trail { width: 12px; height: 12px; color: var(--text-meta); }
.shell.collapsed .nav-item { justify-content: center; gap: 0; padding: 0; }
.shell.collapsed .nav-item .lbl, .shell.collapsed .nav-item .trail, .shell.collapsed .rail-foot .lbl { display: none; }
.rail-foot { flex-shrink: 0; padding: 6px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: 11px; line-height: 2; color: var(--text-meta); white-space: nowrap; overflow: hidden; }
.rail-handle {
  position: absolute; top: 30px; left: var(--sidebar-w); z-index: 20; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; transform: translate(-50%, -50%);
  border: 1px solid var(--border-control); border-radius: 9999px; background: var(--bg-elevated); color: var(--text-meta);
  box-shadow: var(--shadow-dropdown); cursor: pointer;
  transition: left var(--dur-slow) var(--ease-drawer), background var(--dur-slow), color var(--dur-slow);
}
.rail-handle::after { content: ''; position: absolute; inset: -10px; }
.rail-handle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-control-hover); }
.rail-handle svg.i { width: 13px; height: 13px; stroke-width: 2.2; transition: transform var(--dur-base) var(--ease-standard); }
.shell.collapsed .rail-handle { left: var(--sidebar-w-collapsed); }
.shell.collapsed .rail-handle svg.i { transform: rotate(180deg); }

/* -------------------------------------------------------- topbar / page ---- */
.main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--bg-primary); }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  height: 60px; flex-shrink: 0; padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary);
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--text-sm); color: var(--text-meta); }
.crumbs .cur { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-primary); }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.chips { display: flex; align-items: center; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: var(--pad-chip);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-card);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--border-hover); }
.chip[aria-pressed='true'] { border-color: var(--brand-muted); background: var(--brand-subtle); color: var(--brand-text); }
.page { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 6px 4px 4px; }

/* ----------------------------------------------------------------- grid ---- */
.grid { display: grid; gap: 12px; }
.g-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
@media (max-width: 1280px) { .g-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .span-7, .span-5, .span-6 { grid-column: span 12; }
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .g-kpi { grid-template-columns: minmax(0, 1fr); } .chips { min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar-actions { min-width: 0; flex-shrink: 1; } }

/* ----------------------------------------------------------------- cards ---- */
.card {
  position: relative; display: flex; flex-direction: column; padding: var(--pad-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card);
  transition: border-color var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-elevated); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.card-head > div:first-child { min-width: 0; }
.card-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }

.stat {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 136px; padding: var(--pad-card) 16px;
  border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card);
  transition: border-color 200ms;
}
.stat:hover { border-color: var(--tone, var(--border-hover)); }
.stat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.stat-head svg.i { width: 18px; height: 18px; stroke-width: 3; color: var(--tone); }
.stat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tone); }
.stat-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.8; }

.tone-brand   { --tone: var(--brand-primary); }
.tone-data    { --tone: var(--data-primary); }
.tone-info    { --tone: var(--info-primary); }
.tone-success { --tone: var(--success-primary); }
.tone-warning { --tone: var(--warning-primary); }

/* ----------------------------------------------------------------- badge ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }
.badge-brand   { background: var(--brand-subtle); color: var(--brand-text); }
.badge-data    { background: var(--data-subtle); color: var(--data-text); }
.badge-success { background: var(--success-subtle); color: var(--success-text); }
.badge-warning { background: var(--warning-subtle); color: var(--warning-text); }
.badge-info    { background: var(--info-subtle); color: var(--info-text); }
.badge-neutral { background: var(--bg-elevated); color: var(--text-secondary); }

/* ----------------------------------------------------------------- chart ---- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--chart-grid); stroke-dasharray: 3 3; }
.chart .axis-line { stroke: var(--chart-axis); }
.chart text { fill: var(--text-meta); font-family: var(--font-body); font-size: 11px; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover { fill: var(--bg-hover); fill-opacity: 0.5; }
.legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 7px; height: 7px; border-radius: 9999px; background: var(--c); }
.tip {
  position: fixed; z-index: 90; min-width: 150px; padding: 8px 12px; pointer-events: none;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-elevated);
  box-shadow: var(--shadow-dropdown); font-size: var(--text-xs); animation: mk-fade var(--dur-fast);
}
.tip-h { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); font-weight: 600; color: var(--text-primary); }
.tip-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.tip-r span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.tip-r i { width: 8px; height: 8px; border-radius: 9999px; background: var(--c); }
.tip-r b { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }

/* ranked rows (StatusCard progress line) */
.rank { display: flex; flex-direction: column; gap: 14px; }
.rank-row .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rank-row .name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.rank-row .name i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 9999px; background: var(--c); }
.rank-row .val { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-meta); }
.rank-row .val b { color: var(--text-primary); font-weight: 600; }
.bar { height: 3px; overflow: hidden; border-radius: 9999px; background: var(--border-subtle); }
.bar i { display: block; height: 100%; border-radius: 9999px; background: var(--c); transition: width 300ms; }
.rank-row .sub { margin-top: 4px; font-size: var(--text-2xs); color: var(--text-meta); }

/* ----------------------------------------------------------------- table ---- */
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tbl th {
  height: var(--table-head-h); padding: 0 14px; border-bottom: 1px solid var(--border-default); background: var(--bg-secondary);
  text-align: left; white-space: nowrap; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-meta);
}
.tbl td { height: var(--row-h); padding: 0 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--bg-card-hover); }
.tbl .num { text-align: right; font-family: var(--font-mono); }
.tbl th.num { font-family: var(--font-body); }

/* ----------------------------------------------------------------- forms ---- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font-size: var(--text-label); font-weight: 600; color: var(--text-meta); }
.field .hint { font-size: var(--text-2xs); color: var(--text-meta); }
.input-wrap { position: relative; }
.input, .select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-card); font-size: var(--text-sm); color: var(--text-primary); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.input::placeholder { color: var(--text-disabled); }
.input:hover:not(:focus), .select:hover:not(:focus) { border-color: var(--border-strong); }
.input:focus, .select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.input[aria-invalid='true'] { border-color: var(--error-primary); }
.input.has-start { padding-left: 38px; }
.input.has-end { padding-right: 40px; }
.input-wrap > .start { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--text-meta); pointer-events: none; display: flex; }
.input-wrap > .end { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; }
.input-wrap > .end button { display: flex; padding: 4px; border: 0; background: none; color: var(--text-meta); cursor: pointer; }
.input-wrap > .end button:hover { color: var(--text-primary); }
.select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a939d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.select option { background: var(--bg-elevated); color: var(--text-primary); }
.w-200 { max-width: 220px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }
.col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.col-head svg.i { width: 15px; height: 15px; color: var(--brand-primary); }

.example {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 16px; padding: 14px 16px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface);
}
.example .lbl { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-meta); }
.example .sub { margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.example .kpi small { margin-left: 6px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--text-meta); }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--info-border); border-radius: var(--radius-lg); background: var(--info-subtle); font-size: var(--text-xs); line-height: 1.55; color: var(--info-text); }
.alert svg.i { width: 15px; height: 15px; margin-top: 1px; }
.alert-error { border-color: var(--error-border); background: var(--error-subtle); color: var(--error-text); }
.alert .x { margin-left: auto; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: flex; }

/* --------------------------------------------------------- states/toast ---- */
.skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-hover) 37%, var(--bg-surface) 63%); background-size: 400% 100%; animation: mk-shimmer 1400ms ease infinite; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.empty svg.i { width: 26px; height: 26px; color: var(--text-meta); }
.empty b { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.empty p { margin: 0; max-width: 46ch; font-size: var(--text-xs); line-height: 1.6; color: var(--text-meta); }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; min-width: 280px; max-width: 380px; padding: 12px 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-elevated);
  box-shadow: var(--shadow-elevated); font-size: var(--text-sm); color: var(--text-primary);
  animation: mk-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast.out { animation: mk-toast-out 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.toast svg.i { margin-top: 1px; }
.toast.success svg.i { color: var(--success-primary); }
.toast.error svg.i { color: var(--error-primary); }
.toast small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-meta); }

/* ----------------------------------------------------------------- login ---- */
.login { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); }
.glow { position: absolute; width: 384px; height: 384px; border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.glow.a { top: -160px; left: -160px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.glow.b { right: -160px; bottom: -160px; background: color-mix(in srgb, var(--brand-light) 10%, transparent); }
.login main { z-index: 10; display: flex; flex: 1; align-items: center; justify-content: center; padding: 32px 16px; }
.login-card { position: relative; width: 100%; max-width: 448px; padding: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.login-card h1 { margin: 0; text-align: center; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); }
.login-card .lead { margin: 6px 0 28px; text-align: center; font-size: var(--text-xs); color: var(--text-secondary); }
.login-card .eyebrow { display: flex; justify-content: center; margin-bottom: 14px; }
.login-card .eyebrow span { padding: 4px 10px; border-radius: 9999px; background: var(--brand-subtle); color: var(--brand-text); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.login-card .alert { margin-bottom: 16px; }
.login footer { z-index: 10; padding: 16px; text-align: center; font-size: var(--text-xs); color: var(--text-meta); }
@media (max-width: 768px) { .rail-handle { display: none; } .topbar { padding: 0 14px; } }
@media (max-width: 480px) { .login-card { padding: 28px 20px; } .hdr .btn-label { display: none; } }
@media (max-width: 760px) { .user-name, .tenant-pill, .hdr .hc { display: none; } }