.customer-contact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:18px 0}
.customer-contact h3{font-size:14px;margin:0 0 12px}
.whatsapp-action{display:flex;align-items:center;justify-content:center;min-height:48px;text-align:center;text-decoration:none;border-radius:12px;padding:12px 16px;box-sizing:border-box;background:#111;color:#fff;font-weight:600}
.whatsapp-action:focus-visible{outline:3px solid #477fdb;outline-offset:3px}
.notification-panel{padding:16px 18px;border:1px solid var(--line);border-radius:14px;margin:20px 0;background:#fafafa}
.notification-panel strong{font-size:14px}.notification-panel .helper{margin:6px 0 0}
.notification-panel button{margin-top:12px;min-height:44px}
.handler-label{display:block;font-size:12px;color:var(--muted);margin-top:12px}
@media(max-width:640px){.notification-panel{padding:14px}.customer-contact .helper{font-size:12px;line-height:1.6}}
.notification-panel[hidden] { display: none !important; }
.contact-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-buttons a { flex: 1; min-width: 110px; text-align: center; text-decoration: none; }
.contact-options .contact-link { overflow-wrap: anywhere; }
.app-shell { padding-bottom: env(safe-area-inset-bottom); }
.topbar { height: 76px; }
.brand { font-size: 12px; letter-spacing: .06em; }
.page-heading { margin-bottom: 8px; }
.page-heading .eyebrow { font-size: 13px; margin-bottom: 12px; color: #696d70; }
.page-heading h1 { font-size: 38px; letter-spacing: -1.6px; font-weight: 650; }
.workspace-intro { color: #787d80; margin: 0 0 28px; font-size: 15px; }
.sync-line { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; font-size: 11px; }
.timezone-note { margin: 0 0 18px; font-size: 11px; color: #7a7e81; }
.trip-card { border-radius: 18px; padding: 23px; }
.trip-time { font-size: 22px; margin: 18px 0; }
.trip-card .route { font-size: 14px; gap: 15px; }
.card-footer { font-size: 13px; padding-top: 18px; margin-top: 21px; }
.card-footer span:first-child { font-weight: 600; }
.card-footer span:last-child { font-size: 11px; color: #73777a; }
.handler-label { font-size: 11px; margin-top: 8px; }
dialog { width: min(94vw,540px); border-radius: 24px; }
.dialog-inner { padding: 28px; }
.dialog-inner h2 { font-size: 29px; font-weight: 650; margin-top: 22px; }
.dialog-subtitle { font-size: 14px; }
.dialog-top .icon-button { width: 40px; height: 40px; font-size: 22px; }
.detail-route { padding: 22px; border-radius: 16px; background: #f6f6f6; }
.detail-route .route { font-size: 14px; gap: 18px; }
.detail-grid { grid-template-columns: 1fr; border-bottom: 0; padding: 20px 0 0; }
.detail-grid small { font-size: 11px; }
.detail-grid strong { font-size: 14px; }
.customer-contact { padding: 22px 0; margin: 22px 0; }
.customer-contact h3 { font-size: 13px; color: #72777a; font-weight: 500; margin: 0 0 10px; }
.contact-identity { display: grid; gap: 5px; }
.contact-identity a { font-size: 14px; overflow-wrap: anywhere; }
.contact-identity a:first-child { font-size: 18px; font-weight: 600; letter-spacing: -.25px; }
.contact-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.contact-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 4px; min-height: 76px; border-radius: 14px; background: #f4f4f4; color: #191b1d; font-size: 11px; font-weight: 600; text-decoration: none; }
.contact-action.whatsapp-action { background: #111; color: #fff; margin: 0; }
.contact-action svg { width: 22px; height: 22px; }
.contact-help { font-size: 11px; color: #7b7f82; margin-top: 16px; }
.contact-help summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.dialog-inner .primary { min-height: 50px; border-radius: 13px; font-size: 14px; }
.dialog-inner .secondary { min-height: 46px; border-radius: 12px; }
.dialog-inner input[type=checkbox] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: middle; accent-color: #111; }
@media(max-width:640px) {
 .topbar { height: 70px; padding: 0 22px; }
 .brand { font-size: 10px; letter-spacing: .04em; }
 main { padding: 28px 22px; }
 .page-heading h1 { font-size: 34px; }
 .trip-card { padding: 21px; }
 dialog { width: 100%; max-width: 100%; max-height: 93dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
 .dialog-inner { padding: 22px 22px calc(28px + env(safe-area-inset-bottom)); }
 .dialog-inner h2 { font-size: 27px; }
 .contact-actions { gap: 7px; }
}
.app-shell:has(.tabbar:not([hidden])) { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.tabbar button { min-height: 52px; }
.route-estimate { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.route-estimate h3 { margin: 0; font-size: 13px; }
.route-estimate .section-title { margin-bottom: 6px; }
.maps-attribution { font: normal 400 12px Arial,sans-serif; letter-spacing: normal; white-space: nowrap; color: #5e5e5e; }
.route-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.route-timestamp, .route-error { font-size: 12px; line-height: 1.5; }
.route-estimate .section-title { flex-wrap: wrap; gap: 8px; }
.route-estimate [data-route-result] { font-size: 17px; font-weight: 600; color: #1f1f1f; }