:root{
  --g900:#0c3527;--g800:#11503b;--g700:#146c43;--g600:#178a54;--gold:#c9a227;--gold-l:#f7efd6;
  --bg:#f2f6f3;--card:#fff;--ink:#132a20;--muted:#5f7268;--line:#dde8e0;--red:#b3261e;--amber:#9a6b12;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);padding-bottom:78px}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}

/* header */
.fhead{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:11px;padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));background:linear-gradient(180deg,var(--g900),var(--g800));color:#eaf4ee}
.flogo{width:34px;height:34px;border-radius:50%;background:#fff;padding:2px;flex:0 0 34px}
.fback{font-size:30px;line-height:1;width:30px;flex:0 0 30px;color:#eaf4ee}
.fttl{flex:1;min-width:0}
.fttl b{display:block;font-size:16px;line-height:1.25}
.fttl span{display:block;font-size:11.5px;color:#a9cbb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbell{position:relative;font-size:19px;padding:4px}
.fbell i{position:absolute;top:-2px;right:-4px;background:var(--red);color:#fff;border-radius:99px;
  font:700 10px system-ui;font-style:normal;padding:1px 5px}
.fmain{padding:14px}

/* bottom tabs */
.ftabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:#fff;
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.ftabs a{flex:1;text-align:center;padding:9px 4px 8px;font-size:11px;color:var(--muted);font-weight:600}
.ftabs a span{display:block;font-size:19px;line-height:1.25;filter:grayscale(1);opacity:.65}
.ftabs a.on{color:var(--g700)}
.ftabs a.on span{filter:none;opacity:1}

/* next-duty hero */
.fnext{background:linear-gradient(160deg,var(--g800),var(--g900));color:#fff;border-radius:18px;
  padding:18px;margin-bottom:14px;box-shadow:0 12px 26px -12px rgba(12,53,39,.65)}
.fnext h2{font-size:14px;color:#a9e3c3;font-weight:600;margin-bottom:4px}
.fnext .fbig{font-size:19px;font-weight:800;line-height:1.25}
.fnext .fsub{color:#bcd8c8;font-size:12.5px}
.ftag{display:inline-block;background:var(--gold);color:#2a230a;border-radius:99px;
  padding:3px 11px;font:800 11px system-ui;letter-spacing:.06em;margin-bottom:8px}
.fnext .fbtn{margin-top:12px;background:#fff;color:var(--g800)}

/* tiles */
.ftiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ftile{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--g600);
  border-radius:14px;padding:12px 13px}
.ftile b{display:block;font-size:19px;font-weight:800;color:var(--g900);line-height:1.2}
.ftile span{font-size:11.5px;color:var(--muted)}
.ftile.gold{border-left-color:var(--gold)}
.ftile.amber{border-left-color:#d99a1b}

/* list items */
.fsec{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:18px 0 8px}
.fitem{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px;margin-bottom:9px}
.fitem.plain{border:0;margin:0;border-radius:14px 14px 0 0}
.fdate{width:46px;flex:0 0 46px;text-align:center;background:#eef6f1;border-radius:11px;padding:6px 0;color:var(--g800)}
.fdate b{display:block;font-size:17px;font-weight:800;line-height:1}
.fdate span{font-size:10px;font-weight:700;letter-spacing:.05em}
.fbody{flex:1;min-width:0}
.fbody b{display:block;font-size:14.5px;line-height:1.3}
.fbody span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.fsub{font-size:12px;color:var(--muted)}
.fcardx{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.facts{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fafdfb}

/* pills */
.fpill{display:inline-block;background:#e9eeeb;color:#4b5d53;border-radius:99px;padding:3px 10px;
  font:700 11px system-ui;white-space:nowrap}
.fpill.allotted,.fpill.submitted{background:#fbeed3;color:#8a5c07}
.fpill.accepted,.fpill.approved{background:#ddf3e6;color:#116139}
.fpill.declined,.fpill.rejected{background:#fadbd8;color:#8e1f18}
.fpill.completed,.fpill.paid{background:#d7eeed;color:#0b5450}
.fpill.gold{background:var(--gold-l);color:#7a6212}
.frow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* detail */
.fdetail{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--g600);
  border-radius:16px;padding:16px;margin-bottom:12px}
.fdetail h2{font-size:18px;line-height:1.3;margin:4px 0}
.ftag2{display:inline-block;background:var(--gold-l);color:#7a6212;border:1px solid #e8d69a;
  border-radius:6px;padding:2px 9px;font:700 11px system-ui;letter-spacing:.05em}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:8px}

/* forms & buttons */
.fbtn{display:block;width:100%;text-align:center;background:linear-gradient(180deg,var(--g600),var(--g700));
  color:#fff;border:0;border-radius:13px;padding:13px;font:700 15px system-ui;cursor:pointer;
  box-shadow:0 3px 10px -3px rgba(20,108,67,.6)}
.fbtn.ghost{background:#fff;color:var(--g800);border:1px solid var(--line);box-shadow:none}
.fbtn.gold{background:linear-gradient(180deg,#d4af37,#b8942a)}
.fbtn.sm{padding:10px;font-size:13.5px}
.fin{width:100%;border:1px solid #ccdad1;border-radius:12px;padding:12px;font:15px system-ui;
  background:#fff;color:var(--ink);margin-bottom:12px}
.fin:focus{outline:2px solid #bfe5cf;border-color:var(--g600)}
label{display:block;font-size:12px;font-weight:700;color:#41564b;margin-bottom:5px;letter-spacing:.02em}
.fchips{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto}
.fchips a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  font:600 13px system-ui;color:var(--muted);white-space:nowrap}
.fchips a.on{background:var(--g700);color:#fff;border-color:transparent}

/* notes & flashes */
.fnote{display:block;background:#f2f9f4;border:1px solid #cfe8d8;border-left:4px solid var(--g600);
  border-radius:12px;padding:12px;font-size:13px;color:#274d3a;margin-bottom:12px}
.fnote.warn{background:#fdf4e3;border-color:#f0dcb4;border-left-color:#d99a1b;color:#7a5407}
.fflash{border-radius:12px;padding:11px 13px;margin-bottom:12px;font-size:13.5px;font-weight:600}
.fflash.ok{background:#ddf3e6;color:#116139}
.fflash.err{background:#fadbd8;color:#8e1f18}

/* check-in log */
.fcheck{border-top:1px dashed var(--line);padding-top:9px;margin-top:9px;font-size:13px}
.fcheck b{display:block}
.fcheck span,.fcheck a{display:block;font-size:12px;color:var(--muted)}

/* bill calculator */
.fcalc{background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:12px;margin:6px 0 14px}
.fline{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:4px 0}
.fline.total{border-top:2px solid var(--gold);margin-top:6px;padding-top:8px;font-weight:800;font-size:16px}

/* login */
body.flogin{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:radial-gradient(900px 400px at 20% -10%,#1c7a4d55,transparent),linear-gradient(160deg,var(--g900),#0e4632)}
.fcard{background:#fff;border-radius:22px;padding:30px 24px;width:100%;max-width:400px;text-align:center;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.55)}
.fcard img{width:74px;height:74px;margin-bottom:10px}
.fcard h1{font-size:26px;color:var(--g900);letter-spacing:-.02em}
.fcard .sub{font-size:13px;color:var(--muted);margin:4px 0 20px}
.fcard label{text-align:left}
.fcard .fin{text-align:left}
.flink{display:block;margin-top:14px;font-size:13.5px;color:var(--g700);font-weight:600}
.ffoot{margin-top:16px;font-size:11.5px;color:var(--muted)}