/* Lil Mint brand layer.
   Loaded after styles.css (and dashboard.css on the dashboard) by every page.
   It changes identity only: colour, type, shape, surface and spacing. No route,
   id, API contract or behaviour is touched.

   The idea: a mint-leaf shop, not an admin template. Deep forest ink for the
   moments that should feel like a brand (the greeting card, the footer, the
   wordmark), a living mint for surfaces and accents, and one confident teal for
   every action. Warm clay is reserved for the guest price and warnings so it can
   never be mistaken for the brand. Network colours only ever live inside the
   network logo tile. */

:root {
  /* Brand palette. */
  --lm-forest: #0B2E28;
  --lm-forest-2: #103A32;
  --lm-mint: #5FE3B6;
  --lm-mint-bright: #8AF3D1;
  --lm-teal: #0E7264;
  --lm-teal-deep: #0A5A4F;
  --lm-teal-ink: #0A6455;
  --lm-teal-soft: #E2F6EE;
  --lm-teal-line: #C6EADF;
  --lm-clay: #9A5B12;
  --lm-clay-soft: #FCEEDD;
  --lm-paper: #F3FAF7;
  --lm-paper-2: #EAF6F1;
  --lm-line: #D8E9E2;
  --lm-line-strong: #B9D6CC;
  --lm-muted: #4E6A62;

  /* Type. A humanist serif for the voice, a quiet system sans for reading, and
     a mono face for money and micro-labels. */
  --lm-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --lm-body: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --lm-mono: "Cascadia Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Retune the app's shared tokens so every existing component joins in. */
  --bg: var(--lm-paper);
  --surface: #FFFFFF;
  --surface-2: var(--lm-paper-2);
  --surface-3: #DFF1EA;
  --text: var(--lm-forest);
  --muted: var(--lm-muted);
  --border: var(--lm-line);
  --border-strong: var(--lm-line-strong);

  --accent: #16A88A;
  --accent-strong: var(--lm-teal);
  --accent-deep: var(--lm-teal-deep);
  --accent-text: #FFFFFF;
  --accent-ink: var(--lm-teal-ink);
  --accent-soft: var(--lm-teal-soft);

  --mint: var(--lm-mint);
  --mint-ink: var(--lm-teal-ink);
  --mint-soft: var(--lm-teal-soft);
  --mint-line: var(--lm-teal-line);

  --ok: #0B6E4F;
  --ok-soft: #E1F6EC;
  --warn: #8A4B0B;
  --warn-soft: var(--lm-clay-soft);
  --danger: #A61B1B;
  --danger-soft: #FCE9E9;

  --focus: var(--lm-teal);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 46, 40, .05), 0 1px 0 rgba(11, 46, 40, .03);
  --shadow-lg: 0 24px 52px -34px rgba(11, 46, 40, .5), 0 3px 10px rgba(11, 46, 40, .06);
  --dash-shadow: 0 1px 2px rgba(11, 46, 40, .04), 0 16px 32px -30px rgba(11, 46, 40, .5);

  --overlay: rgba(7, 26, 23, .55);
  --logo-grad: linear-gradient(150deg, var(--lm-mint) 0%, #2CC79C 100%);
  --buy-grad: linear-gradient(132deg, var(--lm-teal-deep), var(--lm-teal) 62%, #17A98B);

  --chart-series: #0B7A66;
  --chart-grid: var(--lm-line);
  --chart-baseline: var(--lm-line-strong);
  --chart-hit: rgba(14, 114, 100, .12);
}

/* ------------------------------------------------------------------ base */

body {
  font-family: var(--lm-body);
  background-color: var(--bg);
}

h1, h2, h3, .view__title, .panel__title, .hero__title, .promo-card__title,
.card h1, .modal__title, .topbar__brand {
  font-family: var(--lm-display);
  font-weight: 600;
  letter-spacing: -.022em;
}

/* Money reads as money: tabular and quietly monospaced. */
.kpi__value,
.balance-card__amount,
.tile__value,
.stat-card__value,
.bundle__price,
.bundle__guest-price,
.price-row__value,
.summary__value,
.amount,
.order-cell__strong,
.balance,
#balance,
#metaBalance,
#kpiBalance,
.kv__val {
  font-family: var(--lm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.eyebrow {
  font-family: var(--lm-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--lm-teal-ink);
}

a { color: var(--accent-ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--lm-mint); color: var(--lm-forest); }

/* ------------------------------------------------------------- wordmark */

.sidebar__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--lm-forest) url("brand-mark.svg") center / 23px 23px no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: 0 4px 12px -5px rgba(11, 46, 40, .55);
}

.sidebar__name,
.dashbar__word,
.mobilebar__brand,
.topbar__brand {
  font-family: var(--lm-display);
  font-weight: 600;
  letter-spacing: -.025em;
}

.dashbar__word span {
  margin-left: 3px;
  font-family: var(--lm-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--lm-muted);
  vertical-align: middle;
}

/* -------------------------------------------------------------- controls */

.btn {
  color: #FFFFFF;
  background: var(--accent-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -12px rgba(10, 90, 79, .65);
  transition: background var(--dur-fast), box-shadow var(--dur-fast),
    transform var(--dur-fast);
}
.btn:hover {
  color: #FFFFFF;
  background: var(--accent-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 22px -14px rgba(10, 90, 79, .7);
}
.btn:active { transform: translateY(1px) scale(.995); }

.btn--ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn--small { font-size: var(--text-sm); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(22, 168, 138, .16);
  outline: none;
}
input[type="checkbox"] { accent-color: var(--accent-strong); }

.chip {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}
.chip:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.tabs,
.order-tabs,
.networks {
  background: var(--surface-2);
  border-color: var(--border);
}

.tabs input:checked + label,
.order-tab[aria-selected="true"] {
  color: #FFFFFF;
  background: var(--accent-strong);
  box-shadow: 0 6px 14px -10px rgba(10, 90, 79, .8);
}
.order-tab[aria-selected="true"] .order-tab__count {
  color: var(--lm-forest);
  background: var(--lm-mint);
}
.network input:checked + label {
  color: var(--accent-ink);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(11, 46, 40, .05), 0 4px 10px -8px rgba(11, 46, 40, .5);
}

.iconbtn {
  color: var(--text);
  background: var(--surface-2);
  border-color: transparent;
  border-radius: var(--radius-pill);
}
.iconbtn:hover { color: var(--accent-ink); background: var(--accent-soft); }

.theme-toggle {
  border-radius: var(--radius-pill);
  border-color: var(--border);
  background: var(--surface-2);
}
.theme-toggle:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }

.alert {
  border-radius: var(--radius-sm);
  border-left-width: 4px;
}
.alert--ok { border-color: var(--ok); }
.alert--warn { border-color: var(--warn); }
.alert--error { border-color: var(--danger); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: var(--lm-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--radius-pill);
}
.badge::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.badge--ok { color: var(--ok); background: var(--ok-soft); }
.badge--pending { color: var(--warn); background: var(--warn-soft); }
.badge--failed { color: var(--danger); background: var(--danger-soft); }

.pill { font-family: var(--lm-mono); letter-spacing: .05em; }
.pill--admin {
  color: var(--lm-forest);
  background: var(--lm-mint);
  border-color: transparent;
}

/* ----------------------------------------------------------------- cards */

.panel,
.kpi,
.stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--dash-shadow);
  background: var(--surface);
}

.panel__head { margin-bottom: 18px; }
.panel__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
}
.panel__title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(140deg, var(--lm-mint), #16A88A);
  transform: rotate(-45deg);
}

.tile {
  border-color: var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
}

.linkish { color: var(--accent-ink); font-weight: 600; }
.linkish:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.kv__row { padding: 12px 0; }
.kv__key { font-size: 13px; }
.kv__val { font-weight: 500; }

/* -------------------------------------------------------------- storefront */

.sitebar {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}

.sitebar__link {
  padding: 6px 2px;
  font-size: 13.5px;
  color: var(--muted);
}
.sitebar__link:hover { color: var(--accent-ink); }

.sitebar .sidebar__name { font-size: 20px; }

/* The hero is a mint wash with a seed-paper texture, not a dark slab: the page
   should feel like the brand before it feels like a dashboard. */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 11px;
  margin: 6px 0 18px;
  padding: clamp(22px, 4vw, 42px);
  background-color: #EAF8F1;
  background-image:
    radial-gradient(rgba(14, 114, 100, .10) 1px, transparent 1.2px),
    radial-gradient(120% 150% at 100% 0%, #CDF5E4 0%, transparent 58%),
    linear-gradient(140deg, #EFFBF6 0%, #E4F7EF 100%);
  background-size: 18px 18px, auto, auto;
  border: 1px solid var(--lm-teal-line);
  border-radius: 30px;
  box-shadow: 0 26px 50px -42px rgba(11, 46, 40, .55);
}
.hero::after {
  content: "";
  position: absolute;
  right: -74px;
  bottom: -105px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 227, 182, .55), transparent 66%);
  pointer-events: none;
}
.hero .eyebrow { margin: 0; color: var(--lm-teal-ink); }
.hero__title {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin: 0;
  color: var(--lm-forest);
  font-size: clamp(32px, 1.6rem + 2.6vw, 50px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.03;
}
.hero__sub {
  position: relative;
  z-index: 1;
  max-width: 52ch;
  margin: 0;
  color: #33564C;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
}
.hero__points {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0 0;
  counter-reset: step;
}
.hero__point {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lm-forest);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(14, 114, 100, .16);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__point::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lm-forest);
  color: var(--lm-mint);
  font-family: var(--lm-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0;
  transform: none;
}

.promo-card {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--lm-teal-soft) 100%);
  border: 1px solid var(--lm-teal-line);
  border-left: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--dash-shadow);
}
.promo-card__title { color: var(--lm-forest); font-size: 21px; }
.promo-card__text { color: var(--muted); }

.verify-shortcuts {
  display: flex;
  gap: 9px;
  margin: 0 0 10px;
}
.verify-shortcuts .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 8px;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-pill);
}
@media (max-width: 340px) {
  .verify-shortcuts { flex-direction: column; }
  .verify-shortcuts .btn { width: 100%; }
}

/* --------------------------------------------------------- network tiles */

/* Three equal tabs rather than a wrapping strip: every network is visible and
   the tap targets stay a thumb's width even at 360px. */
.networks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: 20px;
}
.network label {
  width: 100%;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.network label .dot { flex: none; }

.network-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast), border-color var(--dur-fast),
    box-shadow var(--dur-fast), background var(--dur-fast);
}
.network-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--net);
  opacity: .9;
}
.network-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 14px 26px -22px rgba(11, 46, 40, .55);
}
.network-card.is-selected,
.network-card[aria-checked="true"] {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 168, 138, .15);
}
.network-card.is-selected::after,
.network-card[aria-checked="true"]::after { height: 4px; }

.network-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(11, 46, 40, .12);
  font-family: var(--lm-body);
}

.network-card__name { font-weight: 700; }
.network-card__hint { font-family: var(--lm-mono); font-size: 9.5px; letter-spacing: .04em; }

/* --------------------------------------------------------------- bundles */

.bundle {
  gap: 8px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 46, 40, .04);
  transition: transform var(--dur-fast), border-color var(--dur-fast),
    box-shadow var(--dur-fast), background var(--dur-fast);
}
.bundle:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  border-top-color: var(--accent);
  box-shadow: 0 18px 30px -24px rgba(11, 46, 40, .6);
}
.bundle[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(22, 168, 138, .16);
}
.bundle[aria-pressed="true"]::after {
  width: 9px;
  height: 9px;
  top: 13px;
  right: 13px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.bundle__size { font-family: var(--lm-display); font-weight: 600; letter-spacing: -.02em; }
.bundle__meta { font-size: 11.5px; }
.bundle__instant {
  color: var(--lm-teal-ink);
  background: var(--lm-teal-soft);
  font-family: var(--lm-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
}
.bundle__network { background: var(--surface-2); font-family: var(--lm-mono); }

.bundle__price,
.price-row--main .price-row__value,
.price-row--member .price-row__value {
  color: var(--lm-teal-ink);
}
.bundle__guest-price,
.price-row--strike .price-row__value,
.summary__value--strike {
  color: var(--lm-clay);
}
.price-row--guest .price-row__value { color: var(--lm-clay); }
.price-row__label { font-size: 11.5px; }

.price-tag {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--lm-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.6;
}
.price-tag--member { color: #FFFFFF; background: var(--accent-strong); }
.price-tag--guest { color: var(--lm-clay); background: var(--lm-clay-soft); }

.save-badge {
  align-self: flex-start;
  padding: 3px 9px;
  color: var(--lm-teal-ink);
  background: var(--lm-teal-soft);
  border: 1px solid var(--lm-teal-line);
  border-radius: var(--radius-pill);
  font-family: var(--lm-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.bundle--shop .save-badge {
  align-self: stretch;
  padding: 7px 0 0;
  border: 0;
  border-top: 1px dashed var(--border);
  border-radius: 0;
  background: none;
  color: var(--lm-teal-ink);
  font-size: 10px;
}
.bundle__prices { padding-bottom: 8px; border-bottom: 1px dashed var(--border); }

.bundle__cta {
  color: #FFFFFF;
  background: var(--accent-strong);
  border-radius: var(--radius-pill);
  font-family: var(--lm-body);
  font-weight: 600;
}
.bundle:hover .bundle__cta { background: var(--accent-deep); }

.bundle-group { border-left: 0; padding-left: 0; gap: 10px; }
.bundle-group + .bundle-group { border-top-style: dashed; }
.bundle-group__title { font-family: var(--lm-display); font-weight: 600; }
.bundle-group__count { font-family: var(--lm-mono); font-size: 10px; }

.step__num {
  width: 30px;
  height: 30px;
  color: var(--lm-mint);
  background: var(--lm-forest);
  border-radius: 50%;
  font-family: var(--lm-mono);
  font-size: 11px;
  font-weight: 600;
}
.step__name { font-family: var(--lm-display); font-weight: 600; font-size: 16px; }

.faq__q { font-weight: 600; }
.faq__q::after { border-color: var(--accent-ink); }

/* ------------------------------------------------------------------ footer */

.sitefoot {
  margin-top: 30px;
  padding: 26px 28px;
  background: var(--lm-forest);
  border: 0;
  border-radius: 26px;
  color: #DDEFE8;
}
.sitefoot .sidebar__name { color: #FFFFFF; font-size: 20px; }
.sitefoot .sidebar__mark { box-shadow: 0 0 0 1px rgba(124, 242, 198, .24); }
.sitefoot__text { color: #A8C7BC; }
.sitefoot__links a { color: var(--lm-mint); font-weight: 500; }
.sitefoot__links a:hover { color: #FFFFFF; }

/* ------------------------------------------------------------- dashboard */

.dashbar {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.dashbar__mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--lm-forest);
  box-shadow: 0 4px 12px -5px rgba(11, 46, 40, .55);
}
.dashbar__mark img { width: 22px; height: 22px; }
.dashbar__word { font-size: 19px; }

.dashbar__search input {
  height: 41px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
}
.dashbar__search input:hover { background: var(--surface-3); }
.dashbar__search input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 168, 138, .16);
}

.dash-balance {
  height: 34px;
  color: #E9FFF7;
  background: var(--lm-forest);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px -12px rgba(11, 46, 40, .9);
}
.dash-balance:hover { color: var(--lm-forest); background: var(--lm-mint); }

.dash-avatar {
  color: var(--lm-forest);
  background: linear-gradient(145deg, var(--lm-mint-bright) 0%, #2CC79C 100%);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--lm-teal-line);
}

.dash-pop { border-radius: var(--radius-lg); }
.dash-pop__icon { color: var(--accent-ink); background: var(--accent-soft); }

/* The greeting card is the brand's anchor on the dashboard. */
.dash-head {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  color: #E9FFF7;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(95, 227, 182, .30) 0%, transparent 54%),
    linear-gradient(135deg, #0A2A24 0%, var(--lm-forest) 55%, #12483D 100%);
  border-radius: 28px;
  box-shadow: 0 26px 46px -36px rgba(11, 46, 40, .95);
}
.dash-head::after {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 30px solid rgba(124, 242, 198, .13);
  pointer-events: none;
}
.dash-head .eyebrow { color: var(--lm-mint); }
.dash-head .view__title {
  color: #FFFFFF;
  font-family: var(--lm-display);
  font-weight: 600;
  letter-spacing: -.03em;
}
.dash-meta { color: #A8C7BC; }
.dash-meta strong { color: #FFFFFF; }
.dash-role {
  color: var(--lm-forest);
  background: var(--lm-mint);
  font-family: var(--lm-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
}
.dash-sep { background: rgba(255, 255, 255, .28); }
.dash-active { color: var(--lm-mint); background: rgba(124, 242, 198, .12); }

.dash-head .btn--buy {
  color: var(--lm-forest);
  background: var(--lm-mint);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8);
}
.dash-head .btn--buy:hover { background: var(--lm-mint-bright); filter: none; }
.dash-head .btn--topup {
  color: #E9FFF7;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(233, 255, 247, .32);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.dash-head .btn--topup:hover {
  color: var(--lm-forest);
  background: var(--lm-mint);
  border-color: var(--lm-mint);
}

/* KPI row. The wallet is the one card allowed to be mint. */
.kpi {
  padding: 16px 17px 15px;
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.kpi__icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.kpi__icon--mint { color: var(--lm-teal-ink); background: var(--lm-teal-soft); }
.kpi__icon--blue { color: var(--lm-teal-ink); background: var(--lm-teal-soft); }
.kpi__label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.kpi__value { font-size: 24px; font-weight: 600; }
.kpi__link { color: var(--accent-ink); font-weight: 600; }

.kpi--wallet {
  position: relative;
  overflow: hidden;
  color: var(--lm-forest);
  background: linear-gradient(150deg, #CFF6E4 0%, #E8FBF2 58%, #FFFFFF 100%);
  border-color: var(--lm-teal-line);
}
.kpi--wallet::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -46px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 227, 182, .55), transparent 68%);
  pointer-events: none;
}
.kpi--wallet .kpi__label { color: #3B6559; }
.kpi--wallet .kpi__value { color: var(--lm-forest); }
.kpi--wallet .kpi__note { color: #4E6A62; }
.kpi--wallet .kpi__link { color: var(--lm-teal-ink); }
.kpi--wallet .kpi__icon { color: var(--lm-forest); background: rgba(255, 255, 255, .7); }

/* Side rail (mobile drawer) and the desktop top navigation share these. */
.sidebar { background: var(--surface); border-color: var(--border); }
.sidebar__label { color: var(--muted); font-family: var(--lm-mono); letter-spacing: .12em; }
.nav__item { border-radius: var(--radius-pill); }
.nav__item:hover { background: var(--surface-2); color: var(--text); }
.nav__item:hover .nav__icon { color: var(--accent-ink); }
.nav__item[aria-current="page"] {
  color: #FFFFFF;
  background: var(--accent-strong);
  box-shadow: none;
  font-weight: 600;
}
.nav__item[aria-current="page"] .nav__icon { color: var(--lm-mint); }

.member-card {
  background: linear-gradient(155deg, var(--lm-teal-soft), var(--surface-2));
  border-color: var(--lm-teal-line);
  border-radius: 16px;
}
.member-card__icon { color: var(--accent-ink); background: rgba(255, 255, 255, .8); }
.member-card__title { font-family: var(--lm-display); font-weight: 600; }
.sidebar__foot { border-top-color: var(--border); }
.sidebar__user .avatar,
.avatar { color: var(--lm-forest); background: var(--lm-mint); }
.sidebar__contact a { color: var(--accent-ink); }
.sidebar .btn--ghost { border-color: var(--border-strong); }

.mobilebar {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.mobilebar__brand { font-size: 17px; }

/* Tables and order history. */
.table-wrap { border-radius: var(--radius-sm); }
th {
  font-family: var(--lm-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  color: var(--muted);
}
.orders-table th {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}
.orders-table th:first-child { border-top-left-radius: 12px; }
.orders-table th:last-child { border-top-right-radius: 12px; }
.orders-table td { border-bottom-color: var(--border); }
.order-row:hover td { background: var(--surface-2); }
.order-row--highlight td { background: var(--lm-teal-soft); }
.order-row--highlight td:first-child { box-shadow: inset 3px 0 0 var(--accent-strong); }
.order-cell__strong { font-size: 12.5px; }
.order-cell__sub { font-size: 11px; }

.orders-table-wrap,
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* Status counts, protection list, activity. */
.stat-card {
  box-shadow: none;
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 18px;
}
.stat-card__icon { border-radius: 12px; }
.stat-card__value { font-family: var(--lm-mono); font-size: 21px; font-weight: 600; }

.protect-item__icon { color: var(--accent-ink); background: var(--accent-soft); border-radius: 10px; }
.protect-panel__icon { color: var(--accent-ink); }
.dash-sub { color: var(--muted); }
.activity__icon { color: var(--accent-ink); background: var(--accent-soft); }

.chart__bar { fill: var(--accent-strong); }
.chart__grid { stroke: var(--chart-grid); }
.chart__tick { font-family: var(--lm-mono); }
.chart__hit:hover { fill: var(--chart-hit); }

.summary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.summary__row--total { border-top-color: var(--border-strong); }
.summary__value--member { color: var(--lm-teal-ink); font-weight: 600; }
.summary__value--guest { color: var(--lm-clay); }
.summary__row--save .summary__value { color: var(--lm-teal-ink); }

.checkout-member-line { background: var(--accent-soft); border: 1px solid var(--lm-teal-line); }
.modal__panel { border-radius: 26px; }
.modal__head { border-bottom: 1px solid var(--border); }

/* ------------------------------------------------------------- verify etc. */

.verify-cta {
  padding: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.verify-cta__note { margin: 0; }
.verify-panel { max-width: 560px; border-radius: 28px; }
.verify-numbers .panel:first-child { border-radius: 28px; }

.track-form { gap: 12px; }
.track-result { border-top-style: dashed; }

/* ------------------------------------------------------------- auth pages */

body.is-auth {
  background-color: var(--bg);
  background-image:
    radial-gradient(46rem 30rem at 8% -10%, rgba(95, 227, 182, .30), transparent 62%),
    radial-gradient(42rem 26rem at 106% 108%, rgba(22, 168, 138, .18), transparent 60%),
    radial-gradient(rgba(14, 114, 100, .08) 1px, transparent 1.2px);
  background-size: auto, auto, 20px 20px;
}

.card {
  max-width: 452px;
  padding: 34px;
  border-radius: 30px;
  border-color: var(--border);
  box-shadow: 0 36px 70px -48px rgba(11, 46, 40, .6), 0 2px 6px rgba(11, 46, 40, .05);
}
.card__head { margin-bottom: 22px; }
.card h1 { font-size: 30px; letter-spacing: -.03em; }
.card .brand { margin-bottom: 20px; }
.card .sidebar__name { font-size: 21px; }
.sub { color: var(--muted); }
.card .sub + form,
.card .sub + section { margin-top: 18px; }

.gate { background: var(--bg); }
.gate .card { max-width: 460px; }

/* ------------------------------------------------------------------ admin */

.sidebar__brand { gap: 10px; }
.sidebar__brand .sidebar__name { font-size: 19px; }
.admin .content,
body > .app > .main > .content { max-width: 1240px; }

.tile { background: var(--surface-2); }
.tile__label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.tile__value { font-family: var(--lm-mono); font-size: 21px; font-weight: 600; }
.balance--sm { font-family: var(--lm-mono); font-weight: 600; letter-spacing: -.03em; }

.topbar { background: var(--surface); border-bottom-color: var(--border); }
.pill--on { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); }
.pill--off { color: var(--muted); background: var(--surface-3); border-color: var(--border-strong); }
.pill--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }

/* ===================================================== desktop composition

   The reference dashboard is a conventional left rail. Lil Mint leads with a
   top bar and a horizontal section strip instead, and the content below is one
   wide card grid. The DOM stays exactly as it was: this only rearranges the
   existing shell, so every control, route and handler is untouched. */

@media (min-width: 960px) {
  :root { --dash-topbar: 64px; --dash-topbar-dash: 64px; }

  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--bg);
  }

  .dashbar {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 45;
  }
  .dashbar__inner { height: var(--dash-topbar); }

  /* The rail becomes a section strip under the bar. */
  .sidebar {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: var(--dash-topbar);
    z-index: 35;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: auto;
    min-width: 0;
    padding: 8px clamp(18px, 2.6vw, 32px);
    overflow: hidden;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
  }

  .sidebar__label,
  .member-card { display: none; }

  .sidebar .nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    scrollbar-width: none;
  }
  .sidebar .nav::-webkit-scrollbar { display: none; }

  .sidebar .nav__item {
    width: auto;
    flex: none;
    gap: 7px;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 13px;
    border-radius: var(--radius-pill);
  }
  .sidebar .nav__icon { width: 16px; height: 16px; }
  .sidebar .nav__item[aria-current="page"] {
    color: #FFFFFF;
    background: var(--accent-strong);
  }

  .sidebar__foot {
    display: flex;
    flex: none;
    align-items: center;
    gap: 9px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }
  .sidebar__foot .sidebar__user { margin: 0; }
  .sidebar__foot .sidebar__meta span { display: none; }
  .sidebar__foot .btn {
    width: auto;
    margin: 0;
    padding: 8px 13px;
    font-size: 12px;
  }
  .sidebar__contact { display: none; }

  .main {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
  }

  /* The admin page has no separate top bar: its strip IS the top bar. Without
     this the sticky offset would leave a 64px hole above it and let the strip
     sit over the first heading. */
  body.is-admin .app { grid-template-rows: auto minmax(0, 1fr); }
  body.is-admin .sidebar { grid-row: 1; top: 0; }
  body.is-admin .main { grid-row: 2; }
  body.is-admin .sidebar .nav__item { padding: 8px 11px; font-size: 12.5px; }
  body.is-admin .sidebar__foot .sidebar__meta span { display: none; }

  /* Admin's brand row is the strip's left end, not a drawer header. */
  .sidebar__brand {
    flex: none;
    padding: 0;
    margin: 0 4px 0 0;
  }
  .sidebar__brand .theme-host { margin-left: 0; }
  .sidebar__brand .theme-toggle { width: 34px; height: 34px; }
  .sidebar__brand .pill--admin { padding: 2px 7px; font-size: 9px; }

  .content {
    max-width: 1280px;
    padding-top: 26px;
  }
}

/* Between the drawer breakpoint and a full desktop the strip is tight. Tighten
   the tabs rather than hiding Account or Admin at the end of a scroll. */
@media (min-width: 960px) and (max-width: 1179px) {
  .sidebar .nav { gap: 2px; }
  .sidebar .nav__item { gap: 5px; padding: 8px 9px; font-size: 12px; }
  .sidebar .nav__icon { width: 15px; height: 15px; }
  .sidebar__foot .sidebar__meta strong { font-size: 13px; }
}

@media (min-width: 1180px) {
  .sidebar__contact {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0;
    white-space: nowrap;
  }
  .sidebar__contact a { font-size: 11.5px; }
  .sidebar__foot .sidebar__meta span { display: block; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 560px) {
  /* The tag already says which tier the price belongs to; the word "price"
     beside it is what makes the row wrap on a narrow card. The text node stays
     in the DOM, so the card still says both words to a screen reader. */
  .bundle--shop .price-row__label { font-size: 0; }
  .bundle--shop .price-row__label .price-tag { font-size: 8.5px; }

  /* Four status tabs on one phone row become cramped and hide the last one.
     A 2x2 block keeps every filter visible and comfortably tappable. */
  .order-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    border-radius: 20px;
  }
  .order-tab {
    flex: none;
    min-height: 40px;
    padding: 9px 8px;
    border-radius: 15px;
  }
  .network label { font-size: 12.5px; padding: 10px 4px; }
  .network label .dot { width: 8px; height: 8px; }
}

@media (max-width: 760px) {
  .hero {
    padding: 20px 18px;
    border-radius: 24px;
    gap: 9px;
  }
  .hero__title { font-size: clamp(29px, 8vw, 36px); }
  .hero__sub { font-size: 13.5px; line-height: 1.5; }
  .hero__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hero__point {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    padding: 9px;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .hero__point::before { width: 20px; height: 20px; font-size: 8px; }

  .promo-card { padding: 16px; }
  .promo-card__title { font-size: 19px; }
  .promo-card__text { font-size: 13px; }

  .dash-head { padding: 20px 18px; border-radius: 24px; }
  .dash-head .view__title { font-size: 26px; }

  .bundle { padding: 13px; border-radius: 18px; }
  .bundle__size { font-size: 18px; }
  .bundle__cta { padding: 9px 10px; font-size: 12.5px; }
  .price-row__value { font-size: 12.5px; }
  .price-row--main .price-row__value { font-size: 19px; }
  .price-tag { font-size: 8px; }

  .panel { border-radius: 22px; }
  .card { padding: 26px 22px; border-radius: 26px; }
  .sitefoot { padding: 22px; border-radius: 22px; }
  .sitebar .sidebar__name { font-size: 18px; }
  .sitebar__inner { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 560px) {
  .kpi { border-radius: 18px; }
  .kpi__value { font-size: 20px; }
  .card { padding: 24px 20px; }
  .card h1 { font-size: 27px; }
  .btn { min-height: 44px; }
  .btn--small { min-height: 38px; }
}

@media (max-width: 480px) {
  /* On a phone the shop's bar is two rows: brand, then links. The theme button
     moves up beside the brand so it stops being stranded on a third row of its
     own, and the links get the full width. */
  .sitebar__inner { position: relative; }
  .sitebar .theme-host {
    position: absolute;
    top: 10px;
    right: 16px;
  }
  .sitebar .theme-toggle { width: 36px; height: 36px; }

  /* Keep the links and the one action on a single row at 390px. Four separate
     rows in a sticky header is a lot of the first screen spent on navigation. */
  .sitebar__nav { width: 100%; gap: 8px 10px; }
  .sitebar__link { font-size: 12.5px; }
  .sitebar .btn--small { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 380px) {
  .network-card { border-radius: 16px; }
  .bundle { padding: 11px; }
  .hero__point { font-size: 10.5px; }

  /* At 360px the four header items need six fewer pixels of gap and one fewer
     point of type to stay on one line. */
  .sitebar__nav { gap: 6px; }
  .sitebar__link { font-size: 12px; }
  .sitebar .btn--small { padding: 8px 10px; font-size: 11.5px; }
  .verify-shortcuts .btn { font-size: 12px; }
}

/* --------------------------------------------------------------- dark mode */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071613;
    --surface: #0D211C;
    --surface-2: #122B25;
    --surface-3: #17362E;
    --text: #ECF7F3;
    --muted: #A3BFB7;
    --border: #1E3B34;
    --border-strong: #2C5148;

    --accent: #5FE3B6;
    --accent-strong: #0E7264;
    --accent-deep: #0A5A4F;
    --accent-text: #FFFFFF;
    --accent-ink: #8FF0D3;
    --accent-soft: #123A32;

    --mint: #5FE3B6;
    --mint-ink: #8FF0D3;
    --mint-soft: #123A32;
    --mint-line: #1C4A3E;

    --lm-forest: #071613;
    --lm-forest-2: #0D211C;
    --lm-paper: #071613;
    --lm-paper-2: #122B25;
    --lm-line: #1E3B34;
    --lm-line-strong: #2C5148;
    --lm-teal-soft: #123A32;
    --lm-teal-line: #1C4A3E;
    --lm-muted: #A3BFB7;
    --lm-teal-ink: #8FF0D3;
    --lm-clay: #F0B97A;
    --lm-clay-soft: #3A2A14;

    --ok: #6FE7B5;
    --ok-soft: #103026;
    --warn: #F0B97A;
    --warn-soft: #33240F;
    --danger: #FF9387;
    --danger-soft: #351A18;

    --focus: #8FF0D3;
    --overlay: rgba(0, 0, 0, .66);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 26px 54px -34px rgba(0, 0, 0, .8), 0 3px 10px rgba(0, 0, 0, .4);
    --dash-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 32px -30px rgba(0, 0, 0, .75);

    --chart-series: #6FE9C6;
    --chart-grid: #1E3B34;
    --chart-baseline: #2C5148;
    --chart-hit: rgba(111, 233, 198, .18);
  }
}

:root[data-theme="dark"] {
  --bg: #071613;
  --surface: #0D211C;
  --surface-2: #122B25;
  --surface-3: #17362E;
  --text: #ECF7F3;
  --muted: #A3BFB7;
  --border: #1E3B34;
  --border-strong: #2C5148;

  --accent: #5FE3B6;
  --accent-strong: #0E7264;
  --accent-deep: #0A5A4F;
  --accent-text: #FFFFFF;
  --accent-ink: #8FF0D3;
  --accent-soft: #123A32;

  --mint: #5FE3B6;
  --mint-ink: #8FF0D3;
  --mint-soft: #123A32;
  --mint-line: #1C4A3E;

  --lm-forest: #071613;
  --lm-forest-2: #0D211C;
  --lm-paper: #071613;
  --lm-paper-2: #122B25;
  --lm-line: #1E3B34;
  --lm-line-strong: #2C5148;
  --lm-teal-soft: #123A32;
  --lm-teal-line: #1C4A3E;
  --lm-muted: #A3BFB7;
  --lm-teal-ink: #8FF0D3;
  --lm-clay: #F0B97A;
  --lm-clay-soft: #3A2A14;

  --ok: #6FE7B5;
  --ok-soft: #103026;
  --warn: #F0B97A;
  --warn-soft: #33240F;
  --danger: #FF9387;
  --danger-soft: #351A18;

  --focus: #8FF0D3;
  --overlay: rgba(0, 0, 0, .66);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 26px 54px -34px rgba(0, 0, 0, .8), 0 3px 10px rgba(0, 0, 0, .4);
  --dash-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 32px -30px rgba(0, 0, 0, .75);

  --chart-series: #6FE9C6;
  --chart-grid: #1E3B34;
  --chart-baseline: #2C5148;
  --chart-hit: rgba(111, 233, 198, .18);
}

/* Component corrections that cannot come from tokens alone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background-color: #0C2620;
    background-image:
      radial-gradient(rgba(111, 233, 198, .10) 1px, transparent 1.2px),
      radial-gradient(120% 150% at 100% 0%, rgba(95, 227, 182, .20) 0%, transparent 58%),
      linear-gradient(140deg, #0C2620 0%, #0A1F1A 100%);
    border-color: #1C4A3E;
  }
  :root:not([data-theme="light"]) .hero__title { color: #ECF7F3; }
  :root:not([data-theme="light"]) .hero__sub { color: #A9C8BE; }
  :root:not([data-theme="light"]) .hero .eyebrow { color: #8FF0D3; }
  :root:not([data-theme="light"]) .hero__point {
    color: #EAF8F2;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
  }
  :root:not([data-theme="light"]) .hero__point::before {
    background: var(--lm-mint);
    color: var(--lm-forest);
  }
  :root:not([data-theme="light"]) .dash-head {
    background:
      radial-gradient(120% 150% at 100% 0%, rgba(95, 227, 182, .24) 0%, transparent 54%),
      linear-gradient(135deg, #061511 0%, #0C2A23 60%, #123F35 100%);
  }
  :root:not([data-theme="light"]) .kpi--wallet {
    background: linear-gradient(150deg, #123A32 0%, #0F2E28 60%, #0D211C 100%);
    border-color: #1C4A3E;
  }
  :root:not([data-theme="light"]) .kpi--wallet .kpi__label,
  :root:not([data-theme="light"]) .kpi--wallet .kpi__note { color: #A3BFB7; }
  :root:not([data-theme="light"]) .kpi--wallet .kpi__value { color: #ECF7F3; }
  :root:not([data-theme="light"]) .kpi--wallet .kpi__link { color: #8FF0D3; }
  :root:not([data-theme="light"]) .kpi--wallet .kpi__icon {
    color: #8FF0D3;
    background: rgba(255, 255, 255, .07);
  }
  :root:not([data-theme="light"]) .dash-head .btn--buy {
    color: #071613;
    background: var(--lm-mint);
  }
  :root:not([data-theme="light"]) .dash-head .btn--buy:hover { background: var(--lm-mint-bright); }
  :root:not([data-theme="light"]) .dash-balance {
    color: #071613;
    background: var(--lm-mint);
  }
  :root:not([data-theme="light"]) .dash-balance:hover { background: var(--lm-mint-bright); }
  :root:not([data-theme="light"]) .dash-avatar {
    color: var(--lm-forest);
    background: linear-gradient(145deg, var(--lm-mint-bright), #2CC79C);
  }
  :root:not([data-theme="light"]) .nav__item[aria-current="page"] { color: #FFFFFF; }
  :root:not([data-theme="light"]) .sitefoot {
    background: #05110E;
    border: 1px solid #17362E;
  }
  :root:not([data-theme="light"]) .sidebar__mark,
  :root:not([data-theme="light"]) .dashbar__mark {
    box-shadow: 0 0 0 1px rgba(124, 242, 198, .2);
  }
  :root:not([data-theme="light"]) .price-tag--member { color: #FFFFFF; }
  :root:not([data-theme="light"]) .pill--admin { color: var(--lm-forest); background: var(--lm-mint); }
}

:root[data-theme="dark"] .hero {
  background-color: #0C2620;
  background-image:
    radial-gradient(rgba(111, 233, 198, .10) 1px, transparent 1.2px),
    radial-gradient(120% 150% at 100% 0%, rgba(95, 227, 182, .20) 0%, transparent 58%),
    linear-gradient(140deg, #0C2620 0%, #0A1F1A 100%);
  border-color: #1C4A3E;
}
:root[data-theme="dark"] .hero__title { color: #ECF7F3; }
:root[data-theme="dark"] .hero__sub { color: #A9C8BE; }
:root[data-theme="dark"] .hero .eyebrow { color: #8FF0D3; }
:root[data-theme="dark"] .hero__point {
  color: #EAF8F2;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] .hero__point::before {
  background: var(--lm-mint);
  color: var(--lm-forest);
}
:root[data-theme="dark"] .dash-head {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(95, 227, 182, .24) 0%, transparent 54%),
    linear-gradient(135deg, #061511 0%, #0C2A23 60%, #123F35 100%);
}
:root[data-theme="dark"] .kpi--wallet {
  background: linear-gradient(150deg, #123A32 0%, #0F2E28 60%, #0D211C 100%);
  border-color: #1C4A3E;
}
:root[data-theme="dark"] .kpi--wallet .kpi__label,
:root[data-theme="dark"] .kpi--wallet .kpi__note { color: #A3BFB7; }
:root[data-theme="dark"] .kpi--wallet .kpi__value { color: #ECF7F3; }
:root[data-theme="dark"] .kpi--wallet .kpi__link { color: #8FF0D3; }
:root[data-theme="dark"] .kpi--wallet .kpi__icon {
  color: #8FF0D3;
  background: rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .dash-head .btn--buy {
  color: #071613;
  background: var(--lm-mint);
}
:root[data-theme="dark"] .dash-head .btn--buy:hover { background: var(--lm-mint-bright); }
:root[data-theme="dark"] .dash-balance {
  color: #071613;
  background: var(--lm-mint);
}
:root[data-theme="dark"] .dash-balance:hover { background: var(--lm-mint-bright); }
:root[data-theme="dark"] .dash-avatar {
  color: var(--lm-forest);
  background: linear-gradient(145deg, var(--lm-mint-bright), #2CC79C);
}
:root[data-theme="dark"] .nav__item[aria-current="page"] { color: #FFFFFF; }
:root[data-theme="dark"] .sitefoot {
  background: #05110E;
  border: 1px solid #17362E;
}
:root[data-theme="dark"] .sidebar__mark,
:root[data-theme="dark"] .dashbar__mark {
  box-shadow: 0 0 0 1px rgba(124, 242, 198, .2);
}
:root[data-theme="dark"] .price-tag--member { color: #FFFFFF; }
:root[data-theme="dark"] .pill--admin { color: var(--lm-forest); background: var(--lm-mint); }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bundle,
  .network-card,
  .btn,
  .dash-avatar,
  .dash-balance { transition: none; }
  .bundle:hover,
  .network-card:hover { transform: none; }
}