body { min-height: 100dvh; background:linear-gradient(180deg,#e9efec,#f5f7f5); }
.login { min-height: 100dvh; padding: 22px 20px 30px; display: grid; align-content: start; gap: 10px; background: radial-gradient(700px 360px at 50% -5%, #60301a, #1d2925 58%, #111b18 100%); color: #fff; overflow:hidden; }
.driver-hero { position:relative; height:220px; margin:-4px -4px 8px; perspective:800px; transform-style:preserve-3d; }
.scene3d-canvas { position:absolute; inset:-8px -10px -2px; width:calc(100% + 20px); height:calc(100% + 10px); z-index:3; filter:drop-shadow(0 24px 22px rgba(0,0,0,.34)); }
.scene3d-canvas ~ .cargo-van, .scene3d-canvas ~ .hero-orbit { display:none; }
.route-plane { position:absolute; left:4%; right:4%; bottom:8px; height:138px; transform:rotateX(61deg) rotateZ(-4deg); border-radius:36px; background:linear-gradient(145deg,#2f4540,#172724); box-shadow:0 34px 42px rgba(0,0,0,.38),inset 0 2px rgba(255,255,255,.08); }
.route-plane::before { content:""; position:absolute; inset:18px; border:5px solid rgba(255,255,255,.6); border-left-color:transparent; border-radius:65% 45% 55% 48%; }
.route-plane::after { content:""; position:absolute; left:22%; right:12%; top:52%; border-top:4px dashed #f1be4e; transform:rotate(-7deg); }
.route-plane i { position:absolute; width:20px; height:20px; border-radius:50% 50% 50% 0; background:#ff7130; transform:rotate(-45deg) translateZ(14px); box-shadow:0 8px 20px rgba(239,91,25,.7); }.route-plane i:nth-child(1){left:15%;top:45%}.route-plane i:nth-child(2){left:53%;top:18%;background:#55d4b6}.route-plane i:nth-child(3){right:10%;bottom:20%;background:#f4d167}
.route-plane span { position:absolute; width:66px; height:5px; border-radius:9px; right:24%; bottom:16%; background:#70ffe1; box-shadow:0 0 18px #3ce7c2; transform:rotate(-8deg); }
.cargo-van { position:absolute; left:50%; top:52px; width:170px; height:86px; transform:translateX(-50%) rotateY(-10deg) rotateZ(-2deg); filter:drop-shadow(16px 26px 15px rgba(0,0,0,.5)); z-index:2; }
.cargo-box { position:absolute; left:0; top:0; width:108px; height:69px; border-radius:10px 5px 4px 7px; display:grid; place-items:center; font-size:22px; letter-spacing:.18em; font-weight:900; background:linear-gradient(135deg,#ff9050,#ef5c18 58%,#a72f09); box-shadow:inset 0 3px rgba(255,255,255,.32),inset -10px -12px 20px rgba(100,24,0,.28); }
.cargo-cab { position:absolute; right:0; bottom:16px; width:72px; height:54px; border-radius:9px 24px 6px 4px; background:linear-gradient(135deg,#eef7f4,#a7bbb5 55%,#607b74); box-shadow:inset -9px -10px 14px rgba(14,45,37,.22); }.cargo-cab::before{content:"";position:absolute;right:10px;top:8px;width:40px;height:22px;border-radius:4px 12px 3px 3px;transform:skewX(12deg);background:linear-gradient(140deg,#b0e4dc,#23685b);box-shadow:inset 0 3px 5px rgba(255,255,255,.25)}
.cw { position:absolute; bottom:3px; width:31px; height:31px; border-radius:50%; background:radial-gradient(circle,#b3c1bd 0 17%,#293631 19% 53%,#070a09 55%); box-shadow:0 4px 8px rgba(0,0,0,.4); }.cw.one{left:27px}.cw.two{right:18px}
.hero-orbit { position:absolute; left:50%; top:15px; width:210px; height:140px; transform:translateX(-50%) rotateX(67deg); border:1px solid rgba(255,135,77,.35); border-radius:50%; box-shadow:0 0 26px rgba(255,109,43,.18); }
.login .mark { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg,#ff8543,#e55312); color: #fff; font-weight: 900; font-size: 22px; box-shadow:0 7px 0 #8e2a08,0 15px 24px rgba(0,0,0,.28); }
.login h1 { margin: 8px 0 0; font-size: 30px; }
.login p { margin: 0 0 18px; opacity: .92; }
.install { background: rgba(255,255,255,.16); border-radius: 16px; padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 6px; }
.install p, .install b { margin: 0; }
.install code { display: block; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
.install .btn { min-height: 42px; background: #fff; color: var(--go); }
.login form, .app { color: var(--ink); }
.login form { display: grid; gap: 12px; background: linear-gradient(145deg,#fff,#eef3f0); padding: 18px; border-radius: 22px; box-shadow:0 14px 0 #cbd5d1,0 28px 45px rgba(0,0,0,.3),inset 0 1px #fff; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.quick button { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); color: #fff; box-shadow:0 6px 12px rgba(0,0,0,.16); }
.app { min-height: 100dvh; padding-bottom: 78px; }
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; background: linear-gradient(145deg,#1e302b,#0d1c18); color: #fff; box-shadow:0 10px 24px rgba(20,45,37,.25); }
.top::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#f06b28,transparent); }
.top span { display: block; font-size: 12px; opacity: .9; }
.mini { min-height: 36px; border: 0; border-radius: 11px; padding: 0 12px; font-weight: 750; background: linear-gradient(180deg,#fff,#e8efec); color: var(--go); box-shadow:0 5px 0 #bdc8c4,0 8px 14px rgba(0,0,0,.19); }
.mini.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.page { padding: 14px 14px 24px; display: grid; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: linear-gradient(145deg,#fff,#eef3f0); border-radius: 16px; padding: 12px; box-shadow:0 7px 0 #d0dad6,0 13px 21px rgba(22,48,40,.1); }
.stat b { display: block; font-size: 20px; }
.stat span { color: var(--muted); font-size: 12px; }
.collection-summary { background: linear-gradient(145deg,#fff,#edf3f0); border-radius: 20px; padding: 14px; box-shadow:0 9px 0 #ccd8d3,0 18px 28px rgba(25,52,44,.12); }
.summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.summary-head strong { color: var(--go); font-size: 20px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.summary-grid div { background: #fff7ef; border-radius: 12px; padding: 9px 8px; min-width: 0; }
.summary-grid span { display: block; color: var(--muted); font-size: 12px; }
.summary-grid b { display: block; margin-top: 4px; font-size: 15px; overflow-wrap: anywhere; }
.collection-summary small { display: block; color: var(--muted); font-size: 11px; margin-top: 10px; }
.card { background: linear-gradient(145deg,#fff,#f0f4f2); border-radius: 20px; padding: 14px; display: grid; gap: 8px; box-shadow:0 8px 0 #d0dad6,0 17px 27px rgba(20,48,39,.12),inset 0 1px #fff; }
.card .row { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.card h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.amount { font-size: 22px; font-weight: 800; }
.addr { color: var(--muted); font-size: 13px; }
.list-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 2px 0; color: var(--ink); }
.list-heading span { color: var(--muted); font-size: 12px; }
.completed-heading { margin-top: 4px; }
.order-card { gap: 9px; }
.sequence-line { min-height: 18px; }
.sequence { display: inline-block; color: var(--go); font-size: 12px; font-weight: 800; }
.order-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.order-meta b { color: var(--ink); }
.order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.order-detail-grid > div { background: #fff7ef; border-radius: 12px; padding: 9px 10px; min-width: 0; }
.order-detail-grid span, .order-detail-grid b { display: block; overflow-wrap: anywhere; }
.order-detail-grid span { color: var(--muted); font-size: 11px; }
.order-detail-grid b { margin-top: 3px; font-size: 13px; }
.next-order-btn { margin-top: 8px; border: 1px solid var(--go); color: var(--go); background: #fff; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dock { position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(145deg,#fff,#e9efec); border: 1px solid rgba(255,255,255,.7); border-radius:18px; padding: 6px; box-shadow:0 12px 28px rgba(9,35,27,.24),0 5px 0 #bdc9c4; }
.dock button { border: 0; background: transparent; color: var(--muted); font-weight: 700; }
.dock button.active { color: #fff; background:linear-gradient(145deg,#ff7d37,#d9490d); border-radius:13px; box-shadow:0 5px 0 #9f310a,0 8px 13px rgba(197,55,7,.24); }
.sheet { position: fixed; inset: 0; pointer-events: none; }
.sheet.open { pointer-events: auto; }
.backdrop { position: absolute; inset: 0; border: 0; background: rgba(20,12,6,.35); opacity: 0; }
.panel { position: absolute; left: 7px; right: 7px; bottom: 6px; max-height: 92dvh; overflow: auto; background: linear-gradient(145deg,#f7faf8,#e3ebe7); border-radius: 24px; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(110%); box-shadow:0 -20px 50px rgba(0,0,0,.3),inset 0 1px #fff; }
.sheet.open .backdrop, .sheet.open .panel { opacity: 1; transform: none; transition: .22s ease; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet-head h2 { margin: 0; font-size: 18px; }
.paybox { background: linear-gradient(145deg,#fff,#edf3f0); border-radius: 20px; padding: 18px; text-align: center; box-shadow:0 8px 0 #cbd6d2,0 16px 24px rgba(19,47,38,.12); }
.paybox .sum { font-size: 34px; font-weight: 800; margin: 6px 0 12px; }
#qrbox svg { width: min(240px, 70vw); height: auto; }
.wait-text { color: var(--muted); }
.methods { display: grid; gap: 8px; }
.methods button { text-align: left; background: linear-gradient(145deg,#fff,#edf2ef); border: 1px solid #d4dfda; border-radius: 14px; padding: 12px; box-shadow:0 5px 0 #ccd6d2,0 9px 14px rgba(20,48,39,.08); }
.methods button.selected { border-color: var(--go); color:#fff; background:linear-gradient(145deg,#ff7b36,#d7480d); box-shadow:0 5px 0 #9e300a,0 10px 17px rgba(197,56,8,.22); }
.gps { background: #fff3e0; color: #9a3412; border-radius: 16px; padding: 12px; font-size: 13px; }
@media (max-width: 420px) { .summary-grid { grid-template-columns: repeat(2, 1fr); } .summary-head { align-items: flex-start; flex-direction: column; gap: 3px; } .order-detail-grid { grid-template-columns: 1fr 1fr; } .card .row { gap: 8px; } .amount { font-size: 20px; } }