:root {
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f7f8; --card:#fff;
  --brand:#2e5597; --brand-d:#1f3864; --good:#0a7a3b; --bad:#b42318;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; } h1 small { font-weight:400; color:var(--muted); font-size:.8rem; display:block; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .good { color:var(--good); } .bad { color:var(--bad); font-weight:600; }

/* login */
.login-body { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login-card { background:var(--card); padding:2rem; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.08); width:320px; }
.login-card h1 { margin:0; color:var(--brand); text-align:center; }
.login-card .sub { text-align:center; color:var(--muted); margin:.2rem 0 1.2rem; }
.login-card label { display:block; margin-bottom:.8rem; font-size:.85rem; color:var(--muted); }
.login-card input { width:100%; padding:.6rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; margin-top:.25rem; }
.login-card button { width:100%; padding:.7rem; background:var(--brand); color:#fff; border:0; border-radius:8px; font-size:1rem; cursor:pointer; }

/* chrome */
.topbar { background:var(--brand-d); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; }
.topbar .brand { color:#fff; font-weight:700; font-size:1.05rem; } .topbar .brand span { opacity:.7; font-weight:400; }
.topbar nav { display:flex; align-items:center; gap:1rem; }
.topbar nav a { color:#fff; opacity:.9; } .topbar nav .who { opacity:.7; font-size:.85rem; }
.topbar nav .logout { background:rgba(255,255,255,.15); padding:.3rem .7rem; border-radius:6px; }
.wrap { max-width:1150px; margin:1.2rem auto; padding:0 1rem; }
.foot { text-align:center; color:var(--muted); font-size:.8rem; padding:2rem; }
.crumbs { color:var(--muted); margin-bottom:.5rem; } .crumbs a { color:var(--brand); }

/* alerts + pills */
.alert { padding:.6rem .9rem; border-radius:8px; margin:.6rem 0; }
.alert.ok { background:#e7f6ec; color:var(--good); } .alert.error { background:#fdecea; color:var(--bad); }
.pill { font-size:.7rem; padding:.1rem .45rem; border-radius:99px; vertical-align:middle; }
.pill.edit { background:#e7f0ff; color:var(--brand); } .pill.view { background:#eee; color:var(--muted); }

/* tables */
.grid { width:100%; border-collapse:collapse; background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.grid th { background:var(--brand); color:#fff; text-align:left; font-weight:600; font-size:.8rem; padding:.5rem .6rem; }
.grid td { padding:.4rem .6rem; border-top:1px solid var(--line); font-size:.9rem; vertical-align:middle; }
.grid.groups td.name a { font-weight:600; }
.grid .fld { width:100%; border:1px solid transparent; background:transparent; padding:.25rem; border-radius:5px; font:inherit; }
.grid .fld:hover, .grid .fld:focus { border-color:var(--line); background:#fff; outline:none; }
.grid .fld.saving { opacity:.5; } .grid .fld.saved { border-color:var(--good); }
.grid .fld.notes { min-width:140px; }
.posting-yes { color:var(--good); } .posting-no { color:var(--bad); font-weight:600; } .posting-na { color:var(--muted); }

/* toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin:1rem 0; }
.filters { display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { padding:.3rem .7rem; border-radius:99px; background:#eee; color:var(--ink); font-size:.85rem; }
.chip.on { background:var(--brand); color:#fff; }
.upload { display:flex; gap:.5rem; align-items:center; background:var(--card); padding:.5rem; border-radius:8px; border:1px solid var(--line); }
.upload select, .upload input[type=file] { font-size:.8rem; }
.btn, button { cursor:pointer; }
.btn { display:inline-block; background:var(--brand); color:#fff; padding:.35rem .7rem; border-radius:6px; font-size:.85rem; }
.btn.small, button.small { font-size:.8rem; padding:.3rem .6rem; }
button { background:var(--brand); color:#fff; border:0; border-radius:6px; padding:.45rem .8rem; }
button.ghost { background:#eee; color:var(--ink); }

/* admins */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1rem; }
.row-form, .inline-form { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.row-form input, .inline-form input { padding:.4rem; border:1px solid var(--line); border-radius:6px; }
.admin-actions { display:flex; gap:1rem; margin:.6rem 0; flex-wrap:wrap; }
.checkgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.3rem; margin:.5rem 0; }
.checkgrid label { font-size:.85rem; }
label.inline { display:flex; align-items:center; gap:.3rem; }

/* cross-group + stats */
.alsoin { display:inline-block; font-size:.68rem; background:#eef1f6; color:var(--muted); padding:.05rem .4rem; border-radius:99px; margin-left:.35rem; cursor:help; }
.alsoin.ok { background:#e7f6ec; color:var(--good); }
.stats { display:flex; gap:1.5rem; flex-wrap:wrap; margin:.5rem 0 1.2rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.5rem .9rem; font-size:.9rem; color:var(--muted); }
.stat b { color:var(--ink); font-size:1.15rem; margin-right:.25rem; }
@media (max-width:640px){ .grid { font-size:.8rem; } .topbar nav .who { display:none; } }