:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #213f4c; background: #dce9ed; --route-list-compact-height: 196px; --sheet-bottom-pad: calc(10px + env(safe-area-inset-bottom)); --sheet-floor: 0 110px 0 0 #f7fbfc, 0 220px 0 0 #f7fbfc, 0 330px 0 0 #f7fbfc; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
textarea { resize: none !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: linear-gradient(145deg, #d8e9ed, #e9e1d7); }
button, textarea { border: 0; font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app-shell { position: relative; width: min(100%, 513px); height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; }
.topbar { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; min-height: calc(54px + env(safe-area-inset-top)); padding: max(8px, env(safe-area-inset-top)) 18px 8px; border-bottom: 1px solid rgba(255,255,255,.84); background: rgba(238,247,249,.88); backdrop-filter: blur(20px); }
.topbar-copy { grid-column: 2; display: grid; gap: 1px; text-align: center; }
.topbar-copy small { color: #75909a; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.topbar-copy strong { color: #274654; font-size: 18px; }
.language-button { grid-column: 3; justify-self: end; min-width: 46px; height: 34px; padding: 0 9px; border: 1px solid rgba(255,255,255,.88); border-radius: 12px; color: #178dbb; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; }
main, .map-screen { width: 100%; height: 100%; }
.map-screen { position: relative; overflow: hidden; background: #dce9e5; }
#driver-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
html.native-map-active, .native-map-active body, .native-map-active .app-shell, .native-map-active main, .native-map-active .map-screen { background: transparent; }
.map-loading { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #69848e; background: linear-gradient(145deg, #dce9e5, #d5e6e8); font-size: 11px; }
.map-loading i { width: 30px; height: 30px; border: 3px solid rgba(35,143,186,.16); border-top-color: #159bd8; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.layer-button { position: absolute; z-index: 11; top: calc(132px + env(safe-area-inset-top)); right: 18px; display: grid; width: 48px; min-height: 53px; place-items: center; align-content: center; gap: 2px; border: 1px solid rgba(255,255,255,.88); border-radius: 17px; color: #159bd8; background: rgba(250,253,253,.94); box-shadow: 0 9px 20px rgba(45,84,97,.17); }
.layer-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.layer-button span { font-size: 8px; font-weight: 850; }
.layer-button[aria-pressed="true"] { color: #fff; background: rgba(32,82,96,.9); }
.locate-button { position: absolute; z-index: 11; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.88); border-radius: 17px; color: #159bd8; background: rgba(250,253,253,.94); box-shadow: 0 9px 20px rgba(45,84,97,.17); }
.locate-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.empty-panel, .complete-panel { position: absolute; z-index: 12; top: 50%; left: 50%; display: grid; width: min(calc(100% - 36px), 390px); padding: 21px 18px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.82); border-radius: 27px; background: rgba(246,251,252,.94); box-shadow: 0 20px 48px rgba(39,76,89,.2), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(24px); }
.empty-panel > img { width: calc(88px * 2 / 3); height: auto; aspect-ratio: 605 / 417; object-fit: contain; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.empty-panel > div { margin-top: 12px; }
.empty-panel small, .route-status small, .stop-sheet header small { color: #8098a1; font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.empty-panel h1 { margin: 3px 0 7px; font-size: 23px; }
.empty-panel p { margin: 0; color: #68818b; font-size: 11px; line-height: 1.55; }
.complete-panel button { min-height: 44px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #36bffa, #159bd8); font-size: 12px; font-weight: 800; }
.privacy-copy { margin-top: 12px !important; color: #8aa0a8 !important; font-size: 9px !important; }
.route-status { position: absolute; z-index: 10; top: calc(66px + env(safe-area-inset-top)); right: 16px; left: 16px; display: flex; min-height: 53px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px 8px 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 17px; background: rgba(247,252,253,.9); box-shadow: 0 8px 19px rgba(45,82,94,.14); backdrop-filter: blur(15px); }
.route-status span { display: grid; min-width: 0; gap: 2px; }
.route-status strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.route-status > div { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.route-status b { flex: 0 0 auto; padding: 5px 8px; border-radius: 99px; color: #278970; background: rgba(77,183,139,.13); font-size: 9px; }
.route-status button { min-height: 30px; padding: 0 10px; border-radius: 10px; color: #167fa8; background: rgba(54,191,250,.14); font-size: 9px; font-weight: 850; }
.route-list-sheet { position: absolute; z-index: 14; right: 10px; bottom: 0; left: 10px; height: calc(var(--route-list-compact-height) + var(--sheet-bottom-pad)); padding-bottom: var(--sheet-bottom-pad); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-bottom: 0; border-radius: 28px 28px 0 0; background: rgba(247,251,252,.96); box-shadow: var(--sheet-floor), 0 -12px 34px rgba(45,82,94,.19), inset 0 1px rgba(255,255,255,.9); touch-action: none; transition: height .27s cubic-bezier(.22,.78,.24,1), transform .27s cubic-bezier(.22,.78,.24,1); will-change: height; }
.route-list-sheet.is-expanded { height: calc(min(620px, 64vh) + var(--sheet-bottom-pad)); height: calc(min(620px, 64dvh) + var(--sheet-bottom-pad)); }
.route-list-sheet.is-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.route-list-sheet.no-transition { transition: none; }
.route-list-scroll { height: calc(100% - 24px); overflow-y: hidden; padding: 0 12px 13px; overscroll-behavior: contain; touch-action: none; scrollbar-width: none; }
.route-list-scroll::-webkit-scrollbar { display: none; }
.route-list-scroll > header { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 6px; }
.route-list-scroll > header span { display: grid; gap: 1px; }
.route-list-scroll > header small { color: #8098a1; font-size: 8px; font-weight: 750; letter-spacing: .06em; }
.route-list-scroll > header strong { color: #274654; font-size: 13px; }
.route-list-scroll > header b { color: #718b95; font-size: 9px; }
.driver-pending-receipt { margin: 0 0 9px; padding: 8px 10px; border: 1px solid rgba(195,126,33,.24); border-radius: 12px; color: #714d1d; background: #fff5df; font-size: 10px; line-height: 1.5; }
.empty-panel .driver-pending-receipt { margin-top: 10px; color: #714d1d; }
.stop-sheet .driver-pending-receipt { margin: 10px 0 0; }
#route-stop-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.route-stop-row { display: grid; width: 100%; min-height: 52px; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1px solid rgba(205,222,227,.72); border-radius: 15px; color: #274654; background: rgba(255,255,255,.66); text-align: left; }
.route-stop-row > i { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #1b3353; border-radius: 11px; color: #162544; background: #ffc21a; font-size: 12px; font-style: normal; font-weight: 900; }
.route-stop-row > span { display: grid; min-width: 0; gap: 2px; }
.route-stop-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.route-stop-row small { color: #7d959e; font-size: 8px; }
.route-stop-row > b { color: #159bd8; font-size: 18px; }
.route-stop-row.is-completed { opacity: .62; }
.route-stop-row.is-completed > i { color: #fff; border-color: #71848c; background: #83969d; }
.route-stop-row.is-completed > b { color: #6f858e; }
.has-route .locate-button { bottom: calc(var(--route-list-compact-height) + 18px + env(safe-area-inset-bottom)); }
.locate-button.cloud-refresh-button { bottom:calc(154px + env(safe-area-inset-bottom)); }
.has-route .locate-button.cloud-refresh-button { bottom:calc(var(--route-list-compact-height) + 76px + env(safe-area-inset-bottom)); }
.locate-button.cloud-refresh-button svg { width:22px; height:22px; }
.cloud-refresh-button:disabled { opacity:.55; }
.fy-route-update [data-close] { display:none; }
.fy-route-update .fy-route-changes { display:grid; gap:10px; }
.fy-route-update article { padding:12px; border-radius:14px; background:#e8f2f7; }
.fy-route-update article h3 { margin:6px 0; }
.fy-route-update article small { color:#237594; }
.fy-route-update .fy-route-change-summary { display:flex; align-items:center; gap:9px; min-width:0; }
.fy-route-update .fy-route-change-summary h3 { min-width:0; overflow-wrap:anywhere; }
.fy-route-update .fy-route-change-number { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:9px; background:#f2c94c; color:#5b4500; font-size:16px; font-weight:800; }
.fy-route-update .fy-route-change-arrow { flex:0 0 auto; color:#237594; font-size:22px; font-weight:800; }
.fy-route-update .fy-route-change-recalled { background:#f1f3f4; }
.fy-route-update .fy-route-change-recalled small { color:#b4483a; }
.fy-route-update .fy-route-change-recalled h3 { color:#6b7a80; text-decoration:line-through; }
.stop-sheet { position: absolute; z-index: 15; right: 10px; bottom: 0; left: 10px; display: flex; max-height: calc(min(680px, 72vh) + var(--sheet-bottom-pad)); max-height: calc(min(680px, 72dvh) + var(--sheet-bottom-pad)); flex-direction: column; padding-bottom: var(--sheet-bottom-pad); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-bottom: 0; border-radius: 28px 28px 0 0; background: rgba(247,251,252,.96); box-shadow: var(--sheet-floor), 0 -12px 34px rgba(45,82,94,.19), inset 0 1px rgba(255,255,255,.9); touch-action: none; will-change: transform; }
.stop-sheet.is-dragging { user-select: none; -webkit-user-select: none; }
.stop-sheet > :not(.sheet-handle), .route-list-scroll { transition: opacity .16s linear; }
.stop-sheet.content-out > :not(.sheet-handle), .route-list-sheet.content-out .route-list-scroll { opacity: 0; }
.route-list-sheet.is-swapping { transition: height .33s cubic-bezier(.32,.72,0,1); }
.stop-sheet-head { flex: none; padding: 2px 16px 0; }
.sheet-handle { display: grid; width: 100%; height: 24px; place-items: center; background: transparent; }
.sheet-handle i { width: 42px; height: 4px; border-radius: 99px; background: rgba(87,120,130,.32); }
.stop-sheet-scroll { flex: 0 1 auto; min-height: 0; overflow-y: hidden; padding: 0 16px 6px; overscroll-behavior: contain; touch-action: none; scrollbar-width: none; }
.stop-sheet-scroll::-webkit-scrollbar { display: none; }
.stop-sheet header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; }
#stop-order { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid #1b3353; border-radius: 13px; color: #162544; background: #ffc21a; font-size: 14px; font-weight: 900; }
.stop-sheet h2 { overflow: hidden; margin: 2px 0 0; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.overview-action { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 3px; padding: 0 9px 0 7px; border: 1px solid rgba(54,191,250,.22); border-radius: 12px; color: #167fa8; background: rgba(54,191,250,.12); font-size: 9px; font-weight: 850; }
.overview-action:active { transform: scale(.96); background: rgba(54,191,250,.2); }
.overview-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.photo-section { margin-top: 14px; }
.photo-section h3 { margin: 0 0 8px; color: #68818b; font-size: 10px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.photo-grid img { display: block; width: 100%; height: 116px; border-radius: 15px; background: #dce8ea; object-fit: cover; }
/* 两个抽屉的同色补底放在阴影前面（上层）：放后面时卡片自己的阴影压在补底上，上拉到限位会看到一条分割线（10-19） */
/* 补底影子会照搬卡片顶部 28px 圆角：只用一层下移 220px 时，卡片矮于 248px（送货顺序收起 206、工厂卡片约 241）上拉会露出影子的圆角和上沿缺口。改成每隔 110px 叠一层不透明同色（110／220／330），卡片高于 138px 时下方 330px 内都是方的，高卡片使劲上拉也不露底（10-20） */
/* 云端照片还没下载完时占位按钮先占满一张照片的高度（150 图＋上下各 4 内边距＋1 边框），卡片打开后不再被照片撑高、跳一下（10-19） */
#photo-grid.fy-task-photo-grid > button { min-height: 160px; }
.photo-empty { grid-column: 1 / -1; display: grid; min-height: 68px; place-items: center; border: 1px dashed rgba(109,145,157,.28); border-radius: 14px; color: #91a4ab; font-size: 10px; }
.stop-actions { position: relative; flex: none; display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; padding: 8px 16px 16px; }
.stop-actions::before { content: ""; position: absolute; top: -16px; right: 0; left: 0; height: 16px; background: linear-gradient(180deg, rgba(247,251,252,0), rgba(247,251,252,.96)); pointer-events: none; }
.stop-actions button, .stop-actions a { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 7px; border-radius: 16px; font-size: 12px; font-weight: 850; text-decoration: none; }
.stop-actions svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.navigate-action { color: #167fa8; background: rgba(54,191,250,.14); }
.unload-action { color: #fff; background: linear-gradient(135deg, #54c49a, #29916f); box-shadow: 0 8px 18px rgba(46,151,116,.19); }
.complete-panel { justify-items: center; text-align: center; }
.complete-panel div { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #64cba4, #2b9672); font-size: 28px; font-weight: 900; }
.complete-panel h2 { margin: 13px 0 5px; font-size: 21px; }
.complete-panel p { margin: 0 0 16px; color: #78919a; font-size: 11px; }
.complete-panel button { width: 100%; }
.import-dialog { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(30,52,61,.24); backdrop-filter: blur(8px); }
.import-dialog > div { width: min(100%, 370px); padding: 20px 18px 17px; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: rgba(247,251,252,.98); box-shadow: 0 22px 48px rgba(30,61,72,.24); }
.import-dialog h2 { margin: 0 0 6px; font-size: 19px; }
.import-dialog p { margin: 0; color: #718b95; font-size: 10px; line-height: 1.5; }
.confirm-import { color: #fff; background: linear-gradient(135deg, #36bffa, #159bd8); }
.toast { position: absolute; z-index: 30; top: calc(76px + env(safe-area-inset-top)); left: 50%; max-width: calc(100% - 44px); padding: 10px 14px; transform: translateX(-50%); border-radius: 99px; color: #fff; background: rgba(36,65,76,.91); box-shadow: 0 8px 19px rgba(31,60,71,.18); font-size: 10px; text-align: center; }
html[lang="km"] .topbar-copy strong, html[lang="km"] button, html[lang="km"] textarea, html[lang="km"] h1, html[lang="km"] h2, html[lang="km"] h3, html[lang="km"] p, html[lang="km"] span, html[lang="km"] small { font-family: "Noto Sans Khmer", "Khmer OS System", system-ui, sans-serif; }

.pwa-install-button { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid rgba(20,35,66,.16); border-radius: 15px; color: #142342; background: rgba(255,255,255,.72); box-shadow: 0 10px 28px rgba(20,35,66,.08); font-size: 12px; font-weight: 800; }
.install-steps { margin: 14px 0 18px; padding-left: 24px; color: #34435f; font-size: 13px; line-height: 1.65; }
.install-steps li + li { margin-top: 6px; }
#close-install-guide { width: 100%; min-height: 44px; border-radius: 14px; font-size: 12px; font-weight: 850; }

.web-route-map { position: absolute; inset: 0; display: block; overflow: hidden; color: rgba(20,35,66,.08); background: radial-gradient(circle at 18% 15%, rgba(255,255,255,.86), transparent 30%), linear-gradient(145deg, #e5eff1, #cfdee2); }
.web-route-map.is-satellite { color: rgba(255,255,255,.08); background: radial-gradient(circle at 72% 22%, rgba(180,197,143,.32), transparent 30%), linear-gradient(145deg, #6d7c6b, #40545a); }
.web-route-map svg { display: block; width: 100%; height: 100%; }
.web-map-grid { color: inherit; }
.web-route-shadow, .web-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.web-route-shadow { stroke: rgba(20,35,66,.22); stroke-width: 21; }
.web-route-line { stroke: #159ed8; stroke-width: 12; }
.web-stop-marker { cursor: pointer; outline: none; }
.web-stop-marker circle { fill: #ffc21a; stroke: #142342; stroke-width: 8; filter: drop-shadow(0 10px 10px rgba(20,35,66,.2)); }
.web-stop-marker text { fill: #142342; font: 800 28px/1 system-ui, sans-serif; pointer-events: none; }
.web-stop-marker.is-active circle { fill: #fff; stroke: #159ed8; stroke-width: 10; }
.web-stop-marker.is-completed { opacity: .55; }
.web-current-location .pulse { fill: rgba(42,131,255,.18); stroke: rgba(42,131,255,.35); stroke-width: 3; }
.web-current-location circle:last-child { fill: #2a83ff; stroke: #fff; stroke-width: 5; }
.web-map-caption { position: absolute; top: calc(env(safe-area-inset-top) + 84px); left: 50%; max-width: calc(100% - 150px); overflow: hidden; padding: 7px 12px; transform: translateX(-50%); border-radius: 999px; color: #34435f; background: rgba(255,255,255,.78); box-shadow: 0 8px 24px rgba(20,35,66,.12); backdrop-filter: blur(16px); font-size: 10px; font-weight: 760; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

@media (display-mode: standalone) {
  .pwa-install-button { display: none !important; }
}