:root { --bg:#080b12; --card:#111827; --muted:#90a4c0; --text:#ecf4ff; --line:#243044; --accent:#8ff7d4; --warn:#ffd166; --danger:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(circle at top left,#123f4b 0,#080b12 36%,#05070c 100%); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { position: sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 28px; backdrop-filter: blur(16px); background:rgba(8,11,18,.78); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; min-width:260px; }
.logo { width:42px; height:42px; border:1px solid rgba(143,247,212,.5); border-radius:14px; display:grid; place-items:center; color:var(--accent); font-weight:900; background:rgba(143,247,212,.08); }
.brand-title { font-size:20px; font-weight:800; }
.brand-subtitle { color:var(--muted); font-size:12px; white-space:nowrap; }
.nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tab, button { border:1px solid var(--line); background:#0d1421; color:var(--text); border-radius:14px; padding:10px 14px; cursor:pointer; font-weight:650; }
.tab.active, button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
.connect { background:linear-gradient(135deg,#8ff7d4,#85b7ff); color:#071018; border:0; }
.layout { max-width:980px; margin:0 auto; padding:30px 18px 80px; }
.hero { padding:32px 8px; }
h1 { margin:0; font-size:42px; letter-spacing:-1.3px; }
h2 { margin:0 0 12px; }
p { color:#b8c7dc; line-height:1.65; }
.notice { border:1px solid rgba(255,209,102,.35); color:#ffe6a3; background:rgba(255,209,102,.08); border-radius:14px; padding:13px 15px; margin-top:18px; }
.card { background:rgba(17,24,39,.82); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.22); border-radius:26px; padding:22px; margin:18px 0; }
.wallet-card { margin-top:0; }
.row { display:flex; gap:12px; align-items:center; }
.between { justify-content:space-between; }
.label { color:var(--muted); font-size:12px; margin:10px 0 6px; }
.mono, .pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pre { background:#070b12; border:1px solid var(--line); border-radius:16px; padding:14px; overflow:auto; white-space:pre-wrap; color:#d6e6fb; }
.panel { display:none; }
.panel.active { display:block; }
.pill { padding:6px 10px; border-radius:999px; color:#071018; background:var(--accent); font-size:12px; font-weight:800; }
.pill.warning { background:var(--warn); }
.pill.danger { background:var(--danger); color:#fff; }
.token-input { display:grid; grid-template-columns: 1fr 128px; gap:10px; margin:8px 0 14px; }
input, select { width:100%; border:1px solid var(--line); background:#070b12; color:var(--text); border-radius:16px; padding:14px; font-size:16px; }
.quote { color:var(--muted); background:#0b111d; border:1px solid var(--line); border-radius:14px; padding:12px; margin:12px 0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.grid2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.market-list { display:grid; gap:12px; }
.market-item { border:1px solid var(--line); border-radius:16px; padding:14px; background:#0b111d; }
.wallet-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wallet-chip { border:1px solid var(--line); border-radius:999px; padding:7px 10px; color:var(--muted); font-size:13px; }
.modal { position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.62); z-index:20; }
.hidden { display:none; }
.modal-card { width:min(440px,92vw); background:#111827; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:0 40px 100px rgba(0,0,0,.45); }
.ghost { background:transparent; border:0; font-size:24px; padding:4px 10px; }
.provider-buttons { display:grid; gap:10px; margin:12px 0; }
.provider { width:100%; text-align:left; }
.small { font-size:12px; color:var(--muted); }
footer { color:var(--muted); text-align:center; padding:30px; }
@media (max-width:760px) { .topbar { flex-direction:column; align-items:stretch; } .brand { min-width:0; } h1 { font-size:32px; } .grid2 { grid-template-columns:1fr; } .token-input { grid-template-columns:1fr; } }