:root {
  --gold: #C49A10; --gold-l: #F0C84A; --gold-p: #FBF4DC;
  --cream: #F5F0E8; --cream-d: #EDE4D4;
  --ch: #2A2318; --ch-m: #4A3F30; --ch-l: #7A6E5E;
  --sage: #6B8F6B; --terra: #C4704A;
  --blue: #3A6EA8; --blue-p: #E4EDF7;
  --amber: #A06020; --amber-p: #FBF0E0;
  --green: #3A7A4A; --green-p: #E4F2E8;
  --red: #A03030; --red-p: #F7E4E4;
  --purple: #6A4A9A; --purple-p: #EEE8F8;
  --orange: #C47010; --orange-p: #FBF0E0;
  --b: rgba(42,35,24,.12); --bm: rgba(42,35,24,.22);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--cream); color: var(--ch); min-height: 100vh; }

/* HEADER */
.hdr { background: var(--ch); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 54px; border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 100; }
.hdr-logo { font-family: Georgia, 'DM Serif Display', serif; font-size: 22px; color: var(--gold-l); font-weight: normal; letter-spacing: .02em; }
.hdr-sub { font-size: 10px; color: var(--ch-l); text-transform: uppercase; letter-spacing: .12em; }
.hdr-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; background: rgba(196,154,16,.2); color: var(--gold-l); font-family: monospace; }

/* NAV */
.nav { background: var(--ch); padding: 0 1.5rem; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; overflow-x: auto; gap: 2px; }
.nav-link { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border: none; background: transparent; color: var(--ch-l); cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; font-family: monospace; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--gold-l); border-bottom-color: var(--gold); }

/* MAIN */
.main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.page-title { font-family: Georgia, serif; font-size: 26px; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--ch-l); margin-bottom: 22px; }

/* BUTTONS */
.btn { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 9px 18px; border-radius: 6px; border: none; cursor: pointer; transition: all .15s; white-space: nowrap; font-family: monospace; text-decoration: none; display: inline-block; }
.btn-p { background: var(--gold); color: var(--ch); font-weight: 500; } .btn-p:hover { background: var(--gold-l); }
.btn-s { background: transparent; color: var(--ch-m); border: 1px solid var(--bm); } .btn-s:hover { background: var(--cream-d); }
.btn-d { background: transparent; color: var(--red); border: 1px solid rgba(160,48,48,.3); font-size: 10px; padding: 4px 10px; }
.btn-g { background: var(--sage); color: #fff; font-weight: 500; } .btn-g:hover { background: #4a7a4a; }
.btn-sm { padding: 6px 12px; font-size: 10px; }
.btn-full { width: 100%; padding: 12px; font-size: 12px; text-align: center; }

/* INPUTS */
input[type=text], input[type=email], input[type=password], select, textarea {
  font-family: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--bm); border-radius: 6px; background: #fff; color: var(--ch); outline: none; transition: border-color .2s; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.fgrp { display: flex; flex-direction: column; gap: 5px; }
.fgrp label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ch-l); font-family: monospace; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

/* CARDS */
.card { background: #fff; border: 1px solid var(--b); border-radius: 10px; }
.card-pad { padding: 16px; }
.card-hdr { background: var(--ch); color: var(--gold-l); padding: 8px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-family: monospace; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
.divider { height: 1px; background: var(--b); margin: 16px 0; }

/* LOGIN */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ch); }
.login-box { background: var(--cream); border-radius: 16px; padding: 40px; width: 100%; max-width: 360px; text-align: center; }
.login-logo { font-family: Georgia, serif; font-size: 44px; color: var(--gold); margin-bottom: 2px; font-weight: normal; }
.login-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--ch-l); margin-bottom: 28px; font-family: monospace; }
.login-err { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 16px; }

/* SCHEDULE */
.sched-week { margin-bottom: 22px; }
.week-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ch-l); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--b); font-family: monospace; }
.night-grid { display: grid; gap: 8px; }
.night-card { background: #fff; border: 1px solid var(--b); border-radius: 10px; overflow: hidden; }
.night-card.buyout { border: 2px solid var(--sage); }
.night-card.lean { border: 1.5px dashed var(--terra); }
.night-card.my-night { border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--gold-p); }
.nc-hdr { background: var(--ch); padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; }
.nc-date { font-size: 11px; color: var(--gold-l); text-transform: uppercase; letter-spacing: .06em; font-family: monospace; }
.nc-flag { font-size: 9px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; font-family: monospace; }
.fl-bo { background: rgba(107,143,107,.25); color: #A0D0A0; }
.fl-lean { background: rgba(196,112,74,.25); color: #F0A080; }
.nc-body { padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.chip { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 5px; font-size: 12px; font-weight: 500; }
.chip.me { outline: 2px solid var(--gold); }
.chip-role { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-family: monospace; opacity: .7; }
.chip-bar { background: var(--blue-p); color: var(--blue); }
.chip-host { background: var(--green-p); color: var(--green); }
.chip-server { background: var(--amber-p); color: var(--amber); }
.chip-support { background: var(--red-p); color: var(--red); }
.chip-emerg { background: var(--orange-p); color: var(--orange); }
.nc-note { font-size: 10px; color: var(--ch-l); font-style: italic; padding: 2px 4px; }
.leg { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; background: #fff; border-radius: 8px; border: 1px solid var(--b); }
.li { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ch-m); }
.ld { width: 10px; height: 10px; border-radius: 2px; }

/* MY SHIFTS BANNER */
.my-banner { background: var(--ch); border-radius: 10px; padding: 18px 22px; margin-bottom: 20px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.my-banner-name { font-family: Georgia, serif; font-size: 22px; color: var(--gold-l); }
.my-banner-sub { font-size: 13px; color: var(--ch-l); margin-top: 2px; }
.shift-count { font-family: monospace; font-size: 30px; color: var(--gold-l); font-weight: bold; }
.shift-count-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ch-l); font-family: monospace; }
.next-shift-box { background: var(--gold-p); border: 1px solid var(--gold); border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; }
.next-shift-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--amber); font-family: monospace; margin-bottom: 4px; }
.next-shift-date { font-size: 18px; font-weight: 600; }
.next-shift-role { font-size: 12px; color: var(--ch-l); margin-top: 3px; }
.my-shift-item { background: #fff; border: 1px solid var(--b); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.my-shift-item.upcoming { border-left: 3px solid var(--gold); }

/* NOTICES */
.notice-card { background: #fff; border: 1px solid var(--b); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.notice-card.pinned { border-color: var(--gold); border-width: 2px; }
.notice-pin { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); font-family: monospace; margin-bottom: 4px; }
.notice-title { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.notice-body { font-size: 14px; color: var(--ch-m); line-height: 1.6; white-space: pre-wrap; }
.notice-meta { font-size: 11px; color: var(--ch-l); margin-top: 10px; font-family: monospace; }

/* COVERAGE */
.coverage-req { background: #fff; border: 1px solid var(--b); border-radius: 10px; padding: 14px; margin-bottom: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 3px; font-family: monospace; white-space: nowrap; }
.st-open { background: var(--orange-p); color: var(--orange); }
.st-covered { background: var(--green-p); color: var(--green); }
.shift-badge { font-size: 9px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-family: monospace; }
.sb-bar { background: var(--blue-p); color: var(--blue); }
.sb-host { background: var(--green-p); color: var(--green); }
.sb-server { background: var(--amber-p); color: var(--amber); }
.sb-support { background: var(--red-p); color: var(--red); }

/* CHAT */
.chat-wrap { display: flex; flex-direction: column; max-width: 720px; gap: 0; }
.chat-messages { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; min-height: 200px; }
.msg { max-width: 88%; }
.msg-user { align-self: flex-end; background: var(--ch); color: #fff; border-radius: 12px 12px 3px 12px; padding: 11px 16px; font-size: 14px; }
.msg-ai { align-self: flex-start; background: #fff; border: 1px solid var(--b); border-radius: 12px 12px 12px 3px; padding: 11px 16px; font-size: 14px; line-height: 1.65; }
.msg-ai .citation { font-size: 12px; color: var(--blue); margin-top: 8px; }
.msg-ai .citation a { color: var(--blue); }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input { flex: 1; }
.chat-typing { font-size: 12px; color: var(--ch-l); font-style: italic; padding: 4px 0; }

/* HANDBOOK */
.hb-section { background: #fff; border: 1px solid var(--b); border-radius: 10px; padding: 24px; margin-bottom: 16px; }
.hb-section h2 { font-family: Georgia, serif; font-size: 20px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--b); }
.hb-section h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--ch-m); }
.hb-section p { font-size: 14px; line-height: 1.7; color: var(--ch-m); margin-bottom: 10px; }
.hb-section ul { margin: 6px 0 12px 20px; }
.hb-section li { font-size: 14px; line-height: 1.7; color: var(--ch-m); margin-bottom: 4px; }
.hb-section a { color: var(--blue); }

/* ADMIN */
.admin-section { margin-bottom: 28px; }
.admin-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ch-l); font-family: monospace; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--b); }
.staff-row { background: #fff; border: 1px solid var(--b); border-radius: 8px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rc { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-family: monospace; }
.rc-bar { background: var(--blue-p); color: var(--blue); }
.rc-host { background: var(--green-p); color: var(--green); }
.rc-server { background: var(--amber-p); color: var(--amber); }
.rc-support { background: var(--red-p); color: var(--red); }
.rc-ops { background: var(--purple-p); color: var(--purple); }
.flash { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.flash-ok { background: var(--green-p); color: var(--green); border: 1px solid var(--green); }
.flash-err { background: var(--red-p); color: var(--red); border: 1px solid var(--red); }
.form-box { background: var(--cream-d); border-radius: 10px; padding: 16px; border: 1px dashed var(--bm); }

/* COVERAGE RESPOND PAGE */
.respond-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cream); padding: 20px; }
.respond-card { background: #fff; border: 1px solid var(--b); border-radius: 14px; padding: 36px; max-width: 480px; width: 100%; text-align: center; }
.respond-logo { font-family: Georgia, serif; font-size: 32px; color: var(--gold); margin-bottom: 4px; font-weight: normal; }
.respond-icon { font-size: 48px; margin: 16px 0 12px; }
.respond-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.respond-sub { font-size: 14px; color: var(--ch-l); line-height: 1.6; }
.respond-shift { background: var(--gold-p); border: 1px solid var(--gold); border-radius: 8px; padding: 14px 18px; margin: 18px 0; text-align: left; }

@media (max-width: 600px) {
  .main { padding: 1rem; }
  .night-grid { grid-template-columns: 1fr !important; }
  .hdr { padding: 0 1rem; }
  .nav { padding: 0 1rem; }
}