:root {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: dark;
  background: #060b13;
  color: #eef5ff;
  --muted: #9eafc4;
  --blue: #86cffc;
  --line: #24364d;
  --accent: #f5d48e;
  --mono: "Cascadia Mono", Consolas, monospace;
  --width: 1160px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 900px 650px at 85% 150px, #12304a60, transparent 76%),
    radial-gradient(ellipse 600px 900px at 0% 55%, #12233b38, transparent 80%),
    linear-gradient(#070e19, #050a12 85%);
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .46; cursor: default; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: var(--blue); text-underline-offset: 3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  padding: 8px max(24px, calc((100% - var(--width)) / 2));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: #080f1cde;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #23364c99;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: #f3f6fc;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .13em;
  text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: inherit; }
.mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #6c5a36;
  border-radius: 8px;
  background: linear-gradient(145deg, #282315, #11192a 80%);
  color: #f6d89b;
}
.mark svg { width: 24px; height: 24px; }
.mark img { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.nav { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.nav a {
  padding: 7px 13px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
}
.nav a[aria-current], .nav a:hover { background: #122237; border-color: #253b54; color: #e0edfb; }
.nav a span { color: var(--blue); margin-left: 2px; }
.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid #2a4b64;
  border-radius: 5px;
  background: #0c1e31;
  color: #a6d6f3;
  font-size: 11px;
  white-space: nowrap;
}
.badge { justify-self: end; }
.badge span { width: 6px; height: 6px; border-radius: 50%; background: #82cffe; box-shadow: 0 0 9px #5bbdfaaf; }

main { width: min(var(--width), calc(100% - 48px)); margin: 0 auto; }
.intro {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 410px;
  overflow: hidden;
  padding: 16px 30px;
  border: 1px solid #2c425566;
  border-radius: 22px;
  background: linear-gradient(125deg, #101f32b3, #0a142250 66%);
  margin: 28px 0;
}
.intro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  width: 100px;
  height: 1px;
  background: #85d1fd;
  box-shadow: 0 0 14px #5bc7ff;
}
.hero-copy { z-index: 1; padding: 25px 0 30px; }
.hero-copy > .notice { max-width: 470px; font-size: 11px; line-height: 1.75; }
.eyebrow, .panel-kicker, .hero-coordinate {
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .16em;
  color: var(--blue);
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; }
.eyebrow span { width: 18px; height: 1px; background: var(--blue); box-shadow: 0 0 8px #62bdfc; }
h1 {
  margin: 0;
  width: max-content;
  max-width: 100%;
  font-size: clamp(53px, 7.2vw, 88px);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: #f3d792;
  background: linear-gradient(177deg, #fff3cd 7%, #f0d18c 48%, #b48340 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-token {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 0;
  color: #bce5ff;
  font: 750 18px/1.2 var(--mono);
  letter-spacing: .18em;
}
.hero-token span {
  border-left: 1px solid #365b79;
  padding-left: 11px;
  color: var(--muted);
  font: 500 13px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
}
.subtitle { max-width: 385px; color: var(--muted); margin: 16px 0 0; font-size: 14px; line-height: 1.8; }
.subtitle strong { color: #d9eaff; font-weight: 650; }
.hero-visual {
  position: absolute;
  pointer-events: none;
  inset: 0 0 0 43%;
  z-index: -1;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 16px 0 13px 0;
  background-image: linear-gradient(90deg, #47779c22 1px, transparent 1px), linear-gradient(#47779c22 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 68% 48%, #000 12%, transparent 76%);
}
.hero-image {
  position: absolute;
  top: 43%;
  right: 3%;
  width: 92%;
  max-width: 560px;
  aspect-ratio: 480 / 345;
  transform: translateY(-50%);
  overflow: hidden;
  mask-image: radial-gradient(ellipse 50% 54% at 50% 49%, #000 49%, #000e 63%, transparent 100%);
}
.hero-image img { display: block; width: 100%; height: auto; }
.hero-coordinate { position: absolute; right: 0; font-size: 9px; color: #82b3d8; }
.coordinate-top { top: 32px; }
.coordinate-bottom { bottom: 27px; display: flex; align-items: center; gap: 8px; }
.coordinate-bottom i { width: 17px; height: 1px; background: #618eb0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.panel {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(149deg, #112137 0%, #0c1829 45%, #0a1422 100%);
  box-shadow: 0 18px 48px #00000030, inset 0 1px #ffffff04;
}
.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 54px;
  height: 1px;
  background: #80caff;
  box-shadow: 0 0 9px #3b9ae3b3;
}
.mint { border-color: #65563b; background: radial-gradient(ellipse at 100% 0%, #5b47252e, transparent 58%), #0d1929; }
.mint::before { background: var(--accent); box-shadow: 0 0 9px #e1ac56b3; }
#mint-panel, #rules, #rankings { scroll-margin-top: 92px; }
.section-heading, .field-heading, .quote div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-kicker { margin: 0 0 5px; color: #91bddd; font-size: 10px; }
.mint .panel-kicker, .ticker { color: var(--accent); }
h2 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
h3 { margin: 0; font-size: 15px; }
.progress-count { margin: 15px 0 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-count strong { color: #f1f7ff; font-size: clamp(34px, 5vw, 46px); font-weight: 720; letter-spacing: -.055em; }
.progress-count > span { margin-left: 4px; font-size: 13px; }
.progress-detail { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
progress { appearance: none; display: block; width: 100%; height: 9px; border: 0; border-radius: 8px; background: #243950; overflow: hidden; }
progress::-webkit-progress-bar { background: #243950; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #3a83df, #84dfff); border-radius: 6px; }
progress::-moz-progress-bar { background: linear-gradient(90deg, #3a83df, #84dfff); border-radius: 6px; }
.stats { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8px; margin: 18px 0; }
.stats > div { padding: 10px 11px; border: 1px solid #27405a; border-radius: 7px; background: #0a1524a8; }
dt { color: var(--muted); font-size: 13px; }
dd { margin: 0; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.stats dd { margin-top: 4px; text-align: left; }
.overview > .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 22px; gap: 10px; }
.overview > .stats > div { padding: 14px 12px; border-color: #263c53; background: #091422; border-radius: 11px; }
.overview > .stats dt { font-size: 11px; }
.overview > .stats dd { font-size: 14px; overflow-wrap: anywhere; margin-top: 8px; }
.launch { border-top: 1px solid var(--line); margin-top: 16px; padding: 15px 0 1px; }
.launch .quote { padding-top: 0; border-top: 0; margin: 13px 0; }
.launch .quote div:last-child dd { color: inherit; }
.invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #294158; border-radius: 14px; padding: 18px; margin-top: 22px; background: #0a15228c; }
.invite p, .notice, footer { color: var(--muted); font-size: 12px; line-height: 1.7; }
.invite p { margin: 4px 0 0; }
.invite .invite-metrics { flex-basis: 100%; width: 100%; margin: 5px 0; }
.invite-metrics dd { color: var(--accent); }
.invite > .notice { flex-basis: 100%; }
.invite output { flex-basis: 100%; color: var(--blue); font-size: 13px; overflow-wrap: anywhere; }
.invite output:empty { display: none; }

.secondary, .stepper button { border: 1px solid #35526e; color: #dfedff; background: #132740; }
.secondary { border-radius: 9px; min-height: 38px; padding: 8px 12px; font-size: 12px; transition: background .18s, border-color .18s; }
.secondary:hover:enabled, .stepper button:hover:enabled { border-color: #6a9ac1; background: #1b3451; }
.field { display: grid; gap: 8px; margin-top: 18px; }
label { font-size: 13px; font-weight: 650; }
label span, .field-heading span { color: var(--muted); font-size: 12px; font-weight: 400; }
input, select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid #2a425b;
  padding: 8px 11px;
  background: #081321;
  color: inherit;
  font-size: 14px;
}
input::placeholder { color: #8ca3be; }
input:hover:enabled { border-color: #44637c; }
input:focus { border-color: #8dcde9; box-shadow: 0 0 0 3px #72b8e312; }
input[aria-invalid="true"] { border-color: #ed9f93; }
.stepper { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
.stepper button { border-radius: 7px; font-size: 20px; line-height: 1; }
.stepper input { text-align: center; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { appearance: none; }
small { color: #ffb7a1; }
small:empty { display: none; }
.quote { display: grid; gap: 8px; padding-top: 13px; margin: 15px 0 13px; border-top: 1px solid var(--line); }
.quote div:last-child dd { color: var(--accent); }
#mint-form > .quote { padding: 16px; border: 1px solid #61543a77; background: linear-gradient(125deg, #c79d4f0c, #091625); border-radius: 12px; gap: 12px; margin: 20px 0 12px; }
#mint-form > .quote dt { font-size: 12px; }
.primary {
  width: 100%;
  min-height: 48px;
  border: 1px solid #f4d59c;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .065em;
  color: #201708;
  background: linear-gradient(177deg, #f7e5b8, #e4b96d 90%);
  box-shadow: 0 5px 18px #bd833628;
  transition: background .18s, box-shadow .18s;
}
.primary:hover:enabled { background: linear-gradient(177deg, #fff0c9, #edc67f 90%); box-shadow: 0 6px 24px #bd833642; }
.notice { margin: 8px 0 0; }
.notice:empty { display: none; }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; padding: 15px 0 24px; border-top: 1px solid #1d3147; }
footer strong { color: var(--accent); letter-spacing: .08em; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
.contract-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.contract-links a { font-size: 11px; }
[hidden] { display: none !important; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.address { overflow-wrap: anywhere; }

.agent-guide-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 13px 6px 0 0;
  padding: 6px 11px;
  border: 1px solid #826946;
  border-radius: 9px;
  background: #d6a55813;
  color: var(--accent);
  font-size: 13px;
}
.agent-guide-trigger:hover { background: #d6a55825; }
.agent-wallet-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.agent-wallet-actions [data-address] { font-family: var(--mono); }
.topbar .agent-wallet-actions { justify-self: end; align-items: center; flex-wrap: nowrap; gap: 6px; }
.topbar .agent-guide-trigger { margin: 0; min-height: 36px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
#agent-wallet-signout { min-height: 30px; padding: 4px 9px; border-radius: 7px; border-color: #66563d; background: #cba35b0c; color: #cdbd9e; font-size: 11px; line-height: 1.4; white-space: nowrap; }
#agent-wallet-signout:hover { background: #cba35b20; color: var(--accent); border-color: #a78a53; }
.wallet-action-status { grid-column: 1 / -1; margin: 0; font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.wallet-action-status:empty { display: none; }
body:has(.agent-dialog[open]) { overflow: hidden; }
.agent-dialog {
  width: min(500px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  padding: clamp(17px, 5vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #47627c #0a1423;
  border: 1px solid #36516b;
  border-top: 2px solid #d6ae66;
  border-radius: 15px;
  background: linear-gradient(145deg, #172b41, #0a1423 70%);
  box-shadow: 0 22px 72px #0009;
  color: #eef5ff;
}
.agent-dialog::backdrop { background: #040911bd; backdrop-filter: blur(4px); }
.mint-confirm-dialog { width: min(460px, calc(100% - 24px)); max-height: min(78dvh, 640px); padding: 18px; }
.mint-confirm-dialog h2 { font-size: 22px; margin-top: 6px; margin-bottom: 10px; }
.mint-confirm-dialog .notice { font-size: 12px; line-height: 1.5; margin-block: 8px; }
.mint-confirm-details { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px 12px; align-items: baseline; margin: 14px 0; }
.mint-confirm-details dt { color: var(--muted); font-size: 12px; }
.mint-confirm-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 400; line-height: 1.45; text-align: right; }
.mint-confirm-details .mint-confirm-long { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
.mint-confirm-details .mint-confirm-long a { display: block; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
.mint-confirm-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; max-height: 220px; overflow: auto; }
.mint-confirm-consent { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; font-size: 12px; line-height: 1.5; }
.mint-confirm-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; }
.mint-confirm-dialog [hidden] { display: none !important; }
.agent-dialog .panel-kicker, .agent-dialog h2 { margin-right: 40px; }
.agent-dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #766342;
  border-radius: 7px;
  background: #d6a55813;
  color: var(--accent);
  font-size: 23px;
  line-height: 1;
}
.agent-dialog-close:hover { background: #d6a55830; }
.agent-dialog-intro { margin: 10px 0 15px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.agent-pairing { margin: 12px 0 18px; padding: 12px; border: 1px solid #2a4761; border-radius: 12px; background: #0a1522; }
.agent-pairing .agent-dialog-intro { margin-top: 0; }
.agent-pairing .primary { width: 100%; }
.agent-pair-ticket { margin-top: 14px; text-align: center; }
.agent-pair-ticket img { display: block; width: min(180px, 100%); height: auto; margin: 0 auto; border-radius: 10px; }
.agent-pair-ticket .agent-network strong { color: var(--accent); font-family: var(--mono); letter-spacing: .13em; }
.agent-pair-ticket a { color: var(--blue); }
.agent-pairing [hidden] { display: none; }
.agent-prompt { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #091321; margin-top: 22px; }
.agent-prompt h3 { font-size: 14px; }
.agent-prompt textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid #2a425b;
  border-radius: 7px;
  background: #091525;
  color: #d9eaff;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.agent-network {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 13px 0;
  padding: 9px 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.agent-network strong, #agent-copy-status { color: var(--blue); }
.agent-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.agent-prompt-actions a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.agent-prompt-actions a:hover { border-color: #6a9ac1; background: #1b3451; }
@media (max-width: 440px) {
  .agent-dialog-intro { margin: 8px 0 11px; font-size: 13px; line-height: 1.55; }
  .agent-prompt { padding: 9px; }
  .agent-prompt textarea { height: 5.2em; }
  .agent-network { margin: 9px 0; padding: 6px 0; }
  .agent-prompt-actions { gap: 5px; }
  .agent-prompt-actions .secondary { padding-inline: 7px; font-size: 12px; }
}

@media (max-width: 800px) {
  .hero-visual { left: 40%; }
  .intro { min-height: 300px; }
  .topbar { gap: 12px; }
  .nav a { padding-inline: 8px; }
  .topbar .nav .badge { display: none; }
}
@media (max-width: 675px) {
  main { width: calc(100% - 32px); }
  .topbar { padding: 10px 16px 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .brand { font-size: 12px; gap: 7px; letter-spacing: .08em; }
  .mark { width: 32px; height: 32px; }
  .mark img { width: 28px; height: 28px; }
  .topbar .agent-guide-trigger { min-height: 34px; padding-inline: 8px; font-size: 11px; }
  .topbar #agent-wallet-signout { padding-inline: 7px; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin-top: 2px; }
  .topbar .nav .badge { display: inline-flex; margin-left: auto; font-size: 10px; }
  .nav a { padding: 5px 8px; font-size: 12px; }
  .intro { min-height: 0; grid-template-columns: minmax(0, 1fr); margin: 18px 0; padding: 12px 18px; border-radius: 16px; }
  .hero-copy { grid-row: 2; padding: 0 0 12px; }
  .hero-visual { position: relative; inset: auto; height: clamp(288px, calc(100vw - 32px), 460px); grid-row: 1; margin: -12px -18px 8px; }
  .hero-image { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); mask-image: none; }
  .hero-image img { width: 100%; height: 100%; object-fit: contain; }
  .coordinate-top { top: 18px; right: 14px; }
  .coordinate-bottom { bottom: 14px; right: 14px; }
  h1 { font-size: clamp(44px, 11.5vw, 72px); }
  .eyebrow { margin-bottom: 9px; }
  .hero-token { margin-top: 10px; }
  .subtitle { margin-top: 8px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-copy > .notice { max-width: none; }
  .panel { border-radius: 15px; }
  input { font-size: 16px; }
  .invite { padding: 14px; }
  footer { align-items: flex-start; }
  .contract-links { width: 100%; order: 3; padding-top: 8px; border-top: 1px solid #1d3147; }
}

/* Launch dashboard */
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.progress-percent { color: var(--blue); font: 700 14px/1.3 var(--mono); white-space: nowrap; }
.progress-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 13px 0 0; }
.progress-metrics > div { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; }
.progress-metrics dt { font-size: 12px; }
.progress-metrics dd { color: #d0eaff; font-size: 13px; }
.scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b1624;
}
.scene .scene-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #0b1624 0%, #0b1624e8 30%, #0b1624ae 51%, #0b162413 83%),
    linear-gradient(0deg, #0b162470, transparent 60%);
  pointer-events: none;
}
.progress-banner {
  display: flex;
  align-items: center;
  min-height: 116px;
  padding: 12px 34% 12px 14px;
  border: 1px solid #27425d;
  border-radius: 8px;
}
.progress-banner .scene-art { object-position: right 53%; }
.progress-banner strong { font-size: 14px; }
.progress-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.test-progress { margin-top: 14px; }
.test-progress .progress-head { margin-bottom: 7px; color: var(--muted); font-size: 13px; }

.module-section { margin-top: 46px; scroll-margin-top: 92px; }
.module-heading { border-top: 1px solid #2b465f88; padding-top: 24px; }
.module-intro { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 8px 0 14px; }
.module-intro strong { color: #e4effa; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.allocation-bar { display: grid; grid-template-columns: 9fr 1fr; gap: 4px; height: 6px; margin: 0 0 12px; }
.allocation-bar span { border-radius: 8px; background: linear-gradient(90deg, #a97939, #f8d791); }
.allocation-bar span + span { background: linear-gradient(90deg, #327cb7, #88d8ff); }
.allocation-card {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 230px;
  padding: 22px 33% 22px 22px;
  border: 1px solid #65553d;
  border-radius: 15px;
}
.allocation-lp .scene-art { object-position: right 54%; }
.allocation-card h3 { font-size: 16px; }
.allocation-card p:not(.allocation-value) { color: #c5d5e6; font-size: 12px; margin: 0; line-height: 1.65; }
.allocation-card p:not(.allocation-value) strong { color: #e5ebf5; }
.allocation-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px 0 6px; }
.allocation-value strong { color: var(--accent); font-size: 35px; line-height: 1.2; letter-spacing: -.04em; }
.allocation-value span { color: #f5dfae; font: 650 14px var(--mono); }
.allocation-vault { border-color: #34556e; }
.allocation-vault .allocation-value strong, .allocation-vault .allocation-value span { color: var(--blue); }
.rule-details { margin-top: 11px; padding: 10px 15px; border: 1px solid #273d55; border-radius: 8px; background: #0b1524; }
.rule-details summary { width: fit-content; cursor: pointer; color: #e5effc; font-size: 13px; font-weight: 650; }
.rule-details ul { margin: 8px 0 2px; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.rule-details li + li { margin-top: 4px; }

.ranking-card { padding: 17px; }
.ranking-heading {
  display: flex;
  align-items: center;
  min-height: 148px;
  margin: -17px -17px 8px;
  padding: 17px 37% 17px 17px;
  border-radius: 11px 11px 0 0;
  border-bottom: 1px solid #263e57;
}
.ranking-heading .scene-art { object-position: right 48%; }
.ranking-heading h3 { font-size: 18px; }
.ranking-heading p:not(.panel-kicker) { font-size: 12px; color: #c5d5e6; margin: 5px 0 0; line-height: 1.6; }
.ranking-card table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; font-variant-numeric: tabular-nums; }
.ranking-card th, .ranking-card td { padding: 8px 6px; border-bottom: 1px solid #25394f; }
.ranking-card thead th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.ranking-card tbody tr:last-child > * { border-bottom: 0; }
.ranking-card tr > :first-child:not([colspan]) { width: 52px; }
.ranking-card tr > :last-child:not([colspan]) { text-align: right; white-space: nowrap; }
.ranking-card tbody th { overflow-wrap: anywhere; font-weight: 600; }
.ranking-card { border-radius: 16px; overflow: hidden; }
.ranking-heading { border-radius: 15px 15px 0 0; }
.ranking-card th, .ranking-card td { padding-block: 13px; }
.ranking-card tbody tr { transition: background .15s; }
.ranking-card tbody tr:hover { background: #67b7eb08; }
.ranking-card thead { background: #07121e80; }
.ranking-scroll {
  --ranking-row-height: 44px;
  height: calc(var(--ranking-row-height) * 10 + 42px);
  overflow-y: scroll;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #526f8c #0a1523;
  border: 1px solid #24394f;
  border-radius: 8px;
}
.ranking-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ranking-scroll::-webkit-scrollbar-track { background: #0a1523; }
.ranking-scroll::-webkit-scrollbar-thumb { background: #526f8c; border: 2px solid #0a1523; border-radius: 8px; }
.ranking-scroll::-webkit-scrollbar-thumb:hover { background: #83a5c2; }
.ranking-scroll table { border-collapse: separate; border-spacing: 0; }
.ranking-scroll tbody tr { height: var(--ranking-row-height); }
.ranking-scroll th, .ranking-scroll td { padding-block: 10px; line-height: 23px; }
.ranking-scroll thead th { position: sticky; top: 0; z-index: 2; height: 42px; padding-block: 9px; background: #0d1d30; box-shadow: 0 1px 0 #2b425b; }
.ranking-scroll .rank-empty { height: 100px; vertical-align: top; padding-top: 20px; }
.rule-details { padding: 16px 20px; border-radius: 12px; }
.rule-details summary { font-size: 14px; }
.rule-details ul { line-height: 1.9; }
.rule-details li + li { margin-top: 9px; }
.parent-token { padding: 18px 20px; border-radius: 12px; }
.mint-confirm-consent input { min-height: 18px; padding: 0; }
@media (max-width: 440px) {
  .overview > .stats { grid-template-columns: 1fr 1fr; }
  .overview > .stats > div:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .overview > .stats > div:last-child dd { margin: 0; }
  .section-heading { flex-wrap: wrap; }
  .topbar { min-height: 76px; }
  .allocation-card { padding-right: 25%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button, input, .ranking-card tbody tr { transition: none; }
}
.rank-top { color: var(--accent); }
.ranking-referral .rank-top { color: var(--blue); }
.rank-you { display: inline-block; margin: 2px 0; color: #afd9f5; border: 1px solid #395a75; border-radius: 4px; padding: 1px 4px; font-size: 10px; white-space: nowrap; }
.rank-empty { color: var(--muted); }
@media (max-width: 675px) {
  .module-section { margin-top: 26px; }
  .module-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .allocation-card { min-height: 164px; padding-right: 31%; }
  .ranking-heading { min-height: 132px; padding-right: 31%; }
  .scene::before {
    background:
      linear-gradient(90deg, #0b1624 0%, #0b1624e8 34%, #0b1624bd 58%, #0b162415 95%),
      linear-gradient(0deg, #0b162450, transparent 65%);
  }
  .progress-metrics > div { display: grid; gap: 4px; }
  .progress-metrics dd { text-align: left; }
}

.launch-sequence {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.9fr);
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
}
.launch-sequence li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #2a465e;
  border-radius: 7px;
  background: #0c1b2c;
  color: #d6eafa;
  font-size: 12px;
  line-height: 1.5;
}
.launch-sequence li span { color: var(--blue); font: 700 12px var(--mono); }
.launch-sequence li:last-child { border-color: #6b5837; background: #221e1b; color: #f5dfae; }
.launch-sequence li:last-child span { color: var(--accent); }
.launch-version-note {
  margin: 12px 0 0;
  padding: 9px 13px;
  border-left: 2px solid #be9a56;
  background: #221e1b;
  color: #eddbba;
  font-size: 12px;
  line-height: 1.7;
}
.parent-token {
  margin-top: 11px;
  padding: 12px 15px;
  border: 1px solid #28435d;
  border-radius: 8px;
  background: linear-gradient(110deg, #122437, #0b1524 78%);
}
.parent-token-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 12px; }
.parent-token-heading strong { color: var(--accent); margin-left: 4px; }
.parent-token p { margin: 6px 0; color: var(--muted); font-size: 12px; }
.parent-token dl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; margin: 7px 0 0; }
.parent-token dt { font-size: 12px; }
.parent-token dd { min-width: 0; text-align: left; }
.parent-token code { color: #d0eaff; font: 12px/1.65 var(--mono); overflow-wrap: anywhere; }
@media (max-width: 675px) {
  .launch-sequence { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}