:root { --navy:#1e3a5f; --blue:#2f6fb5; --bg:#f4f7fb; --ink:#14243a; --muted:#6b7a90; --line:#dbe3ee; --ok:#1f9d55; --warn:#d98a0b; --bad:#d64545; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; font-family:'Assistant',system-ui,sans-serif; background:var(--bg); color:var(--ink); }
button, input, textarea, select { font:inherit; }
.btn { border:0; border-radius:8px; padding:8px 16px; background:var(--blue); color:#fff; cursor:pointer; font-weight:600; }
.btn:hover { filter:brightness(1.08); } .btn:disabled { opacity:.5; cursor:default; }
.btn.ghost { background:#fff; color:var(--navy); border:1px solid var(--line); }
.btn.ok { background:var(--ok); } .btn.bad { background:var(--bad); } .btn.sm { padding:4px 10px; font-size:14px; }
.field { display:block; margin-bottom:12px; }
.field > span { display:block; font-size:14px; color:var(--muted); margin-bottom:4px; }
.field input, .field textarea, .field select { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.field input:focus, .field textarea:focus { outline:2px solid #2f6fb555; border-color:var(--blue); }
.msg { padding:10px 14px; border-radius:8px; margin:10px 0; font-size:15px; }
.msg.err { background:#fdecec; color:#9b2c2c; border-inline-start:4px solid var(--bad); }
.msg.ok { background:#e8f6ee; color:#146c3b; border-inline-start:4px solid var(--ok); }
.msg.warn { background:#fff4e0; color:#8a5a00; border-inline-start:4px solid var(--warn); }
header.top { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--navy); color:#fff; }
header.top h1 { font-size:20px; margin:0; font-weight:800; flex:1; }
header.top a, header.top button.link { color:#fff; text-decoration:none; background:none; border:0; cursor:pointer; font-size:15px; opacity:.9; }
.badge { background:var(--warn); color:#fff; border-radius:10px; padding:0 7px; font-size:12px; margin-inline-start:4px; }

@media (max-width:640px) {
  header.top { flex-wrap:wrap; gap:6px 14px; padding:8px 12px; } header.top h1 { flex:1 1 100%; font-size:18px; }
  main { padding-inline:10px !important; } .btn { padding:9px 14px; }
  .field input, .field textarea, .field select { font-size:16px; }   /* stops iOS zooming into inputs */
}

header.top a.homelink { font-size:22px; opacity:1; line-height:1; padding:0 2px; }

/* line icons (see icons.js) */
.ico { display:inline-flex; vertical-align:middle; line-height:1; } .ico, .ico * { pointer-events:none; }
svg.ic { width:1.15em; height:1.15em; flex:none; }
.lockic svg.ic, .lockbox .big svg.ic { width:1em; height:1em; }