:root {
  color-scheme: dark;
  --bg: #181a20;
  --bg-deep: #0b0d12;
  --panel: #1f2430;
  --panel-2: #151922;
  --panel-3: #11151d;
  --line: rgba(132, 152, 188, 0.22);
  --line-strong: rgba(135, 165, 215, 0.38);
  --text: #ffffff;
  --muted: #a8b1c2;
  --soft: #d7deeb;
  --blue: #1e9df2;
  --blue-2: #36b7ff;
  --green: #18c683;
  --yellow: #f2bd2f;
  --danger: #ef5b5b;
  --radius: 8px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body {
  padding-top: calc(80px + var(--safe-top));
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

button {
  touch-action: manipulation;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(80px + var(--safe-top));
  padding: var(--safe-top) max(22px, var(--safe-right)) 0 max(22px, var(--safe-left));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(16, 18, 24, 0.96);
  backdrop-filter: blur(18px);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.brand-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #041018;
  background: linear-gradient(135deg, #20e0c8, #1d9df2 55%, #7a6cff);
  box-shadow: 0 0 24px rgba(30, 157, 242, 0.3);
  letter-spacing: 0;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
}

.desktop-nav a {
  transition: color 160ms ease;
}

.desktop-nav a:hover {
  color: var(--text);
}

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

.header-menu {
  position: relative;
  display: inline-flex;
}

.network-badge,
.status-pill,
.tag,
.account-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.network-badge {
  display: none !important;
  position: relative;
  gap: 8px;
  min-height: 48px;
  border-radius: 8px;
  color: var(--yellow);
  background: #11151d;
}

.network-badge.muted {
  color: var(--muted);
}

.network-label {
  display: inline-flex;
  align-items: center;
}

.wallet-menu {
  position: relative;
  display: inline-flex;
}

.chain-token-mark,
.network-chevron,
.wallet-user-icon,
.wallet-expand-icon {
  display: none;
}

.network-badge.is-connected {
  justify-content: space-between;
  width: 88px;
  min-height: 56px;
  padding: 0 14px;
  color: #d7deeb;
  background: #0f121a;
  border-color: rgba(132, 152, 188, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.network-badge.is-connected .network-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.network-badge.is-connected .network-chevron {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #c4ccda;
}

.chain-token-mark {
  position: relative;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(243, 186, 47, 0.18);
  overflow: hidden;
}

.network-badge.is-connected .chain-token-mark {
  display: inline-grid;
}

.bnb-chain-logo {
  display: block;
  width: 100%;
  height: 100%;
}

.bnb-chain-logo circle {
  fill: #f3ba2f;
}

.bnb-chain-logo path {
  fill: #ffffff;
}

.tag.ok,
.status-pill.ok,
.account-state.is-ok {
  color: #8ff0c4;
  background: rgba(24, 198, 131, 0.13);
  border-color: rgba(24, 198, 131, 0.28);
}

.tag.warn,
.status-pill.warn,
.account-state.is-warn {
  color: #ffd479;
  background: rgba(242, 189, 47, 0.13);
  border-color: rgba(242, 189, 47, 0.28);
}

.tag.error,
.status-pill.error,
.account-state.is-error {
  color: #ffaaaa;
  background: rgba(239, 91, 91, 0.13);
  border-color: rgba(239, 91, 91, 0.28);
}

.connect-button,
.submit-button,
.secondary-button,
.mode-tab,
.plan-option,
.quick-amount,
.icon-button,
.record-copy-button,
.withdraw-action-button,
.withdraw-modal-close,
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  background: #222838;
  font-weight: 850;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.connect-button,
.submit-button {
  min-height: 48px;
  padding: 0 18px;
  color: #ffffff;
  background: var(--blue);
  border-color: rgba(104, 203, 255, 0.6);
  box-shadow: 0 0 22px rgba(30, 157, 242, 0.24);
}

.connect-button:hover,
.submit-button:hover {
  background: #2eabfb;
}

.connect-button.is-connected {
  justify-content: flex-start;
  gap: 14px;
  min-width: 194px;
  min-height: 56px;
  padding: 0 18px;
  color: #ffffff;
  background: #10131d;
  border-color: rgba(132, 152, 188, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.connect-button.is-connected:hover {
  background: #141927;
  border-color: rgba(155, 177, 219, 0.46);
}

.connect-button.is-connected .wallet-user-icon,
.connect-button.is-connected .wallet-expand-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #b9c3d6;
}

.connect-button.is-connected #headerWalletAddress {
  flex: 1 1 auto;
  min-width: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 42;
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(16, 19, 28, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.wallet-dropdown-address {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(132, 152, 188, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.wallet-dropdown-address span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.wallet-dropdown-address strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-disconnect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid rgba(239, 91, 91, 0.32);
  border-radius: 8px;
  color: #ffaaaa;
  background: rgba(239, 91, 91, 0.1);
  font-weight: 850;
  cursor: pointer;
}

.wallet-disconnect-button:hover {
  color: #ffffff;
  background: rgba(239, 91, 91, 0.18);
}

.wallet-disconnect-button svg {
  width: 16px;
  height: 16px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.menu-button {
  width: 48px;
  min-height: 48px;
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: grid;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(16, 19, 28, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.menu-dropdown a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.menu-dropdown a:hover,
.menu-dropdown a.is-active {
  color: #ffffff;
  background: rgba(30, 157, 242, 0.16);
}

.menu-button svg,
.icon-button svg,
.record-copy-button svg {
  width: 17px;
  height: 17px;
}

.flow-page {
  width: 100%;
}

.invite-section {
  margin-top: 22px;
}

.invite-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
}

.hero-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.76fr);
  gap: 56px;
  min-height: calc(100dvh - 80px);
  padding: 58px max(78px, var(--safe-right)) 72px max(78px, var(--safe-left));
  overflow: hidden;
  background: #020306;
}

.hero-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0%, rgba(36, 187, 110, 0.14) 26%, transparent 34%),
    linear-gradient(72deg, transparent 8%, rgba(30, 157, 242, 0.18) 18%, transparent 31%),
    repeating-linear-gradient(104deg, transparent 0 28px, rgba(255, 255, 255, 0.05) 29px, transparent 31px 96px),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 56%, rgba(92, 255, 172, 0.18) 0 1px, transparent 2px),
    #020306;
  background-size: 900px 100%, 780px 100%, 100% 100%, 76px 76px, 112px 112px, auto;
}

.hero-copy,
.yield-card {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
}

.section-kicker {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 820;
}

.hero-copy h1 {
  margin: 24px 0 18px;
  font-size: clamp(68px, 8vw, 116px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
}

.hero-copy h1 span,
.hero-copy h1 strong {
  display: block;
}

.hero-copy h1 strong {
  color: var(--blue);
  font-style: normal;
}

.hero-copy p {
  max-width: 650px;
  margin: 0;
  color: #f4f7fb;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 560;
}

.chain-orbits {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.chain-orbits span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #ffffff;
  background: #242b38;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 900;
}

.chain-orbits span:first-child {
  color: #11151d;
  background: var(--yellow);
}

.hero-tvl {
  margin-top: auto;
  padding-top: 110px;
}

.hero-tvl span {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 820;
}

.hero-tvl strong {
  display: block;
  margin-top: 16px;
  color: #ffffff;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1;
  font-weight: 930;
  overflow-wrap: anywhere;
}

.yield-card {
  align-self: center;
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.mode-tabs,
.period-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(10, 13, 19, 0.82);
}

.mode-tab,
.plan-option {
  min-height: 47px;
  border-radius: 7px;
  border-color: transparent;
  background: #202638;
  color: #b8c2d4;
}

.mode-tab.is-active,
.plan-option.is-active,
.quick-amount.is-active {
  color: #ffffff;
  background: var(--blue);
  border-color: rgba(116, 214, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 16px rgba(30, 157, 242, 0.28);
}

.yield-panel,
.content-section,
.market-strip,
.withdraw-modal-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.78);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.26);
}

.yield-panel {
  display: grid;
  gap: 22px;
  padding: 26px 24px 22px;
}

.earnings-panel {
  gap: 18px;
}

.panel-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-head-actions .earnings-withdraw-button {
  min-height: 34px;
  padding: 0 14px;
  white-space: nowrap;
}

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

.earnings-grid .market-stat {
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
}

.earnings-grid .market-stat strong {
  font-size: 20px;
}

.earnings-grid .account-state {
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 30px;
  margin-top: 8px;
}

.panel-head,
.section-title-row,
.term-panel-head,
.withdraw-modal-head,
.withdraw-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.panel-head span,
.asset-line span,
.form-label,
.mini-rule-row span,
.market-stat span,
.rule-item span,
.invite-panel > span,
.feature-card strong,
.daily-interest-summary-card span,
.term-panel-metric span,
.ledger-columns span,
.record-main span,
.term-entry-meta span,
.withdraw-stat-card span,
.withdraw-history-head span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 760;
}

.panel-head .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 1px 10px 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.panel-head strong {
  display: block;
  margin-top: 9px;
  color: var(--green);
  font-size: 23px;
  line-height: 1.1;
  font-weight: 900;
}

.asset-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.asset-line strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.period-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  background: #202638;
}

.plan-option {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px;
}

.plan-option strong {
  font-size: 19px;
}

.plan-option small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.deposit-form {
  display: grid;
  gap: 12px;
}

.amount-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
  overflow: hidden;
}

.amount-field input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 16px;
  color: #ffffff;
  background: transparent;
  font-size: 28px;
  font-weight: 860;
}

.amount-field span {
  padding: 0 16px;
  color: var(--muted);
  font-weight: 850;
}

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

.quick-amount {
  min-height: 36px;
  padding: 0 8px;
}

.mini-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-rule-row strong,
.interest-preview {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 860;
}

.mini-rule-row strong {
  white-space: nowrap;
}

.mini-rule-row strong span {
  display: inline;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.interest-preview {
  min-height: 18px;
}

.workspace-status,
.withdraw-message {
  margin: 0;
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #151a24;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.workspace-status.ok {
  color: #8ff0c4;
}

.workspace-status.warn {
  color: #ffd479;
}

.workspace-status.error {
  color: #ffaaaa;
}

.market-strip,
.content-section {
  width: min(1280px, calc(100vw - 40px));
  margin: 32px auto 0;
}

.market-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.market-stat {
  min-width: 0;
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  background: #1b202b;
}

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

.market-stat strong,
.rule-item strong,
.invite-panel .referral-row strong,
.feature-card > span,
.daily-interest-summary-card strong,
.term-panel-metric strong,
.withdraw-stat-card strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 890;
  overflow-wrap: anywhere;
}

.content-section {
  padding: 34px;
  background: #1a1f2a;
}

.section-title-row {
  margin-bottom: 24px;
}

.section-title-row h2,
.security-section h2 {
  margin: 6px 0 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 920;
}

.secondary-button {
  min-height: 44px;
  padding: 0 18px;
  background: #202638;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 18px;
}

.wallet-grid,
.feature-list,
.daily-interest-summary-grid,
.term-panel-summary,
.security-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rule-item,
.feature-card,
.daily-interest-summary-card,
.term-panel-metric,
.withdraw-stat-card,
.story-card,
.security-grid article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
}

.rule-item-span-2,
.rule-item-inline {
  grid-column: span 2;
}

.referral-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.icon-button,
.record-copy-button {
  min-height: 32px;
  padding: 0 10px;
}

.copy-feedback {
  color: #8ff0c4;
  font-size: 12px;
  font-weight: 820;
  opacity: 0;
  transition: opacity 160ms ease;
}

.copy-feedback.is-visible {
  opacity: 1;
}

.copy-feedback.is-error {
  color: #ffaaaa;
}

.story-map {
  display: grid;
  gap: 12px;
}

.story-card {
  min-height: 118px;
}

.story-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.story-card strong {
  display: block;
  margin-top: 10px;
  color: var(--blue-2);
  font-size: 34px;
  line-height: 1;
}

.story-card small,
.feature-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.feature-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.feature-card.feature-tone-accent,
.feature-card-a {
  border-color: rgba(30, 157, 242, 0.42);
}

.feature-card.feature-tone-sage,
.feature-card-b {
  border-color: rgba(24, 198, 131, 0.34);
}

.feature-card.feature-tone-ink,
.feature-card-c {
  border-color: rgba(242, 189, 47, 0.34);
}

.team-member-count-split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px !important;
}

.team-member-count-pill {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 7px;
  background: #1f2633;
}

.team-member-count-pill small {
  color: var(--muted);
  font-size: 11px;
}

.team-member-count-pill strong {
  margin: 0;
  font-size: 14px;
}

.ledger-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
}

.ledger-columns,
.record-row {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr 0.7fr 0.7fr;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px 18px;
}

.team-reward-columns {
  grid-template-columns: 1fr 0.82fr 0.82fr 0.95fr;
}

.daily-interest-columns {
  grid-template-columns: 1.1fr 0.8fr 0.8fr 0.8fr;
}

.ledger-columns {
  background: #1e2532;
}

.record-list,
.term-entry-list,
.withdraw-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-row {
  min-height: 72px;
  border-top: 1px solid var(--line);
  color: #ffffff;
}

.record-main strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.record-main span {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.daily-interest-metric span {
  display: block;
  margin-top: 0;
}

.daily-interest-metric strong {
  margin-top: 4px;
}

.record-hash {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.empty,
.withdraw-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.empty strong,
.withdraw-empty strong {
  color: #ffffff;
  font-size: 15px;
}

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

.term-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
}

.term-panel-head h3 {
  margin: 0;
  font-size: 20px;
}

.term-panel-head strong {
  color: #ffffff;
}

.term-panel-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.term-entry-item {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.term-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.term-entry-head strong {
  color: #ffffff;
}

.term-entry-meta {
  display: grid;
  gap: 4px;
}

.security-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

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

.security-grid strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
}

.security-grid span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.withdraw-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
}

.withdraw-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

.withdraw-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 22px;
  background: #1a1f2a;
}

.withdraw-modal-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.withdraw-modal-head strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

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

.withdraw-rule-box {
  padding: 14px;
  border-radius: 8px;
  background: #11151d;
}

.withdraw-rule-box p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.withdraw-pro-fee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.withdraw-pro-fee-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.withdraw-pro-fee-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.withdraw-pro-fee-grid strong {
  min-width: 0;
  color: #ffffff;
  overflow-wrap: anywhere;
}

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

.withdraw-item {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.withdraw-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.withdraw-item-head strong {
  min-width: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.withdraw-item-meta {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 760;
}

.withdrawal-history-table {
  overflow: hidden;
}

.withdrawal-history-page-list .withdraw-item {
  padding: 16px 18px;
}

.withdrawal-history-page-list .withdraw-empty {
  min-height: 140px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease, transform 420ms ease;
}

[data-reveal].is-visible,
body:not(.motion-ready) [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .desktop-nav {
    gap: 18px;
  }

  .hero-section {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-inline: 34px;
  }

  .hero-tvl {
    padding-top: 54px;
  }

  .yield-card {
    width: min(100%, 620px);
  }

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

  .workspace-grid,
  .security-section {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  body {
    padding-top: calc(80px + var(--safe-top));
  }

  .site-header {
    height: calc(80px + var(--safe-top));
    padding-inline: max(20px, var(--safe-right)) max(20px, var(--safe-left));
  }

  .brand-mark span:last-child,
  .desktop-nav {
    display: none;
  }

  .brand-mark {
    gap: 0;
  }

  .header-actions {
    gap: 8px;
  }

  .network-badge {
    display: none;
  }

  .network-badge.is-connected {
    display: inline-flex;
    width: 52px;
    min-height: 36px;
    padding: 0 8px;
    gap: 4px;
  }

  .network-badge.is-connected .chain-token-mark {
    width: 22px;
    height: 22px;
  }

  .network-badge.is-connected .network-chevron {
    width: 13px;
    height: 13px;
  }

  .connect-button {
    min-height: 36px;
    max-width: 92px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .connect-button.is-connected {
    gap: 8px;
    width: 138px;
    min-width: 0;
    max-width: 138px;
    min-height: 36px;
    padding: 0 10px;
  }

  .connect-button.is-connected .wallet-user-icon,
  .connect-button.is-connected .wallet-expand-icon {
    width: 14px;
    height: 14px;
  }

  .connect-button.is-connected #headerWalletAddress {
    font-size: 13px;
  }

  .wallet-dropdown {
    width: min(220px, calc(100vw - 40px));
  }

  .menu-button {
    width: 36px;
    min-height: 36px;
  }

  .hero-section {
    min-height: 0;
    padding: 60px 20px 36px;
  }

  .hero-copy {
    align-items: center;
    text-align: center;
  }

  .hero-copy h1 {
    margin-top: 22px;
    font-size: clamp(50px, 15vw, 72px);
  }

  .hero-copy p {
    font-size: 17px;
    line-height: 1.48;
  }

  .chain-orbits {
    justify-content: center;
  }

  .hero-tvl {
    padding-top: 42px;
  }

  .hero-tvl strong {
    font-size: clamp(36px, 10vw, 48px);
  }

  .yield-panel {
    width: 100%;
    min-width: 0;
    gap: 16px;
    padding: 20px 12px 14px;
  }

  .mode-tabs {
    width: 100%;
    min-width: 0;
    padding: 10px;
  }

  .panel-head strong {
    font-size: 18px;
  }

  .asset-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-line > span:last-child {
    grid-column: 1 / -1;
  }

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

  .market-strip,
  .content-section {
    width: calc(100vw - 24px);
    margin-top: 20px;
  }

  .market-strip,
  .feature-list,
  .wallet-grid,
  .daily-interest-summary-grid,
  .term-panels,
  .security-grid,
  .withdraw-modal-grid {
    grid-template-columns: 1fr;
  }

  .market-stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .content-section {
    padding: 20px 12px;
  }

  .section-title-row {
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .section-title-row h2,
  .security-section h2 {
    font-size: 26px;
  }

  .rule-item-span-2,
  .rule-item-inline {
    grid-column: auto;
  }

  .ledger-columns {
    display: none;
  }

  .record-row,
  .team-reward-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 14px;
  }

  .daily-interest-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
    min-height: 0;
    padding: 12px 14px;
  }

  .daily-interest-row .record-main {
    min-width: 0;
  }

  .daily-interest-row .record-main strong {
    font-size: 15px;
    line-height: 1.2;
  }

  .daily-interest-row .record-main span {
    margin-top: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 850;
  }

  .daily-interest-row .daily-interest-date span,
  .daily-interest-row .daily-interest-metric strong {
    margin-top: 4px;
  }

  .term-panel-summary {
    grid-template-columns: 1fr;
  }

  .team-member-count-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yield-card,
  .amount-field,
  .period-tabs,
  .quick-amounts,
  .ledger-table,
  .term-panel {
    max-width: 100%;
  }
}