:root {
  --deep-cyan:#008581; --med-green:#4C9C8B; --summer-green:#96E4B0;
  --dark-hot-pink:#E4509A; --orange:#E47A20;
  --bg-main:#F6FFFE; --bg-card:#ffffff;
  --text-dark:#162928; --text-mid:#3a5654; --text-light:#688a88;
  --border:#cde8e6;
  --shadow-sm:0 2px 14px rgba(0,133,129,0.07);
  --shadow-md:0 8px 32px rgba(0,133,129,0.13);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px;
  --transition:0.3s ease; --topbar-h:58px; --panel-w:380px;
  --waze-green: #23B272;
}
[data-theme="dark"] {
  --bg-main:#0e1c1b; --bg-card:#162928;
  --text-dark:#e2f0ee; --text-mid:#9dc4c0; --text-light:#6da09b; --border:#1e3a38;
  --shadow-sm:0 2px 14px rgba(0,0,0,.35); --shadow-md:0 8px 32px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Poppins',sans-serif;background:var(--bg-main);color:var(--text-dark);height:100%;width:100%;overflow:hidden;transition:background .4s,color .4s;-webkit-tap-highlight-color:transparent}
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:1100;background:rgba(0,133,129,0.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 4px 20px rgba(0,133,129,0.2)}
[data-theme="dark"] .topbar{background:rgba(14,28,27,0.97)}
.tb-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.tb-logo{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.14);border:1.5px solid rgba(150,228,176,0.25);display:flex;align-items:center;justify-content:center;padding:3px}
.tb-logo img{width:100%;height:100%;object-fit:contain}
.tb-title{font-size:0.88rem;font-weight:700;color:#fff;line-height:1.2}
.tb-sub{font-size:0.6rem;color:var(--summer-green);font-weight:500}
.tb-right{display:flex;align-items:center;gap:8px}
.offline-pill{display:none;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:0.62rem;font-weight:700;color:#fff;background:rgba(228,80,154,0.22);border:1px solid rgba(228,80,154,0.4)}
.offline-pill.show{display:flex}
.off-dot{width:6px;height:6px;border-radius:50%;background:var(--dark-hot-pink);flex-shrink:0}
.tb-back{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.13);border:1.5px solid rgba(255,255,255,0.22);color:#fff;font-size:0.75rem;font-weight:600;text-decoration:none;transition:all var(--transition);white-space:nowrap}
.tb-back:hover{background:rgba(255,255,255,0.22)}
.app-body{position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;display:flex}

.sheet-handle{display:none;flex-direction:column;align-items:center;padding:10px 0 0;cursor:pointer;flex-shrink:0;background:var(--bg-card);border-radius:20px 20px 0 0}
.handle-bar{width:40px;height:4px;border-radius:2px;background:var(--border);margin-bottom:8px}
.sheet-peek{display:flex;align-items:center;justify-content:space-between;padding:0 18px 12px;width:100%}
.peek-title{font-size:0.82rem;font-weight:700;color:var(--text-dark)}
.peek-hint{font-size:0.67rem;color:var(--text-light)}
.css-sheet-arrow{width:20px;height:12px;position:relative;flex-shrink:0;transition:transform .3s}
.css-sheet-arrow::before,.css-sheet-arrow::after{content:'';position:absolute;height:2.5px;width:11px;border-radius:1px;background:var(--text-light);bottom:2px}
.css-sheet-arrow::before{left:0;transform:rotate(-40deg);transform-origin:left bottom}
.css-sheet-arrow::after{right:0;transform:rotate(40deg);transform-origin:right bottom}
.nav-panel.open .css-sheet-arrow{transform:rotate(180deg)}

.nav-panel{width:var(--panel-w);flex-shrink:0;background:var(--bg-card);border-right:1.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform 0.4s cubic-bezier(0.32,0.72,0,1), background .4s;z-index:100}
.nav-panel.hidden{transform:translateX(-100%)}
.panel-head{padding:14px 18px 12px;background:linear-gradient(135deg,var(--deep-cyan) 0%,var(--med-green) 100%);flex-shrink:0;cursor:pointer;}
.ph-row{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.panel-head h1{font-size:0.95rem;font-weight:800;color:#fff}
.panel-head p{font-size:0.67rem;color:rgba(255,255,255,0.72)}
.css-compass{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,0.55);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.offline-notice{display:none;background:rgba(0,133,129,0.08);border-bottom:1.5px solid var(--border);padding:8px 16px;flex-shrink:0;align-items:center;gap:8px;font-size:0.72rem;color:var(--deep-cyan);font-weight:600}
.offline-notice.show{display:flex}
.tiles-notice{display:none;padding:8px 14px;flex-shrink:0;background:rgba(228,80,154,0.06);border-bottom:1.5px solid rgba(228,80,154,0.2);font-size:0.68rem;color:var(--dark-hot-pink);font-weight:500;line-height:1.5}
.tiles-notice.show{display:block}
.panel-body{flex:1;overflow-y:auto;padding:14px 14px 22px}
.panel-body::-webkit-scrollbar{width:4px}
.panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.map-wrap{flex:1;position:relative}
#map{width:100%;height:100%}
.route-form{display:flex;flex-direction:column;gap:10px;margin-bottom:13px}
.input-row{display:flex;align-items:flex-end;gap:9px}
.css-pin{width:18px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding-bottom:9px}
.css-pin-head{width:15px;height:15px;border-radius:50%;border:2.5px solid var(--deep-cyan);position:relative}
.css-pin-head::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:var(--deep-cyan)}
.css-pin-head.dest{background:var(--dark-hot-pink);border-color:var(--dark-hot-pink)}
.css-pin-head.dest::after{display:none}
.css-pin-tail{width:2px;height:7px;background:var(--deep-cyan);border-radius:1px}
.css-pin-tail.dest{background:var(--dark-hot-pink)}
.input-wrap{flex:1;position:relative}
.inp-label{display:block;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--deep-cyan);margin-bottom:4px}
.loc-select{width:100%;padding:9px 28px 9px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-main);color:var(--text-dark);font-family:'Poppins',sans-serif;font-size:0.8rem;cursor:pointer;appearance:none;outline:none;transition:border-color var(--transition),box-shadow var(--transition)}
.loc-select:focus{border-color:var(--deep-cyan);box-shadow:0 0 0 3px rgba(0,133,129,0.12)}
[data-theme="dark"] .loc-select{background:#0e1c1b;color:#e2f0ee;border-color:#1e3a38}
.css-chev{position:absolute;right:8px;bottom:11px;width:10px;height:6px;pointer-events:none}
.css-chev::before,.css-chev::after{content:'';position:absolute;height:2px;width:7px;border-radius:1px;background:var(--text-light);bottom:0}
.css-chev::before{left:0;transform:rotate(40deg);transform-origin:left bottom}
.css-chev::after{right:0;transform:rotate(-40deg);transform-origin:right bottom}
.swap-row{display:flex;align-items:center;gap:9px;padding:0 2px}
.swap-dash{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--border) 0,var(--border) 4px,transparent 4px,transparent 9px)}
.swap-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-light);font-family:'Poppins',sans-serif;font-size:0.7rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--transition)}
.swap-btn:hover{border-color:var(--deep-cyan);color:var(--deep-cyan);background:rgba(0,133,129,0.05)}
[data-theme="dark"] .swap-btn{background:#162928;border-color:#1e3a38}
.mode-lbl{font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--deep-cyan);margin-bottom:6px}
.travel-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mode-btn{padding:7px 4px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-main);color:var(--text-light);cursor:pointer;font-family:'Poppins',sans-serif;font-size:0.64rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all var(--transition)}
.mode-btn.active{border-color:var(--deep-cyan);background:rgba(0,133,129,0.08);color:var(--deep-cyan)}
.mode-btn:hover:not(.active){border-color:var(--med-green);color:var(--med-green)}
[data-theme="dark"] .mode-btn{background:#0e1c1b;border-color:#1e3a38;color:#6da09b}
[data-theme="dark"] .mode-btn.active{background:rgba(0,133,129,0.15)}
.mode-btn.plane-mode.active{border-color:#5B6CF0;background:rgba(91,108,240,0.08);color:#5B6CF0}
.mode-btn.commute-mode.active{border-color:var(--orange);background:rgba(228,122,32,0.08);color:var(--orange)}
.mode-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.go-actions{display:flex;gap:8px}
.go-btn{flex:1;padding:11px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--deep-cyan),var(--med-green));color:#fff;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:0.86rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition)}
.go-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.07)}
.go-btn:disabled{opacity:0.65;cursor:not-allowed;transform:none}
.reroute-btn{display:none;padding:11px;border-radius:var(--radius-sm);background:var(--bg-main);color:var(--deep-cyan);border:1.5px solid var(--deep-cyan);cursor:pointer;font-family:'Poppins',sans-serif;font-size:0.86rem;font-weight:700;align-items:center;justify-content:center;gap:8px;transition:all var(--transition)}
.reroute-btn:hover{background:rgba(0,133,129,0.1)}
.start-nav-btn{display:none;margin-top:8px;width:100%;padding:12px;border-radius:var(--radius-sm);background:var(--waze-green);color:#fff;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:0.9rem;font-weight:800;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 15px rgba(35,178,114,0.3)}
.start-nav-btn.show{display:flex}
.css-spinner{width:14px;height:14px;border:2.5px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.status-msg{display:none;padding:8px 12px;border-radius:var(--radius-sm);font-size:0.75rem;font-weight:600;line-height:1.5;margin-bottom:10px}
.status-msg.show{display:block}
.status-msg.err{background:rgba(228,80,154,0.07);color:var(--dark-hot-pink);border:1px solid rgba(228,80,154,0.2)}
.status-msg.info{background:rgba(0,133,129,0.07);color:var(--deep-cyan);border:1px solid rgba(0,133,129,0.18)}
.status-msg.loading{background:rgba(0,133,129,0.07);color:var(--deep-cyan);border:1px solid rgba(0,133,129,0.18);display:flex;align-items:center;gap:8px}
[data-theme="dark"] .status-msg.err{background:rgba(228,80,154,0.12)}
[data-theme="dark"] .status-msg.info{background:rgba(0,133,129,0.14)}
[data-theme="dark"] .status-msg.loading{background:rgba(0,133,129,0.14)}
.route-bar{display:none;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--deep-cyan),var(--med-green));padding:12px 14px;margin-bottom:11px;color:#fff}
.route-bar.show{display:flex;align-items:center}
.route-bar.plane-bar{background:linear-gradient(135deg,#5B6CF0,#8B9CF8)}
.route-bar.commute-bar{background:linear-gradient(135deg,var(--orange),#e4a020)}
.ri-stat{flex:1;text-align:center}
.ri-val{font-size:1.1rem;font-weight:800;line-height:1}
.ri-lbl{font-size:0.58rem;opacity:.78;text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.ri-sep{width:1px;height:30px;background:rgba(255,255,255,0.25)}
.commute-guide{display:none;margin-bottom:11px;border-radius:var(--radius-md);background:rgba(228,122,32,0.06);border:1.5px solid rgba(228,122,32,0.25);overflow:hidden}
.commute-guide.show{display:block}
.cg-head{background:rgba(228,122,32,0.12);padding:8px 12px;display:flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.8px}
.cg-body{padding:10px 12px;font-size:0.73rem;color:var(--text-dark);line-height:1.6}
[data-theme="dark"] .cg-body{color:var(--text-dark)}
.cg-fare{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:20px;background:rgba(228,122,32,0.1);color:var(--orange);font-size:0.67rem;font-weight:700;border:1px solid rgba(228,122,32,0.25)}
.flight-info{display:none;margin-bottom:11px;border-radius:var(--radius-md);background:rgba(91,108,240,0.05);border:1.5px solid rgba(91,108,240,0.2);overflow:hidden}
.flight-info.show{display:block}
.fi-head{background:rgba(91,108,240,0.1);padding:8px 12px;display:flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:700;color:#5B6CF0;text-transform:uppercase;letter-spacing:.8px}
.fi-body{padding:10px 12px;font-size:0.73rem;color:var(--text-dark);line-height:1.7}
.fi-airports{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:0.69rem;font-weight:600;color:#5B6CF0}
.fi-plane-line{flex:1;height:1px;background:rgba(91,108,240,0.3);position:relative}
.fi-plane-line::after{content:'\F135';font-family:'bootstrap-icons';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;color:#5B6CF0;background:var(--bg-card);padding:0 3px}
.budget-box{display:none;margin-bottom:11px;border-radius:var(--radius-md);background:rgba(150,228,176,0.06);border:1.5px solid rgba(76,156,139,0.25);overflow:hidden}
.budget-box.show{display:block}
.bb-head{background:rgba(76,156,139,0.1);padding:8px 12px;display:flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:700;color:var(--med-green);text-transform:uppercase;letter-spacing:.8px}
.bb-body{padding:10px 12px;font-size:0.73rem;color:var(--text-dark);line-height:1.7}
.bb-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed var(--border)}
.bb-row:last-child{border-bottom:none}
.bb-label{color:var(--text-mid);font-size:0.71rem}
.bb-amount{font-weight:700;color:var(--med-green);font-size:0.75rem}
.bb-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:7px 10px;border-radius:var(--radius-sm);background:rgba(76,156,139,0.1);border:1px solid rgba(76,156,139,0.2)}
.bb-total-label{font-size:0.72rem;font-weight:700;color:var(--text-dark)}
.bb-total-amount{font-size:0.95rem;font-weight:800;color:var(--med-green)}
.mode-note{display:none;margin-bottom:10px;padding:7px 11px;border-radius:var(--radius-sm);background:rgba(228,80,154,0.07);border:1px solid rgba(228,80,154,0.2);font-size:0.7rem;color:var(--dark-hot-pink);font-weight:600}
.mode-note.show{display:block}
.steps-head{display:none;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-light);margin-bottom:8px}
.steps-head.show{display:block}
.osrm-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px;font-size:0.58rem;font-weight:700;background:rgba(0,133,129,0.1);color:var(--deep-cyan);border:1px solid rgba(0,133,129,0.2);margin-left:7px;vertical-align:middle}
.steps-list{display:flex;flex-direction:column;gap:5px}
.step-item{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:var(--radius-sm);background:var(--bg-main);border:1.5px solid var(--border);animation:stepIn .25s ease both}
.step-item.transit{border-color:rgba(228,122,32,0.3);background:rgba(228,122,32,0.03)}
.step-item.flight{border-color:rgba(91,108,240,0.3);background:rgba(91,108,240,0.03)}
[data-theme="dark"] .step-item{background:#0e1c1b}
@keyframes stepIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:translateX(0)}}
.step-num{width:19px;height:19px;border-radius:50%;flex-shrink:0;margin-top:1px;background:var(--deep-cyan);color:#fff;font-size:0.6rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.step-num.dest{background:var(--dark-hot-pink)}
.step-num.transit-num{background:var(--orange)}
.step-num.flight-num{background:#5B6CF0}
.step-text{font-size:0.76rem;line-height:1.5;color:var(--text-dark)}
.step-dist{font-size:0.67rem;color:var(--text-light);margin-top:1px}
.step-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;font-size:0.58rem;font-weight:700;vertical-align:middle}
.step-tag.ferry{background:rgba(228,80,154,0.12);color:var(--dark-hot-pink)}
.step-tag.air{background:rgba(91,108,240,0.12);color:#5B6CF0}
.step-tag.bus{background:rgba(228,122,32,0.12);color:var(--orange)}
.step-tag.jeepney{background:rgba(76,156,139,0.15);color:var(--med-green)}
.p-divider{height:4px;margin:13px 0 10px;background:linear-gradient(90deg,var(--deep-cyan),var(--summer-green));border-radius:2px;opacity:.28}
.lm-lbl{font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-light);margin-bottom:8px}
.lm-chips{display:flex;flex-wrap:wrap;gap:6px}
.lm-chip{padding:4px 10px;border-radius:20px;background:rgba(0,133,129,0.07);color:var(--deep-cyan);font-size:0.7rem;font-weight:600;cursor:pointer;border:1.5px solid rgba(0,133,129,0.16);transition:all var(--transition);display:flex;align-items:center;gap:4px}
.lm-chip:hover{background:var(--deep-cyan);color:#fff;border-color:var(--deep-cyan)}
[data-theme="dark"] .lm-chip{background:rgba(0,133,129,0.12);border-color:rgba(0,133,129,0.22)}
.lm-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 10px;gap:10px}
.empty-ring{width:50px;height:50px;border-radius:50%;border:2px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center}
.empty-ring::before{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:11px solid var(--deep-cyan)}
.empty-ring::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:11px solid var(--dark-hot-pink)}
.empty-ring-c{width:9px;height:9px;border-radius:50%;background:var(--bg-main);border:2px solid var(--border);position:relative;z-index:1}
.empty-title{font-size:0.86rem;font-weight:700;color:var(--text-dark)}
.empty-sub{font-size:0.74rem;color:var(--text-light);line-height:1.6;max-width:210px}
.map-badge{position:absolute;top:12px;right:12px;z-index:500;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:7px;font-size:0.74rem;font-weight:600;color:var(--text-dark)}
[data-theme="dark"] .map-badge{background:#162928;border-color:#1e3a38;color:#e2f0ee}
.map-badge-acc{color:var(--deep-cyan);font-weight:800}
.mb-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--deep-cyan),var(--med-green));flex-shrink:0}
.waze-ui-top{position:absolute;top:15px;left:15px;right:15px;background:var(--waze-green);border-radius:var(--radius-md);padding:15px 20px;display:none;align-items:center;gap:15px;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:2000;color:#fff;transform:translateY(-100px);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.waze-ui-top.active{display:flex;transform:translateY(0)}
.waze-turn-icon{font-size:36px;font-weight:900;line-height:1}
.waze-turn-details{flex:1}
.waze-turn-dist{font-size:1.4rem;font-weight:800;line-height:1.1}
.waze-turn-text{font-size:0.9rem;font-weight:600;opacity:0.9}
.waze-ui-bottom{position:absolute;bottom:15px;left:15px;right:15px;background:#fff;border-radius:var(--radius-md);padding:15px 20px;display:none;justify-content:space-between;align-items:center;box-shadow:0 -10px 30px rgba(0,0,0,0.15);z-index:2000;transform:translateY(100px);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.waze-ui-bottom.active{display:flex;transform:translateY(0)}
[data-theme="dark"] .waze-ui-bottom{background:#162928;color:#fff}
.waze-stats{display:flex;flex-direction:column}
.waze-eta{font-size:1.5rem;font-weight:800;color:var(--text-dark)}
[data-theme="dark"] .waze-eta{color:#fff}
.waze-dist{font-size:0.8rem;font-weight:600;color:var(--text-light)}
.waze-stop-btn{background:rgba(228,80,154,0.15);color:var(--dark-hot-pink);border:none;padding:10px 20px;border-radius:20px;font-weight:700;font-family:'Poppins';font-size:0.9rem;cursor:pointer;display:flex;align-items:center;gap:6px}
.toast-notification{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(0,133,129,0.95);color:#fff;padding:10px 20px;border-radius:30px;font-size:0.8rem;font-weight:700;box-shadow:0 4px 15px rgba(0,0,0,0.2);z-index:3000;opacity:0;pointer-events:none;transition:all 0.3s}
.toast-notification.show{opacity:1;transform:translateX(-50%) translateY(0)}
.zoom-hint{position:absolute;bottom:50px;right:12px;z-index:500;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 11px;font-size:0.66rem;color:var(--text-light);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:6px}
[data-theme="dark"] .zoom-hint{background:#162928;border-color:#1e3a38}
.css-mouse{width:11px;height:17px;border-radius:6px;border:1.5px solid var(--text-light);position:relative;flex-shrink:0}
.css-mouse::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:2px;height:4px;border-radius:1px;background:var(--text-light);animation:mscroll 1.8s ease infinite}
@keyframes mscroll{0%,100%{opacity:1;transform:translateX(-50%) translateY(0)}70%{opacity:0;transform:translateX(-50%) translateY(4px)}}
.map-style-switcher{position:absolute;bottom:40px;left:12px;z-index:500}
.mss-toggle{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--radius-sm);background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-mid);font-family:'Poppins',sans-serif;font-size:0.7rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition)}
.mss-toggle:hover{border-color:var(--deep-cyan);color:var(--deep-cyan)}
[data-theme="dark"] .mss-toggle{background:#162928;border-color:#1e3a38;color:#9dc4c0}
.mss-panel{display:none;position:absolute;bottom:calc(100% + 8px);left:0;min-width:180px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow-md);gap:6px;flex-direction:column}
.mss-panel.open{display:flex}
[data-theme="dark"] .mss-panel{background:#162928;border-color:#1e3a38}
.mss-panel-title{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:2px}
.mss-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mss-option{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border-radius:var(--radius-sm);border:1.5px solid var(--border);cursor:pointer;transition:all var(--transition);font-size:0.65rem;font-weight:600;color:var(--text-light)}
.mss-option:hover{border-color:var(--deep-cyan);color:var(--deep-cyan)}
.mss-option.active{border-color:var(--deep-cyan);background:rgba(0,133,129,0.07);color:var(--deep-cyan)}
[data-theme="dark"] .mss-option{border-color:#1e3a38}
.mss-swatch{width:32px;height:20px;border-radius:4px;border:1.5px solid rgba(0,0,0,0.08)}
.maplibregl-popup-content{font-family:'Poppins',sans-serif !important;border-radius:10px !important;box-shadow:0 8px 32px rgba(0,133,129,0.18) !important;padding:12px 14px !important;min-width:150px;border:1px solid var(--border)}
.maplibregl-popup-close-button{font-size:18px;color:var(--text-light);padding:2px 8px;line-height:1}
.maplibregl-ctrl-group{border-radius:8px !important;overflow:hidden;border:1.5px solid var(--border) !important;box-shadow:var(--shadow-sm) !important}
.maplibregl-ctrl-group button{background-color:var(--bg-card) !important;width:32px !important;height:32px !important}
[data-theme="dark"] .maplibregl-ctrl-group button{filter:invert(0.8)}
.maplibregl-ctrl-attrib{font-size:9px !important;opacity:.5}
[data-theme="dark"] .maplibregl-popup-content{background:#162928 !important;color:#e2f0ee !important}
@media(max-width:768px){
  html,body{overflow:hidden}
  .app-body{flex-direction:column}
  .map-wrap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}
  .nav-panel{position:absolute;bottom:0;left:0;right:0;width:100%;height:auto;max-height:85vh;border-right:none;border-top:1.5px solid var(--border);border-radius:20px 20px 0 0;z-index:100;transform:translateY(calc(100% - 58px));transition:transform .38s cubic-bezier(0.32,0.72,0,1);box-shadow:0 -8px 40px rgba(0,0,0,0.15);display:flex;flex-direction:column}
  .nav-panel.open{transform:translateY(0)}
  .nav-panel.hidden{transform:translateY(120%)}
  .sheet-handle{display:flex}
  .panel-body{max-height:calc(85vh - 125px);overflow-y:auto}
  .map-badge{top:8px;right:8px;padding:7px 10px;font-size:0.7rem}
  .zoom-hint{display:none}
  .offline-notice{display:none !important}
  .map-style-switcher{bottom:55px}
  .lm-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .lm-chips::-webkit-scrollbar{display:none}
  .lm-chip{white-space:nowrap;flex-shrink:0}
  .waze-ui-top{top:calc(var(--topbar-h) + 10px);left:10px;right:10px;padding:12px}
  .waze-ui-bottom{bottom:10px;left:10px;right:10px;padding:12px}
  .waze-turn-dist{font-size:1.2rem}
  .waze-eta{font-size:1.2rem}
  .toast-notification{top:20px;width:90%;text-align:center}
}