:root { --bg:#04060d; --panel:rgba(13,20,38,.72); --panel-2:#0d1628; --line:rgba(94,234,212,.16); --text:#e6edf7; --muted:#8b98ad; --lime:#5eead4; --blue:#6aa7ff; --orange:#fbbf24; --red:#f87171; --mono:'IBM Plex Mono',monospace; --sans:'Space Grotesk',system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(850px 500px at 82% -10%, rgba(106,167,255,.16) 0%, transparent 58%), radial-gradient(700px 420px at 0% 0%, rgba(45,212,191,.10) 0%, transparent 62%), var(--bg); color:var(--text); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.shell { max-width:1440px; margin:auto; padding:0 32px 56px; }
header { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.08em; }
.brand img { width:30px; height:30px; border-radius:9px; }
.brand span { color:var(--lime); }
nav { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:14px; }
nav a:hover { color:var(--text); }
.wallet { border:1px solid rgba(94,234,212,.42); color:var(--lime); background:rgba(45,212,191,.06); border-radius:9px; padding:10px 15px; font-family:var(--mono); font-size:12px; cursor:pointer; }
.wallet:disabled,.connect:disabled { opacity:.55; cursor:not-allowed; }
main { padding-top:52px; }
.eyebrow { color:var(--lime); font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
h1 { font-size:clamp(34px,5vw,68px); letter-spacing:-.045em; line-height:1; margin:13px 0 16px; max-width:780px; }
.lede { color:var(--muted); max-width:660px; font-size:17px; line-height:1.55; margin:0; }
.status { display:inline-flex; align-items:center; gap:8px; color:#b9c1ce; font-size:13px; margin-top:24px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
.status.error { color:var(--red); }
.status.error .dot { background:var(--red); box-shadow:0 0 14px var(--red); }
.grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:22px; margin-top:42px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 18px 70px rgba(0,0,0,.18); }
.card h2 { font-size:18px; margin:0; letter-spacing:-.01em; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:26px; }
.market-name { font-family:var(--mono); color:var(--orange); font-size:12px; margin-top:8px; }
.pill { font-family:var(--mono); color:var(--blue); border:1px solid #3c4e86; border-radius:999px; padding:7px 10px; font-size:11px; white-space:nowrap; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line); }
.metric { background:var(--panel); padding:18px; min-height:98px; }
.metric label { display:block; color:var(--muted); font-size:12px; margin-bottom:12px; }
.metric strong { font-family:var(--mono); font-size:20px; font-weight:400; }
.metric small { display:block; color:var(--muted); margin-top:5px; font-size:11px; }
.bars { margin-top:22px; display:grid; gap:16px; }
.bar-label { display:flex; justify-content:space-between; color:#c2c7d0; font-size:13px; margin-bottom:8px; }
.bar { height:8px; background:#242a32; border-radius:99px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--lime),#9bbd49); }
.bar i.blue { background:linear-gradient(90deg,var(--blue),#5e74c2); }
.threshold-bar { width:77%; }
.liquidity-bar { width:0; }
.details { display:grid; gap:0; margin-top:20px; }
.row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }
.row:last-child { border-bottom:0; }
.row span:first-child { color:var(--muted); }
.row span:last-child { font-family:var(--mono); text-align:right; }
.mono-link { color:var(--blue); font-family:var(--mono); font-size:11px; word-break:break-all; }
.action { background:linear-gradient(145deg,rgba(45,212,191,.10),rgba(106,167,255,.07)); border-color:rgba(94,234,212,.30); }
.action h2 { font-size:24px; }
.action p { color:var(--muted); line-height:1.5; font-size:14px; }
.balance { margin:25px 0; padding:16px; border-radius:12px; background:rgba(4,6,13,.70); border:1px solid rgba(94,234,212,.20); }
.balance label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.balance strong { font-size:28px; font-family:var(--mono); font-weight:400; }
.connect { width:100%; border:0; border-radius:10px; padding:14px; background:var(--lime); color:#13170b; font-weight:700; font-size:15px; cursor:pointer; }
.connect:hover { filter:brightness(1.07); }
.share-summary { margin-top:22px; padding:16px; border:1px solid rgba(94,234,212,.20); border-radius:12px; background:rgba(4,6,13,.42); }
.share-summary-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:2px; }
.share-summary-head label { display:block; color:var(--text); font-size:13px; }
.share-summary-head small { display:block; color:var(--muted); margin-top:5px; font-size:11px; line-height:1.4; }
.share-badge { color:var(--blue); border:1px solid rgba(106,167,255,.35); border-radius:999px; padding:5px 7px; font:10px var(--mono); white-space:nowrap; }
.share-summary .row { padding:11px 0; }
.share-import { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:10px; padding-top:11px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.share-import code { color:var(--blue); font:10px var(--mono); text-align:right; }
.share-summary > small { display:block; margin-top:9px; color:var(--muted); line-height:1.45; }
.share-guide { margin-top:12px; border-top:1px solid var(--line); padding-top:11px; color:var(--muted); font-size:12px; line-height:1.5; }
.share-guide summary { color:var(--lime); cursor:pointer; font-weight:600; }
.share-guide ol { margin:10px 0 8px 18px; padding:0; }
.share-guide li { padding:3px 0; }
.share-guide code { color:var(--blue); font:10px var(--mono); overflow-wrap:anywhere; }
.share-guide p { margin:8px 0 0; color:var(--muted); font-size:11px; }
.notice { margin-top:16px; color:#aeb5c2; font-size:12px; line-height:1.5; }
.notice b { color:var(--orange); }
.invest { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.invest label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.invest input { width:100%; border:1px solid rgba(94,234,212,.28); border-radius:10px; padding:12px; background:rgba(4,6,13,.70); color:var(--text); font:16px var(--mono); }
.invest button { width:100%; margin-top:10px; border:1px solid rgba(106,167,255,.45); border-radius:10px; padding:12px; background:rgba(106,167,255,.12); color:var(--blue); font-weight:700; cursor:pointer; }
.invest button:disabled { opacity:.45; cursor:not-allowed; }
.invest small { display:block; margin-top:9px; color:var(--muted); line-height:1.45; }
footer { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); }
.lime-text { color:var(--lime); }
@media (max-width:800px) { .shell { padding:0 18px 38px; } nav a:not(.wallet) { display:none; } .grid { grid-template-columns:1fr; } .metrics { grid-template-columns:1fr; } .metric { min-height:0; } footer { display:block; } footer span { display:block; margin-top:10px; } }
@media (max-width:480px) {
  .shell { padding: 0 14px 30px; }
  header { height: 68px; }
  .brand { gap: 8px; font-size: 14px; }
  .brand img { width: 27px; height: 27px; }
  nav { gap: 8px; }
  .wallet { min-height: 44px; padding: 9px 11px; }
  main { padding-top: 34px; }
  h1 { font-size: 38px; line-height: 1.02; }
  .lede { font-size: 15px; line-height: 1.5; }
  .card { padding: 20px 16px; border-radius: 15px; }
  .card-head { flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .card-head .pill { align-self: flex-start; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 14px 12px; min-height: 88px; }
  .metric label { margin-bottom: 8px; }
  .metric strong { font-size: 17px; }
  .row { align-items: flex-start; gap: 8px; }
  .row span:last-child { max-width: 62%; overflow-wrap: anywhere; }
  .action h2 { font-size: 22px; }
  .balance strong { font-size: 22px; overflow-wrap: anywhere; }
  .share-summary-head { flex-direction: column; }
  .share-import { flex-direction: column; align-items: flex-start; }
  .share-import code { text-align: left; overflow-wrap: anywhere; }
  .invest input { min-height: 46px; font-size: 16px; }
  .invest button, .connect { min-height: 46px; }
  .notice { font-size: 11px; }
  footer { font-size: 11px; }
}