:root {
      --bg-0: #05090f;
      --bg-1: #0a1320;
      --bg-2: #0d2236;
      --bg-3: #142a42;
      --surface: rgba(8, 16, 26, 0.88);
      --surface-2: rgba(10, 20, 34, 0.75);
      --stroke: rgba(110, 160, 220, 0.22);
      --ink: #f2f6ff;
      --ink-dim: rgba(242, 246, 255, 0.72);
      --ink-muted: rgba(242, 246, 255, 0.45);
      --accent: #4cc6ff;
      --accent-2: #2f8bff;
      --accent-3: #1b5dd6;
      --ok: #43d19d;
      --warn: #f2c36f;
      --bad: #ff6f7d;
      --shadow: rgba(2, 6, 14, 0.6);
      --chart-line: #54c2ff;
      --chart-fill: rgba(84, 194, 255, 0.18);
      --chart-grid: rgba(242, 246, 255, 0.08);
      --chart-tick: rgba(242, 246, 255, 0.9);
      --chart-legend: rgba(242, 246, 255, 0.9);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Space Grotesk", "Segoe UI", sans-serif;
      color: var(--ink);
      background: radial-gradient(700px 520px at 12% 10%, rgba(76, 198, 255, 0.2), transparent 60%),
                  radial-gradient(640px 420px at 88% 0%, rgba(47, 139, 255, 0.2), transparent 55%),
                  linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 75%, var(--bg-3) 100%);
    }

    body.modal-open {
      overflow: hidden;
    }

    .bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(420px 240px at 14% 22%, rgba(76, 198, 255, 0.22), transparent 70%),
        radial-gradient(380px 220px at 86% 18%, rgba(27, 93, 214, 0.22), transparent 70%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 40%),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 6px);
      opacity: 0.8;
    }

    .bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(1px 1px at 20px 20px, rgba(255, 255, 255, 0.06) 0, transparent 2px);
      background-size: 120px 120px;
      opacity: 0.4;
    }

    .glow {
      position: absolute;
      border-radius: 999px;
      filter: blur(12px);
      opacity: 0.45;
      animation: float 12s ease-in-out infinite;
    }

    .glow.one {
      width: 320px;
      height: 320px;
      left: -80px;
      top: 80px;
      background: radial-gradient(circle, rgba(100, 195, 255, 0.35), transparent 70%);
    }

    .glow.two {
      width: 380px;
      height: 380px;
      right: -120px;
      top: 60px;
      background: radial-gradient(circle, rgba(77, 183, 255, 0.3), transparent 70%);
      animation-delay: 2s;
    }

    .glow.three {
      width: 420px;
      height: 420px;
      right: 10%;
      bottom: -240px;
      background: radial-gradient(circle, rgba(26, 130, 217, 0.28), transparent 70%);
      animation-delay: 4s;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-16px); }
    }

    header.top {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(5, 10, 18, 0.86);
      backdrop-filter: blur(12px);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 16px;
      align-items: center;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .logo {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(135deg, #7ed8ff, #2a74de);
      color: #031422;
      font-weight: 800;
      display: grid;
      place-items: center;
      letter-spacing: 0.8px;
      box-shadow: 0 18px 36px rgba(39, 90, 170, 0.45);
    }

    .brand h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
    }

    .brand p {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--ink-dim);
    }

    .tabs {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px;
      background: rgba(11, 22, 36, 0.9);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 1px rgba(76, 198, 255, 0.08);
      justify-self: center;
    }

    .tab {
      border: none;
      background: transparent;
      color: var(--ink-dim);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 9px 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .tab.is-active {
      background: linear-gradient(135deg, rgba(76, 198, 255, 0.3), rgba(27, 93, 214, 0.12));
      color: var(--ink);
      box-shadow: inset 0 0 0 1px rgba(76, 198, 255, 0.4);
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-self: end;
    }

    .icon-link {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(11, 22, 36, 0.9);
      color: var(--ink);
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .icon-link:hover {
      transform: translateY(-1px);
      border-color: rgba(76, 198, 255, 0.5);
      box-shadow: 0 10px 20px rgba(9, 24, 45, 0.5);
    }

    .icon-link svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      flex: 0 0 auto;
    }

    .icon-link-label {
      line-height: 1;
    }

    .controls .select.pool-select select {
      min-width: 190px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: 12px;
      color: var(--ink);
      white-space: nowrap;
    }


    .chip.status[data-state="ok"] {
      background: rgba(79, 209, 161, 0.2);
      border-color: rgba(79, 209, 161, 0.35);
      color: #c9f6e6;
    }

    .chip.status[data-state="error"] {
      background: rgba(255, 111, 111, 0.2);
      border-color: rgba(255, 111, 111, 0.35);
      color: #ffd8d8;
    }

    .chip.status[data-state="loading"] {
      background: rgba(242, 197, 114, 0.2);
      border-color: rgba(242, 197, 114, 0.35);
      color: #ffe4bd;
    }

    .select {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--ink-dim);
    }

    select {
      appearance: none;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(6, 14, 24, 0.9);
      color: var(--ink);
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .wrap {
      position: relative;
      z-index: 1;
      max-width: 1460px;
      margin: 0 auto;
      padding: 30px 28px 56px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1.2fr 0.9fr;
      gap: 24px;
      margin-bottom: 24px;
      animation: rise 0.6s ease forwards;
    }

    .hero-copy {
      padding: 12px 4px;
    }

    .eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      color: rgba(126, 216, 255, 0.9);
      margin-bottom: 12px;
    }

    .hero-copy h2 {
      font-size: 38px;
      margin: 0 0 16px;
      font-weight: 800;
      line-height: 1.15;
    }

    .hero-copy p {
      margin: 0 0 20px;
      color: var(--ink-dim);
      font-size: 15px;
      max-width: 560px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn {
      border: none;
      padding: 12px 18px;
      border-radius: 16px;
      font-weight: 700;
      letter-spacing: 0.2px;
      cursor: pointer;
      color: #02111f;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 18px 36px rgba(29, 98, 170, 0.45);
    }

    .btn.ghost {
      background: rgba(6, 14, 24, 0.7);
      color: var(--ink);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: none;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 20px 45px var(--shadow);
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(260px 140px at 8% 0%, rgba(76, 198, 255, 0.18), transparent 60%);
      pointer-events: none;
    }

    .label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--ink-muted);
      margin-bottom: 8px;
    }

    .value {
      font-size: 24px;
      font-weight: 800;
    }

    .hero-stat-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .hero-stat-price {
      text-align: right;
      flex-shrink: 0;
    }

    .hero-stat-price .label {
      margin-bottom: 6px;
    }

    .hero-stat-price .mini-value {
      font-size: 18px;
    }

    .mono { font-family: "JetBrains Mono", "Segoe UI", monospace; }

    .sub {
      margin-top: 8px;
      font-size: 12px;
      color: var(--ink-dim);
    }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
      margin-top: 16px;
    }

    .mini-value {
      font-size: 16px;
      font-weight: 700;
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .section-head h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
    }

    .section-head p {
      margin: 4px 0 0;
      color: var(--ink-dim);
      font-size: 13px;
    }

    .coin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }

    .coin-card {
      background: linear-gradient(145deg, rgba(8, 16, 28, 0.92), rgba(11, 22, 38, 0.72));
      border: 1px solid rgba(120, 170, 230, 0.14);
      border-radius: 18px;
      padding: 14px 14px 12px;
      display: grid;
      gap: 8px;
      position: relative;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      opacity: 0;
      transform: translateY(6px);
      animation: pop 0.6s ease forwards;
    }

    .coin-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 2px;
    }

    .coin-cta {
      padding: 6px 10px;
      font-size: 11px;
      border-radius: 12px;
    }

    .coin-cta[disabled] {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .coin-card:nth-child(1) { animation-delay: 0.05s; }
    .coin-card:nth-child(2) { animation-delay: 0.1s; }
    .coin-card:nth-child(3) { animation-delay: 0.15s; }
    .coin-card:nth-child(4) { animation-delay: 0.2s; }
    .coin-card:nth-child(5) { animation-delay: 0.25s; }
    .coin-card:nth-child(6) { animation-delay: 0.3s; }

    .coin-card.live::before {
      content: "Live";
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(79, 209, 161, 0.18);
      border: 1px solid rgba(79, 209, 161, 0.3);
      color: #bff4e3;
    }

    .coin-card.soon::before {
      content: "Soon";
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(242, 197, 114, 0.18);
      border: 1px solid rgba(242, 197, 114, 0.3);
      color: #ffe2b8;
    }

    .coin-card.is-active {
      border-color: rgba(76, 198, 255, 0.6);
      box-shadow: 0 14px 28px rgba(29, 98, 170, 0.26);
    }

    .coin-card:hover {
      border-color: rgba(76, 198, 255, 0.4);
      box-shadow: 0 12px 22px rgba(12, 30, 60, 0.34);
      transform: translateY(-3px);
    }

    .coin-title {
      font-size: 15px;
      font-weight: 700;
    }

    .coin-meta {
      font-size: 11px;
      line-height: 1.45;
      color: var(--ink-dim);
    }

    .coin-meta.promo,
    .fee-note {
      color: #d8f8ed;
      font-weight: 600;
    }

    .recent-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--ink-dim);
      margin-top: 8px;
    }

    .recent-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .recent-chip {
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(6, 14, 24, 0.7);
      color: var(--ink);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .recent-chip:hover {
      border-color: rgba(76, 198, 255, 0.4);
      box-shadow: 0 10px 20px rgba(12, 30, 60, 0.4);
    }

    .panel {
      display: none;
      margin-top: 20px;
      animation: rise 0.4s ease forwards;
    }

    .panel.is-active { display: block; }

    .panel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
    }

    .start-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.92fr);
      gap: 22px;
      align-items: start;
      margin-top: 22px;
    }

    .start-main,
    .start-side {
      display: grid;
      gap: 20px;
    }

    .start-card {
      padding: 26px;
      display: grid;
      gap: 16px;
    }

    .start-card--values {
      position: relative;
      overflow: hidden;
      border-color: rgba(76, 198, 255, 0.32);
      background:
        radial-gradient(520px 220px at 92% 0%, rgba(76, 198, 255, 0.18), transparent 62%),
        linear-gradient(160deg, rgba(9, 22, 36, 0.94), rgba(7, 15, 26, 0.9));
    }

    .start-card--values::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(76, 198, 255, 0.12), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 10px);
      opacity: 0.55;
    }

    .start-card--values > * {
      position: relative;
      z-index: 1;
    }

    .start-kicker {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    .start-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(76, 198, 255, 0.12);
      border: 1px solid rgba(76, 198, 255, 0.28);
      color: #d5ebff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .start-heading {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .start-heading strong {
      font-size: 22px;
      color: var(--ink);
    }

    .start-heading span,
    .start-note {
      font-size: 14px;
      color: var(--ink-dim);
      line-height: 1.7;
    }

    .start-connect-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
      gap: 20px;
      align-items: start;
    }

    .start-command-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
      gap: 20px;
      align-items: start;
    }

    .start-command-stack {
      display: grid;
      gap: 18px;
    }

    .start-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field.span-2 {
      grid-column: 1 / -1;
    }

    .start-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .start-value-stack {
      display: grid;
      gap: 8px;
    }

    .start-value-stack .value {
      padding: 10px 12px;
      border: 1px solid rgba(120, 190, 255, 0.16);
      border-radius: 12px;
      background: rgba(4, 10, 18, 0.64);
      font-size: 16px;
      line-height: 1.6;
      word-break: break-word;
    }

    .start-card--values .start-info-grid .start-slab {
      background:
        linear-gradient(180deg, rgba(12, 31, 50, 0.84), rgba(6, 14, 24, 0.78));
      border-color: rgba(120, 190, 255, 0.22);
    }

    .start-value-stack .sub {
      margin: 0;
    }

    .start-slab {
      background: rgba(6, 14, 24, 0.76);
      border: 1px solid rgba(120, 170, 230, 0.14);
      border-radius: 16px;
      padding: 20px;
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .start-slab .code {
      margin: 0;
      min-width: 0;
      overflow: auto;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .start-slab--quickstart .code-soft {
      min-height: 100px;
      display: block;
    }

    .start-endpoint {
      font-size: 22px;
      line-height: 1.45;
      word-break: break-word;
    }

    .start-command-output {
      display: grid;
      gap: 10px;
    }

    .start-command-output .code {
      min-height: 220px;
    }

    .code.code-soft {
      padding: 10px;
      font-size: 11px;
      border-color: rgba(120, 170, 230, 0.14);
      background: rgba(6, 12, 20, 0.72);
    }

    .start-advanced {
      margin-top: 22px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: rgba(8, 16, 28, 0.72);
      box-shadow: 0 20px 45px var(--shadow);
      overflow: hidden;
    }

    .start-advanced > summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .start-advanced > summary::-webkit-details-marker {
      display: none;
    }

    .start-advanced > summary strong {
      display: block;
      font-size: 14px;
      color: var(--ink);
    }

    .start-advanced > summary span {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-dim);
    }

    .start-advanced > summary::after {
      content: "+";
      font-size: 18px;
      color: var(--ink-muted);
      flex: 0 0 auto;
    }

    .start-advanced[open] > summary::after {
      content: "–";
      color: var(--ink);
    }

    .start-advanced-body {
      padding: 0 18px 18px;
    }

    .start-advanced-grid {
      display: grid;
      grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.08fr) minmax(280px, 1fr) minmax(220px, 0.84fr);
      gap: 18px;
      align-items: start;
    }

    .start-advanced-grid .card {
      height: auto;
      padding: 18px;
      background: rgba(6, 14, 24, 0.62);
      border-color: rgba(120, 170, 230, 0.1);
      box-shadow: none;
    }

    .status-banner {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.18);
      background: rgba(8, 16, 28, 0.7);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--ink-dim);
    }

    .status-banner[data-state="ok"] {
      background: rgba(67, 209, 157, 0.18);
      border-color: rgba(67, 209, 157, 0.35);
      color: #d8f8ed;
    }

    .status-banner[data-state="warn"] {
      background: rgba(242, 195, 111, 0.18);
      border-color: rgba(242, 195, 111, 0.35);
      color: #fff1d3;
    }

    .status-banner[data-state="error"] {
      background: rgba(255, 111, 125, 0.18);
      border-color: rgba(255, 111, 125, 0.35);
      color: #ffe1e5;
    }

    .status-banner strong {
      color: var(--ink);
      font-weight: 700;
    }

    .start-onramp-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
      gap: 18px;
      margin-top: 18px;
      align-items: start;
    }

    .start-onramp-stack {
      display: grid;
      gap: 18px;
    }

    .setup-model-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .setup-model-card {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.78);
      color: var(--ink);
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .setup-model-card:hover {
      border-color: rgba(76, 198, 255, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(12, 30, 60, 0.32);
    }

    .setup-model-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      min-width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(76, 198, 255, 0.12);
      border: 1px solid rgba(76, 198, 255, 0.22);
      color: #d5ebff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .setup-model-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .setup-model-copy strong {
      font-size: 15px;
      color: var(--ink);
    }

    .setup-model-copy span {
      font-size: 12px;
      color: var(--ink-dim);
      line-height: 1.55;
    }

    .setup-region-card {
      display: grid;
      gap: 12px;
    }

    .setup-region-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .setup-region-inline {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .setup-region-inline .select {
      min-width: 220px;
    }

    .setup-region-detected {
      font-size: 11px;
      color: #d8f8ed;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .setup-region-output {
      display: grid;
      gap: 8px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.16);
      background: rgba(6, 14, 24, 0.82);
    }

    .setup-region-output .value {
      font-size: 19px;
      line-height: 1.45;
      word-break: break-word;
    }

    .setup-region-alternates {
      display: grid;
      gap: 8px;
    }

    .setup-region-alt {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.66);
      font-size: 12px;
      color: var(--ink-dim);
    }

    .setup-region-alt strong {
      color: var(--ink);
      text-align: right;
    }

    .hero-market-grid {
      display: grid;
      gap: 12px;
      margin-top: 0;
    }

    .hero-market-card {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.76);
    }

    .hero-market-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .quickproof-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
      gap: 20px;
      margin-top: 22px;
      align-items: start;
    }

    .pool-context-card {
      gap: 0;
      background:
        linear-gradient(180deg, rgba(76, 198, 255, 0.06), transparent 38%),
        rgba(8, 16, 28, 0.84);
    }

    .pool-context-section {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.1);
      background: rgba(6, 14, 24, 0.58);
    }

    .pool-context-section + .pool-context-section {
      margin-top: 14px;
      padding-top: 16px;
      border-top: none;
    }

    .pool-context-section:first-child {
      border-color: rgba(76, 198, 255, 0.16);
    }

    .pool-context-section:last-child {
      border-color: rgba(67, 209, 157, 0.16);
    }

    .walkthrough-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .walkthrough-card {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.72);
    }

    .walkthrough-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(76, 198, 255, 0.12);
      border: 1px solid rgba(76, 198, 255, 0.22);
      color: #d5ebff;
      font-size: 11px;
      font-weight: 800;
    }

    .walkthrough-card strong {
      color: var(--ink);
      font-size: 14px;
    }

    .walkthrough-card p {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-dim);
    }

    .walkthrough-shot {
      min-height: 118px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background:
        linear-gradient(180deg, rgba(76, 198, 255, 0.08), transparent 55%),
        rgba(6, 12, 20, 0.78);
      padding: 12px;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .walkthrough-shot-bar {
      width: 42%;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
    }

    .walkthrough-shot-bar.short {
      width: 26%;
    }

    .walkthrough-shot-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 4px;
    }

    .walkthrough-shot-chip {
      min-height: 28px;
      border-radius: 10px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(10, 18, 30, 0.78);
    }

    .walkthrough-shot-footer {
      margin-top: auto;
      min-height: 34px;
      border-radius: 10px;
      background: rgba(67, 209, 157, 0.18);
      border: 1px solid rgba(67, 209, 157, 0.26);
    }

    .support-link-list {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }

    .support-link-card {
      display: grid;
      gap: 8px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.72);
      color: var(--ink);
      text-decoration: none;
    }

    .support-link-card:link,
    .support-link-card:visited,
    .support-link-card:hover,
    .support-link-card:active {
      color: var(--ink);
      text-decoration: none;
    }

    .support-link-card strong {
      font-size: 14px;
      color: var(--ink);
    }

    .support-link-card p {
      margin: 0;
      font-size: 12px;
      color: var(--ink-dim);
      line-height: 1.5;
    }

    .pplns-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 18px;
      margin-top: 18px;
      align-items: start;
    }

    .pplns-stack {
      display: grid;
      gap: 18px;
    }

    .pplns-benefits {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }

    .pplns-benefit {
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.72);
    }

    .pplns-benefit strong {
      display: block;
      color: var(--ink);
      margin-bottom: 4px;
      font-size: 13px;
    }

    .pplns-benefit span {
      display: block;
      color: var(--ink-dim);
      font-size: 12px;
      line-height: 1.5;
    }

    .pplns-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .pplns-output-grid,
    .variance-grid,
    .explain-list {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }

    .pplns-output-grid,
    .variance-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pplns-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(67, 209, 157, 0.25);
      background: rgba(67, 209, 157, 0.16);
      color: #d8f8ed;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .explain-item {
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.72);
      display: grid;
      gap: 4px;
    }

    .explain-item strong {
      color: var(--ink);
      font-size: 13px;
    }

    .explain-item span {
      color: var(--ink-dim);
      font-size: 12px;
      line-height: 1.5;
    }

    .copy-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink-muted);
    }

    .field input {
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(6, 14, 24, 0.9);
      color: var(--ink);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .qr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .qr-box {
      background: rgba(6, 14, 24, 0.8);
      border: 1px solid rgba(120, 170, 230, 0.14);
      border-radius: 14px;
      padding: 10px;
      display: grid;
      gap: 8px;
      justify-items: center;
      text-align: center;
      font-size: 11px;
      color: var(--ink-dim);
    }

    .qr {
      width: 140px;
      height: 140px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      display: grid;
      place-items: center;
    }

    .code {
      background: rgba(6, 12, 20, 0.9);
      border: 1px solid rgba(126, 216, 255, 0.2);
      padding: 12px;
      border-radius: 12px;
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      color: #d5ebff;
      white-space: pre-wrap;
    }

    .port-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
      font-size: 12px;
      color: var(--ink-dim);
    }

    .port-list li {
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.7);
      line-height: 1.55;
    }

    .port-emphasis {
      font-weight: 800;
      color: #d5ebff;
      letter-spacing: 0.2px;
    }

    .stat-list {
      display: grid;
      gap: 10px;
    }

    .stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13.5px;
      color: var(--ink-dim);
      padding: 5px 0;
    }

    .stat-row strong {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .preset-list {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .direct-presets {
      margin-top: 0;
    }

    .preset-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      border-radius: 12px;
      background: rgba(8, 16, 28, 0.62);
      border: 1px solid rgba(120, 170, 230, 0.1);
      font-size: 12px;
    }

    .preset-meta {
      min-width: 0;
      display: grid;
      gap: 4px;
      flex: 1 1 auto;
    }

    .preset-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }

    .preset-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .preset-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(76, 198, 255, 0.24);
      background: rgba(76, 198, 255, 0.12);
      color: #d5ebff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .preset-command {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: #d5ebff;
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.45;
    }

    .preset-note {
      margin-top: 10px;
      font-size: 11.5px;
      color: var(--ink-muted);
      line-height: 1.6;
    }

    .preset-section {
      display: grid;
      gap: 12px;
    }

    .preset-section + .preset-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(120, 170, 230, 0.1);
    }

    .preset-section-head {
      display: grid;
      gap: 4px;
    }

    .preset-section-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #d5ebff;
    }

    .preset-section-note {
      font-size: 11px;
      color: var(--ink-muted);
      line-height: 1.45;
    }

    .preset-section-body {
      display: grid;
      gap: 12px;
    }

    .marketplace-grid {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .marketplace-overflow[hidden] {
      display: none !important;
    }

    .marketplace-card {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(8, 16, 28, 0.64);
    }

    .marketplace-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .marketplace-title-wrap {
      display: grid;
      gap: 6px;
    }

    .marketplace-title {
      font-size: 14px;
      color: var(--ink);
    }

    .marketplace-meta {
      display: grid;
      gap: 10px;
    }

    .marketplace-meta-row {
      display: grid;
      gap: 4px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.1);
      background: rgba(6, 14, 24, 0.6);
      font-size: 11px;
      color: var(--ink-dim);
    }

    .marketplace-meta-row span {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .marketplace-meta-row strong {
      color: var(--ink);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .marketplace-toggle {
      width: 100%;
      justify-content: center;
      margin-top: 2px;
    }

    .preset-row .copy-btn {
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .transparency-summary {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      margin-top: 18px;
      margin-bottom: 14px;
    }

    .transparency-summary .stat-block {
      padding: 16px;
      background: rgba(8, 16, 28, 0.8);
      border-color: rgba(120, 160, 220, 0.14);
    }

    .transparency-summary .stat-block .value {
      font-size: 20px;
    }

    .transparency-meta-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      color: var(--ink-dim);
      font-size: 12px;
    }

    .transparency-meta-row strong {
      color: var(--ink);
    }

    .transparency-live {
      display: grid;
      grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
      gap: 20px;
      align-items: start;
    }

    .transparency-primary,
    .transparency-support {
      display: grid;
      gap: 18px;
    }

    .transparency-cta-card {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .transparency-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .transparency-feed {
      display: grid;
      gap: 12px;
      max-height: 620px;
      overflow: auto;
      padding-right: 6px;
    }

    .transparency-feed--blocks {
      max-height: 760px;
    }

    .transparency-feed--payouts {
      max-height: 520px;
    }

    .transparency-feed::-webkit-scrollbar {
      width: 8px;
    }

    .transparency-feed::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 999px;
    }

    .transparency-feed::-webkit-scrollbar-thumb {
      background: rgba(126, 216, 255, 0.22);
      border-radius: 999px;
    }

    .trans-item {
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.7);
      padding: 16px;
      display: grid;
      gap: 12px;
    }

    .trans-item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .trans-item-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }

    .trans-item-sub {
      margin-top: 4px;
      font-size: 11px;
      color: var(--ink-muted);
      line-height: 1.45;
    }

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

    .trans-block-row {
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.7);
      padding: 16px;
      display: grid;
      gap: 12px;
    }

    .trans-block-top {
      display: block;
    }

    .trans-block-heading {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .trans-block-titleline {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .trans-block-height {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(76, 198, 255, 0.12);
      border: 1px solid rgba(76, 198, 255, 0.22);
      color: #d5ebff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .trans-block-time {
      font-size: 14px;
      color: var(--ink);
    }

    .trans-block-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .trans-fact {
      display: grid;
      gap: 4px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(6, 14, 24, 0.72);
      min-width: 0;
    }

    .trans-fact span {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .trans-fact strong {
      color: var(--ink);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .trans-block-progress {
      display: grid;
      gap: 6px;
    }

    .trans-block-progress-meta {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      font-size: 11px;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .trans-block-progress-meta strong {
      color: var(--ink);
      font-size: 12px;
      letter-spacing: normal;
      text-transform: none;
    }

    .trans-block-progress .sub {
      margin-top: 0;
    }

    @media (max-width: 900px) {
      .trans-block-facts {
        grid-template-columns: 1fr;
      }
    }

    .trans-kv {
      display: grid;
      gap: 4px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(6, 14, 24, 0.72);
    }

    .trans-kv span,
    .trans-progress-meta span {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .trans-kv strong,
    .trans-progress-meta strong,
    .trans-item-amount {
      font-size: 13px;
      color: var(--ink);
    }

    .trans-progress-block {
      display: grid;
      gap: 8px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      background: rgba(6, 14, 24, 0.72);
    }

    .trans-progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .trans-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(120, 170, 230, 0.16);
      background: rgba(76, 198, 255, 0.1);
      color: #d5ebff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .trans-badge[data-state="confirmed"] {
      background: rgba(67, 209, 157, 0.16);
      border-color: rgba(67, 209, 157, 0.3);
      color: #d8f8ed;
    }

    .trans-badge[data-state="pending"] {
      background: rgba(242, 195, 111, 0.16);
      border-color: rgba(242, 195, 111, 0.28);
      color: #fff1d3;
    }

    .trans-badge[data-state="orphaned"],
    .trans-badge[data-state="rejected"] {
      background: rgba(255, 111, 125, 0.16);
      border-color: rgba(255, 111, 125, 0.3);
      color: #ffe1e5;
    }

    .empty-state {
      padding: 20px 16px;
      border-radius: 14px;
      border: 1px dashed rgba(120, 170, 230, 0.18);
      background: rgba(8, 16, 28, 0.58);
      color: var(--ink-dim);
      font-size: 12px;
      text-align: center;
    }

    .payout-explain p {
      margin: 0 0 10px;
      color: var(--ink-dim);
      font-size: 12px;
      line-height: 1.6;
    }

    .pplns-section-head {
      margin-top: 24px;
      margin-bottom: 16px;
    }

    .overview-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 14px;
      align-items: start;
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.4px;
      background: rgba(79, 209, 161, 0.2);
      border: 1px solid rgba(79, 209, 161, 0.35);
      color: #d8f8ed;
      width: fit-content;
    }

    .status-pill[data-state="degraded"] {
      background: rgba(242, 195, 111, 0.2);
      border-color: rgba(242, 195, 111, 0.35);
      color: #fff1d3;
    }

    .status-pill[data-state="outage"] {
      background: rgba(255, 111, 125, 0.2);
      border-color: rgba(255, 111, 125, 0.35);
      color: #ffe1e5;
    }

    .uptime-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .uptime-item {
      padding: 10px;
      border-radius: 12px;
      background: rgba(8, 16, 28, 0.7);
      border: 1px solid rgba(120, 170, 230, 0.12);
      font-size: 12px;
      color: var(--ink-dim);
    }

    .uptime-item strong {
      display: block;
      margin-top: 6px;
      font-size: 14px;
      color: var(--ink);
    }

    .component-list,
    .incident-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .component-row,
    .incident-card {
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(8, 16, 28, 0.7);
      border: 1px solid rgba(120, 170, 230, 0.12);
      font-size: 12px;
      color: var(--ink-dim);
    }

    .component-row strong {
      color: var(--ink);
    }

    .component-row .status-pill {
      margin-left: auto;
    }

    .incident-card h4 {
      margin: 0 0 6px;
      font-size: 13px;
      color: var(--ink);
    }

    .incident-meta {
      font-size: 11px;
      color: var(--ink-muted);
    }

    .incident-note {
      margin-top: 8px;
      line-height: 1.5;
    }

    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .stat-block {
      background: rgba(8, 16, 28, 0.75);
      border-radius: 14px;
      padding: 12px;
      border: 1px solid rgba(120, 160, 220, 0.12);
    }

    .stat-block .value {
      font-size: 18px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    .table-scroll {
      width: 100%;
      overflow-x: auto;
      scrollbar-gutter: stable both-edges;
    }

    .table-scroll table {
      min-width: 520px;
    }

    .payouts-scroll {
      max-height: 420px;
      overflow-y: auto;
    }

    .payouts-scroll table {
      min-width: 100%;
    }

    .payouts-scroll th,
    .payouts-scroll td {
      white-space: nowrap;
    }

    .proof-link {
      color: #7bd4ff;
      text-decoration: underline;
      text-decoration-color: rgba(123, 212, 255, 0.45);
      text-underline-offset: 2px;
    }

    .proof-link:hover {
      color: #ffffff;
      text-decoration-color: rgba(255, 255, 255, 0.85);
    }

    .table-scroll::-webkit-scrollbar {
      height: 6px;
    }

    .table-scroll::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 999px;
    }

    .table-scroll::-webkit-scrollbar-thumb {
      background: rgba(76, 198, 255, 0.5);
      border-radius: 999px;
    }

    th, td {
      text-align: left;
      padding: 10px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }

    th {
      color: var(--ink-dim);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    tbody tr:hover {
      background: rgba(76, 198, 255, 0.06);
    }

    .progress-cell {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 140px;
    }

    .progress-bar {
      flex: 0 0 86px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 10px rgba(76, 198, 255, 0.45);
    }

    .progress-cell[data-state="confirmed"] .progress-fill {
      background: linear-gradient(90deg, var(--ok), rgba(67, 209, 157, 0.6));
      box-shadow: 0 0 10px rgba(67, 209, 157, 0.45);
    }

    .progress-cell[data-state="pending"] .progress-fill {
      background: linear-gradient(90deg, var(--warn), rgba(242, 195, 111, 0.6));
      box-shadow: 0 0 10px rgba(242, 195, 111, 0.45);
    }

    .progress-label {
      font-size: 11px;
      color: var(--ink-dim);
      font-family: "JetBrains Mono", monospace;
      min-width: 48px;
      text-align: right;
    }

    .wallet-link {
      border: none;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      padding: 0;
      text-align: left;
      text-decoration: underline;
      text-decoration-color: rgba(76, 198, 255, 0.4);
      text-underline-offset: 3px;
    }

    .wallet-link:hover {
      color: #8fd5ff;
      text-decoration-color: rgba(143, 213, 255, 0.8);
    }

    .wallet-link:focus-visible {
      outline: 2px solid rgba(143, 213, 255, 0.6);
      outline-offset: 2px;
      border-radius: 6px;
    }

    .wallet-cell {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .wallet-page-link {
      font-size: 11px;
      letter-spacing: 0.02em;
      border: 1px solid rgba(76, 198, 255, 0.35);
      color: #7bd4ff;
      padding: 4px 8px;
      border-radius: 999px;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.2s ease;
    }

    .wallet-page-link:hover {
      border-color: rgba(120, 190, 255, 0.9);
      color: #ffffff;
      background: rgba(76, 198, 255, 0.15);
    }

    .chart-card {
      display: flex;
      flex-direction: column;
      min-height: 320px;
      height: 360px;
      max-height: 420px;
      overflow: hidden;
    }

    .chart-card canvas {
      width: 100%;
      height: 100% !important;
      max-height: 100%;
      flex: 1;
      display: block;
    }

    .wallet-activity {
      margin-bottom: 16px;
    }

    .wallet-activity[hidden] {
      display: none;
    }

    .wallet-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin: 12px 0;
    }

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

    .wallet-chart-card {
      background: rgba(8, 16, 28, 0.7);
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.12);
      padding: 12px;
      min-height: 220px;
      height: 260px;
      display: flex;
      flex-direction: column;
    }

    .wallet-chart-card canvas {
      width: 100%;
      height: 100% !important;
      flex: 1;
      display: block;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal.is-open {
      display: flex;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 8, 15, 0.78);
      backdrop-filter: blur(6px);
    }

    .modal-panel {
      position: relative;
      z-index: 1;
      width: min(1120px, 96vw);
      max-height: 90vh;
      overflow: auto;
      border-radius: 22px;
      border: 1px solid rgba(120, 170, 230, 0.18);
      background: rgba(7, 14, 24, 0.92);
      box-shadow: 0 24px 60px rgba(2, 8, 18, 0.6);
      padding: 22px;
    }

    .modal-head {
      display: grid;
      grid-template-columns: 1fr minmax(240px, 360px) auto;
      gap: 14px;
      align-items: center;
      margin-bottom: 16px;
    }

    .modal-coin {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .coin-pill {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(76, 198, 255, 0.3), rgba(27, 93, 214, 0.35));
      border: 1px solid rgba(76, 198, 255, 0.4);
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: 0.6px;
      color: var(--ink);
    }

    .modal-title {
      font-size: 18px;
      font-weight: 800;
    }

    .modal-sub {
      font-size: 12px;
      color: var(--ink-dim);
    }

    .modal-search {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.2);
      background: rgba(6, 14, 24, 0.8);
    }

    .modal-search input {
      width: 100%;
      border: none;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      outline: none;
    }

    .modal-close {
      border: none;
      background: rgba(255, 255, 255, 0.08);
      color: var(--ink);
      font-size: 18px;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      cursor: pointer;
    }

    .modal-auth {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.16);
      background: rgba(6, 14, 24, 0.85);
    }

    .modal-card-head {
      display: grid;
      gap: 6px;
      margin-bottom: 12px;
    }

    .modal-card-note {
      font-size: 12px;
      color: var(--ink-dim);
      line-height: 1.55;
    }

    .modal-auth-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .modal-auth-row input {
      flex: 1;
      min-width: 220px;
      border: 1px solid rgba(120, 170, 230, 0.2);
      background: rgba(6, 14, 24, 0.7);
      color: var(--ink);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      outline: none;
    }

    .modal-auth-status {
      font-size: 12px;
      color: var(--ink-dim);
    }

    .modal-auth-status[data-state="ok"] { color: #7fe7c3; }
    .modal-auth-status[data-state="warn"] { color: #f7c26a; }
    .modal-auth-status[data-state="bad"] { color: #ff8d8d; }

    .modal-auth-summary {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .modal-auth-summary .summary-item {
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(8, 16, 28, 0.76);
      border: 1px solid rgba(120, 170, 230, 0.12);
      font-size: 12px;
      min-width: 0;
    }

    .modal-auth-summary .summary-item span {
      display: block;
      color: var(--ink-dim);
      margin-bottom: 4px;
    }

    .modal-auth-summary .summary-item.wide {
      background: rgba(10, 22, 36, 0.82);
    }

    .modal-auth-summary .summary-item.wide strong {
      display: block;
      line-height: 1.45;
      word-break: break-word;
    }

    .modal-auth-summary .summary-item.accent {
      background:
        linear-gradient(180deg, rgba(76, 198, 255, 0.12), transparent 70%),
        rgba(10, 22, 36, 0.82);
      border-color: rgba(76, 198, 255, 0.2);
    }

    .modal-auth-summary .summary-item.accent strong {
      font-size: 18px;
    }

    .modal-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
    }

    .modal-stat-group {
      display: grid;
      gap: 10px;
      padding-top: 12px;
      margin-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .modal-stat-group:first-of-type {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }

    .modal-history-grid {
      display: grid;
      gap: 10px;
    }

    .modal-history-item {
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(8, 16, 28, 0.72);
      border: 1px solid rgba(120, 170, 230, 0.12);
    }

    .modal-history-item span {
      display: block;
      margin-bottom: 5px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-muted);
    }

    .modal-history-item strong {
      display: block;
      color: var(--ink);
      line-height: 1.55;
      font-size: 13px;
    }

    .modal-callout {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(8, 16, 28, 0.74);
      border: 1px solid rgba(120, 170, 230, 0.12);
    }

    .modal-callout .mono {
      display: block;
      margin-top: 6px;
      color: #d5ebff;
      font-size: 14px;
      word-break: break-word;
    }

    .endpoint-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .endpoint-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(8, 16, 28, 0.7);
      border: 1px solid rgba(120, 170, 230, 0.12);
      font-size: 12px;
    }

    .endpoint-row span:first-child {
      min-width: 122px;
      color: var(--ink-dim);
    }

    .modal-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .copy-btn {
      border: 1px solid rgba(120, 170, 230, 0.2);
      background: rgba(6, 14, 24, 0.7);
      color: var(--ink);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 11px;
      cursor: pointer;
    }

    .modal-quickstart {
      margin-top: 12px;
    }

    .faq-section {
      margin-top: 24px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      align-items: start;
    }

    .faq-item {
      background: rgba(8, 16, 28, 0.75);
      border: 1px solid rgba(120, 170, 230, 0.14);
      border-radius: 16px;
      overflow: hidden;
      align-self: start;
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      font-size: 16px;
      color: var(--ink-muted);
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .faq-item[open] summary::after {
      content: "–";
      color: var(--ink);
    }

    .faq-body {
      padding: 0 16px 14px;
      color: var(--ink-dim);
      font-size: 12px;
      line-height: 1.6;
    }

    @keyframes rise {
      to { opacity: 1; transform: translateY(0); }
      from { opacity: 0; transform: translateY(12px); }
    }

    @keyframes pop {
      to { opacity: 1; transform: translateY(0); }
      from { opacity: 0; transform: translateY(8px); }
    }

    @media (max-width: 1100px) {
      .hero { grid-template-columns: 1fr; }
      .panel-grid { grid-template-columns: 1fr; }
      .start-layout,
      .start-onramp-grid,
      .quickproof-grid,
      .start-connect-grid,
      .start-command-layout,
      .start-advanced-grid,
      .transparency-live,
      .pplns-grid { grid-template-columns: 1fr; }
      .transparency-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .start-info-grid { grid-template-columns: 1fr; }
      .setup-model-grid,
      .walkthrough-grid,
      .pplns-output-grid,
      .variance-grid { grid-template-columns: 1fr 1fr; }
      .overview-grid { grid-template-columns: 1fr; }
      .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    body.is-mobile-client .bg {
      display: none;
    }

    body.is-mobile-client header.top,
    body.is-mobile-client .tabs,
    body.is-mobile-client .card,
    body.is-mobile-client .modal-panel {
      backdrop-filter: none;
    }

    body.is-mobile-client .wrap {
      padding: 20px 14px 40px;
    }

    body.is-mobile-client header.top {
      position: static;
      padding: 14px 16px;
      gap: 12px;
    }

    body.is-mobile-client .brand p {
      display: none;
    }

    body.is-mobile-client .tabs {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    body.is-mobile-client .tabs::-webkit-scrollbar {
      display: none;
    }

    body.is-mobile-client .tab {
      flex: 0 0 auto;
      min-height: 44px;
      white-space: nowrap;
      padding-inline: 14px;
    }

    body.is-mobile-client .btn,
    body.is-mobile-client .icon-link,
    body.is-mobile-client select,
    body.is-mobile-client input {
      min-height: 44px;
    }

    body.is-mobile-client .hero-copy h2 {
      font-size: clamp(2rem, 8vw, 2.7rem);
    }

    body.is-mobile-client .hero {
      gap: 16px;
      margin-bottom: 18px;
    }

    body.is-mobile-client .hero-copy {
      padding: 0;
    }

    body.is-mobile-client .hero-copy p {
      font-size: 14px;
      margin-bottom: 16px;
    }

    body.is-mobile-client .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    body.is-mobile-client .hero-actions .btn {
      width: 100%;
      justify-content: center;
    }

    body.is-mobile-client .section-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    body.is-mobile-client .section-head p {
      font-size: 14px;
      line-height: 1.6;
    }

    body.is-mobile-client .copy-row,
    body.is-mobile-client .controls {
      row-gap: 10px;
    }

    body.is-mobile-client .copy-row {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
    }

    body.is-mobile-client .controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      width: 100%;
      align-items: center;
    }

    body.is-mobile-client .controls .pool-select {
      grid-column: 1 / -1;
      width: 100%;
    }

    body.is-mobile-client .controls .pool-select select {
      width: 100%;
      min-width: 0;
    }

    body.is-mobile-client .coin-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    body.is-mobile-client .coin-card {
      padding: 14px;
      border-radius: 16px;
      gap: 8px;
    }

    body.is-mobile-client .coin-card::before {
      top: 10px;
      right: 10px;
    }

    body.is-mobile-client .coin-actions {
      justify-content: stretch;
      margin-top: 4px;
    }

    body.is-mobile-client .coin-cta {
      width: 100%;
      min-height: 44px;
    }

    body.is-mobile-client .mini-grid,
    body.is-mobile-client .stats-bar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
    }

    body.is-mobile-client .chart-card,
    body.is-mobile-client .wallet-chart-card {
      min-height: 240px;
    }

    body.is-mobile-client .panel {
      padding: 16px;
      border-radius: 18px;
      box-shadow: 0 14px 30px rgba(2, 9, 18, 0.3);
    }

    body.is-mobile-client .start-card {
      padding: 16px;
    }

    body.is-mobile-client .start-kicker {
      align-items: flex-start;
    }

    body.is-mobile-client .start-layout,
    body.is-mobile-client .start-onramp-grid,
    body.is-mobile-client .quickproof-grid,
    body.is-mobile-client .start-connect-grid,
    body.is-mobile-client .start-command-layout,
    body.is-mobile-client .start-advanced-grid,
    body.is-mobile-client .start-info-grid,
    body.is-mobile-client .start-form-grid,
    body.is-mobile-client .transparency-live,
    body.is-mobile-client .pplns-grid,
    body.is-mobile-client .pplns-output-grid,
    body.is-mobile-client .variance-grid {
      grid-template-columns: 1fr;
    }

    body.is-mobile-client .start-endpoint {
      font-size: 18px;
    }

    body.is-mobile-client .start-advanced > summary {
      padding: 14px 16px;
      align-items: flex-start;
    }

    body.is-mobile-client .start-advanced-body {
      padding: 0 12px 12px;
    }

    body.is-mobile-client .start-card .copy-row .btn,
    body.is-mobile-client .start-card .copy-row .copy-btn,
    body.is-mobile-client .start-card .copy-row a,
    body.is-mobile-client .transparency-support .btn,
    body.is-mobile-client .transparency-support .copy-btn {
      width: 100%;
      justify-content: center;
    }

    body.is-mobile-client .field.span-2 {
      grid-column: auto;
    }

    body.is-mobile-client .qr-grid,
    body.is-mobile-client .form-grid,
    body.is-mobile-client .marketplace-grid,
    body.is-mobile-client .preset-section-body,
    body.is-mobile-client .setup-model-grid,
    body.is-mobile-client .walkthrough-grid {
      grid-template-columns: 1fr;
    }

    body.is-mobile-client .preset-row,
    body.is-mobile-client .marketplace-head,
    body.is-mobile-client .transparency-card-head,
    body.is-mobile-client .trans-item-head,
    body.is-mobile-client .hero-market-card,
    body.is-mobile-client .setup-region-top,
    body.is-mobile-client .setup-region-alt {
      flex-direction: column;
      align-items: flex-start;
    }

    body.is-mobile-client .preset-row .copy-btn,
    body.is-mobile-client .marketplace-head .copy-btn,
    body.is-mobile-client .copy-row .copy-btn {
      width: 100%;
      justify-content: center;
    }

    body.is-mobile-client .transparency-feed,
    body.is-mobile-client .transparency-feed--payouts {
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    body.is-mobile-client .transparency-summary {
      grid-template-columns: 1fr;
    }

    body.is-mobile-client .trans-item-grid,
    body.is-mobile-client .trans-block-facts {
      grid-template-columns: 1fr;
    }

    body.is-mobile-client .trans-item,
    body.is-mobile-client .trans-block-row {
      padding: 14px;
    }

    body.is-mobile-client .trans-block-titleline {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    body.is-mobile-client .trans-block-time {
      font-size: 13px;
      line-height: 1.45;
    }

    body.is-mobile-client .trans-block-progress-meta {
      gap: 6px;
      flex-wrap: wrap;
    }

    body.is-mobile-client .transparency-support {
      gap: 12px;
    }

    body.is-mobile-client .hero-market-card,
    body.is-mobile-client .marketplace-card,
    body.is-mobile-client .preset-row {
      padding: 12px;
    }

    body.is-mobile-client .table-scroll {
      margin-inline: -6px;
      padding-inline: 6px;
    }

    @media (max-width: 720px) {
      header.top { grid-template-columns: 1fr; align-items: flex-start; }
      .tabs { justify-self: start; }
      .controls { width: 100%; justify-content: space-between; }
      .stats-bar { grid-template-columns: 1fr; }
      .hero-stat-head { flex-wrap: wrap; }
      .hero-stat-price { text-align: left; }
      .wrap { padding: 18px 12px 34px; }
      .panel,
      .start-card,
      .transparency-primary .card,
      .transparency-support .card { padding: 14px; }
      .modal-head { grid-template-columns: 1fr; }
      .modal-grid { grid-template-columns: 1fr; }
      .modal-auth-summary { grid-template-columns: 1fr; }
      .wallet-chart-grid { grid-template-columns: 1fr; }
      .start-form-grid,
      .start-info-grid,
      .setup-model-grid,
      .walkthrough-grid,
      .pplns-output-grid,
      .variance-grid { grid-template-columns: 1fr; }
      .field.span-2 { grid-column: auto; }
      .transparency-feed,
      .transparency-feed--payouts {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
      .transparency-summary { grid-template-columns: 1fr; }
      .transparency-card-head,
      .trans-item-head,
      .marketplace-head,
      .preset-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .trans-block-titleline,
      .hero-market-card {
        flex-direction: column;
        align-items: flex-start;
      }
      .preset-row .copy-btn,
      .marketplace-head .copy-btn {
        width: 100%;
        justify-content: center;
      }
      .qr-grid,
      .marketplace-grid,
      .preset-section-body {
        grid-template-columns: 1fr;
      }
      body.is-mobile-client .mini-grid,
      body.is-mobile-client .stats-bar { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .glow, .panel { animation: none; }
    }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.hidden-display { display: none; }