:root {
            --primary: #2563eb;
            --surface: rgba(255, 255, 255, 0.98);
            --text: #0f172a;
            --heart-red: #f43f5e;
            --radius-lg: 28px;
            --radius-md: 18px;
        }

        html, body { margin: 0; padding: 0; height: 100%; width: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; overflow: hidden; }
        .leaflet-marker-icon { background: none !important; border: none !important; box-shadow: none !important; }

        header { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1500; padding: 10px 14px; background: var(--surface); backdrop-filter: blur(20px); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 25px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4); }

        .bus-radar-marker { width: 44px; height: 44px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 8px 20px rgba(0,0,0,0.15); }
        .bus-radar-marker svg { color: var(--primary); width: 22px; height: 22px; }
        
        .fp-animated-container { display: flex; flex-direction: column; align-items: center; }
        .fp-avatar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid white; background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .user-label-fp { background: rgba(15, 23, 42, 0.85); color: white; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 4px; white-space: nowrap; }
        .cluster-small { background: var(--primary); border: 2px solid white; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; width: 35px; height: 35px; }

        .sheet { position: fixed; background: white; z-index: 2000; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,0.12); }
        @media (max-width: 767px) { .sheet { bottom: 0; left: 0; right: 0; height: 85vh; border-radius: 32px 32px 0 0; transform: translateY(105%); } .sheet.open { transform: translateY(0); } }
        @media (min-width: 768px) { .sheet { top: 12px; left: 12px; bottom: 12px; width: 400px; border-radius: 32px; transform: translateX(-110%); } .sheet.open { transform: translateX(0); } }

        .sheet-header-sticky { padding: 24px 20px 15px; border-bottom: 1px solid #f1f5f9; }
        input#search { width: 100%; padding: 15px 20px; border-radius: 16px; border: 1px solid #e2e8f0; background: #f8fafc; box-sizing: border-box; font-family: inherit; margin-top: 15px; }

        #routesList { flex: 1; overflow-y: auto; padding: 15px 0; }
        .route-card { padding: 16px; border-radius: 24px; background: #ffffff; border: 2px solid transparent; margin: 0 16px 12px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        .route-card.selected { border-color: var(--primary); background: #f0f7ff; }
        
        .card-bus-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; position: relative; }
        .is-online .card-bus-icon { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
        .offline .card-bus-icon { background: #f1f5f9; border: 2px dashed #cbd5e1; }
        
        .status-ping { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; background: #22c55e; border: 2px solid white; border-radius: 50%; display: none; }
        .is-online .status-ping { display: block; animation: ping 1.5s infinite; }
        @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }

        .fab { width: 56px; height: 56px; border-radius: 20px; background: white; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.12); cursor: pointer; position: fixed; z-index: 1500; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
        .fab:active { transform: scale(0.9); }
        .fab-loc { right: 16px; bottom: 30px; }
        .fab-menu { right: 16px; bottom: 100px; background: var(--primary); color: white; }
        .fab-drop { right: 16px; bottom: 170px; background: #fffc00; font-size: 24px; }
        .fab-heart { right: 16px; bottom: 240px; color: var(--heart-red); }
        .fab-heart.sharing { background: var(--heart-red); color: white; animation: pulseHeart 1.2s infinite; }
        @keyframes pulseHeart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

        .floating-heart { position: fixed; bottom: 250px; right: 30px; pointer-events: none; z-index: 1400; font-size: 24px; animation: floatUp 2.5s ease-out forwards; }
        @keyframes floatUp { 0% { transform: translateY(0) scale(0.5); opacity: 1; } 100% { transform: translateY(-300px) scale(1.5); opacity: 0; } }

        .sharing-pulse { position: relative; }
        .sharing-pulse::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--heart-red); border-radius: 12px; animation: pulseRing 1.5s infinite; }
        @keyframes pulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }

        .loading-skeleton { padding: 16px; margin: 0 16px 12px; background: #fff; border-radius: 24px; height: 60px; display: flex; align-items: center; gap: 15px; position: relative; overflow: hidden; }
        .loading-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 1.5s infinite; }
        @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
        .sk-icon { width: 46px; height: 46px; background: #f1f5f9; border-radius: 14px; }
        .sk-text { height: 14px; background: #f1f5f9; border-radius: 4px; width: 60%; }

        .sheet-footer-sticky { padding: 20px; background: #f8fafc; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 10px; }
        .download-btn { display: flex; align-items: center; justify-content: center; background: #0f172a; color: white; padding: 14px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 14px; }
        .signout-btn { width: 100%; padding: 14px; border: none; border-radius: 16px; background: #fee2e2; color: #ef4444; font-weight: 800; cursor: pointer; }