/* 油單系統 前端 — 設計語言：iOS 骨架＋自家皮膚
   暖白底／深藍儀器卡／琥珀取景框／紅＝不可逆主動作／等寬數字 */

:root {
  --bg: #F6F6F4;
  --card: #FFFFFF;
  --line: #E7E7E3;
  --line-soft: #F0F0EC;
  --ink: #1C1C1A;
  --ink-2: #55554F;
  --ink-3: #8C8C86;
  --faint: #A5A59E;
  --navy: #20304F;
  --navy-line: #35486E;
  --navy-text: #93A3C2;
  --red: #BE3B2B;
  --red-down: #A33325;
  --amber: #F5C46B;
  --amber-bg: #FAF0DC;
  --amber-text: #8A6116;
  --green: #2F8557;
  --green-bg: #E4F1E9;
  --green-text: #2F6446;
  --mono: var(--sans);   /* 數字用系統字型＋tabular-nums，避免等寬字型的中空 0 */
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overscroll-behavior-y: none;
}
button, .row, .tab { user-select: none; -webkit-user-select: none; touch-action: manipulation; }

#app { min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; padding: calc(16px + var(--sat)) 18px 0; max-width: 560px; width: 100%; margin: 0 auto; }
.page.has-tabbar { padding-bottom: calc(84px + var(--sab)); }

/* ── 導航 ── */
.nav { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.nav .back { width: 34px; height: 34px; border: none; background: none; font-size: 22px; color: var(--ink-2); display: flex; align-items: center; cursor: pointer; }
.nav .title-sm { font-size: 17px; font-weight: 600; }
.nav .spacer { margin-left: auto; }
.large-title { font-size: 28px; font-weight: 700; letter-spacing: 0.3px; margin: 10px 0 2px; }
.subtitle { font-size: 13px; color: var(--ink-3); }

/* ── 卡片與列表 ── */
.card { background: var(--card); border: 0.5px solid var(--line); border-radius: 16px; }
.section-label { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.5px; margin: 20px 4px 8px; }
.list { background: var(--card); border: 0.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.row:active { background: var(--line-soft); }
.row + .row { border-top: 0.5px solid var(--line-soft); }
.row .glyph { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; flex-shrink: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .r-title { font-size: 15.5px; color: var(--ink); }
.row .r-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.row .chev { color: #C5C5CA; font-size: 15px; }
.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.pill.ok { background: var(--green-bg); color: var(--green-text); }
.pill.wait { background: var(--amber-bg); color: var(--amber-text); }
.pill.gray { background: #EBEBEF; color: var(--ink-2); }
.pill.risk { background: #F6E2DE; color: var(--red-down); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { font-size: 13px; padding: 7px 14px; border-radius: 20px; background: var(--card); border: 0.5px solid var(--line); color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.statcard:active { opacity: 0.7; }

/* ── 結算作業台（桌機導向）── */
.page.wide { max-width: 1120px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 0.5px solid var(--line-soft); white-space: nowrap; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tr.sub td { background: var(--line-soft); color: var(--ink-2); font-size: 13.5px; }
.tbl-wrap { overflow-x: auto; background: var(--card); border: 0.5px solid var(--line); border-radius: 13px; padding: 4px 6px 8px; }
.chk-ok { color: var(--green-text); font-weight: 600; }
.chk-bad { color: var(--red); font-weight: 600; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.toolbar .seg { flex: none; }
.toolbar .seg button { padding: 9px 18px; flex: none; }
.toolbar input, .toolbar select {
  padding: 9px 12px; font: inherit; font-size: 13.5px; border: 0.5px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink); outline: none;
}
.tbl tr.hoverable:hover td { background: var(--line-soft); }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.statrow .card { padding: 14px 16px 12px; border: 0.5px solid var(--line); }

/* ── 自製下拉：展開高度上限 280px，超過用卷軸（通則：所有展開式選取單皆同）── */
.dd { position: relative; }
.dd-btn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font: inherit; font-size: 13.5px;
  border: 0.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; }
.dd-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 150px; z-index: 60;
  background: var(--card); border: 0.5px solid var(--line); border-radius: 12px; padding: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14); max-height: 280px; overflow-y: auto; }
.dd-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none;
  font: inherit; font-size: 13.5px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.dd-item:hover { background: var(--line-soft); }
.dd-item.on { font-weight: 600; }

/* ── 儀器卡（深藍）── */
.gauge { background: var(--navy); border-radius: 18px; padding: 18px; color: #fff; }
.gauge .g-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--navy-text); letter-spacing: 1px; }
.gauge .g-num { font-family: var(--mono); font-size: 32px; font-weight: 500; letter-spacing: 1px; margin-top: 8px; }
.gauge .g-num small { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--navy-text); letter-spacing: 0; margin-left: 6px; }
.gauge .g-foot { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--navy-line); font-size: 11.5px; color: var(--navy-text); }
.gauge .g-foot b { display: block; font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: #E8ECF4; margin-top: 2px; }
.gauge .g-foot b.warn { color: var(--amber); }

/* ── 按鈕 ── */
.btn { display: block; width: 100%; border: none; border-radius: 15px; padding: 15px; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: transform 0.12s, background 0.15s; text-align: center; }
.btn:active { transform: scale(0.975); }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:active { background: var(--red-down); }
.btn.ghost { background: none; border: 0.5px solid #D8D8D2; color: var(--ink-2); font-weight: 400; letter-spacing: 0; }
.btn.quiet { background: none; color: var(--red); font-weight: 400; letter-spacing: 0; padding: 12px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ── 表單 ── */
.field { margin-top: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-3); margin: 0 4px 6px; }
.field input, .field select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px;
  border: 0.5px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink);
  outline: none; transition: border-color 0.15s;
}
.field input:focus { border-color: var(--navy); }
.field input.num { font-family: var(--mono); letter-spacing: 2px; }
.form-error { font-size: 13px; color: var(--red); margin: 10px 4px 0; min-height: 18px; }

/* ── 分段選擇 ── */
/* 紀錄頁的行程/申報雙向開關：選中側暗、未選側亮，與狀態篩選（seg）視覺區隔 */
.duo { display: flex; background: #E9E9E5; border-radius: 13px; padding: 3px; }
.duo button { flex: 1; border: none; background: none; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); padding: 10px 0; border-radius: 11px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.duo button.on { background: var(--ink); color: #fff; }
.seg { display: flex; background: #E9E9E5; border-radius: 12px; padding: 3px; }
.seg button { flex: 1; border: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink-2); padding: 9px 0; border-radius: 10px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── 底部分頁 ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(12px);
  border-top: 0.5px solid var(--line);
  padding: 9px 8px calc(14px + var(--sab));
}
.tab { border: none; background: none; text-align: center; font: inherit; cursor: pointer; color: var(--faint); min-width: 60px; }
.tab .t-icon { font-size: 21px; line-height: 1; }
.tab .t-label { font-size: 10.5px; margin-top: 2px; }
.tab.on { color: var(--red); }

/* ── Bottom sheet ── */
dialog.sheet {
  border: none; padding: 0; background: none; width: 100%; max-width: 560px;
  margin: auto auto 0; max-height: 92dvh;
}
dialog.sheet::backdrop { background: rgba(16, 19, 24, 0.5); }
.sheet-body {
  background: #F7F7F9; border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(18px + var(--sab));
  animation: sheet-up 0.28s cubic-bezier(0.32, 0.72, 0.25, 1);
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.6; } to { transform: none; opacity: 1; } }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: #D2D2D7; margin: 4px auto 14px; }

/* ── 相機 ── */
.cam-page { position: fixed; inset: 0; z-index: 20; background: #101318; display: flex; flex-direction: column; color: #E8ECF4; }
.cam-top { display: flex; justify-content: space-between; align-items: center; padding: calc(14px + var(--sat)) 18px 0; }
.cam-top .x { border: none; background: none; color: #A8B0BC; font-size: 24px; cursor: pointer; }
.cam-top .t { font-size: 14px; letter-spacing: 1px; }
.cam-stage { flex: 1; margin: 14px; border-radius: 16px; position: relative; overflow: hidden; background: #1A1F27; }
.cam-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf { position: absolute; left: 8%; right: 8%; top: 50%; height: 24%; transform: translateY(-50%); }
.vf i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--amber); border-width: 0; }
.vf i:nth-child(1) { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-radius: 8px 0 0 0; }
.vf i:nth-child(2) { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 8px 0 0; }
.vf i:nth-child(3) { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 8px; }
.vf i:nth-child(4) { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 8px 0; }
.cam-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 13px; color: #C7CEDA; }
.cam-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: #A8B0BC; padding-top: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #7FD1A2; }
.cam-controls { display: flex; align-items: center; justify-content: center; gap: 46px; padding: 16px 0 calc(26px + var(--sab)); }
.cam-side { width: 46px; height: 46px; border-radius: 50%; background: #1E242D; border: none; color: #A8B0BC; font-size: 19px; cursor: pointer; }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s; }
.shutter:active { transform: scale(0.92); }
.shutter i { display: block; width: 60px; height: 60px; border-radius: 50%; background: var(--red); }
.shutter[disabled] { opacity: 0.4; }

/* ── 讀數確認 ── */
.snap { border-radius: 12px; overflow: hidden; background: #23282F; height: 96px; display: flex; align-items: center; justify-content: center; position: relative; }
.snap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.snap .stamp { position: absolute; bottom: 6px; right: 10px; font-size: 10.5px; color: #8B95A3; }
.sigpad { display: block; width: 100%; height: 160px; border: 1px dashed #C7C7C2; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.row-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reading { text-align: center; padding: 16px 0 4px; }
.reading .r-label { font-size: 12px; color: #85858B; }
.reading .r-value { font-family: var(--mono); font-size: 40px; font-weight: 500; letter-spacing: 4px; margin-top: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.reading .r-pills { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.fine-print { font-size: 11.5px; color: var(--faint); text-align: center; margin-top: 8px; }

/* ── 時間軸（出車進行中）── */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 26px; width: 2px; background: #E0E0DB; }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item .knot { position: absolute; left: -26px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; }
.tl-item .knot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.tl-item.pending .knot { background: #fff; border: 2px dashed #C9C9C3; }
.tl-item.pending .knot::after { display: none; }
.tl-line1 { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.tl-line1 .odo { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.tl-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ── 其他 ── */
#toast {
  position: fixed; left: 50%; bottom: calc(100px + var(--sab)); transform: translateX(-50%) translateY(20px);
  background: #2B2B28; color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: 22px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 50;
  max-width: 85vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spin { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-page { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 15dvh; }
.brand { text-align: center; margin-bottom: 26px; }
.brand .b-mark { font-size: 34px; font-weight: 700; letter-spacing: 6px; color: var(--navy); }
.brand .b-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: 2px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #E9E9E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ── 主軸大磚（每天在用的動作＝畫面主角）── */
.tile { display: flex; align-items: center; gap: 14px; width: 100%; border: none; border-radius: 18px; padding: 19px 18px; font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s, filter 0.15s; }
.tile:active { transform: scale(0.98); filter: brightness(0.94); }
.tile .t-glyph { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile .t-main { font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.tile .t-sub { font-size: 12px; margin-top: 2px; opacity: 0.75; }
/* 主行動磚一律同尺寸同字級（2026-08-25 業主：按鈕大小字體不一致）；
   層級只用顏色表達——紅＝當下該做的那件，深藍＝並列的另一件 */
.tile.xl { background: var(--red); color: #fff; }
.tile.lg { background: var(--navy); color: #fff; margin-top: 10px; }
.tile[disabled] { opacity: 0.45; pointer-events: none; }

/* ── 摘要細條（偶爾看一眼的資訊＝退到配角）── */
.strip { display: flex; background: var(--card); border: 0.5px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-top: 14px; }
.strip > div { flex: 1; font-size: 11.5px; color: var(--ink-3); }
.strip b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 2px; }
.strip b.warn { color: var(--amber-text); }

/* ── 運營與監控儀表板 ── */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-top: 14px; }
.ops-card { text-align: left; background: var(--card); border: 0.5px solid var(--line); border-radius: 16px;
  padding: 16px; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; font: inherit; display: block; width: 100%; }
.ops-card:hover:not([disabled]) { box-shadow: 0 6px 20px rgba(0,0,0,0.07); transform: translateY(-1px); }
.ops-card[disabled] { cursor: default; }
.ops-glyph { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ops-prev { border-top: 0.5px solid var(--line-soft); margin-top: 12px; padding-top: 8px; }
.ops-prev-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); padding: 3px 0; }

/* 客戶選擇清單：已選列反白（2,530 筆改為搜尋式選擇，需要看得出選了哪一筆）*/
.row.on { background: var(--line-soft); }

/* ===================================================================
   工具類（2026-08-26 自 inline style 機械轉出，為移除 CSP style-src 'unsafe-inline'）
   類名重複三次是為了拉高特異性（本檔最複雜的選擇器為 3 個 class），
   確保工具類必定勝出；簡寫屬性排在長寫之前，避免 padding 蓋掉 padding-top。
   新增樣式請優先寫具名元件類，不要再回頭寫 inline style。
   =================================================================== */

.u-bg-f5c46b.u-bg-f5c46b.u-bg-f5c46b{background:#F5C46B}
.u-bg-f7deda.u-bg-f7deda.u-bg-f7deda{background:#F7DEDA}
.u-bg-fff.u-bg-fff.u-bg-fff{background:#fff}
.u-bg-none.u-bg-none.u-bg-none{background:none}
.u-bg-rgba-255-255-255-0_14.u-bg-rgba-255-255-255-0_14.u-bg-rgba-255-255-255-0_14{background:rgba(255,255,255,0.14)}
.u-bg-rgba-255-255-255-0_16.u-bg-rgba-255-255-255-0_16.u-bg-rgba-255-255-255-0_16{background:rgba(255,255,255,0.16)}
.u-bg-ambertext.u-bg-ambertext.u-bg-ambertext{background:var(--amber-text)}
.u-bg-bg.u-bg-bg.u-bg-bg{background:var(--bg)}
.u-bg-card.u-bg-card.u-bg-card{background:var(--card)}
.u-bg-green.u-bg-green.u-bg-green{background:var(--green)}
.u-bg-ink2.u-bg-ink2.u-bg-ink2{background:var(--ink-2)}
.u-bg-ink3.u-bg-ink3.u-bg-ink3{background:var(--ink-3)}
.u-bg-ink.u-bg-ink.u-bg-ink{background:var(--ink)}
.u-bg-linesoft.u-bg-linesoft.u-bg-linesoft{background:var(--line-soft)}
.u-bg-navy.u-bg-navy.u-bg-navy{background:var(--navy)}
.u-bg-red.u-bg-red.u-bg-red{background:var(--red)}
.u-bd-0_5px-solid-line.u-bd-0_5px-solid-line.u-bd-0_5px-solid-line{border:0.5px solid var(--line)}
.u-bd-none.u-bd-none.u-bd-none{border:none}
.u-flex-1.u-flex-1.u-flex-1{flex:1}
.u-flex-1_4.u-flex-1_4.u-flex-1_4{flex:1.4}
.u-font-inherit.u-font-inherit.u-font-inherit{font:inherit}
.u-m-0.u-m-0.u-m-0{margin:0}
.u-ov-auto.u-ov-auto.u-ov-auto{overflow:auto}
.u-ov-hidden.u-ov-hidden.u-ov-hidden{overflow:hidden}
.u-p-0.u-p-0.u-p-0{padding:0}
.u-p-0-12px-24px.u-p-0-12px-24px.u-p-0-12px-24px{padding:0 12px 24px}
.u-p-0-2px-6px.u-p-0-2px-6px.u-p-0-2px-6px{padding:0 2px 6px}
.u-p-0-6px.u-p-0-6px.u-p-0-6px{padding:0 6px}
.u-p-10px-14px.u-p-10px-14px.u-p-10px-14px{padding:10px 14px}
.u-p-10px-16px.u-p-10px-16px.u-p-10px-16px{padding:10px 16px}
.u-p-12px-14px.u-p-12px-14px.u-p-12px-14px{padding:12px 14px}
.u-p-12px-16px.u-p-12px-16px.u-p-12px-16px{padding:12px 16px}
.u-p-14-16.u-p-14-16.u-p-14-16{padding:14px 16px}
.u-p-16px-0-calc-20px-sab.u-p-16px-0-calc-20px-sab.u-p-16px-0-calc-20px-sab{padding:16px 0 calc(20px + var(--sab))}
.u-p-16-16-14.u-p-16-16-14.u-p-16-16-14{padding:16px 16px 14px}
.u-p-16px-18px.u-p-16px-18px.u-p-16px-18px{padding:16px 18px}
.u-p-16px-18px-8px.u-p-16px-18px-8px.u-p-16px-18px-8px{padding:16px 18px 8px}
.u-p-17px.u-p-17px.u-p-17px{padding:17px}
.u-p-18px.u-p-18px.u-p-18px{padding:18px}
.u-p-18px-18px-6px.u-p-18px-18px-6px.u-p-18px-18px-6px{padding:18px 18px 6px}
.u-p-20px-24px.u-p-20px-24px.u-p-20px-24px{padding:20px 24px}
.u-p-22px-18px.u-p-22px-18px.u-p-22px-18px{padding:22px 18px}
.u-p-24px-10px.u-p-24px-10px.u-p-24px-10px{padding:24px 10px}
.u-p-30px.u-p-30px.u-p-30px{padding:30px}
.u-p-40px-20px.u-p-40px-20px.u-p-40px-20px{padding:40px 20px}
.u-p-4px-0.u-p-4px-0.u-p-4px-0{padding:4px 0}
.u-p-4px-0-6px.u-p-4px-0-6px.u-p-4px-0-6px{padding:4px 0 6px}
.u-p-4px-12px.u-p-4px-12px.u-p-4px-12px{padding:4px 12px}
.u-p-5px-0.u-p-5px-0.u-p-5px-0{padding:5px 0}
.u-p-5px-12px.u-p-5px-12px.u-p-5px-12px{padding:5px 12px}
.u-p-5px-14px.u-p-5px-14px.u-p-5px-14px{padding:5px 14px}
.u-p-6px-0.u-p-6px-0.u-p-6px-0{padding:6px 0}
.u-p-6px-12px.u-p-6px-12px.u-p-6px-12px{padding:6px 12px}
.u-p-6px-14px.u-p-6px-14px.u-p-6px-14px{padding:6px 14px}
.u-p-6px-16px-0-28px.u-p-6px-16px-0-28px.u-p-6px-16px-0-28px{padding:6px 16px 0 28px}
.u-p-6px-8px.u-p-6px-8px.u-p-6px-8px{padding:6px 8px}
.u-p-7px-12px.u-p-7px-12px.u-p-7px-12px{padding:7px 12px}
.u-p-8px.u-p-8px.u-p-8px{padding:8px}
.u-p-8px-0.u-p-8px-0.u-p-8px-0{padding:8px 0}
.u-p-8px-14px.u-p-8px-14px.u-p-8px-14px{padding:8px 14px}
.u-p-8px-16px.u-p-8px-16px.u-p-8px-16px{padding:8px 16px}
.u-p-8px-16px-10px-28px.u-p-8px-16px-10px-28px.u-p-8px-16px-10px-28px{padding:8px 16px 10px 28px}
.u-p-8px-16px-12px-28px.u-p-8px-16px-12px-28px.u-p-8px-16px-12px-28px{padding:8px 16px 12px 28px}
.u-p-8px-16px-8px-28px.u-p-8px-16px-8px-28px.u-p-8px-16px-8px-28px{padding:8px 16px 8px 28px}
.u-p-8px-16px-8px-44px.u-p-8px-16px-8px-44px.u-p-8px-16px-8px-44px{padding:8px 16px 8px 44px}
.u-p-8px-20px.u-p-8px-20px.u-p-8px-20px{padding:8px 20px}
.u-p-8px-28px.u-p-8px-28px.u-p-8px-28px{padding:8px 28px}
.u-p-9px-14px.u-p-9px-14px.u-p-9px-14px{padding:9px 14px}
.u-p-9px-16px-9px-28px.u-p-9px-16px-9px-28px.u-p-9px-16px-9px-28px{padding:9px 16px 9px 28px}
.u-p-9px-18px.u-p-9px-18px.u-p-9px-18px{padding:9px 18px}
.u-c-fff.u-c-fff.u-c-fff{color:#fff}
.u-c-rgba-255-255-255-0_55.u-c-rgba-255-255-255-0_55.u-c-rgba-255-255-255-0_55{color:rgba(255,255,255,0.55)}
.u-c-rgba-255-255-255-0_75.u-c-rgba-255-255-255-0_75.u-c-rgba-255-255-255-0_75{color:rgba(255,255,255,0.75)}
.u-c-rgba-255-255-255-0_85.u-c-rgba-255-255-255-0_85.u-c-rgba-255-255-255-0_85{color:rgba(255,255,255,0.85)}
.u-c-ambertext.u-c-ambertext.u-c-ambertext{color:var(--amber-text)}
.u-c-amber.u-c-amber.u-c-amber{color:var(--amber)}
.u-c-faint.u-c-faint.u-c-faint{color:var(--faint)}
.u-c-greentext.u-c-greentext.u-c-greentext{color:var(--green-text)}
.u-c-ink2.u-c-ink2.u-c-ink2{color:var(--ink-2)}
.u-c-ink3.u-c-ink3.u-c-ink3{color:var(--ink-3)}
.u-c-ink.u-c-ink.u-c-ink{color:var(--ink)}
.u-c-navytext.u-c-navytext.u-c-navytext{color:var(--navy-text)}
.u-c-navy.u-c-navy.u-c-navy{color:var(--navy)}
.u-c-reddown.u-c-reddown.u-c-reddown{color:var(--red-down)}
.u-c-red.u-c-red.u-c-red{color:var(--red)}
.u-cur-default.u-cur-default.u-cur-default{cursor:default}
.u-cur-pointer.u-cur-pointer.u-cur-pointer{cursor:pointer}
.u-d-flex.u-d-flex.u-d-flex{display:flex}
.u-d-grid.u-d-grid.u-d-grid{display:grid}
.u-gap-10px.u-gap-10px.u-gap-10px{gap:10px}
.u-gap-12px.u-gap-12px.u-gap-12px{gap:12px}
.u-gap-14px.u-gap-14px.u-gap-14px{gap:14px}
.u-gap-16px.u-gap-16px.u-gap-16px{gap:16px}
.u-gap-18px.u-gap-18px.u-gap-18px{gap:18px}
.u-gap-4px-16px.u-gap-4px-16px.u-gap-4px-16px{gap:4px 16px}
.u-gap-6px.u-gap-6px.u-gap-6px{gap:6px}
.u-gap-6px-14px.u-gap-6px-14px.u-gap-6px-14px{gap:6px 14px}
.u-h-100pct.u-h-100pct.u-h-100pct{height:100%}
.u-h-17px.u-h-17px.u-h-17px{height:17px}
.u-h-18px.u-h-18px.u-h-18px{height:18px}
.u-h-22px.u-h-22px.u-h-22px{height:22px}
.u-h-24px.u-h-24px.u-h-24px{height:24px}
.u-h-28px.u-h-28px.u-h-28px{height:28px}
.u-h-42px.u-h-42px.u-h-42px{height:42px}
.u-h-48px.u-h-48px.u-h-48px{height:48px}
.u-op-0_5.u-op-0_5.u-op-0_5{opacity:0.5}
.u-pos-relative.u-pos-relative.u-pos-relative{position:relative}
.u-w-100pct.u-w-100pct.u-w-100pct{width:100%}
.u-w-100px.u-w-100px.u-w-100px{width:100px}
.u-w-104px.u-w-104px.u-w-104px{width:104px}
.u-w-120px.u-w-120px.u-w-120px{width:120px}
.u-w-140px.u-w-140px.u-w-140px{width:140px}
.u-w-17px.u-w-17px.u-w-17px{width:17px}
.u-w-18px.u-w-18px.u-w-18px{width:18px}
.u-w-200px.u-w-200px.u-w-200px{width:200px}
.u-w-22px.u-w-22px.u-w-22px{width:22px}
.u-w-24px.u-w-24px.u-w-24px{width:24px}
.u-w-280px.u-w-280px.u-w-280px{width:280px}
.u-w-28px.u-w-28px.u-w-28px{width:28px}
.u-w-300px.u-w-300px.u-w-300px{width:300px}
.u-w-34px.u-w-34px.u-w-34px{width:34px}
.u-w-42px.u-w-42px.u-w-42px{width:42px}
.u-w-46px.u-w-46px.u-w-46px{width:46px}
.u-w-48px.u-w-48px.u-w-48px{width:48px}
.u-w-auto.u-w-auto.u-w-auto{width:auto}
.u-ai-baseline.u-ai-baseline.u-ai-baseline{align-items:baseline}
.u-ai-center.u-ai-center.u-ai-center{align-items:center}
.u-ai-flexstart.u-ai-flexstart.u-ai-flexstart{align-items:flex-start}
.u-bdl-2px-solid-line.u-bdl-2px-solid-line.u-bdl-2px-solid-line{border-left:2px solid var(--line)}
.u-br-10px.u-br-10px.u-br-10px{border-radius:10px}
.u-br-13px.u-br-13px.u-br-13px{border-radius:13px}
.u-br-14px.u-br-14px.u-br-14px{border-radius:14px}
.u-br-16px.u-br-16px.u-br-16px{border-radius:16px}
.u-br-18px.u-br-18px.u-br-18px{border-radius:18px}
.u-br-20px.u-br-20px.u-br-20px{border-radius:20px}
.u-br-8px.u-br-8px.u-br-8px{border-radius:8px}
.u-sh-0-8px-40px-rgba-0-0-0-0_5.u-sh-0-8px-40px-rgba-0-0-0-0_5.u-sh-0-8px-40px-rgba-0-0-0-0_5{box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.u-fsh-0.u-fsh-0.u-fsh-0{flex-shrink:0}
.u-fwrap-wrap.u-fwrap-wrap.u-fwrap-wrap{flex-wrap:wrap}
.u-ff-mono.u-ff-mono.u-ff-mono{font-family:var(--mono)}
.u-fs-11_5px.u-fs-11_5px.u-fs-11_5px{font-size:11.5px}
.u-fs-11px.u-fs-11px.u-fs-11px{font-size:11px}
.u-fs-12_5px.u-fs-12_5px.u-fs-12_5px{font-size:12.5px}
.u-fs-12px.u-fs-12px.u-fs-12px{font-size:12px}
.u-fs-13_5px.u-fs-13_5px.u-fs-13_5px{font-size:13.5px}
.u-fs-13px.u-fs-13px.u-fs-13px{font-size:13px}
.u-fs-14_5px.u-fs-14_5px.u-fs-14_5px{font-size:14.5px}
.u-fs-14px.u-fs-14px.u-fs-14px{font-size:14px}
.u-fs-15_5px.u-fs-15_5px.u-fs-15_5px{font-size:15.5px}
.u-fs-15px.u-fs-15px.u-fs-15px{font-size:15px}
.u-fs-16px.u-fs-16px.u-fs-16px{font-size:16px}
.u-fs-17px.u-fs-17px.u-fs-17px{font-size:17px}
.u-fs-19px.u-fs-19px.u-fs-19px{font-size:19px}
.u-fs-24px.u-fs-24px.u-fs-24px{font-size:24px}
.u-fs-26px.u-fs-26px.u-fs-26px{font-size:26px}
.u-fs-30px.u-fs-30px.u-fs-30px{font-size:30px}
.u-fs-32px.u-fs-32px.u-fs-32px{font-size:32px}
.u-fs-34px.u-fs-34px.u-fs-34px{font-size:34px}
.u-fs-inherit.u-fs-inherit.u-fs-inherit{font-size:inherit}
.u-fw-400.u-fw-400.u-fw-400{font-weight:400}
.u-fw-600.u-fw-600.u-fw-600{font-weight:600}
.u-fw-650.u-fw-650.u-fw-650{font-weight:650}
.u-fw-700.u-fw-700.u-fw-700{font-weight:700}
.u-gc-full.u-gc-full.u-gc-full{grid-column:1/-1}
.u-gtc-1fr-1fr.u-gtc-1fr-1fr.u-gtc-1fr-1fr{grid-template-columns:1fr 1fr}
.u-gtc-repeat-auto-fill-minmax-300px-1fr.u-gtc-repeat-auto-fill-minmax-300px-1fr.u-gtc-repeat-auto-fill-minmax-300px-1fr{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.u-jc-center.u-jc-center.u-jc-center{justify-content:center}
.u-jc-flex-end.u-jc-flex-end.u-jc-flex-end{justify-content:flex-end}
.u-jc-flex-start.u-jc-flex-start.u-jc-flex-start{justify-content:flex-start}
.u-ls-0_5px.u-ls-0_5px.u-ls-0_5px{letter-spacing:-0.5px}
.u-ls-0.u-ls-0.u-ls-0{letter-spacing:0}
.u-ls-1px.u-ls-1px.u-ls-1px{letter-spacing:1px}
.u-ls-2px.u-ls-2px.u-ls-2px{letter-spacing:2px}
.u-ls-3px.u-ls-3px.u-ls-3px{letter-spacing:3px}
.u-lh-1_6.u-lh-1_6.u-lh-1_6{line-height:1.6}
.u-lh-1_8.u-lh-1_8.u-lh-1_8{line-height:1.8}
.u-mb-2px.u-mb-2px.u-mb-2px{margin-bottom:2px}
.u-mb-8px.u-mb-8px.u-mb-8px{margin-bottom:8px}
.u-ml-5px.u-ml-5px.u-ml-5px{margin-left:5px}
.u-ml-6px.u-ml-6px.u-ml-6px{margin-left:6px}
.u-ml-8px.u-ml-8px.u-ml-8px{margin-left:8px}
.u-mr-10px.u-mr-10px.u-mr-10px{margin-right:10px}
.u-mr-4px.u-mr-4px.u-mr-4px{margin-right:4px}
.u-mt-10px.u-mt-10px.u-mt-10px{margin-top:10px}
.u-mt-12px.u-mt-12px.u-mt-12px{margin-top:12px}
.u-mt-14px.u-mt-14px.u-mt-14px{margin-top:14px}
.u-mt-16px.u-mt-16px.u-mt-16px{margin-top:16px}
.u-mt-1px.u-mt-1px.u-mt-1px{margin-top:1px}
.u-mt-24px.u-mt-24px.u-mt-24px{margin-top:24px}
.u-mt-2px.u-mt-2px.u-mt-2px{margin-top:2px}
.u-mt-3px.u-mt-3px.u-mt-3px{margin-top:3px}
.u-mt-4px.u-mt-4px.u-mt-4px{margin-top:4px}
.u-mt-5px.u-mt-5px.u-mt-5px{margin-top:5px}
.u-mt-6px.u-mt-6px.u-mt-6px{margin-top:6px}
.u-mt-8px.u-mt-8px.u-mt-8px{margin-top:8px}
.u-maxh-100pct.u-maxh-100pct.u-maxh-100pct{max-height:100%}
.u-maxh-30vh.u-maxh-30vh.u-maxh-30vh{max-height:30vh}
.u-maxh-42vh.u-maxh-42vh.u-maxh-42vh{max-height:42vh}
.u-maxh-44vh.u-maxh-44vh.u-maxh-44vh{max-height:44vh}
.u-maxh-50vh.u-maxh-50vh.u-maxh-50vh{max-height:50vh}
.u-maxw-100pct.u-maxw-100pct.u-maxw-100pct{max-width:100%}
.u-maxw-420px.u-maxw-420px.u-maxw-420px{max-width:420px}
.u-minw-0.u-minw-0.u-minw-0{min-width:0}
.u-minw-100pct.u-minw-100pct.u-minw-100pct{min-width:100%}
.u-minw-180px.u-minw-180px.u-minw-180px{min-width:180px}
.u-minw-220px.u-minw-220px.u-minw-220px{min-width:220px}
.u-ovy-auto.u-ovy-auto.u-ovy-auto{overflow-y:auto}
.u-pl-12px.u-pl-12px.u-pl-12px{padding-left:12px}
.u-pl-28px.u-pl-28px.u-pl-28px{padding-left:28px}
.u-pt-10px.u-pt-10px.u-pt-10px{padding-top:10px}
.u-pt-1px.u-pt-1px.u-pt-1px{padding-top:1px}
.u-pt-4px.u-pt-4px.u-pt-4px{padding-top:4px}
.u-pe-none.u-pe-none.u-pe-none{pointer-events:none}
.u-ta-center.u-ta-center.u-ta-center{text-align:center}
.u-ta-left.u-ta-left.u-ta-left{text-align:left}
.u-ta-right.u-ta-right.u-ta-right{text-align:right}
.u-tov-ellipsis.u-tov-ellipsis.u-tov-ellipsis{text-overflow:ellipsis}
.u-ws-normal.u-ws-normal.u-ws-normal{white-space:normal}
.u-ws-nowrap.u-ws-nowrap.u-ws-nowrap{white-space:nowrap}
.u-p-6px.u-p-6px.u-p-6px{padding:6px}
.u-p-10px-16px-10px-28px.u-p-10px-16px-10px-28px.u-p-10px-16px-10px-28px{padding:10px 16px 10px 28px}
.u-maxh-60vh.u-maxh-60vh.u-maxh-60vh{max-height:60vh}
.u-maxh-38vh.u-maxh-38vh.u-maxh-38vh{max-height:38vh}
.u-d-none.u-d-none.u-d-none{display:none}
.u-gap-8px.u-gap-8px.u-gap-8px{gap:8px}