:root{
  --accent:#4F8CFF; --accent-hover:#3D78E8;
  --bg:#0E1116; --sidebar:#11161D; --card:#1A2029; --chip:#232B36;
  --fg:#E8ECF1; --muted:#8A93A2;
  --radius-card:10px; --radius-ctl:8px;
  --font:"Inter","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{background:var(--bg);color:var(--fg);font-family:var(--font);margin:0;}
.muted{color:var(--muted);}
.card{background:var(--card);border-radius:var(--radius-card);padding:20px;}
.btn-accent{background:var(--accent);color:#fff;border:0;border-radius:var(--radius-ctl);
  padding:10px 14px;font-weight:600;cursor:pointer;}
.btn-accent:hover{background:var(--accent-hover);}

/* ---- Login ---- */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh;}
.login-card{background:var(--card);border-radius:var(--radius-card);padding:40px;
  width:100%;max-width:400px;box-shadow:0 10px 25px rgba(0,0,0,.5);}
.login-card h1{color:var(--accent);margin-bottom:10px;font-size:24px;text-align:center;}
.login-card .subtitle{color:var(--muted);text-align:center;margin-bottom:30px;font-size:14px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px;}
.form-group input{width:100%;background:var(--bg);border:1px solid var(--chip);
  border-radius:var(--radius-ctl);padding:12px;color:var(--fg);font-size:16px;}
.form-group input:focus{outline:none;border-color:var(--accent);}
.login-card .btn-accent{width:100%;padding:14px;font-size:16px;margin-top:10px;}
.error{color:#ff4f4f;background:rgba(255,79,79,.1);padding:10px;border-radius:5px;
  margin-bottom:20px;font-size:14px;}