:root { --bg:#f4f6f8; --card:#fff; --ink:#1b2430; --muted:#5f6b7a; --brand:#d6001c; --accent:#ffd400; --ok:#1f8a3b; --line:#e3e7ec; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; align-items:center;
  padding:calc(.75rem + env(safe-area-inset-top)) 1rem .75rem; background:var(--brand); color:#fff; border-bottom:4px solid var(--accent); }
header h1 { margin:0; font-size:1.25rem; } .sub { font-weight:400; opacity:.85; }
header .link { color:#fff; }
main { max-width:1100px; margin:0 auto; padding:1rem; }
.card { background:var(--card); border-radius:12px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:1rem; }
.narrow { max-width:420px; margin:2rem auto; }
.overview { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; }
.overview h2 { margin:0; }
.grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width: 800px) { .grid { grid-template-columns: 3fr 2fr; } }
h3 { margin:.25rem 0 .75rem; }
label { display:block; margin:.5rem 0; font-weight:600; }
label.inline { display:inline-flex; gap:.35rem; font-weight:400; margin-right:1rem; }
fieldset { border:0; padding:0; margin:.5rem 0; }
input[type=email], input[type=date], input:not([type]), input[inputmode], select {
  display:block; width:100%; margin-top:.25rem; padding:.6rem; font-size:16px; border:1px solid var(--line); border-radius:8px; }
select { width:auto; min-width:12rem; }
button { font:inherit; padding:.55rem 1rem; border-radius:8px; border:0; background:var(--brand); color:#fff; cursor:pointer; min-height:40px; }
button:disabled { opacity:.5; cursor:default; }
button.secondary { background:#e8ebef; color:var(--ink); }
button.danger { background:#b00020; }
button.small { padding:.3rem .7rem; min-height:32px; font-size:.9rem; }
button.link { background:none; color:var(--brand); padding:.25rem; min-height:0; text-decoration:underline; }
.muted { color:var(--muted); }
.row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; padding:.65rem 0; border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.row .main { min-width:0; flex:1 1 14rem; } .row .name { font-weight:600; } .row .meta { font-size:.88rem; color:var(--muted); overflow-wrap:anywhere; }
.badge { display:inline-block; font-size:.75rem; padding:.1rem .45rem; border-radius:99px; background:#eef1f4; margin-left:.35rem; vertical-align:middle; }
.badge.captain { background:var(--accent); } .badge.shift { background:#dbeafe; } .badge.err { background:#fde2e2; }
#toast { position:fixed; left:50%; bottom:calc(1rem + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#1b2430; color:#fff;
  padding:.65rem 1rem; border-radius:8px; max-width:90vw; z-index:10; }
#toast.error { background:#b00020; }
dialog { border:0; border-radius:12px; max-width:92vw; width:400px; }
dialog menu { display:flex; justify-content:flex-end; gap:.5rem; padding:0; margin:1rem 0 0; }