:root{
 --primary:#ff5b2d;--primary2:#ff7b45;--ink:#182033;--muted:#7e899d;
 --bg:#f6f7fb;--card:#fff;--line:#e9edf4;--green:#20b26b;--red:#ef5350;
 --shadow:0 12px 35px rgba(25,35,55,.08);--radius:22px;
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}.app{max-width:1180px;margin:auto;min-height:100vh}
.topbar{height:76px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(246,247,251,.94);
 position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{width:43px;height:43px;border-radius:14px;
 display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:900;box-shadow:0 8px 20px #ff5b2d33}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy b{font-size:14px}.brand-copy small{font-size:9px;color:var(--muted);letter-spacing:1.3px;margin-top:5px}
.profile-mini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--primary);font-weight:800;text-decoration:none}
.app-main{padding:8px 20px 105px}.eyebrow,.page-heading p{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--primary);margin:0 0 7px}
.welcome{padding:22px 2px 8px}.welcome h1,.page-heading h1{margin:0;font-size:29px;letter-spacing:-.8px}.welcome p,.page-heading span{color:var(--muted);margin:8px 0 0;font-size:14px}
.page-heading{padding:24px 2px 16px}.page-heading.compact{padding-bottom:12px}
.hero{margin:10px 0 24px;padding:26px;border-radius:28px;min-height:225px;color:#fff;overflow:hidden;position:relative;
 background:linear-gradient(135deg,#ff5528,#ff7c47);box-shadow:0 18px 38px #ff5b2d2c}
.hero h2{font-size:30px;line-height:1.06;letter-spacing:-1px;margin:12px 0}.hero p{max-width:450px;color:#fff9;font-size:14px}.hero-car{position:absolute;right:35px;bottom:10px;font-size:100px;filter:drop-shadow(0 15px 10px #0002)}
.pill{display:inline-flex;padding:7px 10px;border-radius:99px;font-size:10px;font-weight:800;background:#ffffff25}.pill.live{background:#fff2;color:#fff}
.primary-btn,.dark-btn,.light-btn{border:0;border-radius:13px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.primary-btn{background:#fff;color:var(--primary);margin-top:6px}.dark-btn{background:var(--ink);color:#fff}.light-btn{background:#f1f3f7;color:var(--ink)}
.search,.search-box{height:50px;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;padding:0 15px;gap:10px;margin:8px 0 22px;box-shadow:0 5px 20px #18203308}
.search input,.search-box input{border:0;outline:0;flex:1;background:transparent;font-size:14px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:25px 2px 12px}.section-head h3{margin:0;font-size:18px}.section-head a{color:var(--primary);font-size:12px;text-decoration:none;font-weight:800}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-grid a{background:#fff;border:1px solid var(--line);padding:15px;border-radius:18px;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.quick-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#fff1ed;color:var(--primary);font-size:20px;margin-bottom:10px}
.quick-grid b,.quick-grid small{display:block}.quick-grid b{font-size:12px}.quick-grid small{color:var(--muted);font-size:10px;margin-top:3px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stats-grid article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:var(--shadow)}
.stats-grid span,.stats-grid small{display:block;color:var(--muted);font-size:11px}.stats-grid strong{font-size:27px;display:block;margin:5px 0}
.vehicle-list{display:grid;gap:12px}.vehicle-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px}
.vehicle-icon{width:48px;height:48px;border-radius:15px;background:#fff0eb;display:grid;place-items:center;font-size:25px}.vehicle-main{flex:1}.vehicle-main b{display:block}.vehicle-main small{color:var(--muted)}.status-dot{width:10px;height:10px;border-radius:50%;background:#aab2c0}.status-dot.online{background:var(--green);box-shadow:0 0 0 5px #20b26b18}
.map-card,.control-card,.filter-card,.panel-card,.profile-menu,.about-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.real-map,.large-map,.history-route{height:430px;border-radius:18px;overflow:hidden;background:#e9edf2}.large-map{height:500px}.tracking-map-wrap{position:relative}.map-floating{position:absolute;top:14px;left:14px;z-index:500;background:#fff;padding:8px 11px;border-radius:99px;font-size:10px;font-weight:900;box-shadow:var(--shadow)}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}
.control-card{margin-top:14px}.control-top{display:flex;justify-content:space-between;align-items:center}.control-top small,.tele-card small{display:block;color:var(--muted);font-size:10px}.control-top strong{font-size:17px}.gps-badge{background:#fff0eb;color:var(--primary);padding:8px 10px;border-radius:10px;font-size:11px;font-weight:900}
.toolbar,.filter-row,.play-actions{display:flex;gap:10px;margin-top:15px}.toolbar>*{flex:1}.input{width:100%;height:45px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff}.filter-row>*:last-child{white-space:nowrap}
.telemetry{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}.tele-card{background:#f7f8fb;border-radius:15px;padding:12px}.tele-card strong{display:block;margin-top:5px}.coords{display:flex;gap:20px;color:var(--muted);font-size:10px;margin-top:12px}.coords b{color:var(--ink)}
.profile-hero{display:flex;align-items:center;gap:15px;padding:25px 2px}.profile-avatar{width:66px;height:66px;border-radius:22px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-size:22px;font-weight:900}.profile-hero p{margin:0;color:var(--primary);font-size:10px;font-weight:900;letter-spacing:1px}.profile-hero h1{margin:4px 0;font-size:24px}.profile-hero span{color:var(--muted);font-size:13px}.profile-hero button{margin-left:auto}.profile-menu{padding:5px}.profile-menu a{display:flex;align-items:center;gap:13px;padding:16px 12px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line)}.profile-menu a:last-child{border-bottom:0}.profile-menu a>span{width:40px;height:40px;border-radius:12px;background:#fff0eb;color:var(--primary);display:grid;place-items:center}.profile-menu div{flex:1}.profile-menu b,.profile-menu small{display:block}.profile-menu small{color:var(--muted);margin-top:3px;font-size:11px}.profile-menu i{font-style:normal;color:var(--muted);font-size:22px}.about-card{margin-top:14px;display:flex;flex-direction:column;gap:5px}.about-card span,.about-card small{color:var(--muted)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1180px);height:78px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:1200;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.bottom-nav a{text-decoration:none;color:#9aa2b1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:20px}.bottom-nav small{font-size:9px}.bottom-nav a.active{color:var(--primary)}.bottom-nav .nav-main{position:relative}.bottom-nav .nav-main i{font-style:normal;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;width:53px;height:53px;border-radius:18px;display:grid;place-items:center;font-size:25px;margin-top:-28px;box-shadow:0 10px 25px #ff5b2d55}.bottom-nav .nav-main small{margin-top:3px}
.loading{text-align:center;color:var(--muted);padding:30px}.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:#182033;color:#fff;padding:11px 15px;border-radius:12px;z-index:2000;font-size:12px;display:none}
@media(max-width:700px){.app-main{padding-left:14px;padding-right:14px}.quick-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.telemetry{grid-template-columns:repeat(2,1fr)}.hero-car{right:-5px;font-size:80px}.hero{min-height:250px}.real-map{height:330px}.large-map{height:390px}.history-route{height:330px}.welcome h1,.page-heading h1{font-size:25px}.bottom-nav{height:74px}.app-main{padding-bottom:100px}}
@media(min-width:701px){.bottom-nav{border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0}}

/* =========================================================
   JJRC TAXIFY V8 - FINAL TRACKING MAP
   ========================================================= */

.tracking-map-card {
    width: 100%;
    margin: 0 0 18px;
}

.tracking-map-wrap {
    position: relative;
    width: 100%;
    height: 430px;
    min-height: 430px;
    overflow: hidden;
    border-radius: 24px;
    background: #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.large-map,
#trackingMap {
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    display: block;
    position: relative;
    z-index: 1;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    font-family: inherit;
    background: #e5e7eb;
}

.map-floating {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 5px 18px rgba(0,0,0,.15);
    font-size: 12px;
    font-weight: 800;
}

.live-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,.14);
}

.map-locate-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
    font-size: 25px;
    cursor: pointer;
}

.jjrc-car-marker {
    background: transparent !important;
    border: 0 !important;
}

.jjrc-car-marker-inner {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111827;
    border: 3px solid #fff;
    box-shadow: 0 5px 16px rgba(0,0,0,.3);
    font-size: 21px;
}

@media (max-width: 700px) {

    .tracking-map-wrap {
        height: 360px;
        min-height: 360px;
        border-radius: 18px;
    }

    .large-map,
    #trackingMap {
        height: 360px !important;
        min-height: 360px !important;
    }

    .jjrc-car-marker-inner {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}


/* =================================================
   JJRC V8 LOGOUT
   ================================================= */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.jjrc-logout-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #222;
    height: 40px;
    padding: 0 13px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.jjrc-logout-btn span {
    font-size: 17px;
    line-height: 1;
}

.jjrc-logout-btn b {
    font-weight: 700;
}

.jjrc-logout-btn:hover {
    background: #f7f7f7;
    box-shadow: 0 6px 18px rgba(0,0,0,.09);
}

.jjrc-logout-btn:active {
    transform: scale(.96);
}

.jjrc-logout-btn:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 600px) {

    .jjrc-logout-btn {
        width: 40px;
        padding: 0;
        border-radius: 13px;
    }

    .jjrc-logout-btn b {
        display: none;
    }

    .topbar-actions {
        gap: 6px;
    }
}