
:root{
  --bg:#0b0e14; --panel:#0f1320; --muted:#9aa3b2; --text:#e6edf7;
  --gold:#d4af37; --emerald:#2ee6a6; --red:#ff4d4d; --green:#5efc82; --grid:rgba(212,175,55,0.07);
}
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:radial-gradient(1200px 800px at 70% -20%, rgba(46,230,166,0.08), transparent 50%), radial-gradient(800px 500px at -10% 20%, rgba(212,175,55,0.07), transparent 60%), var(--bg); color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif; line-height:1.35; overflow-x:hidden }
#grid-bg{ position:fixed; inset:0; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(100% 100% at 50% 20%, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 60%, transparent 90%); pointer-events:none; animation:gridPulse 8s ease-in-out infinite }
@keyframes gridPulse{0%,100%{opacity:.35}50%{opacity:.6}}
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; position:sticky; top:0; z-index:5; background:linear-gradient(to bottom, rgba(11,14,20,.85), rgba(11,14,20,.35)); backdrop-filter: blur(8px); border-bottom:1px solid rgba(212,175,55,0.15) }
.brand{display:flex; gap:12px; align-items:center}
.logo-orb{ width:36px; height:36px; border-radius:50%; background: radial-gradient(circle at 35% 30%, var(--emerald), rgba(46,230,166,.2) 45%, transparent 60%), radial-gradient(circle at 70% 70%, var(--gold), rgba(212,175,55,.2) 60%, transparent 80%), linear-gradient(145deg, rgba(255,255,255,.15), rgba(0,0,0,.0)); box-shadow: 0 0 18px rgba(46,230,166,.35), inset 0 0 24px rgba(212,175,55,.15); animation: orb 6s ease-in-out infinite }
@keyframes orb{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
h1{font-size:18px; margin:0; letter-spacing:1px} .subtitle{color:var(--muted); font-size:12px}
.ticker{ width:52%; overflow:hidden; white-space:nowrap; font-size:13px } .ticker span{margin-right:24px} .tup{color:var(--green)} .tdn{color:var(--red)}
.admin-mini{ display:flex; gap:8px }
.tabs{ display:flex; gap:8px; padding:12px 18px; border-bottom:1px solid rgba(212,175,55,0.12) }
.tab{ background:transparent; color:var(--text); border:1px solid rgba(212,175,55,0.25); padding:8px 12px; border-radius:999px; cursor:pointer; transition:.2s; font-weight:600; letter-spacing:.3px }
.tab:hover{border-color:var(--gold)} .tab.active{background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(46,230,166,.14)); color:white}
main{padding:16px 18px 64px; max-width:1240px; margin:0 auto} .panel{display:none} .panel.active{display:block}
.market-top{display:grid; grid-template-columns:260px 1fr; gap:16px; margin-bottom:16px}
.index-card{ background:linear-gradient(180deg, rgba(46,230,166,.07), rgba(212,175,55,.08)); border:1px solid rgba(212,175,55,.25); border-radius:16px; padding:14px; box-shadow: 0 0 24px rgba(0,0,0,.25), inset 0 0 40px rgba(46,230,166,.06) }
.index-title{font-size:13px; color:var(--muted)} .index-value{font-size:28px; font-weight:800; margin-top:6px} .index-change{font-size:12px; margin-top:2px} .mkt-hours{font-size:12px; color:#c9d3ea; margin-top:6px}
.news-feed{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0)); border:1px solid rgba(212,175,55,.18); border-radius:16px; padding:14px; min-height:120px }
.news-title{font-weight:700; margin-bottom:8px} .news-feed li{margin:6px 0; color:#cfd6e6; font-size:14px}
.table-wrap{ background: rgba(255,255,255,.02); border:1px solid rgba(212,175,55,.18); border-radius:16px; overflow:auto; box-shadow:0 0 24px rgba(0,0,0,.2)}
.data-table{width:100%; border-collapse:collapse} .data-table th, .data-table td{ padding:10px 12px; border-bottom:1px solid rgba(212,175,55,.12)} .data-table th{ text-align:left; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.badge{font-size:11px; border:1px solid rgba(212,175,55,.24); padding:3px 7px; border-radius:999px; color:#dfe7ff}
.price{font-variant-numeric:tabular-nums} .change-pos{color:var(--green)} .change-neg{color:var(--red)}
.spark{width:120px; height:36px}
.depth{font-size:12px; color:#cfe2ff}
.cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:14px }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0)); border:1px solid rgba(212,175,55,.18); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px }
.card h4{margin:0} .card .meta{font-size:12px; color:var(--muted)} .card .desc{font-size:14px; color:#cfd6e6} .card .actions{display:flex; gap:8px; margin-top:auto}
.wallet{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px} .row-inline{display:flex; gap:8px; align-items:center}
.apply-hero{ margin-bottom:12px } .form{ max-width:640px } .form-note{ color:var(--muted); font-size:12px; margin-top:6px } .waitlist{ margin-top:20px } .waitlist li{ font-size:14px; color:#dfe7ff; margin:6px 0 }
dialog{ border:none; padding:0; background:transparent }
.admin-card{ width:780px; background:#0c1220; border:1px solid rgba(212,175,55,.25); border-radius:18px; padding:12px; color:var(--text) }
.admin-header{ display:flex; align-items:center; justify-content:space-between } .close{ background:transparent; border:1px solid rgba(212,175,55,.25); border-radius:10px; padding:6px 10px; color:var(--text); cursor:pointer}
.admin-sections{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px }
.about-card{ width:520px; background:#0c1220; border:1px solid rgba(212,175,55,.25); border-radius:18px; padding:16px; color:var(--text) }
.primary{ background:linear-gradient(180deg, rgba(212,175,55,.85), rgba(46,230,166,.85)); color:#051016; border:none; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; box-shadow: 0 8px 24px rgba(46,230,166,.18) }
.ghost{ background:transparent; color:var(--text); border:1px solid rgba(212,175,55,.25); padding:10px 14px; border-radius:12px; cursor:pointer }
.sm{ padding:6px 10px; font-size:12px }
footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px 0 40px }
