:root{--navy:#0c1f3d;--blue:#246bfd;--orange:#ff6b2c;--ink:#17233b;--muted:#738098;--line:#e9edf4;--bg:#f5f7fb;--green:#16b57a}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg)}h1,h2,b,.brand,.side-brand{font-family:Outfit,sans-serif}h1,h2,p{margin:0}.login-body{min-height:100vh;background:#eaf0fb}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-hero{position:relative;overflow:hidden;padding:55px 9%;color:#fff;background:linear-gradient(140deg,#091937,#153c79 68%,#1d5bd1)}.login-hero:after{content:'';position:absolute;width:620px;height:620px;border:1px solid #ffffff2b;border-radius:50%;right:-230px;bottom:-360px;box-shadow:0 0 0 50px #ffffff08,0 0 0 110px #ffffff08}.brand{display:flex;align-items:center;gap:13px;letter-spacing:1px;font-size:25px;position:relative;z-index:1}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--orange);border-radius:14px;color:#fff;font-size:22px}.brand strong{display:block;color:#ff9c58}.brand small{display:block;font:700 9px 'DM Sans';letter-spacing:3px;color:#b4c6e8}.hero-copy{position:relative;z-index:1;margin-top:17vh;max-width:570px}.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;color:#4b76d2;margin-bottom:9px}.hero-copy .eyebrow{color:#91b8ff}.orange{color:var(--orange)}.hero-copy h1{font-size:clamp(40px,5vw,67px);line-height:1.05;letter-spacing:-2px}.hero-copy em,.live-card em{color:#ff9b66;font-style:normal}.hero-copy p{line-height:1.7;color:#ccd8ee;font-size:16px;margin-top:21px;max-width:485px}.stat-row{z-index:1;position:absolute;bottom:55px;display:flex;gap:36px}.stat-row div{border-left:2px solid var(--orange);padding-left:12px}.stat-row b{display:block;font-size:20px}.stat-row span{font-size:11px;color:#b4c6e8}.login-card{align-self:center;justify-self:center;background:#fff;border-radius:26px;width:min(430px,87%);padding:45px;box-shadow:0 20px 65px #10285c1c}.login-card h2{font-size:28px;letter-spacing:-.7px}.muted{color:var(--muted);margin:8px 0 27px;font-size:14px}form label{display:block;font-size:12px;font-weight:700;margin:17px 0 0;color:#38445a}input,select,textarea{font:14px 'DM Sans';width:100%;border:1px solid #dfe5ee;background:#fafcff;border-radius:10px;padding:13px 14px;margin-top:8px;outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#3f7afa;box-shadow:0 0 0 3px #246bfd16}.primary-btn{border:0;background:var(--blue);color:#fff;width:100%;padding:14px 17px;border-radius:10px;font:700 14px 'DM Sans';margin-top:25px;cursor:pointer;box-shadow:0 9px 18px #246bfd38;transition:.2s}.primary-btn:hover{transform:translateY(-2px);background:#1357e7}.primary-btn i{margin-left:8px}.alert,.toast{padding:12px;border-radius:9px;font-size:13px;background:#fff1ec;color:#b84719;margin:15px 0}.demo-box{margin-top:23px;background:#f1f6ff;border-radius:10px;padding:12px;font-size:11px;color:#60708a;line-height:1.75}.demo-box b{color:#2e5aad;display:block}.demo-box code{background:#dce7ff;padding:1px 5px;border-radius:3px}.mobile-brand{display:none}.app-body{min-height:100vh}.sidebar{position:fixed;z-index:5;width:245px;top:0;bottom:0;background:#0b1e3d;color:#c0cce1;padding:28px 17px;display:flex;flex-direction:column}.side-brand{color:#fff;text-decoration:none;font-size:18px;display:flex;gap:10px;align-items:center;padding:0 12px 32px}.side-brand i{background:var(--orange);padding:9px;border-radius:9px}.side-brand b{color:#ff8b4c}.sidebar nav{display:grid;gap:7px}.sidebar nav a,.logout{color:#abb9d0;text-decoration:none;padding:13px;border-radius:10px;font-size:13px;cursor:pointer}.sidebar nav a i,.logout i{width:24px}.sidebar nav a.active,.sidebar nav a:hover{color:#fff;background:#ffffff15}.side-help{margin-top:auto;padding:15px 13px;border-radius:12px;background:#ffffff0d;font-size:11px;line-height:1.5}.side-help i{color:#70a1ff}.side-help b,.side-help span{display:block}.logout{margin-top:12px}.main{margin-left:245px;padding:28px 38px 50px;max-width:1550px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.crumb{font-size:10px;letter-spacing:1.3px;font-weight:bold;color:#8290a6}.topbar h1{font-size:26px;letter-spacing:-.5px;margin-top:3px}.profile{display:flex;align-items:center;gap:10px;font-size:12px}.profile b,.profile small{display:block}.profile small{color:var(--muted);margin-top:3px}.avatar{height:39px;width:39px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#ff8352,#f25525);display:grid;place-items:center;font:bold 14px Outfit}.menu-btn{display:none}.toast{background:#eafff6;color:#128657;margin:0 0 17px}.welcome-banner{min-height:177px;border-radius:19px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;color:#fff;background:linear-gradient(110deg,#153a80,#286fe9)}.welcome-banner:after{content:'';position:absolute;right:-45px;top:-200px;width:420px;height:420px;border-radius:50%;border:55px solid #ffffff0d}.welcome-banner .eyebrow{color:#a9c7ff}.welcome-banner h2{font-size:27px;letter-spacing:-.5px}.welcome-banner p{font-size:13px;color:#dce8ff;max-width:520px;line-height:1.6;margin-top:7px}.banner-icon{z-index:1;color:#fff2;font-size:100px;margin-right:55px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.metric{padding:18px;background:#fff;border-radius:15px;display:flex;gap:13px;align-items:center;box-shadow:0 5px 17px #20396608}.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.blue{color:#2d70f4;background:#eaf1ff}.orange{color:#e86627}.metric-icon.orange{background:#fff1e9}.violet{color:#8959db;background:#f2ebff}.green{color:#16a36f;background:#e7fbf3}.metric small{display:block;font-size:9px;letter-spacing:.8px;color:#8390a5;font-weight:bold}.metric b{font-size:23px;display:block;margin:2px 0}.metric em{display:block;font-style:normal;color:#8792a3;font-size:10px}.metric em.good{color:#10a56b}.content-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:20px}.panel{background:#fff;border-radius:16px;padding:24px;box-shadow:0 5px 17px #20396608}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel-head h2,.panel h2{font-size:20px;letter-spacing:-.3px}.icon-button{border:0;background:#f1f5fb;color:#4c5e7d;width:34px;height:34px;border-radius:9px}.vehicle-list{display:grid}.vehicle-row{display:grid;grid-template-columns:42px 1fr auto 35px;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.vehicle-row:last-child{border:0}.car-icon{color:#4e7bea;background:#edf3ff;border-radius:11px;height:40px;display:grid;place-items:center}.vehicle-info b,.vehicle-info span,.vehicle-info small{display:block}.vehicle-info b{font-size:13px}.vehicle-info span{font-size:11px;color:#637089;margin:2px 0}.vehicle-info small{font-size:10px;color:#a0aabd}.vehicle-status{text-align:right}.vehicle-status small{display:block;font-size:10px;color:#7b8699;margin-top:5px}.status{border-radius:20px;padding:5px 8px;font-size:10px;font-weight:bold;white-space:nowrap}.status.pending{background:#fff3db;color:#bd7611}.status.assigned{background:#e9f1ff;color:#2368d9}.status.on_field{background:#f0eaff;color:#8151d6}.status.stopped,.status.yard{background:#e5f9f0;color:#159361}.status.warning{background:#fff0eb;color:#d95725}.status.let_go{background:#eef0f4;color:#69758a}.assign-btn{border:0;background:#f0f5fd;color:#3971d6;border-radius:8px;width:32px;height:32px;cursor:pointer}.quick-card{background:linear-gradient(145deg,#142d5e,#0c1c3b);color:#fff}.quick-card .eyebrow,.live-card .eyebrow{color:#a8c5ff}.quick-card h2{font-size:22px}.quick-card p,.live-card p{font-size:12px;line-height:1.6;color:#b9c8e7;margin:6px 0 16px}.quick-card select,.quick-card input,.quick-card textarea{background:#ffffff11;border-color:#ffffff20;color:#fff;margin-top:10px}.quick-card textarea{height:62px;resize:none}.status-pills{display:flex;gap:5px;margin-top:10px}.status-pills label{margin:0;position:relative}.status-pills input{position:absolute;opacity:0}.status-pills span{display:block;padding:7px 8px;background:#ffffff13;border:1px solid #ffffff1e;border-radius:8px;font-size:10px}.status-pills input:checked+span{background:#3679f5;border-color:#6094f8}.quick-card .primary-btn{background:var(--orange);margin-top:10px}.live-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#eff7ff,#fff)}.live-card:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#437ce327 1px,transparent 1px);background-size:13px 13px}.live-card>*{position:relative}.live-card .eyebrow{color:#3973d9}.live-card em{color:#246bfd}.live-pill{display:inline-block;background:#e2f9ee;color:#169864;border-radius:15px;padding:7px 10px;font-size:10px;font-weight:bold}.live-pill i{font-size:7px;margin-right:4px}.activity{display:flex;gap:8px;margin-top:22px;padding-top:14px;border-top:1px solid #dce7f5;font-size:11px;line-height:1.5}.activity i{color:#ff6733}.map-dot{position:absolute;border-radius:50%;height:11px;width:11px;background:#ff6b35;box-shadow:0 0 0 7px #ff6b3530}.map-dot.one{right:55px;top:70px}.map-dot.two{right:100px;bottom:53px;background:#2673ef}.agents-panel{margin-top:20px}.text-link{color:#2c6eea;font-size:11px;font-weight:bold}.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.agent{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:11px;border-radius:10px;font-size:11px}.agent .avatar{width:31px;height:31px;border-radius:9px;font-size:11px}.agent b,.agent span{display:block}.agent span{color:#8290a5;font-size:10px;margin-top:3px}.agent>i{font-size:8px;margin-left:auto}.online{color:#1bb97b}.offline{color:#b9c1ce}dialog{border:0;border-radius:17px;padding:0;box-shadow:0 20px 60px #14265044;width:min(390px,90%)}dialog::backdrop{background:#08163188}.modal-form{padding:29px}.modal-form h2{font-size:22px}.modal-form .close{float:right;border:0;background:#eef2f7;width:27px;height:27px;border-radius:8px;font-size:20px}.empty{font-size:13px;color:#8390a5;padding:25px;text-align:center}.mobile-nav{display:none}
@media(max-width:1000px){.main{padding:25px}.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.live-card{min-height:220px}.login-hero{padding:45px}.login-card{padding:35px}}
@media(max-width:700px){.login-shell{display:block}.login-hero{display:none}.login-body{background:linear-gradient(155deg,#091b3c 0,#173c7b 40%,#f5f7fb 40%)}.login-card{width:calc(100% - 28px);margin:0 auto;padding:31px 24px;transform:translateY(95px);border-radius:23px}.mobile-brand{display:block;font:800 18px Outfit;color:#102650;margin-bottom:30px}.mobile-brand i{color:var(--orange)}.mobile-brand span{color:var(--orange)}.sidebar{transform:translateX(-100%);transition:.25s;width:255px;box-shadow:10px 0 40px #00102a66}.sidebar.open{transform:none}.main{margin:0;padding:19px 15px 88px}.topbar{margin-bottom:20px}.topbar h1{font-size:21px}.profile>div:not(.avatar){display:none}.menu-btn{display:grid;place-items:center;border:0;background:#fff;width:36px;height:36px;border-radius:10px;color:var(--navy);margin-right:9px}.topbar>div:first-of-type{margin-right:auto}.welcome-banner{min-height:170px;padding:23px;border-radius:17px}.welcome-banner h2{font-size:23px;max-width:250px}.welcome-banner p{max-width:280px;font-size:11px}.banner-icon{position:absolute;font-size:80px;right:-46px;bottom:-20px}.metric-grid{gap:10px;margin:14px 0}.metric{padding:13px 10px;gap:8px;border-radius:13px}.metric-icon{height:34px;width:34px;border-radius:9px;font-size:13px}.metric b{font-size:19px}.metric em{font-size:8px}.panel{padding:18px;border-radius:14px}.vehicle-row{grid-template-columns:36px 1fr 31px;gap:9px}.vehicle-status{display:none}.car-icon{height:36px}.vehicle-info span{font-size:10px}.vehicle-info small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.agent-grid{grid-template-columns:1fr}.mobile-nav{position:fixed;z-index:4;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);height:68px;display:flex;justify-content:space-around;padding:10px 5px env(safe-area-inset-bottom)}.mobile-nav a{color:#8793a6;text-decoration:none;font-size:9px;text-align:center;display:grid;gap:4px}.mobile-nav i{font-size:17px}.mobile-nav a.active{color:var(--blue)}.quick-card{min-height:310px}.login-card h2{font-size:25px}}