:root {
  --bg: #0b0f14;
  --card: rgba(255,255,255,0.06);
  --text: #e7eef7;
  --muted: #a7b1c2;
  --accent: #6ea8ff;
  --accent-strong:#3a86ff;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f8fb;
    --card: #fff;
    --text:#0d1320;
    --muted:#4b5568;
    --accent:#3a86ff;
    --accent-strong:#215bff;
    --shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #3a86ff22, transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, #22d3ee22, transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg));
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.container{ text-align:center; width:100%; max-width: 720px; }
.hero{ margin-bottom:24px; }
.hero h1{ font-size: clamp(28px, 4vw, 40px); letter-spacing:-.02em; }
.hero p{ color:var(--muted); margin-top:8px; }
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 16px; border-radius: 12px; border: none; cursor: pointer;
  font-weight: 600;
}
.btn-primary{
  color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 12px 24px rgba(58,134,255,.35);
}
.btn-secondary{
  background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,.18);
}
@media (prefers-color-scheme: light){ .btn-secondary{ border-color:#e6e9f0 } }
.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 28px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  animation: fadeUp .35s ease-out;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }
form{ display:grid; gap:14px; margin-top: 10px; }
label{ font-size:13px; color:var(--muted) }
input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.15); color: var(--text);
  outline:none; transition: border-color .15s, box-shadow .15s, background .15s;
}
@media (prefers-color-scheme: light){ input{ background:#fff; border-color:#e6e9f0 } }
input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,134,255,.3); }
.form-actions{ display:grid; gap:10px; margin-top:6px; }
.small{ color:var(--muted); font-size: 13px; margin-top: 12px; }
.msg{ margin-top: 10px; font-size: 14px; }
.divider{ height:1px; background: #ffffff33; margin: 16px 0; }
.dashboard{ max-width:900px }
.ad-card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.ad-actions{ display:flex; gap:8px }