:root{--yellow:#ffc928;--red:#ed2b2b;--blue:#165dff;--ink:#111;--muted:#717171;--line:#e5e5e5;--bg:#f5f5f3}*{box-sizing:border-box}body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}.brand{display:flex;align-items:center;gap:10px;font:800 22px Manrope;color:inherit;text-decoration:none}.brand b{display:grid;place-items:center;width:34px;height:34px;background:var(--red);color:#fff;border-radius:7px}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr}.login-art{background:var(--yellow);padding:38px 6vw;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-art:after{content:"";width:300px;height:300px;border-radius:50%;background:var(--blue);position:absolute;right:-100px;bottom:-120px}.login-art span,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#666}.login-art h1{font:800 clamp(45px,5vw,76px)/.96 Manrope;margin:18px 0;letter-spacing:-4px}.login-art p{font-size:17px}.login-card{background:#fff;padding:50px clamp(30px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.login-card h2{font:800 35px Manrope;margin:10px 0 4px;letter-spacing:-2px}.login-card>p{color:var(--muted);margin:0 0 27px}.login-card label,.modal label{font-size:11px;font-weight:700;display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.login-card input,.modal input,.modal select,.modal textarea{border:1px solid #ccc;padding:13px;background:#fff;outline:none}.login-card input:focus,.modal input:focus{border-color:var(--blue)}.login-card>button,.modal form>button{border:0;background:var(--blue);color:#fff;padding:14px;font-weight:700;cursor:pointer}.login-card small{color:var(--red);min-height:20px;margin-top:10px}.app{min-height:100vh;display:grid;grid-template-columns:230px 1fr}.app aside{position:fixed;left:0;top:0;bottom:0;width:230px;background:#111;color:#fff;padding:27px 18px;display:flex;flex-direction:column}.app aside .brand{padding:0 10px}.workspace{font-size:9px;color:#777;letter-spacing:1.8px;padding:35px 12px 12px}.app nav{display:flex;flex-direction:column;gap:4px}.app nav button{border:0;background:transparent;color:#888;text-align:left;padding:12px 14px;font-weight:600;cursor:pointer}.app nav button span{margin-left:11px}.app nav button.active,.app nav button:hover{background:#252525;color:#fff}.user{margin-top:auto;border-top:1px solid #333;padding:18px 4px 0;display:grid;grid-template-columns:35px 1fr 25px;align-items:center;gap:8px}.user>span{width:34px;height:34px;background:var(--yellow);color:#111;display:grid;place-items:center;border-radius:50%;font-weight:800}.user div{display:flex;flex-direction:column}.user b{font-size:11px}.user small{font-size:9px;color:#777}.user button{border:0;background:none;color:#888;cursor:pointer}.app main{grid-column:2;padding:34px 42px 60px;max-width:1500px;width:100%}.app main>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.app h1{font:800 38px Manrope;margin:6px 0;letter-spacing:-2.5px}.live{font-size:10px;background:#fff;padding:9px 12px}.live i{display:inline-block;width:7px;height:7px;background:#42b557;border-radius:50%;margin-right:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;padding:22px;border-top:4px solid var(--yellow)}.stat:nth-child(2){border-color:var(--blue)}.stat:nth-child(3){border-color:var(--red)}.stat h3{font:800 30px Manrope;margin:7px 0}.stat p{font-size:11px;color:var(--muted);margin:0}.panel{background:#fff;margin-top:18px;padding:22px}.panel-head,.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel h2,.section-title h2{font:800 21px Manrope;margin:4px 0}.action{border:0;background:var(--blue);color:#fff;padding:10px 14px;font-size:11px;font-weight:700;cursor:pointer}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#888;font-size:9px;letter-spacing:1px;padding:11px;border-bottom:1px solid var(--line)}td{padding:13px 11px;border-bottom:1px solid #eee}td b{font-size:12px}.badge{display:inline-block;padding:5px 8px;border-radius:20px;background:#eee;font-size:9px;font-weight:700;text-transform:capitalize}.badge.confirmed{background:#fff0c2}.badge.assigned,.badge.on_the_way{background:#dce8ff;color:#1649b8}.badge.delivered,.badge.available{background:#dff5e4;color:#14712c}.badge.cancelled,.badge.offline{background:#f3dddd;color:#9b2929}.table-action{border:0;background:#eee;padding:7px 9px;cursor:pointer;font-size:10px}.danger{color:#b51d1d}.empty{padding:45px;text-align:center;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;display:grid;place-items:center}.modal-backdrop[hidden]{display:none}.modal{background:#fff;width:min(520px,calc(100% - 30px));max-height:90vh;overflow:auto;padding:32px;position:relative}.modal h2{font:800 27px Manrope;margin:7px 0 23px}.close{position:absolute;right:16px;top:13px;border:0;background:none;font-size:27px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{flex-direction:row!important;align-items:center}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);opacity:0;background:#111;color:#fff;padding:12px 18px;border-left:5px solid var(--yellow);z-index:50;font-size:11px;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}.rider-body-page{background:#f4f4f2}.rider-login{min-height:100vh;display:grid;place-items:center;background:var(--yellow)}.rider-login .login-card{width:min(470px,calc(100% - 30px));box-shadow:12px 12px 0 var(--blue)}.rider-login .brand{margin-bottom:55px}.rider-app header{height:72px;background:#fff;padding:0 max(4vw,25px);display:flex;align-items:center;justify-content:space-between}.rider-app header>div{display:flex;align-items:center;gap:16px}.rider-app header button,#refresh{border:0;background:#eee;padding:9px 12px;cursor:pointer}.rider-app main{max-width:1000px;margin:auto;padding:35px 25px}.rider-status{background:var(--blue);color:#fff;padding:32px;display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.rider-status .eyebrow{color:#c7d7ff}.rider-status h1{font:800 35px Manrope;margin:7px 0}.rider-status p{margin:0;color:#dce6ff}.rider-status select{padding:12px 25px;border:0;font-weight:700}.rider-orders{display:grid;gap:14px}.rider-order{background:#fff;padding:20px;border-left:5px solid var(--yellow)}.rider-order header{height:auto;padding:0;background:none}.rider-order h3{margin:0}.rider-order .route{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0;padding:15px;background:#f5f5f3}.rider-order small{color:var(--muted)}.rider-actions{display:flex;gap:8px;flex-wrap:wrap}.rider-actions button{border:0;padding:9px 12px;font-size:10px;font-weight:700;cursor:pointer}.rider-actions .primary{background:var(--blue);color:#fff}.rider-actions .complete{background:var(--yellow)}@media(max-width:800px){.login-screen{grid-template-columns:1fr}.login-art{display:none}.app{display:block}.app aside{position:static;width:100%;height:auto;flex-direction:row;align-items:center;padding:12px;overflow:auto}.workspace,.user{display:none}.app nav{flex-direction:row;margin-left:auto}.app nav button span{display:none}.app main{padding:25px 16px}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.rider-status{align-items:start;gap:20px;flex-direction:column}.rider-order .route{grid-template-columns:1fr}}
