:root{
  --bg:#EDF1F5; --ink:#1E2A38; --muted:#647082; --surface:#FFFFFF;
  --line:#DCE4EC; --line-strong:#C6D2DE;
  --primary:#2C4266; --primary-soft:#38527E; --accent:#809DB1; --accent-soft:#D5E1EA;
  --ok:#2E7D5B; --ok-bg:#E4F0EA; --danger:#B3452F; --danger-bg:#F6E4DF;
  --radius:16px; --shadow:0 1px 2px rgba(28,40,60,.05), 0 10px 30px rgba(28,40,60,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100dvh; display:flex; flex-direction:column;
  background-image:radial-gradient(circle at 15% -10%, rgba(44,66,102,.10), transparent 45%);
}
header.top{background:var(--primary); color:#F4F1EA; padding:30px 24px 26px; text-align:center; box-shadow:0 8px 24px rgba(28,40,60,.12)}
header.top img{height:30px; width:auto}
header.top .kicker{margin-top:14px; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:#AFC4D6}
main{flex:1; width:100%; max-width:460px; margin:0 auto; padding:30px 20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.card.wide{max-width:760px}
h1{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:21px; margin:0 0 4px; color:var(--primary)}
p.lead{color:var(--muted); font-size:14px; margin:0 0 18px}
label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin:14px 0 6px}
input[type=text],input[type=password]{
  width:100%; padding:13px 14px; border:1.5px solid var(--line-strong); border-radius:12px;
  font-family:inherit; font-size:16px; background:#fff; color:var(--ink)}
input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(44,66,102,.12)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:20px; padding:14px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:16px; background:var(--primary); color:#F4F1EA}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:var(--accent); color:#13243A}
.btn.danger{background:var(--danger); color:#fff}
.btn.small{width:auto; margin:0; padding:8px 12px; font-size:13px; border-radius:9px}
.banner{border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:16px}
.banner.err{background:var(--danger-bg); color:#7a2e1f}
.banner.ok{background:var(--ok-bg); color:#1c4d38}
.banner.info{background:#E6EDF4; color:#2C4266}
.links{margin-top:18px; text-align:center; font-size:13px}
.links a{color:var(--primary-soft); text-decoration:none}
table{width:100%; border-collapse:collapse; margin-top:10px; font-size:14px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--accent-soft); color:var(--primary)}
.row-actions{display:flex; gap:6px; flex-wrap:wrap}
.muted{color:var(--muted); font-size:13px}
footer{text-align:center; color:var(--muted); font-size:12px; padding:24px}
footer a{color:var(--primary-soft); text-decoration:none}
.creds{background:var(--bg); border:1px dashed var(--line-strong); border-radius:10px; padding:12px 14px; font-size:14px; margin-top:12px}
.creds b{font-family:ui-monospace,Menlo,Consolas,monospace}