* { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#000; overflow:hidden; }
        #map { height:100vh; width:100vw; }

        .leaflet-top { z-index:1002 !important; }

        #searchBar {
            position:fixed; top:calc(37px + env(safe-area-inset-top,0px)); left:0; right:0; z-index:999;
            padding:6px 12px; background:rgba(0,0,0,0.85);
            backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
            border-bottom:1px solid rgba(255,255,255,0.06);
        }
        #searchInput {
            width:100%; padding:10px 14px; border:none; border-radius:10px;
            background:rgba(255,255,255,0.1); color:#fff; font-size:16px; outline:none;
        }
        #searchInput::placeholder { color:#888; }
        #searchResults {
            display:none; position:fixed; top:calc(81px + env(safe-area-inset-top,0px)); left:12px; right:12px;
            background:rgba(20,20,25,0.98); border-radius:10px; max-height:280px;
            overflow-y:auto; border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(8px); z-index:999;
        }
        #searchResults.show { display:block; }
        .sr {
            padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.04);
            transition:background .15s;
        }
        .sr:last-child { border-bottom:none; }
        .sr:hover { background:rgba(255,255,255,0.08); }
        .sr .sr-t { display:block; color:#fff; font-weight:600; font-size:.85rem; }
        .sr .sr-s { display:block; color:#888; font-size:.72rem; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

        #panel {
            position:fixed; bottom:0; left:0; right:0; z-index:1000;
            background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(0,0,0,0.97));
            backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
            color:#fff; padding:6px 12px calc(14px + env(safe-area-inset-bottom,0px));
            border-top:2px solid #007bff;
            transform:none;
        }
        #panel .h { display:none; }
        #ins {
            font-size:1.1rem; font-weight:700; color:#FFD700;
            min-height:1.4rem; letter-spacing:-0.2px;
        }
        #sub {
            font-size:0.75rem; color:#999; margin-bottom:6px;
        }
        #stats { display:flex; gap:8px; }
        #stats > div {
            flex:1; background:rgba(255,255,255,0.06);
            border-radius:8px; padding:4px 2px; text-align:center;
        }
        .sv { font-size:1.1rem; font-weight:700; color:#fff; }
        .sl { font-size:0.6rem; text-transform:uppercase; color:#777; letter-spacing:0.5px; margin-top:2px; }

        #banner {
            position:fixed; top:calc(68px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
            z-index:1001; background:#007bff; color:#fff; padding:8px 18px;
            border-radius:10px; font-weight:600; font-size:0.85rem;
            box-shadow:0 4px 20px rgba(0,123,255,0.35);
            opacity:0; transition:opacity 0.3s; pointer-events:none;
            white-space:nowrap;
        }
        #banner.show { opacity:1; }

        #wake {
            position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; z-index:1001;
            background:rgba(0,0,0,0.65); color:#4ade80;
            font-size:0.65rem; padding:4px 10px; border-radius:20px;
            display:none; backdrop-filter:blur(8px);
            letter-spacing:0.3px;
        }
        #wake.on { display:block; }

        .u-marker {
            width:14px; height:14px; background:#007bff;
            border-radius:50%; border:3px solid #fff;
        }

        #preview {
            position:fixed; top:0; left:0; right:0; bottom:0; z-index:1002;
            background:rgba(0,0,0,0.88); display:flex; flex-direction:column;
            align-items:center; justify-content:center; padding:24px;
            opacity:0; pointer-events:none; transition:opacity .3s;
            backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
        }
        #preview.show { opacity:1; pointer-events:auto; }
        #preview h2 { color:#fff; font-size:1.1rem; margin-bottom:20px; font-weight:600; letter-spacing:-.2px; }
        .rc {
            width:100%; max-width:380px; background:rgba(255,255,255,0.08);
            border:2px solid transparent; border-radius:14px; padding:14px 18px;
            margin-bottom:10px; cursor:pointer; transition:all .2s;
        }
        .rc:hover, .rc.sel { border-color:#007bff; background:rgba(0,123,255,0.15); }
        .rc:active { transform:scale(0.97); }
        .rc .rc-t { font-size:1.2rem; font-weight:700; color:#fff; }
        .rc .rc-s { font-size:.75rem; color:#999; margin-top:4px; }
        .rc .rc-b { font-size:.72rem; color:#666; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #follow {
            position:fixed; top:calc(68px + env(safe-area-inset-top,0px)); left:12px; z-index:1001;
            background:rgba(0,0,0,0.75); color:#fff; border:none;
            border-radius:10px; padding:8px 14px; font-size:.75rem; font-weight:600;
            cursor:pointer; backdrop-filter:blur(8px); transition:all .25s;
            display:none;
        }
        #follow.on { display:block; }
        #follow.off { background:rgba(0,0,0,0.45); }
        #simCtrl { display:none; gap:6px; justify-content:center; margin-top:6px; }
        #simCtrl.active { display:flex; }
        #simCtrl button {
            background:rgba(255,255,255,0.1); color:#fff; border:none;
            border-radius:8px; padding:4px 14px; font-size:.75rem; font-weight:600;
            cursor:pointer; transition:background .2s;
        }
        #simCtrl button:hover { background:rgba(255,255,255,0.2); }
        #simCtrl button.sel { background:#007bff; }
        .sim-badge {
            display:inline-block; background:#6366f1; color:#fff;
            font-size:.6rem; padding:2px 8px; border-radius:4px; margin-left:8px;
            text-transform:uppercase; font-weight:700; letter-spacing:.5px;
        }
        .rc .sim-btn {
            margin-top:8px; background:#6366f1; color:#fff; border:none;
            border-radius:8px; padding:6px 14px; font-size:.72rem; font-weight:600;
            cursor:pointer; transition:opacity .2s;
        }
        .rc .sim-btn:hover { opacity:.8; }
        #elCanvas { display:none; margin:6px auto 0; border-radius:8px; background:rgba(255,255,255,0.04); touch-action:none; }
        #elBtn { user-select:none; font-size:.65rem !important; margin:2px 0 0 !important; }
        #topbar {
            position:fixed; top:0; left:0; right:0; z-index:1001;
            background:rgba(0,0,0,0.7);
            display:flex; align-items:center; gap:8px;
            padding:6px 14px; padding-top:calc(6px + env(safe-area-inset-top,0px));
            color:#fff; font-size:.82rem; font-weight:600;
            border-bottom:1px solid rgba(255,255,255,0.06);
            min-height:calc(37px + env(safe-area-inset-top,0px));
        }
        #topbar .logo { display:flex; align-items:center; gap:8px; flex-shrink:0; }
        #topbar .logo span { font-size:1rem; }
        #topbar .ver { font-size:.65rem; color:#888; font-weight:400; }
        body { padding-top:calc(37px + env(safe-area-inset-top,0px)); }

        #navOv {
            position:fixed; top:calc(46px + env(safe-area-inset-top,0px)); right:12px; z-index:1001;
            display:none; flex-direction:column; align-items:flex-end;
            pointer-events:none;
            font-family:Arial,sans-serif;
        }
        #navOv.active { display:flex; }
        #navSl {
            background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
            border-radius:8px; padding:4px 10px;
            font-size:22px; font-weight:800; color:#fff;
            text-align:center; margin-bottom:6px;
        }
        #navSl span { font-size:11px; font-weight:400; color:#999; margin-left:3px; }
        #navArrow {
            background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
            border-radius:8px; padding:6px 10px;
            font-size:28px; color:#007bff; line-height:1;
            margin-bottom:4px;
        }
        #navText {
            background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
            border-radius:8px; padding:4px 10px;
            font-size:13px; font-weight:600; color:#fff;
            text-align:right; max-width:180px;
        }

        #compassBtn {
            position:absolute; bottom:90px; right:12px; z-index:1001;
            background:rgba(0,0,0,0.7); color:#fff; border:none;
            border-radius:10px; width:38px; height:38px;
            font-size:1.1rem; cursor:pointer; backdrop-filter:blur(8px);
            transition:all .25s; display:none; align-items:center; justify-content:center;
            box-shadow:0 2px 12px rgba(0,0,0,0.4);
        }
        #compassBtn:hover { background:rgba(0,0,0,0.85); }
        #compassBtn.on { background:#007bff; box-shadow:0 2px 12px rgba(0,123,255,0.4); }
        .leaflet-pane { transition:transform .3s ease-out; }

        #placesBar {
            display:none; gap:4px; padding:2px 0 0; overflow-x:auto;
            -webkit-overflow-scrolling:touch; flex:1; min-width:0;
        }
        #placesBar.show { display:flex; }
        .place-pill {
            display:flex; align-items:center; gap:4px;
            background:rgba(255,255,255,0.08); border:none;
            border-radius:16px; padding:4px 12px; font-size:.72rem;
            color:#fff; font-weight:600; cursor:pointer;
            white-space:nowrap; transition:background .2s;
            flex-shrink:0;
        }
        .place-pill:hover { background:rgba(255,255,255,0.15); }
        .place-pill .del {
            color:#666; font-size:.65rem; margin-left:4px; font-weight:400;
            text-decoration:none; cursor:pointer;
        }
        .place-pill .del:hover { color:#ef4444; }
        .place-pill.add {
            background:transparent; border:1px dashed rgba(255,255,255,0.15);
            color:#888; font-weight:400;
        }
        .place-pill.add:hover { color:#fff; border-color:rgba(255,255,255,0.3); }

        #setupStatus {
            color:#888; font-size:.75rem; text-align:center;
            min-height:1.2rem; margin-top:4px;
        }

        #authBtn {
            background:rgba(255,255,255,0.08); color:#fff; border:none;
            border-radius:8px; padding:4px 12px; font-size:.72rem; font-weight:600;
            cursor:pointer; transition:background .2s; white-space:nowrap;
        }
        #authBtn:hover { background:rgba(255,255,255,0.15); }
                #authBtn.logged { background:transparent; cursor:pointer; display:flex; align-items:center; padding:6px; border-radius:50%; }
        #authBtn.logged:hover { background:rgba(255,255,255,0.1); }
        #authBtn.logged svg { display:block; }
        #authBtn .logout {
            color:#888; font-weight:400; cursor:pointer; margin-left:6px;
            font-size:.65rem; text-decoration:underline;
        }
        #authBtn .logout:hover { color:#ef4444; }

        #profileDropdown {
            display:none; position:fixed; top:calc(39px + env(safe-area-inset-top,0px)); right:14px;
            z-index:1002; min-width:220px; background:rgba(20,20,25,0.98);
            backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08);
            border-radius:12px; padding:8px; box-shadow:0 8px 32px rgba(0,0,0,0.5);
        }
        #profileDropdown.show { display:block; }
        #profileDropdown .profile-row {
            display:flex; align-items:center; gap:10px; padding:10px 12px;
            font-size:.8rem; color:#ccc; cursor:default; border-radius:8px;
        }
        #profileDropdown .profile-row svg { flex-shrink:0; }
        #profileDropdown #profileName { font-weight:700; color:#fff; font-size:.85rem; }
        #profileDropdown #profileLogout { cursor:pointer; color:#ef4444; }
        #profileDropdown #profileLogout:hover { background:rgba(239,68,68,0.1); }
        #profileDropdown #profileLogout span { text-decoration:none; }
        #profileDropdown .pd-sep { height:1px; background:rgba(255,255,255,0.06); margin:4px 12px; }
        #profileDropdown .p-edit {
            margin-left:auto; cursor:pointer; opacity:0.4; display:flex; align-items:center;
            transition:opacity .2s; padding:2px;
        }
        #profileDropdown .p-edit:hover { opacity:1; }
        #profileDropdown .profile-row { cursor:pointer; }
        #profileDropdown .profile-row:hover { background:rgba(255,255,255,0.05); }

        #authModal {
            position:fixed; top:0; left:0; right:0; bottom:0; z-index:1003;
            background:rgba(0,0,0,0.85); display:flex; align-items:center;
            justify-content:center; padding:24px;
            opacity:0; pointer-events:none; transition:opacity .25s;
            backdrop-filter:blur(8px);
        }
        #authModal.show { opacity:1; pointer-events:auto; }
        #authModal .box {
            background:rgba(30,30,40,0.95); border-radius:16px;
            padding:28px; width:100%; max-width:360px;
            border:1px solid rgba(255,255,255,0.06);
        }
        #authModal .box h2 { color:#fff; font-size:1.1rem; margin-bottom:16px; text-align:center; }
        .auth-tabs { display:flex; gap:0; margin-bottom:16px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
        .auth-tabs button {
            flex:1; background:transparent; color:#888; border:none;
            padding:8px; font-size:.8rem; font-weight:600; cursor:pointer;
            transition:all .2s;
        }
        .auth-tabs button.sel { background:#007bff; color:#fff; }
        .auth-tabs button:hover:not(.sel) { background:rgba(255,255,255,0.05); }
        .auth-f { display:none; flex-direction:column; gap:10px; }
        .auth-f.active { display:flex; }
        .auth-f input {
            background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
            border-radius:8px; padding:10px 12px; color:#fff; font-size:.85rem; outline:none;
            transition:border-color .2s;
        }
        .auth-f input:focus { border-color:#007bff; }
        .auth-f input::placeholder { color:#666; }
        .auth-f button {
            background:#007bff; color:#fff; border:none; border-radius:8px;
            padding:10px; font-size:.85rem; font-weight:600; cursor:pointer;
            transition:opacity .2s; margin-top:4px;
        }
        .auth-f button:hover { opacity:.85; }
        .auth-f button:disabled { opacity:.4; cursor:default; }
        .auth-err { color:#ef4444; font-size:.75rem; text-align:center; min-height:1.2rem; }
        .auth-ok { color:#4ade80; font-size:.75rem; text-align:center; min-height:1.2rem; }
        .auth-close {
            display:block; width:100%; text-align:center; margin-top:12px;
            color:#888; font-size:.72rem; cursor:pointer;
        }
        .auth-close:hover { color:#fff; }