:root{
  --brand:#053d57;
  --bg:#f5f6f7;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --error:#b00020;
  --warn:#b08900;
  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  background:var(--bg);
  color:var(--text);
}
.app-header{
  background:var(--brand); color:#fff; padding:22px 24px;
  display:flex; align-items:center; justify-content:center; position:sticky; top:0;
}
.brand{ font-size:32px; font-weight:800; letter-spacing:.04em; }
.container{ max-width:520px; margin:48px auto; padding:0 16px; }
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; }
.card-title{ margin:0 0 18px 0; font-size:22px; }
.form{ display:flex; flex-direction:column; gap:16px }
.field{ display:flex; flex-direction:column; gap:8px }
.field span{ font-size:14px; color:var(--muted) }
input[type="text"],input[type="password"]{
  padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; outline:none; font-size:16px;
}
input:focus{ border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.25) }
.btn{
  margin-top:8px; padding:12px 16px; border:0; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer;
  background:var(--brand); color:#fff; box-shadow:var(--shadow);
}
.btn:hover{ filter:brightness(1.05) }
.alert{ border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:14px; }
.alert-error{ background:#fde8ea; color:var(--error); border:1px solid #f7c4ca }
.alert-warn{ background:#fff8e1; color:#8a6d00; border:1px solid #ffe399 }
.footer{ text-align:center; color:var(--muted); padding:32px 0 }