@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
:root { --navy:#243875; --blue:#9ec912; --blue-dark:#789c08; --pale:#f3f7fa; --line:#d9e2ea; --text:#1e2935; --muted:#667483; --green:#147a50; --red:#a23838; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--pale); color:var(--text); font:16px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--blue); }
.setup-page,.login-page,.public-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:0 8px 30px rgba(21,43,68,.06); }
.narrow { width:min(100%,620px); }
.centred { text-align:center; }
.eyebrow { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.12em; margin:0 0 6px; text-transform:uppercase; }
h1,h2 { color:var(--navy); line-height:1.18; margin-top:0; }
h1 { font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:8px; }
h2 { font-size:1.25rem; }
.muted,small,.expiry-note { color:var(--muted); }
.stack { display:grid; gap:18px; margin-top:24px; }
fieldset { border:1px solid var(--line); border-radius:10px; display:grid; gap:14px; padding:18px; }
legend { color:var(--navy); font-weight:700; padding:0 8px; }
label { display:grid; gap:6px; font-weight:650; }
input { width:100%; border:1px solid #b9c7d3; border-radius:7px; color:var(--text); font:inherit; padding:11px 12px; }
input::placeholder { color:#abb4bc; opacity:1; }
input:focus { border-color:var(--blue); outline:3px solid rgba(23,104,172,.14); }
button,.button { background:var(--blue); border:0; border-radius:7px; color:var(--white); cursor:pointer; display:inline-block; font:inherit; font-weight:800; padding:11px 17px; text-decoration:none; }
button:hover,.button:hover { background:var(--blue-dark); color:var(--white); }
.button.secondary { background:var(--white); border:1px solid var(--line); color:var(--navy); }
.button.danger { background:#fff; border:1px solid #e3b4b4; color:var(--red); }
.button.danger:hover { background:var(--red); color:var(--white); }
.button.small { font-size:.82rem; padding:7px 9px; }
.notice { border-radius:8px; margin:18px 0; padding:12px 14px; }
.notice.error { background:#fff0f0; color:var(--red); }
.notice.success { background:#ecf9f2; color:var(--green); }
.topbar { align-items:center; background:var(--white); border-bottom:1px solid var(--line); color:var(--navy); display:flex; justify-content:space-between; padding:12px max(24px,calc((100vw - 1180px)/2)); }
.brand-logo { display:block; height:auto; margin:0 0 22px; max-width:260px; width:70%; }
.public-logo { margin-left:auto; margin-right:auto; }
.brand-lockup { align-items:center; display:flex; gap:18px; }
.topbar-logo { height:44px; object-fit:contain; width:auto; }
.vacancy-name { color:var(--navy); font-weight:800; }
.page { display:grid; gap:22px; margin:0 auto; max-width:1180px; padding:34px 24px 60px; }
.welcome h1 { font-size:1.9rem; }
.section-label { color:var(--navy); font-size:.78rem; font-weight:800; letter-spacing:.12em; margin:0 0 7px; }
.create-grid { display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.wide { grid-column:1/-1; }
.prefix-field { align-items:center; border:1px solid #b9c7d3; border-radius:7px; display:flex; overflow:hidden; }
.prefix-field:focus-within { border-color:var(--blue); outline:3px solid rgba(23,104,172,.14); }
.prefix-field span { background:#edf2f6; color:var(--muted); padding:11px 0 11px 12px; white-space:nowrap; }
.prefix-field input { border:0; border-radius:0; outline:0; padding-left:1px; }
.expiry-note { margin-left:14px; }
.links-card { padding-left:0; padding-right:0; }
.links-card h2,.links-card .empty { padding-left:28px; padding-right:28px; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th,td { border-top:1px solid var(--line); padding:14px 16px; text-align:left; vertical-align:middle; }
th { background:#f8fafc; color:var(--muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
td small { display:block; }
.status { border-radius:999px; display:inline-block; font-size:.78rem; font-weight:800; padding:4px 9px; }
.status.active { background:#e7f7ef; color:var(--green); }
.status.closed { background:#f2f3f5; color:#6b7280; }
.actions { display:flex; flex-wrap:wrap; gap:6px; }
.extend-form { align-items:center; display:flex; gap:5px; }
select { border:1px solid var(--line); border-radius:7px; font:inherit; padding:6px; }
.team-form { border-bottom:1px solid var(--line); padding-bottom:24px; }
.team-list { display:grid; margin-top:10px; }
.team-member { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:20px; justify-content:space-between; padding:16px 0; }
.team-member small { display:block; }
.reset-form { align-items:center; display:flex; gap:5px; }
.reset-form input { min-width:190px; padding:7px 9px; }
.delete-user-form { align-items:center; display:flex; gap:5px; }
@media (max-width:720px) { .create-grid { grid-template-columns:1fr; } .wide { grid-column:auto; } .card { padding:20px; } .prefix-field span { display:none; } .expiry-note { display:block; margin:10px 0 0; } }