:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: rgba(28, 28, 28, 0.94);
  --surface-2: rgba(50, 50, 50, 0.78);
  --gold: #cda052;
  --gold-bright: #f1cf72;
  --gold-pale: #f9eab7;
  --line: rgba(205, 160, 82, 0.5);
  --muted: rgba(255, 255, 255, 0.52);
  --text: #fff8e7;
  --danger: #e68374;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: #000; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #000; color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 840px); min-height: 100vh; margin: 0 auto; background: var(--bg); overflow: hidden; box-shadow: 0 0 80px rgba(205, 160, 82, 0.08); }
.topbar { position: sticky; top: 0; z-index: 20; height: 62px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: rgba(4, 4, 4, 0.9); border-bottom: 1px solid rgba(205,160,82,.12); backdrop-filter: blur(16px); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--gold-pale); text-decoration: none; font-family: Georgia, serif; font-weight: 700; letter-spacing: .14em; }
.brand-mark, .mini-seal, .profile-orb { display: grid; place-items: center; color: #2a1c06; background: radial-gradient(circle at 35% 30%, #fff2ad, #bd7b1d 55%, #573406); border: 1px solid #f7dc85; box-shadow: inset 0 0 0 3px rgba(0,0,0,.14), 0 0 22px rgba(218,164,64,.2); }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; font-family: Georgia, serif; letter-spacing: 0; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.wallet-button, .icon-button { border: 1px solid rgba(205,160,82,.42); background: rgba(32,25,15,.62); }
.wallet-button { min-width: 100px; padding: 9px 14px; border-radius: 999px; font-size: 13px; }
.wallet-button.connected { color: var(--gold-bright); border-color: var(--gold); }
.icon-button { width: 36px; height: 36px; border-radius: 50%; color: var(--gold-bright); font-size: 22px; }
main { padding-bottom: 90px; }
.page { display: none; min-height: calc(100vh - 62px); }
.page.active { display: block; animation: pageIn .28s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }
.hero { position: relative; aspect-ratio: 840 / 520; min-height: 390px; overflow: hidden; }
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.06) 55%, rgba(0,0,0,.14)), linear-gradient(0deg, var(--bg), transparent 30%); }
.hero-copy { position: absolute; left: 26px; bottom: 68px; text-shadow: 0 2px 18px #000; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.hero-copy h1 { margin: 0; font: 700 clamp(40px, 8vw, 70px)/.95 Georgia, serif; letter-spacing: .08em; color: var(--gold-pale); }
.hero-copy > p:last-child { margin: 12px 0 0; color: var(--gold-bright); font-weight: 700; letter-spacing: .14em; }
.demo-badge { position: absolute; right: 20px; bottom: 50px; padding: 5px 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: .2em; }
.glass-card { border: 1px solid var(--line); background: linear-gradient(110deg, rgba(43,43,43,.96), rgba(35,35,35,.75)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.intro-card { position: relative; z-index: 2; margin: -38px 16px 20px; padding: 18px; display: flex; gap: 16px; align-items: center; border-radius: 15px; }
.mini-seal { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; font: 700 25px Georgia, serif; }
.intro-card p { margin: 3px 0; color: var(--gold-pale); font-size: 13px; line-height: 1.45; }
.showcase { display: grid; grid-auto-flow: column; grid-auto-columns: 66%; gap: 12px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.showcase::-webkit-scrollbar { display: none; }
.showcase-card { position: relative; height: 150px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; scroll-snap-align: center; border: 1px solid rgba(205,160,82,.34); border-radius: 14px; background-color: #0b0d14; isolation: isolate; }
.showcase-card::before, .showcase-card::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.showcase-card::after { background: linear-gradient(0deg, rgba(0,0,0,.92), transparent 75%); }
.showcase-card.network::before { background: radial-gradient(circle at 30% 45%, rgba(224,174,76,.66) 0 2px, transparent 3px), repeating-radial-gradient(circle at 35% 45%, transparent 0 16px, rgba(224,174,76,.1) 17px 18px), linear-gradient(125deg,#061022,#161006); }
.showcase-card.beacon::before { background: conic-gradient(from 200deg at 50% 100%, transparent, rgba(240,188,68,.85), transparent 30%), radial-gradient(circle at 50% 30%,#f1c65e 0 3px,transparent 4px), linear-gradient(#050816,#181008); }
.showcase-card.phoenix::before { background: radial-gradient(ellipse at 65% 45%, rgba(225,158,45,.9), transparent 8%), conic-gradient(from 120deg at 65% 45%,transparent,rgba(242,187,61,.75),transparent 32%), linear-gradient(135deg,#10101e,#1f0d04); }
.showcase-card span { color: var(--gold-pale); font: 700 20px Georgia,serif; }
.showcase-card small { margin-top: 5px; color: rgba(255,255,255,.48); letter-spacing: .16em; }
.section-block { padding: 24px 16px 0; }
.section-title { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.section-title h2 { margin: 0; color: var(--gold-bright); font-size: 18px; }
.section-title h2 span { font-size: 14px; }
.section-note { color: var(--muted); font-size: 11px; }
.plan-card, .panel-card { border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(30,30,30,.98), rgba(23,23,23,.95)); }
.plan-card { padding: 12px; }
.plan-heading { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.plan-heading div { display: flex; flex-direction: column; }
.plan-heading strong { color: var(--gold-pale); }
.plan-heading small { margin-top: 2px; color: var(--muted); }
.level-orb { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #5c3c00; background: linear-gradient(#f6da70,#bd821b); }
.level-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.level-card { min-height: 77px; padding: 10px 5px; border: 1px solid transparent; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(65,65,65,.78); cursor: pointer; transition: .18s ease; }
.level-card:hover { transform: translateY(-1px); border-color: rgba(205,160,82,.48); }
.level-card.selected { border-color: var(--gold-bright); background: linear-gradient(150deg,rgba(117,79,25,.72),rgba(53,45,30,.88)); box-shadow: 0 0 18px rgba(205,160,82,.12); }
.level-card small { color: rgba(255,255,255,.5); }
.level-card strong { margin: 3px 0; color: #f0c84b; }
.level-card span { color: rgba(249,234,184,.54); font-size: 9px; }
.plan-summary { margin-top: 14px; padding: 12px 3px 6px; border-top: 1px solid rgba(255,255,255,.06); }
.plan-summary div { padding: 7px 0; display: flex; justify-content: space-between; }
.plan-summary span { color: var(--muted); }
.plan-summary strong { color: var(--gold-pale); }
.primary-button { width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 999px; color: #241a08; font-weight: 800; background: linear-gradient(90deg,#8f7b54,#c0a66c,#8f7b54); cursor: pointer; }
.primary-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .52; }
.safe-note { margin: 10px 4px 0; color: var(--muted); text-align: center; font-size: 10px; }
.benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.benefit-grid article { min-height: 76px; padding: 13px; display: flex; gap: 11px; align-items: center; border: 1px solid rgba(205,160,82,.42); border-radius: 11px; background: rgba(30,30,30,.9); }
.benefit-grid div { min-width: 0; display: flex; flex-direction: column; }
.benefit-grid strong { color: var(--gold-bright); font-size: 14px; }
.benefit-grid small { margin-top: 3px; overflow: hidden; color: rgba(255,255,255,.42); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.benefit-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(205,160,82,.26); border-radius: 50%; color: var(--gold); }
.bottom-nav { position: fixed; z-index: 18; left: 50%; bottom: 0; width: min(100%,840px); transform: translateX(-50%); padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(4,1fr); background: rgba(39,39,39,.94); border-top: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.bottom-nav button { padding: 4px; display: flex; gap: 3px; flex-direction: column; align-items: center; border: 0; color: rgba(255,255,255,.46); background: transparent; font-size: 11px; cursor: pointer; }
.bottom-nav button span { font-size: 20px; }
.bottom-nav button.active { color: var(--gold-pale); }
.sub-hero { min-height: 250px; padding: 84px 24px 30px; background: radial-gradient(circle at 75% 25%,rgba(205,160,82,.18),transparent 35%), linear-gradient(145deg,#070c18,#070604 70%); }
.sub-hero h1 { margin: 0; font: 700 38px Georgia,serif; color: var(--gold-pale); }
.sub-hero > p:last-child { color: var(--muted); }
.stats-grid { position: relative; z-index: 2; margin: -34px 16px 16px; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.stats-grid article { padding: 16px; display: flex; flex-direction: column; border: 1px solid rgba(205,160,82,.32); border-radius: 12px; background: rgba(28,28,28,.96); }
.stats-grid small { color: var(--muted); }
.stats-grid strong { margin-top: 6px; color: var(--gold-bright); font-size: 20px; }
.panel-card { margin: 14px 16px; padding: 18px; }
.panel-card h2 { margin: 0 0 10px; color: var(--gold-pale); font-size: 17px; }
.muted, .empty-state p { color: var(--muted); font-size: 13px; }
.copy-row { display: flex; gap: 8px; }
.copy-row code { min-width: 0; flex: 1; padding: 12px; overflow: hidden; border-radius: 8px; color: var(--gold); background: #0c0c0c; text-overflow: ellipsis; white-space: nowrap; }
.copy-row button { padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(205,160,82,.12); }
.empty-state { padding: 48px 20px; text-align: center; }
.empty-state > span { color: var(--gold); font-size: 40px; }
.profile-card { min-height: 210px; padding: 74px 22px 30px; display: flex; gap: 15px; align-items: center; background: radial-gradient(circle at 20% 30%,rgba(221,169,68,.16),transparent 35%),linear-gradient(135deg,#111019,#050505); }
.profile-orb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; font: 700 28px Georgia,serif; }
.profile-card small { color: var(--gold); }
.profile-card h1 { max-width: 560px; margin: 4px 0; overflow: hidden; color: var(--gold-pale); font-size: 20px; text-overflow: ellipsis; }
.profile-card p { margin: 0; color: var(--muted); font-size: 12px; }
.asset-card { margin: -20px 16px 16px; padding: 20px; position: relative; z-index: 2; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg,#3e321c,#201a11); }
.asset-card small, .asset-card span { color: rgba(255,255,255,.5); }
.asset-card strong { margin: 8px 0; color: var(--gold-pale); font-size: 34px; }
.menu-list { display: grid; }
.menu-list button { min-height: 54px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; text-align: left; }
.menu-list button > span { color: var(--gold); }
.menu-list button small { color: var(--muted); }
.outline-button { width: calc(100% - 32px); margin: 4px 16px 24px; padding: 13px; border: 1px solid rgba(205,160,82,.55); border-radius: 999px; color: var(--gold-pale); background: transparent; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(100%,560px); max-height: min(88vh,700px); padding: 26px; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: #171717; box-shadow: 0 24px 80px #000; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 25px; }
.modal-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-bright); font-size: 24px; }
.modal h2 { margin: 15px 0 8px; color: var(--gold-pale); }
.modal > p { color: var(--muted); line-height: 1.6; }
.modal pre { max-height: 250px; padding: 13px; overflow: auto; border: 1px solid rgba(205,160,82,.22); border-radius: 9px; color: #e8dab8; background: #080808; font: 11px/1.5 ui-monospace,Consolas,monospace; white-space: pre-wrap; word-break: break-word; }
.modal-actions { margin-top: 18px; display: flex; gap: 10px; }
.modal-actions button { min-height: 45px; flex: 1; border-radius: 999px; border: 1px solid var(--line); background: rgba(205,160,82,.12); }
.modal-actions button.confirm { color: #211603; border: 0; background: linear-gradient(90deg,#a98c52,#e2c179); font-weight: 800; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 90px; max-width: min(90vw,420px); padding: 11px 16px; transform: translate(-50%,18px); border: 1px solid rgba(205,160,82,.38); border-radius: 99px; color: var(--gold-pale); background: rgba(22,22,22,.94); opacity: 0; pointer-events: none; transition: .24s ease; }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 580px) {
  .topbar { height: 58px; padding: 0 13px; }
  .brand { font-size: 13px; }
  .brand-mark { width: 30px; height: 30px; }
  .wallet-button { min-width: 88px; padding: 8px 10px; }
  .hero { min-height: 420px; aspect-ratio: auto; }
  .hero > img { object-position: 61% center; }
  .hero-copy { left: 20px; bottom: 86px; }
  .level-grid { grid-template-columns: repeat(4,1fr); gap: 5px; }
  .level-card { min-height: 70px; padding: 8px 2px; }
  .level-card span { font-size: 8px; }
  .benefit-grid { gap: 7px; }
  .benefit-grid article { padding: 10px 8px; gap: 7px; }
  .benefit-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .modal { padding: 22px 18px; }
}

/* FIRE business modules */
.level-card.completed { border-color: rgba(205,160,82,.2); background: rgba(205,160,82,.08); }
.level-card.completed::after { content:"✓"; position:absolute; right:7px; top:5px; color:#78caa3; font-size:10px; }
.level-card.available { border-color:var(--gold-bright); box-shadow:0 0 0 2px rgba(205,160,82,.12),0 8px 20px rgba(0,0,0,.18); }
.level-card.locked { opacity:.46; }
.level-card:disabled { cursor:not-allowed; }
.level-card { position:relative; }
.plan-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.plan-summary>div { min-width:0; }
.treasury-row { margin:14px 0; padding:12px 14px; display:grid; gap:6px; border:1px solid rgba(205,160,82,.18); border-radius:10px; background:rgba(0,0,0,.22); }
.treasury-row span { color:var(--muted); font-size:11px; }
.treasury-row code { color:var(--gold-pale); font-size:11px; word-break:break-all; }
.reward-grid .benefit-icon { font-size:10px; font-weight:800; }
.relationship-card { margin-top:14px; }
.relationship-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.relationship-grid>div { padding:13px; display:grid; gap:7px; border:1px solid rgba(205,160,82,.18); border-radius:10px; background:rgba(0,0,0,.18); }
.relationship-grid small,.inline-form span { color:var(--muted); font-size:10px; }
.relationship-grid code { color:var(--gold-pale); }
.inline-form { margin-top:15px; display:grid; gap:11px; }
.inline-form label { display:grid; gap:6px; }
.inline-form input,.compact-form input,.compact-form select,.modal-input input { min-width:0; width:100%; height:42px; padding:0 12px; border:1px solid rgba(205,160,82,.24); border-radius:9px; outline:0; color:var(--text); background:#0b0b0b; }
.inline-form input:focus,.compact-form input:focus,.modal-input input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(205,160,82,.08); }
.record-list { display:grid; }
.record-row { min-height:58px; padding:10px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid rgba(205,160,82,.12); }
.record-row:first-child { border-top:0; }
.record-row>span { min-width:0; display:grid; gap:4px; }
.record-row>span:last-child { text-align:right; }
.record-row strong,.record-row b { color:var(--gold-pale); font-size:12px; }
.record-row small { color:var(--muted); font-size:10px; word-break:break-word; }
.empty-line { padding:24px 8px; color:var(--muted); font-size:12px; text-align:center; }
.asset-grid { padding:0 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.asset-grid .asset-card { margin:0; }
.asset-card b { color:var(--gold-pale); }
.account-stats { margin-top:14px; }
.compact-form { display:grid; grid-template-columns:100px 1fr auto; gap:8px; }
.compact-form button,.node-actions button { padding:0 14px; border:0; border-radius:9px; color:#211603; background:linear-gradient(90deg,#a98c52,#e2c179); font-weight:800; }
.node-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.node-card h2 { margin:5px 0 6px; }
.node-actions { flex:0 0 auto; display:grid; gap:9px; justify-items:end; }
.node-actions strong { color:var(--gold-pale); font-size:12px; }
.node-actions button { min-height:38px; }
.node-actions button:disabled { opacity:.5; }
.modal-input { margin-top:14px; display:grid; gap:7px; text-align:left; }
.modal-input span { color:var(--muted); font-size:10px; }

@media (max-width:580px) {
  .plan-summary { grid-template-columns:1fr 1fr; }
  .plan-summary>div:last-child { grid-column:1/-1; }
  .relationship-grid,.asset-grid { grid-template-columns:1fr; }
  .asset-grid { padding:0 13px; }
  .compact-form { grid-template-columns:88px 1fr; }
  .compact-form button { grid-column:1/-1; min-height:42px; }
  .node-card { align-items:flex-start; flex-direction:column; }
  .node-actions { width:100%; justify-items:stretch; }
  .node-actions strong { text-align:left; }
}