/**
 * mlm.css — page-specific styles for mlm.html (Multi-level Incentive Program).
 *
 * Follows the visual vocabulary already established on pos.html and
 * member.html (dark hero, gradient headline fragment, floating status
 * cards, chip strip, capability cards) so the product pages read as one
 * family — but carries its own accent (indigo -> emerald, since this page
 * is about money moving) and its own centrepiece: an interactive genealogy
 * tree with a commission-flow simulation, which nothing else on the site
 * needs.
 *
 * Kept out of design-system.css deliberately: none of this is shared.
 */

/* ================================================================
   HERO
   ================================================================ */
.mlm-hero-dark {
  background:
    radial-gradient(ellipse 900px 520px at 10% 0%, rgba(80, 95, 210, 0.30), transparent 60%),
    radial-gradient(ellipse 820px 480px at 100% 8%, rgba(30, 175, 150, 0.22), transparent 55%),
    linear-gradient(155deg, oklch(15% 0.05 275) 0%, oklch(20% 0.045 245) 100%);
}

.mlm-hero-dark h1 { color: #fff; }
.mlm-hero-dark p { color: oklch(76% 0.015 260); }

/* Buttons need dark-background variants — the default primary is near-black
   and the ghost is dark-on-dark, so both disappear here. Matches the
   treatment already used on pos.html / member.html. */
.mlm-hero-dark .ds-btn-primary,
.mlm-hero-dark a.ds-btn-primary {
  background: linear-gradient(135deg, oklch(54% 0.16 268), oklch(62% 0.13 190));
  color: #fff;
}

.mlm-hero-dark .ds-btn-primary:hover,
.mlm-hero-dark a.ds-btn-primary:hover { color: #fff; }

.mlm-hero-dark a.ds-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.10);
}

.mlm-hero-dark a.ds-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.mlm-grad-text {
  background: linear-gradient(100deg, oklch(72% 0.15 265), oklch(78% 0.14 175));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mlm-breadcrumb {
  font-size: 14px;
  font-weight: 600;
  color: oklch(62% 0.02 260);
}

.mlm-breadcrumb .accent { color: oklch(76% 0.12 200); }

.mlm-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 4px;
}

.mlm-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: oklch(74% 0.015 260);
}

.mlm-trust-line svg {
  width: 15px;
  height: 15px;
  color: oklch(78% 0.14 175);
  flex-shrink: 0;
}

/* Floating status cards over the hero visual */
.mlm-float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 11px 15px;
  box-shadow: 0 16px 32px -12px rgba(20, 30, 60, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  z-index: 3;
  white-space: nowrap;
}

.mlm-float-card .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(70% 0.16 155);
  box-shadow: 0 0 0 3px oklch(70% 0.16 155 / 0.18);
  flex-shrink: 0;
}

.mlm-float-card .amt { color: oklch(52% 0.15 160); }
.mlm-float-card.tl { top: 14px; left: -18px; }
.mlm-float-card.br { bottom: 22px; right: -14px; }

@media (max-width: 980px) {
  .mlm-float-card.tl { left: 4px; }
  .mlm-float-card.br { right: 4px; }
}

/* Hero mini-tree: a static, decorative preview of the real thing below */
.mlm-hero-visual {
  position: relative;
  border-radius: 20px;
  padding: 34px 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mlm-mini-tier {
  display: flex;
  justify-content: center;
  gap: 14px;
  position: relative;
}

.mlm-mini-tier + .mlm-mini-tier { margin-top: 30px; }

.mlm-mini-node {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  z-index: 2;
}

.mlm-mini-node.root {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, oklch(58% 0.16 268), oklch(66% 0.13 190));
  border-color: transparent;
  color: #fff;
}

.mlm-mini-node.lit {
  background: rgba(60, 200, 165, 0.20);
  border-color: rgba(60, 200, 165, 0.45);
  color: oklch(85% 0.13 170);
}

/* In normal flow, not absolute: an absolutely-positioned SVG here collapsed
   to its intrinsic size and rendered as a stray glyph off to one side.
   Width is pinned to the node cluster (3 nodes + 2 gaps) and centred, so the
   drop lines land on the node centres instead of spanning the whole panel. */
.mlm-mini-links {
  display: block;
  width: 154px;   /* 3 x 42px node + 2 x 14px gap */
  margin: 0 auto;
  height: 26px;
  z-index: 1;
}

.mlm-mini-links path {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* ================================================================
   CHIP STRIP — who runs incentive programs
   ================================================================ */
.mlm-chip-strip {
  padding: 44px 24px 8px;
  text-align: center;
}

.mlm-chip-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.mlm-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mlm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms;
}

.mlm-chip svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

.mlm-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(20, 30, 60, 0.4);
  border-color: oklch(80% 0.06 250);
}

/* ================================================================
   GENEALOGY EXPLORER — the centrepiece
   ================================================================ */
.mlm-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 28px;
  align-items: start;
}

.mlm-tree-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 30px;
  overflow: hidden;
}

.mlm-tree-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mlm-tree-hint {
  font-size: 12.5px;
  color: var(--muted);
}

.mlm-sim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, oklch(52% 0.16 268), oklch(60% 0.13 190));
  padding: 10px 18px;
  border-radius: 100px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms, opacity 180ms;
}

.mlm-sim-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(40, 60, 160, 0.6);
}

.mlm-sim-btn:disabled { opacity: 0.55; cursor: default; }
.mlm-sim-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- the tree itself --- */
.mlm-tree {
  min-width: 460px;
  /* Headroom so the commission chip (top:-11px) on a tier-1 node isn't
     clipped by the scroll container, which clips both axes once overflow-x
     is set. */
  padding-top: 20px;
}

.mlm-tree-scroll { overflow-x: auto; padding-bottom: 4px; }

.mlm-tier {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 2;
}

/* A single 1fr column would stretch the root across the whole tree width,
   turning it into a banner rather than a node (and pushing its commission
   chip past the panel edge). Centre it at node width instead. */
.mlm-tier-1 {
  display: flex;
  justify-content: center;
}

.mlm-node.is-root { width: 152px; }
.mlm-tier-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlm-tier-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.mlm-links {
  display: block;
  width: 100%;
  height: 34px;
  position: relative;
  z-index: 1;
}

.mlm-links path {
  stroke: var(--border);
  stroke-width: 1.6;
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: stroke 300ms;
}

.mlm-links path.flowing {
  stroke: oklch(62% 0.16 160);
  stroke-width: 2.4;
  stroke-dasharray: 6 6;
  animation: mlm-flow 700ms linear infinite;
}

@keyframes mlm-flow {
  to { stroke-dashoffset: -12; }
}

/* --- node --- */
.mlm-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  transition: border-color 220ms, box-shadow 220ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms;
}

.mlm-node:hover { border-color: oklch(78% 0.07 255); transform: translateY(-2px); }
.mlm-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.mlm-node[aria-pressed="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px oklch(56% 0.17 258 / 0.14);
}

.mlm-node .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, oklch(58% 0.14 262), oklch(64% 0.11 205));
  flex-shrink: 0;
}

.mlm-node.is-root .av {
  width: 36px;
  height: 36px;
  font-size: 12px;
  background: linear-gradient(135deg, oklch(48% 0.18 270), oklch(58% 0.14 190));
}

.mlm-node .nm {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mlm-node .lv {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* commission chip that pops in during the simulation */
.mlm-node .earn {
  position: absolute;
  top: -11px;
  right: -8px;
  background: oklch(52% 0.15 160);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 100px;
  box-shadow: 0 4px 10px -3px rgba(20, 80, 60, 0.5);
  opacity: 0;
  transform: scale(0.6) translateY(4px);
  pointer-events: none;
  white-space: nowrap;
}

.mlm-node.earned .earn {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mlm-node.earned {
  border-color: oklch(70% 0.14 160);
  background: oklch(98% 0.02 160);
}

.mlm-node.is-source {
  border-color: oklch(62% 0.16 160);
  box-shadow: 0 0 0 3px oklch(62% 0.16 160 / 0.16);
}

/* --- detail side panel --- */
.mlm-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.mlm-detail-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.mlm-detail-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, oklch(52% 0.16 268), oklch(60% 0.13 190));
  flex-shrink: 0;
}

.mlm-detail-name {
  font-family: "Sora", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.mlm-detail-rank {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-ink);
  background: var(--blue-soft);
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  margin-top: 3px;
}

.mlm-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.mlm-stat .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mlm-stat .v {
  font-family: "Sora", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
  letter-spacing: -0.02em;
}

.mlm-stat .v.pos { color: oklch(48% 0.15 160); }

.mlm-detail-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* running total during simulation */

/* display:flex below outranks the hidden attribute's UA display:none, so
   without this the box shows "RM 0" before any simulation has run. */
.mlm-payout[hidden] { display: none; }

.mlm-payout {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: oklch(97% 0.03 160);
  border: 1px solid oklch(88% 0.06 160);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mlm-payout .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: oklch(45% 0.11 160); }
.mlm-payout .val { font-family: "Sora", sans-serif; font-size: 20px; font-weight: 700; color: oklch(42% 0.15 160); letter-spacing: -0.02em; }

/* Honest labelling — this is a demo of the mechanism, not client data */
.mlm-illustrative {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}

.mlm-illustrative svg { flex-shrink: 0; margin-top: 2px; color: var(--muted); }

/* ================================================================
   PLAN BUILDER — set a rate per tier, see the split live
   ================================================================ */
.mlm-planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: start;
}

.mlm-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.mlm-plan-card h3 {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.mlm-plan-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* --- sale amount + depth --- */
.mlm-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.mlm-plan-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mlm-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: oklch(95% 0.008 255);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.mlm-seg button {
  border: none;
  background: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 180ms, color 180ms, box-shadow 180ms;
}

.mlm-seg button:hover { color: var(--ink); }

.mlm-seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--blue-ink);
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.12);
}

.mlm-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.mlm-sale-val {
  font-family: "Sora", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* --- per-tier rate rows --- */
.mlm-tier-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
}

.mlm-tier-row[hidden] { display: none; }

.mlm-tier-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.mlm-tier-name small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}

.mlm-tier-pct {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-ink);
  text-align: right;
  letter-spacing: -0.02em;
}

/* range input, styled consistently across engines */
.mlm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 100px;
  background: oklch(91% 0.01 255);
  outline: none;
  cursor: pointer;
}

.mlm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue);
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.25);
  cursor: pointer;
}

.mlm-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue);
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.25);
  cursor: pointer;
}

.mlm-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* --- live result side --- */
.mlm-split-bar {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: oklch(93% 0.01 255);
  margin-bottom: 16px;
}

.mlm-split-bar i {
  display: block;
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.mlm-split-bar i.t1 { background: oklch(54% 0.16 268); }
.mlm-split-bar i.t2 { background: oklch(58% 0.14 235); }
.mlm-split-bar i.t3 { background: oklch(62% 0.13 205); }
.mlm-split-bar i.t4 { background: oklch(66% 0.12 185); }
.mlm-split-bar i.t5 { background: oklch(70% 0.12 165); }
.mlm-split-bar i.rest { background: transparent; }

.mlm-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}

.mlm-legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

.mlm-legend-item[hidden] { display: none; }

.mlm-legend-item .sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.mlm-legend-item .nm { color: var(--muted); }

.mlm-legend-item .amt {
  margin-left: auto;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mlm-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.mlm-total-row .k { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mlm-total-row .v { font-family: "Sora", sans-serif; font-size: 24px; font-weight: 700; color: oklch(42% 0.15 160); letter-spacing: -0.025em; }
.mlm-total-row .pct { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* A genuinely useful warning rather than decoration: flags a payout ratio
   worth checking against margin. */
.mlm-margin-flag {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.5;
  background: oklch(96% 0.03 85);
  border: 1px solid oklch(87% 0.07 85);
  color: oklch(42% 0.10 60);
}

.mlm-margin-flag[hidden] { display: none; }
.mlm-margin-flag svg { flex-shrink: 0; margin-top: 1px; }

.mlm-plan-note {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mlm-plan-note svg { flex-shrink: 0; margin-top: 2px; }

@media (max-width: 1080px) {
  .mlm-planner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mlm-tier-row { grid-template-columns: 70px minmax(0, 1fr) 52px; gap: 10px; }
  .mlm-plan-card { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mlm-split-bar i { transition: none; }
  .mlm-seg button { transition: none; }
}

/* ================================================================
   CAPABILITY CARDS
   ================================================================ */
.mlm-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mlm-cap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mlm-cap-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}

.mlm-cap-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-soft);
  color: var(--blue-ink);
  flex-shrink: 0;
}

.mlm-cap-icon.green { background: oklch(95% 0.04 160); color: oklch(45% 0.13 160); }
.mlm-cap-icon svg { width: 22px; height: 22px; }

.mlm-cap-card h3 { font-size: 16.5px; font-weight: 600; }
.mlm-cap-card p { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
  .mlm-explorer { grid-template-columns: 1fr; }
  .mlm-detail { position: static; }
}

@media (max-width: 900px) {
  .mlm-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .mlm-cap-grid { grid-template-columns: 1fr; }
  .mlm-tree-panel { padding: 20px 16px 24px; }
  .mlm-stat-grid { gap: 12px 10px; }
  .mlm-hero-visual { padding: 26px 16px; }
  .mlm-mini-node { width: 36px; height: 36px; }
  .mlm-mini-links { width: 136px; }
  .mlm-mini-node.root { width: 44px; height: 44px; }
}

/* ================================================================
   MOTION PREFERENCES
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mlm-links path.flowing { animation: none; }
  .mlm-node,
  .mlm-node.earned .earn,
  .mlm-cap-card,
  .mlm-chip,
  .mlm-sim-btn { transition: none; }
  .mlm-node:hover,
  .mlm-cap-card:hover,
  .mlm-chip:hover,
  .mlm-sim-btn:hover:not(:disabled) { transform: none; }
}