:root {
  --bg-dark:#08100c;
  --bg-page:#eef4f0;
  --surface:#fff;
  --surface-2:#f6f9f7;
  --surface-hover:#f0f7f2;
  --ink:#15201a;
  --heading:#0d1814;
  --muted:#65736b;
  --line:#dce5df;
  --line-strong:#cbd6cf;
  --ace:#22e340;
  --ace-dark:#087f24;
  --ace-deep:#0b3418;
  --danger:#c63d32;
  --warning:#9a6700;
  --shadow-sm:0 1px 2px rgba(3,13,7,.05),0 1px 3px rgba(3,13,7,.06);
  --shadow:0 6px 18px rgba(3,13,7,.08),0 2px 5px rgba(3,13,7,.05);
  --radius-sm:7px;
  --radius:11px;
  --radius-lg:15px;
  --ease:cubic-bezier(.4,0,.2,1);
  --body-gradient:linear-gradient(135deg,rgba(34,227,64,.08),transparent 42%),linear-gradient(180deg,#101b15 0,#e7f0ea 25rem,var(--bg-page) 100%);
}

[data-theme="dark"] {
  --bg-page:#0d1410;
  --surface:#1a2520;
  --surface-2:#15201b;
  --surface-hover:#243029;
  --ink:#e6efe9;
  --heading:#f3faf5;
  --muted:#97a99f;
  --line:#2a3830;
  --line-strong:#3a4d42;
  --ace-dark:#22e340;
  --shadow-sm:0 1px 3px rgba(0,0,0,.36);
  --shadow:0 7px 20px rgba(0,0,0,.42);
  --body-gradient:linear-gradient(135deg,rgba(34,227,64,.06),transparent 42%),linear-gradient(180deg,#08100c 0,var(--bg-page) 32rem);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  min-height:100vh;
  background:var(--body-gradient);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--ace-dark); }
.app-shell { width:min(1060px,100%); margin:0 auto; padding:18px; }
.topbar {
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#fff;
}
.brand { display:flex; align-items:center; gap:15px; min-width:0; color:#fff; text-decoration:none; }
.brand img { width:clamp(128px,20vw,182px); height:auto; flex:0 0 auto; }
.brand-title { display:grid; min-width:0; }
.brand-title strong { color:#fff; font-size:clamp(1.25rem,3.2vw,2rem); line-height:1.15; letter-spacing:-.02em; }
.eyebrow { margin:0 0 3px; color:var(--ace-dark); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.topbar .eyebrow { color:var(--ace); }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.topbar-link,.user-pill,.theme-toggle {
  min-height:39px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.84rem;
  text-decoration:none;
}
.topbar-link { transition:background .15s var(--ease),transform .15s var(--ease); }
.topbar-link:hover { background:rgba(255,255,255,.2); transform:translateY(-1px); }
.user-pill { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--ace); box-shadow:0 0 10px var(--ace); }
.theme-toggle { width:39px; justify-content:center; padding:0; cursor:pointer; }
[data-theme="dark"] .theme-dark,:root:not([data-theme="dark"]) .theme-light { display:none; }

main { min-height:calc(100vh - 178px); padding:14px 0 28px; }
footer { padding:8px 4px 18px; color:var(--muted); font-size:.72rem; text-align:center; }
h1,h2,h3 { margin:0; color:var(--heading); line-height:1.22; letter-spacing:-.015em; }
h1 { font-size:clamp(1.55rem,4vw,2.15rem); }
h2 { font-size:1.13rem; }
p { margin:8px 0; }
.muted,.sub { color:var(--muted); }
.sub { font-size:.77rem; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spacer { flex:1; }
.page-heading { margin:4px 0 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.page-heading p { max-width:620px; margin:5px 0 0; color:var(--muted); }

.card,.panel {
  margin-bottom:14px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.card-header { margin:-20px -20px 18px; padding:15px 20px; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:var(--radius) var(--radius) 0 0; }
.card-header .eyebrow { margin-bottom:2px; }
.notice,.error { border-left:4px solid var(--ace-dark); box-shadow:var(--shadow-sm); }
.notice { color:var(--ace-dark); }
.error { border-left-color:var(--danger); color:var(--danger); }
.badge,.pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(8,127,36,.1);
  color:var(--ace-dark);
  font-size:.72rem;
  font-weight:700;
}
.badge.inactive { background:rgba(198,61,50,.1); color:var(--danger); }
.badge.admin { background:var(--ace-deep); color:var(--ace); }
.verified { display:inline-flex; align-items:center; gap:6px; color:var(--ace-dark); font-size:.82rem; font-weight:700; }

button,.btn,input,select { font:inherit; }
button,.btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 15px;
  border:0;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--ace),#16c936);
  color:#06230f;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(8,127,36,.2);
  transition:transform .15s var(--ease),filter .15s var(--ease),box-shadow .15s var(--ease);
}
button:hover,.btn:hover { filter:brightness(.97); transform:translateY(-1px); box-shadow:0 5px 12px rgba(8,127,36,.26); }
button:active,.btn:active { transform:none; }
button.secondary,.btn.secondary { border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); box-shadow:none; }
button.secondary:hover,.btn.secondary:hover { background:var(--surface-hover); }
.btn.icon { width:44px; padding:0; }
label { color:var(--ink); font-size:.86rem; font-weight:650; }
input[type=date],input[type=email],input[type=text],select {
  width:100%;
  min-height:44px;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink);
  outline:0;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input:hover,select:hover { border-color:var(--ace-dark); }
input:focus,select:focus,button:focus-visible,.btn:focus-visible,a:focus-visible { outline:0; border-color:var(--ace-dark); box-shadow:0 0 0 3px rgba(34,227,64,.18); }
input[type=checkbox] { width:18px; height:18px; margin:0; flex:0 0 auto; accent-color:var(--ace-dark); }
.field { display:flex; flex-direction:column; gap:6px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .wide { grid-column:1/-1; }
fieldset { margin:0; padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
legend { padding:0 5px; color:var(--muted); font-size:.78rem; font-weight:700; }

.login-wrap { min-height:65vh; display:grid; place-items:center; }
.login-card { width:min(430px,100%); padding:30px; border-color:rgba(34,227,64,.28); box-shadow:0 22px 55px rgba(3,13,7,.22); animation:panel-in .35s var(--ease) both; }
.login-card .login-mark { width:56px; height:56px; display:grid; place-items:center; margin-bottom:18px; border-radius:50%; background:linear-gradient(135deg,var(--ace-deep),#105c2a); color:var(--ace); font-size:1.45rem; font-weight:900; box-shadow:0 7px 16px rgba(11,52,24,.28); }
.login-card .btn { width:100%; margin-top:14px; }
@keyframes panel-in { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:none; } }

.crew-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.crew-choice { min-height:88px; display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); transition:all .16s var(--ease); }
.crew-choice:hover { border-color:rgba(8,127,36,.45); background:var(--surface-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.crew-choice-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:var(--ace-deep); color:var(--ace); font-weight:900; }
.crew-choice strong { display:block; }
.crew-choice .arrow { margin-left:auto; color:var(--ace-dark); font-size:1.25rem; }

.roster-hero { display:flex; align-items:center; gap:16px; }
.roster-code { width:60px; height:60px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:var(--ace-deep); color:var(--ace); font-size:1rem; font-weight:900; letter-spacing:.02em; }
.roster-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.date-nav { margin-top:17px; display:grid; grid-template-columns:auto 1fr auto; gap:9px; }
.date-nav form { display:grid; grid-template-columns:1fr auto; gap:8px; }
.bulk-form { display:grid; grid-template-columns:auto minmax(140px,1fr) auto; align-items:end; gap:12px; }
.bulk-form label { align-self:center; }
.crew { list-style:none; margin:0; padding:0; }
.crew li { padding:18px 0; border-top:1px solid var(--line); }
.crew li:first-child { padding-top:0; border-top:0; }
.crew li:last-child { padding-bottom:0; }
.name { color:var(--heading); font-weight:800; }
.employee-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.controls { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px; margin-top:12px; }
.control-field { display:grid; gap:5px; }
.control-field > span { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.checks { grid-column:1/-1; display:flex; gap:18px; }
.checks label,.manager-flags label,.group-check { display:flex; align-items:center; gap:7px; cursor:pointer; }
.sticky-save { position:sticky; z-index:5; bottom:10px; margin-top:14px; padding:13px 15px; border:1px solid rgba(8,127,36,.3); border-radius:var(--radius); background:var(--surface); box-shadow:0 12px 28px rgba(3,13,7,.18); }
.sticky-save label { display:flex; align-items:center; gap:8px; }

.manager-flags { display:flex; flex-wrap:wrap; gap:18px; padding:3px 0; }
.group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.group-check { min-height:38px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.manager-card { position:relative; }
.manager-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.manager-email { color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.manager-status { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

@media (max-width:760px) {
  .app-shell { padding:12px; }
  .topbar { align-items:flex-start; flex-direction:column; padding:6px 2px 12px; }
  .topbar-actions { width:100%; justify-content:flex-start; }
  .user-pill { max-width:min(250px,58vw); }
  main { padding-top:10px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .roster-hero { align-items:flex-start; flex-wrap:wrap; }
  .roster-actions { width:100%; justify-content:space-between; }
  .card,.panel { padding:16px; }
  .card-header { margin:-16px -16px 16px; padding:14px 16px; }
  .controls { grid-template-columns:1fr 1fr; }
  .controls .control-field:first-child { grid-column:1/-1; }
  .bulk-form { grid-template-columns:1fr auto; }
  .bulk-form label { grid-column:1/-1; }
}

@media (max-width:520px) {
  .brand-title { display:none; }
  .brand img { width:150px; }
  .crew-grid,.form-grid,.group-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .date-nav { grid-template-columns:44px 1fr 44px; }
  .date-nav .date-label { display:none; }
  .date-nav form { grid-template-columns:1fr; }
  .date-nav form button { display:none; }
  .bulk-form { grid-template-columns:1fr; }
  .bulk-form label { grid-column:auto; }
  .bulk-form button { width:100%; }
  .controls { grid-template-columns:1fr; }
  .controls .control-field:first-child { grid-column:auto; }
  .checks { grid-column:auto; }
  .sticky-save { bottom:6px; }
  .sticky-save button { flex:1; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }