:root { --bg:#0b0f14; --card:#121823; --text:#e6eef8; --muted:#8aa4bf; --accent:#6ee7ff; }
*{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--text); }
.container{ max-width:980px; margin:0 auto; padding:16px; } .nav{ position:sticky; top:0; background:#0b111a; border-bottom:1px solid #1f2a37; z-index:10 }
.nav .wrap{ display:flex; gap:8px; padding:10px 16px; overflow-x:auto } a.btn, button, input[type=submit]{ display:inline-block; border-radius:12px; padding:10px 16px; border:1px solid #2a3b52; background:#101826; color:var(--text); text-decoration:none; cursor:pointer; white-space:nowrap }
a.btn:hover, button:hover, input[type=submit]:hover{ border-color:#3b82f6; } input[type=text], input[type=password], select{ width:100%; padding:10px; border-radius:10px; border:1px solid #263042; background:#0c121a; color:var(--text); }
.card{ background:linear-gradient(180deg, #121823 0%, #0f141d 100%); border:1px solid #1f2a37; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.3); margin:16px 0; }
h1,h2,h3{ margin:0 0 12px 0 } .grid{ display:grid; gap:12px } .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat{ background:#0e141e; border:1px solid #1d2735; padding:10px; border-radius:12px } .badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #2a3b52; font-size:12px; margin-left:6px }
.small{ color:var(--muted); font-size:12px } .notice{ padding:10px; border-radius:10px; border:1px solid #2a3b52; background:#0d1520; margin:12px 0; }
.stat[data-rarity='SSR']{ border-color:#f0a } .stat[data-rarity='SSXR']{ border-color:#0ff; box-shadow:0 0 8px rgba(0,255,255,.35) }
footer{ opacity:.6; font-size:12px; padding:20px 0 } @media (max-width: 720px){ .grid-2,.grid-3{ grid-template-columns: 1fr; } }
/* Landing */
.landing { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background: radial-gradient(1200px 600px at 50% 10%, #172030 0%, #0a0f17 60%, #070b12 100%); padding: 24px; }
.landing h1 { font-size:clamp(2.2rem, 6vw, 3.5rem); letter-spacing:1px; color:#c7f5ff; text-shadow:0 0 20px rgba(110,231,255,.25); }
.landing p { color:#a6bbd1; font-size:clamp(1rem, 3.3vw, 1.25rem); max-width:720px; }
.landing .cta { margin-top:18px; background:#6ee7ff; color:#071018; font-weight:700; border:none; padding:14px 28px; border-radius:999px; display:inline-block; text-decoration:none; }
@keyframes floatGlow { 0%{ transform: translateY(0px); box-shadow:0 0 20px rgba(110,231,255,.2);} 50%{ transform: translateY(-6px); box-shadow:0 0 40px rgba(110,231,255,.35);} 100%{ transform: translateY(0px); box-shadow:0 0 20px rgba(110,231,255,.2);} }
.landing .glowcard { margin-top:22px; padding:12px 16px; border-radius:14px; border:1px solid #203042; background:linear-gradient(180deg,#101826,#0b121b); animation: floatGlow 4s ease-in-out infinite; }
@media (max-height:600px){ .landing { justify-content:flex-start; padding-top:60px; } }