*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:linear-gradient(135deg,#111827,#1f2937);color:#111827;min-height:100vh}
button,input{font-family:inherit}
.page{width:100%;max-width:540px;margin:0 auto;padding:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:10px 4px 25px}
.logo{font-size:25px;font-weight:800}
.online,.driver-status{display:flex;align-items:center;gap:7px;font-size:13px;background:rgba(255,255,255,.1);padding:8px 12px;border-radius:20px}
.online span,.driver-status span{width:9px;height:9px;background:#22c55e;border-radius:50%;display:inline-block}
.hero{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:28px;padding:25px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;box-shadow:0 18px 45px rgba(0,0,0,.25)}
.small-title{font-size:13px;margin-bottom:5px;opacity:.75}
.hero h1{margin:0;font-size:34px}.hero p{margin:8px 0 0;font-size:15px;opacity:.75}.taxi-icon{font-size:65px}
.booking-card{background:#fff;border-radius:28px;padding:22px;box-shadow:0 20px 45px rgba(0,0,0,.16)}
.card-title{font-size:22px;font-weight:800;margin-bottom:20px}
.input-group{margin-bottom:16px}.input-group label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.input-group input{width:100%;border:2px solid #eef0f3;background:#f8fafc;border-radius:14px;padding:15px;font-size:16px;outline:none}
.location-box{display:flex;gap:12px;align-items:center;background:#f8fafc;padding:10px;border-radius:16px;margin-bottom:12px}
.location-icon{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:#fef3c7;display:flex;justify-content:center;align-items:center;font-size:19px}
.destination-icon{background:#e0e7ff}.no-margin{margin-bottom:0}.location-box .input-group input{background:#fff;padding:12px}
.secondary-button,.route-button,.order-button{width:100%;border:0;border-radius:15px;padding:15px;font-size:16px;font-weight:800;cursor:pointer}
.secondary-button{background:#eef2ff;color:#3730a3}.route-button{margin-top:10px;background:#111827;color:#fff}
.order-button{margin-top:12px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;font-size:18px}
.order-button:disabled,.route-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed}
.info-box,.status{margin-top:12px;text-align:center;padding:12px;border-radius:14px;background:#f1f5f9;min-height:22px}
.success-box{background:#ecfdf5!important;color:#166534}.error-box{background:#fef2f2!important;color:#991b1b}
#map{width:100%;height:320px;margin:16px 0;border-radius:18px;overflow:hidden;border:1px solid #e5e7eb}
.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.route-stat,.route-price{background:#f8fafc;border-radius:15px;padding:12px;text-align:center}
.route-stat span,.route-price span{display:block;font-size:12px;color:#64748b}.route-stat strong,.route-price strong{display:block;margin-top:5px;font-size:18px}
.route-price{background:#ecfdf5;color:#166534}.estimate-note{grid-column:1/-1;font-size:11px;text-align:center;color:#94a3b8}
.hidden{display:none}
.waiting-box{background:#fff7ed;border-radius:15px;padding:15px;color:#9a3412}
.accepted-box{background:#ecfdf5;border-radius:18px;padding:20px;color:#166534}.accepted-icon{font-size:40px}.accepted-title{font-size:21px;font-weight:800;margin-top:7px}
.driver-page{max-width:720px;margin:auto;padding:20px}.driver-header{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:20px}.driver-logo{font-size:25px;font-weight:800}.driver-subtitle{font-size:12px;opacity:.7}
.driver-profile{display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:20px}.driver-avatar{width:60px;height:60px;border-radius:50%;background:#f59e0b;display:flex;justify-content:center;align-items:center;font-size:30px}.driver-profile h2{margin:0 0 4px}.driver-profile div:last-child{opacity:.7;font-size:13px}
.driver-connection{background:rgba(255,255,255,.1);color:#fff;padding:12px;border-radius:14px;text-align:center;margin-bottom:15px}
.driver-order{background:#fff;border-radius:25px;padding:20px;box-shadow:0 20px 45px rgba(0,0,0,.18)}.new-order-badge{display:inline-block;background:#fef3c7;color:#92400e;padding:7px 10px;border-radius:10px;font-size:12px;font-weight:700}.order-number{margin-top:10px;font-size:13px;color:#64748b}
.customer-section{display:flex;align-items:center;gap:12px;margin:18px 0}.customer-avatar{width:45px;height:45px;border-radius:14px;background:#f1f5f9;display:flex;justify-content:center;align-items:center;font-size:22px}.customer-name{font-weight:800;font-size:18px}.customer-phone{color:#64748b;margin-top:4px}
.call-button{display:block;text-align:center;text-decoration:none;background:#16a34a;color:#fff;padding:14px;border-radius:14px;font-weight:800;margin-bottom:18px}
.route{background:#f8fafc;border-radius:18px;padding:15px}.route-row{display:flex;align-items:center;gap:12px}.route-dot{width:28px;height:28px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:10px}.pickup-dot{background:#dcfce7;color:#16a34a}.destination-dot{background:#e0e7ff;color:#4f46e5}.route-row small{display:block;color:#94a3b8;margin-bottom:3px}.route-row strong{font-size:15px}.route-line{width:2px;height:22px;background:#cbd5e1;margin-right:13px}
.driver-price-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.driver-price-card div{background:#ecfdf5;color:#166534;border-radius:14px;padding:13px;text-align:center;font-weight:800}
.driver-actions{display:grid;grid-template-columns:1fr 110px;gap:10px;margin-top:18px}.accept-button,.reject-button{border:0;border-radius:14px;padding:15px;font-size:16px;font-weight:800;cursor:pointer}.accept-button{background:#16a34a;color:#fff}.reject-button{background:#f1f5f9;color:#475569}
.empty-orders{background:#fff;border-radius:25px;padding:40px 20px;text-align:center}.empty-icon{font-size:45px}.empty-orders h3{margin:10px 0 5px}.empty-orders p{color:#64748b}.accepted-driver{background:#fff;border-radius:25px;padding:40px;text-align:center;font-size:40px}.accepted-driver h2{font-size:25px}.accepted-driver p{font-size:15px;color:#64748b}
@media(max-width:600px){.page,.driver-page{padding:14px}.hero{padding:20px}.hero h1{font-size:28px}.taxi-icon{font-size:50px}.route-summary,.driver-price-card{grid-template-columns:1fr}.driver-actions{grid-template-columns:1fr}.route-price{grid-column:auto}}