/* ===== Base ===== */
:root{
  --bg:#f4f6fb;
  --ink:#0f172a;
  --muted:#64748b;
  --primary:#2154c3;
  --primary-600:#1a4299;
  --radius:12px;
  --shadow:0 8px 22px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--ink);
}

/* ===== Layout ===== */
.center-wrap{max-width:800px;margin:48px auto;padding:0 16px}

/* ===== Card / Panel ===== */
.panel{
  background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:20px;
}
.panel h2{margin:0 0 6px;font-size:20px}
.muted{color:var(--muted);font-size:14px}

/* ===== Buttons ===== */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:10px;border:1px solid transparent;
  background:var(--primary);color:#fff;font-weight:700;text-decoration:none;cursor:pointer
}
.btn:hover{background:var(--primary-600)}
.btn.alt{background:#eef2ff;color:#1f2a72;border-color:#d9dfff}

/* ===== Login page ===== */
.login-wrap{max-width:420px;margin:72px auto;padding:0 16px}
.login-panel h2{margin-bottom:4px}
.login-panel .muted{margin-bottom:16px}

.login-form-fields{
  display:grid;
  gap:14px;
  margin-top:8px;
}

.login-field label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
}

.login-field input[type="text"],
.login-field input[type="password"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  font-size:14px;
}

.login-field input[type="text"]:focus,
.login-field input[type="password"]:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(33,84,195,.16);
}

/* Error message */
.login-error{
  margin-top:12px;
  padding:8px 10px;
  border-radius:8px;
  background:#fef2f2;
  color:#b91c1c;
  font-size:13px;
}