:root{
  --primary:#00b4ff;
  --bg1:#0b1220;
  --bg2:#070b12;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(0,180,255,.16), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

.container{
  max-width:1100px;
  margin:40px auto;
  padding:20px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:25px;
  margin-bottom:25px;
  backdrop-filter:blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}

h1,h2,h3{
  margin-top:0;
}

a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}

a:hover{
  text-decoration:underline;
}

.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:12px;
  background:var(--primary);
  color:#000;
  font-weight:700;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,180,255,.4);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

nav{
  background:rgba(0,0,0,.4);
  padding:15px 30px;
  border-bottom:1px solid var(--border);
}

nav a{
  margin-right:15px;
}