:root {
  color-scheme: light;
  --ink: #18302b;
  --muted: #61716d;
  --paper: #f5f2e9;
  --card: #fffdf8;
  --green: #163c35;
  --green-2: #255e52;
  --line: #d9ddd8;
  --red: #a62b2b;
  --amber: #a46909;
  --shadow: 0 18px 50px rgba(25, 54, 47, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #68a99a; outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 4.3rem); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
.eyebrow { margin-bottom: .45rem; color: #47776c; font-size: .76rem; font-weight: 800; letter-spacing: .16em; }
.center-card { width: min(460px, calc(100% - 2rem)); margin: 12vh auto; padding: 2.4rem; text-align: center; background: var(--card); border-radius: 26px; box-shadow: var(--shadow); }
.welcome { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr); }
.brand-panel { padding: clamp(2rem, 7vw, 7rem); color: white; background: radial-gradient(circle at 20% 10%, #347b69, transparent 35%), linear-gradient(145deg, #173e36, #102b27); }
.brand-panel h1 { max-width: 760px; margin: 1.8rem 0; }
.brand-panel > p, .brand-panel li { color: #dce9e5; font-size: 1.05rem; line-height: 1.6; }
.brand-panel ul { padding-left: 1.2rem; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 6vw, 6rem); background: var(--card); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 2rem; padding: 4px; background: #e8ebe7; border-radius: 14px; }
.segmented button { padding: .8rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; }
.segmented button.active { background: white; color: var(--green); box-shadow: 0 2px 9px rgba(0,0,0,.08); }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
input, select, textarea { width: 100%; min-height: 46px; padding: .72rem .8rem; color: var(--ink); background: white; border: 1px solid #bbc5c0; border-radius: 10px; }
textarea { min-height: 100px; resize: vertical; }
.check { display: grid; grid-template-columns: auto 1fr; align-items: start; font-weight: 500; line-height: 1.4; }
.check input { width: 20px; min-height: 20px; margin-top: .1rem; }
.primary, .action { padding: .78rem 1rem; border: 0; border-radius: 10px; color: white; background: var(--green); font-weight: 800; }
.primary:hover, .action:hover { background: var(--green-2); }
.danger { padding: .78rem 1rem; border: 0; border-radius: 10px; color: white; background: var(--red); font-weight: 800; }
.danger:hover { background: #7f2020; }
.text-button { padding: .35rem; color: var(--green-2); background: transparent; border: 0; font-weight: 800; text-decoration: underline; }
.hint, .fine-print { color: var(--muted); line-height: 1.5; }
.fine-print { margin-top: 1.5rem; font-size: .82rem; }
.status { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); padding: .85rem 1rem; color: white; background: var(--green); border-radius: 12px; box-shadow: var(--shadow); text-align: center; }
.status.error { background: var(--red); }
.topbar { min-height: 72px; padding: max(.7rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) .7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: white; background: var(--green); }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand div { display: grid; }
.brand span { font-size: .74rem; color: #b8d6ce; text-transform: uppercase; letter-spacing: .1em; }
.brand strong { font-size: 1.05rem; }
.top-actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.quiet { padding: .55rem .7rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; }
.workspace-grid { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 220px 1fr; }
.nav { padding: 1rem; background: #e8ebe5; border-right: 1px solid var(--line); }
.nav button { width: 100%; display: flex; gap: .6rem; align-items: center; padding: .8rem .85rem; margin-bottom: .35rem; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 9px; font-weight: 700; }
.nav button.active { color: white; background: var(--green); }
.content { width: 100%; max-width: 1280px; padding: clamp(1rem, 4vw, 3rem); }
.page-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-head h1 { margin-bottom: .35rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.badge { display: inline-block; padding: .28rem .55rem; border-radius: 999px; color: #24584e; background: #dcebe6; font-size: .76rem; font-weight: 800; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card { padding: 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 20px rgba(25,54,47,.05); }
.metric { font-size: 2rem; font-weight: 900; }
.muted { color: var(--muted); }
.list { display: grid; gap: .7rem; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.list-item h3 { margin-bottom: .25rem; font-size: 1rem; }
.flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.flag { min-height: 92px; padding: 1rem; color: #17241f; border: 2px solid rgba(0,0,0,.14); border-radius: 14px; font-weight: 900; }
.flag small { display: block; margin-top: .35rem; font-weight: 600; }
.flag.green { background: #58c66e; }.flag.yellow { background: #f1cf53; }.flag.red { color: white; background: #c74343; }.flag.black { color: white; background: #262827; }.flag.weather { background: #9ad0dd; }.flag.briefing { background: #dfc3ef; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.empty { padding: 2rem; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed #b8c0bc; border-radius: 12px; }
.notice { padding: .85rem 1rem; color: #6b4a08; background: #fff0c5; border-radius: 10px; }
.notice.error { color: #7b2020; background: #f8dede; }
.install-help ul { margin-bottom: 0; padding-left: 1.25rem; }
.install-help li { margin: .55rem 0; line-height: 1.45; }
.enrollment-output { margin-top: 1rem; overflow-wrap: anywhere; }
.enrollment-qr { display: block; width: min(320px, 100%); height: auto; margin: 1rem auto; padding: .5rem; background: white; border: 1px solid var(--line); border-radius: 12px; }
.pilot-message { border-left: 7px solid var(--green); }
.pilot-message.red_flag { border-color: #c74343; }.pilot-message.yellow_flag { border-color: #d2a700; }.pilot-message.black_flag { border-color: #242625; }
.document-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.document-row p { margin: .2rem 0 0; overflow-wrap: anywhere; }
.file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .55rem .7rem; color: var(--green); border: 1px solid var(--green); border-radius: 8px; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.list-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.registration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.registration-grid p { margin: .25rem 0; overflow-wrap: anywhere; }
.document-links { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; padding: .8rem; background: #f4f6f2; border-radius: 10px; }
.badge-error { color: #7b2020; background: #f8dede; }
@media (max-width: 850px) {
  .welcome { grid-template-columns: 1fr; }
  .brand-panel { min-height: 34vh; padding: 2rem; }
  .brand-panel ul { display: none; }
  .auth-panel { padding: 1.5rem; }
  .workspace-grid { display: block; padding-bottom: 78px; }
  .nav { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; gap: .25rem; overflow-x: auto; padding: .5rem max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border: 0; border-top: 1px solid var(--line); }
  .nav button { min-width: 82px; justify-content: center; padding: .7rem .55rem; margin: 0; font-size: .78rem; }
  .cards, .flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; }
  .brand span { display: none; }
  .document-row { grid-template-columns: 1fr auto; }
  .registration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .topbar { min-height: 65px; }
  .brand img { width: 34px; height: 34px; }
  .brand strong { max-width: 145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .content { padding: 1rem; }
  .cards, .flags, .form-grid { grid-template-columns: 1fr; }
  .page-head { display: block; }
  .list-item { align-items: flex-start; }
}