/*
 * 1-STOP Shippers Hub — Manager PWA
 *
 * Screen markup keeps the design's own inline styles (tools/build_pages.py), so
 * at phone width every screen renders exactly as the 390 px artboard. This file
 * only adds what the canvas could not express:
 *   1. the page frame (font, base element rules from the design's <helmet>)
 *   2. the navigation drawer / rail built from the bottom tab bar
 *   3. reflow for tablet and desktop widths (container-width based)
 *   4. interaction states (hover, focus, selected, filtered) and PWA UI
 * Inline styles win over normal rules, so reflow overrides use !important.
 */

/* ---------- Font (self-hosted Manrope, same family the design loads) ---------- */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* @generated-start — design styles, one class per distinct style.
 * Written by tools/build_pages.py from the design source; do not edit by hand. */
.acc-1 { background:#e2eeff; border-radius:16px; padding:13px; border:1.5px solid #002b6a; box-shadow:0 2px 10px rgba(17,17,17,.04); }
.acc-2 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.06); box-shadow:0 2px 10px rgba(17,17,17,.04); }
.acc-head-1 { list-style:none; display:flex; align-items:center; gap:11px; cursor:pointer; }
.avatar-1 { width:26px; height:26px; border-radius:50%; background:#002b6a; display:flex; align-items:center; justify-content:center; }
.avatar-2 { width:26px; height:26px; border-radius:50%; background:#E9A23B; display:flex; align-items:center; justify-content:center; }
.avatar-3 { width:26px; height:26px; border-radius:50%; background:#C2C7C4; display:flex; align-items:center; justify-content:center; }
.avatar-4 { width:24px; height:24px; flex:none; border-radius:50%; background:#002b6a; color:#fff; font:800 11px Manrope,sans-serif; display:flex; align-items:center; justify-content:center; }
.avatar-5 { width:20px; height:20px; border-radius:50%; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; font:800 9px Manrope,sans-serif; }
.avatar-6 { width:20px; height:20px; border-radius:50%; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 9px Manrope,sans-serif; }
.avatar-7 { width:20px; height:20px; border-radius:50%; background:#F1F2EF; color:#A7ADA9; display:flex; align-items:center; justify-content:center; font:800 9px Manrope,sans-serif; }
.avatar-8 { width:20px; height:20px; border-radius:50%; background:#E9A23B; color:#fff; display:flex; align-items:center; justify-content:center; font:800 9px Manrope,sans-serif; }
.avatar-9 { width:38px; height:38px; border-radius:50%; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; border:2px solid #002b6a; }
.avatar-10 { width:38px; height:38px; border-radius:50%; background:#FDF2E2; color:#E9A23B; display:flex; align-items:center; justify-content:center; border:2px solid #E9A23B; }
.avatar-11 { width:38px; height:38px; border-radius:50%; background:#F1F2EF; color:#B5BAB7; display:flex; align-items:center; justify-content:center; border:none; }
.avatar-12 { width:19px; height:19px; flex:none; border-radius:50%; background:#fff; border:2px solid #002b6a; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.avatar-13 { width:19px; height:19px; flex:none; border-radius:50%; background:#fff; border:2px solid rgba(17,17,17,.18); box-sizing:border-box; }
.avatar-14 { width:44px; height:44px; flex:none; border-radius:50%; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; }
.avatar-15 { width:44px; height:44px; flex:none; border-radius:50%; background:#E9A23B; color:#fff; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; }
.avatar-16 { width:44px; height:44px; flex:none; border-radius:50%; background:#8B5CF6; color:#fff; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; }
.avatar-17 { width:38px; height:38px; border-radius:50%; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.block-1 { flex:1; width:2px; background:#e2eeff; margin:4px 0; }
.block-2 { flex:1; width:2px; background:#FDF2E2; margin:4px 0; }
.block-3 { width:5px; height:18px; border-radius:3px; background:#002b6a; }
.block-4 { width:1px; height:26px; background:rgba(17,17,17,.08); flex:none; }
.block-5 { height:5px; border-radius:3px; background:rgba(17,17,17,.07); margin-top:6px; overflow:hidden; }
.block-6 { width:36%; height:100%; border-radius:3px; background:#002b6a; }
.block-7 { flex:1; height:2px; background:#002b6a; margin-top:9px; }
.block-8 { flex:1; height:2px; background:rgba(17,17,17,.10); margin-top:9px; }
.block-9 { width:43%; height:100%; border-radius:3px; background:#E9A23B; }
.block-10 { width:20%; height:100%; border-radius:3px; background:#002b6a; }
.block-11 { width:100%; height:100%; border-radius:3px; background:#EF6B5B; }
.block-12 { width:8px; height:8px; border-radius:3px; background:#4C534F; flex:none; }
.block-13 { width:10px; height:10px; border-radius:3px; background:#002b6a; }
.block-14 { width:10px; height:10px; border-radius:3px; background:#B4791C; }
.block-15 { width:10px; height:10px; border-radius:3px; background:#4F55C4; }
.block-16 { width:10px; height:10px; border-radius:3px; background:#C0453A; }
.block-17 { width:10px; height:10px; border-radius:3px; background:#4C534F; }
.block-18 { flex:none; width:8px; height:2px; background:#E5E7EB; margin-top:19px; }
.block-19 { background:linear-gradient(135deg,#002b6a,#002b6a); border-radius:20px; padding:16px; margin:0 0 14px; box-shadow:0 10px 24px rgba(0,43,106,.25); }
.block-20 { background:#FDECEA; border:1px solid rgba(192,69,58,.28); border-radius:14px; padding:11px 12px; }
.block-21 { background:#FFFBF3; border:1px solid rgba(233,162,59,.3); border-radius:14px; padding:11px 12px; }
.block-22 { flex:1; background:#e2eeff; border-radius:14px; padding:11px 12px; }
.block-23 { flex:1; background:#FDF2E2; border-radius:14px; padding:11px 12px; }
.block-24 { max-width:78%; background:#002b6a; color:#fff; border:none; border-radius:16px 16px 4px 16px; padding:10px 13px; }
.box-1 { flex:1; overflow-y:auto; padding:6px 20px 0; }
.box-2 { color:#C0392B; }
.box-3 { flex:none; padding:14px 20px 0; }
.box-4 { flex:1; padding-bottom:16px; }
.box-5 { height:88px; width:auto; margin:0 0 14px; }
.box-6 { margin:42px 0 0; }
.box-7 { text-align:center; margin:16px 0 0; }
.box-8 { flex:1; overflow-y:auto; padding:8px 0 10px; }
.box-9 { padding:0 16px 14px; border-bottom:1px solid rgba(17,17,17,.06); }
.box-10 { flex:1; min-width:0; }
.box-11 { padding:0 6px; }
.box-12 { flex:1; }
.box-13 { flex:none; }
.box-14 { flex:none; text-align:center; }
.box-15 { width:46px; flex:none; }
.box-16 { text-align:center; min-width:0; }
.box-17 { margin-top:12px; padding-top:6px; border-top:1px solid rgba(255,255,255,.2); }
.box-18 { border-top:1px solid rgba(17,17,17,.07); margin-top:11px; padding-top:6px; }
.box-19 { display:none; }
.btn-1 { width:40px; height:40px; flex:none; border-radius:13px; background:#fff; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; justify-content:center; color:#16181A; }
.btn-2 { height:56px; border-radius:18px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:700 15px Manrope,sans-serif; box-shadow:0 8px 20px rgba(0,43,106,.26); }
.btn-3 { flex:1; height:56px; border-radius:18px; background:#012764; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font:700 15px Manrope,sans-serif; }
.btn-4 { flex:1; height:56px; border-radius:18px; background:#fff; border:1px solid rgba(17,17,17,.08); box-sizing:border-box; color:#6C736F; display:flex; align-items:center; justify-content:center; font:700 14px Manrope,sans-serif; }
.btn-5 { margin:18px 0 0; height:54px; width:100%; border-radius:18px; background:#012764; color:#fff; display:flex; align-items:center; justify-content:center; font:700 15px Manrope,sans-serif; box-shadow:0 8px 20px rgba(22,24,26,.22); }
.btn-6 { width:40px; height:40px; border-radius:13px; background:#fff; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; justify-content:center; color:#16181A; }
.btn-7 { margin:32px 0 0; height:56px; border-radius:18px; background:#012764; color:#fff; display:flex; align-items:center; justify-content:center; font:700 15px Manrope,sans-serif; box-shadow:0 8px 20px rgba(22,24,26,.22); }
.btn-8 { width:46px; height:46px; border-radius:14px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.btn-9 { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:#16181A; box-shadow:0 4px 14px rgba(17,17,17,.14); border:none; cursor:pointer; }
.btn-10 { width:42px; height:42px; flex:none; border-radius:13px; background:#fff; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; justify-content:center; color:#16181A; }
.btn-11 { width:42px; height:42px; flex:none; border-radius:13px; background:#fff; border:1px solid rgba(17,17,17,.06); position:relative; display:flex; align-items:center; justify-content:center; color:#16181A; }
.btn-12 { width:42px; height:42px; flex:none; border-radius:50%; background:#16181A; color:#fff; display:flex; align-items:center; justify-content:center; font:700 14px Manrope,sans-serif; text-decoration:none; }
.btn-13 { flex:1; height:38px; border-radius:12px; border:none; background:#002b6a; color:#fff; font:700 12px Manrope,sans-serif; display:flex; align-items:center; justify-content:center; }
.btn-14 { flex:1; height:38px; border-radius:12px; border:1px solid rgba(17,17,17,.08); background:#fff; color:#6C736F; font:700 12px Manrope,sans-serif; display:flex; align-items:center; justify-content:center; }
.btn-15 { flex:none; margin-left:auto; height:40px; padding:0 16px; border-radius:13px; background:#002b6a; color:#fff; display:flex; align-items:center; font:700 13px Manrope,sans-serif; }
.btn-16 { height:52px; border-radius:16px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:700 14px Manrope,sans-serif; }
.btn-17 { height:52px; border-radius:16px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:700 14px Manrope,sans-serif; margin:14px 20px 10px; }
.btn-18 { flex:1; height:44px; border-radius:12px; background:#F1F2EF; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#16181A; gap:2px; }
.btn-19 { height:56px; border-radius:18px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font:700 15px Manrope,sans-serif; }
.btn-20 { height:56px; border-radius:18px; background:#F1F2EF; color:#9AA19D; display:flex; align-items:center; justify-content:center; font:700 15px Manrope,sans-serif; }
.btn-21 { flex:1; height:36px; border:none; border-radius:11px; background:#fff; box-shadow:0 2px 6px rgba(17,17,17,.06); display:flex; align-items:center; justify-content:center; gap:6px; font:800 12px Manrope,sans-serif; color:#16181A; cursor:pointer; }
.btn-22 { flex:1; height:36px; border:none; border-radius:11px; background:transparent; box-shadow:none; display:flex; align-items:center; justify-content:center; gap:6px; font:700 12px Manrope,sans-serif; color:#87908B; cursor:pointer; }
.btn-23 { width:38px; height:38px; flex:none; border-radius:12px; background:#fff; border:1px solid rgba(17,17,17,.06); position:relative; display:flex; align-items:center; justify-content:center; color:#16181A; cursor:pointer; }
.btn-24 { width:36px; height:36px; flex:none; border-radius:11px; background:#002b6a; border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-25 { height:56px; border-radius:18px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font:700 15px Manrope,sans-serif; box-shadow:0 8px 20px rgba(0,43,106,.26); }
.btn-26 { height:50px; border-radius:18px; background:#fff; border:1px solid rgba(17,17,17,.08); box-sizing:border-box; color:#6C736F; display:flex; align-items:center; justify-content:center; font:700 14px Manrope,sans-serif; }
.card-1 { font:600 11px Manrope,sans-serif; color:#6C736F; background:#fff; border:1px solid rgba(17,17,17,.08); padding:7px 11px; border-radius:20px; }
.card-2 { background:#fff; border-radius:14px; padding:11px 13px; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; gap:10px; }
.card-3 { background:#fff; border-radius:20px; padding:20px 16px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 0 14px; }
.card-4 { background:#fff; border-radius:18px; padding:6px 14px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 14px; }
.card-5 { background:#fff; border-radius:18px; padding:16px 14px 4px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 14px; }
.card-6 { width:28px; height:28px; border-radius:8px; border:1px solid rgba(17,17,17,.08); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6C736F; }
.card-7 { flex:none; font:600 11px Manrope,sans-serif; padding:7px 13px; border-radius:20px; background:#fff; color:#6C736F; border:1px solid rgba(17,17,17,.08); }
.card-8 { background:#fff; border-radius:20px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); }
.card-9 { background:#fff; border-radius:14px; border:1px solid rgba(17,17,17,.06); padding:8px 10px; display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.card-10 { width:28px; height:28px; flex:none; border-radius:9px; border:1px solid rgba(17,17,17,.08); background:#fff; color:#6C736F; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.card-11 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; flex-direction:column; }
.card-12 { flex:none; padding:7px 13px; border-radius:18px; font:700 11.5px Manrope,sans-serif; background:#fff; color:#77807C; border:1px solid rgba(17,17,17,.06); cursor:pointer; }
.card-13 { flex:1; min-width:0; background:#fff; border:1px solid rgba(17,17,17,.06); border-radius:14px; box-shadow:0 2px 10px rgba(17,17,17,.04); padding:6px; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:minmax(56px,auto); gap:3px; }
.card-14 { display:inline-block; font:700 8px Manrope,sans-serif; background:#fff; border-radius:20px; padding:1px 6px; margin-top:4px; white-space:nowrap; }
.card-15 { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px; background:#fff; border:1px solid rgba(17,17,17,.06); border-radius:16px; padding:11px 12px; }
.card-16 { background:#fff; border-radius:18px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.card-17 { font:700 10.5px Manrope,sans-serif; color:#002b6a; background:#fff; padding:3px 10px; border-radius:20px; flex:none; }
.card-18 { background:#fff; border-radius:18px; padding:6px 14px 12px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 10px; }
.card-19 { font:700 9.5px Manrope,sans-serif; color:#C0453A; background:#fff; padding:2px 8px; border-radius:20px; }
.card-20 { background:#fff; border-radius:18px; padding:6px 14px 13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 10px; }
.card-21 { background:#fff; border-radius:18px; padding:6px 14px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 10px; }
.card-22 { background:#fff; border-radius:18px; padding:14px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; gap:8px; }
.card-23 { background:#fff; border-radius:18px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 16px; }
.card-24 { font:700 9.5px Manrope,sans-serif; color:#002b6a; background:#fff; padding:2px 8px; border-radius:20px; }
.card-25 { width:26px; height:26px; flex:none; border-radius:9px; background:#fff; color:#4C534F; display:flex; align-items:center; justify-content:center; }
.card-26 { background:#fff; border-radius:16px; padding:12px 13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.card-27 { background:#fff; border-radius:16px; padding:12px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); margin:0 0 14px; }
.card-28 { height:42px; background:#fff; border:1px solid rgba(17,17,17,.07); border-radius:13px; display:flex; align-items:center; gap:9px; padding:0 13px; margin:0 0 11px; }
.card-29 { max-width:78%; background:#fff; color:#16181A; border:1px solid rgba(17,17,17,.06); border-radius:16px 16px 16px 4px; padding:10px 13px; }
.card-30 { max-width:78%; background:#fff; color:#16181A; border:1px solid rgba(17,17,17,.06); border-radius:16px 16px 16px 4px; padding:8px; }
.card-31 { height:50px; border-radius:16px; background:#fff; border:1px solid rgba(17,17,17,.08); display:flex; align-items:center; gap:6px; padding:0 8px; margin-bottom:10px; }
.card-32 { background:#fff; border-radius:20px; padding:16px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:13px; margin:0 0 14px; }
.card-link-1 { background:#fff; border-radius:18px; padding:12px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; flex-direction:column; gap:7px; color:#16181A; }
.card-link-2 { background:#fff; border-radius:16px; padding:12px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:10px; color:#16181A; }
.card-link-3 { background:#fff; border-radius:20px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:block; color:#16181A; }
.card-link-4 { width:28px; height:28px; flex:none; border-radius:9px; background:#fff; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; justify-content:center; color:#4C534F; }
.card-link-5 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:11px; color:#16181A; }
.card-link-6 { background:#fff; border-radius:18px; padding:15px; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; gap:12px; color:#16181A; }
.card-link-7 { background:#fff; border-radius:16px; padding:12px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:11px; color:#16181A; }
.card-link-8 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; gap:10px; color:#16181A; }
.card-link-9 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; justify-content:space-between; align-items:center; color:#16181A; }
.card-link-10 { background:#fff; border-radius:16px; padding:13px; border:1px solid rgba(17,17,17,.05); box-shadow:0 2px 10px rgba(17,17,17,.04); display:flex; align-items:center; gap:11px; color:#16181A; text-decoration:none; }
.choice-1 { background:#FDF2E2; border-radius:14px; padding:13px; border:1.5px solid #E9A23B; display:flex; align-items:center; gap:10px; cursor:pointer; }
.choice-2 { background:#fff; border-radius:14px; padding:13px; border:1px solid rgba(17,17,17,.06); display:flex; align-items:center; gap:10px; cursor:pointer; }
.dot-1 { width:7px; height:7px; border-radius:50%; background:#fff; }
.dot-2 { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:#EF6B5B; border:1.5px solid #fff; }
.dot-3 { width:9px; height:9px; border-radius:50%; background:#002b6a; }
.dot-4 { width:8px; height:8px; border-radius:50%; background:#002b6a; flex:none; }
.dot-5 { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:#EF6B5B; border:1.5px solid #fff; }
.field-input-1 { border:none; background:transparent; outline:none; width:100%; font:700 13px Manrope,sans-serif; color:#16181A; }
.field-input-2 { height:48px; background:#F1F2EF; border:none; border-radius:14px; padding:0 14px; font:700 13px Manrope,sans-serif; color:#16181A; cursor:pointer; }
.field-input-3 { border:none; background:transparent; outline:none; width:100%; font:700 13px Manrope,sans-serif; color:#16181A; letter-spacing:.06em; }
.field-input-4 { border:none; background:transparent; outline:none; width:100%; font:600 14px Manrope,sans-serif; color:#16181A; }
.field-input-5 { border:none; background:transparent; outline:none; width:100%; font:600 14px Manrope,sans-serif; color:#16181A; letter-spacing:.06em; }
.field-input-6 { border:none; background:transparent; outline:none; width:100%; font:600 14.5px Manrope,sans-serif; color:#16181A; }
.field-input-7 { width:18px; height:18px; accent-color:#E9A23B; }
.field-input-8 { width:18px; height:18px; accent-color:#002b6a; }
.field-input-9 { flex:1; border:none; outline:none; background:transparent; font:600 13px Manrope,sans-serif; min-width:0; }
.grid-1 { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 6px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(17,17,17,.06); }
.grid-4 { flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:0 6px; }
.icon-1 { flex:none; margin-top:1px; }
.link-1 { font:700 12px Manrope,sans-serif; color:#002b6a; }
.link-2 { font:700 12px Manrope,sans-serif; color:#002b6a; text-decoration:none; }
.link-3 { font:600 12px Manrope,sans-serif; color:#9AA19D; text-decoration:none; }
.link-4 { display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:13px; background:#e2eeff; color:#002b6a; text-decoration:none; }
.link-5 { display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:13px; color:#4E5651; text-decoration:none; }
.link-6 { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:13px; color:#4E5651; text-decoration:none; }
.link-7 { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:13px; color:#C0392B; text-decoration:none; }
.link-8 { width:46px; height:46px; border-radius:14px; color:#8A918D; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.link-9 { width:46px; height:46px; border-radius:14px; color:#C0392B; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.link-10 { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:#002b6a; }
.link-11 { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:#A7ADA9; }
.link-12 { color:#16181A; }
.link-13 { width:34px; height:34px; flex:none; border-radius:12px; background:#F1F2EF; color:#4C534F; display:flex; align-items:center; justify-content:center; position:relative; }
.link-14 { flex:none; height:26px; box-sizing:border-box; padding:0 8px; border-radius:13px; background:#002b6a; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:4px; font:700 9.5px Manrope,sans-serif; white-space:nowrap; }
.link-15 { flex:none; font:700 11.5px Manrope,sans-serif; color:#002b6a; }
.link-16 { background:#e2eeff; border:1px solid rgba(0,43,106,.25); border-radius:10px; padding:6px 7px; min-width:0; overflow:hidden; color:#002b6a; }
.link-17 { background:#EEF0FE; border:1px solid rgba(79,85,196,.25); border-radius:10px; padding:6px 7px; min-width:0; overflow:hidden; color:#4F55C4; }
.link-18 { background:#FDF2E2; border:1px solid rgba(233,162,59,.3); border-radius:10px; padding:6px 7px; min-width:0; overflow:hidden; color:#B4791C; }
.link-19 { background:#FDECEA; border:1px solid rgba(192,69,58,.25); border-radius:10px; padding:6px 7px; min-width:0; overflow:hidden; color:#C0453A; }
.link-20 { background:#F1F2EF; border:1px solid rgba(17,17,17,.12); border-radius:10px; padding:6px 4px; min-width:0; overflow:hidden; color:#4C534F; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.link-21 { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; height:34px; border-radius:11px; background:#012764; color:#fff; font:700 11px Manrope,sans-serif; }
.link-22 { margin:2px 0 10px; background:#FDECEA; border-radius:12px; padding:9px 11px; font:700 11.5px Manrope,sans-serif; color:#C0453A; text-align:center; display:block; }
.link-23 { display:flex; align-items:center; gap:10px; background:#FAFAF8; border:1px solid rgba(17,17,17,.06); border-radius:13px; padding:9px 10px; color:#16181A; }
.link-24 { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:13px; background:#e2eeff; color:#002b6a; text-decoration:none; }
.row-1 { display:flex; align-items:center; gap:12px; padding:0 0 14px; }
.row-2 { height:48px; background:#F1F2EF; border-radius:14px; display:flex; align-items:center; padding:0 14px; }
.row-3 { display:flex; flex-wrap:wrap; gap:7px; }
.row-4 { display:inline-flex; align-items:center; gap:5px; font:700 11px Manrope,sans-serif; color:#fff; background:#002b6a; padding:7px 11px; border-radius:20px; }
.row-5 { height:48px; background:#F1F2EF; border-radius:14px; display:flex; align-items:center; gap:10px; padding:0 14px; }
.row-6 { display:flex; gap:9px; align-items:flex-start; padding-bottom:8px; }
.row-7 { width:20px; height:20px; flex:none; border-radius:6px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; }
.row-8 { width:62px; height:62px; border-radius:22px; background:#FDF2E2; color:#E9A23B; display:flex; align-items:center; justify-content:center; }
.row-9 { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(17,17,17,.06); }
.row-10 { display:flex; justify-content:space-between; gap:14px; padding:11px 0; }
.row-11 { display:flex; gap:12px; }
.row-12 { background:#e2eeff; border-radius:14px; padding:12px; margin:0 0 8px; display:flex; gap:9px; align-items:flex-start; }
.row-13 { display:flex; gap:10px; }
.row-14 { display:flex; justify-content:center; margin-top:10px; }
.row-15 { height:52px; background:#F1F2EF; border-radius:16px; display:flex; align-items:center; padding:0 16px; }
.row-16 { display:flex; justify-content:flex-end; width:100%; margin:12px 0 0; }
.row-17 { display:flex; align-items:center; gap:12px; padding:16px 0 0; }
.row-18 { height:54px; background:#F1F2EF; border-radius:16px; display:flex; align-items:center; padding:0 16px; }
.row-19 { background:#EAF1FD; border-radius:14px; padding:12px 14px; font:500 12px Manrope,sans-serif; color:#3B7DE9; display:flex; gap:8px; }
.row-20 { display:flex; align-items:center; gap:10px; }
.row-21 { width:42px; height:42px; flex:none; border-radius:14px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 14px Manrope,sans-serif; }
.row-22 { width:40px; height:40px; flex:none; border-radius:13px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; margin-bottom:6px; }
.row-23 { display:flex; align-items:center; justify-content:space-between; gap:11px; padding:0 0 14px; }
.row-24 { width:32px; height:32px; border-radius:10px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; }
.row-25 { width:32px; height:32px; border-radius:10px; background:#FDF2E2; color:#E9A23B; display:flex; align-items:center; justify-content:center; }
.row-26 { width:32px; height:32px; border-radius:10px; background:#FDF0F0; color:#EF6B5B; display:flex; align-items:center; justify-content:center; }
.row-27 { width:32px; height:32px; border-radius:10px; background:#F3EEFE; color:#8B5CF6; display:flex; align-items:center; justify-content:center; }
.row-28 { display:flex; justify-content:space-between; }
.row-29 { display:flex; gap:8px; margin:0 0 14px; }
.row-30 { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; }
.row-31 { display:flex; align-items:center; gap:8px; }
.row-32 { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 12px; }
.row-33 { display:flex; align-items:center; gap:12px; }
.row-34 { width:42px; height:42px; flex:none; border-radius:14px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; }
.row-35 { width:42px; height:42px; flex:none; border-radius:14px; background:#FDF2E2; color:#B4791C; display:flex; align-items:center; justify-content:center; font:800 13px Manrope,sans-serif; }
.row-36 { width:42px; height:42px; flex:none; border-radius:14px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.row-37 { width:42px; height:42px; flex:none; border-radius:14px; background:#FDECEA; color:#C0453A; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.row-38 { width:42px; height:42px; flex:none; border-radius:14px; background:#F1F2EF; color:#77807C; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.row-39 { width:42px; height:42px; flex:none; border-radius:14px; background:#FDF2E2; color:#B4791C; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.row-40 { width:30px; height:30px; flex:none; border-radius:10px; background:#F1F2EF; color:#4C534F; display:flex; align-items:center; justify-content:center; }
.row-41 { display:flex; align-items:flex-start; gap:10px; }
.row-42 { display:flex; align-items:center; gap:7px; }
.row-43 { position:absolute; top:-5px; right:-5px; min-width:13px; height:13px; padding:0 2px; border-radius:7px; background:#C0453A; color:#fff; font:800 8px Manrope,sans-serif; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-sizing:content-box; }
.row-44 { display:flex; align-items:center; gap:12px; margin-top:11px; background:#FAFAF8; border:1px solid rgba(17,17,17,.05); border-radius:13px; padding:9px 11px; }
.row-45 { display:flex; justify-content:space-between; align-items:baseline; }
.row-46 { display:flex; align-items:flex-start; gap:0; margin-top:11px; padding-top:11px; border-top:1px solid rgba(17,17,17,.06); }
.row-47 { display:flex; flex-wrap:nowrap; gap:5px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(17,17,17,.06); }
.row-48 { display:flex; align-items:center; gap:6px; margin-top:8px; background:#FDF2E2; border-radius:10px; padding:7px 10px; }
.row-49 { display:flex; align-items:center; gap:12px; padding:0 0 12px; }
.row-50 { display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.row-51 { display:flex; gap:7px; margin:0 0 12px; }
.row-52 { display:flex; align-items:center; gap:8px; margin:0 0 7px; }
.row-53 { display:flex; align-items:stretch; gap:8px; }
.row-54 { width:46px; flex:none; display:flex; align-items:center; font:700 10px Manrope,sans-serif; color:#4C534F; }
.row-55 { display:flex; align-items:center; gap:5px; font:700 10px Manrope,sans-serif; color:#4C534F; }
.row-56 { width:38px; height:38px; flex:none; border-radius:11px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; }
.row-57 { display:flex; align-items:flex-start; margin:0 0 22px; }
.row-58 { display:flex; align-items:center; gap:10px; padding:6px 0; }
.row-59 { display:flex; align-items:center; gap:8px; padding:10px 0 4px; }
.row-60 { display:flex; align-items:flex-start; gap:0; margin-top:8px; padding-top:11px; border-top:1px solid rgba(17,17,17,.06); }
.row-61 { display:flex; align-items:center; gap:8px; padding:10px 0 8px; }
.row-62 { display:flex; gap:8px; }
.row-63 { display:flex; align-items:center; gap:10px; padding:7px 0; }
.row-64 { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:10px; border-top:1px solid rgba(17,17,17,.07); }
.row-65 { display:flex; align-items:center; gap:10px; padding:9px 0; }
.row-66 { width:30px; height:30px; flex:none; border-radius:9px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; }
.row-67 { display:flex; align-items:center; gap:8px; padding:10px 0 2px; }
.row-68 { width:30px; height:30px; flex:none; border-radius:9px; background:#FDF2E2; color:#B4791C; display:flex; align-items:center; justify-content:center; }
.row-69 { background:#e2eeff; border-radius:18px; padding:16px; margin:0 0 16px; display:flex; align-items:center; gap:12px; }
.row-70 { width:38px; height:38px; flex:none; border-radius:11px; background:#FDF0F0; color:#EF6B5B; display:flex; align-items:center; justify-content:center; }
.row-71 { width:38px; height:38px; flex:none; border-radius:11px; background:#FDF2E2; color:#E9A23B; display:flex; align-items:center; justify-content:center; }
.row-72 { width:38px; height:38px; flex:none; border-radius:11px; background:#F3EEFE; color:#8B5CF6; display:flex; align-items:center; justify-content:center; }
.row-73 { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.row-74 { width:26px; height:26px; flex:none; border-radius:9px; background:#F1F2EF; color:#4C534F; display:flex; align-items:center; justify-content:center; }
.row-75 { width:42px; height:42px; flex:none; border-radius:12px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; }
.row-76 { width:42px; height:42px; flex:none; border-radius:12px; background:#FDF2E2; color:#E9A23B; display:flex; align-items:center; justify-content:center; }
.row-77 { width:42px; height:42px; flex:none; border-radius:12px; background:#F3EEFE; color:#8B5CF6; display:flex; align-items:center; justify-content:center; }
.row-78 { background:#e2eeff; border-radius:16px; padding:13px; margin-top:14px; display:flex; align-items:center; gap:10px; }
.row-79 { width:34px; height:34px; flex:none; border-radius:11px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; }
.row-80 { display:flex; align-items:center; gap:6px; }
.row-81 { width:34px; height:34px; flex:none; border-radius:11px; background:#F1F2EF; color:#6C736F; display:flex; align-items:center; justify-content:center; }
.row-82 { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid rgba(17,17,17,.06); }
.row-83 { background:#FDF0F0; border-radius:14px; padding:12px; display:flex; gap:8px; align-items:flex-start; }
.row-84 { display:flex; gap:4px; background:#F1F2EF; border-radius:14px; padding:4px; margin:0 0 12px; }
.row-85 { display:flex; align-items:center; gap:8px; margin:0 0 9px; }
.row-86 { display:inline-flex; margin-top:6px; font:700 9px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:3px 7px; border-radius:20px; }
.row-87 { display:inline-flex; margin-top:6px; font:700 9px Manrope,sans-serif; color:#B4791C; background:#FDF2E2; padding:3px 7px; border-radius:20px; }
.row-88 { display:inline-flex; margin-top:6px; font:700 9px Manrope,sans-serif; color:#6D45C9; background:#F3EEFE; padding:3px 7px; border-radius:20px; }
.row-89 { display:flex; align-items:center; gap:10px; padding:0 0 14px; }
.row-90 { display:flex; justify-content:center; }
.row-91 { display:flex; justify-content:flex-start; }
.row-92 { display:flex; justify-content:flex-end; }
.row-93 { width:220px; height:140px; border-radius:12px; background:#e2eeff; display:flex; align-items:center; justify-content:center; color:#002b6a; }
.row-94 { max-width:78%; background:#002b6a; color:#fff; border:none; border-radius:16px 16px 4px 16px; padding:10px 13px; display:flex; align-items:center; gap:10px; }
.row-95 { width:36px; height:36px; flex:none; border-radius:10px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.row-96 { width:34px; height:34px; flex:none; border-radius:10px; background:#F1F2EF; border:none; color:#6C736F; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.row-97 { width:34px; height:34px; flex:none; border-radius:10px; background:#e2eeff; color:#002b6a; display:flex; align-items:center; justify-content:center; }
.row-98 { width:34px; height:34px; flex:none; border-radius:10px; background:#FDF0F0; color:#EF6B5B; display:flex; align-items:center; justify-content:center; }
.row-99 { width:58px; height:58px; flex:none; border-radius:20px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 19px Manrope,sans-serif; }
.row-100 { display:inline-flex; margin-top:7px; font:700 9.5px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:3px 8px; border-radius:20px; }
.row-101 { width:76px; height:76px; border-radius:26px; background:#002b6a; color:#fff; display:flex; align-items:center; justify-content:center; font:800 24px Manrope,sans-serif; }
.screen-bg-1 { background:#FAF4E3; }
.stack-1 { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.stack-2 { display:flex; flex-direction:column; gap:6px; }
.stack-3 { display:flex; flex-direction:column; gap:10px; margin:0 0 10px; }
.stack-4 { display:flex; flex-direction:column; gap:7px; margin:0 0 8px; }
.stack-5 { display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.stack-6 { display:flex; flex-direction:column; align-items:center; flex:none; }
.stack-7 { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 8px; text-align:center; }
.stack-8 { display:flex; flex-direction:column; gap:14px; margin:28px 0 0; width:100%; text-align:left; }
.stack-9 { display:flex; flex-direction:column; gap:7px; }
.stack-10 { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:0 28px; }
.stack-11 { display:flex; flex-direction:column; gap:16px; margin:32px 0 0; }
.stack-12 { display:flex; flex-direction:column; gap:8px; }
.stack-13 { width:296px; flex:none; background:#fff; border-right:1px solid rgba(17,17,17,.06); display:flex; flex-direction:column; min-height:0; }
.stack-14 { display:flex; flex-direction:column; gap:2px; }
.stack-15 { flex:none; padding:11px 16px; border-top:1px solid rgba(17,17,17,.06); display:flex; flex-direction:column; gap:2px; }
.stack-16 { width:70px; flex:none; background:#fff; border-right:1px solid rgba(17,17,17,.06); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:6px; }
.stack-17 { display:flex; flex-direction:column; gap:9px; }
.stack-18 { display:flex; flex-direction:column; align-items:center; gap:4px; width:48px; flex:none; }
.stack-19 { display:flex; flex-direction:column; align-items:center; flex:1; min-width:0; }
.stack-20 { display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; flex:none; }
.stack-21 { display:flex; flex-direction:column; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid rgba(17,17,17,.06); }
.stack-22 { display:flex; flex-direction:column; gap:0; margin-top:10px; padding-top:6px; border-top:1px solid rgba(17,17,17,.07); }
.stack-23 { display:flex; flex-direction:column; gap:9px; margin:0 0 12px; }
.stack-24 { display:flex; flex-direction:column; gap:10px; }
.stack-25 { flex:none; padding:14px 20px 0; display:flex; flex-direction:column; gap:10px; }
.stack-26 { display:flex; flex-direction:column; gap:9px; margin:0 0 16px; }
.stack-27 { display:flex; flex-direction:column; gap:9px; padding-bottom:14px; }
.stack-28 { display:flex; flex-direction:column; gap:10px; padding-bottom:12px; }
.stack-29 { display:flex; flex-direction:column; gap:9px; margin:0 0 18px; }
.stack-30 { display:flex; flex-direction:column; gap:9px; padding-bottom:6px; }
.stack-31 { display:flex; flex-direction:column; align-items:center; gap:9px; margin:0 0 16px; }
.tabbar-bar-1 { flex:none; background:#fff; border-top:1px solid rgba(17,17,17,.06); padding:10px 14px 0; }
.text-1 { flex:1; font:800 18px Manrope,sans-serif; letter-spacing:-.02em; }
.text-2 { background:#FDF2E2; border-radius:14px; padding:12px; margin:0 0 14px; font:600 11px Manrope,sans-serif; color:#B4791C; }
.text-3 { font:600 11px Manrope,sans-serif; color:#9AA19D; letter-spacing:.06em; margin:0 0 8px; }
.text-4 { font:600 12px Manrope,sans-serif; color:#6C736F; }
.text-5 { font:500 10.5px/1.5 Manrope,sans-serif; color:#87908B; margin:0 0 14px; }
.text-6 { flex:1; font:700 12px Manrope,sans-serif; }
.text-7 { font:600 10px Manrope,sans-serif; color:#002b6a; }
.text-8 { font:500 11px/1.5 Manrope,sans-serif; color:#6C736F; }
.text-9 { font:800 17px Manrope,sans-serif; letter-spacing:-.02em; margin-top:12px; }
.text-10 { font:500 12px/1.55 Manrope,sans-serif; color:#87908B; margin-top:6px; }
.text-11 { margin-top:11px; font:700 10.5px Manrope,sans-serif; color:#B4791C; background:#FDF2E2; padding:5px 12px; border-radius:20px; }
.text-12 { font:600 11.5px Manrope,sans-serif; color:#87908B; flex:none; }
.text-13 { font:800 12px Manrope,sans-serif; text-align:right; }
.text-14 { font:800 12.5px Manrope,sans-serif; color:#16181A; }
.text-15 { font:500 10.5px/1.5 Manrope,sans-serif; color:#87908B; margin-top:3px; }
.text-16 { font:800 12.5px Manrope,sans-serif; color:#A7ADA9; }
.text-17 { font:600 11px/1.5 Manrope,sans-serif; color:#002b6a; }
.text-18 { font:600 11.5px Manrope,sans-serif; color:#9AA19D; letter-spacing:.1em; }
.text-19 { font:800 28px Manrope,sans-serif; letter-spacing:-.03em; margin-top:44px; }
.text-20 { font:700 12px Manrope,sans-serif; letter-spacing:.06em; color:#fff; background:#00245f; padding:7px 16px; border-radius:999px; }
.text-21 { text-align:center; margin-top:16px; font:500 12px Manrope,sans-serif; color:#87908B; }
.text-22 { font:800 26px/1.2 Manrope,sans-serif; letter-spacing:-.02em; }
.text-23 { font:500 13.5px Manrope,sans-serif; color:#77807C; margin-top:8px; }
.text-24 { font:800 13.5px Manrope,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-25 { font:600 10.5px Manrope,sans-serif; color:#87908B; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-26 { font:600 10px Manrope,sans-serif; color:#A7ADA9; margin-top:9px; }
.text-27 { font:600 10px Manrope,sans-serif; color:#A7ADA9; letter-spacing:.09em; margin:14px 0 6px; padding:0 11px; }
.text-28 { flex:1; font:800 12.5px Manrope,sans-serif; }
.text-29 { flex:1; font:600 12.5px Manrope,sans-serif; }
.text-30 { font:600 12px Manrope,sans-serif; }
.text-31 { font:700 12px Manrope,sans-serif; }
.text-32 { font:500 12.5px Manrope,sans-serif; color:#87908B; }
.text-33 { font:800 21px Manrope,sans-serif; letter-spacing:-.03em; margin-top:2px; }
.text-34 { font:700 13px Manrope,sans-serif; color:#6C736F; margin:0 0 8px; }
.text-35 { font:800 19px Manrope,sans-serif; letter-spacing:-.02em; }
.text-36 { font:600 10.5px Manrope,sans-serif; color:#87908B; margin-top:1px; }
.text-37 { flex:1; font:700 12.5px Manrope,sans-serif; }
.text-38 { font:700 10px Manrope,sans-serif; }
.text-39 { font:600 10px Manrope,sans-serif; }
.text-40 { font:800 18px Manrope,sans-serif; letter-spacing:-.02em; }
.text-41 { font:700 12.5px Manrope,sans-serif; }
.text-42 { flex:none; font:700 11px Manrope,sans-serif; padding:7px 13px; border-radius:20px; background:#012764; color:#fff; border:1px solid #16181A; }
.text-43 { display:block; font:700 15px Manrope,sans-serif; }
.text-44 { display:block; font:500 12px Manrope,sans-serif; color:#87908B; margin-top:3px; }
.text-45 { font:700 10.5px Manrope,sans-serif; padding:5px 11px; border-radius:20px; background:#e2eeff; color:#002b6a; }
.text-46 { display:block; font:600 10px Manrope,sans-serif; color:#9AA19D; }
.text-47 { display:block; font:700 12.5px Manrope,sans-serif; margin-top:4px; }
.text-48 { display:block; font:700 12.5px Manrope,sans-serif; margin-top:4px; color:#002b6a; }
.text-49 { font:700 10.5px Manrope,sans-serif; padding:5px 11px; border-radius:20px; background:#FDF2E2; color:#B4791C; }
.text-50 { display:block; font:700 12.5px Manrope,sans-serif; margin-top:4px; color:#B4791C; }
.text-51 { font:700 10.5px Manrope,sans-serif; padding:5px 11px; border-radius:20px; background:#FDECEA; color:#C0453A; }
.text-52 { display:block; font:700 12.5px Manrope,sans-serif; margin-top:4px; color:#C0453A; }
.text-53 { font:700 12px Manrope,sans-serif; color:#6C736F; margin:0 0 10px; }
.text-54 { display:block; font:700 8.5px Manrope,sans-serif; color:#9AA19D; letter-spacing:.06em; }
.text-55 { display:block; font:700 12px Manrope,sans-serif; margin-top:2px; }
.text-56 { font:800 14px Manrope,sans-serif; letter-spacing:-.01em; }
.text-57 { font:700 9.5px Manrope,sans-serif; padding:3px 8px; border-radius:10px; background:#e2eeff; color:#002b6a; white-space:nowrap; }
.text-58 { font:600 11px Manrope,sans-serif; color:#6C736F; margin-top:4px; }
.text-59 { font:600 10px Manrope,sans-serif; color:#9AA19D; margin-top:2px; }
.text-60 { font:800 20px Manrope,sans-serif; line-height:1; color:#002b6a; }
.text-61 { font:700 8.5px Manrope,sans-serif; color:#9AA19D; margin-top:3px; letter-spacing:.04em; }
.text-62 { font:700 8.5px Manrope,sans-serif; color:#9AA19D; letter-spacing:.04em; }
.text-63 { font:700 10.5px Manrope,sans-serif; }
.text-64 { font:600 8.5px Manrope,sans-serif; color:#9AA19D; text-align:center; }
.text-65 { font:700 8.5px Manrope,sans-serif; color:#002b6a; text-align:center; }
.text-66 { font:700 9.5px Manrope,sans-serif; padding:3px 8px; border-radius:10px; background:#FDF2E2; color:#B4791C; white-space:nowrap; }
.text-67 { font:800 20px Manrope,sans-serif; line-height:1; color:#B4791C; }
.text-68 { font:700 8.5px Manrope,sans-serif; color:#B4791C; text-align:center; }
.text-69 { font:700 9.5px Manrope,sans-serif; color:#B4791C; }
.text-70 { font:700 9.5px Manrope,sans-serif; padding:3px 8px; border-radius:10px; background:#FDECEA; color:#C0453A; white-space:nowrap; }
.text-71 { font:800 20px Manrope,sans-serif; line-height:1; color:#C0453A; }
.text-72 { flex:1; text-align:center; font:800 14px Manrope,sans-serif; letter-spacing:-.01em; }
.text-73 { flex:none; padding:7px 13px; border-radius:18px; font:700 11.5px Manrope,sans-serif; background:#012764; color:#fff; border:none; cursor:pointer; }
.text-74 { font:700 8px Manrope,sans-serif; color:#9AA19D; letter-spacing:.04em; }
.text-75 { font:800 11px Manrope,sans-serif; color:#16181A; margin-top:1px; }
.text-76 { font:700 8px Manrope,sans-serif; color:#002b6a; letter-spacing:.04em; }
.text-77 { font:800 11px Manrope,sans-serif; color:#002b6a; margin-top:1px; }
.text-78 { display:block; font:800 10px Manrope,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-79 { display:block; font:600 8.5px Manrope,sans-serif; opacity:.85; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-80 { font:800 8px Manrope,sans-serif; }
.text-81 { font:700 7.5px Manrope,sans-serif; opacity:.75; }
.text-82 { font:700 11px ui-monospace,Menlo,monospace; color:#002b6a; }
.text-83 { font:700 12.5px Manrope,sans-serif; margin-top:1px; }
.text-84 { font:800 10px Manrope,sans-serif; color:#16181A; margin-top:6px; text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; }
.text-85 { font:600 10px Manrope,sans-serif; color:#9AA19D; margin-top:6px; text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; }
.text-86 { font:700 13px Manrope,sans-serif; color:#6C736F; margin:0 0 10px; }
.text-87 { font:800 13px Manrope,sans-serif; color:#B4791C; }
.text-88 { font:700 13px Manrope,sans-serif; }
.text-89 { font:600 11px Manrope,sans-serif; color:rgba(255,255,255,.8); }
.text-90 { font:800 17px Manrope,sans-serif; color:#fff; margin-top:4px; }
.text-91 { flex:1; font:600 11px Manrope,sans-serif; color:rgba(255,255,255,.72); }
.text-92 { font:800 11.5px Manrope,sans-serif; color:#fff; text-align:right; }
.text-93 { flex:1; font:700 11px Manrope,sans-serif; color:#9AA19D; letter-spacing:.05em; }
.text-94 { font:700 10px Manrope,sans-serif; color:#B4791C; background:#FDF2E2; padding:3px 9px; border-radius:20px; }
.text-95 { flex:1; font:800 11.5px Manrope,sans-serif; color:#16181A; }
.text-96 { font:500 10.5px Manrope,sans-serif; color:#87908B; margin-top:4px; }
.text-97 { font:700 10px Manrope,sans-serif; color:#002b6a; background:#e2eeff; border-radius:10px; padding:6px 9px; margin-top:8px; }
.text-98 { font:700 9.5px Manrope,sans-serif; color:#B4791C; background:#FDF2E2; padding:2px 8px; border-radius:20px; }
.text-99 { font:700 9.5px Manrope,sans-serif; color:#002b6a; letter-spacing:.05em; }
.text-100 { font:800 16px Manrope,sans-serif; color:#002b6a; margin-top:4px; }
.text-101 { font:600 10px Manrope,sans-serif; color:#002b6a; margin-top:2px; }
.text-102 { font:700 9.5px Manrope,sans-serif; color:#B4791C; letter-spacing:.05em; }
.text-103 { font:800 16px Manrope,sans-serif; color:#B4791C; margin-top:4px; }
.text-104 { font:600 10px Manrope,sans-serif; color:#B4791C; margin-top:2px; }
.text-105 { flex:1; font:600 11px Manrope,sans-serif; color:#87908B; }
.text-106 { font:800 11.5px Manrope,sans-serif; }
.text-107 { font:700 9.5px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:2px 8px; border-radius:20px; }
.text-108 { flex:1; font:800 12px Manrope,sans-serif; }
.text-109 { font:800 16px Manrope,sans-serif; color:#002b6a; }
.text-110 { font:700 11px Manrope,sans-serif; color:#9AA19D; letter-spacing:.05em; padding:10px 0 2px; }
.text-111 { flex:1; font:600 11.5px Manrope,sans-serif; color:#87908B; }
.text-112 { font:800 12.5px Manrope,sans-serif; text-align:right; }
.text-113 { font:700 10px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:3px 9px; border-radius:20px; }
.text-114 { font:800 12.5px Manrope,sans-serif; text-align:right; color:#B4791C; }
.text-115 { margin:2px 0 10px; background:#FDF2E2; border-radius:12px; padding:9px 11px; font:700 11.5px Manrope,sans-serif; color:#B4791C; text-align:center; }
.text-116 { font:800 12.5px Manrope,sans-serif; text-align:right; color:#C0453A; }
.text-117 { font:800 12.5px Manrope,sans-serif; text-align:right; color:#002b6a; }
.text-118 { margin:2px 0 10px; background:#e2eeff; border-radius:12px; padding:9px 11px; font:700 11.5px Manrope,sans-serif; color:#002b6a; text-align:center; }
.text-119 { font:700 10px Manrope,sans-serif; color:#4C534F; background:#F1F2EF; padding:3px 9px; border-radius:20px; }
.text-120 { display:block; font:800 11.5px Manrope,sans-serif; }
.text-121 { display:block; font:500 10px Manrope,sans-serif; color:#87908B; margin-top:2px; }
.text-122 { font:700 9px Manrope,sans-serif; }
.text-123 { font:800 14px Manrope,sans-serif; color:#002b6a; margin-top:2px; }
.text-124 { font:800 13px Manrope,sans-serif; }
.text-125 { font:500 11px Manrope,sans-serif; color:#87908B; margin-top:2px; }
.text-126 { flex:1; font:700 12px Manrope,sans-serif; color:#6C736F; }
.text-127 { font:800 13px Manrope,sans-serif; color:#002b6a; }
.text-128 { font:500 10.5px Manrope,sans-serif; color:#87908B; margin-top:3px; }
.text-129 { font:700 10px Manrope,sans-serif; color:#9AA19D; letter-spacing:.05em; padding:4px 0 2px; }
.text-130 { font:800 11.5px Manrope,sans-serif; text-align:right; }
.text-131 { font:700 10px Manrope,sans-serif; color:#9AA19D; letter-spacing:.05em; padding:8px 0 2px; }
.text-132 { font:800 13px Manrope,sans-serif; color:#16181A; }
.text-133 { font:700 11px Manrope,sans-serif; color:#9AA19D; letter-spacing:.05em; }
.text-134 { font:800 12.5px Manrope,sans-serif; margin-top:3px; }
.text-135 { font:500 12.5px Manrope,sans-serif; color:#87908B; margin:0 0 16px; }
.text-136 { font:800 14px Manrope,sans-serif; }
.text-137 { font:500 11px Manrope,sans-serif; color:#87908B; margin-top:3px; }
.text-138 { font:800 12.5px Manrope,sans-serif; color:#002b6a; }
.text-139 { font:700 9.5px Manrope,sans-serif; color:#C0392B; background:#FDF0F0; padding:2px 8px; border-radius:20px; }
.text-140 { background:#e2eeff; border-radius:14px; padding:12px; font:600 11px Manrope,sans-serif; color:#002b6a; }
.text-141 { font:700 10.5px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:3px 9px; border-radius:20px; }
.text-142 { font:700 10.5px Manrope,sans-serif; color:#C0392B; background:#FDF0F0; padding:3px 9px; border-radius:20px; }
.text-143 { font:600 11px Manrope,sans-serif; color:#C0392B; }
.text-144 { font:700 9.5px Manrope,sans-serif; color:#002b6a; background:#e2eeff; padding:4px 9px; border-radius:20px; flex:none; }
.text-145 { font:800 9px Manrope,sans-serif; color:#fff; background:#002b6a; padding:2px 6px; border-radius:20px; }
.text-146 { font:800 9px Manrope,sans-serif; color:#6C736F; background:#E4E6E1; padding:2px 6px; border-radius:20px; }
.text-147 { font:600 12px Manrope,sans-serif; color:#A7ADA9; }
.text-148 { flex:none; font:700 11px Manrope,sans-serif; padding:7px 13px; border-radius:20px; background:#012764; color:#fff; }
.text-149 { font:600 10px Manrope,sans-serif; color:#87908B; }
.text-150 { flex:1; min-width:0; font:800 13px Manrope,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-151 { font:500 10px Manrope,sans-serif; color:#9AA19D; flex:none; }
.text-152 { font:500 11px Manrope,sans-serif; color:#87908B; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-153 { font:500 10.5px Manrope,sans-serif; color:#002b6a; }
.text-154 { font:600 10px Manrope,sans-serif; color:#87908B; background:#F1F2EF; padding:5px 12px; border-radius:20px; }
.text-155 { font:500 12.5px/1.4 Manrope,sans-serif; }
.text-156 { font:500 9.5px Manrope,sans-serif; color:#9AA19D; margin-top:4px; }
.text-157 { font:500 9.5px Manrope,sans-serif; color:rgba(255,255,255,.7); margin-top:4px; }
.text-158 { font:500 11px Manrope,sans-serif; color:#87908B; margin:6px 4px 2px; }
.text-159 { font:500 9.5px Manrope,sans-serif; color:#9AA19D; margin:0 4px; }
.text-160 { font:500 9.5px Manrope,sans-serif; color:rgba(255,255,255,.75); margin-top:2px; }
.text-161 { font:800 12.5px Manrope,sans-serif; }
.text-162 { font:500 10.5px Manrope,sans-serif; color:#87908B; margin-top:2px; }
.text-163 { font:800 13px Manrope,sans-serif; color:#E9A23B; }
.text-164 { font:800 12px Manrope,sans-serif; }
.text-165 { font:800 16px Manrope,sans-serif; letter-spacing:-.02em; }
.text-166 { font:600 11px Manrope,sans-serif; color:#87908B; margin-top:3px; }
.text-167 { font:700 11.5px Manrope,sans-serif; color:#002b6a; }
.text-168 { background:#FDF2E2; border-radius:14px; padding:12px; margin:0 0 6px; font:600 11px Manrope,sans-serif; color:#B4791C; }
/* @generated-end */

/* ---------- Tokens (values taken from the design) ---------- */
:root {
  --navy: #002b6a;
  --navy-deep: #012764;
  --navy-tint: #e2eeff;
  --ink: #16181A;
  --muted: #6C736F;
  --soft: #87908B;
  --faint: #A7ADA9;
  --line: rgba(17, 17, 17, .06);
  --field: #F1F2EF;
  --cream: #FAF4E3;
  --red: #C0392B;
  --amber-bg: #FDF2E2;
  --amber: #B4791C;
  --card-shadow: 0 2px 10px rgba(17, 17, 17, .04);
  --font: Manrope, -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --gutter: 20px;
  --gutter-wide: 28px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* ---------- Base (the design's <helmet> rules) ---------- */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* :where() keeps these at zero specificity: the design's own classes (which
 * were inline styles) must always win, e.g. white text on a navy button. */
:where(a) { color: #002b6a; text-decoration: none; }
:where(a:hover) { color: #002b6a; }
input { font-family: inherit; }
input::placeholder { color: #A2A9A5; }
button, select, textarea { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 12px;
  font: 700 13px var(--font);
}
.skip-link:focus { top: calc(10px + var(--safe-top)); color: #fff; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.screen-body :focus-visible, .screen-foot :focus-visible, .sidenav :focus-visible {
  outline: 2.5px solid var(--navy); outline-offset: 2px;
}
/* Field boxes (inputs, selects): white with a border so they stand out on the
 * cream screen background (the design's grey #F1F2EF blended into it). */
.field-box {
  background: #fff !important;
  border: 1px solid rgba(17, 17, 17, .14) !important;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .field-box:hover { border-color: rgba(17, 17, 17, .28) !important; } }
.field-box.field-focus, select.field-box:focus-visible, .select-btn.field-box:focus-visible {
  border-color: var(--navy) !important; box-shadow: 0 0 0 1px var(--navy); outline: none;
}

/* Text fields: one focus ring, drawn on the design's grey field box (js/app.js
 * adds .field-focus). The input inside it never draws its own outline. */
.field-focus { box-shadow: 0 0 0 2px var(--navy); }
.screen input:focus, .screen input:focus-visible,
.screen textarea:focus, .screen textarea:focus-visible { outline: none; box-shadow: none; }
.screen select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--navy); }

/* ---------- App frame ---------- */
.app { display: flex; min-height: 100%; }
.screen {
  flex: 1;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  outline: none;
  container-type: inline-size;
  container-name: screen;
}
/* the artboard's 54 px mock status bar is gone: keep the same breathing room */
.screen-body {
  padding-top: max(14px, calc(var(--safe-top) + 8px)) !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 24px;
}
.screen-foot { flex: none; display: flex; flex-direction: column; }
.screen-foot:empty { display: none; }
/* replaces the design's home-indicator pill row (30 px) */
.home-safe { height: max(14px, var(--safe-bottom)); flex: none; }
.tabbar .home-safe, .tabbar + .home-safe { height: max(12px, var(--safe-bottom)); }

/* horizontal chip rows scroll inside themselves, never the page */
.screen-body .hscroll { scrollbar-width: none; overscroll-behavior-x: contain; }
.screen-body .hscroll::-webkit-scrollbar { display: none; }

/* ---------- Interaction states ---------- */
.screen a[href], .screen button, .screen summary, .screen label, .chip, .sidenav-item {
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease;
}
.screen a[href]:active, .screen button:not(:disabled):active, .chip:active { transform: scale(.98); }
@media (hover: hover) {
  .card-list > a[href]:hover, .kpi-tile:hover, .screen-body .card-link:hover {
    box-shadow: 0 6px 18px rgba(17, 17, 17, .08) !important;
  }
  .screen-foot .btn-primary:hover { filter: brightness(1.15); }
  .chip:not(.is-active):hover { color: var(--ink) !important; border-color: rgba(17, 17, 17, .18) !important; }
}
.screen summary { list-style: none; }
.screen summary::-webkit-details-marker { display: none; }

/* chips used as filters (spans in the design) */
.chip { cursor: pointer; user-select: none; }

/* items hidden by a filter, search or week */
.is-filtered-out { display: none !important; }
.empty-note {
  font: 600 12px var(--font); color: var(--soft); text-align: center;
  background: #fff; border: 1px dashed rgba(17, 17, 17, .14); border-radius: 16px; padding: 18px 14px;
}

/* the design's checkbox square, unchecked state */
.check-box { cursor: pointer; }
.check-box[aria-checked="false"] { background: #fff !important; border: 2px solid rgba(17, 17, 17, .18); box-sizing: border-box; }
.check-box[aria-checked="false"] svg { visibility: hidden; }

/* links/controls whose design target is not in the available source */
[data-missing] { cursor: pointer; }

/* ---------- Side navigation: the design's NAV artboard ----------
 * .drawer-panel = the 296 px drawer, .rail-panel = the 70 px collapsed rail.
 * Phones: drawer slides over the screen. Tablets: rail always visible, the menu
 * button opens the drawer over it. Desktop: drawer docked, the menu button
 * collapses it to the rail. */
.sidenav {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  box-sizing: border-box;
  background: #fff;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.sidenav .drawer-panel { height: 100%; }
.sidenav .rail-panel { display: none !important; height: 100%; box-sizing: border-box; overflow-y: auto; }
.nav-open .sidenav { transform: none; visibility: visible; transition: transform .25s ease; }
/* the dimmed area beside the drawer, with the design's close button */
.sidenav-backdrop {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(17, 17, 17, .46);
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: calc(12px + var(--safe-top)) 12px 0;
  opacity: 0; transition: opacity .2s ease;
}
.nav-open .sidenav-backdrop { opacity: 1; }
.sidenav a[href]:not([aria-current]):hover { background: var(--field); }
body.nav-open { overflow: hidden; }

@media (min-width: 768px) {
  .signed-in .app { padding-left: 70px; }
  .signed-in .sidenav { transform: none; visibility: visible; transition: none; }
  .signed-in .sidenav .drawer-panel { display: none !important; }
  .signed-in .sidenav .rail-panel { display: flex !important; }
  .signed-in.nav-open .sidenav { box-shadow: 0 10px 34px rgba(17, 17, 17, .18); }
  .signed-in.nav-open .sidenav .drawer-panel { display: flex !important; }
  .signed-in.nav-open .sidenav .rail-panel { display: none !important; }
  body { --nav-w: 70px; }
}

@media (min-width: 1024px) {
  .signed-in .app { padding-left: 296px; }
  .signed-in .sidenav .drawer-panel { display: flex !important; }
  .signed-in .sidenav .rail-panel { display: none !important; }
  .signed-in .sidenav-backdrop { display: none !important; }
  .signed-in.nav-open .sidenav { box-shadow: none; }
  body.signed-in.nav-open { overflow: auto; }
  body { --nav-w: 296px; }
  /* collapsed (menu button) */
  .signed-in.nav-collapsed .app { padding-left: 70px; }
  .signed-in.nav-collapsed .sidenav .drawer-panel { display: none !important; }
  .signed-in.nav-collapsed .sidenav .rail-panel { display: flex !important; }
  body.nav-collapsed { --nav-w: 70px; }
}

/* Bottom tab bar on tablet and desktop (≥ 680 px): it floats centred above
 * the content as a rounded frosted-glass pill; content scrolls behind it. */
@media (min-width: 680px) {
  .tabbar {
    position: fixed; z-index: 30;
    left: calc(var(--nav-w, 0px) + (100vw - var(--nav-w, 0px)) / 2);
    bottom: calc(16px + var(--safe-bottom));
    transform: translateX(-50%);
    width: min(520px, calc(100vw - var(--nav-w, 0px) - 48px));
    box-sizing: border-box;
    padding: 7px 8px !important;
    border: 1px solid rgba(17, 17, 17, .07) !important;
    border-radius: 22px;
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
  }
  .tabbar .home-safe { display: none; }
  .tabbar a { padding: 7px 0; border-radius: 15px; }
  .tabbar a.tab-on { background: rgba(226, 238, 255, .95); }
  .tabbar a:not(.tab-on):hover { color: #6C736F !important; }
  .has-tabbar .screen-body { padding-bottom: calc(96px + var(--safe-bottom)) !important; scroll-padding-bottom: 110px; }
  .has-tabbar .screen-foot > .update-cta { margin-bottom: calc(92px + var(--safe-bottom)) !important; }
  .has-tabbar .screen-foot > .home-safe { display: none; }
  .has-tabbar .toast-host { bottom: calc(96px + var(--safe-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 680px) { .tabbar { background: rgba(255, 255, 255, .96) !important; } }
}

/* ---------- Reflow for wider screens (by the screen's own width) ----------
 * Content uses the full width beside the menu, with a side gutter. Lists
 * become grids, forms and detail screens put their sections side by side. */
@container screen (min-width: 600px) {
  .screen-body, .screen-foot > div:not(.home-safe):not(.tabbar) {
    padding-left: var(--gutter-wide) !important;
    padding-right: var(--gutter-wide) !important;
  }
  .screen-body { padding-top: max(24px, calc(var(--safe-top) + 16px)) !important; }

  /* card stacks become grids */
  .card-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
  }
  /* dashboard KPI rows: 4 across */
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@container screen (min-width: 1200px) {
  .screen-body, .screen-foot > div:not(.home-safe):not(.tabbar) {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* on phones the create button stays in the footer (design) */
.screen .title-action { display: none; }

/* ≥ 680 px: every action button is right-aligned; main actions are 360 px */
@container screen (min-width: 680px) {
  .screen-foot .foot-btn {
    width: 360px; max-width: 100%; box-sizing: border-box; align-self: flex-end; margin-left: auto !important;
  }
  .screen-foot > .foot-stack { align-items: flex-end; }
  .screen-foot .foot-pair { justify-content: flex-end; }
  .screen-foot .foot-pair > a { flex: 0 1 260px !important; }
  /* a button placed straight in the footer (Update Status): right edge on the gutter */
  .screen-foot > a.update-cta {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: 28px !important;
  }
  /* list screens: the create button moves into the title row as a compact button */
  .screen .foot-action { display: none; }
  .screen .title-action { display: flex; }
  /* large centred avatar block at the top of a form: compact avatar + label row */
  .avatar-block { flex-direction: row !important; justify-content: flex-start; gap: 14px !important; }
  .avatar-block > div:first-child { width: 56px !important; height: 56px !important; border-radius: 19px !important; font-size: 18px !important; }
  /* Update Storage Status: the three status choices sit in one row */
  .choice-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container screen (min-width: 1200px) {
  .screen-foot > a.update-cta { margin-right: 40px !important; }
}

/* Login stays a centred column: a sign-in form across the whole width is hard to use */
@container screen (min-width: 600px) {
  [data-screen="s1"] .screen-body, [data-screen="forgot"] .screen-body {
    padding-left: max(28px, calc((100% - 480px) / 2)) !important;
    padding-right: max(28px, calc((100% - 480px) / 2)) !important;
  }
}

/* Notifications & Ratings: a list view at every width (one full-width row per item) */
@container screen (min-width: 600px) {
  [data-screen="s19"] .card-list { display: flex !important; flex-direction: column; align-items: stretch; }
}

/* ≥ 760 px: label + field pairs in two columns (three on wide screens);
 * chips, document rows and notes stay full width */
@container screen (min-width: 760px) {
  .field-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@container screen (min-width: 1200px) {
  [data-screen="profedit"] .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ≥ 900 px: detail screens put their sections side by side */
@container screen (min-width: 900px) {
  .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .detail-grid > .span-all { grid-column: 1 / -1; }
  [data-screen="s8"] .detail-columns { columns: 2; column-gap: 14px; }
  [data-screen="s8"] .detail-columns > * { break-inside: avoid; display: inline-block !important; width: 100%; box-sizing: border-box; vertical-align: top; }
  /* the Shipper Document / Broker Document / Timeline card keeps its design row (8 px gaps) */
  [data-screen="s8"] .detail-columns > .jump-row { display: flex !important; gap: 8px; }
  [data-screen="s5"] .screen-body, [data-screen="s22"] .screen-body { padding-top: 32px !important; }
}
@container screen (min-width: 1400px) {
  [data-screen="s8"] .detail-columns { columns: 3; }
}

/* Forms and detail screens on tablet / desktop: the actions follow the content
 * (instead of being pinned to the bottom of a tall window), right-aligned in
 * one row with the main action on the right. */
@media (min-width: 680px) {
  :is([data-screen="reg"], [data-screen="regstatus"], [data-screen="prof"], [data-screen="profedit"], [data-screen="s22"], [data-screen="s5"]) .screen { overflow-y: auto; }
  :is([data-screen="reg"], [data-screen="regstatus"], [data-screen="prof"], [data-screen="profedit"], [data-screen="s22"], [data-screen="s5"]) .screen-body { flex: none !important; overflow: visible !important; }
  :is([data-screen="reg"], [data-screen="regstatus"], [data-screen="prof"], [data-screen="profedit"], [data-screen="s22"]) .screen-foot { padding-bottom: 32px; }
  :is([data-screen="reg"], [data-screen="regstatus"], [data-screen="prof"], [data-screen="profedit"], [data-screen="s22"]) .screen-foot .home-safe { display: none; }
  .screen-foot > .foot-stack { flex-direction: row-reverse !important; justify-content: flex-start; align-items: center !important; gap: 12px !important; }
  .screen-foot > .foot-stack > .foot-btn { flex: 0 0 220px; width: 220px !important; height: 52px !important; margin: 0 !important; align-self: auto !important; }
  .screen-foot .foot-pair { flex-direction: row-reverse; justify-content: flex-start !important; gap: 12px !important; }
  .screen-foot .foot-pair > a { flex: 0 0 220px !important; height: 52px !important; margin: 0 !important; }
}

/* ---------- Links added between related screens ---------- */
.text-link:hover span, .text-link:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  [data-screen="s19"] .screen-body a[href]:hover, [data-screen="s8"] a[href="release-control.html"]:hover { filter: brightness(.98); box-shadow: 0 6px 18px rgba(17, 17, 17, .08) !important; }
}

/* secondary buttons (white with a border): real hover and press states */
.screen-foot .btn-secondary { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
@media (hover: hover) {
  .screen-foot .btn-secondary:hover { background: #F7F7F4 !important; border-color: rgba(17, 17, 17, .18) !important; color: #16181A !important; }
}
.screen-foot .btn-secondary:active { background: #EFEFEB !important; }

/* ---------- Plot calendar (Week / Month / All Plots) ---------- */
.cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -2px; padding: 0 2px 4px; }
.cal-scroll.is-month .cal-inner { min-width: calc(46px + 8px + var(--days) * 34px); }
.cal-bar { position: relative; z-index: 1; grid-row: 1; }
.cal-bar[data-clip-start] { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; }
.cal-bar[data-clip-end] { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; }
.cal-today { grid-row: 1; background: rgba(0, 43, 106, .06); border-radius: 10px; }
.range-pick { cursor: pointer; border-radius: 8px; }
@media (hover: hover) { .range-pick:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(17, 17, 17, .3); } }

/* ---------- Popups: option menus, month picker (js/controls.js) ---------- */
.pop-menu {
  z-index: 80; box-sizing: border-box; min-width: 180px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid rgba(17, 17, 17, .08); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, .14); padding: 6px; overflow-y: auto; outline: none;
  font-family: var(--font);
}
.pop-menu [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 11px; border-radius: 10px; font: 700 12.5px var(--font); color: var(--ink); cursor: pointer;
}
.pop-menu [role="option"] svg { color: var(--navy); flex: none; }
.pop-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pop-meta { font: 600 10.5px var(--font); color: var(--soft); }
.pop-menu [role="option"][aria-selected="true"] { color: var(--navy); background: var(--navy-tint); }
.pop-menu [role="option"]:hover, .pop-menu [role="option"].is-active { background: var(--field); }
.pop-menu [role="option"][aria-selected="true"]:hover, .pop-menu [role="option"][aria-selected="true"].is-active { background: #d5e5fd; }
.pop-footer { display: block; margin-top: 4px; padding: 10px 11px; border-top: 1px solid var(--line); font: 700 12px var(--font); color: var(--navy); }
.select-btn { cursor: pointer; }
.month-pop { width: 288px; min-width: 0; max-width: calc(100vw - 24px); padding: 12px; }
.month-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.month-title { font: 800 13px var(--font); color: var(--ink); }
.month-nav {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(17, 17, 17, .08); background: #fff;
  font: 700 16px var(--font); color: #4C534F; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.month-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.month-grid { display: grid; gap: 3px; }
.month-dow { font: 700 9px var(--font); color: #9AA19D; text-align: center; padding: 4px 0; letter-spacing: .04em; }
.month-day {
  height: 32px; border: none; border-radius: 9px; background: transparent; cursor: pointer;
  font: 700 12px var(--font); color: var(--ink);
}
.month-day.is-other { color: #B9BEBB; }
.month-day.is-today { color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(0, 43, 106, .35); }
/* the selected week (or month): a tinted band with navy ends */
.month-day.is-selected { background: var(--navy-tint); color: var(--navy); border-radius: 0; }
.month-day.is-selected.sel-start { border-radius: 9px 0 0 9px; }
.month-day.is-selected.sel-end { border-radius: 0 9px 9px 0; }
.month-day.is-selected.sel-start.sel-end { border-radius: 9px; }
.month-row .month-day.is-selected:first-of-type { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.month-row .month-day.is-selected:last-of-type { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.month-day.sel-start, .month-day.sel-end { background: var(--navy) !important; color: #fff !important; }
.month-day:hover:not(.is-selected) { background: var(--field); }
.month-day:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; position: relative; z-index: 1; }

/* ---------- Chat: image viewer, drop target ---------- */
.img-viewer {
  border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; margin: 0;
}
.img-viewer::backdrop { background: rgba(17, 17, 17, .86); }
.img-viewer[open] { display: flex; align-items: center; justify-content: center; }
.img-viewer img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); border-radius: 14px; object-fit: contain; }
.img-viewer-close {
  position: fixed; top: calc(14px + var(--safe-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 13px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.screen.is-dropping { box-shadow: inset 0 0 0 3px rgba(0, 43, 106, .45); }

/* ---------- Classes used by the screen scripts (js/screens.js, js/controls.js) ---------- */
.is-clickable { cursor: pointer; }
.eye-btn { border: none; background: none; padding: 0; margin: 0; display: flex; cursor: pointer; flex: none; border-radius: 6px; }
/* Update Storage Status: a newly chosen status (the design's navy selection) */
.status-pick { background: #e2eeff; border-radius: 14px; padding: 13px; border: 1.5px solid #002b6a; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.status-pick-text { font: 800 13px Manrope, sans-serif; color: #002b6a; }
/* Update Storage Status: the booking card opens the booking dropdown */
.booking-picker { display: flex !important; align-items: center; gap: 10px; cursor: pointer; }
.booking-picker > div:nth-child(2) { flex: 1; min-width: 0; }
.picker-chevron {
  width: 30px; height: 30px; flex: none; border-radius: 10px; background: #F1F2EF; color: #4C534F;
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.booking-picker[aria-expanded="true"] .picker-chevron { transform: rotate(180deg); }
@media (hover: hover) { .booking-picker:hover { box-shadow: 0 6px 18px rgba(17, 17, 17, .08) !important; } }
/* Messages: search field and tab panes */
.chat-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: #16181A; padding: 0; height: 100%; }
[data-chatpane].is-shown { display: block; }
/* Chat: picture bubbles */
.msg-bubble-media { padding: 8px !important; }
.msg-img { display: block; width: 220px; max-width: 100%; height: 140px; object-fit: cover; border-radius: 12px; background: rgba(255, 255, 255, .2); }
.msg-img-name { font: 500 11px Manrope, sans-serif; color: rgba(255, 255, 255, .8); margin: 6px 4px 2px; }
.msg-img-time { margin: 0 4px !important; }
/* Edit Profile: picked photo inside the avatar */
.has-photo { position: relative; overflow: hidden; color: transparent !important; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* design-style select button (Registration) */
.select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; width: 100%; }
.select-btn-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Plot calendar: day columns and bar positions */
.cal-cols-7 { grid-template-columns: repeat(7, 1fr) !important; }
.cal-cols-28 { grid-template-columns: repeat(28, minmax(30px, 1fr)) !important; }
.cal-scroll.is-month.cal-days-28 .cal-inner { min-width: 1006px; }
.cal-cols-29 { grid-template-columns: repeat(29, minmax(30px, 1fr)) !important; }
.cal-scroll.is-month.cal-days-29 .cal-inner { min-width: 1040px; }
.cal-cols-30 { grid-template-columns: repeat(30, minmax(30px, 1fr)) !important; }
.cal-scroll.is-month.cal-days-30 .cal-inner { min-width: 1074px; }
.cal-cols-31 { grid-template-columns: repeat(31, minmax(30px, 1fr)) !important; }
.cal-scroll.is-month.cal-days-31 .cal-inner { min-width: 1108px; }
.gcs-1 { grid-column-start: 1; }
.gcs-2 { grid-column-start: 2; }
.gcs-3 { grid-column-start: 3; }
.gcs-4 { grid-column-start: 4; }
.gcs-5 { grid-column-start: 5; }
.gcs-6 { grid-column-start: 6; }
.gcs-7 { grid-column-start: 7; }
.gcs-8 { grid-column-start: 8; }
.gcs-9 { grid-column-start: 9; }
.gcs-10 { grid-column-start: 10; }
.gcs-11 { grid-column-start: 11; }
.gcs-12 { grid-column-start: 12; }
.gcs-13 { grid-column-start: 13; }
.gcs-14 { grid-column-start: 14; }
.gcs-15 { grid-column-start: 15; }
.gcs-16 { grid-column-start: 16; }
.gcs-17 { grid-column-start: 17; }
.gcs-18 { grid-column-start: 18; }
.gcs-19 { grid-column-start: 19; }
.gcs-20 { grid-column-start: 20; }
.gcs-21 { grid-column-start: 21; }
.gcs-22 { grid-column-start: 22; }
.gcs-23 { grid-column-start: 23; }
.gcs-24 { grid-column-start: 24; }
.gcs-25 { grid-column-start: 25; }
.gcs-26 { grid-column-start: 26; }
.gcs-27 { grid-column-start: 27; }
.gcs-28 { grid-column-start: 28; }
.gcs-29 { grid-column-start: 29; }
.gcs-30 { grid-column-start: 30; }
.gcs-31 { grid-column-start: 31; }
.gcw-1 { grid-column-end: span 1; }
.gcw-2 { grid-column-end: span 2; }
.gcw-3 { grid-column-end: span 3; }
.gcw-4 { grid-column-end: span 4; }
.gcw-5 { grid-column-end: span 5; }
.gcw-6 { grid-column-end: span 6; }
.gcw-7 { grid-column-end: span 7; }
.gcw-8 { grid-column-end: span 8; }
.gcw-9 { grid-column-end: span 9; }
.gcw-10 { grid-column-end: span 10; }
.gcw-11 { grid-column-end: span 11; }
.gcw-12 { grid-column-end: span 12; }
.gcw-13 { grid-column-end: span 13; }
.gcw-14 { grid-column-end: span 14; }
.gcw-15 { grid-column-end: span 15; }
.gcw-16 { grid-column-end: span 16; }
.gcw-17 { grid-column-end: span 17; }
.gcw-18 { grid-column-end: span 18; }
.gcw-19 { grid-column-end: span 19; }
.gcw-20 { grid-column-end: span 20; }
.gcw-21 { grid-column-end: span 21; }
.gcw-22 { grid-column-end: span 22; }
.gcw-23 { grid-column-end: span 23; }
.gcw-24 { grid-column-end: span 24; }
.gcw-25 { grid-column-end: span 25; }
.gcw-26 { grid-column-end: span 26; }
.gcw-27 { grid-column-end: span 27; }
.gcw-28 { grid-column-end: span 28; }
.gcw-29 { grid-column-end: span 29; }
.gcw-30 { grid-column-end: span 30; }
.gcw-31 { grid-column-end: span 31; }

/* ---------- Toast, update prompt, connectivity ---------- */
.toast-host {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(92px + var(--safe-bottom));
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
@media (min-width: 768px) { .toast-host { bottom: calc(24px + var(--safe-bottom)); } }
.toast {
  pointer-events: auto;
  background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px;
  font: 600 12.5px/1.45 var(--font); box-shadow: 0 12px 30px rgba(17, 17, 17, .22);
  display: flex; align-items: center; gap: 12px;
  animation: toast-in .2s ease;
}
.toast.is-warn { background: #7A2E26; }
.toast-msg { flex: 1; }
.toast button {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 10px; border: none; cursor: pointer;
  font: 800 12px var(--font); background: #fff; color: var(--ink);
}
.toast button.is-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.offline-pill {
  position: fixed; z-index: 55; top: calc(8px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  background: #7A2E26; color: #fff; font: 700 11px var(--font); padding: 6px 12px; border-radius: 20px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .18); display: flex; align-items: center; gap: 6px;
}
.offline-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FFB4A8; }
/* actions that need the network are visibly unavailable while offline */
.is-offline [data-online-only] { opacity: .55; }

/* field validation (native messages are used; the field is outlined) */
.field-invalid { box-shadow: 0 0 0 2px #C0392B !important; }
.invalid-note { font: 600 11px var(--font); color: #C0392B; margin-top: 2px; }

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

/* landscape phones: keep the action bar compact */
@media (max-height: 480px) and (orientation: landscape) {
  .screen-foot .foot-btn { height: 46px !important; }
  .screen-foot > .foot-bar { padding-top: 8px !important; }
}

/* Inline validation message under a field */
.field-msg { margin-top: 6px; font: 500 11.5px/1.4 Manrope, sans-serif; color: #C0392B; }
.is-invalid .field-box, .card-2.is-invalid, .row-6.is-invalid { border-color: #C0392B !important; }
.row-3.is-invalid { outline: 1px solid #C0392B; outline-offset: 4px; border-radius: 12px; }
.card-2 { flex-wrap: wrap; }
.card-2 > .field-msg { flex: 0 0 100%; margin-top: 2px; }
.doc-remove { margin-left: 8px; padding: 2px 8px; border: 0; background: transparent; color: #C0392B; font: 600 11px/1.4 Manrope, sans-serif; cursor: pointer; border-radius: 6px; }
.doc-remove:hover { background: rgba(192, 57, 43, .1); }
.screen-foot a.is-off, .screen-foot a[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }

/* Profile documents: label and buttons on top, the file name underneath */
.doc-row { display: grid; grid-template-areas: "l a" "v v"; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.doc-row > .text-12 { grid-area: l; }
.doc-row .doc-value { grid-area: v; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.doc-actions { grid-area: a; display: inline-flex; gap: 2px; }
.doc-action { border: 0; background: transparent; color: #002b6a; font: 700 12px/1.4 Manrope, sans-serif; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.doc-action:hover { background: rgba(0, 43, 106, .08); }
.doc-row > .field-msg { grid-column: 1 / -1; margin: 4px 0 0 0; }

/* Bookings: a plot or storage space nobody has booked that week */
.row-avail { width:42px; height:42px; flex:none; border-radius:14px; background:#E6F4EC; color:#15803D; display:flex; align-items:center; justify-content:center; font:800 12px Manrope,sans-serif; }
.text-avail { font:700 10.5px Manrope,sans-serif; padding:5px 11px; border-radius:20px; background:#E6F4EC; color:#15803D; }

/* Booking Details: a section the system has no data for yet is hidden, also on wide screens where the cards are laid
   out in columns with their own display rule */
[data-screen="s8"] .detail-columns > [hidden],
[data-screen="s8"] .detail-columns > .jump-row[hidden] { display: none !important; }

/* Plot calendar on a phone: seven days do not fit in 330px, so each day keeps a readable width (company, container and
   status are all visible) and the calendar scrolls sideways, with the plot names staying in view. */
@media (max-width: 700px) {
  .cal-scroll:not(.is-month) .cal-inner { min-width: calc(46px + 8px + 7 * 88px); }
  .cal-scroll .cal-cols-7 { grid-template-columns: repeat(7, minmax(88px, 1fr)) !important; }
  .cal-scroll .row-54, .cal-scroll .box-15 { position: sticky; left: 0; z-index: 3; background: #FAF4E3; }
  .cal-scroll .row-54 { padding-right: 4px; }
}
/* Profile photo inside an avatar tile (header, menu, My Profile, Edit Profile) */
.row-21, .row-22, .row-99, .row-101, a.btn-12[href="profile.html"] { overflow: hidden; position: relative; }
.profile-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Booking Details · Last Stage: the stage name as a small badge on the navy header */
.stage-chip {
  display: inline-block; vertical-align: 1px;
  padding: 2px 9px; margin-right: 4px; border-radius: 999px;
  background: #fff; color: #002b6a;
  font: 800 11px/1.5 Manrope, sans-serif; letter-spacing: .01em;
}
/* on a white card (booking lists): light blue badge */
.stage-chip--light { background: #e2eeff; color: #002b6a; margin: 0 0 0 4px; font-size: 10.5px; }