:root { --ink:#1d2433; --muted:#667085; --line:#e4e7ec; --bg:#f5f6f8; --card:#fff; --brand:#1f4e8c; --brand-ink:#fff; --me:#eef4ff; --red:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.top { background:var(--brand); color:var(--brand-ink); padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; }
.brand strong { display:block; font-size:15px; letter-spacing:.02em; }
.brand span { font-size:13px; opacity:.85; }
.top nav { display:flex; flex-wrap:wrap; gap:4px 14px; }
.top nav a { color:#fff; text-decoration:none; font-size:14px; opacity:.9; }
.top nav a:hover { opacity:1; text-decoration:underline; }
main { max-width:1200px; margin:20px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; }
.card.narrow { max-width:420px; margin:40px auto; }
h1 { font-size:20px; margin:0 0 8px; }
h2 { font-size:15px; margin:22px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--line); color:var(--brand); }
.muted { color:var(--muted); } .small { font-size:13px; }
.count { font-size:13px; font-weight:500; background:var(--bg); border-radius:10px; padding:2px 8px; margin-left:6px; color:var(--muted); }
.bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.search { display:flex; gap:6px; }
input, select { font:inherit; padding:8px 10px; border:1px solid #cfd4dc; border-radius:6px; width:100%; background:#fff; color:var(--ink); }
input[readonly] { background:var(--bg); color:var(--muted); }
.search input { width:260px; max-width:60vw; }
label { display:block; font-size:13px; font-weight:600; color:#344054; margin-bottom:12px; }
label input, label select { margin-top:4px; font-weight:400; }
label.check { display:flex; gap:8px; align-items:center; font-weight:500; }
label.check input { width:auto; margin:0; }
.formgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0 16px; }
.btn { display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:6px; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.small { padding:5px 10px; font-size:13px; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid #cfd4dc; }
.btn.red { color:var(--red); border-color:#f3c5c0; }
.actions { display:flex; gap:16px; align-items:center; margin-top:16px; }
.danger { display:flex; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.flash { background:#ecfdf3; border:1px solid #abefc6; color:#067647; padding:10px 14px; border-radius:8px; margin-bottom:16px; }
.error { background:#fef3f2; border:1px solid #fecdca; color:var(--red); padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.tablewrap { overflow-x:auto; margin-top:10px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:#fafbfc; white-space:nowrap; }
tr.me td { background:var(--me); }
td a { color:var(--brand); font-weight:600; text-decoration:none; }
.nowrap { white-space:nowrap; } td.old { color:var(--red); } td.new { color:#067647; }
dl.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px 16px; margin:0; }
dt { font-size:12px; color:var(--muted); } dd { margin:0; font-weight:500; word-break:break-word; }
@media (max-width:600px) { .search input { width:100%; } .search { width:100%; } }

/* ================= Login page ================= */
.login-page { --navy:#0b4a9c; --navy-2:#0a3f86; --ink2:#0f2547; --gold:#e3b53b;
  min-height:100vh; display:flex; flex-direction:column; background:#eef3fb;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lp-top { background:var(--navy-2); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(16px,4vw,64px); }
.lp-brand { display:flex; align-items:center; gap:14px; font-weight:700; font-size:clamp(14px,1.6vw,20px); letter-spacing:.01em; }
.lp-brand img { width:44px; height:52px; object-fit:contain; }
.lp-year { border-left:1px solid rgba(255,255,255,.5); padding-left:28px; font-size:clamp(13px,1.3vw,18px); white-space:nowrap; }
.lp-split { flex:1; display:grid; grid-template-columns:1fr 1fr; }
.lp-hero { position:relative; min-height:560px; background:#cfe3f8 var(--photo) center center / cover no-repeat; }
.lp-side { display:flex; align-items:center; justify-content:center; padding:48px 24px;
  background: radial-gradient(120% 80% at 100% 100%, #dce8f8 0%, rgba(220,232,248,0) 60%), #f4f7fc; }
.lp-card { width:100%; max-width:560px; background:#fff; border-radius:22px; padding:36px clamp(20px,4vw,48px) 44px;
  box-shadow:0 20px 50px rgba(16,47,99,.08), 0 2px 6px rgba(16,47,99,.05); text-align:center; }
.lp-lock { width:84px; height:84px; border-radius:50%; background:#e7f0fd; color:#1463d8; display:grid; place-items:center; margin:0 auto 18px; }
.lp-card h2 { font-size:clamp(28px,2.6vw,36px); font-weight:800; color:var(--ink2); margin:0 0 12px; border:0; padding:0; }
.lp-intro { color:#4b5563; font-size:16px; line-height:1.6; margin:0 auto 26px; max-width:420px; }
.lp-form { text-align:left; }
.lp-field { position:relative; display:block; margin:0 0 20px; }
.lp-field > svg { position:absolute; left:20px; top:50%; width:24px; height:24px; transform:translateY(-50%); color:#4b5563; pointer-events:none; }
.lp-field input { height:64px; margin:0; padding:0 56px 0 60px; font-size:17px; border:1.5px solid #d6dbe3; border-radius:10px; color:var(--ink2); font-family:inherit; }
.lp-field input::placeholder { color:#6b7280; }
.lp-field input:focus { outline:none; border-color:#1463d8; box-shadow:0 0 0 4px rgba(20,99,216,.12); }
.lp-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:0; padding:8px; cursor:pointer; color:#4b5563; border-radius:6px; }
.lp-eye svg { width:24px; height:24px; display:block; }
.lp-eye:focus-visible { outline:2px solid #1463d8; }
.lp-btn { width:100%; height:66px; border:0; border-radius:8px; background:var(--navy); color:#fff; font-family:inherit; font-size:19px; font-weight:700; cursor:pointer; margin-top:2px; }
.lp-btn:hover { background:#093e84; }
.lp-or { display:flex; align-items:center; gap:24px; color:#4b5563; margin:26px 0 22px; }
.lp-or::before, .lp-or::after { content:""; flex:1; border-top:1px solid #d1d5db; }
.lp-help { display:flex; gap:18px; align-items:flex-start; text-align:left; background:#eef4fd; border-radius:10px; padding:24px 26px; color:#1463d8; }
.lp-help > svg { width:32px; height:32px; flex:none; }
.lp-help strong { display:block; color:var(--ink2); font-size:17px; margin-bottom:4px; }
.lp-help span { color:#374151; font-size:15.5px; }
.login-page .flash, .login-page .error { text-align:left; }
@media (max-width:900px), (orientation:portrait) {
  .lp-split { grid-template-columns:1fr; }
  .lp-hero { min-height:0; aspect-ratio:1672/941; background-size:cover; }
  .lp-year { display:none; }
  .lp-side { padding:24px 16px 40px; }
}
.lp-foot { margin:22px 0 0; font-size:15px; }
.lp-foot a { color:#1463d8; font-weight:600; text-decoration:none; }
.lp-foot a:hover { text-decoration:underline; }
/* My details summary */
.card + .card { margin-top:16px; }
.summary-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.summary-id { flex:1; min-width:200px; }
.summary-id h1 { margin:0; }
.summary-id p { margin:2px 0 0; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.avatar { width:56px; height:56px; border-radius:50%; background:var(--me); color:var(--brand); display:grid; place-items:center; font-size:24px; font-weight:700; flex:none; }
dl.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:18px 0 0; }
dl.stats > div { background:var(--bg); border-radius:8px; padding:10px 12px; }
.missing { color:#b54708; font-style:italic; font-weight:400; }