/* =================================================================
   MyMoney · 2026 Design System
   Pure HTML+CSS · ready for .NET Razor component handoff.

   Naming: BEM-ish — block, block--modifier, block__element.
   Every modifier is independent; combine size + tone + state freely.

   Suggested Razor component mapping:
     .mm-btn .mm-btn--primary .mm-btn--lg    →  <MmButton Tone="Primary" Size="Lg" />
     .mm-badge .mm-badge--success            →  <MmBadge Tone="Success" />
     .mm-input.mm-input--error               →  <MmInput HasError="true" />
   ================================================================= */

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── 1. TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Surface */
  --mm-bg:               #141414;
  --mm-bg-alt:           #1a1a1a;
  --mm-surface:          #1e1e1e;
  --mm-surface-elev:     #262626;
  --mm-surface-hover:    #2a2a2a;
  --mm-surface-active:   #303030;

  /* Border */
  --mm-border:           #2a2a2a;
  --mm-border-strong:    #3a3a3a;
  --mm-border-focus:     #fdd114;
  --mm-divider:          #232323;

  /* Text */
  --mm-text:             #f5f5f5;
  --mm-text-secondary:   #a8a8a8;
  --mm-text-tertiary:    #6e6e6e;
  --mm-text-disabled:    #4a4a4a;
  --mm-text-inverse:     #0a0a0a;

  /* Brand */
  --mm-yellow:           #fdd114;
  --mm-yellow-strong:    #ffd817;
  --mm-yellow-dim:       #c9a510;
  --mm-yellow-soft:      rgba(253, 209, 20, 0.12);
  --mm-yellow-softer:    rgba(253, 209, 20, 0.06);
  --mm-yellow-border:    rgba(253, 209, 20, 0.32);
  --mm-yellow-glow:      rgba(253, 209, 20, 0.35);
  --mm-yellow-text:      #ffdc3a;

  /* Status */
  --mm-success:          #22c55e;
  --mm-success-fg:       #4ade80;
  --mm-success-bg:       rgba(34, 197, 94, 0.12);
  --mm-success-border:   rgba(34, 197, 94, 0.32);

  --mm-warning:          #f59e0b;
  --mm-warning-fg:       #fbbf24;
  --mm-warning-bg:       rgba(245, 158, 11, 0.12);
  --mm-warning-border:   rgba(245, 158, 11, 0.32);

  --mm-danger:           #ef4444;
  --mm-danger-fg:        #f87171;
  --mm-danger-bg:        rgba(239, 68, 68, 0.12);
  --mm-danger-border:    rgba(239, 68, 68, 0.32);
  --mm-danger-strong:    #dc2626;

  --mm-info:             #60a5fa;
  --mm-info-fg:          #93c5fd;
  --mm-info-bg:          rgba(96, 165, 250, 0.12);
  --mm-info-border:      rgba(96, 165, 250, 0.32);

  --mm-neutral-bg:       rgba(255, 255, 255, 0.06);
  --mm-neutral-border:   rgba(255, 255, 255, 0.12);

  /* Type */
  --mm-font:             'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mm-font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --mm-fs-10:            10px;
  --mm-fs-11:            11px;
  --mm-fs-12:            12px;
  --mm-fs-13:            13px;
  --mm-fs-14:            14px;
  --mm-fs-16:            16px;
  --mm-fs-18:            18px;
  --mm-fs-20:            20px;
  --mm-fs-24:            24px;
  --mm-fs-32:            32px;
  --mm-fs-48:            48px;
  --mm-fs-64:            64px;

  --mm-fw-regular:       400;
  --mm-fw-medium:        500;
  --mm-fw-semibold:      600;
  --mm-fw-bold:          700;

  /* Spacing (4px base) */
  --mm-sp-1: 4px;  --mm-sp-2: 8px;  --mm-sp-3: 12px; --mm-sp-4: 16px;
  --mm-sp-5: 20px; --mm-sp-6: 24px; --mm-sp-7: 32px; --mm-sp-8: 40px;
  --mm-sp-9: 48px; --mm-sp-10: 64px;

  /* Radii */
  --mm-r-0: 0px; --mm-r-1: 2px; --mm-r-2: 4px; --mm-r-3: 6px;
  --mm-r-4: 8px; --mm-r-5: 12px; --mm-r-full: 999px;
  --mm-r-signature: 2px 2px 8px 8px;   /* sharp top, rounded bottom */

  /* Shadows */
  --mm-sh-flat:          0 1px 0 rgba(255,255,255,0.04) inset;
  --mm-sh-sm:            0 1px 2px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --mm-sh-md:            0 4px 12px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --mm-sh-lg:            0 16px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --mm-sh-modal:         0 32px 80px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset;
  --mm-sh-yellow:        0 0 0 1px rgba(253,209,20,0.5) inset, 0 6px 18px rgba(253,209,20,0.22);
  --mm-sh-yellow-strong: 0 0 0 1px rgba(253,209,20,0.6) inset, 0 8px 24px rgba(253,209,20,0.35);
  --mm-sh-focus:         0 0 0 3px rgba(253,209,20,0.28);
  --mm-sh-focus-danger:  0 0 0 3px rgba(239,68,68,0.28);

  /* Motion */
  --mm-dur-fast:   120ms;
  --mm-dur-normal: 180ms;
  --mm-dur-slow:   260ms;
  --mm-ease:       cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Layout */
  --mm-sidebar-w: 232px;
  --mm-topbar-h:  56px;
}

/* ─── 2. RESET / BASE ────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-feature-settings: 'cv11','ss01','cv02';
  font-size: var(--mm-fs-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--mm-yellow-text); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--mm-divider); margin: 0; }

/* ─── 3. UTILITIES ───────────────────────────────────────────────── */
.mm-mono { font-family: var(--mm-font-mono); font-feature-settings: 'tnum','zero'; }
.mm-tnum { font-variant-numeric: tabular-nums; }
.mm-tx-pos { color: var(--mm-success-fg); }
.mm-tx-neg { color: var(--mm-danger-fg); }
.mm-tx-muted { color: var(--mm-text-secondary); }
.mm-tx-faint { color: var(--mm-text-tertiary); }
.mm-tx-yellow { color: var(--mm-yellow-text); }

.mm-eyebrow {
  font-size: var(--mm-fs-10);
  font-weight: var(--mm-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-text-tertiary);
}

.mm-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.mm-scrollbar::-webkit-scrollbar-track { background: transparent; }
.mm-scrollbar::-webkit-scrollbar-thumb { background: var(--mm-border-strong); border-radius: 5px; }
.mm-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }

/* ─── 4. TYPOGRAPHY CLASSES ──────────────────────────────────────── */
.mm-h1 { font-size: var(--mm-fs-48); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.mm-h2 { font-size: var(--mm-fs-32); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 0; }
.mm-h3 { font-size: var(--mm-fs-24); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.mm-h4 { font-size: var(--mm-fs-18); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
.mm-h5 { font-size: var(--mm-fs-16); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 0; }
.mm-text-lg { font-size: var(--mm-fs-16); line-height: 1.5; margin: 0; }
.mm-text    { font-size: var(--mm-fs-14); line-height: 1.5; margin: 0; }
.mm-text-sm { font-size: var(--mm-fs-13); line-height: 1.5; margin: 0; }
.mm-text-xs { font-size: var(--mm-fs-12); line-height: 1.45; margin: 0; }
.mm-caption { font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); line-height: 1.4; margin: 0; }

/* =================================================================
   COMPONENTS
   ================================================================= */

/* ─── BUTTON ─────────────────────────────────────────────────────── */
.mm-btn {
  --_h: 34px; --_px: 14px; --_fs: 13px; --_icon: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--_h);
  padding: 0 var(--_px);
  font-family: var(--mm-font);
  font-size: var(--_fs);
  font-weight: var(--mm-fw-semibold);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--mm-r-3);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--mm-dur-fast) var(--mm-ease),
              box-shadow var(--mm-dur-fast) var(--mm-ease),
              color var(--mm-dur-fast) var(--mm-ease),
              border-color var(--mm-dur-fast) var(--mm-ease);
}
.mm-btn:focus-visible { outline: none; box-shadow: var(--mm-sh-focus); }
.mm-btn .mm-icon { width: var(--_icon); height: var(--_icon); flex-shrink: 0; }

/* Sizes */
.mm-btn--sm { --_h: 28px; --_px: 10px; --_fs: 12px; --_icon: 14px; }
.mm-btn--md { --_h: 34px; --_px: 14px; --_fs: 13px; --_icon: 14px; }
.mm-btn--lg { --_h: 40px; --_px: 18px; --_fs: 14px; --_icon: 16px; }

/* Modifiers */
.mm-btn--full { width: 100%; }
.mm-btn--icon-only { width: var(--_h); padding: 0; }

/* Variants — PRIMARY (signature shape) */
.mm-btn--primary {
  background: var(--mm-yellow);
  color: var(--mm-text-inverse);
  border-radius: var(--mm-r-signature);
  box-shadow: var(--mm-sh-yellow);
}
.mm-btn--primary:hover  { background: var(--mm-yellow-strong); box-shadow: var(--mm-sh-yellow-strong); }
.mm-btn--primary:active { background: var(--mm-yellow-dim); }

/* SECONDARY */
.mm-btn--secondary {
  background: var(--mm-surface-elev);
  color: var(--mm-text);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-sh-flat);
}
.mm-btn--secondary:hover  { background: var(--mm-surface-hover); }
.mm-btn--secondary:active { background: var(--mm-surface-active); }

/* GHOST */
.mm-btn--ghost {
  background: transparent;
  color: var(--mm-text-secondary);
}
.mm-btn--ghost:hover { background: var(--mm-surface-hover); color: var(--mm-text); }

/* DANGER */
.mm-btn--danger {
  background: var(--mm-danger);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.45) inset;
}
.mm-btn--danger:hover {
  background: var(--mm-danger-strong);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.6) inset, 0 6px 18px rgba(239,68,68,0.3);
}
.mm-btn--danger:focus-visible { box-shadow: var(--mm-sh-focus-danger); }

/* YELLOW-GHOST (used inside yellow-tinted contexts) */
.mm-btn--yellow-ghost {
  background: transparent;
  color: var(--mm-yellow-text);
  border-color: var(--mm-yellow-border);
}
.mm-btn--yellow-ghost:hover { background: var(--mm-yellow-soft); }

/* States */
.mm-btn[disabled],
.mm-btn--disabled {
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}
.mm-btn--primary[disabled],
.mm-btn--primary.mm-btn--disabled   { background: #3a3a3a; color: var(--mm-text-disabled); box-shadow: none; }
.mm-btn--secondary[disabled],
.mm-btn--secondary.mm-btn--disabled { color: var(--mm-text-disabled); }
.mm-btn--ghost[disabled],
.mm-btn--ghost.mm-btn--disabled     { color: var(--mm-text-disabled); }
.mm-btn--danger[disabled],
.mm-btn--danger.mm-btn--disabled    { background: #3a3a3a; color: var(--mm-text-disabled); box-shadow: none; }

/* Loading spinner (uses ::after) */
.mm-btn--loading { color: transparent !important; position: relative; }
.mm-btn--loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--mm-text-inverse);
  animation: mm-spin 700ms linear infinite;
}
.mm-btn--secondary.mm-btn--loading::after,
.mm-btn--ghost.mm-btn--loading::after { color: var(--mm-text); }

/* ─── INPUT ──────────────────────────────────────────────────────── */
.mm-field {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.mm-field--full { display: flex; width: 100%; }
.mm-field__label {
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-medium);
  color: var(--mm-text-secondary);
  letter-spacing: -0.005em;
}
.mm-field__hint  { font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); }
.mm-field__error { font-size: var(--mm-fs-11); color: var(--mm-danger); }

.mm-input {
  --_h: 38px;
  display: flex;
  align-items: center;
  height: var(--_h);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  transition: border-color var(--mm-dur-fast) var(--mm-ease),
              box-shadow   var(--mm-dur-fast) var(--mm-ease);
}
.mm-input--sm { --_h: 32px; }
.mm-input--md { --_h: 38px; }
.mm-input--lg { --_h: 44px; }

.mm-input__icon {
  display: inline-flex;
  align-items: center;
  padding-left: 12px;
  color: var(--mm-text-tertiary);
}
.mm-input__icon .mm-icon { width: 15px; height: 15px; }

.mm-input__suffix {
  padding-right: 12px;
  color: var(--mm-text-tertiary);
  font-size: var(--mm-fs-13);
  font-family: var(--mm-font-mono);
}

.mm-input__el {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 12px;
  font-size: var(--mm-fs-14);
  color: var(--mm-text);
}
.mm-input__el::placeholder { color: var(--mm-text-tertiary); }
.mm-input__icon + .mm-input__el { padding-left: 8px; }

.mm-input:hover:not(.mm-input--disabled):not(.mm-input--error) { border-color: #4a4a4a; }
.mm-input:focus-within,
.mm-input--focused { border-color: var(--mm-yellow); box-shadow: var(--mm-sh-focus); }
.mm-input--error   { border-color: var(--mm-danger); }
.mm-input--error.mm-input--focused,
.mm-input--error:focus-within { box-shadow: var(--mm-sh-focus-danger); }
.mm-input--disabled { background: var(--mm-bg-alt); opacity: 0.55; }
.mm-input--disabled .mm-input__el { cursor: not-allowed; }
.mm-input--full { width: 100%; }

/* Textarea (multi-line variant of input) */
.mm-textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-size: var(--mm-fs-14);
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  transition: border-color var(--mm-dur-fast), box-shadow var(--mm-dur-fast);
}
.mm-textarea:focus { border-color: var(--mm-yellow); box-shadow: var(--mm-sh-focus); }
.mm-textarea::placeholder { color: var(--mm-text-tertiary); }

/* ─── SELECT (native, styled to match) ───────────────────────────── */
.mm-select {
  --_h: 38px;
  height: var(--_h);
  padding: 0 36px 0 12px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center,
    var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  color: var(--mm-text);
  font-size: var(--mm-fs-14);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: 0;
  transition: border-color var(--mm-dur-fast), box-shadow var(--mm-dur-fast);
}
.mm-select--sm { --_h: 32px; }
.mm-select--md { --_h: 38px; }
.mm-select--lg { --_h: 44px; }
.mm-select--full { width: 100%; }
.mm-select:focus { border-color: var(--mm-yellow); box-shadow: var(--mm-sh-focus); }
.mm-select[disabled] { background-color: var(--mm-bg-alt); cursor: not-allowed; opacity: 0.55; }
.mm-select option { background: var(--mm-surface-elev); color: var(--mm-text); }

/* ─── TREE SELECT (dropdown over hierarchical data: tabs + indent + search) ── */
.mm-tree-select { position: relative; display: inline-block; }
.mm-tree-select--full { display: block; width: 100%; }
.mm-tree-select__trigger {
  --_h: 38px;
  height: var(--_h);
  width: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  color: var(--mm-text);
  font-size: var(--mm-fs-14);
  cursor: pointer;
  outline: 0;
  transition: border-color var(--mm-dur-fast), box-shadow var(--mm-dur-fast);
}
.mm-tree-select__trigger--sm { --_h: 32px; }
.mm-tree-select__trigger--md { --_h: 38px; }
.mm-tree-select__trigger--lg { --_h: 44px; }
.mm-tree-select__trigger.is-open,
.mm-tree-select__trigger:focus { border-color: var(--mm-yellow); box-shadow: var(--mm-sh-focus); }
.mm-tree-select__trigger[disabled] { background-color: var(--mm-bg-alt); cursor: not-allowed; opacity: 0.55; }
.mm-tree-select__value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tree-select__value--placeholder { color: var(--mm-text-tertiary); }
.mm-tree-select__caret { width: 14px; height: 14px; color: var(--mm-text-tertiary); flex-shrink: 0; }
.mm-tree-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 2000;
  width: 100%;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--mm-surface-elev);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  box-shadow: var(--mm-sh-md);
}
.mm-tree-select__search { flex-shrink: 0; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--mm-border); }
.mm-tree-select__tabs { flex-shrink: 0; max-height: 64px; overflow-y: auto; display: flex; gap: 2px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--mm-border); }
.mm-tree-select__tab {
  padding: 4px 8px;
  font-size: var(--mm-fs-12);
  color: var(--mm-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--mm-r-2);
  cursor: pointer;
}
.mm-tree-select__tab:hover { background: var(--mm-surface-hover); }
.mm-tree-select__tab.is-active { background: var(--mm-surface-active); color: var(--mm-text); font-weight: var(--mm-fw-semibold); }
.mm-tree-select__rows { flex: 1 1 auto; min-height: 80px; overflow-y: auto; }
.mm-tree-select__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--mm-text);
  font-size: var(--mm-fs-13);
  border-radius: var(--mm-r-2);
  cursor: pointer;
}
.mm-tree-select__row:hover { background: var(--mm-surface-hover); }
.mm-tree-select__row.is-selected { background: var(--mm-yellow-soft); color: var(--mm-yellow-text); font-weight: var(--mm-fw-semibold); }
.mm-tree-select__row--none { flex-shrink: 0; color: var(--mm-text-tertiary); margin-bottom: 4px; border-bottom: 1px solid var(--mm-border); border-radius: 0; }
.mm-tree-select__row--muted { color: var(--mm-text-tertiary); }
.mm-tree-select__row--header { cursor: default; font-weight: var(--mm-fw-semibold); }
.mm-tree-select__row--header:hover { background: transparent; }
.mm-tree-select__row--child::before {
  content: "";
  position: absolute;
  left: calc(var(--mm-ts-indent) - 6px + 10px);
  top: 0;
  height: 50%;
  width: 10px;
  border-left: 1px solid var(--mm-border-strong);
  border-bottom: 1px solid var(--mm-border-strong);
}
.mm-tree-select__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tree-select__crumb { font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); flex-shrink: 0; }
.mm-tree-select__empty { padding: 12px; text-align: center; color: var(--mm-text-tertiary); font-size: var(--mm-fs-12); }

/* ─── CHECKBOX ───────────────────────────────────────────────────── */
.mm-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  cursor: pointer;
}
.mm-check__box {
  position: relative;
  width: 16px;
  height: 16px;
  background: var(--mm-surface);
  border: 1.5px solid var(--mm-border-strong);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--mm-dur-fast), border-color var(--mm-dur-fast);
}
.mm-check__box .mm-icon { display: none; width: 11px; height: 11px; stroke-width: 3; color: var(--mm-text-inverse); }
.mm-check__input { position: absolute; opacity: 0; pointer-events: none; }
.mm-check--checked .mm-check__box,
.mm-check__input:checked + .mm-check__box {
  background: var(--mm-yellow);
  border-color: var(--mm-yellow);
}
.mm-check--checked .mm-check__box .mm-icon--check,
.mm-check__input:checked + .mm-check__box .mm-icon--check { display: block; }
.mm-check--indeterminate .mm-check__box { background: var(--mm-yellow); border-color: var(--mm-yellow); }
.mm-check--indeterminate .mm-check__box .mm-icon--minus { display: block; }
.mm-check--disabled { opacity: 0.5; cursor: not-allowed; }
.mm-check__label { font-size: var(--mm-fs-13); color: var(--mm-text); }

/* ─── RADIO ──────────────────────────────────────────────────────── */
.mm-radio { display: inline-flex; align-items: center; gap: 8px; user-select: none; cursor: pointer; }
.mm-radio__box {
  position: relative;
  width: 16px; height: 16px;
  background: var(--mm-surface);
  border: 1.5px solid var(--mm-border-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--mm-dur-fast);
}
.mm-radio__box::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--mm-yellow);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--mm-dur-fast);
}
.mm-radio__input { position: absolute; opacity: 0; pointer-events: none; }
.mm-radio--checked .mm-radio__box,
.mm-radio__input:checked + .mm-radio__box { border-color: var(--mm-yellow); }
.mm-radio--checked .mm-radio__box::after,
.mm-radio__input:checked + .mm-radio__box::after { opacity: 1; }
.mm-radio--disabled { opacity: 0.5; cursor: not-allowed; }
.mm-radio__label { font-size: var(--mm-fs-13); color: var(--mm-text); }

/* ─── SWITCH ─────────────────────────────────────────────────────── */
.mm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.mm-switch__track {
  position: relative;
  width: 32px; height: 18px;
  background: var(--mm-surface-elev);
  border: 1px solid var(--mm-border-strong);
  border-radius: 999px;
  transition: background var(--mm-dur-normal) var(--mm-ease), border-color var(--mm-dur-normal) var(--mm-ease);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.mm-switch__thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  background: #bababa;
  border-radius: 50%;
  transition: left var(--mm-dur-normal) var(--mm-ease), background var(--mm-dur-normal) var(--mm-ease);
}
.mm-switch__input { position: absolute; opacity: 0; pointer-events: none; }
.mm-switch--on .mm-switch__track,
.mm-switch__input:checked + .mm-switch__track {
  background: var(--mm-yellow);
  border-color: var(--mm-yellow);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.mm-switch--on .mm-switch__thumb,
.mm-switch__input:checked + .mm-switch__track .mm-switch__thumb {
  left: 15px;
  background: var(--mm-text-inverse);
}
.mm-switch--disabled { opacity: 0.5; cursor: not-allowed; }
.mm-switch__label { font-size: var(--mm-fs-13); color: var(--mm-text); }

/* ─── BADGE ──────────────────────────────────────────────────────── */
.mm-badge {
  --_fg: var(--mm-text-secondary);
  --_bg: var(--mm-neutral-bg);
  --_bd: var(--mm-neutral-border);
  --_dot: #a8a8a8;
  --_h: 18px;
  --_px: 6px;
  --_fs: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--_h);
  padding: 0 var(--_px);
  font-family: var(--mm-font);
  font-size: var(--_fs);
  font-weight: var(--mm-fw-semibold);
  letter-spacing: 0.02em;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
/* Sizes */
.mm-badge--sm { --_h: 18px; --_px: 6px; --_fs: 10px; }
.mm-badge--md { --_h: 22px; --_px: 8px; --_fs: 11px; }
.mm-badge--lg { --_h: 24px; --_px: 10px; --_fs: 12px; }
/* Tones — soft (default) */
.mm-badge--yellow  { --_fg: var(--mm-yellow-text);   --_bg: var(--mm-yellow-soft);   --_bd: var(--mm-yellow-border);   --_dot: var(--mm-yellow); }
.mm-badge--success { --_fg: var(--mm-success-fg);    --_bg: var(--mm-success-bg);    --_bd: var(--mm-success-border);  --_dot: var(--mm-success); }
.mm-badge--warning { --_fg: var(--mm-warning-fg);    --_bg: var(--mm-warning-bg);    --_bd: var(--mm-warning-border);  --_dot: var(--mm-warning); }
.mm-badge--danger  { --_fg: var(--mm-danger-fg);     --_bg: var(--mm-danger-bg);     --_bd: var(--mm-danger-border);   --_dot: var(--mm-danger); }
.mm-badge--info    { --_fg: var(--mm-info-fg);       --_bg: var(--mm-info-bg);       --_bd: var(--mm-info-border);     --_dot: var(--mm-info); }
/* Variants */
.mm-badge--outline { background: transparent; }
.mm-badge--solid           { background: #a8a8a8; color: #fff; border-color: transparent; }
.mm-badge--solid.mm-badge--yellow  { background: var(--mm-yellow);  color: var(--mm-text-inverse); }
.mm-badge--solid.mm-badge--success { background: var(--mm-success); color: #fff; }
.mm-badge--solid.mm-badge--warning { background: var(--mm-warning); color: #fff; }
.mm-badge--solid.mm-badge--danger  { background: var(--mm-danger);  color: #fff; }
.mm-badge--solid.mm-badge--info    { background: var(--mm-info);    color: #fff; }

.mm-badge__dot {
  width: 6px; height: 6px;
  background: var(--_dot);
  border-radius: 50%;
  flex-shrink: 0;
}
.mm-badge .mm-icon { width: 1em; height: 1em; }

/* Status dot — standalone */
.mm-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: #a8a8a8; }
.mm-status-dot--yellow  { background: var(--mm-yellow); }
.mm-status-dot--success { background: var(--mm-success); }
.mm-status-dot--warning { background: var(--mm-warning); }
.mm-status-dot--danger  { background: var(--mm-danger); }
.mm-status-dot--info    { background: var(--mm-info); }
.mm-status-dot--ring    { box-shadow: 0 0 0 3px currentColor; opacity: 1; }

/* ─── TABS ───────────────────────────────────────────────────────── */
.mm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mm-border); }
.mm-tab {
  padding: 10px 12px;
  font-size: var(--mm-fs-13);
  font-weight: var(--mm-fw-medium);
  color: var(--mm-text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--mm-dur-fast), border-color var(--mm-dur-fast);
}
.mm-tab:hover { color: var(--mm-text); }
.mm-tab--active {
  color: var(--mm-yellow-text);
  border-bottom-color: var(--mm-yellow);
  font-weight: var(--mm-fw-semibold);
}
.mm-tab__count {
  font-size: var(--mm-fs-10);
  padding: 1px 6px;
  background: var(--mm-neutral-bg);
  color: var(--mm-text-secondary);
  border-radius: 999px;
}

/* Segmented */
.mm-tabs--segmented {
  display: inline-flex;
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  border-radius: var(--mm-r-3);
  padding: 3px;
  gap: 2px;
}
.mm-tabs--segmented .mm-tab {
  padding: 6px 12px;
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-semibold);
  border-bottom: 0;
  margin: 0;
  border-radius: 4px;
}
.mm-tabs--segmented .mm-tab--active {
  background: var(--mm-yellow);
  color: var(--mm-text-inverse);
  border-bottom-color: transparent;
}
.mm-tabs--segmented .mm-tab--active .mm-tab__count {
  background: rgba(0,0,0,0.18);
  color: var(--mm-text-inverse);
}

/* ─── CARD ───────────────────────────────────────────────────────── */
.mm-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-4);
  padding: 20px;
  box-shadow: var(--mm-sh-flat);
}
.mm-card--elevated { background: var(--mm-surface-elev); box-shadow: var(--mm-sh-md); }
.mm-card--accent   { border-color: var(--mm-yellow-border); }
.mm-card--flush    { padding: 0; }

.mm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mm-border);
}
.mm-card__title { font-size: var(--mm-fs-13); font-weight: var(--mm-fw-semibold); color: var(--mm-text); margin: 0; }
.mm-card__subtitle { font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); margin-top: 2px; }
.mm-card__body { padding: 20px; }
.mm-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--mm-border);
  background: var(--mm-bg-alt);
}

/* ─── METRIC TILE ────────────────────────────────────────────────── */
.mm-metric {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-4);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.mm-metric--accent {
  background: linear-gradient(140deg, var(--mm-yellow-soft), transparent 60%), var(--mm-surface);
  border-color: var(--mm-yellow-border);
}
.mm-metric__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.mm-metric__label {
  font-size: var(--mm-fs-11);
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mm-metric__icon {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--mm-neutral-bg);
  color: var(--mm-text-secondary);
  border-radius: var(--mm-r-2);
}
.mm-metric__icon .mm-icon { width: 14px; height: 14px; }
.mm-metric--accent .mm-metric__icon { background: var(--mm-yellow); color: var(--mm-text-inverse); }
.mm-metric__value {
  font-size: var(--mm-fs-32);
  font-weight: var(--mm-fw-semibold);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--mm-text);
}
.mm-metric__foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: var(--mm-fs-12); }
.mm-metric__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--mm-fw-semibold); }
.mm-metric__delta--positive { color: var(--mm-success-fg); }
.mm-metric__delta--negative { color: var(--mm-danger-fg); }
.mm-metric__delta--neutral  { color: var(--mm-text-secondary); }
.mm-metric__delta .mm-icon  { width: 12px; height: 12px; }
.mm-metric__sub { color: var(--mm-text-tertiary); }

/* ─── ALERT ──────────────────────────────────────────────────────── */
.mm-alert {
  --_c: var(--mm-info);
  --_bg: var(--mm-info-bg);
  --_bd: var(--mm-info-border);
  display: flex;
  gap: 10px;
  padding: 14px;
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--mm-r-3);
  color: var(--mm-text);
}
.mm-alert--info    { --_c: var(--mm-info);    --_bg: var(--mm-info-bg);    --_bd: var(--mm-info-border); }
.mm-alert--success { --_c: var(--mm-success); --_bg: var(--mm-success-bg); --_bd: var(--mm-success-border); }
.mm-alert--warning { --_c: var(--mm-warning); --_bg: var(--mm-warning-bg); --_bd: var(--mm-warning-border); }
.mm-alert--danger  { --_c: var(--mm-danger);  --_bg: var(--mm-danger-bg);  --_bd: var(--mm-danger-border); }
.mm-alert--yellow  { --_c: var(--mm-yellow);  --_bg: var(--mm-yellow-soft); --_bd: var(--mm-yellow-border); }
.mm-alert__icon  { color: var(--_c); padding-top: 1px; flex-shrink: 0; }
.mm-alert__icon .mm-icon { width: 16px; height: 16px; }
.mm-alert__body  { flex: 1; min-width: 0; }
.mm-alert__title { font-weight: var(--mm-fw-semibold); font-size: var(--mm-fs-13); color: var(--mm-text); }
.mm-alert__text  { font-size: var(--mm-fs-12); color: var(--mm-text-secondary); line-height: 1.5; margin-top: 3px; }
.mm-alert__close { color: var(--mm-text-tertiary); flex-shrink: 0; display: flex; padding: 0; }
.mm-alert__close .mm-icon { width: 14px; height: 14px; }

/* ─── TOAST ──────────────────────────────────────────────────────── */
.mm-toast {
  --_c: var(--mm-success);
  display: flex;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  background: var(--mm-surface-elev);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-3);
  box-shadow: var(--mm-sh-lg);
  min-width: 280px;
  max-width: 360px;
  align-items: flex-start;
  position: relative;
}
.mm-toast--success { --_c: var(--mm-success); }
.mm-toast--danger  { --_c: var(--mm-danger); }
.mm-toast--info    { --_c: var(--mm-info); }
.mm-toast--yellow  { --_c: var(--mm-yellow); }
.mm-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--_c);
  border-radius: 0 2px 2px 0;
}
.mm-toast__icon { color: var(--_c); padding-top: 1px; flex-shrink: 0; }
.mm-toast__icon .mm-icon { width: 16px; height: 16px; }
.mm-toast__title { font-size: var(--mm-fs-13); font-weight: var(--mm-fw-semibold); color: var(--mm-text); }
.mm-toast__body  { font-size: var(--mm-fs-12); color: var(--mm-text-secondary); margin-top: 2px; line-height: 1.45; }
.mm-toast__close { color: var(--mm-text-tertiary); flex-shrink: 0; padding: 2px; display: flex; }

/* ─── EMPTY STATE ────────────────────────────────────────────────── */
.mm-empty {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mm-empty__icon {
  width: 48px; height: 48px;
  background: var(--mm-yellow-soft);
  border: 1px solid var(--mm-yellow-border);
  color: var(--mm-yellow-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mm-r-signature);
}
.mm-empty__icon .mm-icon { width: 20px; height: 20px; }
.mm-empty__title { font-size: var(--mm-fs-16); font-weight: var(--mm-fw-semibold); color: var(--mm-text); }
.mm-empty__body  { font-size: var(--mm-fs-12); color: var(--mm-text-secondary); max-width: 280px; margin-top: 4px; }

/* ─── TOOLTIP (CSS hover) ────────────────────────────────────────── */
.mm-tooltip {
  position: relative;
  display: inline-flex;
}
.mm-tooltip__content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  background: #0a0a0a;
  color: #fafafa;
  font-size: var(--mm-fs-11);
  font-weight: var(--mm-fw-medium);
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid var(--mm-border-strong);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--mm-sh-md);
  transition: opacity var(--mm-dur-fast);
}
.mm-tooltip:hover .mm-tooltip__content { opacity: 1; }

/* ─── PROGRESS ───────────────────────────────────────────────────── */
.mm-progress {
  --_c: var(--mm-yellow);
  --_h: 6px;
}
.mm-progress__header {
  display: flex;
  justify-content: space-between;
  font-size: var(--mm-fs-11);
  color: var(--mm-text-secondary);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.mm-progress__track {
  width: 100%;
  height: var(--_h);
  background: var(--mm-bg-alt);
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  overflow: hidden;
}
.mm-progress__bar {
  height: 100%;
  background: var(--_c);
  border-radius: 999px;
  transition: width var(--mm-dur-slow) var(--mm-ease);
}
.mm-progress--yellow  { --_c: var(--mm-yellow); }
.mm-progress--success { --_c: var(--mm-success); }
.mm-progress--warning { --_c: var(--mm-warning); }
.mm-progress--danger  { --_c: var(--mm-danger); }
.mm-progress--info    { --_c: var(--mm-info); }

/* ─── KBD ────────────────────────────────────────────────────────── */
.mm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--mm-fs-10);
  font-weight: var(--mm-fw-semibold);
  font-family: var(--mm-font-mono);
  background: var(--mm-surface);
  color: var(--mm-text-secondary);
  border: 1px solid var(--mm-border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  line-height: 1;
}

/* ─── AVATAR ─────────────────────────────────────────────────────── */
.mm-avatar {
  --_size: 28px;
  width: var(--_size);
  height: var(--_size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--_size) * 0.4);
  font-weight: var(--mm-fw-semibold);
  letter-spacing: 0.02em;
  background: hsl(42 35% 28%);
  color: hsl(42 80% 78%);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  overflow: hidden;
}
.mm-avatar--xs { --_size: 20px; }
.mm-avatar--sm { --_size: 24px; }
.mm-avatar--md { --_size: 28px; }
.mm-avatar--lg { --_size: 36px; }
.mm-avatar--xl { --_size: 48px; }

/* Pre-mixed tone palettes (or use inline --_size override) */
.mm-avatar--yellow { background: hsl(42 35% 28%);  color: hsl(42 80% 78%); }
.mm-avatar--blue   { background: hsl(200 35% 28%); color: hsl(200 80% 78%); }
.mm-avatar--purple { background: hsl(280 35% 28%); color: hsl(280 80% 78%); }
.mm-avatar--red    { background: hsl(0 35% 28%);   color: hsl(0 80% 78%); }
.mm-avatar--green  { background: hsl(140 35% 28%); color: hsl(140 80% 78%); }
.mm-avatar--orange { background: hsl(30 35% 28%);  color: hsl(30 80% 78%); }

/* ─── NAV ITEM (sidebar) ─────────────────────────────────────────── */
.mm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border-radius: var(--mm-r-3);
  color: var(--mm-text-secondary);
  font-size: var(--mm-fs-13);
  font-weight: var(--mm-fw-medium);
  text-align: left;
  position: relative;
  transition: background var(--mm-dur-fast), color var(--mm-dur-fast);
  cursor: pointer;
}
.mm-nav-item:hover { background: var(--mm-surface-hover); color: var(--mm-text); }
.mm-nav-item--active {
  background: var(--mm-yellow-soft);
  color: var(--mm-yellow-text);
  font-weight: var(--mm-fw-semibold);
}
.mm-nav-item--active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--mm-yellow);
  border-radius: 0 2px 2px 0;
}
.mm-nav-item .mm-icon { width: 15px; height: 15px; flex-shrink: 0; }
.mm-nav-item__label { flex: 1; }
.mm-nav-item__badge {
  font-size: var(--mm-fs-10);
  padding: 1px 6px;
  background: var(--mm-yellow);
  color: var(--mm-text-inverse);
  border-radius: 999px;
  font-weight: var(--mm-fw-semibold);
}
.mm-nav-section {
  font-size: var(--mm-fs-10);
  font-weight: var(--mm-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-tertiary);
  padding: 4px 10px;
}

/* ─── CHART ──────────────────────────────────────────────────────── */
.mm-chart {
  position: relative;
  width: 100%;
}

/* ─── TABLE ──────────────────────────────────────────────────────── */
.mm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mm-fs-13);
}
.mm-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--mm-fs-10);
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--mm-bg-alt);
  border-bottom: 1px solid var(--mm-border);
  white-space: nowrap;
}
.mm-table thead th.mm-table__num { text-align: right; }
.mm-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--mm-divider);
  color: var(--mm-text);
  vertical-align: middle;
}
.mm-table tbody tr:last-child td { border-bottom: 0; }
.mm-table tbody tr:hover td { background: var(--mm-surface-hover); }
.mm-table tbody tr.mm-table__row--selected td { background: var(--mm-yellow-softer); }
.mm-table__num { text-align: right; font-family: var(--mm-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--mm-fw-semibold); }
.mm-table__group-header td {
  padding: 10px 16px !important;
  background: var(--mm-bg) !important;
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
  font-weight: var(--mm-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mm-table__group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ─── PAGINATION ─────────────────────────────────────────────────── */
.mm-pagination { display: inline-flex; gap: 4px; align-items: center; }
.mm-pagination__page {
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text-secondary);
  border-radius: var(--mm-r-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mm-pagination__page:hover { background: var(--mm-surface-hover); color: var(--mm-text); }
.mm-pagination__page--active { background: var(--mm-yellow-soft); color: var(--mm-yellow-text); }
.mm-pagination__ellipsis { color: var(--mm-text-tertiary); padding: 0 4px; }

/* ─── MODAL ──────────────────────────────────────────────────────── */
.mm-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,0.62);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.mm-modal {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--mm-surface-elev);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-4);
  box-shadow: var(--mm-sh-modal);
  overflow: hidden;
  animation: mm-fadein 200ms var(--mm-ease);
}
.mm-modal--md { width: 520px; }
.mm-modal--lg { width: 760px; }
.mm-modal--xl { width: 920px; }
.mm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, var(--mm-yellow), var(--mm-yellow-dim));
  color: var(--mm-text-inverse);
  border-radius: var(--mm-r-signature);
}
.mm-modal__title { font-size: var(--mm-fs-14); font-weight: var(--mm-fw-bold); }
.mm-modal__subtitle { font-size: var(--mm-fs-10); font-weight: var(--mm-fw-medium); opacity: 0.65; }
.mm-modal__head-icon {
  width: 26px; height: 26px;
  background: var(--mm-text-inverse);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-yellow);
  flex-shrink: 0;
}
.mm-modal__close {
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
  color: var(--mm-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mm-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; overflow-y: auto; overflow-x: auto; }
.mm-modal__body.settings-modal__body { min-width: 0; min-height: 0; overflow: hidden; }
.settings-modal__body .settings-dialog__layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(720px, calc(100vh - 228px));
  min-width: 0;
  overflow: hidden;
}
.settings-modal__body .settings-dialog__panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-top: var(--mm-sp-5);
  overflow: hidden;
}
.settings-modal__body .settings-tab {
  display: flex;
  flex-direction: column;
  gap: var(--mm-sp-6);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.settings-modal__body .settings-tab__list {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding-right: var(--mm-sp-2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.settings-modal__body .settings-tab__list .mm-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.settings-modal__body .settings-tab__list .mm-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.settings-modal__body .settings-tab__form {
  flex: 0 0 auto;
  min-width: 0;
}
.mm-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--mm-border);
  background: var(--mm-surface);
}

/* ─── DIVIDER ────────────────────────────────────────────────────── */
.mm-divider { height: 1px; background: var(--mm-divider); width: 100%; }
.mm-divider--v { width: 1px; height: 100%; background: var(--mm-divider); }
.mm-divider--strong { background: var(--mm-border); }
.mm-divider--text {
  display: flex; align-items: center; gap: 12px;
  color: var(--mm-text-tertiary); font-size: var(--mm-fs-11);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mm-divider--text::before,
.mm-divider--text::after {
  content: ''; flex: 1; height: 1px; background: var(--mm-divider);
}

/* ─── LOGO ───────────────────────────────────────────────────────── */
.mm-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mm-logo__mark { display: block; flex-shrink: 0; }
.mm-logo__wordmark {
  font-family: var(--mm-font);
  font-weight: var(--mm-fw-bold);
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--mm-text);
  line-height: 1;
}
.mm-logo__wordmark--accent { color: var(--mm-yellow); }
.mm-logo--lg .mm-logo__wordmark { font-size: 22px; }
.mm-logo--xl .mm-logo__wordmark { font-size: 28px; }

/* ─── ICON SIZING ────────────────────────────────────────────────── */
.mm-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -2px; }
.mm-icon--12 { width: 12px; height: 12px; }
.mm-icon--14 { width: 14px; height: 14px; }
.mm-icon--16 { width: 16px; height: 16px; }
.mm-icon--20 { width: 20px; height: 20px; }
.mm-icon--24 { width: 24px; height: 24px; }

/* =================================================================
   APP SHELL (sidebar + topbar + content) — for production layouts
   ================================================================= */
.mm-shell {
  display: flex;
  width: 100%;
  height: 100vh;
  background: var(--mm-bg);
}
.mm-shell__sidebar {
  width: var(--mm-sidebar-w);
  flex-shrink: 0;
  background: var(--mm-bg-alt);
  border-right: 1px solid var(--mm-border);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow-y: auto;
}
.mm-shell__main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mm-shell__topbar {
  height: var(--mm-topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--mm-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--mm-bg);
}
.mm-shell__topbar-title { font-size: var(--mm-fs-16); font-weight: var(--mm-fw-semibold); letter-spacing: -0.015em; color: var(--mm-text); }
.mm-shell__topbar-sub   { font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); margin-top: 1px; }
.mm-shell__content { flex: 1; min-height: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }

/* Search-in-sidebar */
.mm-shell__search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-3);
  font-size: var(--mm-fs-12);
  color: var(--mm-text-tertiary);
  cursor: text;
}
.mm-shell__search .mm-icon { width: 14px; height: 14px; }

/* =================================================================
   LOGIN LAYOUT
   ================================================================= */
.mm-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--mm-bg);
}
.mm-login__brand {
  position: relative;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(at 30% 0%, rgba(253,209,20,0.18) 0%, transparent 55%),
    radial-gradient(at 90% 100%, rgba(253,209,20,0.06) 0%, transparent 55%),
    var(--mm-bg-alt);
  border-right: 1px solid var(--mm-border);
  overflow: hidden;
}
.mm-login__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.mm-login__form-inner { width: 100%; max-width: 380px; }

/* Stacked signature-shape decoration */
.mm-login__deco {
  position: absolute;
  top: -120px; right: -80px;
  transform: rotate(8deg);
}
.mm-login__deco-card {
  width: 220px; height: 280px;
  background: var(--mm-yellow);
  border-radius: 2px 2px 24px 24px;
  box-shadow: 0 30px 80px rgba(253,209,20,0.25);
}
.mm-login__deco-card--2 {
  background: var(--mm-yellow-dim);
  position: absolute;
  top: 14px; left: 14px;
  z-index: -1;
  opacity: 0.6;
}
.mm-login__deco-card--3 {
  background: #222;
  position: absolute;
  top: 28px; left: 28px;
  z-index: -2;
  opacity: 0.4;
}

.mm-login__lede { position: relative; z-index: 2; max-width: 440px; }
.mm-login__eyebrow {
  font-size: var(--mm-fs-11);
  font-weight: var(--mm-fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-yellow-text);
  margin-bottom: 18px;
}
.mm-login__headline {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mm-text);
  line-height: 1.05;
  margin: 0 0 18px;
}
.mm-login__headline-accent { color: var(--mm-yellow); }
.mm-login__copy {
  font-size: var(--mm-fs-14);
  color: var(--mm-text-secondary);
  line-height: 1.5;
  max-width: 380px;
  margin: 0;
}
.mm-login__stats { display: flex; gap: 28px; margin-top: 36px; }
.mm-login__stat-v {
  font-size: 26px;
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mm-login__stat-l {
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mm-login__foot {
  display: flex;
  justify-content: space-between;
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes mm-spin   { to { transform: rotate(360deg); } }
@keyframes mm-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mm-pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* =================================================================
   DESIGN-SYSTEM-PAGE-ONLY CHROME (doc layout, not for production)
   ================================================================= */
.ds-page { max-width: 1280px; margin: 0 auto; padding: 56px 48px; }
.ds-hero { margin-bottom: 56px; padding-bottom: 32px; border-bottom: 1px solid var(--mm-divider); }
.ds-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--mm-fs-11); font-weight: var(--mm-fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mm-yellow-text);
  margin-bottom: 14px;
}
.ds-hero__title { font-size: 56px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 12px; }
.ds-hero__title-accent { color: var(--mm-yellow); }
.ds-hero__copy { font-size: 16px; color: var(--mm-text-secondary); max-width: 640px; line-height: 1.55; margin: 0; }
.ds-hero__meta {
  display: flex; gap: 32px; margin-top: 28px;
  font-size: var(--mm-fs-12); color: var(--mm-text-tertiary);
}
.ds-hero__meta b { color: var(--mm-text); font-weight: 600; }

.ds-section { padding: 48px 0; border-bottom: 1px solid var(--mm-divider); }
.ds-section:last-child { border-bottom: 0; }
.ds-section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 24px; }
.ds-section__num {
  font-family: var(--mm-font-mono);
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
  letter-spacing: 0.06em;
}
.ds-section__title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 4px 0 0; }
.ds-section__desc { font-size: var(--mm-fs-14); color: var(--mm-text-secondary); max-width: 440px; text-align: right; }

.ds-sub {
  font-size: var(--mm-fs-11);
  font-weight: var(--mm-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-text-tertiary);
  margin: 32px 0 14px;
}
.ds-sub:first-child { margin-top: 0; }

.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ds-row--lg { gap: 16px; }
.ds-stack { display: flex; flex-direction: column; gap: 12px; }
.ds-stack--lg { gap: 16px; }
.ds-grid { display: grid; gap: 16px; }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Demo "tile" wrapping a component for clarity */
.ds-tile {
  background: var(--mm-bg-alt);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-4);
  padding: 24px;
}
.ds-tile--flush { padding: 0; overflow: hidden; }
.ds-tile__label {
  font-family: var(--mm-font-mono);
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
  margin-bottom: 14px;
}
.ds-tile__label code { color: var(--mm-yellow-text); }

/* Color swatch */
.ds-swatch {
  background: var(--mm-bg-alt);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-3);
  overflow: hidden;
}
.ds-swatch__chip { height: 64px; }
.ds-swatch__meta { padding: 10px 12px; }
.ds-swatch__name { font-size: var(--mm-fs-12); font-weight: var(--mm-fw-semibold); color: var(--mm-text); }
.ds-swatch__hex  { font-family: var(--mm-font-mono); font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); margin-top: 2px; }
.ds-swatch__token { font-family: var(--mm-font-mono); font-size: var(--mm-fs-10); color: var(--mm-yellow-text); margin-top: 4px; }

/* Type specimen */
.ds-type-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mm-divider);
}
.ds-type-row:last-child { border-bottom: 0; }
.ds-type-row__meta { font-family: var(--mm-font-mono); font-size: var(--mm-fs-11); color: var(--mm-text-tertiary); }
.ds-type-row__token { text-align: right; font-family: var(--mm-font-mono); font-size: var(--mm-fs-10); color: var(--mm-yellow-text); }

/* Spacing scale row */
.ds-space-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.ds-space-row__token { font-family: var(--mm-font-mono); font-size: var(--mm-fs-12); color: var(--mm-yellow-text); }
.ds-space-row__bar { height: 14px; background: var(--mm-yellow); border-radius: 2px; }
.ds-space-row__val { font-family: var(--mm-font-mono); font-size: var(--mm-fs-12); color: var(--mm-text-tertiary); }

/* Radii / shadow demos */
.ds-radii { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.ds-radii__sample {
  height: 70px;
  background: var(--mm-surface-elev);
  border: 1px solid var(--mm-border-strong);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px;
  font-family: var(--mm-font-mono);
  font-size: var(--mm-fs-10);
  color: var(--mm-text-tertiary);
}

.ds-shadows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px 0; }
.ds-shadows__sample {
  height: 86px;
  background: var(--mm-surface-elev);
  border-radius: var(--mm-r-4);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px;
  font-family: var(--mm-font-mono);
  font-size: var(--mm-fs-10);
  color: var(--mm-text-tertiary);
}

/* Code chip */
.ds-code {
  font-family: var(--mm-font-mono);
  font-size: var(--mm-fs-11);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  color: var(--mm-yellow-text);
}

/* Empty-layout background (login / logout / showcases). */
.mm-app-bg {
  min-height: 100vh;
  background: var(--mm-bg);
  color: var(--mm-text);
}

/* Collapsed sidebar — toggled by MainLayout via <MmShell Class="mm-shell--collapsed">. */
.mm-shell--collapsed .mm-shell__sidebar { width: 64px; padding-inline: 8px; }
.mm-shell--collapsed .mm-shell__sidebar .mm-nav-item__label,
.mm-shell--collapsed .mm-shell__sidebar .mm-logo__wordmark,
.mm-shell--collapsed .mm-shell__sidebar .mm-nav-section,
.mm-shell--collapsed .mm-shell__sidebar .mm-shell__search,
.mm-shell--collapsed .mm-shell__sidebar .mm-nav-item__badge,
.mm-shell--collapsed .mm-shell__sidebar .mm-divider { display: none; }
.mm-shell--collapsed .mm-shell__sidebar .mm-nav-item { justify-content: center; padding-inline: 0; }
.mm-shell--collapsed .mm-shell__sidebar .mm-account-card { justify-content: center; }
.mm-shell--collapsed .mm-shell__sidebar .mm-account-card > *:not(.mm-avatar) { display: none; }
.mm-shell--collapsed .mm-shell__sidebar .mm-sidebar-header { justify-content: center; }
.mm-shell--collapsed .mm-shell__sidebar .mm-sidebar-header .mm-logo__wordmark { display: none; }

/* Definition list used in TransactionDetail modal. */
.mm-dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 12px; }
.mm-dl dt { color: var(--mm-text-tertiary); font-size: var(--mm-fs-12); }
.mm-dl dd { margin: 0; color: var(--mm-text); }

/* Sidebar account card. */
.mm-account-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-3);
}
.mm-account-card__name { font-size: 12px; font-weight: 600; color: var(--mm-text); }
.mm-account-card__sub { font-size: 10px; color: var(--mm-text-tertiary); }
.mm-account-card__menu {
  position: absolute; bottom: 70px; left: 14px; right: 14px;
  z-index: 10;
}

/* ─── STEPPER ────────────────────────────────────────────────────── */
.mm-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.mm-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  position: relative;
  padding: 0 8px;
  color: var(--mm-text-tertiary);
  text-align: center;
  min-width: 0;
}
.mm-stepper__step--clickable {
  cursor: pointer;
}
.mm-stepper__step--clickable:hover .mm-stepper__node {
  border-color: var(--mm-border-strong);
}
.mm-stepper__node {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-surface);
  border: 1.5px solid var(--mm-border-strong);
  color: var(--mm-text-tertiary);
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-semibold);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
  transition:
    background var(--mm-dur-fast),
    border-color var(--mm-dur-fast),
    color var(--mm-dur-fast),
    box-shadow var(--mm-dur-fast);
}
.mm-stepper__node-num {
  line-height: 1;
}
.mm-stepper__node-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.mm-stepper__label {
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-medium);
  color: var(--mm-text-secondary);
  letter-spacing: 0.01em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-stepper__hint {
  font-size: var(--mm-fs-10);
  color: var(--mm-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-stepper__rail {
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--mm-border);
  z-index: 0;
}

/* Active */
.mm-stepper__step--active .mm-stepper__node {
  background: var(--mm-yellow);
  border-color: var(--mm-yellow);
  color: var(--mm-text-inverse);
  box-shadow: var(--mm-sh-yellow);
}
.mm-stepper__step--active .mm-stepper__label {
  color: var(--mm-text);
  font-weight: var(--mm-fw-semibold);
}
.mm-stepper__step--active .mm-stepper__hint {
  color: var(--mm-yellow-text);
}

/* Complete */
.mm-stepper__step--complete .mm-stepper__node {
  background: var(--mm-success);
  border-color: var(--mm-success);
  color: var(--mm-text-inverse);
}
.mm-stepper__step--complete .mm-stepper__label {
  color: var(--mm-text-secondary);
}
.mm-stepper__step--complete .mm-stepper__rail,
.mm-stepper__step--active .mm-stepper__rail {
  background: var(--mm-success);
}

/* Error */
.mm-stepper__step--error .mm-stepper__node {
  background: var(--mm-danger);
  border-color: var(--mm-danger);
  color: #fff;
  box-shadow: 0 0 0 4px var(--mm-danger-bg);
}
.mm-stepper__step--error .mm-stepper__label {
  color: var(--mm-danger-fg);
  font-weight: var(--mm-fw-semibold);
}

/* Disabled */
.mm-stepper__step--disabled {
  opacity: 0.4;
}
.mm-stepper__step--disabled .mm-stepper__step--clickable {
  cursor: not-allowed;
}

/* Compact variant — no hints, smaller nodes */
.mm-stepper--compact .mm-stepper__node {
  width: 24px;
  height: 24px;
  font-size: var(--mm-fs-11);
}
.mm-stepper--compact .mm-stepper__hint {
  display: none;
}
.mm-stepper--compact .mm-stepper__rail {
  top: 11px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
}

/* ─── DROPZONE ───────────────────────────────────────────────────── */
.mm-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  width: 100%;
  min-height: 180px;
  padding: 32px 24px;
  background: var(--mm-bg-alt);
  border: 2px dashed var(--mm-border-strong);
  border-radius: var(--mm-r-4);
  color: var(--mm-text-secondary);
  text-align: center;
  cursor: pointer;
  transition:
    background var(--mm-dur-fast),
    border-color var(--mm-dur-fast),
    color var(--mm-dur-fast),
    box-shadow var(--mm-dur-fast);
}
.mm-dropzone:hover {
  background: var(--mm-yellow-softer);
  border-color: var(--mm-yellow-border);
  color: var(--mm-text);
}
.mm-dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.mm-dropzone__icon {
  width: 40px;
  height: 40px;
  color: var(--mm-text-tertiary);
  transition: color var(--mm-dur-fast), transform var(--mm-dur-normal);
}
.mm-dropzone:hover .mm-dropzone__icon {
  color: var(--mm-yellow);
}
.mm-dropzone__title {
  font-size: var(--mm-fs-14);
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text);
}
.mm-dropzone__subtitle {
  font-size: var(--mm-fs-12);
  color: var(--mm-text-tertiary);
}
.mm-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.mm-dropzone__busy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--mm-fs-12);
  font-weight: var(--mm-fw-medium);
  color: var(--mm-yellow-text);
}
.mm-dropzone__busy::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--mm-yellow-border);
  border-top-color: var(--mm-yellow);
  animation: mm-spin 0.8s linear infinite;
}
.mm-dropzone__error {
  margin-top: 8px;
  font-size: var(--mm-fs-12);
  color: var(--mm-danger-fg);
  font-weight: var(--mm-fw-medium);
}

.mm-dropzone--drag {
  background: var(--mm-yellow-soft);
  border-color: var(--mm-yellow);
  color: var(--mm-text);
  box-shadow: var(--mm-sh-yellow);
}
.mm-dropzone--drag .mm-dropzone__icon {
  color: var(--mm-yellow);
  transform: translateY(-2px);
}

.mm-dropzone--busy {
  cursor: progress;
  pointer-events: none;
}
.mm-dropzone--busy .mm-dropzone__input {
  pointer-events: none;
}

.mm-dropzone--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mm-dropzone--error {
  border-color: var(--mm-danger);
  background: var(--mm-danger-bg);
}
.mm-dropzone--error .mm-dropzone__icon {
  color: var(--mm-danger);
}

@keyframes mm-spin {
  to { transform: rotate(360deg); }
}

/* ─── ROW EXPANSION ──────────────────────────────────────────────── */
/* Standalone flavour */
.mm-row-expansion {
  display: flex;
  flex-direction: column;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-3);
  overflow: hidden;
  position: relative;
}
.mm-row-expansion--tone-success { border-left: 3px solid var(--mm-success); }
.mm-row-expansion--tone-warning { border-left: 3px solid var(--mm-warning); }
.mm-row-expansion--tone-danger  { border-left: 3px solid var(--mm-danger); }

.mm-row-expansion__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: var(--mm-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background var(--mm-dur-fast);
}
.mm-row-expansion__summary:hover {
  background: var(--mm-surface-hover);
}
.mm-row-expansion__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--mm-text-tertiary);
  flex-shrink: 0;
  transition: color var(--mm-dur-fast), transform var(--mm-dur-fast);
}
.mm-row-expansion__summary:hover .mm-row-expansion__toggle {
  color: var(--mm-text);
}
.mm-row-expansion__detail {
  padding: 14px 16px;
  background: var(--mm-bg-alt);
  border-top: 1px solid var(--mm-border);
  font-size: var(--mm-fs-13);
  color: var(--mm-text-secondary);
}
.mm-row-expansion--disabled .mm-row-expansion__summary {
  cursor: default;
  color: var(--mm-text-tertiary);
}
.mm-row-expansion--disabled .mm-row-expansion__summary:hover {
  background: transparent;
}

/* Table-row flavour */
.mm-row-expansion__row {
  cursor: pointer;
  transition: background var(--mm-dur-fast);
}
.mm-row-expansion__row:hover {
  background: var(--mm-surface-hover);
}
.mm-row-expansion__row > td:first-child {
  width: 32px;
  color: var(--mm-text-tertiary);
}
.mm-row-expansion__row .mm-row-expansion__toggle {
  margin-left: 4px;
}
.mm-row-expansion__detail-row > td {
  background: var(--mm-bg-alt);
  padding: 14px 18px;
  border-top: 1px solid var(--mm-border);
}
.mm-row-expansion__detail-row--hidden {
  display: none;
}

/* Blazor reconnect UI. Defining this element in App.razor avoids the framework shadow-DOM default. */
#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 8, 0.72);
  color: var(--mm-text);
  backdrop-filter: blur(6px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid;
}

#components-reconnect-modal.components-reconnect-hide {
  display: none;
}

.mm-reconnect {
  width: min(360px, 100%);
  padding: 22px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-4);
  box-shadow: var(--mm-sh-modal);
}

.mm-reconnect__state {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

#components-reconnect-modal.components-reconnect-show .mm-reconnect__state--show,
#components-reconnect-modal.components-reconnect-failed .mm-reconnect__state--failed,
#components-reconnect-modal.components-reconnect-rejected .mm-reconnect__state--rejected {
  display: flex;
}

.mm-reconnect__state--show {
  flex-direction: row;
  align-items: center;
}

.mm-reconnect__pulse {
  width: 42px;
  height: 42px;
  border: 3px solid var(--mm-yellow-border);
  border-top-color: var(--mm-yellow);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: mm-spin 900ms linear infinite;
}

.mm-reconnect__copy {
  min-width: 0;
}

.mm-reconnect__title {
  font-size: var(--mm-fs-16);
  font-weight: var(--mm-fw-semibold);
  color: var(--mm-text);
}

.mm-reconnect__text {
  margin-top: 4px;
  font-size: var(--mm-fs-13);
  color: var(--mm-text-secondary);
  line-height: 1.45;
}

.mm-reconnect__meta {
  margin-top: 8px;
  font-size: var(--mm-fs-11);
  color: var(--mm-text-tertiary);
}

.mm-reconnect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}