:root {
  --bg: #040814;
  --panel: rgba(12, 24, 48, 0.72);
  --panel-strong: rgba(14, 31, 61, 0.92);
  --border: rgba(122, 178, 255, 0.18);
  --text: #f5f9ff;
  --muted: #91a5c6;
  --cyan: #35d7ff;
  --blue: #4e8cff;
  --violet: #8c65ff;
  --green: #41e6a1;
  --gold: #ffc85c;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(33, 92, 192, .22), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(116, 58, 219, .18), transparent 28%),
    linear-gradient(180deg, #050815 0%, #071020 55%, #050914 100%);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(66, 131, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 131, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.bg-glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .16;
  pointer-events: none;
}

.bg-glow-a {
  background: #1d79ff;
  top: 2%;
  left: -160px;
}

.bg-glow-b {
  background: #8b4dff;
  top: 30%;
  right: -220px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  padding: 14px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(129, 176, 255, .12);
  backdrop-filter: blur(20px);
  background: rgba(4, 8, 20, .72);
}

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

.brand-logo {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(70, 138, 255, .35);
}

.brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
}

.brand-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .11em;
}

.nav {
  display: flex;
  gap: 22px;
}

.nav a {
  color: #b9c8e2;
  text-decoration: none;
  font-size: 13px;
}

.nav a:hover {
  color: white;
}

.wallet-btn,
.primary-btn,
.secondary-btn,
.claim-btn {
  border-radius: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(95, 166, 255, .3);
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.wallet-btn,
.primary-btn {
  background:
    linear-gradient(135deg, #2b75ff, #6958ff);
  box-shadow: 0 10px 32px rgba(58, 111, 255, .2);
}

.hero-auth-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: nowrap;
}

#walletAuthBtn {
  flex: 0 0 auto;
}

#walletAuthBtn:disabled {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(151, 164, 190, .22);
  color: #74829d;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
  filter: saturate(.35);
}

#walletAuthState {
  flex: 1 1 auto;
  min-width: 0;
  color: #7f8da8;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.secondary-btn {
  background: rgba(255, 255, 255, .04);
}

.claim-btn {
  width: 100%;
  margin-top: 22px;
  background: rgba(255, 255, 255, .04);
  color: #71809d;
  cursor: not-allowed;
}

main {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 64px;
  padding: 70px 0;
}

.eyebrow,
.section-kicker {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.hero h1 {
  margin: 18px 0;
  font-size: clamp(52px, 7vw, 88px);
  line-height: .98;
  letter-spacing: -.045em;
}

.hero-text {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.7;
  color: #a8b8d4;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.network-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.network-badges span {
  border: 1px solid rgba(84, 155, 255, .2);
  background: rgba(41, 85, 158, .12);
  color: #aac8f8;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
}

.glass-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(
      145deg,
      rgba(21, 38, 72, .78),
      rgba(8, 18, 37, .6)
    );
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: blur(18px);
  border-radius: 22px;
}

.hero-panel {
  padding: 26px;
}

.panel-header,
.card-title {
  display: flex;
  justify-content: space-between;
  color: #b8cae9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.live-dot {
  color: var(--green);
}

.big-stat {
  padding: 36px 0 28px;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
}

.stat-value {
  margin-top: 8px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.stat-unit {
  color: var(--cyan);
  margin-top: 4px;
}

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

.mini-grid > div {
  padding: 16px;
  background: rgba(255, 255, 255, .035);
  border-radius: 14px;
}

.mini-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.mini-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
}

.chain-line {
  margin-top: 20px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: 12px;
}

.chain-line code {
  color: #d9e8ff;
}

.metrics-section,
.dashboard-section,
.simulator-section,
.tokenomics-section,
.tiers-section,
.architecture-section,
.disclosure-section {
  padding: 72px 0;
}

section h2 {
  margin: 12px 0 28px;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.03em;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.metric-card {
  padding: 22px;
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin: 12px 0;
  font-size: 26px;
}

.metric-card small {
  color: #7185a9;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.account-card,
.power-card,
.reward-card {
  padding: 24px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  font-size: 13px;
}

.account-row span {
  color: var(--muted);
}

.account-row strong {
  text-align: right;
}

.status-preview {
  color: var(--gold);
}

.power-number {
  margin-top: 30px;
  font-size: 52px;
  font-weight: 900;
}

.power-unit {
  color: var(--cyan);
  font-size: 12px;
}

.power-breakdown,
.reward-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.power-breakdown > div,
.reward-grid > div {
  padding: 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.power-breakdown span,
.reward-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.power-breakdown strong,
.reward-grid strong {
  display: block;
  margin-top: 7px;
  font-size: 15px;
}

.simulator-grid,
.tokenomics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.simulator-controls,
.distribution-card,
.donut-card,
.legend-card {
  padding: 28px;
}

.simulator-controls label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

.simulator-controls label span {
  color: white;
  font-weight: 800;
}

input[type="range"] {
  width: 100%;
  margin: 28px 0 10px;
  accent-color: #4d8dff;
}

.scale-row {
  display: flex;
  justify-content: space-between;
  color: #627392;
  font-size: 11px;
}

.tier-display {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tier-display span {
  color: var(--muted);
}

.allocation-row,
.legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
}

.allocation-row span,
.legend-row span {
  color: #b6c7e2;
}

.allocation-bar {
  height: 6px;
  margin-top: 7px;
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
  overflow: hidden;
}

.allocation-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--blue), var(--cyan));
}

.donut-card {
  display: grid;
  place-items: center;
  min-height: 410px;
}

.donut-wrap {
  width: 270px;
  height: 270px;
  position: relative;
}

.donut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(
      #4e8cff 0 30%,
      #67c27a 30% 50%,
      #f48b50 50% 70%,
      #ffd761 70% 85%,
      #a989ff 85% 90%,
      #ff8bb4 90% 95%,
      #5e9cff 95% 98%,
      #72d58b 98% 100%
    );
}

.donut::after {
  content: "";
  position: absolute;
  inset: 52px;
  border-radius: 50%;
  background: #091225;
  box-shadow: inset 0 0 40px rgba(69, 136, 255, .12);
}

.donut-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
}

.donut-center strong {
  font-size: 42px;
}

.donut-center span {
  color: var(--muted);
  font-size: 12px;
}

.legend-row i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 10px;
}

.c1 { background:#4e8cff; }
.c2 { background:#67c27a; }
.c3 { background:#f48b50; }
.c4 { background:#ffd761; }
.c5 { background:#a989ff; }
.c6 { background:#ff8bb4; }
.c7 { background:#5e9cff; }
.c8 { background:#72d58b; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tier-card {
  padding: 24px;
}

.tier-card > span {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 900;
}

.tier-card h3 {
  margin: 16px 0 8px;
  font-size: 22px;
}

.tier-card p {
  color: var(--muted);
}

.tier-featured {
  border-color: rgba(77, 141, 255, .55);
  box-shadow:
    0 0 50px rgba(58, 113, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.crocvault-story-section {
  margin-top: 38px;
}

.crocvault-story-lead {
  max-width: 920px;
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

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

.crocvault-story-card {
  min-width: 0;
  padding: 24px;
}

.crocvault-story-card h3 {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.35;
}

.crocvault-story-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.crocvault-story-note {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(44, 216, 255, .18);
  border-radius: 18px;
  background: rgba(10, 29, 56, .5);
}

.crocvault-story-note strong {
  display: block;
  font-size: 14px;
}

.crocvault-story-note span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.crocvault-story-disclaimer {
  margin-top: 12px;
  color: #8294b3;
  font-size: 11px;
  line-height: 1.65;
}

.architecture-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.arch-node {
  flex: 1;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(14, 29, 57, .55);
}

.arch-node strong {
  display: block;
  font-size: 18px;
}

.arch-node span {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.arch-arrow {
  align-self: center;
  color: var(--cyan);
  font-size: 24px;
}

.narrative-system {
  margin: 28px 0 34px;
  padding: 28px;
  border: 1px solid rgba(74, 136, 255, .22);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(18, 42, 78, .72),
      rgba(32, 23, 72, .48)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 20px 60px rgba(0, 0, 0, .12);
}

.narrative-path {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.narrative-intro {
  max-width: 900px;
  margin: 14px 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.narrative-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.narrative-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(105, 153, 255, .18);
  border-radius: 18px;
  background: rgba(8, 23, 49, .58);
}

.narrative-card strong {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}

.narrative-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.narrative-step {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(44, 216, 255, .24);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(18, 87, 121, .16);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

.disclosure-card {
  padding: 30px;
}

.disclosure-card p {
  color: var(--muted);
  line-height: 1.8;
}

footer {
  margin-top: 40px;
  padding: 34px 5vw;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #6f82a5;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 980px) {

  .nav {
    display: none;
  }

  .hero,
  .simulator-grid,
  .tokenomics-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .architecture-flow {
    flex-direction: column;
  }

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

  .story-grid {
    grid-template-columns: 1fr;
  }

  .crocvault-story-grid {
    grid-template-columns: 1fr;
  }

  .arch-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 620px) {

  .narrative-system {
    padding: 20px;
  }

  .narrative-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 12px 4vw;
  }

  .brand-sub {
    display: none;
  }

  .wallet-btn {
    padding: 10px 12px;
    font-size: 11px;
  }

  .hero {
    min-height: auto;
    padding: 56px 0;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .metric-grid,
  .tier-grid {
    grid-template-columns: 1fr;
  }

  footer {
    gap: 15px;
    flex-direction: column;
  }
}

/* TLG Wallet Mining V1 — first-screen console + i18n */

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(122, 178, 255, .18);
  background: rgba(255, 255, 255, .035);
  border-radius: 10px;
}

.lang-btn {
  min-width: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8498b9;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.lang-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2b75ff, #6958ff);
  box-shadow: 0 5px 18px rgba(57, 108, 255, .22);
}

.hero-console {
  padding: 24px;
}

.hero-wallet-row {
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
}

.hero-wallet-row span {
  color: var(--muted);
}

.hero-wallet-row strong {
  color: #e8f1ff;
}

.hero-action-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
  margin-top: 14px;
}

.hero-action-btn {
  width: 100%;
}

.hero-console-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.hero-console-stat {
  min-height: 84px;
  padding: 15px;
  border: 1px solid rgba(126, 178, 255, .09);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(42, 72, 128, .18),
      rgba(255, 255, 255, .025)
    );
}

.hero-console-stat span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.hero-console-stat strong {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.hero-claim-btn {
  margin-top: 12px;
}

.hero-network-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.hero-network-meta > div {
  padding: 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}

.hero-network-meta span {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.hero-network-meta strong {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}

@media (max-width: 620px) {

  .top-actions {
    gap: 6px;
  }

  .lang-switch {
    padding: 3px;
  }

  .lang-btn {
    min-width: 36px;
    padding: 7px;
  }

  .hero-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-console-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-network-meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* TLG Wallet Mining V1 — advanced dashboard round 1 */

.advanced-dashboard-section {
  padding: 72px 0;
}

.advanced-dashboard-intro {
  max-width: 760px;
  margin: -12px 0 30px;
  color: var(--muted);
  line-height: 1.7;
}

.advanced-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.intelligence-card {
  padding: 24px;
  overflow: hidden;
}

.release-curve-card {
  grid-column: span 2;
}

.intel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.intel-label {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.intel-header strong {
  display: block;
  margin-top: 7px;
  font-size: 21px;
}

.model-badge {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid rgba(65,230,161,.18);
  background: rgba(65,230,161,.07);
  color: var(--green);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.release-chart {
  height: 260px;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(10,1fr);
  align-items: end;
  gap: 10px;
  padding: 18px 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(80,140,255,.045) 1px, transparent 1px);
  background-size: 100% 25%;
}

.release-bar {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  text-align: center;
}

.release-bar i {
  display: block;
  width: 100%;
  height: var(--h);
  min-height: 16px;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(
      180deg,
      rgba(53,215,255,.95),
      rgba(78,140,255,.34)
    );
}

.release-bar span,
.release-bar b {
  margin-top: 6px;
  font-size: 9px;
}

.release-bar span {
  color: #8396b7;
}

.release-bar b {
  color: #dbe9ff;
}

.intel-footer {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.intel-footer > div {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

.intel-footer span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.intel-footer strong {
  display: block;
  margin-top: 7px;
  font-size: 17px;
}

.hashpower-chart {
  margin-top: 28px;
}

.hashpower-chart svg {
  width: 100%;
  height: 220px;
}

.chart-grid-lines line {
  stroke: rgba(122,178,255,.08);
  stroke-width: 1;
}

.hashpower-area {
  fill: url(#hashpowerArea);
}

.hashpower-line {
  fill: none;
  stroke: #35d7ff;
  stroke-width: 3;
}

.hashpower-axis {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: #6f82a5;
  font-size: 9px;
}

.reserve-visual {
  margin-top: 26px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 24px;
  align-items: center;
}

.reserve-ring {
  width: 190px;
  height: 190px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  background:
    conic-gradient(
      #4e8cff 0 50%,
      #35d7ff 50% 70%,
      #8c65ff 70% 85%,
      #ffc85c 85% 92%,
      #41e6a1 92% 97%,
      #ff8bb4 97% 100%
    );
}

.reserve-ring::after {
  content: "";
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: #091225;
}

.reserve-ring-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
}

.reserve-ring-center strong {
  font-size: 30px;
}

.reserve-ring-center span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.reserve-legend {
  display: grid;
  gap: 10px;
}

.reserve-legend > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
}

.reserve-legend em {
  font-style: normal;
}

.reserve-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
}

.r1 { background:#4e8cff; }
.r2 { background:#35d7ff; }
.r3 { background:#8c65ff; }
.r4 { background:#ffc85c; }
.r5 { background:#41e6a1; }
.r6 { background:#ff8bb4; }

.model-disclosure {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7083a6;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .advanced-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .release-curve-card {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  .intelligence-card {
    padding: 18px;
  }

  .release-chart {
    height: 210px;
    gap: 5px;
  }

  .release-bar span,
  .release-bar b {
    font-size: 7px;
  }

  .reserve-visual {
    grid-template-columns: 1fr;
  }

  .reserve-ring {
    width: 170px;
    height: 170px;
  }
}

/* TLG Wallet Mining V1 — advanced dashboard round 2 */

.story-section {
  margin-top: 34px;
}

.story-lead {
  max-width: 900px;
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

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

.story-card {
  position: relative;
  min-width: 0;
  padding: 26px;
}

.story-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(44, 216, 255, .22);
  color: var(--cyan);
  background: rgba(18, 87, 121, .14);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.story-card h3 {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.35;
}

.story-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.round2-intelligence-section {
  padding: 72px 0;
}

.round2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.round2-card {
  padding: 24px;
}

.mainnet-verification-card {
  grid-column: span 2;
}

.round2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.round2-header strong {
  display: block;
  margin-top: 7px;
  font-size: 21px;
}

.verified-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(65,230,161,.25);
  background: rgba(65,230,161,.08);
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
}

.verified-badge i,
.status-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.verified-badge i {
  background: var(--green);
  box-shadow: 0 0 12px rgba(65,230,161,.8);
}

.verification-list {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.verification-list > div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(255,255,255,.03);
  min-width: 0;
}

.verification-list span {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.verification-list strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #e5efff;
  font-size: 12px;
}

.verification-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7184a6;
  font-size: 10px;
  line-height: 1.65;
}

.rwa-stack {
  margin-top: 26px;
}

.rwa-layer {
  padding: 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  border: 1px solid rgba(122,178,255,.10);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(49,81,145,.13),
      rgba(255,255,255,.025)
    );
}

.rwa-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-content: center;
  border-radius: 10px;
  background: rgba(78,140,255,.13);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

.rwa-layer strong {
  font-size: 16px;
}

.rwa-layer p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.rwa-connector {
  width: 1px;
  height: 20px;
  margin: 0 auto;
  background:
    linear-gradient(
      to bottom,
      rgba(53,215,255,.15),
      rgba(53,215,255,.9),
      rgba(53,215,255,.15)
    );
}

.node-status-grid {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.node-status-item {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.node-status-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.status-model {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(53,215,255,.55);
}

.status-review {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255,200,92,.55);
}

.node-status-item > span {
  display: block;
  margin-top: 8px;
  color: #bfcee7;
  font-size: 11px;
}

.node-status-item small {
  display: block;
  margin-top: 5px;
  color: #6e81a2;
  font-size: 8px;
  letter-spacing: .08em;
}

@media (max-width: 980px) {
  .round2-grid {
    grid-template-columns: 1fr;
  }

  .mainnet-verification-card {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  .round2-card {
    padding: 18px;
  }

  .verification-list {
    grid-template-columns: 1fr;
  }

  .round2-header strong {
    font-size: 18px;
  }
}

/* TLG-MINING-MOBILE-OVERFLOW-FIX-01 */
@media (max-width: 620px) {
  .bg-glow-b {
    right: 0;
  }
}

/* TLG-MINING-HERO-GRID-MINWIDTH-FIX-01 */
@media (max-width: 620px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    min-width: 0;
  }
}

/* TLG-MINING-TOKENOMICS-MOBILE-OVERFLOW-FIX-01 */
@media (max-width: 620px) {
  .tokenomics-grid > * {
    min-width: 0;
  }

  .donut-wrap {
    width: min(270px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* TLG-MINING-MOBILE-WALLET-ROW-WRAP-FIX-01 */
@media (max-width: 620px) {
  .hero-wallet-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
  }

  .hero-wallet-row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero-auth-row {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  #walletAuthState {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* TLG-MINING-MOBILE-TOPBAR-WALLET-NOWRAP-01 */
@media (max-width: 380px) {
  .topbar {
    gap: 8px;
    padding: 10px 4vw;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .brand-name {
    font-size: 11px;
    letter-spacing: .06em;
  }

  .top-actions {
    flex: 0 0 auto;
    gap: 4px;
  }

  .wallet-btn {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 8px 9px;
    font-size: 11px;
  }
}

/* TLG-MINING-MOBILE-NAV-TOGGLE-CSS-01 */
.mobile-nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(122, 178, 255, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: #e8f1ff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 980px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }
}

/* TLG-MINING-MOBILE-NAV-PANEL-CSS-01 */
.mobile-nav-panel[hidden] {
  display: none !important;
}

.mobile-nav-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 4vw;
  right: 4vw;
  z-index: 1000;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(122, 178, 255, .24);
  border-radius: 14px;
  background: rgba(8, 17, 34, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  backdrop-filter: blur(16px);
}

.mobile-nav-panel a {
  display: block;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 9px;
  color: #c8d8f2;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: rgba(122, 178, 255, .10);
  color: #ffffff;
  outline: none;
}

.mobile-nav-panel a[aria-current="page"] {
  background: rgba(72, 135, 255, .15);
  color: #ffffff;
}

@media (max-width: 980px) {
  .topbar {
    position: relative;
  }
}

@media (min-width: 981px) {
  .mobile-nav-panel {
    display: none !important;
  }
}

/* ==========================================================
   TLG FIVE HARVESTER DEVICE HALL V1
   ========================================================== */

.harvester-hall {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
}

.harvester-hall::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 156, 255, .10), transparent 68%);
  pointer-events: none;
}

.harvester-hall-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.harvester-hall-heading h2 {
  margin-bottom: 10px;
}

.harvester-hall-copy {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.harvester-hall-status {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid rgba(74, 153, 255, .22);
  border-radius: 999px;
  background: rgba(12, 31, 61, .72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.harvester-device-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.harvester-device-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.harvester-device-card:hover {
  transform: translateY(-4px);
  border-color: rgba(69, 176, 255, .45);
  box-shadow: 0 18px 55px rgba(0, 80, 180, .14);
}

.harvester-device-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.harvester-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(85, 188, 255, .35);
  border-radius: 999px;
  color: #8edfff;
  background: rgba(28, 110, 178, .12);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.harvester-state {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.harvester-machine {
  display: grid;
  place-items: center;
  height: 170px;
  margin: 12px 0 8px;
  perspective: 700px;
}

.machine-frame {
  position: relative;
  width: 126px;
  height: 142px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(101, 195, 255, .24);
  border-radius: 32px 32px 22px 22px;
  background:
    linear-gradient(145deg, rgba(19, 52, 92, .88), rgba(5, 14, 31, .95));
  box-shadow:
    inset 0 0 32px rgba(67, 154, 255, .12),
    0 18px 38px rgba(0, 0, 0, .30);
  transform: rotateX(3deg);
}

.machine-frame::before,
.machine-frame::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 68px;
  top: 35px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(89, 205, 255, .75), rgba(54, 99, 255, .10));
  box-shadow: 0 0 18px rgba(76, 172, 255, .32);
}

.machine-frame::before {
  left: -7px;
}

.machine-frame::after {
  right: -7px;
}

.machine-core {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(121, 220, 255, .62);
  background:
    radial-gradient(circle at 50% 45%, rgba(137, 231, 255, .30), rgba(18, 74, 146, .26) 38%, rgba(4, 12, 27, .92) 70%);
  box-shadow:
    0 0 15px rgba(64, 177, 255, .45),
    0 0 42px rgba(45, 103, 255, .22),
    inset 0 0 24px rgba(103, 216, 255, .20);
}

.machine-core strong {
  position: relative;
  z-index: 2;
  color: #d9f7ff;
  font-size: 16px;
  letter-spacing: .08em;
}

.machine-orbit {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(94, 187, 255, .20);
  border-radius: 50%;
}

.machine-orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 50%;
  top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: #8de6ff;
  box-shadow: 0 0 10px rgba(112, 221, 255, .85);
}

.machine-base {
  position: absolute;
  bottom: -8px;
  width: 82px;
  height: 15px;
  border: 1px solid rgba(85, 177, 255, .22);
  border-radius: 4px 4px 12px 12px;
  background: rgba(9, 25, 50, .96);
}

.harvester-name {
  text-align: center;
  margin-bottom: 15px;
}

.harvester-name h3 {
  margin: 0;
  font-size: 20px;
}

.harvester-name span {
  display: block;
  margin-top: 5px;
  color: #82d7ff;
  font-size: 12px;
  letter-spacing: .06em;
}

.harvester-range {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.harvester-range span,
.harvester-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.harvester-range strong {
  display: block;
  margin-top: 6px;
  color: #eef8ff;
  font-size: 13px;
}

.harvester-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.harvester-metrics > div {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  background: rgba(4, 15, 31, .42);
}

.harvester-metrics strong {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #d9edff;
}

.harvester-activate-btn {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(70, 171, 255, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 112, 203, .25), rgba(26, 64, 145, .18));
  color: #7e9bb7;
  font-weight: 800;
  cursor: not-allowed;
}

.harvester-device-card > small {
  display: block;
  min-height: 30px;
  margin-top: 9px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  line-height: 1.45;
}

.harvester-mars .machine-core {
  box-shadow:
    0 0 18px rgba(90, 172, 255, .52),
    0 0 48px rgba(77, 110, 255, .24),
    inset 0 0 24px rgba(103, 216, 255, .20);
}

.harvester-jove .machine-frame {
  transform: rotateX(3deg) scale(1.035);
}

.harvester-helios .machine-core {
  box-shadow:
    0 0 22px rgba(104, 203, 255, .58),
    0 0 55px rgba(72, 135, 255, .28),
    inset 0 0 28px rgba(120, 225, 255, .24);
}

.harvester-nova {
  border-color: rgba(89, 146, 255, .48);
  box-shadow:
    0 0 48px rgba(50, 100, 255, .12),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.harvester-nova .machine-frame {
  transform: rotateX(3deg) scale(1.07);
}

.harvester-nova .machine-core {
  box-shadow:
    0 0 25px rgba(116, 224, 255, .70),
    0 0 68px rgba(70, 108, 255, .34),
    inset 0 0 30px rgba(132, 231, 255, .28);
}

@media (max-width: 1180px) {
  .harvester-device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .harvester-hall-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (max-width: 560px) {
  .harvester-device-grid {
    grid-template-columns: 1fr;
  }

  .harvester-device-card {
    padding: 20px;
  }

  .harvester-machine {
    height: 185px;
  }
}
/* TLG HARVESTER DETAIL POLISH V2 */

/* Shared progressive energy system */
.harvester-device-card {
  --harvester-accent: 112, 221, 255;
  --harvester-accent-2: 75, 135, 255;
}

.harvester-device-card .machine-frame {
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.harvester-device-card .machine-core {
  border-color: rgba(var(--harvester-accent), .68);
}

.harvester-device-card .machine-orbit {
  border-color: rgba(var(--harvester-accent), .28);
}

.harvester-device-card .machine-orbit::after {
  background: rgb(var(--harvester-accent));
  box-shadow:
    0 0 10px rgba(var(--harvester-accent), .88),
    0 0 22px rgba(var(--harvester-accent), .42);
}

.harvester-device-card .harvester-tier {
  border-color: rgba(var(--harvester-accent), .42);
  color: rgb(var(--harvester-accent));
  background: rgba(var(--harvester-accent), .08);
}

.harvester-device-card .harvester-name span {
  color: rgb(var(--harvester-accent));
}

/* M1 — Luna Core / entry core */
.harvester-luna {
  --harvester-accent: 145, 220, 255;
  --harvester-accent-2: 88, 139, 210;
}

.harvester-luna .machine-frame {
  transform: rotateX(3deg) scale(.96);
}

.harvester-luna .machine-core {
  box-shadow:
    0 0 13px rgba(145, 220, 255, .38),
    0 0 30px rgba(88, 139, 210, .16),
    inset 0 0 20px rgba(145, 220, 255, .15);
}

/* M2 — Mars Core / energized core */
.harvester-mars {
  --harvester-accent: 255, 126, 92;
  --harvester-accent-2: 255, 78, 91;
}

.harvester-mars .machine-frame {
  border-color: rgba(255, 126, 92, .28);
  transform: rotateX(3deg) scale(1);
  box-shadow:
    inset 0 0 32px rgba(255, 105, 82, .10),
    0 18px 38px rgba(0, 0, 0, .30);
}

.harvester-mars .machine-core {
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255, 161, 112, .34),
      rgba(136, 48, 63, .28) 38%,
      rgba(16, 10, 24, .94) 70%);
  box-shadow:
    0 0 18px rgba(255, 115, 86, .50),
    0 0 44px rgba(255, 71, 98, .22),
    inset 0 0 24px rgba(255, 170, 122, .18);
}

/* M3 — Jove Core / dual-ring core */
.harvester-jove {
  --harvester-accent: 91, 228, 174;
  --harvester-accent-2: 72, 172, 255;
}

.harvester-jove .machine-frame {
  border-color: rgba(91, 228, 174, .30);
  transform: rotateX(3deg) scale(1.035);
}

.harvester-jove .machine-core {
  background:
    radial-gradient(circle at 50% 45%,
      rgba(112, 245, 190, .30),
      rgba(30, 106, 104, .26) 39%,
      rgba(5, 18, 28, .94) 71%);
  box-shadow:
    0 0 20px rgba(91, 228, 174, .52),
    0 0 48px rgba(72, 172, 255, .22),
    inset 0 0 26px rgba(105, 236, 190, .20);
}

.harvester-jove .machine-orbit::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(91, 228, 174, .24);
  border-radius: 50%;
}

/* M4 — Helios Core / high-power solar core */
.harvester-helios {
  --harvester-accent: 255, 204, 86;
  --harvester-accent-2: 255, 136, 61;
}

.harvester-helios .machine-frame {
  border-color: rgba(255, 204, 86, .36);
  transform: rotateX(3deg) scale(1.055);
  box-shadow:
    inset 0 0 36px rgba(255, 179, 61, .11),
    0 20px 45px rgba(0, 0, 0, .31);
}

.harvester-helios .machine-core {
  background:
    radial-gradient(circle at 50% 44%,
      rgba(255, 233, 142, .42),
      rgba(171, 90, 32, .30) 38%,
      rgba(22, 13, 20, .95) 72%);
  box-shadow:
    0 0 23px rgba(255, 204, 86, .62),
    0 0 56px rgba(255, 136, 61, .29),
    inset 0 0 29px rgba(255, 225, 131, .24);
}

/* M5 — Nova Core / flagship stellar core */
.harvester-nova {
  --harvester-accent: 177, 129, 255;
  --harvester-accent-2: 82, 209, 255;
  border-color: rgba(177, 129, 255, .52);
  box-shadow:
    0 0 54px rgba(111, 72, 255, .15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.harvester-nova .machine-frame {
  border-color: rgba(177, 129, 255, .46);
  transform: rotateX(3deg) scale(1.09);
  box-shadow:
    inset 0 0 42px rgba(116, 90, 255, .13),
    0 22px 52px rgba(0, 0, 0, .34);
}

.harvester-nova .machine-core {
  background:
    radial-gradient(circle at 50% 44%,
      rgba(205, 178, 255, .42),
      rgba(72, 90, 185, .32) 37%,
      rgba(7, 11, 29, .96) 72%);
  box-shadow:
    0 0 26px rgba(177, 129, 255, .72),
    0 0 68px rgba(82, 209, 255, .34),
    inset 0 0 32px rgba(207, 188, 255, .28);
}

.harvester-nova .machine-orbit::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(177, 129, 255, .20);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(177, 129, 255, .12);
}

/* Center the second row when viewport becomes the 3 + 2 fleet layout */
@media (max-width: 1180px) and (min-width: 781px) {
  .harvester-device-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .harvester-device-card {
    grid-column: span 2;
  }

  .harvester-helios {
    grid-column: 2 / span 2;
  }

  .harvester-nova {
    grid-column: 4 / span 2;
  }
}

/* Reset explicit placement for tablet/mobile layouts */
@media (max-width: 780px) {
  .harvester-helios,
  .harvester-nova {
    grid-column: auto;
  }
}
/* TLG HARVESTER ACTIVATION UI V1 */

body.harvester-activation-open {
  overflow: hidden;
}

.harvester-activate-btn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
  box-shadow:
    0 0 24px rgba(78, 142, 255, .12);
}

.harvester-activate-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(105, 174, 255, .58);
  box-shadow:
    0 0 30px rgba(78, 142, 255, .20);
}

.harvester-activation-overlay[hidden] {
  display: none;
}

.harvester-activation-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    rgba(3, 8, 22, .78);
  backdrop-filter:
    blur(14px);
}

.harvester-activation-panel {
  width: min(620px, 100%);
  max-height: min(820px, 92vh);
  overflow-y: auto;
  padding: 26px;
  border:
    1px solid rgba(105, 174, 255, .30);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .48),
    0 0 60px rgba(66, 103, 255, .10);
}

.activation-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.activation-panel-head h3 {
  margin:
    8px 0 0;
  font-size:
    clamp(24px, 3vw, 34px);
}

.activation-close-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border:
    1px solid rgba(255,255,255,.12);
  background:
    rgba(255,255,255,.04);
  color:
    inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.activation-device-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 18px;
  border-radius: 16px;
  border:
    1px solid rgba(105,174,255,.18);
  background:
    rgba(13, 31, 65, .38);
}

.activation-device-summary > div:last-child {
  display: grid;
  gap: 4px;
}

.activation-device-summary > div:last-child > strong {
  font-size: 20px;
}

.activation-device-summary > div:last-child > span {
  opacity: .68;
}

.activation-device-badge {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border:
    1px solid rgba(105,174,255,.38);
  background:
    radial-gradient(
      circle,
      rgba(90,156,255,.25),
      rgba(20,40,80,.22)
    );
  box-shadow:
    0 0 30px rgba(71,137,255,.12);
}

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

.activation-summary-grid > div,
.activation-preview-summary > div {
  min-width: 0;
  padding: 15px;
  border-radius: 14px;
  border:
    1px solid rgba(255,255,255,.08);
  background:
    rgba(5, 16, 39, .46);
}

.activation-summary-grid span,
.activation-preview-summary span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .60;
}

.activation-summary-grid strong,
.activation-preview-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.activation-amount-field {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.activation-amount-field > span {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .70;
}

.activation-input-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 58px;
  border-radius: 15px;
  border:
    1px solid rgba(105,174,255,.24);
  background:
    rgba(4, 14, 34, .66);
}

.activation-input-shell:focus-within {
  border-color:
    rgba(105,174,255,.62);
  box-shadow:
    0 0 0 3px rgba(80,140,255,.08);
}

.activation-input-shell input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
}

.activation-input-shell strong {
  white-space: nowrap;
  opacity: .75;
}

.activation-validation {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border:
    1px solid rgba(255,255,255,.08);
  background:
    rgba(255,255,255,.025);
  font-size: 13px;
  line-height: 1.5;
}

.activation-validation[data-state="error"] {
  border-color:
    rgba(255, 108, 121, .32);
  background:
    rgba(255, 75, 91, .07);
}

.activation-validation[data-state="success"] {
  border-color:
    rgba(72, 224, 164, .32);
  background:
    rgba(46, 194, 139, .07);
}

.activation-safety-note {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 13px;
  border:
    1px solid rgba(110, 224, 196, .18);
  background:
    rgba(45, 171, 146, .055);
}

.activation-safety-note strong {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.activation-safety-note span {
  font-size: 13px;
  line-height: 1.5;
  opacity: .72;
}

.activation-panel-actions {
  display: grid;
  grid-template-columns:
    minmax(0, .8fr)
    minmax(0, 1.2fr);
  gap: 12px;
  margin-top: 18px;
}

.activation-panel-actions button {
  min-height: 48px;
}

@media (max-width: 560px) {
  .harvester-activation-overlay {
    padding: 12px;
    place-items: end center;
  }

  .harvester-activation-panel {
    width: 100%;
    max-height: 88vh;
    padding: 20px;
    border-radius:
      22px 22px 12px 12px;
  }

  .activation-summary-grid,
  .activation-preview-summary,
  .activation-panel-actions {
    grid-template-columns: 1fr;
  }
}

/* END TLG HARVESTER ACTIVATION UI V1 */

/* ==========================================================
   TLG-MY-HARVESTERS-DASHBOARD-V1
   Personal Stellar Harvester management deck
   ========================================================== */

.my-harvesters-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 72px 0 24px;
  padding: 34px;
  border: 1px solid rgba(79, 124, 255, .24);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(91, 73, 255, .22),
      transparent 24%
    ),
    radial-gradient(
      circle at 8% 30%,
      rgba(0, 213, 255, .10),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(6, 21, 60, .96),
      rgba(7, 17, 49, .94) 54%,
      rgba(24, 15, 68, .92)
    );
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.my-harvesters-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.3px);
  background-size: 62px 62px;
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.75),
      transparent 74%
    );
}

.my-harvesters-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -240px;
  top: -250px;
  border-radius: 50%;
  border: 1px solid rgba(135, 108, 255, .32);
  box-shadow:
    0 0 90px rgba(67, 70, 255, .18),
    inset 0 0 80px rgba(68, 38, 196, .18);
}

.my-harvesters-orbit {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(62, 202, 255, .13);
  border-radius: 50%;
}

.my-harvesters-orbit-a {
  width: 320px;
  height: 90px;
  right: 54px;
  top: 78px;
  transform: rotate(-18deg);
}

.my-harvesters-orbit-b {
  width: 240px;
  height: 66px;
  right: 90px;
  top: 90px;
  transform: rotate(14deg);
}

.my-harvesters-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 26px;
}

.my-harvesters-heading h2 {
  margin: 6px 0 10px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  color: #f5f8ff;
  letter-spacing: -.035em;
}

.my-harvesters-heading p {
  max-width: 720px;
  margin: 0;
  color: #8fa2c8;
  line-height: 1.75;
}

.my-harvesters-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.my-harvesters-mode,
.my-harvesters-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.my-harvesters-mode {
  border: 1px solid rgba(37, 227, 255, .2);
  color: #8ddff5;
  background: rgba(4, 26, 59, .72);
}

.my-harvesters-mode i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25e3ff;
  box-shadow: 0 0 14px #25e3ff;
}

.my-harvesters-back-link {
  text-decoration: none;
  color: #eaf4ff;
  border: 1px solid rgba(94, 132, 255, .34);
  background:
    linear-gradient(
      135deg,
      rgba(29, 106, 240, .26),
      rgba(104, 65, 255, .24)
    );
}

.my-harvesters-back-link:hover {
  border-color: rgba(89, 219, 255, .58);
  transform: translateY(-1px);
}

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

.my-harvesters-stat {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
  padding: 19px;
  border-color: rgba(80, 122, 208, .18);
  background:
    linear-gradient(
      150deg,
      rgba(12, 36, 79, .88),
      rgba(8, 22, 56, .82)
    );
}

.my-harvesters-stat-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 900;
}

.stat-usdt {
  color: #45cfff;
  background: rgba(21, 143, 255, .14);
  box-shadow: inset 0 0 24px rgba(20, 153, 255, .12);
}

.stat-output {
  color: #42f0c4;
  background: rgba(34, 224, 163, .13);
}

.stat-claimable {
  color: #bf83ff;
  background: rgba(154, 83, 255, .14);
}

.stat-locked {
  color: #ffd35e;
  background: rgba(255, 189, 44, .12);
}

.my-harvesters-stat > div:last-child {
  min-width: 0;
}

.my-harvesters-stat span,
.my-harvesters-stat small {
  display: block;
}

.my-harvesters-stat span {
  margin-bottom: 5px;
  color: #8799bd;
  font-size: 12px;
}

.my-harvesters-stat strong {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: #f3f7ff;
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.my-harvesters-stat small {
  color: #64779f;
  font-size: 10px;
  line-height: 1.4;
}

.my-harvesters-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
}

.my-harvesters-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.my-harvesters-toolbar strong {
  color: #f4f7ff;
  font-size: 18px;
}

.my-harvesters-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: #71e9ff;
  background: rgba(40, 187, 255, .12);
  border: 1px solid rgba(55, 207, 255, .22);
  font-size: 11px;
  font-weight: 800;
}

.my-harvesters-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(3, 13, 39, .56);
  border: 1px solid rgba(94, 118, 180, .12);
}

.my-harvesters-tabs button {
  border: 0;
  border-radius: 9px;
  padding: 7px 12px;
  color: #7083aa;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.my-harvesters-tabs button.active {
  color: #eaf7ff;
  background:
    linear-gradient(
      135deg,
      rgba(39, 145, 255, .23),
      rgba(75, 76, 224, .20)
    );
}

.my-harvester-empty {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 180px;
  align-items: center;
  gap: 28px;
  min-height: 224px;
  padding: 26px 30px;
  border-color: rgba(55, 152, 244, .22);
  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(104, 72, 255, .15),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      rgba(10, 36, 76, .92),
      rgba(7, 23, 60, .88)
    );
}

.my-harvester-empty::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -94px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(102, 89, 255, .24);
  box-shadow:
    inset 0 0 70px rgba(89, 70, 255, .1),
    0 0 80px rgba(63, 93, 255, .08);
}

.my-harvester-empty-device {
  position: relative;
  display: grid;
  place-items: center;
  width: 146px;
  height: 146px;
  margin: auto;
}

.my-harvester-empty-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(69, 211, 255, .28);
}

.my-harvester-empty-ring.ring-a {
  width: 138px;
  height: 70px;
  transform: rotate(14deg);
}

.my-harvester-empty-ring.ring-b {
  width: 118px;
  height: 118px;
  border-color: rgba(131, 83, 255, .26);
}

.my-harvester-empty-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 28px;
  color: #9deeff;
  border: 1px solid rgba(62, 208, 255, .42);
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(43, 201, 255, .23),
      rgba(7, 35, 72, .88) 58%,
      rgba(8, 19, 49, .98)
    );
  box-shadow:
    0 0 40px rgba(42, 163, 255, .2),
    inset 0 0 28px rgba(55, 193, 255, .12);
}

.my-harvester-empty-core span {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.my-harvester-empty-core strong {
  margin-top: -12px;
  font-size: 32px;
  line-height: 1;
}

.my-harvester-empty-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #32dafd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.my-harvester-empty-copy h3 {
  margin: 0 0 10px;
  color: #f4f7ff;
  font-size: clamp(20px, 2.1vw, 28px);
}

.my-harvester-empty-copy p {
  max-width: 680px;
  margin: 0 0 20px;
  color: #8799bd;
  line-height: 1.75;
  font-size: 13px;
}

.my-harvester-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 11px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(92, 209, 255, .42);
  background:
    linear-gradient(
      100deg,
      rgba(17, 133, 245, .88),
      rgba(101, 66, 255, .92)
    );
  box-shadow:
    0 9px 26px rgba(40, 88, 255, .20);
}

.my-harvester-primary-action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.my-harvester-empty-status {
  position: relative;
  z-index: 2;
  text-align: right;
}

.my-harvester-empty-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  color: #67dff8;
  font-size: 11px;
}

.my-harvester-empty-status > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2cd7ff;
  box-shadow: 0 0 14px rgba(44, 215, 255, .8);
}

.my-harvester-empty-status strong {
  display: block;
  margin-bottom: 8px;
  color: rgba(230, 238, 255, .78);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: .08em;
}

.my-harvester-empty-status small {
  color: #596c94;
  font-size: 9px;
  letter-spacing: .16em;
}

.my-harvesters-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr .9fr;
  gap: 14px;
  margin-top: 14px;
}

.my-harvesters-panel {
  min-width: 0;
  padding: 20px;
  border-color: rgba(71, 115, 201, .17);
  background:
    linear-gradient(
      150deg,
      rgba(10, 31, 69, .86),
      rgba(6, 19, 49, .82)
    );
}

.my-harvesters-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 17px;
}

.my-harvesters-panel-head span {
  display: block;
  margin-bottom: 3px;
  color: #27d9fd;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.my-harvesters-panel-head h3 {
  margin: 0;
  color: #f2f6ff;
  font-size: 16px;
}

.my-harvesters-panel-head small {
  color: #7183a6;
  font-size: 10px;
}

.my-harvesters-table-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr .9fr;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 9px;
  color: #60749b;
  background: rgba(3, 14, 39, .5);
  font-size: 9px;
}

.my-harvesters-table-head.claim-head {
  grid-template-columns: 1.2fr 1fr .8fr;
}

.my-harvesters-empty-row {
  display: grid;
  place-items: center;
  min-height: 94px;
  padding: 18px;
  color: #60749a;
  text-align: center;
  font-size: 11px;
}

.my-harvesters-chart {
  position: relative;
  overflow: hidden;
  height: 128px;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(5, 23, 54, .66),
      rgba(4, 14, 36, .28)
    );
}

.my-harvesters-chart svg {
  position: absolute;
  inset: 12px 8px 22px;
  width: calc(100% - 16px);
  height: calc(100% - 34px);
}

.my-harvesters-chart-fill {
  fill: url(#myHarvesterChartFill);
}

.my-harvesters-chart-line {
  fill: none;
  stroke: #25e3ff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(37,227,255,.55));
  opacity: .55;
}

.chart-grid-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgba(124, 148, 200, .08);
}

.chart-grid-line.line-1 {
  top: 28%;
}

.chart-grid-line.line-2 {
  top: 52%;
}

.chart-grid-line.line-3 {
  top: 76%;
}

.chart-placeholder-label {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #64789d;
  font-size: 9px;
}

.my-harvesters-disclaimer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 11px 14px;
  border-radius: 11px;
  color: #7185aa;
  background: rgba(4, 16, 42, .52);
  border: 1px solid rgba(86, 117, 181, .12);
  font-size: 10px;
  line-height: 1.6;
}

.my-harvesters-disclaimer span {
  color: #22d8ff;
  font-size: 8px;
  text-shadow: 0 0 10px #22d8ff;
}

@media (max-width: 1100px) {
  .my-harvesters-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-harvesters-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .my-harvesters-bottom-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .my-harvesters-section {
    margin-top: 46px;
    padding: 22px 16px;
    border-radius: 22px;
  }

  .my-harvesters-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-harvesters-heading-actions {
    justify-content: flex-start;
  }

  .my-harvesters-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .my-harvesters-stat {
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
  }

  .my-harvesters-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-harvester-empty {
    grid-template-columns: 1fr;
    padding: 24px 18px;
    text-align: center;
  }

  .my-harvester-empty-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .my-harvester-empty-status {
    text-align: center;
  }

  .my-harvesters-bottom-grid {
    grid-template-columns: 1fr;
  }

  .my-harvesters-bottom-grid > :last-child {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .my-harvesters-stats {
    grid-template-columns: 1fr;
  }

  .my-harvesters-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .my-harvesters-tabs button {
    flex: 0 0 auto;
  }
}