:root{
  --ax-bg:#0b1020;
  --ax-card:#151c34;
  --ax-accent:#3aa0ff;
  --ax-text:#e6eefc;
  --ax-muted:#9fb3d9;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b1020,#0e1430);color:var(--ax-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.ax-container{max-width:1120px;margin:0 auto;padding:0 20px}
.ax-header{position:sticky;top:0;background:rgba(10,15,30,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.ax-header .ax-container{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.ax-brand{display:flex;align-items:center;gap:10px;font-weight:700}
.ax-logo{height:24px}
.ax-nav a{color:var(--ax-text);text-decoration:none;margin:0 10px;opacity:.85}
.ax-nav a:hover,.ax-nav a.active{opacity:1;color:var(--ax-accent)}
.ax-nav .ax-right{margin-left:20px}
.ax-main{padding:32px 0}
.ax-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.ax-hero-text h1{margin:.2em 0;font-size:40px}
.ax-cta{display:flex;gap:12px;margin-top:12px}
.ax-btn{display:inline-block;border:1px solid rgba(255,255,255,.12);padding:10px 16px;border-radius:10px;background:transparent;color:var(--ax-text);cursor:pointer}
.ax-btn.ax-primary{border-color:transparent;background:linear-gradient(135deg,#2563eb,#06b6d4)}
.ax-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.ax-card{background:var(--ax-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ax-card .ax-desc{color:var(--ax-muted);font-size:14px}
.ax-actions{margin-top:8px}
.ax-link{color:var(--ax-accent);text-decoration:none}
.ax-footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.06);opacity:.8}
.ax-hero-banner{position:relative;padding:48px 0}
.ax-hero-content{max-width:720px}
.ax-hero-anim{position:absolute;right:0;top:0;bottom:0;width:40%;background:radial-gradient(600px 600px at 80% 20%,rgba(58,160,255,.25),rgba(10,15,30,0));}
.ax-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:24px}
.ax-grid-card{background:var(--ax-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.ax-pre{white-space:pre-wrap;background:#0f1733;border-radius:10px;padding:10px;border:1px solid rgba(255,255,255,.06);color:#d7e3ff}
.ax-panel{background:var(--ax-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.ax-auth .ax-card input{width:100%;margin:6px 0;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#0f1733;color:var(--ax-text)}
.ax-msg{margin-top:6px;color:var(--ax-muted)}
.ax-token-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.ax-token{display:flex;justify-content:space-between;align-items:center;background:#0f1733;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px}
@media (max-width:900px){.ax-hero{grid-template-columns:1fr}}

/* Token Modal Styles */
#token-modal {
  backdrop-filter: blur(4px);
}

#token-modal > div {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  #token-modal > div {
    margin: 20px;
    padding: 20px;
    max-width: none;
    width: calc(100% - 40px);
  }
  
  #token-modal > div h3 {
    font-size: 16px;
  }
  
  #token-modal > div p {
    font-size: 13px;
  }
}