:root {
  --bg: #070b12;
  --panel: #0c121c;
  --panel-2: #101925;
  --line: rgba(143, 174, 198, 0.16);
  --muted: #7d8999;
  --text: #edf5f3;
  --mint: #70eed0;
  --mint-soft: rgba(112, 238, 208, 0.13);
  --amber: #e4c06c;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 92% 6%, rgba(50, 184, 148, .10), transparent 27%), var(--bg); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 246px; padding: 28px 18px 24px; border-right: 1px solid var(--line); background: rgba(6, 10, 18, .96); display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 14px; padding: 2px 12px 36px; color: var(--text); text-decoration: none; }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--mint); border: 1px solid rgba(112, 238, 208, .34); transform: rotate(45deg); background: linear-gradient(135deg, rgba(112, 238, 208, .15), rgba(84, 119, 172, .09)); box-shadow: inset 0 0 18px rgba(112, 238, 208, .08); }
.brand-mark { text-indent: 0; }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-copy { display: flex; flex-direction: column; letter-spacing: .18em; }
.brand-copy b { font-size: 21px; }
.brand-copy small { margin-top: 5px; font-size: 8px; color: #77818f; letter-spacing: .42em; }
.nav { display: grid; gap: 8px; }
.nav-item { appearance: none; border: 0; background: transparent; text-align: left; color: #7d8796; padding: 14px 15px; border-radius: 8px; cursor: pointer; display: flex; gap: 15px; align-items: center; transition: .2s ease; }
.nav-item span { font-size: 21px; width: 20px; text-align: center; color: #657184; }
.nav-item:hover { color: #c9d7d3; background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--mint); background: linear-gradient(90deg, rgba(112, 238, 208, .13), rgba(112, 238, 208, .02)); box-shadow: inset 3px 0 var(--mint); }
.nav-item.active span { color: var(--mint); }
.sidebar-foot { margin-top: auto; padding: 0 10px; }
.network-pill { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 18px; padding: 9px 11px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: #909aa6; letter-spacing: .07em; white-space: nowrap; }
.network-pill i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.network-pill.online i { background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.phase { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.phase small { font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .23em; color: #4f5b6b; }
.phase b { font-size: 12px; font-weight: 500; color: #a9b3bd; }

.workspace { width: calc(100% - 246px); margin-left: 246px; min-width: 0; }
.topbar { height: 86px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 38px; background: rgba(7, 11, 18, .84); }
.topbar > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.topbar b { font-size: 17px; }.topbar small { color: #46505e; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .28em; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.icon-button, .wallet-button, .primary-button, .secondary-button, .text-button, .disabled-button { border: 0; cursor: pointer; }
.icon-button { width: 39px; height: 39px; border-radius: 9px; background: #0c121c; border: 1px solid var(--line); color: #8995a4; font-size: 20px; }
.wallet-button, .primary-button { background: var(--mint); color: #06130f; border-radius: 8px; min-height: 42px; padding: 0 18px; font-weight: 720; box-shadow: 0 8px 26px rgba(65, 217, 178, .12); }
.wallet-button:hover, .primary-button:hover { filter: brightness(1.07); }
.content { max-width: 1320px; margin: 0 auto; padding: 34px 38px 64px; }
.view { display: none; }.view.active { display: block; }

.hero-panel { min-height: 500px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 50px; background: linear-gradient(110deg, rgba(13, 23, 34, .96), rgba(7, 12, 21, .94)); }
.hero-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(105,151,170,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(105,151,170,.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.hero-copy { position: relative; z-index: 2; max-width: 610px; }
.eyebrow { color: var(--mint); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; margin-bottom: 23px; }
h1, h2, p { margin-top: 0; }
.hero-copy h1 { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.13; letter-spacing: -.045em; margin-bottom: 24px; }
.hero-copy p, .page-head p { color: #8c98a5; line-height: 1.85; font-size: 15px; max-width: 640px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.secondary-button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #bdc7ce; }
.secondary-button:hover { border-color: rgba(112,238,208,.35); color: var(--mint); }
.safety-note { margin-top: 22px; color: #687687; font-size: 11px; }
.orbit { position: relative; width: min(32vw, 390px); aspect-ratio: 1; margin: auto; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(112, 238, 208, .19); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 100%; height: 100%; }.ring-two { width: 75%; height: 75%; border-color: rgba(110, 145, 207, .28); }.ring-three { width: 47%; height: 47%; border-color: rgba(112, 238, 208, .32); }
.core { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, rgba(112,238,208,.17), rgba(8,14,22,.96) 68%); border: 1px solid rgba(112,238,208,.38); box-shadow: 0 0 42px rgba(91,222,188,.12); }
.core b { letter-spacing: .17em; font-size: 17px; }.core small { margin-top: 6px; color: var(--mint); font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .28em; }
.node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }.node-one { top: 3%; left: 45%; }.node-two { right: 4%; top: 58%; background: #8b7fff; }.node-three { bottom: 5%; left: 54%; }

.metrics { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(12,18,28,.72); }
.metrics > div { padding: 24px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }.metrics > div:last-child { border-right: 0; }
.metrics span, .market-card span { color: #657181; font-size: 12px; }.metrics b { font-size: 24px; }.metrics small, .market-card small { color: #4b5765; font-size: 10px; }.metrics .live-status { color: var(--mint); font-size: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.card, .page-card, .market-card, .settings-list { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15,23,34,.92), rgba(8,13,21,.92)); border-radius: 15px; }
.card { padding: 27px; min-height: 310px; }.card-kicker { display: flex; justify-content: space-between; align-items: center; }.card-icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--mint-soft); color: var(--mint); border-radius: 8px; }.card-kicker em { font-style: normal; color: #697585; font-size: 10px; }
.card h2 { margin: 28px 0 10px; font-size: 20px; }.card p { color: #7c8794; line-height: 1.65; font-size: 13px; min-height: 42px; }
.balance-list { display: grid; gap: 8px; }
.value-box { padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.12); display: flex; justify-content: space-between; align-items: center; }.value-box span { color: #4e5967; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }.value-box b { font-size: 13px; color: #98a3ad; }
.text-button { margin-top: 23px; background: transparent; color: var(--mint); padding: 0; }
.swap-preview { display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }.swap-preview span { font-size: 11px; color: #7f8b99; }.swap-preview b { display: block; color: #cdd6d5; margin-top: 5px; }.swap-preview i { color: var(--mint); font-style: normal; }
.research-path { display: flex; align-items: center; gap: 10px; margin: 27px 0 6px; color: #8895a2; font-size: 11px; }.research-path i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--mint), transparent); }
.proof-row { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }.proof-row div { padding: 20px 26px; display: flex; flex-direction: column; gap: 7px; border-right: 1px solid var(--line); }.proof-row div:last-child { border: 0; }.proof-row b { font-size: 13px; color: #cbd5d3; }.proof-row small { color: #596573; }

.page-view { min-height: 650px; }.page-head { padding: 26px 0 32px; }.page-head h1 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 16px; }.page-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-card { padding: 32px; }.wallet-connect-card { text-align: center; max-width: 680px; margin: 20px auto; padding: 55px 32px; }.large-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 15px; background: var(--mint-soft); color: var(--mint); font-size: 28px; }.wallet-connect-card p { color: #7f8a97; }.wallet-connect-card .primary-button { margin-top: 18px; }
.notice { margin: 26px auto 0; padding: 13px; border: 1px solid rgba(112,238,208,.13); background: rgba(112,238,208,.04); border-radius: 9px; color: #728078; font-size: 11px; max-width: 520px; }
.wallet-balances { margin: 28px auto 0; max-width: 520px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; text-align: left; }
.wallet-balances[hidden] { display: none; }
.wallet-balances > div { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; }
.wallet-balances span { color: #667382; font-size: 11px; }.wallet-balances b { color: #d6e1df; font-size: 20px; overflow-wrap: anywhere; }.wallet-balances small { color: #4f5b69; font-size: 9px; }
.balance-error { margin: 16px auto 0; color: #e0a47f !important; font-size: 11px; }
.balance-error[hidden] { display: none; }
.swap-panel { max-width: 640px; margin: 10px auto; }.swap-panel label { display: block; margin-bottom: 9px; color: #707d8d; font-size: 11px; }.token-input { padding: 22px; border: 1px solid var(--line); border-radius: 11px; display: flex; justify-content: space-between; background: rgba(0,0,0,.15); }.token-input span { color: var(--mint); font-weight: 700; }.token-input b { font-size: 25px; }.swap-divider { width: 38px; height: 38px; border-radius: 50%; margin: -8px auto; position: relative; z-index: 2; display: grid; place-items: center; background: #111a27; border: 1px solid var(--line); color: var(--mint); }.disabled-button { width: 100%; margin-top: 24px; height: 46px; border-radius: 9px; background: #18212c; color: #64707d; }
.market-grid, .eco-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.market-card { padding: 24px; display: flex; flex-direction: column; gap: 11px; }.market-card b { font-size: 26px; }.eco-grid { grid-template-columns: repeat(3,1fr); }.eco-grid .page-card { min-height: 250px; }.eco-grid .large-icon { margin-left: 0; }.eco-grid p { color: #7e8995; line-height: 1.7; }
.status-card { margin-top: 18px; display: flex; align-items: center; gap: 18px; }.status-card > i { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); }.status-card.online > i { background: var(--mint); box-shadow: 0 0 14px var(--mint); }.status-card p { margin: 6px 0 0; color: #65717f; font-size: 12px; }
.profile-card { display: flex; align-items: center; gap: 20px; }.avatar { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--mint-soft); color: var(--mint); font-size: 25px; font-weight: 800; border: 1px solid rgba(112,238,208,.25); }.profile-card h2 { margin: 0 0 8px; }.profile-card p { margin: 0; color: #718090; }
.settings-list { margin-top: 18px; overflow: hidden; }.settings-list div { padding: 19px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }.settings-list div:last-child { border: 0; }.settings-list span { color: #7c8996; }.settings-list b { font-size: 13px; }.settings-list .safe { color: var(--mint); }
.mobile-nav { display: none; }

@media (max-width: 980px) {
  .sidebar { display: none; }.workspace { width: 100%; margin: 0; }.topbar { height: 70px; padding: 0 18px; }.topbar small, .icon-button { display: none; }.content { padding: 20px 18px 100px; }
  .hero-panel { min-height: auto; grid-template-columns: 1fr; padding: 34px 26px 28px; }.hero-copy h1 { font-size: 38px; }.orbit { width: 270px; margin-top: 36px; }
  .metrics { grid-template-columns: repeat(2,1fr); }.metrics > div:nth-child(2) { border-right: 0; }.metrics > div { border-bottom: 1px solid var(--line); }.metrics > div:nth-child(3), .metrics > div:nth-child(4) { border-bottom: 0; }
  .card-grid, .eco-grid { grid-template-columns: 1fr; }.proof-row { grid-template-columns: 1fr; }.proof-row div { border-right: 0; border-bottom: 1px solid var(--line); }
  .market-grid { grid-template-columns: repeat(2,1fr); }.page-head.split { display: block; }.page-head.split .secondary-button { margin-top: 15px; }
  .mobile-nav { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,13,21,.96); box-shadow: 0 14px 45px rgba(0,0,0,.45); }
  .mobile-nav button { border: 0; background: transparent; color: #64707d; padding: 6px 2px; font-size: 18px; }.mobile-nav small { display: block; margin-top: 4px; font-size: 9px; }.mobile-nav button.active { color: var(--mint); }
}

@media (max-width: 560px) {
  .wallet-button { padding: 0 12px; }.wallet-button span { display: none; }.hero-panel { padding: 28px 20px; }.hero-copy h1 { font-size: 31px; }.hero-copy p { font-size: 13px; }.orbit { width: 220px; }.hero-actions { flex-direction: column; }.metrics { grid-template-columns: 1fr; }.metrics > div { border-right: 0; border-bottom: 1px solid var(--line) !important; }.metrics > div:last-child { border-bottom: 0 !important; }.card { min-height: 0; }.market-grid, .wallet-balances { grid-template-columns: 1fr; }.page-card { padding: 24px; }
}