/* ============================================================================
   Miner Download UI kit — tokens and components ported from Untitled UI
   (FREE Figma UI kit v2.0):
   https://www.figma.com/design/IfL5VS5TMuzWvImVkYmnh8

   Loaded before site.css; site.css builds the pages on top of it. Live preview
   of every component: /kit/ — local dev only, the production build skips it.

   Mapping from Figma:
     Color styles      → --u-gray-* (Neutral), --u-brand-* (Miner Download blue
                         on Untitled's 25…950 steps), --u-error/warning/success.
     Text styles       → Display 2xl…xs and Text xl…xs (--u-fs-*, --u-lh-*),
                         family Inter.
     Effect styles     → --u-shadow-xs…3xl, focus rings (4px brand-100/gray-100).
     Components        → Button (Primary / Secondary gray / Secondary color /
                         Tertiary gray / Link), Input field, Badge (pill, color
                         50/200/700), Table, Featured icon, Dropdown panel.
   The --k-* names below are what site.css and the templates use; they are
   aliases of the Untitled values. The dark theme is derived from the same
   roles (Untitled FREE has light only).
   ========================================================================== */

/* === PRIMITIVES (Untitled color styles) ================================== */
:root {
  --u-white: #ffffff;
  --u-black: #000000;
  --u-gray-25: #fcfcfc;
  --u-gray-50: #fafafa;
  --u-gray-100: #f5f5f5;
  --u-gray-200: #e5e5e5;
  --u-gray-300: #d4d4d4;
  --u-gray-400: #a3a3a3;
  --u-gray-500: #737373;
  --u-gray-600: #525252;
  --u-gray-700: #404040;
  --u-gray-800: #262626;
  --u-gray-900: #171717;
  --u-gray-950: #0a0a0a;
  /* Brand: Miner Download blue on Untitled's steps (Untitled ships violet). */
  --u-brand-25: #f5f8ff;
  --u-brand-50: #eff4ff;
  --u-brand-100: #dbe6fe;
  --u-brand-200: #bfd3fe;
  --u-brand-300: #93b4fd;
  --u-brand-400: #5f8dff;
  --u-brand-500: #3a76ff;
  --u-brand-600: #1d61fe;
  --u-brand-700: #154fd9;
  --u-brand-800: #163fae;
  --u-brand-900: #183a8a;
  --u-brand-950: #13254f;
  --u-error-50: #fef2f2;  --u-error-200: #fecaca;  --u-error-300: #fca5a5;  --u-error-500: #ef4444;  --u-error-600: #dc2626;  --u-error-700: #b91c1c;
  --u-warning-50: #fefce8; --u-warning-200: #fef08a; --u-warning-500: #eab308; --u-warning-700: #a16207;
  --u-success-50: #f0fdf4; --u-success-200: #bbf7d0; --u-success-500: #22c55e; --u-success-600: #16a34a; --u-success-700: #15803d;
  --u-sky-50: #f0f9ff; --u-sky-200: #bae6fd; --u-sky-700: #0369a1;
  --u-orange-50: #fff7ed; --u-orange-200: #fed7aa; --u-orange-700: #c2410c;
  --u-purple-50: #faf5ff; --u-purple-200: #e9d5ff; --u-purple-700: #7e22ce;

  /* Effect styles */
  --u-shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  --u-shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.1), 0 1px 2px 0 rgba(10, 13, 18, 0.06);
  --u-shadow-md: 0 4px 8px -2px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
  --u-shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
  --u-shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);
  --u-shadow-2xl: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
  --u-shadow-3xl: 0 32px 64px -12px rgba(10, 13, 18, 0.14);
  --u-ring-brand: 0 0 0 4px var(--u-brand-100);
  --u-ring-gray: 0 0 0 4px var(--u-gray-100);
  --u-ring-error: 0 0 0 4px #fee2e2;

  /* Text styles — Display 2xl…xs, Text xl…xs */
  --u-font: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --u-fs-d2xl: 72px; --u-lh-d2xl: 90px;
  --u-fs-dxl: 60px;  --u-lh-dxl: 72px;
  --u-fs-dlg: 48px;  --u-lh-dlg: 60px;
  --u-fs-dmd: 36px;  --u-lh-dmd: 44px;
  --u-fs-dsm: 30px;  --u-lh-dsm: 38px;
  --u-fs-dxs: 24px;  --u-lh-dxs: 32px;
  --u-fs-txl: 20px;  --u-lh-txl: 30px;
  --u-fs-tlg: 18px;  --u-lh-tlg: 28px;
  --u-fs-tmd: 16px;  --u-lh-tmd: 24px;
  --u-fs-tsm: 14px;  --u-lh-tsm: 20px;
  --u-fs-txs: 12px;  --u-lh-txs: 18px;
  --u-ls-display: -0.05em;
}

/* === SEMANTIC TOKENS (light) — the --k-* names site.css uses ============== */
:root {
  /* Brand scale */
  --k-brand-50: var(--u-brand-50);
  --k-brand-100: var(--u-brand-100);
  --k-brand-200: var(--u-brand-200);
  --k-brand-300: var(--u-brand-300);
  --k-brand-400: var(--u-brand-400);
  --k-brand-500: var(--u-brand-600);
  --k-brand-600: var(--u-brand-700);
  --k-brand-700: var(--u-brand-800);
  --k-brand-800: var(--u-brand-900);
  --k-brand-900: var(--u-brand-950);

  /* Surfaces: bg-primary / secondary / tertiary … */
  --k-surface-s0: var(--u-white);
  --k-surface-s1: var(--u-gray-50);
  --k-surface-s2: var(--u-gray-100);
  --k-surface-s3: var(--u-gray-200);
  --k-surface-s4: var(--u-gray-300);
  --k-surface-s5: var(--u-gray-400);
  --k-surface-raised: var(--u-white);
  /* Airy look: a pale blue canvas, a white sheet on it, soft blue-grey cards
     and controls on the sheet. */
  /* Bento look: a grey canvas, pure white cards straight on it, neutral
     soft fills inside the cards (chips, code and quote tiles), pastel accent
     fills and black as the strong accent. */
  --k-surface-canvas: #e6e6e9;
  --k-surface-sheet: #ffffff;
  --k-surface-card: #ffffff;
  --k-surface-soft: #f0f0f2;
  --k-surface-soft-hover: #e6e6ea;
  --k-surface-tile: #f0f0f2;
  --k-pastel-lilac: #dcd8f0;
  --k-pastel-sage: #dfe3cc;
  --k-pastel-peach: #f2c9a6;
  --k-pastel-lime: #e6ec8f;
  --k-pastel-slate: #cfd0da;
  --k-ink: #111111;
  --k-accent-link: #5b5bd6;
  /* Blue gradient surfaces (feature card, CTA, footer) */
  --k-grad-blue: radial-gradient(70% 90% at 12% 10%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(150, 196, 255, 0.55), rgba(150, 196, 255, 0) 60%),
    linear-gradient(135deg, #7fb0ff 0%, #4b8bf5 45%, #3a78ee 100%);
  --k-grad-btn: linear-gradient(180deg, #4f8dff 0%, #1d61fe 100%);
  --k-grad-btn-hover: linear-gradient(180deg, #3f7ff8 0%, #154fd9 100%);
  --k-surface-inverse: var(--u-gray-900);
  --k-hover-overlay-inverse: var(--u-gray-50);

  /* Text */
  --k-text-high: var(--u-gray-900);
  --k-text-med: var(--u-gray-600);
  --k-text-low: var(--u-gray-500);
  --k-text-base: var(--u-gray-400);
  --k-text-on-primary: var(--u-white);
  --k-text-on-neutral: var(--u-white);
  --k-text-primary-high: var(--u-brand-700);
  --k-text-primary-med: var(--u-brand-600);

  /* Borders */
  --k-outline-high: var(--u-gray-300);
  --k-outline-med: var(--u-gray-200);
  --k-outline-low: var(--u-gray-100);

  /* Primary & status */
  --k-primary-med: var(--u-brand-600);
  --k-primary-high: var(--u-brand-700);
  --k-primary-base-alpha: var(--u-brand-50);
  --k-success-med: var(--u-success-500);

  /* Elevation (Untitled shadows) and focus */
  --k-e1: var(--u-shadow-xs);
  --k-e2: var(--u-shadow-sm);
  --k-e3: var(--u-shadow-md);
  --k-e4: var(--u-shadow-lg);
  --k-e5: var(--u-shadow-xl);
  --k-e6: var(--u-shadow-2xl);
  --k-focus-primary: var(--u-ring-brand);

  /* Radius — Untitled: 6 (xs), 8 (controls), 10, 12 (cards), 16 (sections) */
  --k-rc-xs: 6px;
  --k-rc-sm: 8px;
  --k-rc-md: 8px;
  --k-rc-lg: 10px;
  --k-rc-xl: 12px;
  --k-rb-xs: 20px;
  --k-rb-sm: 28px;
  --k-rb-md: 32px;
  --k-rb-lg: 40px;
  --k-r-round: 9999px;

  /* Spacing (Untitled 4px grid) */
  --k-sp-xxs: 2px;
  --k-sp-xs: 4px;
  --k-sp-sm: 6px;
  --k-sp-md: 8px;
  --k-sp-lg: 10px;
  --k-sp-xl: 12px;
  --k-sp-2xl: 14px;
  --k-sp-3xl: 16px;
  --k-sp-5xl: 20px;
  --k-sp-7xl: 24px;
  --k-sp-10xl: 32px;
  --k-sp-12xl: 40px;
  --k-sp-14xl: 48px;
  --k-sp-18xl: 64px;
  --k-sp-20xl: 80px;
  --k-sp-24xl: 96px;

  /* Type — the old kit names on Untitled's Text styles */
  --k-font: var(--u-font);
  --k-fw-normal: 400;
  --k-fw-medium: 500;
  --k-fw-semibold: 600;
  --k-fw-bold: 700;
  --k-fs-title2: var(--u-fs-tlg); --k-lh-title2: var(--u-lh-tlg);
  --k-fs-body2: var(--u-fs-tmd);  --k-lh-body2: var(--u-lh-tmd);
  --k-fs-body1: var(--u-fs-tsm);  --k-lh-body1: var(--u-lh-tsm);
  --k-fs-para: var(--u-fs-tsm);   --k-lh-para: var(--u-lh-tsm);
  --k-fs-caption2: var(--u-fs-txs); --k-lh-caption2: var(--u-lh-txs);
}

html:lang(zh-hans) {
  --u-font: "Google Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
}

/* Mobile type ramp: Display steps down one size. */
@media (max-width: 767px) {
  :root {
    --u-fs-d2xl: 48px; --u-lh-d2xl: 60px;
    --u-fs-dxl: 40px;  --u-lh-dxl: 48px;
    --u-fs-dlg: 36px;  --u-lh-dlg: 44px;
    --u-fs-dmd: 30px;  --u-lh-dmd: 38px;
    --u-fs-dsm: 24px;  --u-lh-dsm: 32px;
  }
}

/* === SEMANTIC TOKENS (dark, derived) ====================================== */
[data-theme="dark"] {
  --k-surface-s0: #0c0e12;
  --k-surface-s1: #13161b;
  --k-surface-s2: #1a1d23;
  --k-surface-s3: #22262f;
  --k-surface-s4: #373a41;
  --k-surface-s5: #61656c;
  --k-surface-raised: #13161b;
  --k-surface-canvas: #101012;
  --k-surface-sheet: #1a1a1d;
  --k-surface-card: #1a1a1d;
  --k-surface-soft: #242428;
  --k-surface-soft-hover: #2d2d32;
  --k-surface-tile: #242428;
  --k-pastel-lilac: #3a3654;
  --k-pastel-sage: #3a3f2c;
  --k-pastel-peach: #5a3e2a;
  --k-pastel-lime: #4b5220;
  --k-pastel-slate: #2c2d36;
  --k-ink: #f4f4f2;
  --k-accent-link: #a9a9ff;
  --k-grad-blue: radial-gradient(70% 90% at 12% 10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #2c5fc4 0%, #1f4aa8 50%, #1a3d8c 100%);
  --k-surface-inverse: #f7f7f7;
  --k-hover-overlay-inverse: #1a1d23;

  --k-text-high: #f7f7f7;
  --k-text-med: #cecfd2;
  --k-text-low: #94979c;
  --k-text-base: #61656c;
  --k-text-on-neutral: #0c0e12;
  --k-text-primary-high: #93b4fd;
  --k-text-primary-med: #5f8dff;

  --k-outline-high: #373a41;
  --k-outline-med: #22262f;
  --k-outline-low: #1a1d23;

  --k-primary-base-alpha: rgba(29, 97, 254, 0.14);
  --u-ring-brand: 0 0 0 4px rgba(29, 97, 254, 0.35);
  --u-ring-gray: 0 0 0 4px rgba(255, 255, 255, 0.08);
  --u-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --u-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --u-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --u-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --u-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.5), 0 8px 8px -4px rgba(0, 0, 0, 0.3);

  /* Badge colors on dark: tinted fill, lighter text */
  --u-gray-badge-bg: #1a1d23; --u-gray-badge-bd: #373a41; --u-gray-badge-tx: #cecfd2;
}

/* === TYPOGRAPHY utilities (Untitled text styles) ========================== */
.k-display-xl, .k-display-lg, .k-display-md, .k-display-sm, .k-display-xs,
.k-h5, .k-h4, .k-h3, .k-h2, .k-h1 {
  margin: 0;
  color: var(--k-text-high);
  font-family: var(--k-font);
  font-weight: var(--k-fw-medium);
  letter-spacing: -0.02em;
}
.k-display-xl { font-size: var(--u-fs-dxl); line-height: var(--u-lh-dxl); letter-spacing: var(--u-ls-display); }
.k-display-lg { font-size: var(--u-fs-dlg); line-height: var(--u-lh-dlg); letter-spacing: var(--u-ls-display); }
.k-display-md, .k-h5 { font-size: var(--u-fs-dmd); line-height: var(--u-lh-dmd); letter-spacing: var(--u-ls-display); }
.k-display-sm, .k-h4 { font-size: var(--u-fs-dsm); line-height: var(--u-lh-dsm); }
.k-display-xs, .k-h3 { font-size: var(--u-fs-dxs); line-height: var(--u-lh-dxs); }
.k-h2 { font-size: var(--u-fs-txl); line-height: var(--u-lh-txl); }
.k-h1 { font-size: var(--u-fs-tlg); line-height: var(--u-lh-tlg); }
.k-text-xl { font-size: var(--u-fs-txl); line-height: var(--u-lh-txl); }
.k-text-lg, .k-title2 { font-size: var(--u-fs-tlg); line-height: var(--u-lh-tlg); }
.k-text-md, .k-body2, .k-title1 { font-size: var(--u-fs-tmd); line-height: var(--u-lh-tmd); }
.k-text-sm, .k-body1, .k-para { font-size: var(--u-fs-tsm); line-height: var(--u-lh-tsm); }
.k-text-xs, .k-caption2, .k-caption1 { font-size: var(--u-fs-txs); line-height: var(--u-lh-txs); }
.k-title2, .k-title1 { font-weight: var(--k-fw-semibold); }
.k-overline {
  font-size: var(--u-fs-tsm);
  line-height: var(--u-lh-tsm);
  font-weight: var(--k-fw-semibold);
  color: var(--k-text-primary-high);
}
.k-text-med { color: var(--k-text-med); }
.k-text-low { color: var(--k-text-low); }

/* === BUTTON (Buttons/Button: Size × Hierarchy × State) ===================== */
.k-btn {
  --b-bg: var(--k-surface-soft);
  --b-bd: transparent;
  --b-tx: var(--k-text-high);
  --b-bg-h: var(--k-surface-soft-hover);
  --b-tx-h: var(--k-text-high);
  --b-sh: none;
  --b-ring: var(--u-ring-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-sp-sm);
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--b-bd);
  border-radius: var(--k-r-round);
  background: var(--b-bg);
  box-shadow: var(--b-sh);
  color: var(--b-tx);
  font-family: var(--k-font);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-medium);
  line-height: var(--u-lh-tsm);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.k-btn:hover { background: var(--b-bg-h); color: var(--b-tx-h); }
.k-btn:focus-visible { outline: none; box-shadow: var(--b-sh), var(--b-ring); }
.k-btn:disabled, .k-btn.is-disabled {
  border-color: var(--k-outline-med);
  background: var(--k-surface-s1);
  box-shadow: none;
  color: var(--k-text-base);
  cursor: default;
  pointer-events: none;
}
.k-btn svg, .k-btn img { flex: none; width: 20px; height: 20px; }

/* Hierarchy. Secondary gray is the default above. */
/* Primary is black (the reference's strong accent); the brand blue stays for
   download buttons on miner pages via their own classes. */
.k-btn--primary {
  --b-bg: var(--k-ink);
  --b-bd: transparent;
  --b-tx: var(--k-surface-sheet);
  --b-bg-h: #2b2b2b;
  --b-tx-h: var(--k-surface-sheet);
  --b-sh: none;
  --b-ring: var(--u-ring-gray);
}
[data-theme="dark"] .k-btn--primary { --b-bg-h: #d9d9d6; }
/* Outlined pill (the reference's "US hours" chips). */
.k-btn--outline {
  --b-bg: transparent;
  --b-bd: var(--k-ink);
  --b-tx: var(--k-ink);
  --b-bg-h: rgba(0, 0, 0, 0.05);
  --b-tx-h: var(--k-ink);
  border-width: 1.5px;
}
/* White pill for blue gradient surfaces. */
.k-btn--on-blue {
  --b-bg: var(--u-white);
  --b-tx: var(--u-brand-700);
  --b-bg-h: #eef4ff;
  --b-tx-h: var(--u-brand-800);
  --b-sh: 0 8px 20px -10px rgba(10, 40, 120, 0.45);
}
.k-btn--neutral {
  --b-bg: var(--k-surface-inverse);
  --b-bd: var(--k-surface-inverse);
  --b-tx: var(--k-text-on-neutral);
  --b-bg-h: var(--k-text-med);
  --b-tx-h: var(--k-text-on-neutral);
}
.k-btn--secondary { /* Secondary gray — the defaults */ }
.k-btn--primary-light { /* Secondary color */
  --b-bg: var(--u-brand-50);
  --b-bd: transparent;
  --b-tx: var(--u-brand-700);
  --b-bg-h: var(--u-brand-100);
  --b-tx-h: var(--u-brand-800);
  --b-ring: var(--u-ring-brand);
}
.k-btn--tertiary, .k-btn--flat { /* Tertiary gray */
  --b-bg: transparent;
  --b-bd: transparent;
  --b-tx: var(--k-text-med);
  --b-sh: none;
  --b-bg-h: var(--k-surface-soft);
}
.k-btn--quaternary { /* Link gray */
  --b-bg: transparent;
  --b-bd: transparent;
  --b-sh: none;
  --b-bg-h: transparent;
  height: auto !important;
  padding: 0 !important;
}
[data-theme="dark"] .k-btn--primary-light {
  --b-bg: var(--k-primary-base-alpha);
  --b-bd: rgba(29, 97, 254, 0.4);
  --b-tx: var(--k-text-primary-high);
  --b-bg-h: rgba(29, 97, 254, 0.22);
  --b-tx-h: var(--u-white);
}

/* Sizes: sm 36 · md 40 · lg 44 · xl 48 (Untitled); xs 32 is ours. */
.k-btn--xs { height: 32px; padding: 0 10px; font-size: var(--u-fs-txs); gap: var(--k-sp-xs); }
.k-btn--xs svg, .k-btn--xs img { width: 16px; height: 16px; }
.k-btn--sm { height: 36px; padding: 0 12px; }
.k-btn--sm svg, .k-btn--sm img { width: 18px; height: 18px; }
.k-btn--lg { height: 44px; padding: 0 16px; font-size: var(--u-fs-tmd); line-height: var(--u-lh-tmd); }
.k-btn--xl { height: 48px; padding: 0 18px; font-size: var(--u-fs-tmd); line-height: var(--u-lh-tmd); }
.k-btn--icon { padding: 0; aspect-ratio: 1; }

/* === BADGE (Badge: Size × Color) ========================================== */
.k-tag {
  --t-bg: var(--k-surface-soft);
  --t-bd: transparent;
  --t-tx: var(--k-text-med);
  display: inline-flex;
  align-items: center;
  gap: var(--k-sp-xs);
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--t-bd);
  border-radius: var(--k-r-round);
  background: var(--t-bg);
  color: var(--t-tx);
  font-family: var(--k-font);
  font-size: var(--u-fs-txs);
  font-weight: var(--k-fw-medium);
  line-height: var(--u-lh-txs);
  white-space: nowrap;
  text-decoration: none;
}
.k-tag img, .k-tag svg { flex: none; width: 12px; height: 12px; }
.k-tag--xs { height: 20px; padding: 0 6px; }
.k-tag--md { height: 24px; padding: 0 10px; font-size: var(--u-fs-tsm); line-height: var(--u-lh-tsm); }
.k-tag--lg { height: 28px; padding: 0 12px; font-size: var(--u-fs-tsm); line-height: var(--u-lh-tsm); }
.k-tag--primary-light, .k-tag--brand { --t-bg: var(--k-pastel-lilac); --t-bd: transparent; --t-tx: var(--k-ink); }
.k-tag--primary { --t-bg: var(--u-brand-600); --t-bd: var(--u-brand-600); --t-tx: var(--u-white); }
.k-tag--success { --t-bg: var(--u-success-50); --t-bd: var(--u-success-200); --t-tx: var(--u-success-700); }
.k-tag--warning { --t-bg: var(--u-warning-50); --t-bd: var(--u-warning-200); --t-tx: var(--u-warning-700); }
.k-tag--danger, .k-tag--error { --t-bg: var(--u-error-50); --t-bd: var(--u-error-200); --t-tx: var(--u-error-700); }
.k-tag--info, .k-tag--sky { --t-bg: var(--u-sky-50); --t-bd: var(--u-sky-200); --t-tx: var(--u-sky-700); }
.k-tag--orange { --t-bg: var(--u-orange-50); --t-bd: var(--u-orange-200); --t-tx: var(--u-orange-700); }
.k-tag--purple { --t-bg: var(--u-purple-50); --t-bd: var(--u-purple-200); --t-tx: var(--u-purple-700); }
.k-tag--tertiary, .k-tag--secondary { /* Gray — the default */ }
.k-tag--neutral { --t-bg: var(--k-surface-inverse); --t-bd: var(--k-surface-inverse); --t-tx: var(--k-text-on-neutral); }
a.k-tag:hover { --t-bg: var(--k-pastel-lilac); --t-bd: transparent; --t-tx: var(--k-ink); }
[data-theme="dark"] .k-tag { --t-bg: var(--k-surface-soft); --t-bd: transparent; --t-tx: #cfd6e4; }
[data-theme="dark"] .k-tag--primary-light,
[data-theme="dark"] .k-tag--brand,
[data-theme="dark"] a.k-tag:hover { --t-bg: var(--k-pastel-lilac); --t-bd: transparent; --t-tx: var(--k-ink); }
[data-theme="dark"] .k-tag--success { --t-bg: rgba(34, 197, 94, 0.12); --t-bd: rgba(34, 197, 94, 0.35); --t-tx: #4ade80; }
[data-theme="dark"] .k-tag--warning { --t-bg: rgba(234, 179, 8, 0.12); --t-bd: rgba(234, 179, 8, 0.35); --t-tx: #facc15; }
[data-theme="dark"] .k-tag--danger { --t-bg: rgba(239, 68, 68, 0.12); --t-bd: rgba(239, 68, 68, 0.35); --t-tx: #f87171; }

/* === INPUT (Input field) ================================================== */
.k-input {
  display: flex;
  align-items: center;
  gap: var(--k-sp-md);
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--k-r-round);
  background: var(--k-surface-soft);
  color: var(--k-text-low);
  font-family: var(--k-font);
  font-size: var(--u-fs-tmd);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.k-input:focus-within {
  border-color: var(--u-brand-300);
  background: var(--k-surface-sheet);
  box-shadow: var(--u-ring-brand);
}
.k-input.is-error { border-color: var(--u-error-300); }
.k-input.is-error:focus-within { box-shadow: var(--u-shadow-xs), var(--u-ring-error); }
.k-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--k-text-high);
  font: inherit;
}
.k-input input::placeholder { color: var(--k-text-low); }
.k-input svg { flex: none; width: 20px; height: 20px; color: var(--k-text-low); }
.k-input--sm { height: 40px; padding: 0 12px; font-size: var(--u-fs-tsm); }
.k-input--sm svg { width: 18px; height: 18px; }
.k-input--lg { height: 48px; padding: 0 16px; }

/* === NAV ITEM (application navigation item) =============================== */
.k-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--k-sp-md);
  height: 40px;
  padding: 0 16px;
  border-radius: var(--k-r-round);
  color: var(--k-text-med);
  font-family: var(--k-font);
  font-size: var(--u-fs-tmd);
  font-weight: var(--k-fw-medium);
  line-height: var(--u-lh-tmd);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.k-nav-item:hover { background: var(--k-surface-soft); color: var(--k-text-high); }
.k-nav-item.is-current { background: var(--k-ink); color: var(--k-surface-sheet); }
.k-nav-item--sm { height: 36px; padding: 0 10px; font-size: var(--u-fs-tsm); line-height: var(--u-lh-tsm); }

/* === FEATURED ICON (light, with ring) ===================================== */
.k-ficon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--k-outline-med);
  border-radius: var(--k-rc-md);
  background: var(--k-surface-card);
  box-shadow: var(--u-shadow-xs);
  color: var(--k-text-med);
}
.k-ficon img, .k-ficon svg { width: 20px; height: 20px; margin: 0; }
.k-ficon--lg { width: 48px; height: 48px; border-radius: var(--k-rc-lg); }
.k-ficon--lg img, .k-ficon--lg svg { width: 24px; height: 24px; }
.k-ficon--primary {
  border: 0;
  border-radius: 50%;
  background: var(--u-brand-100);
  box-shadow: 0 0 0 6px var(--u-brand-50);
  color: var(--u-brand-600);
}
[data-theme="dark"] .k-ficon--primary { background: rgba(29, 97, 254, 0.2); box-shadow: 0 0 0 6px rgba(29, 97, 254, 0.08); color: #93b4fd; }

/* === BUTTON GROUP (segmented) ============================================= */
.k-seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--k-outline-high);
  border-radius: var(--k-rc-md);
  box-shadow: var(--u-shadow-xs);
}
.k-seg button {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--k-outline-high);
  background: var(--k-surface-card);
  color: var(--k-text-med);
  font: var(--k-fw-semibold) var(--u-fs-tsm) / var(--u-lh-tsm) var(--k-font);
  cursor: pointer;
}
.k-seg button:first-child { border-left: 0; }
.k-seg button:hover,
.k-seg button[aria-pressed="true"] { background: var(--k-surface-s1); color: var(--k-text-high); }
.k-seg svg { width: 20px; height: 20px; }

/* === CARD / PANEL / TABLE ================================================= */
.k-card {
  border-radius: 28px;
  background: var(--k-surface-card);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
a.k-card { color: inherit; text-decoration: none; }
.k-panel {
  border: 1px solid var(--k-outline-low);
  border-radius: var(--k-rb-xs);
  background: var(--k-surface-card);
  box-shadow: var(--u-shadow-lg);
}
.k-sheet {
  border: 1px solid var(--k-outline-med);
  border-radius: var(--k-rb-sm);
  background: var(--k-surface-card);
  box-shadow: var(--u-shadow-sm);
}
/* Table — a card whose header row is gray and whose rows are split by
   hairlines (Untitled "Table"). Use .k-table-head / .k-table-row on any grid. */
/* Table — a soft card with the rows on a white inner tile. */
.k-table {
  border-radius: var(--k-rb-md);
  background: var(--k-surface-card);
}
.k-table-head {
  background: transparent;
  color: var(--k-text-low);
  font-size: var(--u-fs-txs);
  font-weight: var(--k-fw-medium);
  line-height: var(--u-lh-txs);
}
.k-table-row + .k-table-row { border-top: 1px solid var(--k-outline-med); }
.k-divider { height: 1px; border: 0; background: var(--k-outline-med); }

/* === BENTO (the miner.download UI on top of the kit) ====================== */
/* Shared by the home, coin, hardware and miner pages; shown on /kit/. Light
   cards on the grey canvas, pastel hero, outlined pills, ink accents. */
/* --- Hero card ---------------------------------------------------------------- */
/* Bento card: a status line and the Kryptex Pool pill on top; the two-tone
   heading and the lead share the bottom edge. */
.k-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-height: 310px;
  padding: 28px 40px 40px;
  border-radius: 28px;
  background: var(--k-pastel-slate);
  color: var(--k-ink);
}
/* Outline pattern of mining glyphs (Nucleo, Development/ui-icons: pickaxe,
   block, coins, hash nodes, fan, rig…) tiled over the card's right side and
   fading out towards the text. The tile is a mask, so it takes the ink colour
   in both themes. */
.k-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--k-ink);
  opacity: 0.07;
  -webkit-mask: url("/images/hero-pattern.svg") 0 0 / 270px 270px repeat;
  mask: url("/images/hero-pattern.svg") 0 0 / 270px 270px repeat;
  pointer-events: none;
}
.k-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 0%, transparent 30%, var(--k-pastel-slate) 78%),
    linear-gradient(90deg, var(--k-pastel-slate) 0%, var(--k-pastel-slate) 30%, transparent 75%);
  pointer-events: none;
}
[data-theme="dark"] .k-hero::before { opacity: 0.1; }
@media (max-width: 599px) {
  .k-hero::before { opacity: 0.05; }
  [data-theme="dark"] .k-hero::before { opacity: 0.07; }
}
.k-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.k-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(17, 17, 17, 0.6);
  font-size: var(--u-fs-tsm);
}
.k-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--k-ink); }
/* Kryptex Pool row under the hero: copy left, arrow right, a full-width rule
   under it before the catalog. */
.k-rowlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 5px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  color: var(--k-ink);
  font-size: var(--u-fs-tsm);
  text-decoration: none;
}
[data-theme="dark"] .k-rowlink { border-bottom-color: rgba(255, 255, 255, 0.1); }
.k-rowlink-copy { color: var(--k-text-med); }
.k-rowlink-copy strong { color: var(--k-ink); font-weight: var(--k-fw-semibold); }
.k-rowlink-arrow { flex: none; width: 20px; height: 20px; transition: transform 0.2s ease; }
.k-rowlink:hover .k-rowlink-arrow { transform: translateX(4px); }
.k-rowlink:hover .k-rowlink-copy { color: var(--k-ink); }
.k-hero-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.k-hero-title {
  margin: 0;
  color: var(--k-ink);
  font-size: 60px;
  font-weight: var(--k-fw-medium);
  line-height: 1;
  letter-spacing: -0.045em;
}
.k-hero-muted { color: rgba(17, 17, 17, 0.42); }
.k-lead {
  flex: 0 1 500px;
  margin: 0;
  color: rgba(17, 17, 17, 0.62);
  font-size: 15px;
  line-height: 1.6;
}
[data-theme="dark"] .k-status { color: rgba(244, 244, 242, 0.6); }
[data-theme="dark"] .k-hero-muted { color: rgba(244, 244, 242, 0.45); }
[data-theme="dark"] .k-lead { color: rgba(244, 244, 242, 0.65); }

/* --- Section heading, outlined search and dropdowns ----------------------- */
.k-heading-row { display: flex; align-items: center; gap: var(--k-sp-md); }
/* Centre the count on the heading's letters, not its line box: the line box
   carries descender room the title doesn't use, which left the pill low. */
.k-heading-row .k-count { position: relative; top: -0.04em; }
.k-heading-row .k-heading { line-height: 1; }
.k-heading {
  margin: 0;
  color: var(--k-text-high);
  font-size: 30px;
  font-weight: var(--k-fw-medium);
  line-height: 1.15;
  letter-spacing: -0.035em;
  scroll-margin-top: 100px;
}
/* Search and dropdown toggles: transparent pills with a soft outline. */
.k-search.k-input,
.k-dd-toggle.k-btn {
  height: 40px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--k-ink);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-medium);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.k-search.k-input { width: 240px; padding: 0 12px 0 14px; gap: 8px; }
.k-search.k-input svg { width: 16px; height: 16px; color: var(--k-text-low); }
.k-search.k-input input { font-weight: var(--k-fw-normal); }
.k-search.k-input input::placeholder { color: var(--k-text-low); }
[data-theme="dark"] .k-search.k-input,
[data-theme="dark"] .k-dd-toggle.k-btn { border-color: rgba(255, 255, 255, 0.16); }
.k-search.k-input:hover,
.k-dd-toggle.k-btn:hover { border-color: rgba(17, 17, 17, 0.32); }
[data-theme="dark"] .k-search.k-input:hover,
[data-theme="dark"] .k-dd-toggle.k-btn:hover { border-color: rgba(255, 255, 255, 0.32); }
.k-search.k-input:focus-within { border-color: rgba(17, 17, 17, 0.4); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06); }
[data-theme="dark"] .k-search.k-input:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); }
.k-dd-toggle.k-btn { padding: 0 14px 0 18px; gap: 6px; }
.k-dd.is-open .k-dd-toggle.k-btn { border-color: var(--k-ink); background: var(--k-ink); color: var(--k-surface-sheet); }
.k-dd-toggle.k-btn .k-dd-chevron { width: 14px; height: 14px; color: currentColor; }
.k-search-clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--k-text-low);
  cursor: pointer;
}
.k-search-clear:hover { color: var(--k-text-high); background: var(--k-surface-soft-hover); }
.k-search-clear[hidden] { display: none; }
.k-search-clear svg { width: 16px; height: 16px; }

/* Search: "/" shortcut hint until the field has a value or focus. */
.k-kbd {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.4;
  color: var(--k-text-low);
  font: var(--k-fw-medium) 12px/1 var(--k-font);
}
.k-search:focus-within .k-kbd,
.k-search.has-value .k-kbd { display: none; }
.k-empty-clear { margin-top: 16px; }

/* Toolbar dropdowns — a secondary button opening a kit panel of links. */
.k-dd { position: relative; }
.k-dd-toggle .k-dd-chevron { width: 16px; height: 16px; color: var(--k-text-low); transition: transform 0.15s ease; }
.k-dd.is-open .k-dd-chevron { transform: rotate(180deg); }
.k-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 900;
  width: 260px;
  overflow: hidden;
  text-align: start;
}
.k-dd.is-open .k-dd-panel { display: block; }
.k-dd-search { padding: var(--k-sp-md); border-bottom: 1px solid var(--k-outline-med); }
.k-dd-list { max-height: 300px; overflow-y: auto; padding: var(--k-sp-xs); }
.k-dd-link { display: flex; height: 40px; padding: 0 10px; font-size: var(--u-fs-tsm); font-weight: var(--k-fw-medium); color: var(--k-text-high); }
.k-dd-link:focus-visible { background: var(--k-surface-s1); outline: none; }
.k-dd-link-icon { display: inline-flex; flex: none; justify-content: center; width: 16px; }
.k-dd-link-icon .vendor-icon { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.k-dd-link-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-dd-link-meta { margin-inline-start: auto; color: var(--k-text-low); font-size: var(--u-fs-txs); font-weight: var(--k-fw-normal); }
/* A row can be a <button> (sort options): reset it to look like the links;
   the check shows on the chosen one. */
button.k-dd-link { width: 100%; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; }
.k-dd-link { align-items: center; }
.k-dd-check { flex: none; width: 16px; height: 16px; margin-inline-start: auto; visibility: hidden; }
.k-dd-link[aria-checked="true"] .k-dd-check { visibility: visible; }
.k-dd-empty { padding: 12px 14px; color: var(--k-text-low); font-size: var(--u-fs-tsm); }
.k-dd-foot {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--k-outline-med);
  color: var(--k-text-high);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-medium);
  text-align: center;
  text-decoration: none;
}
.k-dd-foot:hover { background: var(--k-surface-soft); }

/* --- Miner card grid (partials/miner-card.njk) ----------------------------- */
/* White cards on a soft blue-lilac gradient panel: name + version top-left,
   the logo in a grey tile top-right, the blurb at the foot beside a round
   blue arrow, a hairline, then one row of grey tags. */
.k-mgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.k-mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 24px 24px 20px;
  border-radius: 28px;
  background: var(--k-surface-card);
  color: inherit;
  text-decoration: none;
}
.k-mcard:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }
.k-mcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.k-mcard-id { display: block; min-width: 0; }
/* Name with a right arrow (Nucleo arrow-right) that slides in on hover. */
.k-mcard-name {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: var(--k-text-high);
  font-size: 20px;
  font-weight: var(--k-fw-medium);
  line-height: 28px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-mcard-sub {
  display: block;
  margin-top: 2px;
  color: var(--k-text-low);
  font-size: 14px;
  line-height: 20px;
}
/* The grey square tile top-right — the reference's "…" button — holds the logo. */
.k-mcard-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k-mcard-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.k-mcard:hover .k-mcard-arrow,
.k-mcard:focus-visible .k-mcard-arrow { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .k-mcard-arrow { transition: none; transform: none; }
}
.k-mcard-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--k-pastel-lilac);
}
/* Tile colour comes from the logo itself (src/_data/logoTints.js). */
.k-mcard-mark { background: var(--tint, var(--k-surface-soft)); }
[data-theme="dark"] .k-mcard-mark { background: var(--tint-dark, var(--k-surface-soft)); }
.k-mcard-logo {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: contain;
}
.k-mcard-body {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.16);
}
[data-theme="dark"] .k-mcard-body { border-bottom-color: rgba(255, 255, 255, 0.12); }
.k-mcard-desc {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--k-text-high);
  font-size: 15px;
  line-height: 22px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* Always one row: two coins, "+N", then hardware as icon chips. */
.k-mcard-tags {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  padding-top: 16px;
}
.k-mcard-tagrow { display: contents; }
.k-mcard .k-chip { flex: none; }
.k-mcard .k-chip.k-chip-hw { width: 28px; padding: 0; justify-content: center; }
.k-mcard .k-chip-hw .vendor-icon,
.k-mcard .k-chip-hw svg { width: 16px; height: 16px; }
.k-more-narrow { display: none !important; }
/* 320px phones: a long ticker, "+N" and four hardware chips do not fit one
   row, so there the tags may wrap rather than lose a chip. */
@media (max-width: 359px) {
  .k-mcard { padding-left: 16px; padding-right: 16px; }
  .k-mcard-tags { flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 599px) {
  /* Phones: one coin, then the wider "+N". */
  .k-mcard .k-mcard-tagrow .k-chip:nth-child(2):not(.more):not(.k-chip-hw) { display: none; }
  .k-more-wide { display: none !important; }
  .k-more-narrow { display: inline-flex !important; }
}
.k-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.k-mcard .k-chip {
  --t-bg: var(--k-surface-soft);
  border-radius: var(--k-r-round) !important;
  --t-tx: var(--k-text-high);
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--k-fw-medium);
}
.k-chip .coin-icon-card,
.k-chip .vendor-icon { width: 14px; height: 14px; margin: 0; vertical-align: 0; }

/* Empty state (no miner matches the search) */
.k-empty { padding: 56px 20px; border-radius: var(--k-rb-md); background: var(--k-surface-card); text-align: center; }
.k-empty img { width: 44px; height: 44px; }
.k-empty-title { margin-top: 12px; color: var(--k-text-high); font-size: var(--u-fs-tmd); font-weight: var(--k-fw-semibold); }
.k-empty-sub { margin-top: 4px; color: var(--k-text-low); font-size: var(--u-fs-tsm); }
.k-empty-clear { margin-top: 16px; }

/* Press feedback on every kit button. */
.k-btn:active { transform: translateY(1px) scale(0.98); }

/* --- Bento breakpoints --- */
/* Three columns need ~400px cards to keep the tag row on one line. */
@media (max-width: 1359px) {
  .k-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .k-hero { gap: 32px; min-height: 0; padding: 20px 20px 24px; border-radius: 24px; }
  /* Scales down on narrow phones so "Каждый майнер —" stays on one line. */
  .k-hero-title { font-size: min(36px, 8.6vw); line-height: 1.05; }
  .k-rowlink { padding: 14px 5px; }
  .k-mgrid { grid-template-columns: minmax(0, 1fr); gap: var(--k-sp-xl); }
  .k-mcard { min-height: 0; padding: 22px 20px 18px; }
  .k-mcard-name { font-size: 18px; line-height: 26px; }
  .k-mcard-body { padding-top: 24px; }
  .k-mcard-desc { font-size: 14px; line-height: 21px; }
}

/* --- Page hero (inner pages) ------------------------------------------------ */
/* The home hero's card, shorter: breadcrumbs (and facts) on top, the title —
   optionally beside a logo tile — and the lead or actions along the bottom. */
.k-hero--page { min-height: 0; gap: 40px; padding: 24px 40px 36px; }
.k-hero--page .k-hero-title { font-size: 44px; line-height: 1.05; letter-spacing: -0.04em; }
.k-hero-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.k-hero-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--tint, rgba(255, 255, 255, 0.55));
}
[data-theme="dark"] .k-hero-mark { background: var(--tint-dark, rgba(255, 255, 255, 0.08)); }
.k-hero-mark img,
.k-hero-mark svg { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }

/* Breadcrumbs on a hero: muted ink, the current page in full ink. */
.k-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: rgba(17, 17, 17, 0.6);
  font-size: var(--u-fs-tsm);
  line-height: 20px;
}
.k-crumbs a { color: inherit; text-decoration: none; }
.k-crumbs a:hover { color: var(--k-ink); }
.k-crumbs [aria-current="page"] { color: var(--k-ink); font-weight: var(--k-fw-medium); }
.k-crumbs-sep { opacity: 0.55; }
[data-theme="dark"] .k-crumbs { color: rgba(244, 244, 242, 0.6); }

/* Facts: translucent pills on a hero ("Miners: 11", "Algorithm: pearlhash"). */
.k-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.k-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--k-r-round);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(17, 17, 17, 0.62);
  font-size: 13px;
  white-space: nowrap;
}
.k-fact strong,
.k-fact a { color: var(--k-ink); font-weight: var(--k-fw-medium); }
.k-fact a { text-decoration: none; }
.k-fact a:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .k-fact { background: rgba(255, 255, 255, 0.07); color: rgba(244, 244, 242, 0.62); }

/* Bento section: a white card for a block of content on the canvas. */
.k-bento { padding: 32px 40px; border-radius: 28px; background: var(--k-surface-card); }
.k-heading--sm { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }

@media (max-width: 599px) {
  .k-hero--page { gap: 28px; padding: 20px 20px 24px; }
  .k-hero--page .k-hero-title { font-size: min(30px, 8vw); line-height: 1.1; }
  .k-hero-id { gap: 14px; }
  .k-hero-mark { width: 48px; height: 48px; border-radius: 15px; }
  .k-hero-mark img, .k-hero-mark svg { width: 30px; height: 30px; }
  .k-bento { padding: 24px 20px; border-radius: 24px; }
  .k-heading--sm { font-size: 20px; }
}

/* --- Ink accents ------------------------------------------------------------ */
/* Ink black as the "active" state, after a kitchen order screen: a miner card
   turns black under the pointer like a highlighted order row, a section count
   is a black pill, a row link's label is set in capitals. */

/* Row link: the label in capitals. */
.k-rowlink-copy strong { font-family: var(--k-font); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }

/* Section count: a black pill, like the reference's ЗАКАЗ 24. */
.k-count {
  --t-bg: #111;
  --t-tx: #fff;
  height: 28px;
  padding: 0 10px;
  background: #111;
  color: #fff;
  font: 700 15px/1 var(--k-font);
}
[data-theme="dark"] .k-count { background: #f4f4f2; color: #111; }
/* Cards: the whole card goes ink black under the pointer. */
.k-mcard { transition: background-color 0.18s ease, color 0.18s ease; }
.k-mcard:hover { background: #111; color: #f4f4f2; }
.k-mcard:hover .k-mcard-name,
.k-mcard:hover .k-mcard-desc { color: #f4f4f2; }
.k-mcard:hover .k-mcard-sub { color: rgba(244, 244, 242, 0.55); }
.k-mcard:hover .k-mcard-body { border-bottom-color: rgba(255, 255, 255, 0.16); }
.k-mcard:hover .k-chip { --t-bg: rgba(255, 255, 255, 0.1); --t-tx: #f4f4f2; }
/* Black coin marks (Pearl, Ergo) would vanish on the ink card: a white disc. */
.k-mcard:hover .k-chip .coin-icon-card { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #fff; }
[data-theme="dark"] .k-mcard:hover { background: #f4f4f2; color: #111; }
[data-theme="dark"] .k-mcard:hover .k-mcard-name,
[data-theme="dark"] .k-mcard:hover .k-mcard-desc { color: #111; }
[data-theme="dark"] .k-mcard:hover .k-mcard-sub { color: rgba(17, 17, 17, 0.55); }
[data-theme="dark"] .k-mcard:hover .k-mcard-body { border-bottom-color: rgba(0, 0, 0, 0.14); }
[data-theme="dark"] .k-mcard:hover .k-chip { --t-bg: rgba(0, 0, 0, 0.07); --t-tx: #111; }