:root{
  --bg:#ffffff;
  --panel:#f6f8fa;
  --ink:#182430;
  --muted:#5c6b7a;
  --line:#e3e8ee;
  --accent:#0b4f9e;
  --accent-d:#083b76;
  --danger:#b42318;
  --ok:#16794a;
  --amber:#8a5a00;
  --radius:6px;
  --wrap:760px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.wrap.narrow{max-width:560px}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line);background:var(--bg)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.wordmark{font-weight:700;letter-spacing:.02em;font-size:1.05rem;display:flex;align-items:baseline;gap:.6rem}
.wordmark-sub{font-weight:500;font-size:.8rem;color:var(--muted);letter-spacing:0}
.logout-form{margin:0}

/* ── Headings / lead ────────────────────────────────────── */
h1{font-size:1.6rem;font-weight:700;letter-spacing:-.01em;margin:2rem 0 .5rem}
h2{font-size:1.05rem;font-weight:600;margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.accent{color:var(--accent)}
.lead{font-size:1.02rem;color:var(--ink);margin:.25rem 0 1.5rem;max-width:60ch}
.muted{color:var(--muted)}
.count{font-size:.8rem;font-weight:600;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:.05rem .55rem}

/* ── Panels ─────────────────────────────────────────────── */
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin:1.25rem 0}

/* ── Alerts ─────────────────────────────────────────────── */
.alert{border-radius:var(--radius);padding:.75rem 1rem;margin:1rem 0;font-size:.95rem;border:1px solid}
.alert-ok{background:#eef7f1;border-color:#c7e6d4;color:var(--ok)}
.alert-error{background:#fdf1f0;border-color:#f3ccc7;color:var(--danger)}

/* ── People table ───────────────────────────────────────── */
.empty{color:var(--muted);margin:0}
table.people{width:100%;border-collapse:collapse}
table.people th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;padding:0 .75rem .5rem;border-bottom:1px solid var(--line)}
table.people td{padding:.7rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.people tr:last-child td{border-bottom:none}
.cell-action{text-align:right;width:1%;white-space:nowrap}

.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.badge-extern{background:#fdf3e7;border-color:#f0d9b8;color:var(--amber)}

/* ── Add: person cards ──────────────────────────────────── */
.person-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.1rem .95rem;margin-bottom:.85rem;background:var(--bg)}
.person-card.has-error{border-color:#e6b4ad;background:#fdf6f5}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .9rem;align-items:end}
.pc-grid .full{grid-column:1 / -1}
.pc-grid label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted)}
.pc-grid .opt{font-weight:400;color:var(--muted)}
.pc-grid input,.pc-grid select{font:inherit;color:var(--ink);padding:.55rem .6rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);width:100%}
.pc-grid input:focus,.pc-grid select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.row-remove{position:absolute;top:.5rem;right:.5rem;border:1px solid var(--line);background:var(--bg);
  color:var(--muted);border-radius:var(--radius);width:1.9rem;height:1.9rem;font-size:1.1rem;line-height:1;cursor:pointer}
.row-remove:hover{border-color:var(--danger);color:var(--danger)}
.row-error{margin:.7rem 0 0;color:var(--danger);font-size:.85rem}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary{font:inherit;font-weight:600;background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:.65rem 1.4rem;border-radius:var(--radius);cursor:pointer}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-ghost{font:inherit;font-weight:600;background:transparent;color:var(--accent);border:1px dashed var(--line);
  padding:.5rem .9rem;border-radius:var(--radius);cursor:pointer;margin-top:.25rem}
.btn-ghost:hover{border-color:var(--accent);background:var(--panel)}
.form-actions{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.link-btn{font:inherit;background:none;border:none;color:var(--accent);cursor:pointer;padding:0;
  font-size:.9rem;text-decoration:underline;text-underline-offset:2px}
.link-btn.danger{color:var(--danger)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Footer ─────────────────────────────────────────────── */
.foot{color:var(--muted);font-size:.85rem;margin:2rem 0 3rem}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width:620px){
  .pc-grid{grid-template-columns:1fr}
  table.people thead{display:none}
  table.people,table.people tbody,table.people tr,table.people td{display:block;width:100%}
  table.people tr{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.75rem;padding:.4rem .2rem}
  table.people td{border:none;padding:.35rem .75rem;display:flex;justify-content:space-between;gap:1rem}
  table.people td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;font-weight:600}
  .cell-action{justify-content:flex-end}
  .cell-action::before{content:none}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}