:root{
  --bg: #0f172a;
  --card: #0b1224;
  --muted: #8a94a7;
  --text: #e5e7eb;
  --accent: #60a5fa;
  --accent-2: #22d3ee;
  --error-bg: #3f1e25;
  --error: #fecaca;
  --success-bg: #183322;
  --success: #bbf7d0;
  --ring: rgba(96,165,250,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;background:linear-gradient(120deg,#0f172a 0%,#111827 100%);color:var(--text)}
.bg{background:radial-gradient(1200px 600px at 20% -10%,rgba(34,211,238,.2),transparent), radial-gradient(1000px 500px at 120% 10%,rgba(96,165,250,.2),transparent), linear-gradient(120deg,#0f172a 0%,#111827 100%)}

.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.site-footer{border-top:1px solid rgba(255,255,255,.06);border-bottom:none;opacity:.9}
.brand{font-weight:700;letter-spacing:.4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.link{color:var(--text);opacity:.85;text-decoration:none}
.link:hover{opacity:1}

.container{max-width:920px;margin:40px auto;padding:0 16px;display:grid;gap:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:22px;}
.card-header h2{margin:0 0 6px 0;font-size:24px}
.subtle{color:var(--muted);margin:0}

label{display:block;margin:12px 0 6px;font-weight:600}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b1224;color:var(--text);outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}

.btn{margin-top:14px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#081225; font-weight:700; padding:12px 16px; border:0; border-radius:12px; cursor:pointer}
.btn:hover{filter:brightness(1.05)}

.alert{padding:10px 12px;border-radius:12px;margin:12px 0;font-weight:600}
.alert.error{background:var(--error-bg);color:var(--error)}
.alert.success{background:var(--success-bg);color:var(--success)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-col-span-2{grid-column:span 2}
@media (max-width:640px){ .grid-2{grid-template-columns:1fr} .grid-col-span-2{grid-column:span 1} }

.muted{color:var(--muted)}
.small{font-size:.9rem}
.value{margin-top:6px;font-size:1.05rem}
.card-profile .card-body > div{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:12px; border-radius:12px}