/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a26;--surface3:#22222e;
  --border:#2a2a3a;--border2:#3a3a4e;
  --text:#e8e8f0;--text2:#a0a0b8;--text3:#6a6a82;
  --accent:#14b8a6;--accent2:#0d9488;--accent-glow:rgba(20,184,166,.15);
  --danger:#ef4444;--warn:#f59e0b;--blue:#3b82f6;
  --radius:12px;--radius-sm:8px;--radius-lg:20px;
  --phone-w:375px;--phone-h:812px;
  --font:'Inter',system-ui,sans-serif;--font-display:'Outfit',system-ui,sans-serif;
}
html{font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}

/* ===== BG ORBS ===== */
.bg-orb{position:fixed;border-radius:50%;filter:blur(120px);opacity:.3;pointer-events:none;z-index:0}
.bg-orb-1{width:600px;height:600px;background:var(--accent);top:-200px;left:-200px;animation:float 20s ease-in-out infinite}
.bg-orb-2{width:500px;height:500px;background:#7c3aed;bottom:-200px;right:-100px;animation:float 25s ease-in-out infinite reverse}
.bg-orb-3{width:400px;height:400px;background:var(--blue);top:50%;left:50%;animation:float 22s ease-in-out infinite 5s}
@keyframes float{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-40px)}50%{transform:translate(-20px,30px)}75%{transform:translate(40px,20px)}}

/* ===== LAYOUT ===== */
.app-layout{display:flex;height:100vh;position:relative;z-index:1}

/* ===== SIDEBAR ===== */
.sidebar{width:260px;background:rgba(18,18,26,.85);backdrop-filter:blur(20px);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease;z-index:10}
.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid var(--border)}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.sidebar-logo-img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.sidebar-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#7c3aed);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-subtitle{font-size:.75rem;color:var(--text3);margin-top:4px;letter-spacing:1px;text-transform:uppercase}
.screen-nav{flex:1;overflow-y:auto;padding:12px 10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.nav-section-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);padding:16px 12px 6px;font-weight:600}
.nav-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;border:none;background:transparent;color:var(--text2);font-size:.85rem;font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}
.nav-item:hover{background:var(--accent-glow);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(20,184,166,.2),rgba(124,58,237,.1));color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav-item i{width:18px;text-align:center;font-size:.8rem}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);text-align:center}
.version-badge{display:inline-block;font-size:.7rem;padding:4px 12px;border-radius:20px;background:var(--surface3);color:var(--text3);letter-spacing:.5px}

/* ===== PHONE STAGE ===== */
.phone-stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;overflow:hidden}
.stage-header{display:flex;align-items:center;gap:16px;width:100%;max-width:600px;margin-bottom:16px}
.sidebar-toggle{display:none;background:var(--surface2);border:1px solid var(--border);color:var(--text2);width:40px;height:40px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem}
.stage-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;flex:1}
.stage-controls{display:flex;align-items:center;gap:8px}
.control-btn{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.control-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.screen-counter{font-size:.8rem;color:var(--text3);min-width:50px;text-align:center}

/* ===== PHONE FRAME ===== */
.phone-container{flex:1;display:flex;align-items:center;justify-content:center;perspective:1000px;zoom:0.75}
.phone-frame{width:var(--phone-w);height:var(--phone-h);background:#000;border-radius:48px;position:relative;box-shadow:0 0 0 2px #333,0 0 0 6px #1a1a1a,0 20px 60px rgba(0,0,0,.6),0 0 80px rgba(20,184,166,.08);overflow:hidden;animation:phoneIn .8s ease-out}
@keyframes phoneIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:160px;height:34px;background:#000;border-radius:0 0 20px 20px;z-index:20;display:flex;align-items:center;justify-content:center}
.notch-camera{width:12px;height:12px;border-radius:50%;background:#1a1a2e;border:2px solid #2a2a3a}
.status-bar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;z-index:15;color:#fff;font-size:.75rem;font-weight:600}
.status-icons{display:flex;gap:6px;font-size:.65rem}
.phone-screen{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:none}
.phone-screen::-webkit-scrollbar{display:none}
.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;background:rgba(255,255,255,.3);border-radius:3px;z-index:20}

/* ===== INTERACTION HINTS ===== */
.interaction-hints{display:flex;gap:20px;margin-top:12px;font-size:.75rem;color:var(--text3)}
.interaction-hints i{margin-right:4px;color:var(--accent)}

/* ===== INFO PANEL ===== */
.info-panel{width:280px;background:rgba(18,18,26,.85);backdrop-filter:blur(20px);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.info-header{padding:24px 20px 16px;border-bottom:1px solid var(--border)}
.info-header h2{font-family:var(--font-display);font-size:1.1rem;font-weight:700}
.info-content{flex:1;overflow-y:auto;padding:16px 20px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.info-section{margin-bottom:20px}
.info-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:6px;font-weight:600}
.info-value{font-size:.85rem;color:var(--text2);line-height:1.5}
.flow-diagram{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flow-item{padding:6px 12px;border-radius:6px;background:var(--surface3);font-size:.75rem;color:var(--text2);white-space:nowrap}
.flow-item.active{background:var(--accent);color:#fff;font-weight:600}
.flow-arrow{color:var(--text3);font-size:.6rem}
.component-list{display:flex;flex-wrap:wrap;gap:6px}
.component-chip{padding:5px 10px;border-radius:6px;background:var(--surface3);font-size:.72rem;color:var(--text2);display:flex;align-items:center;gap:5px}
.component-chip i{font-size:.6rem;color:var(--accent)}
.interaction-list{display:flex;flex-direction:column;gap:6px}
.interaction-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text2)}
.interaction-item i{color:var(--accent);font-size:.7rem;width:16px;text-align:center}

/* ===== MOBILE SCREEN STYLES ===== */
.m-screen{padding-top:54px;padding-bottom:90px;min-height:100%;font-family:var(--font);display:flex;flex-direction:column;position:relative}

/* --- Common Elements --- */
.m-back{display:flex;align-items:center;gap:6px;padding:12px 20px;font-size:.85rem;color:#333;cursor:pointer;border:none;background:none}
.m-back i{font-size:.7rem}
.m-page-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#111;padding:0 24px;margin-bottom:4px}
.m-page-subtitle{font-size:.85rem;color:#888;padding:0 24px;margin-bottom:20px}
.m-input-group{padding:0 24px;margin-bottom:14px}
.m-input-label{font-size:.72rem;color:#999;margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:.5px}
.m-input{width:100%;padding:14px 16px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:.9rem;font-family:var(--font);outline:none;transition:border .2s;background:#fafafa}
.m-input:focus{border-color:var(--accent)}
.m-select{width:100%;padding:14px 16px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:.9rem;font-family:var(--font);outline:none;background:#fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 16px center;-webkit-appearance:none;appearance:none}
.m-btn{display:block;width:calc(100% - 48px);margin:16px 24px;padding:16px;border:none;border-radius:14px;font-size:.95rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .2s;text-align:center}
.m-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 20px rgba(20,184,166,.3)}
.m-btn-primary:active{transform:scale(.97)}
.m-btn-outline{background:transparent;border:1.5px solid #ddd;color:#333}
.m-btn-dark{background:#111;color:#fff}
.m-link{color:var(--accent);text-decoration:none;font-weight:500;font-size:.85rem}
.m-divider{height:1px;background:#eee;margin:16px 24px}
.m-text-center{text-align:center}
.m-text-sm{font-size:.8rem;color:#888;padding:0 24px}

/* --- Bottom Tab Bar --- */
.m-tab-bar{height:80px;background:#ebebeb;border-top:1px solid #ddd;display:flex;align-items:center;justify-content:space-around;padding-bottom:16px;z-index:10}
.m-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.6rem;color:#aaa;cursor:pointer;border:none;background:none;padding:6px 12px;transition:color .2s}
.m-tab.active{color:var(--accent)}
.m-tab i{font-size:1.1rem}

/* --- Floating Action Button --- */
.fab{width:56px;height:56px;border-radius:28px;background:var(--accent);color:#fff;border:none;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(20,184,166,.4);cursor:pointer;z-index:15;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;padding:0;white-space:nowrap}
.fab .fab-text{max-width:0;opacity:0;font-size:.9rem;font-weight:600;font-family:var(--font);transition:all .3s cubic-bezier(.4,0,.2,1);margin-left:0}
.fab:hover, .fab:active{width:145px;padding:0 20px}
.fab:hover .fab-text, .fab:active .fab-text{max-width:100px;opacity:1;margin-left:8px}

/* --- Fixed UI Overlay --- */
.fixed-ui-overlay{position:absolute;bottom:0;left:0;right:0;z-index:20;pointer-events:none}
.fab-container{position:absolute;bottom:100px;right:20px;pointer-events:auto;display:none}
.tab-bar-container{position:absolute;bottom:0;left:0;right:0;pointer-events:auto;display:none}

/* --- Side Menu --- */
.m-side-menu{position:absolute;top:0;left:0;right:0;bottom:0;z-index:30;pointer-events:none;display:flex}
.m-side-menu.open{pointer-events:auto}
.m-side-menu-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background .3s;pointer-events:none}
.m-side-menu.open .m-side-menu-overlay{background:rgba(0,0,0,.4);pointer-events:auto}
.m-side-menu-content{position:relative;width:240px;background:#fff;height:100%;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:2px 0 12px rgba(0,0,0,.1)}
.m-side-menu.open .m-side-menu-content{transform:translateX(0)}
.m-side-menu-header{padding:20px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:0 0 16px 0}
.m-side-menu-header h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff}
.m-side-menu-header button{background:none;border:none;font-size:1.2rem;color:#fff;cursor:pointer}
.m-side-menu-links{display:flex;flex-direction:column;padding:10px 0;flex:1}
.m-side-link{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:.9rem;color:#333;font-weight:600;background:none;border:none;cursor:pointer;text-align:left;transition:background .2s}
.m-side-link:hover{background:#f5f5f5}
.m-side-link i{width:20px;text-align:center;color:var(--accent);font-size:1rem}

/* --- Login Screen --- */
.login-welcome{padding:40px 24px 10px}
.login-welcome h1{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:#111}
.login-welcome p{font-size:.85rem;color:#aaa;margin-top:2px}
.login-phone-row{display:flex;align-items:center;gap:8px;padding:0 24px;margin:20px 0 14px}
.login-country{padding:14px 12px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:.85rem;background:#fafafa;color:#333;min-width:60px;text-align:center}
.login-phone-input{flex:1}
.login-logo{display:flex;justify-content:center;margin:10px 0 20px}
.login-logo img{height:44px;border-radius:10px}

/* --- Register Screen --- */
.register-header{padding:20px 24px 10px}
.register-header h1{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:#111}
.register-header p{font-size:.85rem;color:#888;margin-top:2px}
.register-terms{font-size:.72rem;color:#999;padding:0 24px;line-height:1.5}
.register-terms a{color:var(--accent);text-decoration:underline}
.register-check{display:flex;align-items:center;gap:8px;padding:12px 24px}
.register-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.register-check label{font-size:.8rem;color:#666}

/* --- Home Screen --- */
.home-greeting{padding:20px 24px 4px}
.home-greeting .greeting-sub{font-size:.72rem;color:#aaa;text-transform:uppercase;letter-spacing:1px}
.home-greeting h1{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#111;margin-top:2px}
.home-section-title{font-size:.85rem;font-weight:600;color:#333;padding:20px 24px 8px}
.vehicle-card{margin:0 24px 10px;padding:16px;border:1.5px solid #eee;border-radius:14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s}
.vehicle-card:hover{border-color:var(--accent);background:#f0fdfa}
.vehicle-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f0fdfa,#ccfbf1);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent2)}
.vehicle-info h3{font-size:.9rem;font-weight:600;color:#111}
.vehicle-info p{font-size:.75rem;color:#999}

/* --- Routes Screen --- */
.routes-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.routes-header h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#111}
.routes-tabs{display:flex;gap:0;padding:0 20px;margin-bottom:12px}
.routes-tab{flex:1;text-align:center;padding:10px;font-size:.8rem;font-weight:500;color:#aaa;border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font)}
.routes-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.routes-map{width:100%;height:320px;background:#e8e8e8;position:relative;overflow:hidden}
.routes-map img{width:100%;height:100%;object-fit:cover}
.map-pin{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2}
.map-pin.user{top:55%;left:45%;background:var(--blue)}
.map-pin.dest{top:30%;right:25%;background:var(--danger)}
.route-options{padding:16px 20px}
.route-option{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid #eee;border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.route-option:hover{border-color:var(--accent);background:#f0fdfa}
.route-option-icon{width:36px;height:36px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#666}
.route-option-info h4{font-size:.85rem;font-weight:600;color:#111}
.route-option-info p{font-size:.72rem;color:#999}
.route-option-time{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--accent)}

/* --- Search Screen --- */
.search-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;margin:8px 16px;background:#f5f5f5;border-radius:14px}
.search-bar i{color:#999;font-size:.9rem}
.search-bar input{flex:1;border:none;background:transparent;font-size:.9rem;font-family:var(--font);outline:none;color:#333}
.search-results{padding:10px 20px}
.search-result-label{font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:600}
.search-result-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer}
.search-result-icon{width:32px;height:32px;border-radius:8px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#aaa;flex-shrink:0}
.search-result-icon.highlight{background:#e8f5e9;color:#4caf50}
.search-result-text h4{font-size:.85rem;font-weight:500;color:#111}
.search-result-text p{font-size:.72rem;color:#999;margin-top:2px}

/* --- Navigation Screen --- */
.nav-direction{background:linear-gradient(135deg,#111,#1a1a2e);padding:16px 20px;display:flex;align-items:center;gap:14px}
.nav-arrow{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff}
.nav-text h3{font-size:1rem;font-weight:600;color:#fff}
.nav-text p{font-size:.75rem;color:rgba(255,255,255,.6)}
.nav-badge{margin-left:auto;padding:6px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:600}
.nav-map{width:100%;height:340px;position:relative;overflow:hidden}
.nav-map img{width:100%;height:100%;object-fit:cover}
.nav-footer{background:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.nav-eta h3{font-size:1.3rem;font-weight:700;color:#111}
.nav-eta p{font-size:.72rem;color:#999}
.nav-actions{display:flex;gap:10px}
.nav-action-btn{width:40px;height:40px;border-radius:10px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#666;cursor:pointer}

/* --- Community Feed --- */
.community-header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.community-header h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#111}
.community-post{margin:0 16px 16px;border:1.5px solid #eee;border-radius:16px;overflow:hidden}
.community-post-img{width:100%;height:180px;object-fit:cover;background:#f5f5f5}
.community-post-body{padding:14px 16px}
.community-post-title{font-size:.9rem;font-weight:600;color:#111;margin-bottom:4px}
.community-post-meta{font-size:.72rem;color:#999}
.community-post-actions{display:flex;gap:16px;padding:8px 16px 14px;border-top:1px solid #f0f0f0;margin-top:8px}
.community-action{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#999;cursor:pointer;background:none;border:none;font-family:var(--font)}
.community-action:hover{color:var(--accent)}

/* --- Community Report --- */
.report-upload{margin:16px 24px;border:2px dashed #ddd;border-radius:16px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#bbb;cursor:pointer;transition:all .2s}
.report-upload:hover{border-color:var(--accent);color:var(--accent)}
.report-upload i{font-size:2rem}
.report-upload span{font-size:.8rem}

/* --- Ranking Screen --- */
.ranking-header{padding:16px 24px}
.ranking-header h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#111}
.ranking-tabs{display:flex;gap:8px;padding:0 24px;margin-bottom:16px}
.ranking-tab{padding:8px 16px;border-radius:20px;font-size:.78rem;font-weight:500;border:1.5px solid #eee;background:#fff;color:#888;cursor:pointer;font-family:var(--font);transition:all .2s}
.ranking-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ranking-list{padding:0 20px}
.ranking-item{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px solid #eee;border-radius:14px;margin-bottom:8px;transition:all .2s;cursor:pointer}
.ranking-item:hover{border-color:var(--accent);background:#f0fdfa}
.ranking-pos{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.ranking-pos.gold{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}
.ranking-pos.silver{background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#fff}
.ranking-pos.bronze{background:linear-gradient(135deg,#d97706,#b45309);color:#fff}
.ranking-pos.normal{background:#f5f5f5;color:#666}
.ranking-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e0f2fe,#bae6fd);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--blue)}
.ranking-info h4{font-size:.85rem;font-weight:600;color:#111}
.ranking-info p{font-size:.72rem;color:#999}
.ranking-score{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--accent)}

/* --- Vehicle Profiling --- */
.vehicle-title{padding:20px 24px 4px}
.vehicle-title h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#111}

/* --- Notification Screens --- */
.notif-screen{padding-top:0;padding-bottom:0;min-height:100%;background:#000;position:relative;display:flex;flex-direction:column}
.notif-statusbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#fff;font-size:.75rem;font-weight:600;flex-shrink:0}
.notif-statusbar .status-icons{display:flex;gap:6px;font-size:.65rem}
.notif-banner{margin:8px 12px;padding:12px 14px;border-radius:16px;display:flex;align-items:center;gap:12px;animation:slideDown .4s ease-out}
.notif-banner.passable{background:linear-gradient(135deg,#1a3a2e,#0d3320);border:1px solid rgba(20,184,166,.3)}
.notif-banner.danger{background:linear-gradient(135deg,#3a1a1a,#331010);border:1px solid rgba(239,68,68,.3)}
.notif-banner-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-banner-icon.passable{background:rgba(20,184,166,.2);color:var(--accent)}
.notif-banner-icon.danger{background:rgba(239,68,68,.2);color:#ef4444}
.notif-banner-text{flex:1;overflow:hidden}
.notif-banner-text h4{font-size:.82rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-banner-text p{font-size:.7rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.notif-body{flex:1}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* --- Alert Dialog --- */
.alert-screen{padding-top:0;padding-bottom:0;min-height:100%;background:#111;display:flex;flex-direction:column}
.alert-statusbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#fff;font-size:.75rem;font-weight:600}
.alert-body{flex:1;display:flex;align-items:flex-end;justify-content:center;padding:0 30px 40px}
.alert-dialog{background:#fff;border-radius:20px;padding:24px;width:100%;text-align:center;animation:alertPop .35s ease-out}
.alert-dialog.passable{box-shadow:0 0 40px rgba(20,184,166,.15)}
.alert-dialog.danger{box-shadow:0 0 40px rgba(239,68,68,.15)}
.alert-dialog-icon{width:48px;height:48px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.alert-dialog-icon.passable{background:#e6f9f5;color:var(--accent2)}
.alert-dialog-icon.danger{background:#fef2f2;color:#ef4444}
.alert-dialog h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#111;margin-bottom:6px}
.alert-dialog p{font-size:.8rem;color:#666;line-height:1.5;margin-bottom:16px}
.alert-dialog-btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:.9rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .2s}
.alert-dialog-btn.passable{background:var(--accent);color:#fff}
.alert-dialog-btn.danger{background:#ef4444;color:#fff}
@keyframes alertPop{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* --- Heavy Traffic (HTD) --- */
.htd-screen{padding-top:0;padding-bottom:0;min-height:100%;background:#f5f5f5;display:flex;flex-direction:column}
.htd-statusbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#333;font-size:.75rem;font-weight:600}
.htd-card{margin:20px 20px 0;background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 4px 24px rgba(0,0,0,.06);text-align:center;animation:alertPop .4s ease-out}
.htd-card h2{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#111;margin-bottom:8px}
.htd-card p{font-size:.82rem;color:#888;line-height:1.4}
.htd-options{padding:20px;display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-bottom:40px}
.htd-option{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:14px;border:1.5px solid #eee;cursor:pointer;transition:all .2s}
.htd-option:hover{border-color:var(--accent);background:#f0fdfa}
.htd-option-icon{width:40px;height:40px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#666}
.htd-option-text{font-size:.88rem;font-weight:500;color:#222}

/* --- Slide-up panel --- */
.slideup-panel{background:#fff;border-radius:20px 20px 0 0;padding:20px;box-shadow:0 -4px 30px rgba(0,0,0,.1);animation:slideUp .35s ease-out}
.slideup-handle{width:40px;height:4px;border-radius:2px;background:#ddd;margin:0 auto 16px}
.slideup-title{font-size:.95rem;font-weight:600;color:#111;margin-bottom:16px;border-bottom:1px solid #eee;padding-bottom:12px}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){.info-panel{display:none}}
@media(max-width:800px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:100}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:flex;align-items:center;justify-content:center}
  .phone-frame{transform:scale(.85);transform-origin:top center}
}
@media(max-width:500px){
  .phone-frame{transform:scale(.7);transform-origin:top center}
  .stage-header{flex-wrap:wrap}
}

/* ===== DARK MODE (Mobile Screens) ===== */
.dark-mode .m-screen{background:#121212 !important}
.dark-mode .phone-screen{background:#121212}

/* --- Text Colors --- */
.dark-mode .login-welcome h1,
.dark-mode .register-header h1,
.dark-mode .m-page-title,
.dark-mode .community-post-title,
.dark-mode .community-header h2,
.dark-mode .routes-header h2,
.dark-mode .ranking-header h2,
.dark-mode .vehicle-title h2,
.dark-mode .ranking-info h4,
.dark-mode .route-option-info h4,
.dark-mode .search-result-text h4,
.dark-mode .htd-card h2,
.dark-mode .htd-option-text,
.dark-mode .alert-dialog h3,
.dark-mode .nav-eta h3,
.dark-mode .slideup-title,
.dark-mode .vehicle-info h3{color:#e8e8f0 !important}

.dark-mode .login-welcome p,
.dark-mode .register-header p,
.dark-mode .m-page-subtitle,
.dark-mode .m-text-sm,
.dark-mode .register-terms,
.dark-mode .community-post-meta,
.dark-mode .community-action,
.dark-mode .route-option-info p,
.dark-mode .search-result-text p,
.dark-mode .ranking-info p,
.dark-mode .vehicle-info p,
.dark-mode .htd-card p,
.dark-mode .alert-dialog p,
.dark-mode .nav-eta p{color:#a0a0b8 !important}

/* --- Inputs & Form Elements --- */
.dark-mode .m-input{background:#1e1e1e;border-color:#444;color:#e8e8f0}
.dark-mode .m-input::placeholder{color:#888}
.dark-mode .m-select{background-color:#1e1e1e;border-color:#444;color:#e8e8f0}
.dark-mode .login-country{background:#1e1e1e;border-color:#444;color:#e8e8f0}
.dark-mode .m-btn-outline{background:#1e1e1e !important;border-color:#444;color:#e8e8f0}
.dark-mode .m-btn-dark{background:#e8e8f0;color:#121212}

/* --- Dividers & Borders --- */
.dark-mode .m-divider{background:#333}

/* --- Cards & Containers --- */
.dark-mode .community-post{border-color:#333;background:#1e1e1e}
.dark-mode .community-post-body{background:#1e1e1e}
.dark-mode .community-post-actions{border-top-color:#333}
.dark-mode .ranking-item{border-color:#333;background:#1e1e1e}
.dark-mode .ranking-item:hover{border-color:var(--accent);background:#1a3a2e}
.dark-mode .route-option{border-color:#333;background:#1e1e1e !important}
.dark-mode .route-option:hover{border-color:var(--accent);background:#1a3a2e !important}
.dark-mode .vehicle-card{border-color:#333;background:#1e1e1e}
.dark-mode .vehicle-card:hover{border-color:var(--accent);background:#1a3a2e}
.dark-mode .htd-screen{background:#121212 !important}
.dark-mode .htd-card{background:#1e1e1e;box-shadow:0 4px 24px rgba(0,0,0,.2)}
.dark-mode .htd-option{background:#1e1e1e;border-color:#333}
.dark-mode .htd-option:hover{border-color:var(--accent);background:#1a3a2e}
.dark-mode .htd-option-icon{background:#333;color:#a0a0b8}
.dark-mode .htd-statusbar{color:#e8e8f0}
.dark-mode .report-upload{border-color:#444;color:#6a6a82;background:#1e1e1e}
.dark-mode .report-upload:hover{border-color:var(--accent);color:var(--accent)}
.dark-mode .search-bar{background:#1e1e1e}
.dark-mode .search-bar input{color:#e8e8f0}
.dark-mode .search-result-item{border-bottom-color:#333}
.dark-mode .search-result-icon{background:#333;color:#a0a0b8}

/* --- Tab Bar --- */
.dark-mode .m-tab-bar{background:rgba(26,26,46,.95);border-top-color:#2a2a3a}
.dark-mode .m-tab{color:#6a6a82}
.dark-mode .m-tab.active{color:var(--accent)}

/* --- Side Menu --- */
.dark-mode .m-side-menu-content{background:#121212}
.dark-mode .m-side-link{color:#e8e8f0}
.dark-mode .m-side-link:hover{background:rgba(255,255,255,0.08)}

/* --- Back Button --- */
.dark-mode .m-back{color:#e8e8f0}

/* --- Routes Tabs --- */
.dark-mode .routes-tab{border-color:#333;background:#1e1e1e;color:#888}
.dark-mode .routes-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* --- Ranking Tabs --- */
.dark-mode .ranking-tab{border-color:#333;background:#1e1e1e;color:#888}
.dark-mode .ranking-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* --- Navigation Screen --- */
.dark-mode .nav-footer{background:#1e1e1e}
.dark-mode .nav-action-btn{background:#333;border-color:#444;color:#a0a0b8}

/* --- Alert & Slideup --- */
.dark-mode .alert-screen{background:#121212 !important}
.dark-mode .alert-dialog{background:#1e1e1e}
.dark-mode .alert-dialog-btn{background:#333;color:#e8e8f0}
.dark-mode .slideup-panel{background:#1e1e1e;box-shadow:0 -4px 30px rgba(0,0,0,.3)}
.dark-mode .slideup-handle{background:#444}
.dark-mode .slideup-title{border-bottom-color:#333}

/* --- FAB stays the same (accent) --- */

/* --- Inline bg overrides for JS-injected whites --- */
.dark-mode [style*="background:#fff"]{background:#1e1e1e !important}
.dark-mode [style*="background:#fafafa"]{background:#121212 !important}
.dark-mode [style*="background:#f5f7f5"]{background:#121212 !important}
.dark-mode [style*="background:#f5f5f5"]{background:#1e1e1e !important}
.dark-mode [style*="border:1.5px solid #eee"]{border-color:#333 !important}
.dark-mode [style*="border:1.5px solid #e0e0e0"]{border-color:#444 !important}
.dark-mode [style*="border:1px solid #eee"]{border-color:#333 !important}
.dark-mode [style*="border-bottom:1px solid #eee"]{border-bottom-color:#333 !important}
.dark-mode [style*="color:#111"]{color:#e8e8f0 !important}
.dark-mode [style*="color:#333"]{color:#c8c8d8 !important}
.dark-mode [style*="color:#444"]{color:#b0b0c0 !important}
.dark-mode [style*="color:#666"]{color:#a0a0b8 !important}
.dark-mode [style*="color:#888"]{color:#8080a0 !important}
.dark-mode [style*="color:#999"]{color:#6a6a82 !important}
.dark-mode [style*="background:#fafafa"]{background:#1e1e1e !important}
.dark-mode [style*="border:1.5px solid #ddd"]{border-color:#444 !important}
.dark-mode [style*="border-bottom:1px solid #f0f0f0"]{border-bottom-color:#333 !important}

/* --- reCAPTCHA dark --- */
.dark-mode [style*="background: #fafafa"]{background:#1e1e1e !important}
.dark-mode [style*="border: 1px solid #d3d3d3"]{border-color:#444 !important}

/* --- Smooth transition --- */
.phone-screen, .phone-screen *{transition:background-color .3s ease, color .3s ease, border-color .3s ease}

/* --- Global Components --- */
.gray-container { background: #ebebeb !important; border: 1px solid #ddd !important; }
.white-card { background: #fff !important; border: 1px solid #e5e5e5 !important; }

.dark-mode .gray-container { background: #1e1e1e !important; border-color: #333 !important; }
.dark-mode .white-card { background: #1a1a1a !important; border-color: #333 !important; }
.dark-mode [style*="color:#555"] { color: #b0b0c0 !important; }

.ranking-item:hover { border-color: var(--accent) !important; background: #f0fdfa !important; }
.reward-btn { transition: all 0.2s ease; }
.reward-btn:hover { border-color: var(--accent) !important; background: #f0fdfa !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,184,166,0.15); }

.dark-mode .ranking-item:hover, .dark-mode .gray-container:hover { border-color: var(--accent) !important; background: #1a3a2e !important; }
.dark-mode .reward-btn:hover { border-color: var(--accent) !important; background: #1a3a2e !important; }

.hover-green { transition: border-color 0.2s, color 0.2s; cursor: pointer; }
.hover-green:hover { border-color: var(--accent) !important; }

/* --- Liked Heart State --- */
.community-action.liked { color: #ef4444 !important; }
.community-action.liked i { color: #ef4444; }
.community-action.liked:hover { color: #dc2626 !important; }

/* --- Comments Popup Animation --- */
@keyframes slideUpModal {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInBg {
  from { opacity: 0; }
  to { opacity: 1; }
}