@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=Unbounded:wght@500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap");

:root {
  --bg: #07111f;
  --bg-2: #0a182d;
  --panel: #101c30;
  --panel-2: #142640;
  --panel-3: #0d1728;
  --line: rgba(151, 177, 211, 0.12);
  --line-strong: rgba(151, 177, 211, 0.22);
  --text: #eef6ff;
  --muted: #9baec3;
  --faint: #64758a;
  --blue: #64b8ff;
  --cyan: #8bdcff;
  --green: #8bdcff;
  --yellow: #ffd166;
  --red: #ff6f8b;
  --surface: rgba(11, 22, 42, 0.78);
  --surface-2: rgba(18, 28, 48, 0.9);
  --surface-border: rgba(127, 171, 216, 0.24);
  --surface-border-soft: rgba(134, 165, 205, 0.16);
  --radius-shell: 24px;
  --radius-panel: 20px;
  --radius-card: 16px;
  --defi-edge: linear-gradient(140deg, rgba(139, 220, 255, 0.18), rgba(120, 155, 200, 0.08) 46%, rgba(255, 255, 255, 0.04));
  --defi-fill: linear-gradient(180deg, rgba(14, 29, 52, 0.84), rgba(7, 16, 30, 0.88));
  --defi-card-fill: linear-gradient(180deg, rgba(16, 32, 56, 0.58), rgba(8, 18, 34, 0.66));
  --defi-soft-shadow: 0 22px 70px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow: 0 34px 92px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
  --font-sans: "IBM Plex Sans", Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: Inter, "IBM Plex Sans", "PingFang TC", "Noto Sans TC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-brand-cjk: "LXGW WenKai TC", "LXGW WenKai", "PingFang TC", "Noto Serif TC", "Noto Sans TC", cursive;
  --font-brand-latin: Caveat, "IBM Plex Sans", Inter, cursive;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(116deg, rgba(73, 175, 233, 0.15), transparent 28%),
    linear-gradient(244deg, rgba(97, 215, 255, 0.09), transparent 32%),
    linear-gradient(180deg, #0b132b 0%, #07111f 46%, #050a13 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(151, 177, 211, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 177, 211, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.site-bg,
.cursor-aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.site-bg {
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(73, 175, 233, 0.09) 42% 42.3%, transparent 42.3% 100%),
    linear-gradient(118deg, transparent 0 67%, rgba(97, 215, 255, 0.06) 67% 67.2%, transparent 67.2% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%);
}

.cursor-aura {
  width: 240px;
  height: 2px;
  inset: auto;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(97, 215, 255, 0.28), transparent);
  transform: translate(-999px, -999px);
  transition: transform 0.12s ease-out;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 10px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  width: 100%;
  margin: 0;
  padding: 10px max(22px, calc((100vw - 1280px) / 2 + 28px));
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(7, 17, 31, 0.94), rgba(7, 17, 31, 0.82)),
    rgba(7, 17, 31, 0.86);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(97, 215, 255, 0.18), rgba(139, 220, 255, 0.12), transparent);
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.brand:hover .luye-mark,
.brand:focus-visible .luye-mark {
  transform: translateY(-1px) rotate(-2deg) scale(1.04);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
}

.luye-mark {
  width: 44px;
  height: 44px;
  overflow: visible;
  transition: transform 0.24s ease, filter 0.24s ease;
}

.mark-plane {
  stroke-linejoin: round;
}

.mark-plane-top {
  fill: url("#luyeTopGradient");
  stroke: rgba(229, 253, 255, 0.72);
  stroke-width: 1.05;
}

.mark-plane-core {
  fill: url("#luyeCoreGradient");
  stroke: rgba(210, 244, 255, 0.58);
  stroke-width: 1.1;
}

.mark-plane-lower {
  fill: url("#luyeLowerGradient");
  stroke: rgba(211, 245, 255, 0.5);
  stroke-width: 1;
}

.mark-negative,
.mark-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-negative {
  stroke: rgba(5, 13, 25, 0.76);
  stroke-width: 5.9;
}

.mark-highlight {
  stroke: rgba(238, 253, 255, 0.9);
  stroke-width: 2.1;
  opacity: 0.78;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  position: relative;
  width: fit-content;
  font-family: var(--font-brand-cjk);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: transparent;
  background:
    linear-gradient(135deg, #f4fbff 0%, #95e8ff 42%, #4f9dff 72%, #e5fbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 18px rgba(91, 196, 255, 0.18),
    0 8px 22px rgba(27, 66, 255, 0.16);
  transform: rotate(-1.5deg);
}

.brand strong::after {
  content: "";
  position: absolute;
  right: -0.08em;
  bottom: -0.2em;
  left: 0.08em;
  height: 0.16em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(137, 231, 255, 0.9) 22%, rgba(47, 126, 255, 0.72) 72%, transparent 100%);
  filter: blur(0.5px);
  opacity: 0.72;
  transform: rotate(-2deg);
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

html:lang(en) .brand strong {
  font-family: var(--font-brand-latin);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.015em;
  transform: rotate(-2.6deg) translateY(-1px);
}

.nav-list,
.header-actions,
.button-row,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .mode-pill,
.header-actions #refreshButton,
.sidebar-status {
  display: none;
}

.nav-list {
  justify-content: center;
  width: fit-content;
  justify-self: center;
  min-height: 44px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(12, 25, 46, 0.76), rgba(7, 16, 30, 0.72)) padding-box,
    linear-gradient(145deg, rgba(124, 185, 230, 0.16), rgba(151, 177, 211, 0.04), rgba(139, 220, 255, 0.1)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.nav-item,
.primary-button,
.secondary-button,
.ghost-button {
  min-height: 42px;
  border-radius: 9px;
}

.nav-item {
  position: relative;
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.nav-item::after {
  display: none;
}

.nav-item:hover,
.nav-item.active {
  border-color: transparent;
  background:
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 0%), rgba(118, 219, 255, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(72, 139, 190, 0.28), rgba(33, 64, 102, 0.18));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(144, 198, 242, 0.12);
}

.nav-item:hover {
  transform: translateY(-1px);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(12, 25, 46, 0.76), rgba(7, 16, 30, 0.72)) padding-box,
    linear-gradient(145deg, rgba(124, 185, 230, 0.14), rgba(151, 177, 211, 0.04), rgba(139, 220, 255, 0.08)) border-box;
}

.language-option {
  position: relative;
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.language-option::after {
  display: none;
}

.language-option.active,
.language-option:hover {
  background: rgba(73, 175, 233, 0.14);
  color: var(--text);
}

.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.primary-button {
  padding: 0 18px;
  background: linear-gradient(135deg, #57a6ff, #79e4ff);
  color: #071326;
  font-weight: 950;
}

.secondary-button {
  padding: 0 18px;
  background: rgba(139, 220, 255, 0.14);
  color: var(--green);
  font-weight: 950;
}

.ghost-button {
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-weight: 850;
}

.compact {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.site-header .primary-button.compact {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(73, 175, 233, 0.22);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  border-color: rgba(97, 215, 255, 0.48);
  transform: translateY(-1px);
}

.site-header,
.stat-strip,
.advantage-panel,
.advantage-grid article,
.market-shell,
.strategy-workspace,
.depth-panel,
.operator-shell,
.journey-steps article,
.connect-card,
.paper-vault,
.simulation-board,
.live-console,
.simulation-output,
.plans-panel,
.referral-panel,
.faq-panel,
.vault-grid article,
.result-grid article,
.live-status-grid article,
.live-asset-card,
.vault-chart-card,
.paper-vault-profit,
.paper-vault-grid article,
.v21-stack article,
.details-card,
.fee-summary article,
.plan-card,
.referral-card,
.referral-ledger article,
.lesson-card {
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.site-header::before,
.stat-strip::before,
.advantage-panel::before,
.advantage-grid article::before,
.market-shell::before,
.operator-shell::before,
.journey-steps article::before,
.connect-card::before,
.paper-vault::before,
.simulation-board::before,
.live-console::before,
.simulation-output::before,
.plans-panel::before,
.referral-panel::before,
.faq-panel::before,
.vault-grid article::before,
.result-grid article::before,
.live-status-grid article::before,
.live-asset-card::before,
.vault-chart-card::before,
.paper-vault-profit::before,
.paper-vault-grid article::before,
.v21-stack article::before,
.details-card::before,
.fee-summary article::before,
.plan-card::before,
.referral-card::before,
.referral-ledger article::before,
.lesson-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      circle at var(--shine-x, 50%) var(--shine-y, 0%),
      rgba(118, 219, 255, 0.18),
      rgba(73, 175, 233, 0.07) 24%,
      transparent 52%
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.site-header::before {
  display: none;
}

.site-header:hover,
.stat-strip:hover,
.advantage-panel:hover,
.advantage-grid article:hover,
.market-shell:hover,
.operator-shell:hover,
.journey-steps article:hover,
.connect-card:hover,
.paper-vault:hover,
.simulation-board:hover,
.live-console:hover,
.simulation-output:hover,
.plans-panel:hover,
.referral-panel:hover,
.faq-panel:hover,
.vault-grid article:hover,
.result-grid article:hover,
.advantage-grid article:hover,
.journey-steps article:hover,
.live-status-grid article:hover,
.live-asset-card:hover,
.vault-chart-card:hover,
.paper-vault-profit:hover,
.paper-vault-grid article:hover,
.v21-stack article:hover,
.details-card:hover,
.fee-summary article:hover,
.plan-card:hover,
.referral-card:hover,
.referral-ledger article:hover,
.lesson-card:hover {
  border-color: rgba(90, 128, 170, 0.78);
}

.site-header:hover,
.stat-strip:hover,
.advantage-panel:hover,
.advantage-grid article:hover {
  border-color: rgba(90, 128, 170, 0.78);
}

.site-header:hover {
  border-color: transparent;
}

.stat-strip:hover {
  border-top-color: rgba(151, 177, 211, 0.16);
  border-bottom-color: rgba(151, 177, 211, 0.16);
}

.advantage-grid article:hover {
  border-right-color: rgba(151, 177, 211, 0.12);
}

.advantage-grid article:last-child:hover {
  border-right-color: transparent;
}

.vault-grid article:hover,
.result-grid article:hover,
.live-status-grid article:hover,
.live-asset-card:hover,
.vault-chart-card:hover,
.paper-vault-grid article:hover,
.v21-stack article:hover,
.details-card:hover,
.fee-summary article:hover,
.plan-card:hover,
.referral-card:hover,
.referral-ledger article:hover,
.lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.site-header:hover::before,
.stat-strip:hover::before,
.advantage-panel:hover::before,
.advantage-grid article:hover::before,
.market-shell:hover::before,
.operator-shell:hover::before,
.journey-steps article:hover::before,
.connect-card:hover::before,
.paper-vault:hover::before,
.simulation-board:hover::before,
.live-console:hover::before,
.simulation-output:hover::before,
.plans-panel:hover::before,
.referral-panel:hover::before,
.faq-panel:hover::before,
.vault-grid article:hover::before,
.result-grid article:hover::before,
.live-status-grid article:hover::before,
.live-asset-card:hover::before,
.vault-chart-card:hover::before,
.paper-vault-profit:hover::before,
.paper-vault-grid article:hover::before,
.v21-stack article:hover::before,
.details-card:hover::before,
.fee-summary article:hover::before,
.plan-card:hover::before,
.referral-card:hover::before,
.referral-ledger article:hover::before,
.lesson-card:hover::before {
  opacity: 1;
}

.site-header > *,
.stat-strip > *,
.advantage-panel > *,
.advantage-grid article > *,
.market-shell > *,
.operator-shell > *,
.journey-steps article > *,
.connect-card > *,
.paper-vault > *,
.simulation-board > *,
.live-console > *,
.simulation-output > *,
.plans-panel > *,
.referral-panel > *,
.faq-panel > *,
.vault-grid article > *,
.result-grid article > *,
.live-status-grid article > *,
.live-asset-card > *,
.vault-chart-card > *,
.paper-vault-profit > *,
.paper-vault-grid article > *,
.v21-stack article > *,
.details-card > *,
.fee-summary article > *,
.plan-card > *,
.referral-card > *,
.referral-ledger article > *,
.lesson-card > * {
  position: relative;
  z-index: 1;
}

.mode-pill,
.connection-pill,
.pressure-pill {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.site-header .sidebar-status {
  display: none;
}

.sidebar-status strong,
.sidebar-status span {
  display: block;
}

.sidebar-status strong {
  font-size: 12px;
}

.sidebar-status span {
  color: var(--muted);
  font-size: 11px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
}

.status-dot.live {
  background: var(--green);
  box-shadow: 0 0 16px rgba(139, 220, 255, 0.78);
}

.main {
  padding-bottom: 144px;
}

.tab-panel {
  display: none;
}

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

.hero-minimal,
.stat-strip,
.advantage-panel,
.market-shell,
.strategy-workspace,
.strategy-pillars,
.depth-panel,
.simple-flow,
.trust-copy,
.clean-page,
.paper-vault,
.connect-layout,
.simulation-output,
.fee-summary,
.plans-panel,
.referral-panel,
.faq-panel,
.seo-copy {
  width: min(1260px, calc(100% - 64px));
  margin-inline: auto;
}

.hero-minimal {
  display: grid;
  place-items: center;
  min-height: clamp(430px, calc(100vh - 260px), 560px);
  padding: 82px 0 58px;
  text-align: center;
}

.hero-center {
  max-width: 850px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.live-dot::before {
  content: "";
  width: 28px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--green), transparent);
}

.hero-title {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
  letter-spacing: 0;
}

.title-brand {
  position: relative;
  display: inline-block;
  justify-self: center;
  width: fit-content;
  font-family: var(--font-brand-cjk);
  font-size: clamp(78px, 9.4vw, 132px);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: transparent;
  background:
    linear-gradient(128deg, #ffffff 0%, #c9f8ff 16%, #70d8ff 45%, #2d7cff 72%, #eefcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 34px rgba(91, 196, 255, 0.18),
    0 22px 60px rgba(12, 48, 118, 0.36);
  transform: rotate(-1.7deg);
  filter: drop-shadow(0 14px 28px rgba(27, 66, 255, 0.14));
}

.title-brand::before,
.title-brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.title-brand::before {
  inset: 0.06em -0.08em auto auto;
  width: 0.34em;
  height: 0.34em;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(226, 252, 255, 0.72), rgba(97, 215, 255, 0.16) 58%, transparent 70%);
  opacity: 0.62;
  transform: rotate(18deg);
}

.title-brand::after {
  right: -0.06em;
  bottom: -0.17em;
  left: 0.05em;
  height: 0.13em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(139, 220, 255, 0.86) 18%, rgba(57, 143, 255, 0.76) 68%, transparent 100%);
  filter: blur(0.5px);
  opacity: 0.82;
  transform: rotate(-1.4deg);
}

.title-product {
  color: #dcecff;
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1.16;
  font-weight: 850;
}

html:lang(en) .title-brand {
  font-family: var(--font-brand-latin);
  font-size: clamp(94px, 11vw, 162px);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: rotate(-3.4deg) translateY(0.02em);
}

html:lang(zh-Hans) .brand strong,
html:lang(zh-Hans) .title-brand,
html:lang(zh-Hans) .site-footer [data-i18n="brand.name"] {
  font-family: "LXGW WenKai", "LXGW WenKai TC", "Noto Serif SC", "Noto Sans SC", cursive;
}

.hero-lead {
  max-width: 720px;
  margin: 0 auto 38px;
  color: #aebcd0;
  font-size: 17px;
}

.hero-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 18px;
  border: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.16);
  border-bottom: 1px solid rgba(151, 177, 211, 0.16);
  border-radius: 0;
  background: transparent;
}

.stat-strip article {
  min-height: 154px;
  padding: 36px 22px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.stat-strip article:last-child {
  border-right: 0;
}

.stat-strip span,
.stat-strip small,
.result-grid span,
.result-grid small,
.fee-summary span,
.fee-summary small,
.vault-grid span,
.vault-grid small,
.plan-card span,
.plan-card small {
  color: var(--muted);
}

.stat-strip strong,
.result-grid strong,
.fee-summary strong,
.vault-grid strong {
  display: block;
  margin: 8px 0;
  color: var(--text);
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1;
}

.market-shell,
.connect-card,
.simulation-output,
.paper-vault,
.plans-panel,
.referral-panel,
.faq-panel {
  margin-top: 76px;
  padding: 52px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--surface);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.14);
}

.market-shell {
  padding: 64px;
}

.strategy-workspace,
.depth-panel {
  padding: 54px;
}

.section-heading,
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.section-heading p,
.panel-heading p {
  margin-bottom: 0;
  font-size: 14px;
}

.mini-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mini-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(151, 177, 211, 0.16);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.mini-metrics strong {
  color: var(--text);
}

.market-table {
  display: grid;
  overflow: hidden;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
}

.market-table-head,
.market-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(110px, 0.8fr) minmax(120px, 0.8fr) minmax(130px, 0.9fr) minmax(150px, 1fr) minmax(72px, 0.45fr);
  gap: 18px;
  align-items: center;
}

.market-table-head {
  min-height: 54px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.market-row {
  position: relative;
  width: 100%;
  min-height: 92px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}

.market-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at var(--shine-x, 20%) var(--shine-y, 50%), rgba(97, 215, 255, 0.12), transparent 36%),
    linear-gradient(90deg, rgba(97, 215, 255, 0.055), transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.market-row > * {
  position: relative;
  z-index: 1;
}

.market-row:hover::before,
.market-row.active::before {
  opacity: 1;
}

.market-row.active {
  color: #f7fbff;
}

.market-asset {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.asset-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(210, 244, 255, 0.26);
  border-radius: 50%;
  background: rgba(7, 15, 29, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-style: normal;
  font-weight: 950;
}

.asset-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
  stroke-width: 0;
}

.asset-icon svg * {
  stroke: none;
}

.asset-icon-usdt {
  border-color: rgba(38, 161, 123, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 18px rgba(38, 161, 123, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.asset-icon-usd {
  border-color: rgba(22, 177, 87, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 18px rgba(22, 177, 87, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.asset-icon-fallback {
  background: linear-gradient(135deg, rgba(73, 175, 233, 0.28), rgba(139, 220, 255, 0.1));
  color: var(--cyan);
}

.market-asset strong,
.market-apy {
  font-size: 20px;
}

.market-apy {
  color: var(--green);
}

.market-row span {
  color: #c8d6e8;
  font-weight: 750;
}

.market-row em {
  justify-self: end;
  color: var(--cyan);
  font-style: normal;
  font-weight: 950;
}

.market-detail-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
  gap: 36px;
  margin-top: 0;
  padding-top: 36px;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
}

.market-detail-panel h3 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
}

.advantage-panel {
  margin-top: 42px;
  padding: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.advantage-panel .section-heading {
  align-items: end;
  margin-bottom: 38px;
}

.advantage-panel .section-heading p:not(.eyebrow) {
  max-width: 560px;
  margin-bottom: 0;
}

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
  border-bottom: 1px solid rgba(151, 177, 211, 0.14);
}

.advantage-grid article {
  min-height: 210px;
  padding: 28px 28px 26px;
  border: 0;
  border-right: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 0;
  background: transparent;
}

.advantage-grid article:last-child {
  border-right: 0;
}

.advantage-grid span,
.journey-steps span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.advantage-grid strong {
  display: block;
  margin: 18px 0 12px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.22;
}

.advantage-grid p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.7;
}

.market-detail-panel p {
  margin-bottom: 0;
}

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

.market-detail-item {
  min-height: 84px;
  padding: 16px 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
}

.market-detail-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.market-detail-item strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

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

.vault-grid article,
.result-grid article,
.fee-summary article,
.simple-flow article,
.v21-stack article,
.plan-card,
.lesson-card,
.details-card,
.referral-card,
.referral-ledger article {
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.62);
}

.vault-grid article {
  position: relative;
  min-height: 210px;
  padding: 34px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(73, 175, 233, 0.12), rgba(255, 255, 255, 0.025)),
    var(--surface);
}

.vault-grid article::after {
  content: "->";
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: var(--blue);
  font-size: 26px;
  font-weight: 950;
}

.vault-grid em {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--green);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.simple-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px;
  margin-top: 86px;
  padding: 76px 0;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
  border-bottom: 1px solid rgba(151, 177, 211, 0.14);
}

.simple-flow article {
  min-height: 210px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.simple-flow span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
}

.simple-flow strong {
  display: block;
  margin: 26px 0 12px;
  font-size: 24px;
}

.simple-flow p {
  margin-bottom: 0;
}

.strategy-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 72px;
  padding: 64px 0;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
  border-bottom: 1px solid rgba(151, 177, 211, 0.14);
}

.strategy-pillars article {
  min-height: 190px;
  padding: 0;
}

.strategy-pillars span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.strategy-pillars strong {
  display: block;
  margin: 18px 0 10px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
}

.strategy-pillars p {
  margin-bottom: 0;
}

.trust-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 92px;
  padding: 96px 0 26px;
  border-bottom: 1px solid rgba(151, 177, 211, 0.12);
}

.trust-copy p {
  margin-bottom: 0;
}

.clean-page {
  min-height: 380px;
  padding: 132px 0 64px;
}

.clean-page h2 {
  max-width: 760px;
}

.clean-page p {
  max-width: 720px;
}

.connect-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.28fr) minmax(280px, 0.9fr);
  gap: 36px;
  margin-top: 74px;
}

.connect-card {
  margin-top: 0;
  box-shadow: none;
}

.connect-card h2 {
  font-size: clamp(25px, 2.4vw, 32px);
  line-height: 1.18;
}

.operator-shell {
  width: min(1360px, calc(100% - 64px));
  margin: 0 auto 0;
  padding: 32px;
  border: 1px solid rgba(105, 145, 188, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(18, 33, 58, 0.74), rgba(7, 17, 31, 0.84)),
    rgba(8, 16, 30, 0.86);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.24);
}

.operator-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(151, 177, 211, 0.14);
}

.operator-head h2 {
  margin-bottom: 10px;
  font-size: clamp(32px, 4.8vw, 64px);
}

.operator-head p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 16px;
}

.workspace-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(151, 177, 211, 0.16);
  border-radius: 999px;
  background: rgba(7, 14, 26, 0.68);
}

.workspace-tab {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 950;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.workspace-tab:hover,
.workspace-tab:focus-visible {
  color: var(--text);
  transform: translateY(-1px);
}

.workspace-tab.active {
  background: linear-gradient(135deg, rgba(73, 175, 233, 0.28), rgba(139, 220, 255, 0.16));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(126, 208, 255, 0.18);
}

.workspace-panel {
  display: none;
  padding-top: 34px;
}

.workspace-panel.active {
  display: grid;
  gap: 32px;
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(151, 177, 211, 0.14);
  border-bottom: 1px solid rgba(151, 177, 211, 0.14);
}

.journey-steps article {
  min-height: 104px;
  padding: 12px 28px 18px;
  border-right: 1px solid rgba(151, 177, 211, 0.12);
  background: transparent;
}

.journey-steps article:last-child {
  border-right: 0;
}

.journey-steps strong,
.journey-steps small {
  display: block;
}

.journey-steps strong {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: 18px;
}

.journey-steps small {
  color: var(--muted);
  line-height: 1.55;
}

.operator-shell .paper-vault,
.operator-shell .connect-layout {
  width: 100%;
  margin-inline: 0;
}

.operator-shell .paper-vault {
  margin-top: 0;
}

.operator-shell .workspace-market {
  width: 100%;
  margin: 0;
  padding: 42px;
  border-radius: 18px;
  box-shadow: none;
}

.simulation-board,
.live-console {
  padding: 28px;
  border: 1px solid rgba(105, 145, 188, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(19, 36, 63, 0.76), rgba(9, 20, 37, 0.76)),
    rgba(9, 18, 33, 0.8);
  box-shadow: none;
}

.simulation-board .panel-heading,
.live-console-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.simulation-board .panel-heading h2,
.live-console-head h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 3.2vw, 42px);
}

.simulation-board .panel-heading p,
.live-console-head p {
  max-width: 660px;
  margin-bottom: 0;
}

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

.live-status-grid article,
.live-asset-card {
  min-width: 0;
  border: 1px solid rgba(151, 177, 211, 0.15);
  border-radius: 16px;
  background: rgba(10, 21, 39, 0.62);
}

.live-status-grid article {
  min-height: 126px;
  padding: 20px;
}

.live-status-grid span,
.live-status-grid small,
.live-asset-card span,
.live-asset-card dt,
.live-asset-empty {
  color: var(--muted);
}

.live-status-grid strong {
  display: block;
  margin: 9px 0 8px;
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
}

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

.live-asset-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 14px;
  background: rgba(7, 14, 26, 0.48);
}

.live-asset-toolbar > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.asset-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(151, 177, 211, 0.14);
  border-radius: 999px;
  background: rgba(5, 11, 22, 0.52);
}

.asset-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  min-width: 74px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.asset-toggle-button .asset-icon {
  width: 24px;
  height: 24px;
  border-width: 0;
  box-shadow: none;
}

.asset-toggle-button:hover,
.asset-toggle-button.active {
  background: rgba(73, 175, 233, 0.18);
  color: var(--text);
}

.live-selected-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.live-selected-grid article {
  min-height: 126px;
  padding: 20px;
  border: 1px solid rgba(151, 177, 211, 0.15);
  border-radius: 16px;
  background: rgba(10, 21, 39, 0.62);
}

.live-selected-grid span,
.live-selected-grid small {
  color: var(--muted);
}

.live-selected-grid strong {
  display: block;
  margin: 9px 0 8px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
}

.live-asset-card {
  display: grid;
  gap: 22px;
  min-height: 220px;
  padding: 24px;
}

.live-asset-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.live-asset-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.live-asset-card h3 .asset-icon {
  width: 34px;
  height: 34px;
}

.live-asset-card .live-asset-total {
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 950;
  line-height: 1;
  text-align: right;
}

.live-asset-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  margin: 0;
}

.live-asset-card dd {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  text-align: right;
}

.live-asset-empty {
  grid-column: 1 / -1;
  min-height: 168px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 1px dashed rgba(151, 177, 211, 0.22);
  border-radius: 16px;
  background: rgba(10, 21, 39, 0.38);
  text-align: center;
  line-height: 1.7;
}

.live-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 22px;
  margin-top: 0;
}

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

.field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.credential-form,
.referral-card {
  display: grid;
  gap: 13px;
}

.action-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

.big-action {
  width: 100%;
  min-height: 54px;
}

.result-grid,
.fee-summary,
.plan-grid,
.referral-tools,
.referral-ledger,
.lesson-list,
.v21-stack {
  display: grid;
  gap: 20px;
}

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

.result-grid article {
  min-height: 152px;
  padding: 24px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(35, 64, 105, 0.44), rgba(8, 18, 34, 0.48)),
    rgba(11, 22, 42, 0.54);
}

.result-grid strong {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
}

.selected-result-grid strong {
  font-size: clamp(26px, 2.8vw, 36px);
  overflow-wrap: anywhere;
}

#selectedAssetName,
#liveSelectedAssetName {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#selectedAssetName .asset-icon,
#liveSelectedAssetName .asset-icon {
  width: 34px;
  height: 34px;
}

.vault-overview-grid,
.live-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  gap: 16px;
  margin-top: 16px;
}

.live-dashboard-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  margin: 18px 0 0;
}

.vault-chart-card {
  min-width: 0;
  min-height: 360px;
  padding: 24px;
  border: 1px solid rgba(151, 177, 211, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(23, 43, 72, 0.66), rgba(8, 18, 34, 0.7)),
    rgba(8, 17, 32, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.vault-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.vault-chart-head span,
.chart-metric-strip small,
.chart-legend small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.vault-chart-head strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
}

.vault-chart-head em {
  flex: 0 0 auto;
  color: var(--green);
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
}

.chart-canvas-wrap {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid rgba(151, 177, 211, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(7, 15, 29, 0.38), rgba(7, 15, 29, 0.16)),
    rgba(4, 10, 20, 0.36);
}

.compact-chart {
  min-height: 220px;
}

.chart-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 260px;
}

.compact-chart canvas {
  height: 220px;
}

.chart-metric-strip,
.chart-legend {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

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

.chart-metric-strip span,
.chart-legend span {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
}

.chart-metric-strip strong,
.chart-legend strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.chart-legend span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 16px var(--legend-color);
}

.paper-vault {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.5fr);
  gap: 38px;
  align-items: start;
  margin-top: 0;
  padding: 34px;
  border: 1px solid rgba(151, 177, 211, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 33, 58, 0.72), rgba(8, 18, 34, 0.68)),
    rgba(7, 15, 29, 0.72);
  box-shadow: none;
}

.paper-vault-main h2 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4vw, 48px);
}

.paper-vault-main p {
  margin-bottom: 0;
}

.paper-vault-profit {
  padding: 24px;
  border: 1px solid rgba(139, 220, 255, 0.22);
  border-left: 2px solid rgba(139, 220, 255, 0.72);
  border-radius: 12px;
  background:
    linear-gradient(120deg, rgba(139, 220, 255, 0.11), rgba(73, 175, 233, 0.035)),
    rgba(11, 22, 42, 0.56);
}

.paper-vault-profit span,
.paper-vault-profit small,
.paper-vault-grid span,
.paper-vault-footer,
.paper-vault-assets {
  color: var(--muted);
}

.paper-vault-profit strong {
  display: block;
  margin: 8px 0;
  color: var(--green);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
}

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

.paper-vault-grid article {
  min-height: 118px;
  padding: 22px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.5);
}

.paper-vault-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 24px;
}

.paper-vault-assets,
.paper-vault-footer {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}

.paper-vault-assets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.paper-asset-card {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(151, 177, 211, 0.16);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.42);
}

.paper-asset-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.paper-asset-card span {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 950;
}

.paper-asset-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.paper-asset-title .asset-icon {
  width: 34px;
  height: 34px;
}

.paper-asset-card strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.paper-asset-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  margin: 0;
}

.paper-asset-card dt {
  color: var(--muted);
}

.paper-asset-card dd {
  margin: 0;
  color: var(--text);
  font-weight: 850;
}

.safety-box,
.referral-result {
  padding: 14px;
  border: 1px solid rgba(97, 215, 255, 0.2);
  border-radius: 10px;
  background: rgba(97, 215, 255, 0.045);
  color: #bdd0e4;
  font-size: 13px;
  line-height: 1.6;
}

.simulation-output {
  margin-top: 78px;
  box-shadow: none;
}

.explain-stack {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.v21-stack article {
  min-height: auto;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 0;
  background: transparent;
}

.v21-stack strong,
.referral-ledger strong {
  display: block;
  margin-bottom: 8px;
}

.v21-stack span,
.referral-ledger span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.details-card {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.54);
}

.details-card summary,
.lesson-card summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.details-card summary::-webkit-details-marker,
.lesson-card summary::-webkit-details-marker {
  display: none;
}

.details-card summary::after,
.lesson-card summary::after {
  content: "+";
  color: var(--cyan);
  font-size: 20px;
}

.details-card[open] summary::after,
.lesson-card[open] summary::after {
  content: "-";
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 12px;
}

.allocation-list {
  display: grid;
  gap: 0;
  padding: 0 18px 18px;
}

.allocation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  min-height: 58px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.allocation-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.allocation-item strong {
  color: var(--cyan);
  font-size: 18px;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.depth-chart-wrap {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid rgba(151, 177, 211, 0.14);
  border-radius: 12px;
  background: #050914;
}

#depthCanvas {
  display: block;
  width: 100%;
  min-height: 360px;
}

#chartTooltip {
  position: absolute;
  display: grid;
  gap: 2px;
  min-width: 142px;
  padding: 10px 12px;
  border: 1px solid rgba(97, 215, 255, 0.28);
  border-radius: 10px;
  background: rgba(7, 17, 31, 0.95);
  color: var(--text);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

#chartTooltip.show {
  opacity: 1;
  transform: translateY(0);
}

#chartTooltip span {
  color: var(--muted);
}

.fee-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

.fee-summary article {
  min-height: 172px;
  padding: 32px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent),
    rgba(11, 22, 42, 0.54);
}

.featured-fee {
  border-color: rgba(97, 215, 255, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(97, 215, 255, 0.14), rgba(139, 220, 255, 0.045)),
    rgba(11, 22, 42, 0.7) !important;
}

.plans-panel {
  margin-top: 78px;
  box-shadow: none;
}

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

.plan-card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 300px;
  padding: 26px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.54);
}

.plan-card strong {
  font-size: 28px;
}

.plan-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.plan-badge {
  width: fit-content;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
}

.featured-plan {
  border-color: rgba(97, 215, 255, 0.35);
}

.referral-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 30px;
  margin-top: 78px;
  box-shadow: none;
}

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

.referral-card {
  padding: 24px;
  border: 1px solid var(--surface-border-soft);
  border-radius: 12px;
  background: rgba(11, 22, 42, 0.54);
}

.referral-ledger {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.referral-ledger article {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 0;
  background: transparent;
}

.lesson-card {
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
  border-radius: 0;
  background: transparent;
}

.v21-stack article::before,
.referral-ledger article::before,
.lesson-card::before {
  display: none;
}

.v21-stack article:hover,
.referral-ledger article:hover,
.lesson-card:hover {
  transform: none;
  box-shadow: none;
}

.lesson-card p {
  margin: 0;
  padding: 0 18px 18px;
}

.seo-copy {
  max-width: 880px;
  margin-top: 82px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(151, 177, 211, 0.12);
}

.seo-copy p {
  margin: 0;
  color: rgba(155, 174, 195, 0.78);
  font-size: 13px;
  line-height: 1.9;
}

.site-footer {
  width: min(1280px, calc(100% - 64px));
  margin: 108px auto 0;
  padding: 76px 0 92px;
  border-top: 1px solid rgba(151, 177, 211, 0.16);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(220px, 0.35fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}

.footer-inner strong {
  position: relative;
  width: fit-content;
  font-family: var(--font-brand-cjk);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: transparent;
  background:
    linear-gradient(130deg, #ffffff 0%, #9cefff 38%, #458cff 74%, #e8fbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 18px 44px rgba(73, 175, 233, 0.16);
  transform: rotate(-1.6deg);
}

html:lang(en) .footer-inner strong {
  font-family: var(--font-brand-latin);
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: 0.01em;
  transform: rotate(-2.8deg);
}

.footer-inner span {
  color: var(--text);
  font-weight: 900;
}

.footer-inner p {
  margin: 0;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  max-width: min(420px, calc(100vw - 44px));
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(15, 28, 51, 0.94);
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.technical-sink {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* DeFi surface polish: low-contrast edges, subtle depth, and cleaner corners. */
.market-shell,
.operator-shell,
.strategy-workspace,
.depth-panel,
.connect-card,
.paper-vault,
.simulation-board,
.live-console,
.simulation-output,
.plans-panel,
.referral-panel,
.faq-panel {
  border: 1px solid transparent;
  border-radius: var(--radius-shell);
  background:
    var(--defi-fill) padding-box,
    var(--defi-edge) border-box;
  box-shadow: var(--defi-soft-shadow);
}

.operator-shell {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(19, 35, 61, 0.86), rgba(6, 14, 27, 0.9)) padding-box,
    linear-gradient(145deg, rgba(119, 207, 255, 0.34), rgba(145, 165, 205, 0.08) 42%, rgba(139, 220, 255, 0.22)) border-box;
}

.result-grid article,
.vault-chart-card,
.paper-vault-profit,
.paper-vault-grid article,
.paper-asset-card,
.live-status-grid article,
.live-asset-card,
.vault-grid article,
.fee-summary article,
.plan-card,
.referral-card,
.referral-ledger article,
.details-card {
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background:
    var(--defi-card-fill) padding-box,
    linear-gradient(145deg, rgba(142, 191, 238, 0.2), rgba(120, 144, 180, 0.05) 48%, rgba(139, 220, 255, 0.12)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.simulation-board,
.live-console,
.paper-vault,
.connect-card {
  border-radius: var(--radius-panel);
}

.result-grid article,
.paper-vault-grid article,
.paper-asset-card,
.live-status-grid article,
.live-asset-card {
  border-radius: 18px;
}

.market-table {
  gap: 8px;
  border-top-color: rgba(151, 177, 211, 0.1);
}

.market-row {
  min-height: 88px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(11, 22, 42, 0), rgba(11, 22, 42, 0)) padding-box,
    linear-gradient(145deg, transparent, transparent) border-box;
}

.market-row:hover,
.market-row.active {
  background:
    linear-gradient(90deg, rgba(25, 47, 78, 0.6), rgba(9, 19, 35, 0.36)) padding-box,
    linear-gradient(145deg, rgba(97, 215, 255, 0.26), rgba(151, 177, 211, 0.06), rgba(139, 220, 255, 0.14)) border-box;
  transform: translateY(-1px);
}

.market-row::before {
  inset: 1px;
  border-radius: 17px;
}

.market-detail-grid {
  gap: 10px 18px;
}

.market-detail-item {
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid rgba(151, 177, 211, 0.08);
  border-radius: 16px;
  background: rgba(7, 15, 29, 0.22);
}

.chart-canvas-wrap {
  border-color: rgba(151, 177, 211, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, 0.44), rgba(8, 18, 34, 0.28)),
    rgba(4, 10, 20, 0.24);
}

.journey-steps,
.advantage-grid {
  border-top-color: rgba(151, 177, 211, 0.1);
  border-bottom-color: rgba(151, 177, 211, 0.1);
}

.journey-steps article,
.advantage-grid article {
  border-color: rgba(151, 177, 211, 0.09);
}

.market-shell:hover,
.operator-shell:hover,
.simulation-board:hover,
.live-console:hover,
.paper-vault:hover,
.connect-card:hover,
.plans-panel:hover,
.referral-panel:hover,
.faq-panel:hover {
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.result-grid article:hover,
.vault-chart-card:hover,
.paper-vault-grid article:hover,
.paper-asset-card:hover,
.live-status-grid article:hover,
.live-asset-card:hover,
.fee-summary article:hover,
.plan-card:hover,
.referral-card:hover,
.details-card:hover {
  border-color: transparent;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .sidebar-status {
    display: none;
  }

  .connect-layout,
  .plan-grid,
  .advantage-grid,
  .strategy-pillars,
  .explain-stack,
  .journey-steps,
  .live-selected-grid,
  .live-status-grid,
  .live-asset-grid,
  .vault-overview-grid,
  .live-dashboard-grid,
  .paper-vault,
  .paper-vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 860px) {
  .site-header {
    position: sticky;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: stretch;
    width: 100%;
    min-height: 0;
    gap: 8px;
    margin-top: 0;
    padding: 8px 12px;
  }

  .brand {
    justify-content: flex-start;
    min-width: 0;
    gap: 7px;
  }

  .brand-mark,
  .luye-mark {
    width: 36px;
    height: 36px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand small {
    display: none;
  }

  .nav-list {
    grid-column: auto;
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    min-height: 38px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px;
    border-radius: 12px;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, black 14px, black calc(100% - 18px), transparent 100%);
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav-item::after {
    display: none;
  }

  .header-actions {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0;
  }

  .language-switch {
    gap: 1px;
    padding: 3px;
    border-radius: 12px;
  }

  .language-option {
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px;
    font-size: 11px;
  }

  .header-actions .primary-button {
    display: none;
  }

  .hero-minimal,
  .stat-strip,
  .market-shell,
  .strategy-workspace,
  .strategy-pillars,
  .depth-panel,
.simple-flow,
.trust-copy,
.clean-page,
.operator-shell,
.advantage-panel,
.connect-layout,
  .simulation-output,
  .fee-summary,
  .plans-panel,
  .referral-panel,
  .faq-panel,
  .paper-vault,
  .seo-copy {
    width: calc(100% - 40px);
  }

  .site-footer {
    width: calc(100% - 32px);
    margin-top: 84px;
    padding: 56px 0 72px;
  }

  .hero-minimal {
    min-height: auto;
    padding: 34px 0 24px;
    text-align: left;
  }

  .hero-center {
    max-width: none;
  }

  .live-dot {
    justify-content: flex-start;
  }

  .hero-title {
    gap: 10px;
    margin-bottom: 18px;
  }

  .title-brand {
    font-size: clamp(52px, 18vw, 72px);
  }

  .title-product {
    font-size: clamp(24px, 8vw, 34px);
  }

  .hero-lead {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.65;
  }

  .hero-actions {
    justify-content: stretch;
    gap: 10px;
  }

  .stat-strip,
  .vault-grid,
  .advantage-grid,
  .simple-flow,
  .strategy-pillars,
  .trust-copy,
  .operator-head,
  .journey-steps,
  .connect-layout,
  .result-grid,
  .live-layout,
  .live-selected-grid,
  .live-status-grid,
  .live-asset-grid,
  .vault-overview-grid,
  .live-dashboard-grid,
  .fee-summary,
  .plan-grid,
  .referral-panel,
  .referral-tools,
  .referral-ledger,
  .explain-stack,
  .paper-vault,
  .paper-vault-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .market-shell,
  .strategy-workspace,
  .depth-panel {
    padding: 42px 18px;
  }

  .simple-flow {
    gap: 22px;
    margin-top: 58px;
    padding: 56px 0;
  }

  .trust-copy {
    margin-top: 58px;
    padding: 62px 0 20px;
  }

  .clean-page {
    min-height: 260px;
    padding: 86px 0 44px;
  }

  .operator-shell {
    padding: 22px;
    border-radius: 18px;
  }

  .advantage-panel {
    padding: 34px 0;
  }

  .advantage-panel .section-heading {
    align-items: start;
    margin-bottom: 24px;
  }

  .advantage-grid {
    gap: 0;
  }

  .advantage-grid article {
    min-height: 0;
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(151, 177, 211, 0.12);
  }

  .advantage-grid article:last-child {
    border-bottom: 0;
  }

  .advantage-grid article:hover {
    border-right-color: transparent;
    border-bottom-color: rgba(151, 177, 211, 0.12);
  }

  .advantage-grid article:last-child:hover {
    border-bottom-color: transparent;
  }

  .operator-head {
    align-items: stretch;
    gap: 20px;
    padding-bottom: 22px;
  }

  .operator-head h2 {
    font-size: clamp(32px, 12vw, 46px);
  }

  .workspace-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 14px;
  }

  .workspace-tab {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 13px;
  }

  .workspace-panel {
    padding-top: 24px;
  }

  .workspace-panel.active {
    gap: 22px;
  }

  .journey-steps {
    gap: 10px;
    padding-top: 16px;
    border-bottom: 0;
  }

  .journey-steps article {
    min-height: 0;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(151, 177, 211, 0.12);
  }

  .journey-steps article:last-child {
    border-bottom: 0;
  }

  .simulation-board,
  .live-console {
    padding: 22px 16px;
    border-radius: 16px;
  }

  .simulation-board .panel-heading,
  .live-console-head {
    display: grid;
    gap: 18px;
  }

  .live-status-grid {
    grid-template-columns: 1fr;
  }

  .operator-shell .workspace-market {
    padding: 24px 16px;
  }

  .live-asset-toolbar {
    display: grid;
    gap: 12px;
  }

  .asset-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 14px;
  }

  .asset-toggle-button {
    width: 100%;
    min-width: 0;
    border-radius: 11px;
  }

  .asset-toggle-button .asset-icon {
    width: 22px;
    height: 22px;
  }

  .live-selected-grid {
    grid-template-columns: 1fr;
  }

  .live-status-grid article {
    min-height: 112px;
    padding: 18px;
  }

  .allocation-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .allocation-item strong {
    text-align: left;
    white-space: normal;
  }

  .live-asset-grid {
    grid-template-columns: 1fr;
  }

  .live-asset-card {
    min-height: 0;
    padding: 20px;
  }

  .vault-chart-card {
    min-height: 0;
    padding: 20px;
  }

  .chart-canvas-wrap,
  .compact-chart {
    min-height: 220px;
  }

  .chart-canvas-wrap canvas,
  .compact-chart canvas {
    height: 220px;
  }

  .live-asset-card header {
    align-items: start;
    display: grid;
  }

  .live-asset-card .live-asset-total {
    text-align: left;
  }

  .stat-strip article {
    min-height: 112px;
    padding: 22px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .stat-strip article:last-child {
    border-bottom: 0;
  }

  .stat-strip strong {
    font-size: 30px;
  }

  .section-heading,
  .panel-heading {
    display: grid;
  }

  .market-table-head {
    display: none;
  }

  .market-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px 8px;
    min-height: 0;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(16, 31, 54, 0.66), rgba(8, 18, 34, 0.66)) padding-box,
      linear-gradient(145deg, rgba(97, 215, 255, 0.2), rgba(151, 177, 211, 0.04), rgba(139, 220, 255, 0.11)) border-box;
  }

  .market-row::before {
    inset: 1px;
    border-radius: 15px;
  }

  .market-asset {
    grid-column: 1 / -1;
    gap: 10px;
  }

  .market-asset .asset-icon {
    width: 34px;
    height: 34px;
  }

  .market-asset strong {
    font-size: 17px;
  }

  .market-row > span:not(.market-asset),
  .market-row > strong {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.25;
  }

  .market-apy {
    font-size: 18px;
  }

  .market-row [data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
  }

  .market-row span,
  .market-row strong,
  .market-row em {
    justify-self: stretch;
  }

  .market-row em {
    grid-column: 1 / -1;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(97, 215, 255, 0.24);
    border-radius: 9px;
    background: rgba(97, 215, 255, 0.08);
  }

  .market-detail-panel,
  .market-detail-grid {
    grid-template-columns: 1fr;
  }

  .market-detail-panel {
    gap: 24px;
  }

  .market-detail-item {
    min-height: 0;
    padding: 14px 16px;
    border-radius: 14px;
  }

  .connect-card,
  .paper-vault,
  .simulation-output,
  .plans-panel,
  .referral-panel,
  .faq-panel {
    padding: 30px 20px;
  }

  .paper-vault {
    gap: 24px;
    margin-top: 44px;
  }

  .paper-vault-profit {
    padding: 18px;
  }

  .paper-vault-profit strong {
    font-size: 34px;
  }

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

  .paper-vault-grid article,
  .result-grid article {
    min-height: 108px;
    padding: 18px;
    border-radius: 16px;
  }

  .paper-vault-footer {
    align-items: stretch;
  }

  .paper-vault-assets {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .paper-asset-card {
    padding: 20px;
  }

  .paper-asset-card > div {
    align-items: start;
    display: grid;
    gap: 8px;
  }

  .paper-asset-card strong {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

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

  .paper-vault-grid strong,
  .result-grid strong {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  .table-wrap {
    margin: 0 -18px;
  }

  th,
  td {
    padding: 10px 12px;
    font-size: 12px;
  }

  .mini-metrics {
    justify-content: flex-start;
  }

  .primary-button,
  .secondary-button,
  .ghost-button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .paper-vault-grid,
  .result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .paper-vault-grid,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .paper-vault-grid article,
  .result-grid article {
    min-height: 118px;
  }
}

/* Minimal blue theme pass: fewer boxes, calmer surfaces, one visual language. */
body {
  background:
    linear-gradient(180deg, #07111f 0%, #08182b 48%, #050b15 100%),
    #07111f;
}

body::before {
  opacity: 0.075;
}

.site-bg {
  background:
    linear-gradient(180deg, rgba(100, 184, 255, 0.045), transparent 28%),
    linear-gradient(140deg, transparent 0 58%, rgba(100, 184, 255, 0.035) 58% 58.1%, transparent 58.1% 100%);
}

.site-header {
  gap: 28px;
  background: rgba(5, 12, 23, 0.88);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.site-header::after {
  background: rgba(139, 220, 255, 0.12);
}

.nav-list {
  gap: 6px;
  min-height: 46px;
  padding: 4px;
  border: 1px solid rgba(95, 146, 198, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14, 29, 51, 0.44), rgba(6, 14, 27, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 16px 40px rgba(0, 0, 0, 0.14);
}

.nav-item {
  isolation: isolate;
  overflow: hidden;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(120, 181, 232, 0), rgba(120, 181, 232, 0));
  color: rgba(210, 222, 238, 0.62);
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  transform: translateZ(0);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 10%, rgba(255, 255, 255, 0.2) 34%, rgba(139, 220, 255, 0.24) 46%, transparent 64%);
  opacity: 0;
  transform: translateX(-130%) skewX(-16deg);
  transition: opacity 0.28s ease, transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  border: 1px solid rgba(125, 197, 255, 0);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 220, 255, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(63, 121, 176, 0.16), rgba(25, 47, 82, 0.08));
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--text);
}

.nav-item:hover {
  border-color: rgba(125, 197, 255, 0.22);
  transform: translateY(-1px);
}

.nav-item:hover::before {
  opacity: 1;
  transform: translateX(130%) skewX(-16deg);
}

.nav-item:hover::after {
  border-color: rgba(125, 197, 255, 0.22);
  opacity: 0.74;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.nav-item.active {
  border-color: rgba(130, 203, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(61, 125, 184, 0.24), rgba(20, 47, 82, 0.24));
  box-shadow:
    0 0 0 1px rgba(139, 220, 255, 0.08),
    0 12px 34px rgba(73, 175, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-item.active::after {
  border-color: rgba(130, 203, 255, 0.52);
  opacity: 1;
}

.language-switch {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(95, 146, 198, 0.12);
  border-radius: 16px;
  background: rgba(9, 20, 37, 0.46);
}

.language-option {
  min-width: 34px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 11px;
  background: transparent;
  color: rgba(210, 222, 238, 0.58);
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: 700;
}

.language-option::after {
  display: none;
}

.language-option.active,
.language-option:hover {
  background:
    linear-gradient(180deg, rgba(61, 125, 184, 0.3), rgba(20, 47, 82, 0.22));
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(130, 203, 255, 0.22),
    0 8px 18px rgba(73, 175, 233, 0.08);
}

.header-actions .primary-button {
  min-height: 42px;
  padding-inline: 20px;
  border: 0;
  border-radius: 14px;
  background: #86cfff;
  box-shadow: none;
}

.market-shell,
.operator-shell,
.strategy-workspace,
.depth-panel,
.connect-card,
.paper-vault,
.simulation-board,
.live-console,
.simulation-output,
.plans-panel,
.referral-panel,
.faq-panel {
  border: 1px solid rgba(139, 220, 255, 0.1);
  background: rgba(9, 20, 37, 0.72);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.16);
}

.result-grid article,
.vault-chart-card,
.paper-vault-profit,
.paper-vault-grid article,
.paper-asset-card,
.live-status-grid article,
.live-asset-card,
.vault-grid article,
.fee-summary article,
.plan-card,
.referral-card,
.referral-ledger article,
.details-card {
  border: 1px solid rgba(139, 220, 255, 0.08);
  background: rgba(10, 23, 42, 0.58);
  box-shadow: none;
}

.market-row {
  border: 0;
  border-radius: 14px;
  background: transparent;
}

.market-row:hover,
.market-row.active {
  background: rgba(100, 184, 255, 0.08);
  box-shadow: inset 2px 0 0 rgba(139, 220, 255, 0.62);
}

.market-row::before {
  background: linear-gradient(90deg, rgba(139, 220, 255, 0.08), transparent 62%);
}

.market-detail-item {
  border: 0;
  border-top: 1px solid rgba(139, 220, 255, 0.09);
  border-radius: 0;
  background: transparent;
}

.chart-canvas-wrap {
  border: 0;
  background: rgba(5, 13, 25, 0.34);
}

.market-shell:hover,
.operator-shell:hover,
.simulation-board:hover,
.live-console:hover,
.paper-vault:hover,
.connect-card:hover,
.plans-panel:hover,
.referral-panel:hover,
.faq-panel:hover,
.result-grid article:hover,
.vault-chart-card:hover,
.paper-vault-grid article:hover,
.paper-asset-card:hover,
.live-status-grid article:hover,
.live-asset-card:hover,
.fee-summary article:hover,
.plan-card:hover,
.referral-card:hover,
.details-card:hover {
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.18);
}

@media (max-width: 860px) {
  .site-header {
    gap: 10px;
    padding: 8px 12px 9px;
  }

  .nav-list {
    gap: 4px;
    min-height: 40px;
    padding: 3px;
    border-radius: 15px;
    mask-image: linear-gradient(90deg, transparent 0, black 10px, black calc(100% - 12px), transparent 100%);
  }

  .nav-item {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 11px;
  }

  .nav-item[data-tab="academy"] {
    display: none;
  }

  .language-switch {
    gap: 3px;
    padding: 3px;
    border-radius: 14px;
  }

  .language-option {
    min-width: 30px;
    min-height: 30px;
    padding: 0 7px;
    border-radius: 10px;
  }

  .market-row {
    border: 0;
    border-radius: 14px;
    background: rgba(10, 23, 42, 0.42);
  }

  .market-row:hover,
  .market-row.active {
    background: rgba(100, 184, 255, 0.08);
  }

  .market-detail-item {
    padding: 14px 0;
  }
}

@media (max-width: 640px) {
  .title-brand {
    font-size: clamp(58px, 19vw, 82px);
    letter-spacing: 0.025em;
  }

  html:lang(en) .title-brand {
    font-size: clamp(76px, 23vw, 104px);
  }

  .brand strong {
    font-size: 20px;
  }

  html:lang(en) .brand strong {
    font-size: 27px;
  }
}

/* ============================================================
   V3 Visual Refresh — AAVE / Kamino-inspired DeFi theme layer
   覆寫層：精緻深色、紫青漸層強調、Inter/Space Grotesk 數據字體
   ============================================================ */

:root {
  --bg: #0b0e17;
  --bg-2: #0e1220;
  --panel: #121627;
  --panel-2: #171c30;
  --panel-3: #0e1322;
  --line: rgba(168, 180, 212, 0.1);
  --line-strong: rgba(168, 180, 212, 0.2);
  --text: #f1f3fb;
  --muted: #9ba3bf;
  --faint: #6a7390;
  --blue: #7da4ff;
  --cyan: #46d6e8;
  --green: #3fd6a4;
  --yellow: #f7c66b;
  --red: #ff6b8b;
  --accent-a: #8a6bff;
  --accent-b: #38d0ff;
  --accent-grad: linear-gradient(96deg, var(--accent-a), var(--accent-b));
  --surface: rgba(17, 21, 38, 0.82);
  --surface-2: rgba(22, 27, 47, 0.92);
  --surface-border: rgba(150, 162, 205, 0.2);
  --surface-border-soft: rgba(150, 162, 205, 0.12);
  --radius-shell: 24px;
  --radius-panel: 18px;
  --radius-card: 14px;
  --defi-edge: linear-gradient(140deg, rgba(138, 107, 255, 0.22), rgba(120, 142, 200, 0.07) 46%, rgba(56, 208, 255, 0.1));
  --defi-fill: linear-gradient(180deg, rgba(19, 24, 43, 0.86), rgba(11, 14, 26, 0.9));
  --defi-card-fill: linear-gradient(180deg, rgba(23, 28, 50, 0.6), rgba(13, 17, 32, 0.68));
  --defi-soft-shadow: 0 20px 60px rgba(4, 6, 14, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow: 0 30px 80px rgba(4, 6, 14, 0.38);
  --font-sans: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-data: "Space Grotesk", Inter, "Noto Sans TC", ui-sans-serif, system-ui, sans-serif;
}

body {
  background:
    radial-gradient(1100px 540px at 82% -8%, rgba(138, 107, 255, 0.13), transparent 60%),
    radial-gradient(900px 480px at 8% 4%, rgba(56, 208, 255, 0.09), transparent 58%),
    radial-gradient(1200px 800px at 50% 118%, rgba(63, 214, 164, 0.05), transparent 60%),
    linear-gradient(180deg, #0d1120 0%, #0b0e17 44%, #080a12 100%);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  opacity: 0.1;
  background-size: 64px 64px;
}

.site-bg {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%);
}

/* ---------- 數據可讀性：所有數字使用等寬數字 ---------- */
strong,
em,
.stat-strip article strong,
.mini-metrics strong,
.result-grid strong,
.market-row strong,
.live-selected-grid strong,
.live-status-grid strong,
.paper-vault-grid strong,
.paper-vault-profit strong,
table td,
table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Header / 導覽 ---------- */
.site-header {
  background: rgba(10, 13, 23, 0.78);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 14px 40px rgba(4, 6, 14, 0.3);
}

.site-header::after {
  background: linear-gradient(90deg, transparent, rgba(138, 107, 255, 0.32), rgba(56, 208, 255, 0.26), transparent);
}

.nav-item {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nav-item:hover,
.nav-item.active {
  background: linear-gradient(180deg, rgba(138, 107, 255, 0.16), rgba(56, 208, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(150, 162, 205, 0.18);
  color: var(--text);
}

.language-switch {
  border-radius: 999px;
  background: rgba(17, 21, 38, 0.8);
  box-shadow: inset 0 0 0 1px rgba(150, 162, 205, 0.14);
}

.language-option {
  border-radius: 999px;
  font-weight: 700;
}

.language-option.active,
.language-option:hover {
  background: rgba(138, 107, 255, 0.18);
}

/* ---------- 按鈕 ---------- */
.nav-item,
.primary-button,
.secondary-button,
.ghost-button {
  border-radius: 12px;
}

.primary-button {
  position: relative;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  background: var(--accent-grad);
  color: #07101e;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(98, 122, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.primary-button:hover {
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(98, 122, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.06);
}

.secondary-button {
  border: 1px solid rgba(63, 214, 164, 0.35);
  background: rgba(63, 214, 164, 0.12);
  color: var(--green);
  font-weight: 800;
}

.secondary-button:hover {
  border-color: rgba(63, 214, 164, 0.6);
  background: rgba(63, 214, 164, 0.18);
}

.ghost-button {
  border: 1px solid rgba(150, 162, 205, 0.22);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 700;
}

.ghost-button:hover {
  border-color: rgba(138, 107, 255, 0.5);
  background: rgba(138, 107, 255, 0.08);
}

.site-header .primary-button.compact {
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(98, 122, 255, 0.3);
}

/* ---------- 標題 / 文案 ---------- */
h2 {
  font-weight: 800;
  letter-spacing: -0.018em;
}

.eyebrow {
  color: var(--accent-b);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-lead,
p {
  line-height: 1.75;
}

.title-product {
  letter-spacing: -0.02em;
}

/* ---------- 核心數據條：APY 大字 ---------- */
.stat-strip article strong,
#homeLiveApy,
#homeMonthlyEstimate {
  font-family: var(--font-data);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #f1f3fb 30%, #b9c5ff 70%, #7ee6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mini-metrics strong,
.result-grid strong,
.paper-vault-profit strong,
.live-selected-grid strong {
  font-family: var(--font-data);
  letter-spacing: -0.01em;
}

/* ---------- 卡片質感統一 ---------- */
.stat-strip,
.connect-card,
.vault-chart-card,
.plan-card,
.details-card {
  border-radius: var(--radius-panel);
}

.advantage-grid article,
.simple-flow article,
.journey-steps article,
.strategy-pillars article,
.fee-summary article,
.result-grid article,
.live-selected-grid article,
.live-status-grid article,
.paper-vault-grid article {
  border-radius: var(--radius-card);
}

/* ---------- 市場列表（AAVE markets 風格） ---------- */
.market-row {
  border-radius: 14px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.market-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(4, 6, 14, 0.3), inset 0 0 0 1px rgba(138, 107, 255, 0.28);
}

.market-row strong {
  font-family: var(--font-data);
  font-size: 19px;
  color: var(--green);
}

/* ---------- 表單 ---------- */
.field input,
.field select {
  min-height: 44px;
  border-radius: 12px;
  border-color: rgba(150, 162, 205, 0.18);
  background: rgba(11, 14, 26, 0.7);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: rgba(138, 107, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(138, 107, 255, 0.16);
}

/* ---------- 工作台分頁 ---------- */
.workspace-tab {
  border-radius: 999px;
  font-weight: 700;
}

.workspace-tab.active {
  background: var(--accent-grad);
  color: #07101e;
  box-shadow: 0 8px 22px rgba(98, 122, 255, 0.3);
}

/* ---------- 膠囊 / 狀態 ---------- */
.connection-pill,
.pressure-pill,
.mode-pill {
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 表格 ---------- */
.table-wrap table th {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-wrap table td {
  font-family: var(--font-data);
  font-size: 13.5px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(150, 162, 205, 0.1);
}

/* ---------- 細節：捲軸與選取 ---------- */
::selection {
  background: rgba(138, 107, 255, 0.4);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #0b0e17;
  border-radius: 999px;
  background: rgba(150, 162, 205, 0.28);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   V4 Redesign — unique identity layer
   獨特字體系統（Unbounded 顯示字）、去 AI 感、互動特效
   ============================================================ */

:root {
  --font-display: "Unbounded", "Noto Sans TC", system-ui, sans-serif;
  --font-brand-cjk: var(--font-display);
  --font-brand-latin: var(--font-display);
}

/* ---------- 去 AI 感：移除格線背景與游標光條 ---------- */
body::before,
.cursor-aura,
.title-brand::before,
.title-brand::after,
.brand strong::after {
  display: none !important;
}

/* ---------- 品牌字：草寫 → 幾何顯示字 ---------- */
.brand strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand small {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

html:lang(en) .brand strong {
  font-family: var(--font-display);
  font-size: 16px;
}

/* ---------- Hero 重排：扁平、緊湊、左右不歪斜 ---------- */
.hero-title {
  gap: 10px;
}

.title-brand,
html:lang(en) .title-brand,
html:lang(zh-Hans) .title-brand {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: none;
  transform: none;
  filter: none;
  padding: 10px 22px 10px 26px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(138, 107, 255, 0.1);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-text-fill-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(138, 107, 255, 0.34);
}

.title-product {
  justify-self: center;
  max-width: 15em;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: transparent;
  background: linear-gradient(118deg, #ffffff 12%, #cfd6ff 46%, #8a6bff 78%, #38d0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lead {
  max-width: 38em;
  margin-inline: auto;
}

/* ---------- 顯示字輔助：eyebrow 與大數字 ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
}

.stat-strip article strong,
#homeLiveApy,
#homeMonthlyEstimate {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- 按鈕互動：光澤掃過 + 按壓回饋 ---------- */
.primary-button,
.secondary-button,
.ghost-button,
.workspace-tab,
.market-row {
  position: relative;
  overflow: hidden;
}

.primary-button::before,
.secondary-button::before,
.workspace-tab.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.32) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.primary-button:hover::before,
.secondary-button:hover::before,
.workspace-tab.active:hover::before {
  transform: translateX(130%);
}

.primary-button:active,
.secondary-button:active,
.ghost-button:active,
.workspace-tab:active,
.market-row:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.06s;
}

/* ---------- 卡片懸停：精準位移 + 邊框亮起 ---------- */
.stat-strip article,
.advantage-grid article,
.simple-flow article,
.journey-steps article,
.strategy-pillars article,
.fee-summary article,
.result-grid article,
.live-status-grid article,
.live-selected-grid article {
  transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.22s ease;
}

.stat-strip article:hover,
.advantage-grid article:hover,
.simple-flow article:hover,
.journey-steps article:hover,
.strategy-pillars article:hover,
.fee-summary article:hover,
.result-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(4, 6, 14, 0.4), inset 0 0 0 1px rgba(138, 107, 255, 0.3);
}

/* ---------- 分頁切換動效 ---------- */
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-panel.active {
  animation: panelIn 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- 滾動顯現 ---------- */
.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-item.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.active {
    animation: none;
  }
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 數字更新閃爍提示 ---------- */
@keyframes valueFlash {
  0% {
    color: var(--cyan);
  }
  100% {
    color: inherit;
  }
}

.value-flash {
  animation: valueFlash 0.8s ease;
}

/* ============================================================
   V5 — AAVE-inspired landing language + Kamino-style data tiles
   ============================================================ */

:root {
  --font-display: "Sora", "Noto Sans TC", system-ui, sans-serif;
  --accent-a: #b6509e;
  --accent-b: #2ebac6;
  --accent-grad: linear-gradient(96deg, #b6509e, #7d6bd8 48%, #2ebac6);
}

body {
  background:
    radial-gradient(1000px 520px at 80% -6%, rgba(182, 80, 158, 0.14), transparent 58%),
    radial-gradient(880px 460px at 10% 2%, rgba(46, 186, 198, 0.11), transparent 56%),
    linear-gradient(180deg, #0c0e1b 0%, #0a0c16 46%, #07080f 100%);
}

/* ---------- Hero：AAVE 式大標 ---------- */
.title-product {
  max-width: 13em;
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  background: linear-gradient(112deg, #ffffff 18%, #e9c7f1 52%, #8fe6ea 88%);
  -webkit-background-clip: text;
  background-clip: text;
}

.title-brand,
html:lang(en) .title-brand,
html:lang(zh-Hans) .title-brand {
  letter-spacing: 0.34em;
  background: rgba(182, 80, 158, 0.12);
  box-shadow: inset 0 0 0 1px rgba(182, 80, 158, 0.4);
}

.eyebrow {
  color: #8fe6ea;
}

/* ---------- 按鈕：AAVE 全圓角膠囊 ---------- */
.primary-button,
.secondary-button,
.ghost-button {
  border-radius: 999px;
}

.primary-button {
  box-shadow: 0 10px 30px rgba(182, 80, 158, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(20, 8, 30, 0.35);
}

.primary-button:hover {
  box-shadow: 0 16px 40px rgba(182, 80, 158, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.workspace-tab.active {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(20, 8, 30, 0.35);
}

/* ---------- 核心數據帶：AAVE 巨型數字 ---------- */
.stat-strip article strong,
#homeLiveApy,
#homeMonthlyEstimate {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(118deg, #ffffff 30%, #ecd2f2 62%, #9beef0 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat-strip article > span,
.market-detail-item > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Kamino 式數據磚 ---------- */
.market-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.market-detail-item {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid rgba(168, 180, 212, 0.1);
  border-radius: 12px;
  background: rgba(15, 18, 33, 0.6);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.market-detail-item:hover {
  border-color: rgba(46, 186, 198, 0.34);
  background: rgba(18, 22, 40, 0.8);
}

.market-detail-item strong {
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- 使用率進度條（Kamino reserve 式） ---------- */
.util-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(168, 180, 212, 0.14);
  overflow: hidden;
}

.util-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ebac6, #b6509e);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Token icon：對齊與尺寸 ---------- */
.asset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -4px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.4);
}

.asset-icon svg {
  width: 22px;
  height: 22px;
  stroke: none;
}

.asset-icon-fallback {
  background: rgba(168, 180, 212, 0.18);
  font-size: 11px;
  font-weight: 800;
}

/* ---------- 狀態列數據磚同步 Kamino 風 ---------- */
.live-status-grid article,
.live-selected-grid article,
.result-grid article {
  border: 1px solid rgba(168, 180, 212, 0.1);
  background: rgba(15, 18, 33, 0.6);
}

.live-status-grid article:hover,
.live-selected-grid article:hover {
  border-color: rgba(46, 186, 198, 0.3);
}

/* ============================================================
   V6 — 扁平卡片系統（去 AI 感）+ 手機展示 + 行銷 CTA
   ============================================================ */

/* ---------- 卡片：移除漸層描邊與光暈，回到極簡實面 ---------- */
.stat-strip::before,
.connect-card::before,
.vault-chart-card::before,
.plan-card::before,
.details-card::before,
.stat-strip:hover::before,
.connect-card:hover::before,
.vault-chart-card:hover::before,
.plan-card:hover::before,
.details-card:hover::before {
  content: none !important;
}

.stat-strip,
.connect-card,
.vault-chart-card,
.plan-card,
.details-card,
.advantage-grid article,
.simple-flow article,
.journey-steps article,
.strategy-pillars article,
.fee-summary article,
.result-grid article,
.live-status-grid article,
.live-selected-grid article,
.paper-vault,
.paper-vault-grid article,
.referral-card,
.market-detail-panel,
.live-console,
.operator-shell,
.simulation-output,
.strategy-workspace,
.depth-panel {
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(18, 20, 31, 0.88);
  box-shadow: none;
  backdrop-filter: none;
}

.stat-strip article,
.market-row {
  border: 1px solid rgba(255, 255, 255, 0.045);
  background: rgba(22, 24, 38, 0.6);
  box-shadow: none;
}

.stat-strip article:hover,
.advantage-grid article:hover,
.simple-flow article:hover,
.journey-steps article:hover,
.strategy-pillars article:hover,
.fee-summary article:hover,
.result-grid article:hover,
.market-row:hover {
  border-color: rgba(46, 186, 198, 0.35);
  background: rgba(24, 27, 44, 0.9);
  box-shadow: 0 14px 36px rgba(4, 6, 14, 0.35);
}

/* ---------- 手機展示（首頁行銷區） ---------- */
.phone-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin: 34px 0;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--radius-shell);
  background:
    radial-gradient(640px 320px at 86% 20%, rgba(46, 186, 198, 0.1), transparent 60%),
    radial-gradient(520px 300px at 10% 90%, rgba(182, 80, 158, 0.08), transparent 60%),
    rgba(16, 18, 29, 0.92);
}

.phone-copy h2 {
  max-width: 14em;
}

.phone-copy .primary-button {
  margin-top: 8px;
}

.phone-frame {
  position: relative;
  width: 292px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 42px;
  background: linear-gradient(180deg, #181a28, #101220);
  box-shadow: 0 36px 80px rgba(3, 5, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  animation: phoneFloat 7s ease-in-out infinite;
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0.4deg); }
  50% { transform: translateY(-10px) rotate(-0.4deg); }
}

.phone-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 86px;
  height: 22px;
  border-radius: 999px;
  background: #07080f;
  transform: translateX(-50%);
  z-index: 2;
}

.phone-screen {
  display: grid;
  gap: 14px;
  padding: 44px 18px 18px;
  border-radius: 30px;
  background: linear-gradient(180deg, #0d0f1c, #0a0c16);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-logo {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.phone-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3fd6a4;
  box-shadow: 0 0 0 4px rgba(63, 214, 164, 0.18);
}

.phone-balance small,
.phone-apy-row small {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.phone-balance strong {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.phone-balance em {
  font-style: normal;
  color: var(--faint);
  font-size: 20px;
}

.phone-apy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.phone-apy-row > div {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.phone-apy-row strong {
  font-family: var(--font-data);
  font-size: 14px;
}

.phone-green {
  color: #3fd6a4;
}

.phone-curve {
  width: 100%;
  height: 86px;
  stroke: none;
}

.phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
}

.phone-row b {
  color: #9beef0;
  font-family: var(--font-data);
}

.phone-cta {
  padding: 11px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .phone-showcase {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ---------- 行銷 CTA 帶 ---------- */
.cta-band {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 40px 0 16px;
  padding: clamp(36px, 6vw, 72px) 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-shell);
  background:
    radial-gradient(720px 300px at 50% -30%, rgba(182, 80, 158, 0.16), transparent 64%),
    radial-gradient(620px 280px at 50% 130%, rgba(46, 186, 198, 0.12), transparent 60%),
    rgba(16, 18, 29, 0.94);
  text-align: center;
}

.cta-band h2 {
  max-width: 17em;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.cta-band p {
  max-width: 34em;
}

.cta-band .hero-actions {
  margin-top: 10px;
}

/* ---------- 品牌 wordmark（英文 Logo） ---------- */
.brand strong {
  font-size: 16px;
  letter-spacing: 0.02em;
}

.title-brand,
html:lang(en) .title-brand,
html:lang(zh-Hans) .title-brand {
  letter-spacing: 0.16em;
}

/* ============================================================
   V7 — 排版呼吸感修正 + iPhone 17 Pro Max（宇宙橘）+ 行動端 RWD
   ============================================================ */

/* ---------- 字卡：統一安全內距，高度隨內容 ---------- */
.strategy-pillars article,
.advantage-grid article,
.simple-flow article,
.journey-steps article,
.fee-summary article,
.result-grid article,
.live-status-grid article,
.live-selected-grid article,
.paper-vault-grid article,
.stat-strip article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: auto;
  padding: 24px 26px;
}

.strategy-pillars article p,
.advantage-grid article p,
.simple-flow article p {
  margin: 0;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.78;
}

.strategy-pillars article strong,
.advantage-grid article strong {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ---------- 區塊呼吸感：拉開段落間距 ---------- */
.tab-panel > section + section {
  margin-top: clamp(40px, 6.5vw, 88px);
}

.section-heading {
  margin-bottom: 26px;
}

.advantage-grid,
.strategy-pillars,
.simple-flow,
.journey-steps,
.fee-summary {
  gap: 16px;
}

/* ---------- iPhone 17 Pro Max · 宇宙橘 ---------- */
.phone-frame {
  width: 304px;
  padding: 11px;
  border: 1px solid rgba(255, 196, 142, 0.55);
  border-radius: 58px;
  background:
    linear-gradient(155deg, #f09a52 0%, #d97b35 38%, #b75c24 70%, #93451a 100%);
  box-shadow:
    0 40px 90px rgba(3, 5, 12, 0.6),
    inset 0 1.5px 1px rgba(255, 226, 196, 0.65),
    inset 0 -2px 4px rgba(70, 30, 8, 0.55);
}

/* 鈦金屬邊框側鍵 */
.phone-frame::before,
.phone-frame::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f0a564, #b75c24);
}

.phone-frame::before {
  top: 138px;
  height: 64px;
}

.phone-frame::after {
  top: 86px;
  height: 34px;
}

.phone-screen {
  position: relative;
  padding: 56px 18px 16px;
  border: 1px solid rgba(0, 0, 0, 0.85);
  border-radius: 48px;
  background:
    radial-gradient(420px 240px at 80% -4%, rgba(46, 186, 198, 0.08), transparent 60%),
    linear-gradient(180deg, #0a0c15, #07080f);
}

/* Dynamic Island */
.phone-notch {
  top: 24px;
  width: 104px;
  height: 27px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone-notch::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 32%, #1d2c45 0 28%, #0a0f1b 62%, #000);
  transform: translateY(-50%);
}

/* ---------- 行動端 RWD ---------- */
@media (max-width: 640px) {
  .tab-panel > section + section {
    margin-top: 44px;
  }

  .stat-strip {
    grid-template-columns: 1fr;
  }

  .stat-strip article {
    padding: 20px 22px;
    text-align: center;
  }

  .stat-strip article strong,
  #homeLiveApy,
  #homeMonthlyEstimate {
    font-size: 34px;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
  }

  .hero-actions .primary-button,
  .hero-actions .ghost-button {
    width: 100%;
    min-height: 48px;
  }

  .phone-showcase {
    padding: 24px 18px 34px;
    gap: 26px;
  }

  .phone-frame {
    width: min(304px, 86vw);
  }

  .title-product {
    font-size: clamp(28px, 8.6vw, 38px);
  }

  .cta-band {
    padding: 38px 20px;
  }

  .strategy-pillars article,
  .advantage-grid article,
  .simple-flow article,
  .journey-steps article {
    padding: 20px 20px;
  }

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

  h2 {
    font-size: clamp(24px, 6.4vw, 32px);
  }
}

/* V7.1 — 手機畫面小磚排版收緊 */
.phone-apy-row > div {
  min-width: 0;
  padding: 9px 8px;
}

.phone-apy-row small {
  font-size: 9px;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.phone-apy-row strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  white-space: nowrap;
}

/* ============================================================
   V8 — FLCash 品牌字 + Kamino 圖卡精修 + 溢出防護
   ============================================================ */

/* ---------- FLCash 標誌 ---------- */
.flcash-mark {
  width: 40px;
  height: 40px;
  overflow: visible;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(125, 107, 216, 0.35);
  transition: transform 0.22s ease;
  stroke: none;
}

.brand:hover .flcash-mark {
  transform: translateY(-1px) scale(1.05);
}

.brand strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  background: linear-gradient(100deg, #ffffff 38%, #d9b8e6 64%, #8fe6ea 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand small {
  letter-spacing: 0.18em;
}

.title-brand,
html:lang(en) .title-brand,
html:lang(zh-Hans) .title-brand {
  font-weight: 800;
  letter-spacing: 0.12em;
}

.phone-logo {
  background: linear-gradient(100deg, #ffffff 40%, #8fe6ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Kamino 圖卡：乾淨頭部、透明畫布、安全溢出 ---------- */
.vault-chart-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 22px 24px;
}

.vault-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.vault-chart-head > div {
  min-width: 0;
}

.vault-chart-head span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.vault-chart-head strong {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.vault-chart-head em {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: #9beef0;
}

.chart-canvas-wrap {
  border: 0;
  background: transparent;
  padding: 0;
}

.chart-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.chart-metric-strip span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chart-metric-strip small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.chart-metric-strip strong {
  font-family: var(--font-data);
  font-size: 17px;
  overflow-wrap: anywhere;
}

/* ---------- 策略主控台卡片 ---------- */
.explain-stack > * {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(18, 20, 31, 0.88);
  box-shadow: none;
}

/* ---------- 全域溢出防護 ---------- */
.tab-panel article,
.tab-panel section > div {
  min-width: 0;
}

.tab-panel article strong,
.tab-panel article p,
.tab-panel article span {
  overflow-wrap: break-word;
}

/* ============================================================
   V9 — 導覽列 Kamino 行為 + 圖卡留白
   ============================================================ */

/* 預設：純文字。當前頁：低調底框。hover：反光描邊浮現。 */
.nav-item {
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  color: var(--text);
}

.nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.028);
  box-shadow:
    inset 0 0 0 1px rgba(143, 230, 234, 0.32),
    0 0 14px rgba(46, 186, 198, 0.14);
  color: var(--text);
  transform: none;
}

.nav-item.active:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 圖卡畫布留白，曲線不貼邊 */
.chart-canvas-wrap {
  padding: 6px 0 0;
}

.paper-vault-footer .button-row {
  gap: 10px;
}

/* 收益拆分卡：畫布高度收緊，內容置中不留大空白 */
.split-card .chart-canvas-wrap,
.split-card .chart-canvas-wrap canvas {
  max-height: 200px;
}

/* ============================================================
   V10 — 字卡呼吸感總修正（全站統一）
   ============================================================ */

/* 數據磚：加大內距、標籤與數值分層、長字安全換行 */
.market-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 12px;
}

.market-detail-item {
  gap: 10px;
  padding: 18px 20px;
}

.market-detail-item > span {
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: normal;
}

.market-detail-item strong {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* 市場列：欄位間距與數值留白 */
.market-row {
  column-gap: 18px;
  padding-block: 18px;
}

.market-row > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* 各類資訊磚統一內距節奏 */
.plan-card,
.referral-card,
.connect-card,
.lesson-list > * {
  padding: 26px 28px;
}

.live-status-grid article,
.live-selected-grid article,
.result-grid article,
.paper-vault-grid article {
  gap: 9px;
  padding: 20px 22px;
}

.live-status-grid strong,
.live-selected-grid strong,
.result-grid strong {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
  text-wrap: balance;
}

.live-status-grid small,
.live-selected-grid small,
.result-grid small {
  line-height: 1.55;
}

/* 小標籤統一：不再過度拉寬字距造成 CJK 擁擠 */
.stat-strip article > span,
.market-detail-item > span,
.vault-chart-head span,
.chart-metric-strip small {
  letter-spacing: 0.08em;
}

/* 防呆：任何磚內容貼邊一律有 6px 內縮餘量 */
.market-detail-item,
.live-status-grid article,
.live-selected-grid article,
.result-grid article,
.paper-vault-grid article {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .market-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .market-detail-item {
    padding: 15px 16px;
  }

  .market-detail-item strong {
    font-size: 15.5px;
  }
}

/* ============================================================
   V11 — 模擬本金自由輸入
   ============================================================ */

.principal-control {
  display: grid;
  grid-template-columns: minmax(200px, 280px) auto;
  align-items: end;
  gap: 12px 16px;
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(15, 18, 33, 0.6);
}

.principal-field input {
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.principal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
}

.principal-chip {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(150, 162, 205, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.principal-chip:hover {
  border-color: rgba(46, 186, 198, 0.5);
  background: rgba(46, 186, 198, 0.1);
  color: var(--text);
}

.principal-control > small {
  grid-column: 1 / -1;
  color: var(--faint);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .principal-control {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* ============================================================
   V12 — 圖卡留白與響應式堆疊
   ============================================================ */

/* 圖卡並排在中等寬度以下改為直向堆疊，曲線有完整寬度 */
@media (max-width: 1100px) {
  .vault-overview-grid,
  .live-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.vault-overview-grid,
.live-dashboard-grid {
  gap: 18px;
}

.vault-chart-card {
  padding: 24px 26px 20px;
  gap: 16px;
}

/* 曲線畫布上下留白，線不貼卡邊 */
.chart-canvas-wrap {
  padding: 10px 0 4px;
}

.chart-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* 圖例列：間距放寬 */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 4px;
}

/* 深度圖卡內距 */
.depth-chart-wrap {
  padding: 18px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background: rgba(13, 16, 28, 0.55);
}

@media (max-width: 640px) {
  .vault-chart-card {
    padding: 20px 18px 16px;
  }

  .chart-metric-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   V13 — CJK 排版修正層（2026-06-14，UXUI 優化）
   問題：① 負字距(letter-spacing<0)讓中文字壅擠；② display/品牌字 line-height<1
   導致字的上下緣被裁切（字出框）。原則：中文情境字距歸零、大字級行高補足並
   overflow 可見並留 padding，維持扁平實面卡片與既有色彩不動。
   ============================================================ */

/* ① 中文（繁/簡，:lang(zh) 同時匹配 zh-Hant / zh-Hans）下取消負字距，
   避免 CJK 壅擠——負 tracking 只適合拉丁字，EN 不受影響仍保留原字距。 */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) .title-product,
:lang(zh) .title-brand,
:lang(zh) .stat-strip strong,
:lang(zh) .footer-inner strong,
:lang(zh) .stat-value,
:lang(zh) [class*="title"],
:lang(zh) [class*="heading"] {
  letter-spacing: 0 !important;
}

/* ② display / 品牌大字行高補足 + 防裁切（line-height<1 會切到上下緣）。 */
.title-brand,
.title-product,
.footer-inner strong,
.stat-strip strong,
.stat-value {
  line-height: 1.08;
  padding-block: 0.06em;
  overflow: visible;
}

/* ============================================================
   V14 — Market Workspace 卡片留白與排版美感（2026-06-14）
   問題：.market-detail-panel 原 padding:36px 0 0 0（左右下皆 0），標題與數據磚貼齊卡片邊緣。
   修法：四邊一致留白（clamp 隨寬度縮放）、lead 限制行寬增可讀性、標題與 lead 間距收斂。
   ============================================================ */
.market-detail-panel {
  padding: clamp(26px, 3vw, 40px) !important;
  box-sizing: border-box;
}
.market-detail-panel > div:first-child {
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.market-detail-panel #marketDetailTitle {
  margin-bottom: 8px;
}
.market-detail-panel #marketDetailLead {
  max-width: 52ch;
  margin: 0;
}

/* ============================================================
   V15 — Foundation/DeFi 簡約化改版（2026-07-02）
   原則：漸層只留品牌時刻（hero 標題、主 CTA、logo），其餘讓留白與層級說話；
   內容加 max-width 容器；段落節奏分明；footer 補導航。功能與 i18n 不動。
   ============================================================ */

/* 容器：內容不再攤滿寬螢幕（skill: no max-width container） */
.tab-panel {
  max-width: 1240px;
  margin-inline: auto;
}

/* Hero 去雜訊：左上已有 logo，標題內的 FLCash 膠囊是重複品牌呼喊 */
.hero-title .title-brand {
  display: none;
}
.hero-lead {
  max-width: 62ch;
  margin-inline: auto;
}

/* 漸層節食 ①：數據磚大數字改實色——數字要的是可讀與權威，不是裝飾 */
.stat-strip strong,
.stat-strip .value-flash {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #eef1fb;
}

/* 漸層節食 ②：CTA 帶改扁平高台面（品牌漸層只留給帶內主按鈕） */
#dashboard .cta-band {
  background: rgba(18, 20, 31, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 漸層節食 ③：手機 mockup 區——框與螢幕回歸深色實面，只留 logo 與數字擔任亮點 */
.phone-showcase {
  background: transparent;
}
.phone-frame {
  background: #101321;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.phone-cta {
  background: rgba(255, 255, 255, 0.08);
}

/* 節奏：hero→數據磚收緊成一組（證據緊貼主張），敘事區之間放大呼吸 */
#dashboard .stat-strip { margin-top: 56px; }
#dashboard .phone-showcase,
#dashboard .advantage-panel,
#dashboard .simple-flow,
#dashboard .trust-copy,
#dashboard .cta-band { margin-top: 108px; }

/* 標題防孤字 + 敘事段落行寬 */
h2, h3 { text-wrap: balance; }
.tab-panel p { text-wrap: pretty; }

/* Footer：品牌行 + 導航連結 + 免責，簡約三段式 */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-links {
  display: flex;
  gap: 22px;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}
.footer-links button {
  background: none;
  border: none;
  padding: 0;
  color: rgba(200, 208, 232, 0.78);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.18s;
}
.footer-links button:hover { color: #fff; }

/* ============================================================
   V16 — 會員系統 UI（登入 modal / 帳號按鈕 / 訂閱按鈕 / 實盤閘門，2026-07-06）
   遵守既有原則：扁平實面、1px 邊框、無光暈；漸層僅主按鈕。
   ============================================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 7, 14, 0.72);
  backdrop-filter: blur(6px);
}
.auth-overlay[hidden] { display: none; }
.auth-modal {
  position: relative;
  width: min(400px, 100%);
  background: #12141f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 30px 28px 24px;
}
.auth-modal h3 { margin: 0 0 6px; font-size: 22px; }
.auth-lead { margin: 0 0 18px; font-size: 14px; color: rgba(200, 208, 232, 0.75); }
.auth-modal form { display: grid; gap: 14px; }
.auth-modal label { display: grid; gap: 6px; font-size: 13px; color: rgba(200, 208, 232, 0.85); }
.auth-modal input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 12px;
  color: #eef1fb;
  font: inherit;
}
.auth-modal input:focus-visible { outline: 2px solid #2ebac6; outline-offset: 1px; }
.auth-error { margin: 0; font-size: 13px; color: #ff7a90; }
.auth-switch {
  margin-top: 14px;
  background: none;
  border: none;
  padding: 0;
  color: #2ebac6;
  font-size: 13px;
  cursor: pointer;
}
.auth-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(200, 208, 232, 0.6);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.auth-close:hover, .auth-switch:hover { color: #fff; }

/* 訂閱卡按鈕與狀態 */
.plan-card .plan-subscribe { margin-top: 14px; width: 100%; }
.plan-card .plan-status {
  margin-top: 14px;
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(46, 186, 198, 0.35);
  color: #2ebac6;
}

/* 實盤閘門橫幅（未登入 / 未訂閱提示） */
.gate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 20, 31, 0.9);
  font-size: 14px;
}
.gate-banner strong { color: #eef1fb; font-weight: 600; }
.gate-banner .primary-button { flex-shrink: 0; }

/* V16.1 — 多管道註冊（社群按鈕 / 分隔線 / 方式切換 / 手機 OTP） */
.auth-social { display: grid; gap: 10px; margin-bottom: 4px; }
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #eef1fb;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.auth-social-btn:hover { background: rgba(255, 255, 255, 0.08); }
.auth-social-btn[data-disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(200, 208, 232, 0.45);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.auth-method-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.auth-method {
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: rgba(200, 208, 232, 0.7);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.auth-method.active { background: rgba(255, 255, 255, 0.09); color: #fff; }
.auth-hint { margin: 0; font-size: 12.5px; color: rgba(46, 186, 198, 0.9); }
#phoneForm { display: grid; gap: 14px; }
#phoneForm[hidden] { display: none; }


/* V16.2 — 註冊 UX 一氣呵成修正（2026-07-07）
   ① 修 email/手機表單並排 bug：.auth-modal form { display:grid } 蓋掉了 hidden 屬性 */
.auth-modal form[hidden] { display: none !important; }
.auth-social-btn[hidden] { display: none !important; }
.auth-social[hidden], .auth-divider[hidden] { display: none !important; }
/* ② 送出中的 loading 狀態 */
.auth-modal button[data-busy] { opacity: 0.6; pointer-events: none; }

/* ============================================================
   V17 — 訂閱四方案卡對齊改版（2026-07-07）
   問題：卡片內容行數不一導致高度/基線亂。解法：每張卡固定 7 個 grid 列
   （badge/名稱/價格/上限/頻率/清單/CTA），同列等高 → 四卡完全對齊、CTA 齊底。
   ============================================================ */
#planGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1080px) { #planGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #planGrid { grid-template-columns: 1fr; } }

#planGrid .plan-card {
  display: grid;
  grid-template-rows: 22px 30px 64px 22px 20px 1fr auto;
  row-gap: 10px;
  align-items: start;
  margin: 0;
  padding: 24px 22px 22px;
  min-width: 0;
}
#planGrid .plan-badge-slot { line-height: 1; }
#planGrid .plan-card h3 { margin: 0; font-size: 20px; letter-spacing: 0; }
#planGrid .plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#planGrid .plan-price em { font-style: normal; font-size: 13px; color: rgba(200, 208, 232, 0.6); }
#planGrid .plan-limit { font-size: 13.5px; color: rgba(200, 208, 232, 0.85); }
#planGrid .plan-freq { font-size: 12.5px; color: rgba(200, 208, 232, 0.55); }
#planGrid .plan-features {
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
}
#planGrid .plan-features li { display: flex; gap: 8px; min-width: 0; }
#planGrid .plan-features li::before { content: '✓'; color: #2ebac6; flex-shrink: 0; }
#planGrid .plan-cta { align-self: end; }
#planGrid .plan-cta .plan-subscribe, #planGrid .plan-cta .plan-status { margin-top: 0; width: 100%; }

/* 客製化卡：低調金屬感區隔（不搶標準版的推薦位） */
#planGrid .custom-plan { border-color: rgba(125, 107, 216, 0.4); }
#planGrid .custom-plan .plan-price { color: #cabdf5; }

/* ============================================================
   V18 — 會員後台看板 + 等級大頭貼（2026-07-07）
   ============================================================ */
/* ---- 後台版面 ---- */
.admin-body { background: #0a0c13; min-height: 100dvh; }
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.admin-brand { color: #eef1fb; font-weight: 700; text-decoration: none; font-size: 17px; }
.admin-brand span { color: #2ebac6; font-weight: 500; margin-left: 6px; font-size: 14px; }
.admin-topbar-right { display: flex; align-items: center; gap: 12px; color: rgba(200, 208, 232, 0.75); font-size: 13.5px; }
.admin-main { max-width: 1240px; margin: 0 auto; padding: 26px clamp(16px, 3vw, 32px) 60px; display: grid; gap: 26px; }
.admin-locked { text-align: center; padding: 80px 20px; color: rgba(200, 208, 232, 0.8); }
.admin-locked a { color: #2ebac6; }

.admin-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.admin-kpi {
  background: rgba(18, 20, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}
.admin-kpi span { font-size: 12px; color: rgba(200, 208, 232, 0.6); letter-spacing: 0.04em; }
.admin-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; color: #eef1fb; }
.admin-kpi.warn strong { color: #f7d774; }

.admin-panel { background: rgba(18, 20, 31, 0.9); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 22px; display: grid; gap: 16px; }
.admin-panel header h2 { margin: 0 0 4px; font-size: 18px; }
.admin-panel header p { margin: 0; font-size: 13px; color: rgba(200, 208, 232, 0.6); }
.admin-table-wrap { overflow-x: auto; }
.admin-panel table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-panel th { text-align: left; padding: 8px 10px; color: rgba(200, 208, 232, 0.55); font-weight: 500; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.admin-panel td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); vertical-align: middle; }
.admin-panel td small { display: block; color: rgba(200, 208, 232, 0.5); font-size: 11.5px; }
.member-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.status-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(200, 208, 232, 0.85); }
.status-chip.status-active { border-color: rgba(46, 186, 198, 0.5); color: #2ebac6; }
.status-chip.status-pending, .status-chip.status-pending_payment { border-color: rgba(247, 215, 116, 0.5); color: #f7d774; }
.status-chip.status-privileged { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.status-chip.status-qualified { border-color: rgba(126, 217, 87, 0.5); color: #9be27a; }
.status-chip.status-expired, .status-chip.status-rejected { border-color: rgba(255, 122, 144, 0.4); color: #ff7a90; }
.tier-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600; }
.tier-chip-gm { background: linear-gradient(120deg, #f2f2f2 48%, #111 52%); color: #111; }
.tier-chip-diamond { background: rgba(125, 215, 240, 0.16); color: #7dd7f0; }
.tier-chip-gold { background: rgba(247, 215, 116, 0.16); color: #f7d774; }
.tier-chip-silver { background: rgba(232, 236, 244, 0.14); color: #d7dde9; }
.tier-chip-basic { background: rgba(139, 147, 166, 0.14); color: #9aa3b8; }
.activate-form { display: flex; gap: 6px; align-items: center; }
.activate-form select, .activate-form input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #eef1fb;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
}
.activate-form input { width: 58px; }

/* ---- 等級大頭貼（主站 header + 後台共用） ---- */
.tier-avatar { display: inline-flex; border-radius: 50%; flex-shrink: 0; line-height: 0; }
.tier-avatar svg { display: block; border-radius: 50%; }
#accountButton { display: inline-flex; align-items: center; gap: 8px; }
#accountButton .tier-avatar { margin-left: -4px; }

/* ============================================================
   V19 — Bitfinex 串接懶人包 + 右下角社群 dock（2026-07-07）
   ============================================================ */
.api-guide {
  background: rgba(18, 20, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 26px;
}
.api-guide-head { margin-bottom: 22px; max-width: 62ch; }
.api-guide-head h2 { margin: 6px 0 8px; }
.api-guide-head p { margin: 0; color: rgba(200, 208, 232, 0.7); font-size: 14.5px; }
.api-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.guide-step {
  display: grid;
  grid-template-columns: 34px 176px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.guide-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 186, 198, 0.14);
  border: 1px solid rgba(46, 186, 198, 0.5);
  color: #2ebac6;
  font-weight: 700;
  font-size: 14px;
}
.guide-fig { margin: 0; }
.guide-fig svg { width: 176px; height: auto; display: block; border-radius: 8px; }
.guide-step h3 { margin: 0 0 6px; font-size: 16px; }
.guide-step p { margin: 0 0 10px; font-size: 13.5px; color: rgba(200, 208, 232, 0.75); max-width: 58ch; }
.guide-step .primary-button, .guide-step .ghost-button { text-decoration: none; display: inline-flex; }
@media (max-width: 760px) {
  .guide-step { grid-template-columns: 30px 1fr; }
  .guide-fig { grid-column: 2; }
}

/* 右下角社群 dock */
.social-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  gap: 10px;
}
.social-dock[hidden] { display: none; }
.social-dock a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 20, 31, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(200, 208, 232, 0.85);
  transition: color 0.18s, border-color 0.18s, transform 0.18s;
}
.social-dock a:hover { color: #fff; border-color: rgba(46, 186, 198, 0.6); transform: translateY(-2px); }
.social-dock a[hidden] { display: none; }
@media (max-width: 640px) { .social-dock { right: 12px; bottom: 12px; } .social-dock a { width: 36px; height: 36px; } }

/* V19.1 — 教學圖改高擬真大圖（2026-07-07）：步驟改直排，圖放大至 580px 清晰可讀 */
.guide-step {
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 20px 22px;
}
.guide-step-head { display: flex; align-items: center; gap: 12px; }
.guide-step-head h3 { margin: 0; font-size: 17px; }
.guide-fig { margin: 4px 0 0; }
.guide-fig svg {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.guide-step-body p { max-width: 62ch; }

/* ============================================================
   V19.2 — 教學面板改 HTML/CSS 實作（2026-07-08）
   根因修復：SVG <text> 的合成粗體在 viewBox 放大時產生重影；
   改真 DOM 文字後任何縮放都銳利。面板配色仿真站（#0b141f + #03ca9b）。
   ============================================================ */
.bfx-mock {
  max-width: 560px;
  background: #0b141f;
  border: 1px solid #1e3040;
  border-radius: 12px;
  padding: 22px 24px;
  display: grid;
  gap: 12px;
  font-size: 14px;
}
.bfx-mock.bfx-flcash { background: #12141f; border-color: rgba(255, 255, 255, 0.1); }
.bfx-brand { color: #03ca9b; font-weight: 800; letter-spacing: 0.18em; font-size: 18px; }
.bfx-title { color: #eef1fb; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bfx-path { color: #5f7289; font-weight: 400; font-size: 12px; }
.bfx-label { color: #5f7289; font-size: 12px; margin-bottom: 4px; }
.bfx-input {
  background: #152232;
  border: 1px solid #24384e;
  border-radius: 7px;
  padding: 10px 14px;
  color: #8fa3bd;
  min-width: 0;
}
.bfx-select { display: flex; justify-content: space-between; color: #eef1fb; }
.bfx-select em { font-style: normal; color: #5f7289; }
.bfx-select.bfx-active { background: #0f2b22; border-color: #03ca9b; color: #03ca9b; font-weight: 700; }
.bfx-select.bfx-active em { color: #03ca9b; }
.bfx-btn {
  background: #03ca9b;
  color: #04141a;
  font-weight: 800;
  text-align: center;
  border-radius: 7px;
  padding: 11px;
}
.bfx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bfx-callout {
  border: 1px solid #03ca9b;
  background: #0f2b22;
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.bfx-callout-label { color: #7fe8cf; font-size: 12px; }
.bfx-code { color: #03ca9b; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.bfx-callout-note { color: #8fa3bd; font-size: 12.5px; }
.bfx-perm-head, .bfx-perm {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  align-items: center;
  gap: 8px;
}
.bfx-perm-head { color: #5f7289; font-size: 12px; border-bottom: 1px solid #1c2c3f; padding-bottom: 6px; }
.bfx-perm-head span:nth-child(n+2), .bfx-perm i { justify-self: center; }
.bfx-perm { color: #eef1fb; font-size: 13.5px; padding: 4px 0; }
.bfx-perm.bfx-dim { color: #6b7a90; }
.bfx-perm.bfx-danger {
  color: #ff6b85;
  font-weight: 700;
  border: 1px solid #ff4d6d;
  background: rgba(255, 77, 109, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
}
.bfx-check, .bfx-cross, .bfx-off {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 800;
}
.bfx-check { background: #03ca9b; color: #04141a; }
.bfx-cross { border: 1.5px solid #ff4d6d; color: #ff4d6d; background: rgba(255, 77, 109, 0.08); }
.bfx-off { border: 1px solid #24384e; background: #152232; }
.bfx-note { color: #8fa3bd; font-size: 12.5px; }
.bfx-mask { letter-spacing: 0.2em; }
.bfx-row-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bfx-chip { background: #2ebac6; color: #04141a; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 8px 18px; }
.bfx-note-inline { color: #8b93a6; font-size: 12.5px; }
.bfx-toggle-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.bfx-toggle-card.bfx-active-card { border-color: rgba(46, 186, 198, 0.5); background: rgba(46, 186, 198, 0.07); }
.bfx-toggle-title { font-weight: 700; color: #eef1fb; font-size: 13.5px; }
.bfx-toggle-title.on { color: #2ebac6; }
.bfx-toggle { width: 46px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.14); position: relative; }
.bfx-toggle i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #8b93a6; }
.bfx-toggle.on { background: #2ebac6; }
.bfx-toggle.on i { left: auto; right: 2px; background: #eefdfb; }
.bfx-toggle-note { color: #8b93a6; font-size: 12px; }
.bfx-checklist { display: grid; gap: 5px; color: #eef1fb; font-size: 13px; }
.bfx-checklist div:first-child { color: #8b93a6; }
@media (max-width: 560px) { .bfx-grid2 { grid-template-columns: 1fr; } }

/* ============================================================
   V20 — 字型治本 + 疊字根除（2026-07-12）
   根因：CSS 引用的 Sora/Inter 從未載入，落到使用者本機安裝的同名字型；
   該字型若只有單一字重，700/800 粗體由瀏覽器「畫兩次偏移」合成（faux bold），
   高 DPI 下即成肉眼可見疊字。治本：自載可變字型（100–800 真字重、OFL 授權、
   同源符合 CSP font-src 'self'）＋全域禁用合成粗體。CJK 用系統 PingFang/JhengHei（有真粗體）。
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('assets/fonts/Sora-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* 禁用合成粗斜體：任何字型缺字重時寧可回退正常字重，也不畫兩次造成疊字 */
* {
  font-synthesis: none;
}

/* 修 tab-panel 進場動畫未收尾：active 面板永久卡在 translateY(14px) */
.tab-panel.active {
  transform: none !important;
}