:root {
            --bg-dark: #0a0a0c;
            --panel-bg: rgba(22, 22, 26, 0.95);
            --accent-orange: #FF6B00;
            --alert-red: #E53935;
            --safe-green: #00E676;
            --alert-orange: #FF9100;
            --text-main: #FFFFFF;
            --text-muted: #8E8E93;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            /* Telefoanele cu decupaj sau cameră în ecran (iPhone, Samsung, Pixel)
               împing conținutul sub bara de stare, pentru că pagina folosește
               viewport-fit=cover. Exista compensare doar pentru marginea de jos;
               fără asta, butoanele din panoul de sus rămâneau sub decupaj. */
            --safe-top: env(safe-area-inset-top, 0px);
            /* În modul orizontal, pe telefoanele cu decupaj, și marginile din
               lateral sunt ocupate: fără ele, butoanele de la margine rămân sub
               colțul rotunjit al ecranului și nu se pot apăsa. */
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            /* Lățimea chenarului cu butoane din stânga sus. Ține legate de ea și
               alte elemente flotante (bannerul eSIM), ca să nu se desincronizeze
               dacă se schimbă într-un loc și se uită în celălalt. */
            --panel-width: 220px;
            --cb-blue: #2196F3;
            --cb-active: #00E676;
            --cb-occupied: #FF5722;
            
            --color-radar-fix: #E53935;
            --color-semafor-viteza: #FF6B00;
            --color-vitez-medie: #7C4DFF;
            --color-semafor-camera: #00BCD4;
            --color-camera-trafic: #4CAF50;
            
            --convoy-color: #FFD700;
            --convoy-marker-bg: rgba(255, 215, 0, 0.3);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            user-select: none;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        }

        #map {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        /* ========== DETECTOR SCREEN ========== */
        /* „Drumul care vine": drumul ocupă tot ecranul, în spatele butoanelor.
           Pozițiile (vârful drumului, mașina, viteza) le stabilește app.js, măsurând
           unde sunt panoul de butoane, linkul iaesim.ro și bara de raportare. */
        #detector-screen {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: #141416;
            z-index: 4;
            display: none;
            overflow: hidden;
        }
        #det-drum {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        .det-viteza {
            position: absolute;
            left: 18px;
            top: 220px;
        }
        .detector-speed-value {
            font-size: 64px;
            font-weight: 900;
            color: #FFF;
            line-height: 60px;
            letter-spacing: -2px;
            transition: color 0.2s ease;
        }
        .detector-speed-value.peste-limita {
            color: #FF5252;
        }
        .detector-speed-unit {
            font-size: 13px;
            color: var(--accent-orange);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .detector-limit-circle {
            position: absolute;
            right: 18px;
            top: 220px;
            width: 64px;
            height: 64px;
            border: 7px solid var(--alert-red);
            background-color: #FFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
        }
        .detector-limit-circle span {
            color: #000;
            font-size: 22px;
            font-weight: 900;
            text-align: center;
            line-height: 1.05;
        }
        .detector-limit-circle .score-small {
            font-size: 9px;
            color: #555;
        }

        .det-raport {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
            transition: background-color 0.3s ease;
        }
        .det-eticheta {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            font-size: 15px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 10px;
            background: rgba(20, 20, 22, 0.85);
            color: var(--safe-green);
        }

        .speed-limit-sign {
            position: absolute;
            top: calc(80px + var(--safe-top));
            right: 15px;
            width: 70px;
            height: 70px;
            background-color: #FFFFFF;
            border: 6px solid var(--alert-red);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            z-index: 15;
            font-size: 22px;
            font-weight: 900;
            color: #000000;
            font-family: monospace;
            pointer-events: none;
            transition: all 0.2s ease;
            flex-direction: column;
            line-height: 1.1;
            text-align: center;
            padding: 0 7px;
            overflow: hidden;
        }
        /* Textele dinamice (distanțe, număr de membri) pot fi mai lungi decât
           diametrul cercului. Fără limita asta ieșeau peste ramă, în afara bulei. */
        .speed-limit-sign > * {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .speed-limit-sign .score-sub {
            font-size: 9px;
            color: #555;
            letter-spacing: -0.3px;
        }
        .speed-limit-sign.hide-in-detector {
            display: none;
        }


        /* ========== UI OVERLAY ========== */
        .ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 15px;
            padding-top: calc(15px + var(--safe-top));
            padding-bottom: calc(15px + var(--safe-bottom));
        }
        .ui-overlay * {
            pointer-events: auto;
        }

        /* ----- TOP-LEFT PANEL ----- */
        .top-left-panel {
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 14px;
            padding: 12px 14px 14px 14px;
            width: var(--panel-width);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            transition: opacity 0.3s ease, visibility 0.3s ease;
            position: relative;
        }
        .top-left-panel.detector-mode #panel-info {
            display: none !important;
        }
        .top-left-panel.detector-mode {
            width: auto;
            padding: 10px 12px;
        }

        .panel-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }

        .action-icon {
            position: relative;
            width: 34px;
            height: 34px;
            background: #2a2a30;
            border: 1px solid #444;
            border-radius: 8px;
            color: #FFF;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s, border-color 0.2s;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            flex-shrink: 0;
            text-decoration: none;
        }
        .action-icon:active {
            transform: scale(0.92);
        }
        .action-icon.active-icon {
            border-color: var(--safe-green);
            background: #1d3a2a;
            box-shadow: 0 0 10px rgba(0, 230, 118, 0.25);
        }
        .action-icon.warning-icon {
            border-color: var(--alert-orange);
            background: #3d2d1a;
        }
        .action-icon.danger-icon {
            border-color: var(--alert-red);
            background: #3d1a1a;
        }
        .action-icon.inactive-icon {
            opacity: 0.4;
            pointer-events: none;
        }

        /* ===== BUTON PARKING ===== */
        .action-icon.parking-btn {
            border-color: #555;
            font-size: 18px;
        }
        .action-icon.parking-btn.parking-saved {
            border-color: var(--safe-green);
            background: #1d3a2a;
            box-shadow: 0 0 15px rgba(0, 230, 118, 0.3);
            animation: pulseParkingIcon 2s ease-in-out infinite;
        }
        .action-icon.parking-btn.parking-found {
            border-color: #FFD700;
            background: #3d3a1a;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
            animation: pulseParkingFound 1s ease-in-out infinite;
        }
        @keyframes pulseParkingIcon {
            0% { box-shadow: 0 0 10px rgba(0, 230, 118, 0.2); }
            50% { box-shadow: 0 0 25px rgba(0, 230, 118, 0.5); }
            100% { box-shadow: 0 0 10px rgba(0, 230, 118, 0.2); }
        }
        @keyframes pulseParkingFound {
            0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); transform: scale(1); }
            50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); transform: scale(1.05); }
            100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); transform: scale(1); }
        }

        /* ===== BUTON CONVOY ===== */
        .action-icon.convoy-btn {
            border-color: var(--convoy-color);
        }
        .action-icon.convoy-btn.convoy-active {
            border-color: var(--convoy-color);
            background: #3d3a1a;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
            animation: pulseConvoy 2s ease-in-out infinite;
        }
        @keyframes pulseConvoy {
            0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
            50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }
            100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
        }

        /* ===== BUTON PARKING SWAP ===== */
        .action-icon.parking-swap-btn {
            border-color: #4CAF50;
        }
        .action-icon.parking-swap-btn.has-swap {
            border-color: #4CAF50;
            background: #1a3d2a;
            animation: pulseSwap 1.5s ease-in-out infinite;
        }
        @keyframes pulseSwap {
            0% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.2); }
            50% { box-shadow: 0 0 30px rgba(76, 175, 80, 0.5); }
            100% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.2); }
        }

        /* ===== BUTON CHAT ===== */
        .action-icon.chat-new-msg {
            background: var(--alert-red) !important;
            border-color: #fff !important;
            box-shadow: 0 0 20px rgba(229, 57, 53, 0.8) !important;
            animation: pulseChat 1s infinite alternate;
        }
        @keyframes pulseChat {
            from { box-shadow: 0 0 15px rgba(229, 57, 53, 0.5); }
            to { box-shadow: 0 0 30px rgba(229, 57, 53, 1); }
        }

        /* ===== BUTON CB RADIO ===== */
        .action-icon.cb-active {
            border-color: var(--cb-blue) !important;
            background: #0d2b4a !important;
            box-shadow: 0 0 15px rgba(33, 150, 243, 0.4) !important;
        }
        .action-icon.cb-has-msg {
            border-color: var(--cb-active) !important;
            background: #0d3a1a !important;
            box-shadow: 0 0 20px rgba(0, 230, 118, 0.6) !important;
            animation: pulseCB 0.8s infinite alternate;
        }
        @keyframes pulseCB {
            from { box-shadow: 0 0 15px rgba(0, 230, 118, 0.3); }
            to { box-shadow: 0 0 35px rgba(0, 230, 118, 0.9); }
        }

        #panel-info {
            margin-top: 10px;
        }
        .speed-box {
            display: flex;
            align-items: baseline;
            color: var(--accent-orange);
        }
        #current-speed {
            font-size: 54px;
            font-weight: 900;
            line-height: 54px;
        }
        .speed-box .unit {
            font-size: 18px;
            margin-left: 5px;
            font-weight: 700;
        }

        .info-box {
            color: var(--text-main);
            font-size: 15px;
            font-weight: bold;
            margin-top: 4px;
            min-height: 24px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .info-box .score-emoji {
            margin-right: 4px;
        }
        .info-box .score-label {
            font-weight: 700;
        }
        .info-box .parking-dist {
            color: var(--safe-green);
        }
        .info-box .parking-time {
            color: var(--text-muted);
            font-size: 13px;
        }
        .info-box .convoy-info {
            color: var(--convoy-color);
        }
        .info-box .swap-info {
            color: #4CAF50;
        }

        .next-radar-box {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 6px;
            padding: 6px;
            margin-top: 8px;
            font-size: 13px;
            color: #FFF;
            font-weight: 700;
        }
        .theme-tag {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 4px;
            font-weight: bold;
        }

        /* ----- btn recentrare ----- */
        #btn-recenter {
            position: absolute;
            bottom: 350px;
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--safe-green);
            color: var(--safe-green);
            width: 55px;
            height: 55px;
            border-radius: 50%;
            font-size: 24px;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            cursor: pointer;
            z-index: 9;
        }

        /* ----- Banner de instalare -----
           Apare doar în browserul de pe telefon, niciodată în aplicația instalată.
           Stă sus, ca bară subțire: jos ar acoperi butoanele de raportare, care
           trebuie să rămână accesibile la volan. Cât e vizibil, coboară panoul
           din stânga sus ca să nu-l acopere. */
        .banner-instalare {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            padding-top: calc(10px + var(--safe-top));
            background: #131a2b;
            border-bottom: 2px solid var(--accent-orange);
            box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
            font-size: 13px;
            color: var(--text-main);
        }
        .banner-instalare img {
            width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
        }
        .banner-instalare .text { flex: 1; line-height: 1.35; min-width: 0; }
        .banner-instalare .text b { display: block; font-size: 14px; }
        .banner-instalare .text span { color: var(--text-muted); font-size: 12px; }
        .banner-instalare .btn-descarca {
            background: var(--accent-orange); color: #fff; text-decoration: none;
            padding: 9px 15px; border-radius: 8px; font-weight: 800; font-size: 13px;
            white-space: nowrap; flex-shrink: 0;
        }
        .banner-instalare .btn-inchide {
            background: transparent; border: 0; color: var(--text-muted);
            font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; flex-shrink: 0;
        }
        /* Înălțimea reală a bannerului e măsurată în JS și pusă în variabila de mai
           jos. O valoare fixă n-ar fi corectă: bannerul crește pe telefoanele cu
           decupaj (are propriul padding de siguranță) și când textul trece pe două
           rânduri. Valoarea implicită acoperă cazul în care JS-ul n-a rulat încă. */
        body.cu-banner-instalare .ui-overlay {
            padding-top: calc(var(--inaltime-banner, 76px) + 8px);
        }

        /* ----- eSIM -----
           Bannerul stă în fluxul normal al lui #ui-overlay, imediat sub chenarul
           portocaliu — acolo a fost dintotdeauna și acolo rămâne.
           #ui-overlay e flex pe coloană, deci fără o lățime explicită copilul se
           întinde pe toată lățimea disponibilă: pe tabletă în landscape ajungea
           la ~994px din 1024. Lățimea de mai jos îl aliniază cu panoul de sus.
           Pe telefon (max-width: 480px) revine la `width: auto`, adică exact
           comportamentul de dinainte.
           Notă: vechile `bottom` și `right` erau cod mort — se aplică doar
           elementelor poziționate, iar acesta e `position: static`. Scoase, ca să
           nu mai pară că fac ceva. */
        .esim-bottom-right {
            width: var(--panel-width);
            box-sizing: border-box;
            background: linear-gradient(135deg, #FF00FF 0%, #7000FF 100%);
            box-shadow: 0 6px 20px rgba(255, 0, 255, 0.6);
            border: 2px solid #FFF;
            border-radius: 40px;
            padding: 12px 20px;
            color: white;
            font-weight: 900;
            /* 15px, nu 16px: la lățimea panoului (220px) textul intră în 2 rânduri
               în loc de 4, deci bannerul e 70px înalt în loc de 96px. */
            font-size: 15px;
            line-height: 1.25;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            z-index: 9;
            animation: pulse-esim 2s ease-in-out infinite;
        }
        @keyframes pulse-esim {
            0% { transform: scale(1); box-shadow: 0 6px 20px rgba(255, 0, 255, 0.6); }
            50% { transform: scale(1.04); box-shadow: 0 6px 30px rgba(255, 0, 255, 0.9); }
            100% { transform: scale(1); box-shadow: 0 6px 20px rgba(255, 0, 255, 0.6); }
        }

        /* ----- butoane raportare ----- */
        .reporting-action-bar {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: clamp(6px, 1.5vw, 16px);
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            margin-top: auto;
            justify-content: center;
        }
        .report-btn {
            flex: 1 1 0;
            min-width: 0;
            max-width: 150px;
            aspect-ratio: 1 / 1;
            border: 3px solid rgba(255, 255, 255, 0.15);
            border-radius: clamp(12px, 3vw, 20px);
            color: #FFF;
            font-weight: 800;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(4px, 1vh, 12px);
            cursor: pointer;
            text-align: center;
            background: #212121;
            font-size: clamp(10px, 2.2vw, 16px);
            padding: clamp(6px, 1.5vh, 16px);
            transition: transform 0.15s;
        }
        .report-btn:active {
            transform: scale(0.94);
        }
        .report-btn .icon {
            font-size: clamp(24px, 5vw, 40px);
        }
        .report-btn .label {
            font-size: clamp(9px, 1.6vw, 14px);
            text-transform: uppercase;
            line-height: 1.2;
            word-break: break-word;
        }
        .report-btn.radar-mobil {
            background: #212121;
            border-color: var(--accent-orange);
        }
        .report-btn.politie {
            background: #0D47A1;
        }
        .report-btn.pericol {
            background: #333333;
        }
        .report-btn.isctr {
            background: #1f3b2c;
            border-color: #a5d6a7;
        }

        /* ===== Sub-meniu pericol ===== */
        #sub-report-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 150;
            pointer-events: auto;
        }
        #sub-report-modal .modal-box {
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 24px;
            padding: 30px 20px;
            max-width: 340px;
            width: 90%;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        #sub-report-modal .modal-box h3 {
            color: #FFF;
            font-size: 22px;
            font-weight: 900;
        }
        .sub-report-buttons {
            display: flex;
            flex-direction: row;
            gap: 15px;
            justify-content: center;
        }
        .sub-report-buttons button {
            flex: 1;
            padding: 16px 10px;
            border: none;
            border-radius: 16px;
            background: #2a2a30;
            color: #FFF;
            font-weight: 800;
            font-size: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.15s, background 0.2s;
            border: 1px solid #555;
        }
        .sub-report-buttons button:active {
            transform: scale(0.95);
        }
        .sub-report-buttons button .sub-icon {
            font-size: 40px;
        }
        .sub-report-buttons button .sub-label {
            font-size: 14px;
            text-transform: uppercase;
        }
        .sub-report-buttons .btn-pericol {
            background: #333333;
            border-color: var(--alert-orange);
        }
        .sub-report-buttons .btn-dama {
            background: #2a1a4a;
            border-color: #d500f9;
        }
        #sub-report-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 4px;
        }

        /* ===== S.O.S. — buton cu apăsare lungă =====
           Poziția de aici e doar punctul de plecare, proporțional cu înălțimea
           ecranului. Locul final îl calculează pozitioneazaButonSOS() din app.js,
           care măsoară panoul de sus și elementele de jos (chat, CB, radio) și
           așază butonul în golul dintre ele — pe tabletă, un „bottom" fix cădea
           peste alte butoane. */
        #btn-sos {
            position: absolute;
            bottom: clamp(180px, 30vh, 330px);
            left: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--alert-red);
            color: var(--alert-red);
            width: 55px;
            height: 55px;
            border-radius: 50%;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            cursor: pointer;
            animation: pulseSOSBtn 2s ease-in-out infinite;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        @keyframes pulseSOSBtn {
            0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5); }
            70% { box-shadow: 0 0 0 12px rgba(229, 57, 53, 0); }
            100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
        }
        /* Inel care se umple în cele ~0.8s cât ții apăsat — confirmă vizual că
           apăsarea se înregistrează și că mai trebuie ținut, nu doar atins. */
        #btn-sos::after {
            content: '';
            position: absolute;
            top: -6px; right: -6px; bottom: -6px; left: -6px;   /* iPhone mai vechi */
            inset: -6px;
            border-radius: 50%;
            border: 3px solid #FFF;
            transform: scale(0.4);
            opacity: 0;
            pointer-events: none;
        }
        #btn-sos.sos-holding {
            animation: none;
        }
        #btn-sos.sos-holding::after {
            transform: scale(1);
            opacity: 1;
            transition: transform 0.8s linear, opacity 0.15s linear;
        }

        /* ===== S.O.S. — fereastra de cerere / gestionare ===== */
        #sos-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 160;
            pointer-events: auto;
            padding: 20px;
            box-sizing: border-box;
        }
        #sos-modal .modal-box {
            background: var(--panel-bg);
            border: 2px solid var(--alert-red);
            border-radius: 24px;
            padding: 26px 20px;
            max-width: 360px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            text-align: center;
            box-sizing: border-box;
        }
        #sos-form-nou, #sos-gestionare-proprie {
            display: none;
            flex-direction: column;
            gap: 14px;
        }
        #sos-modal h3 {
            color: #FFF;
            font-size: 20px;
            font-weight: 900;
            margin: 0;
        }
        .sos-modal-hint {
            color: var(--text-muted);
            font-size: 12px;
            margin: 0;
            line-height: 1.5;
        }
        .sos-buttons {
            display: flex;
            flex-direction: row;
            gap: 10px;
            justify-content: center;
        }
        .btn-sos-tip {
            flex: 1;
            padding: 14px 6px;
            border: 1px solid #555;
            border-radius: 16px;
            background: #2a2a30;
            color: #FFF;
            font-weight: 800;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: transform 0.15s, border-color 0.15s, background 0.15s;
        }
        .btn-sos-tip:active {
            transform: scale(0.95);
        }
        .btn-sos-tip.selectat {
            border-color: var(--alert-red);
            background: rgba(229, 57, 53, 0.2);
        }
        .btn-sos-tip .sub-icon {
            font-size: 28px;
        }
        .sos-field {
            text-align: left;
        }
        .sos-field label {
            display: block;
            font-size: 12px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .sos-field input[type="tel"] {
            width: 100%;
            background: #1c1d22;
            border: 1px solid #3a3b45;
            color: #fff;
            padding: 14px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            box-sizing: border-box;
        }
        .btn-sos-submit {
            background: var(--alert-red);
            border: none;
            color: #fff;
            padding: 16px;
            border-radius: 14px;
            font-weight: 900;
            font-size: 15px;
            cursor: pointer;
        }
        .btn-sos-rezolvat {
            background: #2a2a30;
            border: 1px solid #555;
            color: #fff;
            padding: 14px;
            border-radius: 14px;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
        }
        #sos-close, #sos-close2 {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        /* ===== S.O.S. — marker pe hartă + panou de detaliu ===== */
        .sos-map-marker {
            font-size: 30px;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            background: rgba(229, 57, 53, 0.2) !important;
            border-radius: 50% !important;
            border: 3px solid var(--alert-red) !important;
            box-shadow: 0 0 30px rgba(229, 57, 53, 0.5) !important;
            cursor: pointer !important;
            animation: pulseSOSBtn 1.5s ease-in-out infinite !important;
            position: relative !important;
            z-index: 900 !important;
            pointer-events: auto !important;
        }
        .sos-map-marker-mine {
            border-color: #FFD700 !important;
        }
        #sos-detail-panel {
            position: absolute;
            bottom: calc(180px + var(--safe-bottom));
            left: 15px;
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--alert-red);
            border-radius: 16px;
            padding: 14px 16px;
            display: none;
            flex-direction: column;
            gap: 10px;
            z-index: 101;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
        }
        #sos-detail-panel .swap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
        }
        #sos-detail-panel .swap-header .swap-title {
            color: var(--alert-red);
        }
        #sos-detail-panel .swap-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        #sos-detail-text {
            color: var(--text-muted);
            font-size: 13px;
        }
        #sos-detail-panel .swap-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        #sos-detail-panel .swap-buttons button {
            flex: 1;
            min-width: 100px;
            padding: 10px 12px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
        }
        #sos-detail-panel .swap-buttons button:active {
            transform: scale(0.95);
        }
        #sos-detail-buttons .btn-navigate {
            background: var(--alert-red);
            color: #fff;
        }
        .sos-detail-note {
            width: 100%;
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
            padding: 4px 0;
        }

        /* ===== AJUTOR: CE FACE FIECARE BUTON ===== */
        #help-buttons-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 5100;
            pointer-events: auto;
            padding: 20px;
            box-sizing: border-box;
        }
        #help-buttons-modal .modal-box {
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 24px;
            max-width: 420px;
            width: 100%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px;
        }
        .help-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .help-modal-header h3 {
            color: #FFF;
            font-size: 18px;
            margin: 0;
        }
        .help-modal-list {
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        .help-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: var(--text-muted);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            padding-bottom: 8px;
        }
        .help-item .help-icon {
            font-size: 20px;
            flex-shrink: 0;
            width: 28px;
            text-align: center;
        }
        .help-item .help-text strong {
            color: #FFF;
        }

        /* ===== ECRAN DE ÎNTÂMPINARE ===== */
        #welcome-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.92);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 5000;
            pointer-events: auto;
            padding: 20px;
            box-sizing: border-box;
        }
        #welcome-screen .welcome-box {
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 24px;
            padding: 30px 20px;
            max-width: 380px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-sizing: border-box;
        }
        .welcome-emoji {
            font-size: 46px;
        }
        #welcome-screen h2 {
            color: #FFF;
            font-size: 22px;
            font-weight: 900;
            margin: 0;
        }
        .welcome-text {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
        }
        .welcome-help-btn {
            background: #2a2a30;
            border: 1px solid #555;
            color: #FFF;
            padding: 12px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .welcome-terms-check {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            text-align: left;
            font-size: 12px;
            color: var(--text-muted);
            cursor: pointer;
        }
        .welcome-terms-check input {
            margin-top: 3px;
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }
        .welcome-terms-check a {
            color: var(--accent-orange);
        }
        .welcome-accept-btn {
            background: var(--accent-orange);
            border: none;
            color: #fff;
            padding: 16px;
            border-radius: 12px;
            font-weight: 900;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .welcome-accept-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ===== BUTOANE SOCIAL (Setări) ===== */
        .social-links-row {
            display: flex;
            gap: 10px;
        }
        .social-link-btn {
            flex: 1;
            text-align: center;
            text-decoration: none;
            padding: 14px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 14px;
            color: #fff;
        }
        .social-link-btn.tiktok {
            background: #000;
            border: 1px solid #555;
        }
        .social-link-btn.facebook {
            background: #1877F2;
        }

        /* ===== CONVOY POPUP ===== */
        #convoy-popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--panel-bg);
            border: 2px solid var(--convoy-color);
            border-radius: 24px;
            padding: 24px 28px;
            max-width: 380px;
            width: 90%;
            z-index: 200;
            display: none;
            flex-direction: column;
            gap: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
            pointer-events: auto;
            color: #FFF;
        }
        #convoy-popup.open {
            display: flex;
        }
        #convoy-popup .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 10px;
        }
        #convoy-popup .popup-header h3 {
            font-size: 20px;
            font-weight: 900;
            color: var(--convoy-color);
        }
        #convoy-popup .popup-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 24px;
            cursor: pointer;
        }
        #convoy-popup .convoy-code-box {
            background: rgba(255,215,0,0.1);
            border: 1px solid var(--convoy-color);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: 2px;
            color: var(--convoy-color);
        }
        #convoy-popup .convoy-members {
            max-height: 180px;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
        }
        #convoy-popup .convoy-member {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 14px;
        }
        #convoy-popup .convoy-member .member-name {
            font-weight: 700;
        }
        #convoy-popup .convoy-member .member-distance {
            color: var(--text-muted);
            font-size: 12px;
        }
        #convoy-popup .convoy-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        #convoy-popup .convoy-actions button {
            padding: 12px;
            border: none;
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.15s;
        }
        #convoy-popup .convoy-actions button:active {
            transform: scale(0.95);
        }
        #convoy-popup .convoy-actions .btn-create {
            background: var(--convoy-color);
            color: #000;
        }
        #convoy-popup .convoy-actions .btn-join {
            background: #2a2a30;
            color: #FFF;
            border: 1px solid var(--convoy-color);
        }
        #convoy-popup .convoy-actions .btn-leave {
            background: var(--alert-red);
            color: #FFF;
        }
        #convoy-popup .convoy-join-input {
            display: flex;
            gap: 10px;
        }
        #convoy-popup .convoy-join-input input {
            flex: 1;
            background: #1c1d22;
            border: 1px solid #444;
            color: #fff;
            padding: 12px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        #convoy-popup .convoy-join-input button {
            background: var(--convoy-color);
            color: #000;
            border: none;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
        }

        /* ===== PARKING SWAP NOTIFICATION ===== */
        #swap-notification {
            position: absolute;
            bottom: calc(180px + var(--safe-bottom));
            left: 15px;
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid #4CAF50;
            border-radius: 16px;
            padding: 14px 18px;
            z-index: 15;
            display: none;
            flex-direction: column;
            gap: 10px;
            -webkit-backdrop-filter: blur(10px);   /* Safari / iPhone */
            backdrop-filter: blur(10px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.6);
            color: #fff;
            font-size: 14px;
        }
        #swap-notification .swap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
        }
        #swap-notification .swap-header .swap-title {
            color: #4CAF50;
        }
        #swap-notification .swap-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        #swap-notification .swap-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        #swap-notification .swap-buttons button {
            flex: 1;
            min-width: 100px;
            padding: 10px 12px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            font-size: 13px;
            transition: background 0.2s;
        }
        #swap-notification .swap-buttons button:active {
            transform: scale(0.95);
        }
        #swap-notification .swap-buttons .btn-navigate {
            background: #4CAF50;
            color: #000;
        }
        #swap-notification .swap-buttons .btn-ignore {
            background: #2a2a30;
            color: #fff;
        }

        /* ===== CHAT ===== */
        #chat-container {
            position: absolute;
            bottom: calc(130px + var(--safe-bottom));
            left: 15px;
            width: min(90%, 380px);
            max-height: 260px;
            background: var(--panel-bg);
            border: 1px solid var(--accent-orange);
            border-radius: 16px;
            padding: 10px;
            color: #FFF;
            font-size: 14px;
            z-index: 9;
            display: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
            flex-direction: column;
            gap: 8px;
            overflow: hidden;
        }
        #chat-messages {
            flex: 1;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            max-height: 160px;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-orange) transparent;
        }
        #chat-messages::-webkit-scrollbar {
            width: 4px;
        }
        #chat-messages::-webkit-scrollbar-thumb {
            background: var(--accent-orange);
            border-radius: 4px;
        }
        .chat-message {
            padding: 5px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .chat-message strong {
            color: var(--accent-orange);
        }
        .chat-time {
            color: var(--text-muted);
            font-size: 11px;
            margin-left: 8px;
        }
        .chat-distance {
            color: var(--text-muted);
            font-size: 10px;
            margin-left: 6px;
        }
        #chat-input-area {
            display: flex;
            gap: 6px;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 8px;
            flex-wrap: wrap;
        }
        #chat-input-area input {
            flex: 1;
            min-width: 120px;
            background: #1c1d22;
            border: 1px solid #444;
            color: #fff;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
        }
        #chat-input-area input::placeholder {
            color: var(--text-muted);
        }
        #chat-input-area button {
            background: var(--accent-orange);
            border: none;
            color: #fff;
            padding: 8px 14px;
            border-radius: 20px;
            font-weight: 800;
            cursor: pointer;
            font-size: 14px;
            transition: transform 0.1s;
            white-space: nowrap;
        }
        #chat-input-area button:active {
            transform: scale(0.95);
        }
        #chat-input-area .mic-btn {
            background: #2a2a30;
            border: 1px solid #555;
            font-size: 18px;
            padding: 8px 12px;
        }
        #chat-input-area .mic-btn.listening {
            background: var(--alert-red);
            border-color: #fff;
            animation: pulseMic 1s infinite;
        }
        @keyframes pulseMic {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
        #chat-empty-msg {
            color: gray;
            text-align: center;
            padding: 20px 0;
            font-size: 13px;
        }

        /* ----- chestionar comunitate ----- */
        #community-question-panel {
            position: absolute;
            top: calc(140px + var(--safe-top));
            left: 50%;
            transform: translateX(-50%);
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 20px;
            padding: 18px;
            width: 320px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: 99;
        }
        .question-hidden {
            display: none !important;
        }
        .question-title {
            color: #FFF;
            font-size: 18px;
            font-weight: 800;
            text-transform: uppercase;
        }
        #question-subtitle {
            color: var(--text-muted);
            font-size: 13px;
            font-weight: bold;
        }
        .question-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .btn-vote {
            padding: 16px;
            border: none;
            border-radius: 12px;
            color: #FFF;
            font-size: 20px;
            font-weight: 900;
            cursor: pointer;
        }
        .btn-vote.vote-da {
            background: var(--safe-green);
            color: #000;
        }
        .btn-vote.vote-nu {
            background: var(--alert-red);
        }

        /* ===== CB RADIO OVERLAY ===== */
        #cb-radio-overlay {
            position: absolute;
            bottom: calc(130px + var(--safe-bottom));
            left: 15px;
            right: auto;
            max-width: calc(100% - 100px);
            background: var(--panel-bg);
            border: 2px solid var(--cb-blue);
            border-radius: 30px;
            padding: 8px 16px;
            z-index: 12;
            display: none;
            align-items: center;
            gap: 12px;
            -webkit-backdrop-filter: blur(12px);   /* Safari / iPhone */
            backdrop-filter: blur(12px);
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
            color: #FFF;
            font-size: 12px;
            pointer-events: auto;
            transition: all 0.3s ease;
            flex-wrap: nowrap;
            overflow-x: auto;
            white-space: nowrap;
        }
        #cb-radio-overlay.open {
            display: flex;
        }
        .cb-header {
            display: none;
        }
        .cb-status-row, .cb-users-row, .cb-range-row, .cb-speaker-name {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
        }
        .cb-status-row .cb-status-label,
        .cb-users-row span:first-child,
        .cb-range-row span:first-child {
            color: var(--text-muted);
        }
        .cb-status-value {
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            text-transform: uppercase;
        }
        .cb-status-value.free {
            background: rgba(0, 230, 118, 0.2);
            color: var(--safe-green);
        }
        .cb-status-value.occupied {
            background: rgba(255, 87, 34, 0.2);
            color: var(--cb-occupied);
            animation: pulseOccupied 0.8s infinite alternate;
        }
        @keyframes pulseOccupied {
            from { opacity: 0.6; }
            to { opacity: 1; }
        }
        .cb-users-row .cb-count {
            color: var(--safe-green);
            font-weight: 800;
        }
        .cb-range-row select {
            background: #1c1d22;
            border: 1px solid #444;
            color: #FFF;
            padding: 2px 6px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            outline: none;
            /* Trebuie să încapă și „Nelimitat", nu doar „10km" — la 60px se tăia
               în „Nelim" și nu se mai înțelegea ce e selectat. */
            max-width: 82px;
        }
        .cb-speaker-name .name {
            color: var(--cb-active);
            font-weight: 700;
        }
        /* Numele vorbitorului e singura parte a barei care poate fi scurtată fără
           pierdere: restul sunt cifre și stări. Fără `min-width: 0` nu se strânge
           deloc (regula implicită a elementelor flex) și împinge bara peste
           marginea ecranului, pe telefon. */
        .cb-speaker-name {
            color: var(--text-muted);
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .cb-sep {
            color: var(--text-muted);
            opacity: 0.3;
            margin: 0 2px;
        }

        /* ===== BUTON MICROFON CB RADIO ===== */
        #cb-mic-btn {
            position: absolute;
            bottom: calc(130px + var(--safe-bottom));
            right: 15px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #3d5a80, #1a2a3a);
            border: 3px solid var(--cb-blue);
            color: #FFF;
            font-size: 32px;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 25px rgba(33, 150, 243, 0.4);
            cursor: pointer;
            z-index: 11;
            transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
            pointer-events: auto;
            touch-action: none;
        }
        #cb-mic-btn:active {
            transform: scale(0.92);
        }
        #cb-mic-btn.recording {
            border-color: var(--alert-red);
            background: radial-gradient(circle at 30% 30%, #8a1a1a, #3a0a0a);
            box-shadow: 0 0 40px rgba(229, 57, 53, 0.6);
            animation: pulseMicRecord 0.6s infinite alternate;
        }
        @keyframes pulseMicRecord {
            from { box-shadow: 0 0 20px rgba(229, 57, 53, 0.4); transform: scale(1); }
            to { box-shadow: 0 0 50px rgba(229, 57, 53, 0.9); transform: scale(1.05); }
        }
        #cb-mic-btn.disabled {
            opacity: 0.4;
            pointer-events: none;
            border-color: #555;
        }
        #cb-mic-btn .cb-mic-label {
            position: absolute;
            bottom: -22px;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--text-muted);
            white-space: nowrap;
            letter-spacing: 0.5px;
        }
        #cb-notification {
            position: absolute;
            bottom: calc(240px + var(--safe-bottom));
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--cb-active);
            border-radius: 12px;
            padding: 10px 16px;
            z-index: 13;
            display: none;
            color: #FFF;
            font-size: 13px;
            -webkit-backdrop-filter: blur(8px);   /* Safari / iPhone */
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 20px rgba(0, 230, 118, 0.3);
            max-width: 220px;
            animation: slideUpNotif 0.3s ease;
        }
        @keyframes slideUpNotif {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        #cb-notification .notif-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            cursor: pointer;
            margin-left: 10px;
            padding: 0 4px;
        }
        #cb-notification .notif-msg {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ===== SETĂRI ===== */
        #settings-panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 11, 14, 0.96);
            z-index: 100;
            display: flex;
            flex-direction: column;
            padding: 40px 20px;
            color: #FFF;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.1, 1);
        }
        #settings-panel.open {
            transform: translateY(0);
        }
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
        }
        .settings-header h2 {
            font-size: 24px;
            font-weight: 900;
        }
        .close-settings {
            background: #fff;
            border: none;
            color: #000;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
        }
        .settings-scroll-area {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            flex-grow: 1;
            padding-bottom: 20px;
        }
        .setting-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
            padding: 16px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .setting-card label {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        .admin-auth-box {
            display: flex;
            gap: 10px;
        }
        .admin-auth-box input {
            flex: 1;
            background: #1c1d22;
            border: 1px solid #444;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            font-weight: bold;
            text-align: center;
        }
        .btn-auth-trigger {
            background: var(--accent-orange);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }
        .manual-radar-inputs {
            display: none;
            flex-direction: column;
            gap: 12px;
            margin-top: 10px;
            border-top: 1px dashed rgba(255, 255, 255, 0.1);
            padding-top: 15px;
        }
        .manual-input-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .manual-radar-inputs input {
            background: #1c1d22;
            border: 1px solid #3a3b45;
            color: #fff;
            padding: 16px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
        }
        .btn-add-manual {
            background: var(--safe-green);
            color: #000;
            font-weight: 900;
            font-size: 16px;
            padding: 18px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            text-transform: uppercase;
            box-shadow: 0 4px 15px rgba(0, 230, 118, 0.3);
        }
        .btn-toggle-switch {
            width: 100%;
            padding: 16px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 800;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
        }
        .btn-toggle-switch.active-blue {
            background: var(--cb-blue);
            color: #FFF;
        }
        .btn-toggle-switch.active-green {
            background: var(--safe-green);
            color: #000;
        }
        .btn-toggle-switch.inactive-red {
            background: rgba(229, 57, 53, 0.2);
            color: var(--alert-red);
        }
        .btn-toggle-switch.inactive-gray {
            background: rgba(255,255,255,0.05);
            color: var(--text-muted);
        }
        .setting-select-premium {
            background: #1c1d22;
            border: 1px solid #3a3b45;
            color: #FFF;
            padding: 16px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            width: 100%;
        }
        .panel-slider-box {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .panel-slider-box input {
            width: 100%;
            accent-color: var(--accent-orange);
        }
        .panel-slider-labels {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 800;
        }

        /* ----- STILURI ADMIN CHAT ----- */
        #admin-chat-list {
            max-height: 200px;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            padding: 8px;
        }
        .admin-chat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 13px;
            flex-wrap: wrap;
            gap: 4px;
        }
        .admin-chat-item .msg-text {
            flex: 1;
            margin-right: 10px;
            min-width: 80px;
        }
        .admin-chat-item .msg-meta {
            color: var(--text-muted);
            font-size: 11px;
            margin-right: 10px;
        }
        .admin-chat-item .btn-del-msg {
            background: var(--alert-red);
            border: none;
            color: #fff;
            padding: 4px 10px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
        }
        .admin-chat-item .btn-del-msg:active {
            transform: scale(0.95);
        }
        .btn-del-all {
            background: var(--alert-red);
            border: none;
            color: #fff;
            padding: 10px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }

        /* ----- alertă centrală ----- */
        #central-alert-banner {
            position: absolute;
            top: calc(15px + var(--safe-top));
            left: 50%;
            transform: translateX(-50%);
            background: var(--panel-bg);
            border: 3px solid var(--alert-red);
            border-radius: 40px;
            padding: 12px 30px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4);
            z-index: 999;
            transition: all 0.3s ease;
            /* Fără `max-content`, o bandă centrată cu left:50% primește doar jumătatea
               dreaptă a ecranului ca spațiu, și pe telefon textul se rupea pe trei rânduri. */
            width: max-content;
            max-width: calc(100% - 30px);
            /* Doar informativă: atingerile trec prin ea, ca prin chenarul roșu. Poziția
               de sus o stabilește app.js, sub panoul de butoane. */
            pointer-events: none !important;
        }
        #central-alert-banner * {
            pointer-events: none !important;
        }
        .alert-banner-hidden {
            top: -100px !important;
            opacity: 0;
        }
        #alert-message-text {
            color: #FFF;
            font-size: 20px;
            font-weight: 800;
        }

        /* ----- glow alert ----- */
        #glow-alert-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .alert-active {
            border: 10px solid var(--alert-red);
            box-shadow: inset 0 0 40px rgba(229, 57, 53, 0.8);
            animation: pulseGlow 1s infinite alternate;
            opacity: 1 !important;
        }
        .alert-inactive {
            opacity: 0;
        }

        /* ----- marker mașină ----- */
        .car-marker {
            /* 36, nu 48: pe hartă săgeata acoperea strada pe care tocmai o urmărești */
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .radar-marker {
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        .marker-radar_mobil {
            border: 2px solid var(--accent-orange);
        }
        .marker-politie {
            border: 2px solid #0D47A1;
        }
        .marker-pericol {
            border: 2px solid #FFF;
        }
        .marker-isctr {
            border: 2px solid #a5d6a7;
        }
        .marker-dama {
            border: 2px solid #d500f9;
            background: #1a0033;
        }
        .marker-radar_fix_admin {
            border: 3px solid #E53935;
            background: #000;
            box-shadow: 0 0 15px #E53935;
        }

        /* ----- MARKER CONVOY ----- */
        .convoy-marker {
            font-size: 28px;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 48px !important;
            height: 48px !important;
            background: rgba(255, 215, 0, 0.2) !important;
            border-radius: 50% !important;
            border: 3px solid var(--convoy-color) !important;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.4) !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 1000 !important;
            pointer-events: auto !important;
            transition: transform 0.3s ease;
        }
        .convoy-marker:hover {
            transform: scale(1.1);
        }

        /* ----- MARKER PARCARE ----- */
        .parking-marker {
            font-size: 32px;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 48px !important;
            height: 48px !important;
            background: rgba(0, 0, 0, 0.8) !important;
            border-radius: 50% !important;
            border: 3px solid #FFD700 !important;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.6) !important;
            cursor: pointer !important;
            animation: pulseParkingMarker 1.5s ease-in-out infinite !important;
            position: relative !important;
            z-index: 1000 !important;
            pointer-events: auto !important;
        }
        @keyframes pulseParkingMarker {
            0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
            50% { box-shadow: 0 0 45px rgba(255, 215, 0, 0.8); }
            100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
        }

        /* ----- MARKER PARKING SWAP ----- */
        .swap-marker {
            font-size: 30px;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            background: rgba(76, 175, 80, 0.2) !important;
            border-radius: 50% !important;
            border: 3px solid #4CAF50 !important;
            box-shadow: 0 0 30px rgba(76, 175, 80, 0.5) !important;
            cursor: pointer !important;
            animation: pulseSwapMarker 1.5s ease-in-out infinite !important;
            position: relative !important;
            z-index: 900 !important;
            pointer-events: auto !important;
        }
        @keyframes pulseSwapMarker {
            0% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.3); }
            50% { box-shadow: 0 0 45px rgba(76, 175, 80, 0.7); }
            100% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.3); }
        }

        /* ----- eroare locație ----- */
        .location-error {
            position: absolute;
            bottom: 120px;
            left: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.8);
            border-left: 4px solid var(--alert-red);
            padding: 12px;
            border-radius: 12px;
            color: white;
            font-size: 14px;
            z-index: 20;
            -webkit-backdrop-filter: blur(10px);   /* Safari / iPhone */
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .location-error button {
            background: var(--accent-orange);
            border: none;
            padding: 8px 16px;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }

        /* ========== UTILITĂȚI ========== */
        #utilities-panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 11, 14, 0.96);
            z-index: 101;
            display: flex;
            flex-direction: column;
            padding: 40px 20px;
            color: #FFF;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.1, 1);
        }
        #utilities-panel.open {
            transform: translateY(0);
        }
        .utilities-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            padding-bottom: 20px;
            flex-grow: 1;
        }
        .util-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
            padding: 16px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .util-card h3 {
            font-size: 18px;
            font-weight: 800;
            color: var(--accent-orange);
            margin-bottom: 4px;
        }
        .util-card .links {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .util-card .links a {
            background: #2a2a30;
            padding: 6px 14px;
            border-radius: 20px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            border: 1px solid #555;
            transition: background 0.2s;
        }
        .util-card .links a:active {
            background: #444;
        }
        .util-card .btn-util {
            background: var(--accent-orange);
            border: none;
            color: #fff;
            padding: 10px 16px;
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.1s;
            text-align: center;
            text-transform: uppercase;
        }
        .util-card .btn-util:active {
            transform: scale(0.96);
        }
        .util-card .btn-util.secondary {
            background: #2a2a30;
            border: 1px solid #555;
        }
        .util-card .btn-util.green {
            background: var(--safe-green);
            color: #000;
        }
        .util-card .btn-util.red {
            background: var(--alert-red);
        }
        .util-card .parking-zone-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 4px;
        }
        .util-card .parking-zone-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255,255,255,0.05);
            padding: 10px 12px;
            border-radius: 10px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: border 0.2s;
        }
        .util-card .parking-zone-item:active {
            border-color: var(--accent-orange);
        }
        .util-card .parking-zone-item .zone-name {
            font-weight: 700;
        }
        .util-card .parking-zone-item .zone-detail {
            color: var(--text-muted);
            font-size: 12px;
        }

        .cb-convoy-tag {
            color: var(--convoy-color);
            font-weight: 800;
            font-size: 12px;
            white-space: nowrap;
        }

        /* ===== RADIO ONLINE ===== */
        #radio-panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 11, 14, 0.96);
            z-index: 101;
            display: flex;
            flex-direction: column;
            padding: 40px 20px;
            color: #FFF;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.1, 1);
            box-sizing: border-box;
        }
        #radio-panel.open {
            transform: translateY(0);
        }
        .radio-station-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            flex-grow: 1;
        }
        .radio-empty-msg {
            color: var(--text-muted);
            font-size: 14px;
            text-align: center;
            padding: 30px 10px;
        }
        .radio-station-item {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
            padding: 10px 14px;
            border-radius: 14px;
            cursor: pointer;
        }
        .radio-station-item.activ {
            border-color: var(--accent-orange);
            background: rgba(255, 107, 0, 0.12);
        }
        .radio-station-item img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .radio-station-fallback {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .radio-station-nume {
            flex: 1;
            font-weight: 700;
            font-size: 15px;
        }
        .radio-station-play {
            font-size: 18px;
        }
        #radio-mini-player {
            position: absolute;
            bottom: calc(120px + var(--safe-bottom));
            left: 15px;
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 16px;
            padding: 10px 14px;
            display: none;
            align-items: center;
            gap: 10px;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
        }
        #radio-mini-player img {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            object-fit: cover;
        }
        #radio-mini-nume {
            flex: 1;
            color: #FFF;
            font-weight: 700;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #radio-mini-player button {
            background: transparent;
            border: none;
            color: #FFF;
            font-size: 20px;
            cursor: pointer;
        }

        /* Toast / banner pentru frontieră și Fetești */
        .toast-banner {
            position: absolute;
            bottom: calc(180px + var(--safe-bottom));
            left: 15px;
            right: 15px;
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 16px;
            padding: 14px 18px;
            z-index: 15;
            display: none;
            flex-direction: column;
            gap: 10px;
            -webkit-backdrop-filter: blur(10px);   /* Safari / iPhone */
            backdrop-filter: blur(10px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.6);
            color: #fff;
            font-size: 14px;
        }

        /* ===== Simulare de traseu — doar pe radar.bipx.eu =====
           Chenar punctat albastru, ca să nu poată fi confundată cu o funcție reală. */
        #simulare-panel {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: calc(130px + var(--safe-bottom));
            max-width: 460px;
            background: var(--panel-bg);
            border: 2px dashed #00B0FF;
            border-radius: 14px;
            padding: 10px 12px;
            z-index: 150;
            flex-direction: column;
            gap: 8px;
            color: #FFF;
            font-size: 13px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        }
        .simulare-cap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
            color: #00B0FF;
        }
        .simulare-cap button {
            background: transparent;
            border: 0;
            color: #FFF;
            font-size: 18px;
            cursor: pointer;
        }
        .simulare-rand {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }
        .simulare-rand button,
        .simulare-rand select {
            background: #2a2a30;
            color: #FFF;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 7px 9px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .simulare-rand button.activ {
            border-color: #00B0FF;
            background: #003a55;
        }
        .simulare-rand .simulare-principal {
            background: #00B0FF;
            color: #001a26;
            border-color: #00B0FF;
            margin-left: auto;
        }
        .simulare-rand label {
            color: var(--text-muted);
        }
        #simulare-stare {
            font-size: 12px;
            color: var(--text-muted);
        }
        .action-icon.simulare-in-mers {
            border-color: #00B0FF;
            box-shadow: 0 0 0 2px #00B0FF;
        }
        .marker-de-test {
            outline: 2px dashed #00B0FF;
            outline-offset: 2px;
            border-radius: 50%;
        }

        .toast-banner .toast-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
        }
        .toast-banner .toast-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        .toast-banner .toast-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .toast-banner .toast-buttons button {
            flex: 1;
            min-width: 100px;
            padding: 10px 12px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            font-size: 13px;
            background: #2a2a30;
            color: #fff;
            transition: background 0.2s;
        }
        .toast-banner .toast-buttons button:active {
            background: #444;
        }
        .toast-banner .toast-buttons button.primary {
            background: var(--accent-orange);
        }
        .toast-banner .toast-buttons button.secondary {
            background: var(--safe-green);
            color: #000;
        }

        /* Modal confirmare parcare */
        #parking-confirm-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 102;
        }
        #parking-confirm-modal .modal-box {
            background: var(--panel-bg);
            border: 2px solid var(--accent-orange);
            border-radius: 20px;
            padding: 24px;
            max-width: 340px;
            width: 90%;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        #parking-confirm-modal .modal-box h3 {
            font-size: 20px;
            font-weight: 900;
        }
        #parking-confirm-modal .modal-box .detail-row {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        #parking-confirm-modal .modal-box .detail-row .label {
            color: var(--text-muted);
        }
        #parking-confirm-modal .modal-box .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        #parking-confirm-modal .modal-box .modal-buttons button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
        }
        #parking-confirm-modal .modal-box .modal-buttons .cancel {
            background: #2a2a30;
            color: #fff;
        }
        #parking-confirm-modal .modal-box .modal-buttons .send {
            background: var(--safe-green);
            color: #000;
        }

        /* ----- responsive ----- */
        @media (orientation: portrait) {
            .reporting-action-bar { gap: clamp(4px, 1.2vw, 10px); }
            .report-btn .icon { font-size: clamp(20px, 4.5vw, 32px); }
            .report-btn .label { font-size: clamp(8px, 1.4vw, 12px); }
            .esim-bottom-right {
                padding: 8px 16px;
                font-size: clamp(12px, 2.5vw, 15px);
            }
            #btn-recenter { bottom: 300px; }
            .speed-limit-sign { top: calc(75px + var(--safe-top)); width: 60px; height: 60px; font-size: 18px; border-width: 5px; }
            .speed-limit-sign .score-sub { font-size: 7px; }
            .top-left-panel { width: auto; padding: 10px 12px; }
            .top-left-panel.detector-mode { padding: 8px 10px; }
            .action-icon { width: 30px; height: 30px; font-size: 16px; }
            #panel-info { margin-top: 8px; }
            #current-speed { font-size: 42px; line-height: 42px; }
            #chat-container {
                max-height: 220px;
                width: min(95%, 320px);
                bottom: calc(110px + var(--safe-bottom));
                left: 10px;
                font-size: 12px;
            }
            #chat-messages { max-height: 120px; }
            #admin-chat-list { max-height: 150px; }
            .toast-banner { bottom: calc(160px + var(--safe-bottom)); }
            #cb-radio-overlay {
                left: 10px;
                right: auto;
                max-width: calc(100% - 80px);
                padding: 6px 12px;
                font-size: 10px;
                gap: 6px;
                bottom: calc(110px + var(--safe-bottom));
                border-radius: 20px;
            }
            #cb-mic-btn {
                width: 60px;
                height: 60px;
                font-size: 28px;
                bottom: calc(110px + var(--safe-bottom));
                right: 10px;
            }
            #cb-notification {
                bottom: calc(200px + var(--safe-bottom));
                right: 10px;
                max-width: 160px;
                font-size: 12px;
            }
            .info-box { font-size: 13px; }
            #convoy-popup {
                max-width: 300px;
                padding: 18px 20px;
            }
            #convoy-popup .convoy-code-box {
                font-size: 18px;
            }
        }
        @media (max-width: 480px) {
            /* Pe telefon bannerul eSIM rămâne exact cum era: fără lățime impusă,
               deci se întinde pe toată lățimea overlay-ului. Limitarea la
               --panel-width e utilă doar pe ecrane mari, unde altfel ar traversa
               tot ecranul. */
            .esim-bottom-right { width: auto; }
            .reporting-action-bar { gap: 4px; }
            .report-btn { border-radius: 10px; padding: 4px 2px; }
            .report-btn .icon { font-size: clamp(18px, 6vw, 26px); }
            .report-btn .label { font-size: clamp(7px, 2vw, 10px); }
            .action-icon.parking-btn { width: 28px; height: 28px; font-size: 14px; }
            .action-icon.convoy-btn { width: 28px; height: 28px; font-size: 14px; }
            .action-icon.parking-swap-btn { width: 28px; height: 28px; font-size: 14px; }
        }

        /* ==========================================================================
           ASPECT NOU („BipX Black") — a doua temă, pornită din Setări.
           Totul stă sub `body.tema-noua`, deci aspectul clasic rămâne neatins.
           Butoanele nu sunt duplicate: app.js le mută în rafturile de mai jos și
           le pune la loc când se revine la clasic. Așa nu există două seturi de
           butoane care s-ar putea desincroniza.
           Când tema nouă rămâne singura, se șterg acest bloc și funcția
           `aplicaAspect` din app.js — nimic altceva.
           ========================================================================== */
        body.tema-noua {
            --nou-fund: #000000;          /* negru real: pe ecranele OLED pixelul e stins */
            --nou-card: #101014;
            --nou-linie: #26262e;
            --nou-turcoaz: #00E5D0;
            --nou-gri: #8b8b95;
            background: #000000;
        }

        /* Bara de sus merge dintr-o margine în alta, deci overlay-ul nu mai are
           spațiu lateral propriu; fiecare element de dedesubt îl are pe al lui. */
        body.tema-noua .ui-overlay {
            padding-left: 0;
            padding-right: 0;
        }
        /* fără bannerul de instalare, bara de sus urcă până în marginea ecranului;
           cu el, rămâne regula din aspectul clasic, ca să nu intre sub banner */
        body.tema-noua:not(.cu-banner-instalare) .ui-overlay {
            padding-top: var(--safe-top);
        }

        /* ----- bara de sus (viteza + activi) ----- */
        body.tema-noua #top-left-panel {
            width: 100%;
            background: rgba(0, 0, 0, 0.92);
            border: none;
            border-bottom: 1px solid var(--nou-linie);
            border-radius: 0;
            padding: 6px 14px;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 52px;
        }
        body.tema-noua #top-left-panel.detector-mode {
            width: 100%;
            padding: 6px 14px;
        }
        /* rafturile țin butoanele acum; ce rămâne în panou se ascunde */
        body.tema-noua #top-left-panel .panel-actions {
            display: none;
        }
        body.tema-noua #panel-info {
            margin-top: 0;
            display: flex;
            align-items: baseline;
            gap: 10px;
        }
        body.tema-noua #current-speed {
            font-size: 34px;
            line-height: 34px;
            color: #FFFFFF;
        }
        body.tema-noua .speed-box .unit {
            font-size: 12px;
            color: var(--nou-gri);
        }
        body.tema-noua .theme-tag {
            margin-top: 0;
            font-size: 11px;
            color: var(--nou-gri);
        }

        /* ----- rafturile de butoane, pe margini, la îndemâna degetului ----- */
        .nou-rail { display: none; }
        body.tema-noua .nou-rail {
            position: absolute;
            /* Poziția o scrie app.js (`asazaRafturile`), măsurată pe ecranul real:
               bara de sus e mai înaltă pe telefoanele cu decupaj, iar înălțimea ei se
               schimbă și când apare o alertă. Valoarea de aici e doar punctul de
               plecare, până la prima măsurătoare. */
            top: calc(92px + var(--safe-top));
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 13;
            pointer-events: auto;
        }
        /* când golul dintre bara de sus și bara stației e prea mic, butoanele se
           micșorează singure în loc să iasă peste altceva */
        body.tema-noua .nou-rail.rafturi-inguste .action-icon,
        body.tema-noua .nou-rail.rafturi-inguste #btn-sos {
            width: 44px;
            height: 44px;
            min-width: 44px;
            font-size: 19px;
            border-radius: 14px;
        }
        body.tema-noua .nou-rail.rafturi-inguste { gap: 6px; }
        body.tema-noua .nou-rail.rafturi-inguste .action-icon::after,
        body.tema-noua .nou-rail.rafturi-inguste #btn-sos::before { bottom: -11px; font-size: 7px; }

        body.tema-noua #nou-rail-stanga { left: 10px; }
        body.tema-noua #nou-rail-dreapta { right: 10px; }

        body.tema-noua .nou-rail .action-icon,
        body.tema-noua .nou-rail #btn-sos {
            position: relative;
            width: 54px;
            height: 54px;
            min-width: 54px;
            border-radius: 17px;
            background: rgba(16, 16, 20, 0.92);
            border: 1px solid var(--nou-linie);
            font-size: 23px;
            box-shadow: none;
            margin: 0;
            top: auto;
            bottom: auto;
            left: auto;
            right: auto;
            animation: none;
            flex-shrink: 0;
        }
        body.tema-noua .nou-rail .action-icon.active-icon {
            border-color: var(--nou-turcoaz);
            color: var(--nou-turcoaz);
            background: rgba(0, 229, 208, 0.12);
        }
        body.tema-noua .nou-rail #btn-sos {
            border-color: var(--alert-red);
            color: var(--alert-red);
            font-size: 22px;
        }
        body.tema-noua .nou-rail #btn-sos::after { display: none; }
        body.tema-noua .nou-rail #btn-sos.sos-holding {
            background: var(--alert-red);
            color: #fff;
        }
        /* eticheta de sub buton: spune ce face, fără să ocupe un rând întreg */
        body.tema-noua .nou-rail .action-icon::after,
        body.tema-noua .nou-rail #btn-sos::before {
            content: attr(data-nume);
            position: absolute;
            bottom: -13px;
            left: -6px;
            right: -6px;
            text-align: center;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.3px;
            color: var(--nou-gri);
            pointer-events: none;
        }

        /* ----- butoanele de raportare: mari, pe un singur rând ----- */
        body.tema-noua .reporting-action-bar {
            padding: 0 10px;
            gap: 8px;
            max-width: 780px;
            flex-wrap: nowrap;
            order: 10;
            margin-top: auto;
        }
        body.tema-noua .report-btn {
            aspect-ratio: auto;
            max-width: none;
            height: clamp(76px, 11vh, 104px);
            border-radius: 18px;
            border-width: 1px;
            border-color: var(--nou-linie);
            background: var(--nou-card);
            gap: 4px;
            padding: 8px 4px;
        }
        body.tema-noua .report-btn .icon { font-size: clamp(24px, 6vw, 34px); }
        body.tema-noua .report-btn .label { font-size: clamp(9px, 2.4vw, 12px); letter-spacing: 0.2px; }
        body.tema-noua .report-btn.radar-mobil { border-color: rgba(255, 107, 0, 0.55); }
        body.tema-noua .report-btn.politie { background: var(--nou-card); border-color: rgba(33, 150, 243, 0.55); }
        body.tema-noua .report-btn.pericol { background: var(--nou-card); border-color: rgba(255, 145, 0, 0.55); }
        body.tema-noua .report-btn.isctr { background: var(--nou-card); border-color: rgba(0, 230, 118, 0.5); }

        /* ----- banda eSIM: turcoaz, fix deasupra butoanelor ----- */
        /* Banda eSIM stă SUS, deasupra vitezei: acolo o vede șoferul înainte să
           plece, nu printre butoanele de raportare. `order: -1` o scoate prima în
           coloana de elemente. */
        .esim-nou-text, .esim-nou-chip { display: none; }
        body.tema-noua .esim-clasic { display: none; }
        body.tema-noua .esim-nou-text { display: inline; }
        body.tema-noua .esim-nou-chip {
            display: inline-block;
            background: var(--nou-turcoaz);
            color: #00201d;
            border-radius: 20px;
            padding: 3px 12px;
            font-size: 12px;
            font-weight: 900;
            flex-shrink: 0;
        }
        body.tema-noua .esim-bottom-right {
            order: -1;
            margin: 0 10px 6px 10px;
            width: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: #0b1413;
            border: 1px solid rgba(0, 229, 208, 0.5);
            border-radius: 14px;
            padding: 9px 10px 9px 14px;
            color: var(--nou-turcoaz);
            font-size: 13px;
            font-weight: 800;
            text-align: left;
            line-height: 1.2;
            box-shadow: none;
            /* fără pulsație: o animație care rulează la nesfârșit ține ecranul
               ocupat degeaba și mănâncă baterie */
            animation: none;
        }

        /* ----- cardul de ofertă eSIM ----- */
        #esim-oferta {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(92vw, 380px);
            background: #0b1413;
            border: 1px solid rgba(0, 229, 208, 0.45);
            border-radius: 20px;
            padding: 20px 18px 16px 18px;
            z-index: 2200;
            color: #fff;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
        }
        #esim-oferta.deschis { display: block; }
        .esim-oferta-x {
            position: absolute;
            top: 10px;
            right: 12px;
            background: none;
            border: none;
            color: #8b8b95;
            font-size: 18px;
            cursor: pointer;
        }
        .esim-oferta-eticheta {
            display: inline-block;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1px;
            color: #00E5D0;
            border: 1px solid rgba(0, 229, 208, 0.4);
            border-radius: 20px;
            padding: 3px 10px;
        }
        #esim-oferta h3 { margin: 10px 0 6px 0; font-size: 20px; line-height: 1.25; }
        #esim-oferta p { margin: 0; font-size: 14px; color: #c9c9d2; line-height: 1.4; }
        .esim-oferta-bonus {
            margin-top: 12px;
            background: rgba(0, 229, 208, 0.1);
            border: 1px dashed rgba(0, 229, 208, 0.45);
            border-radius: 12px;
            padding: 10px;
            font-size: 13px;
            font-weight: 800;
            color: #00E5D0;
            text-align: center;
        }
        .esim-oferta-cta {
            display: block;
            margin-top: 14px;
            text-align: center;
            text-decoration: none;
            background: linear-gradient(90deg, #00E5D0 0%, #00B8A9 100%);
            color: #00201d;
            font-weight: 900;
            font-size: 16px;
            padding: 14px;
            border-radius: 14px;
        }
        .esim-oferta-jos {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        .esim-oferta-jos button {
            flex: 1;
            background: none;
            border: 1px solid #2a2a33;
            color: #8b8b95;
            border-radius: 10px;
            padding: 9px 6px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        /* ----- stația CB ----- */
        /* Stația CB, ca în schița aprobată: un singur card lat, cu starea canalului
           mare în stânga, butonul de reascultare și pastila razei la îndemână, iar
           butonul de vorbit rotund, lângă el. Așezarea e pe grilă, nu pe un rând
           care se derulează lateral — pe telefon jumătate din bară rămânea ascunsă. */
        body.tema-noua #cb-radio-overlay.open {
            display: grid;
            grid-template-columns: minmax(86px, 1fr) auto auto;
            column-gap: 10px;
            row-gap: 2px;
            align-items: center;
        }
        body.tema-noua #cb-radio-overlay {
            left: 10px;
            right: 96px;
            max-width: none;
            bottom: calc(127px + var(--safe-bottom));
            background: rgba(10, 10, 12, 0.96);
            border: 1px solid var(--nou-linie);
            border-radius: 18px;
            padding: 10px 12px;
            overflow: visible;
            white-space: normal;
            font-size: 13px;
        }
        body.tema-noua .cb-status-row {
            grid-column: 1;
            grid-row: 1;
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.15;
        }
        /* „Canal" e scris din CSS: în aspectul clasic eticheta are două puncte, aici nu */
        body.tema-noua .cb-status-row::before {
            content: 'Canal ';
            color: var(--nou-gri);
            font-weight: 700;
        }
        body.tema-noua .cb-status-value {
            background: none;
            padding: 0;
            border-radius: 0;
            font-size: inherit;
            text-transform: lowercase;
        }
        body.tema-noua .cb-status-value.free { color: var(--safe-green); }
        body.tema-noua .cb-status-value.occupied { color: var(--alert-orange); }
        body.tema-noua .cb-users-row {
            grid-column: 1;
            grid-row: 2;
            margin: 0;
            font-size: 11px;
            color: var(--nou-gri);
        }
        body.tema-noua .cb-users-row > span:first-child { display: none; }
        body.tema-noua .cb-users-row::after { content: ' pe canal'; }
        body.tema-noua .cb-users-row { white-space: nowrap; }
        body.tema-noua #cb-radio-overlay .cb-replay-btn {
            grid-column: 2;
            grid-row: 1 / span 2;
            width: 40px;
            height: 40px;
            font-size: 18px;
        }
        body.tema-noua .cb-range-row {
            grid-column: 3;
            grid-row: 1 / span 2;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(0, 229, 208, 0.1);
            border: 1px solid rgba(0, 229, 208, 0.4);
            border-radius: 22px;
            padding: 7px 8px;
        }
        /* iconița de semnal se vede deja pe pastilă; textul e ce contează */
        body.tema-noua .cb-range-row > span:first-child { font-size: 11px; }
        body.tema-noua #cb-range-select {
            background: none;
            border: none;
            color: var(--nou-turcoaz);
            padding: 0;
            font-size: 12px;
            font-weight: 800;
            max-width: 64px;
        }
        body.tema-noua .cb-speaker-name {
            grid-column: 1 / -1;
            grid-row: 3;
            margin: 0;
            font-size: 12px;
            color: var(--nou-gri);
        }
        body.tema-noua .cb-convoy-tag { grid-column: 1 / -1; grid-row: 4; margin: 0; }
        body.tema-noua .cb-sep { display: none; }
        /* pe telefon fiecare cuvânt în plus taie din numele vorbitorului; pastila
           „LIBER / OCUPAT" spune oricum despre ce e vorba */
        body.tema-noua .cb-status-label { display: none; }
        .cb-replay-btn {
            display: none;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid #26262e;
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 15px;
            cursor: pointer;
            flex-shrink: 0;
        }
        body.tema-noua #cb-radio-overlay .cb-replay-btn { display: block; }
        /* Butonul de vorbit: verde cât canalul e liber, roșu cât transmiți, stins
           când vorbește altcineva. Scrie pe el ce trebuie făcut. */
        body.tema-noua #cb-mic-btn {
            bottom: calc(127px + var(--safe-bottom));
            right: 10px;
            width: 76px;
            height: 76px;
            flex-direction: column;
            gap: 0;
            font-size: 26px;
            border-width: 3px;
            border-color: var(--safe-green);
            background: radial-gradient(circle at 30% 30%, #1d6b38, #0b2a16);
            box-shadow: 0 4px 22px rgba(0, 230, 118, 0.35);
        }
        body.tema-noua #cb-mic-btn .cb-mic-label {
            position: static;
            line-height: 1;
            bottom: auto;
            text-transform: none;
            letter-spacing: 0;
            color: #fff;
            font-size: 10px;
            margin-top: 1px;
        }
        /* Ce scrie pe buton („Ține", „Ocupat" sau secundele rămase) vine din app.js,
           dintr-un singur loc — vezi `actualizeazaButonVorbitCB`. */
        body.tema-noua #cb-mic-btn.recording .cb-mic-label,
        body.tema-noua #cb-mic-btn.in-racire .cb-mic-label {
            font-size: 13px;
            font-weight: 900;
        }
        /* cât mai am voie să vorbesc: bara se golește în 10 secunde, exact cât ține
           canalul ocupat. Un singur element animat, fără cronometru în JavaScript. */
        /* Inelul care se golește: verde-liber nu are inel, roșu cât transmiți
           (10 s), gri cât mai aștepți până la următorul mesaj (7 s). Unghiul vine
           din `--cb-progres`, scris de app.js de cinci ori pe secundă — doar cât
           durează transmisia și răcirea, nu tot timpul. */
        body.tema-noua #cb-mic-btn::before {
            content: '';
            position: absolute;
            top: -7px; right: -7px; bottom: -7px; left: -7px;   /* iPhone mai vechi */
            inset: -7px;
            border-radius: 50%;
            background: conic-gradient(var(--cb-inel, transparent) calc(var(--cb-progres, 0) * 360deg),
                                       rgba(255, 255, 255, 0.07) 0);
            -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
                    mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
            pointer-events: none;
        }
        body.tema-noua #cb-mic-btn.recording {
            --cb-inel: #FF5252;
            border-color: var(--alert-red);
            background: radial-gradient(circle at 30% 30%, #8a1a1a, #3a0a0a);
            box-shadow: 0 0 30px rgba(229, 57, 53, 0.55);
            /* fără pulsație: inelul spune deja ce se întâmplă, iar o animație care
               umflă butonul face cifrele greu de citit din mers */
            animation: none;
        }
        body.tema-noua #cb-mic-btn.in-racire {
            --cb-inel: #9a9aa2;
            border-color: #55555e;
            background: radial-gradient(circle at 30% 30%, #34343c, #17171b);
            box-shadow: none;
            color: #9a9aa2;
            opacity: 1;
        }
        @keyframes cb-timp-ramas {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }

        /* ----- meniul negru, pe grupuri ----- */
        body.tema-noua #settings-panel {
            background: #000000;
        }
        body.tema-noua .setting-card {
            background: #101014;
            border: 1px solid #26262e;
            border-radius: 16px;
        }
        .nou-grup-titlu {
            display: none;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.2px;
            color: #8b8b95;
            text-transform: uppercase;
            margin: 18px 4px 6px 4px;
        }
        body.tema-noua .nou-grup-titlu { display: block; }

        /* ----- restul hărții ----- */
        body.tema-noua #btn-recenter {
            /* `top` îl scrie app.js (`asazaRafturile`), sub raftul din dreapta */
            bottom: calc(215px + var(--safe-bottom));
            right: 10px;
            background: rgba(16, 16, 20, 0.92);
            border-color: #26262e;
            color: #fff;
        }
        /* semnul de limită stă în bara de sus, între viteză și numărul de șoferi */
        body.tema-noua #map-speed-limit {
            position: static;
            top: auto;
            right: auto;
            left: auto;
            transform: none;
            margin: 0;
            width: 44px;
            height: 44px;
            font-size: 15px;
            flex-shrink: 0;
        }
        body.tema-noua #map-speed-limit .score-sub { font-size: 7px; }
        body.tema-noua #top-left-panel { position: relative; }
        /* ----- alerta, scrisă în bara de sus ----- */
        body.tema-noua #central-alert-banner {
            position: static;
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
            max-width: none;
            margin: 0;
            padding: 0 0 0 10px;
            background: none;
            border: none;
            box-shadow: none;
            border-radius: 0;
            transform: none;
            animation: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            color: var(--alert-red);
            font-size: 14px;
            font-weight: 800;
            line-height: 1.1;
            text-align: left;
        }
        body.tema-noua #central-alert-banner .alert-icon { display: none; }
        /* un singur rând: dacă textul s-ar rupe în două, bara de sus ar crește și ar
           împinge tot ecranul de câte ori intră o alertă */
        body.tema-noua #alert-message-text {
            font-size: 13px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.tema-noua #central-alert-banner.alert-banner-hidden { display: none; }
        body.tema-noua #central-alert-banner.reia::after {
            content: '';
            display: block;
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background: var(--alert-red);
            transform-origin: left center;
            animation: alerta-timp-ramas 10s linear forwards;
        }
        @keyframes alerta-timp-ramas {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }
        /* cât e o alertă pe ecran, numărul de șoferi activi lasă loc pentru ea */
        body.tema-noua.are-alerta .theme-tag { display: none; }

        @media (max-width: 420px) {
            body.tema-noua .nou-rail .action-icon,
            body.tema-noua .nou-rail #btn-sos {
                width: 48px;
                height: 48px;
                min-width: 48px;
                font-size: 20px;
                border-radius: 15px;
            }
            body.tema-noua #btn-recenter { width: 48px; height: 48px; }
        }

        /* ----- modul detector în aspectul nou ----- */
        /* viteza rămâne în bara de sus (nu se dublează pe drum), iar semnul de
           limită urcă lângă ea: pe margini ar sta peste rafturile de butoane */
        body.tema-noua .top-left-panel.detector-mode #panel-info {
            display: flex !important;
        }
        body.tema-noua #det-viteza { display: none; }
        body.tema-noua #det-limita {
            /* `top` îl scrie app.js, aliniat cu bara de sus */
            right: 12px;
            width: 46px;
            height: 46px;
            border-width: 5px;
            font-size: 15px;
            z-index: 14;
        }

        /* ===== Pictograme cu linie (bec, ochi, drum, cele trei linii...), ca în schiță =====
           Emoji-urile din butoane le scrie app.js în multe locuri (🔒/🔓, 🗺️/📡...).
           În loc să le schimbăm peste tot, aici le facem invizibile și desenăm
           pictograma peste ele: starea (activ / inactiv) vine tot din clasele puse de
           app.js, iar culoarea din `color`. */
        body.tema-noua #icon-wake, body.tema-noua #icon-toggle-radare, body.tema-noua #icon-mode, body.tema-noua #icon-settings, body.tema-noua #icon-cb, body.tema-noua #icon-radio-online, body.tema-noua #nou-btn-comunitate, body.tema-noua #icon-chat, body.tema-noua #convoy-btn, body.tema-noua #parking-btn, body.tema-noua #swap-btn {
            font-size: 0 !important;
        }
        body.tema-noua #icon-wake::before, body.tema-noua #icon-toggle-radare::before, body.tema-noua #icon-mode::before, body.tema-noua #icon-settings::before, body.tema-noua #icon-cb::before, body.tema-noua #icon-radio-online::before, body.tema-noua #nou-btn-comunitate::before, body.tema-noua #icon-chat::before, body.tema-noua #convoy-btn::before, body.tema-noua #parking-btn::before, body.tema-noua #swap-btn::before {
            content: '';
            width: 24px;
            height: 24px;
            background-color: currentColor;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            flex-shrink: 0;
        }
        body.tema-noua #icon-wake::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1m8-9v1m8%208h1M5.6%205.6l.7.7m12.1-.7l-.7.7M9%2016a5%205%200%201%201%206%200a3.5%203.5%200%200%200-1%203a2%202%200%200%201-4%200a3.5%203.5%200%200%200-1-3M9.7%2017h4.6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1m8-9v1m8%208h1M5.6%205.6l.7.7m12.1-.7l-.7.7M9%2016a5%205%200%201%201%206%200a3.5%203.5%200%200%200-1%203a2%202%200%200%201-4%200a3.5%203.5%200%200%200-1-3M9.7%2017h4.6%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-toggle-radare::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012a2%202%200%201%200%204%200a2%202%200%200%200-4%200M21%2012c-2.4%204-5.4%206-9%206s-6.6-2-9-6c2.4-4%205.4-6%209-6s6.6%202%209%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012a2%202%200%201%200%204%200a2%202%200%200%200-4%200M21%2012c-2.4%204-5.4%206-9%206s-6.6-2-9-6c2.4-4%205.4-6%209-6s6.6%202%209%206%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-toggle-radare.warning-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.6%2010.6a2%202%200%200%200%202.8%202.8M16.7%2016.7A8.7%208.7%200%200%201%2012%2018c-3.6%200-6.6-2-9-6c1.3-2.1%202.7-3.7%204.3-4.7m2.9-1.1A9%209%200%200%201%2012%206c3.6%200%206.6%202%209%206c-.7%201.1-1.4%202.1-2.1%202.9M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.6%2010.6a2%202%200%200%200%202.8%202.8M16.7%2016.7A8.7%208.7%200%200%201%2012%2018c-3.6%200-6.6-2-9-6c1.3-2.1%202.7-3.7%204.3-4.7m2.9-1.1A9%209%200%200%201%2012%206c3.6%200%206.6%202%209%206c-.7%201.1-1.4%202.1-2.1%202.9M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-mode::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019l4-14M16%205l4%2014M12%208V6M12%2013v-2M12%2018v-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019l4-14M16%205l4%2014M12%208V6M12%2013v-2M12%2018v-2%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-settings::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-cb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203L4.6%206.7A1%201%200%200%200%204%207.7V19a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V8a1%201%200%200%200-1-1H4.5M4%2012h16M7%2012v-2M17%2016v.01M13%2016v.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203L4.6%206.7A1%201%200%200%200%204%207.7V19a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V8a1%201%200%200%200-1-1H4.5M4%2012h16M7%2012v-2M17%2016v.01M13%2016v.01%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-radio-online::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M13%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M9%2017V4h10v13M9%208h10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M13%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M9%2017V4h10v13M9%208h10%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #nou-btn-comunitate::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207a4%204%200%201%200%208%200a4%204%200%200%200-8%200M3%2021v-2a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v2M16%203.1a4%204%200%200%201%200%207.8M21%2021v-2a4%204%200%200%200-3-3.9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207a4%204%200%201%200%208%200a4%204%200%200%200-8%200M3%2021v-2a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v2M16%203.1a4%204%200%200%201%200%207.8M21%2021v-2a4%204%200%200%200-3-3.9%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #icon-chat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020l1.3-3.9C2%2012.7%202.9%208.2%206.4%205.7c3.5-2.5%208.6-2.3%2011.8.5c3.3%202.8%203.7%207.3%201%2010.5c-2.7%203.2-7.6%204.2-11.6%202.3L3%2020%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020l1.3-3.9C2%2012.7%202.9%208.2%206.4%205.7c3.5-2.5%208.6-2.3%2011.8.5c3.3%202.8%203.7%207.3%201%2010.5c-2.7%203.2-7.6%204.2-11.6%202.3L3%2020%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #convoy-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M15%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M5%2017H3v-6l2-5h9l4%205h1a2%202%200%200%201%202%202v4h-2m-4%200H9m-6-6h15m-6%200V6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M15%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M5%2017H3v-6l2-5h9l4%205h1a2%202%200%200%201%202%202v4h-2m-4%200H9m-6-6h15m-6%200V6%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #parking-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2zM9%2016V8h4a2%202%200%200%201%200%204H9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2zM9%2016V8h4a2%202%200%200%201%200%204H9%22%2F%3E%3C%2Fsvg%3E"); }
        body.tema-noua #swap-btn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010h14l-4-4M17%2014H3l4%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010h14l-4-4M17%2014H3l4%204%22%2F%3E%3C%2Fsvg%3E"); }

        /* ===== A1 · butonul „Comunitate" și panoul lui ===== */
        body.tema-noua #nou-btn-comunitate { color: #AFA9EC; }
        body.tema-noua #nou-btn-comunitate.convoi-activ { border-color: #FFD700; color: #FFD700; }
        body.tema-noua #nou-btn-comunitate.deschis { background: #1d1a3a; border-color: #7F77DD; color: #fff; }
        .nou-punct { display: none; }
        body.tema-noua #nou-btn-comunitate.are-noutati .nou-punct {
            display: block;
            position: absolute;
            top: -4px;
            right: -4px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--alert-red);
            border: 2px solid #000;
        }
        #nou-comunitate, #nou-comunitate-fundal { display: none; }
        body.tema-noua #nou-comunitate-fundal.deschis {
            display: block;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 30;
        }
        body.tema-noua #nou-comunitate.deschis {
            display: flex;
            flex-direction: column;
            gap: 9px;
            position: absolute;
            width: 180px;
            z-index: 31;
        }
        body.tema-noua #nou-comunitate .action-icon {
            width: 100%;
            height: 52px;
            border-radius: 16px;
            background: #101014;
            border: 1px solid #26262e;
            color: #fff;
            justify-content: flex-start;
            gap: 12px;
            padding: 0 14px;
            box-shadow: none;
            animation: none;
        }
        body.tema-noua #nou-comunitate .action-icon::after {
            content: attr(data-nume);
            font-size: 15px;
            font-weight: 700;
            color: #fff;
        }
        body.tema-noua #nou-comunitate #convoy-btn { color: #FFD700; }
        body.tema-noua #nou-comunitate #parking-btn { color: #64B5F6; }
        body.tema-noua #nou-comunitate #swap-btn { color: #00E676; }
        body.tema-noua #nou-comunitate .chat-new-msg { border-color: var(--alert-red); background: #1f0b0b; }
        body.tema-noua #nou-comunitate .convoy-active { border-color: #FFD700; background: #1d1905; }
        body.tema-noua #nou-comunitate .has-swap,
        body.tema-noua #nou-comunitate .parking-saved,
        body.tema-noua #nou-comunitate .parking-found { border-color: #00E676; background: #06170d; }

        /* ===== B · ecranul Premium ===== */
        body.e-premium .doar-standard { display: none !important; }
        body:not(.e-premium) .doar-premium { display: none !important; }
        #premium-foaie-fundal, #premium-foaie { display: none; }
        #premium-foaie-fundal.deschis {
            display: block;
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2300;
        }
        #premium-foaie.deschis {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            background: #0d0d10;
            border-top: 1px solid #FF6B00;
            border-radius: 22px 22px 0 0;
            padding: 12px 18px calc(18px + var(--safe-bottom)) 18px;
            z-index: 2301;
            color: #fff;
        }
        .pf-maner { width: 40px; height: 4px; border-radius: 2px; background: #33333a; margin: 0 auto 12px; }
        .pf-x {
            position: absolute;
            top: 12px;
            right: 14px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #16161b;
            border: 1px solid #2a2a33;
            color: #c9c9d2;
            font-size: 15px;
            cursor: pointer;
        }
        .pf-cap { display: flex; align-items: center; gap: 12px; margin-right: 40px; }
        .pf-lacat {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #2a1606;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }
        .pf-cap h3 { margin: 0; font-size: 20px; }
        .pf-cap p { margin: 2px 0 0; font-size: 13px; color: #8b8b95; }
        .pf-lista { list-style: none; margin: 16px 0 14px; padding: 0; font-size: 15px; color: #d7d7de; line-height: 1.9; }
        .pf-lista li::before { content: '✓'; color: #00E676; font-weight: 900; margin-right: 10px; }
        /* Revolut și Wise sunt butoanele mari: între persoane nu au comision, deci
           din zece lei ajung zece lei. Cardul e mai mic, dedesubt. */
        .pf-rand { display: flex; gap: 10px; margin-top: 12px; }
        /* Revolut și Wise poartă culorile lor, ca să sară în ochi de la distanță:
           albastrul Revolut și verdele crud al Wise. Cardul rămâne potolit dedesubt —
           el costă comision, deci n-are rost să fie cel mai atrăgător. */
        .pf-rand a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            border-radius: 16px;
            padding: 15px 8px;
            text-decoration: none;
            border: none;
        }
        .pf-rand a b { font-size: 18px; font-weight: 900; }
        .pf-rand a small { font-size: 14px; font-weight: 900; line-height: 1.2; }
        .pf-rand a i { font-style: normal; font-size: 11px; font-weight: 700; }

        .pf-rand a:not(.pf-wise) {                    /* Revolut */
            background: linear-gradient(135deg, #1273FF, #0A4FD0);
            color: #fff;
            box-shadow: 0 4px 16px rgba(10, 79, 208, 0.45);
        }
        .pf-rand a:not(.pf-wise) i { color: #cfe2ff; }

        .pf-rand a.pf-wise {                          /* Wise */
            background: #9FE870;
            color: #163300;
            box-shadow: 0 4px 16px rgba(159, 232, 112, 0.35);
        }
        .pf-rand a.pf-wise b,
        .pf-rand a.pf-wise small { color: #163300; }
        .pf-rand a.pf-wise i { color: #2f5c14; }
        /* cardul: se vede, dar nu strigă — banca reține din el */
        .pf-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            margin-top: 10px;
            background: #16161c;
            border: 1px solid #33333a;
            color: #d6d6de;
            border-radius: 16px;
            padding: 13px;
            text-align: center;
            text-decoration: none;
        }
        .pf-card b { font-size: 15px; font-weight: 800; }
        .pf-card small { font-size: 11px; font-weight: 600; color: #8b8b95; }
        .pf-transparenta {
            display: block;
            width: 100%;
            margin-top: 10px;
            background: none;
            border: none;
            color: #8b8b95;
            font-size: 13px;
            font-weight: 700;
            text-decoration: underline;
            cursor: pointer;
            min-height: 44px;
        }
        .pf-nota { font-size: 12px; color: #8b8b95; text-align: center; margin: 12px 0 10px; }
        #premium-foaie-cod { border-top: 1px solid #1c1c22; padding-top: 12px; }
        #premium-foaie-cod #premium-code-input { font-size: 15px; }
        #premium-foaie-cod .btn-auth-trigger { padding: 12px 16px; border-radius: 10px; }

        /* cercul cu lacăt se poate apăsa (în aspectul clasic nu reacționa la atingere) */
        body.tema-noua:not(.e-premium) #map-speed-limit,
        body.tema-noua:not(.e-premium) #det-limita { pointer-events: auto; cursor: pointer; }
        /* bara de sus lasă atingerile să treacă la cercul din modul detector, de sub ea;
           ce e pe bară (viteza, semnul, alerta) rămâne apăsabil */
        body.tema-noua #top-left-panel { pointer-events: none; }

        /* ===== C · meniul pe rânduri ===== */
        body.tema-noua #settings-panel {
            background: #000;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: calc(14px + var(--safe-top)) 0 0 0;
        }
        body.tema-noua .settings-header { margin: 0 16px 6px; padding-bottom: 8px; border-bottom: none; }
        body.tema-noua .settings-header h2 { font-size: 0; }
        body.tema-noua .settings-header h2::after { content: 'Meniu'; font-size: 22px; font-weight: 800; }
        body.tema-noua .close-settings {
            font-size: 0;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            background: #101014;
            border: 1px solid #33333a;
            color: #fff;
        }
        body.tema-noua .close-settings::after { content: '✕'; font-size: 17px; }
        body.tema-noua .settings-scroll-area { gap: 0; padding: 0 16px 30px; }

        #nou-rand-premium { display: none; }
        body.tema-noua #nou-rand-premium {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            text-align: left;
            background: #1a0f05;
            border: 1px solid #7a3d10;
            border-radius: 16px;
            padding: 13px 14px;
            color: #fff;
            margin: 4px 0 6px;
            cursor: pointer;
            font: inherit;
        }
        body.tema-noua.e-premium #nou-rand-premium { background: #08160e; border-color: #1d5c35; }
        .nou-rp-ic { font-size: 22px; }
        .nou-rp-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
        .nou-rp-text b { font-size: 16px; }
        .nou-rp-text small { font-size: 12px; color: #8b8b95; }
        .nou-rp-sageata { font-size: 26px; color: #55555e; line-height: 1; }

        /* donațiile și câmpul de cod au acum ecranul lor (B) */
        body.tema-noua #card-donatii,
        body.tema-noua #premium-card { display: none !important; }
        body.tema-noua:not(.e-premium) .nou-grup-titlu.doar-premium-titlu { display: none; }

        /* fiecare setare e un rând: numele în stânga, valoarea în dreapta */
        body.tema-noua .setting-card {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 12px;
            background: transparent;
            border: none !important;
            border-bottom: 1px solid #1c1c22 !important;
            border-radius: 0;
            padding: 13px 2px;
        }
        body.tema-noua .setting-card label {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #fff !important;
            text-transform: none;
        }
        /* explicațiile lungi de sub setări încărcau meniul; rămân doar controalele */
        body.tema-noua .setting-card > div:not(.panel-slider-box):not(.social-links-row) { display: none; }
        body.tema-noua .setting-card .panel-slider-box { flex: 1 1 100%; }
        /* „Vehiculul meu" e tot un rand de setare: numele in stanga, vehiculul in dreapta */
        body.tema-noua #card-vehicul .btn-vehicul {
            width: auto;
            max-width: 62%;
            background: transparent;
            border: none;
            padding: 4px 0;
            gap: 6px;
        }
        body.tema-noua #card-vehicul .bv-ic { display: none; }
        body.tema-noua #card-vehicul .bv-text { text-align: right; }
        body.tema-noua #card-vehicul .bv-text b { font-size: 14px; font-weight: 600; color: #9a9aa2; }
        body.tema-noua #card-vehicul .bv-text small { display: none; }
        body.tema-noua .setting-select-premium {
            width: auto;
            max-width: 58%;
            background: transparent;
            border: none;
            color: #9a9aa2;
            padding: 4px 0;
            font-size: 14px;
            font-weight: 600;
            text-align: right;
            text-align-last: right;
        }
        body.tema-noua .setting-card .btn-toggle-switch {
            width: auto;
            padding: 8px 14px;
            border-radius: 18px;
            font-size: 13px;
            font-weight: 700;
            text-transform: none;
        }
        /* sunetul și vocea sunt pornit / oprit: comutator, nu buton cu text */
        body.tema-noua #btn-toggle-sunet-alerte,
        body.tema-noua #btn-toggle-voice {
            font-size: 0;
            width: 48px;
            height: 28px;
            padding: 0;
            border-radius: 14px;
            position: relative;
            background: #3a3a42;
            flex-shrink: 0;
        }
        body.tema-noua #btn-toggle-sunet-alerte.active-green,
        body.tema-noua #btn-toggle-voice.active-green { background: #00C853; }
        body.tema-noua #btn-toggle-sunet-alerte::after,
        body.tema-noua #btn-toggle-voice::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            transition: left 0.15s;
        }
        body.tema-noua #btn-toggle-sunet-alerte.active-green::after,
        body.tema-noua #btn-toggle-voice.active-green::after { left: 23px; }
        body.tema-noua .social-links-row { gap: 8px; }
        body.tema-noua .social-link-btn { padding: 7px 12px; font-size: 13px; }

        /* uneltele, la final, tot pe rânduri */
        #nou-meniu-rapid { display: none; }
        body.tema-noua #nou-meniu-rapid { display: flex; flex-direction: column; }
        body.tema-noua #nou-meniu-rapid .action-icon {
            width: 100%;
            height: auto;
            min-height: 50px;
            border: none;
            border-bottom: 1px solid #1c1c22;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            justify-content: flex-start;
            gap: 14px;
            padding: 0 2px;
            font-size: 18px;
            color: #fff;
        }
        body.tema-noua #nou-meniu-rapid .action-icon::after {
            content: attr(data-nume);
            font-size: 15px;
            font-weight: 600;
        }
        /* pe ecranul Premium, câmpul de cod și mesajul de sub el stau unul sub altul */
        #premium-foaie-cod #premium-activation-area { flex-direction: column; gap: 8px; }
        #premium-foaie-cod #premium-status { text-align: center; }

        /* ===== Banda eSIM: se vede, dar nu deranjează =====
           O dungă de lumină trece peste bandă o dată la 7 secunde, iar săgeata din
           „Vezi oferta" împinge ușor spre dreapta în același timp. Restul timpului
           banda stă liniștită. Se mișcă doar `transform`, pe care telefonul îl
           desenează din placa video, fără să redeseneze pagina — deci aproape fără
           consum de baterie. Cine a cerut în telefon „mai puțină mișcare" o vede fixă. */
        body.tema-noua .esim-bottom-right {
            position: relative;
            overflow: hidden;
            background: linear-gradient(90deg, #062b28 0%, #0b1413 70%);
            border-color: #00E5D0;
        }
        body.tema-noua .esim-bottom-right > span { position: relative; z-index: 1; }
        body.tema-noua .esim-bottom-right::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            background: linear-gradient(100deg, transparent 0%, rgba(160, 255, 245, 0.55) 50%, transparent 100%);
            transform: translateX(-120%);
            animation: esim-lumina 7s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes esim-lumina {
            0%   { transform: translateX(-120%); }
            22%  { transform: translateX(260%); }
            100% { transform: translateX(260%); }
        }
        body.tema-noua .esim-nou-chip b {
            display: inline-block;
            margin-left: 2px;
            animation: esim-sageata 7s ease-in-out infinite;
        }
        @keyframes esim-sageata {
            0%, 10%, 30%, 100% { transform: translateX(0); }
            16% { transform: translateX(4px); }
            22% { transform: translateX(0); }
            26% { transform: translateX(3px); }
        }
        body.tema-noua .esim-nou-text { color: #7ff5ea; }
        @media (prefers-reduced-motion: reduce) {
            body.tema-noua .esim-bottom-right::after,
            body.tema-noua .esim-nou-chip b { animation: none; }
        }
        /* un singur rând, pe orice lățime: pe telefoanele înguste textul se micșorează
           puțin, iar dacă tot nu încape, se termină în „…" — banda nu crește */
        body.tema-noua .esim-nou-text {
            min-width: 0;
            font-size: clamp(11px, 3.4vw, 13px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.tema-noua .esim-nou-chip { white-space: nowrap; }
        /* pe telefoanele înguste butonul scrie doar „Vezi ›", ca textul ofertei
           („+ Premium gratuit") să încapă întreg */
        @media (max-width: 380px) {
            body.tema-noua .esim-lat { display: none; }
        }

        /* ===== Ghidul „Ce face fiecare buton" — o listă pentru fiecare aspect =====
           Aspectul nou are alte butoane, în alte locuri, deci are ghidul lui, împărțit
           pe zonele ecranului (sus, stânga, dreapta, jos, stația, meniul). Pictogramele
           sunt aceleași ca pe butoane, ca șoferul să le recunoască dintr-o privire. */
        .help-nou { display: none; }
        body.tema-noua .help-clasic { display: none; }
        body.tema-noua .help-nou { display: flex; }
        body.tema-noua #help-buttons-modal .modal-box {
            background: #0b0b0e;
            border: 1px solid #26262e;
            border-radius: 22px;
        }
        .help-sectiune {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #8b8b95;
            margin: 10px 0 0;
        }
        .help-nou .help-sectiune:first-child { margin-top: 0; }
        .help-nou .help-item { font-size: 13.5px; line-height: 1.45; color: #b9b9c2; }
        .help-nou .help-item .help-icon {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            background: #101014;
            border: 1px solid #26262e;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }
        .help-nou .hi::before {
            content: '';
            width: 20px;
            height: 20px;
            background-color: var(--culoare-hi, #fff);
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
        }
        .help-viteza { font-size: 15px; color: #fff; }
        .help-limita {
            width: 24px; height: 24px; border-radius: 50%; border: 3px solid #E53935;
            background: #fff; color: #000; font-size: 9px; font-weight: 900;
            display: flex; align-items: center; justify-content: center; box-sizing: border-box;
        }
        .help-alerta { color: #E53935; font-weight: 900; }
        .help-sos { color: #E53935; font-size: 10px; font-weight: 900; }
        .help-cb { color: #00E676; font-size: 10px; font-weight: 800; }
        .help-raza { color: #00E5D0; font-size: 9px; font-weight: 800; }
        .help-ptt { color: #fff; font-size: 9px; font-weight: 800; background: #1d6b38; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
        .help-nou .hi-bec { --culoare-hi: #FFFFFF; }
        .help-nou .hi-bec::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1m8-9v1m8%208h1M5.6%205.6l.7.7m12.1-.7l-.7.7M9%2016a5%205%200%201%201%206%200a3.5%203.5%200%200%200-1%203a2%202%200%200%201-4%200a3.5%203.5%200%200%200-1-3M9.7%2017h4.6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1m8-9v1m8%208h1M5.6%205.6l.7.7m12.1-.7l-.7.7M9%2016a5%205%200%201%201%206%200a3.5%203.5%200%200%200-1%203a2%202%200%200%201-4%200a3.5%203.5%200%200%200-1-3M9.7%2017h4.6%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-ochi { --culoare-hi: #00E5D0; }
        .help-nou .hi-ochi::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012a2%202%200%201%200%204%200a2%202%200%200%200-4%200M21%2012c-2.4%204-5.4%206-9%206s-6.6-2-9-6c2.4-4%205.4-6%209-6s6.6%202%209%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012a2%202%200%201%200%204%200a2%202%200%200%200-4%200M21%2012c-2.4%204-5.4%206-9%206s-6.6-2-9-6c2.4-4%205.4-6%209-6s6.6%202%209%206%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-drum { --culoare-hi: #FFFFFF; }
        .help-nou .hi-drum::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019l4-14M16%205l4%2014M12%208V6M12%2013v-2M12%2018v-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019l4-14M16%205l4%2014M12%208V6M12%2013v-2M12%2018v-2%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-meniu { --culoare-hi: #FFFFFF; }
        .help-nou .hi-meniu::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-statie { --culoare-hi: #FF9100; }
        .help-nou .hi-statie::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203L4.6%206.7A1%201%200%200%200%204%207.7V19a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V8a1%201%200%200%200-1-1H4.5M4%2012h16M7%2012v-2M17%2016v.01M13%2016v.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203L4.6%206.7A1%201%200%200%200%204%207.7V19a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V8a1%201%200%200%200-1-1H4.5M4%2012h16M7%2012v-2M17%2016v.01M13%2016v.01%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-muzica { --culoare-hi: #FFFFFF; }
        .help-nou .hi-muzica::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M13%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M9%2017V4h10v13M9%208h10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M13%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200M9%2017V4h10v13M9%208h10%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-oameni { --culoare-hi: #AFA9EC; }
        .help-nou .hi-oameni::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207a4%204%200%201%200%208%200a4%204%200%200%200-8%200M3%2021v-2a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v2M16%203.1a4%204%200%200%201%200%207.8M21%2021v-2a4%204%200%200%200-3-3.9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207a4%204%200%201%200%208%200a4%204%200%200%200-8%200M3%2021v-2a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v2M16%203.1a4%204%200%200%201%200%207.8M21%2021v-2a4%204%200%200%200-3-3.9%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-mesaj { --culoare-hi: #FFFFFF; }
        .help-nou .hi-mesaj::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020l1.3-3.9C2%2012.7%202.9%208.2%206.4%205.7c3.5-2.5%208.6-2.3%2011.8.5c3.3%202.8%203.7%207.3%201%2010.5c-2.7%203.2-7.6%204.2-11.6%202.3L3%2020%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020l1.3-3.9C2%2012.7%202.9%208.2%206.4%205.7c3.5-2.5%208.6-2.3%2011.8.5c3.3%202.8%203.7%207.3%201%2010.5c-2.7%203.2-7.6%204.2-11.6%202.3L3%2020%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-masina { --culoare-hi: #FFD700; }
        .help-nou .hi-masina::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M15%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M5%2017H3v-6l2-5h9l4%205h1a2%202%200%200%201%202%202v4h-2m-4%200H9m-6-6h15m-6%200V6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M15%2017a2%202%200%201%200%204%200a2%202%200%200%200-4%200M5%2017H3v-6l2-5h9l4%205h1a2%202%200%200%201%202%202v4h-2m-4%200H9m-6-6h15m-6%200V6%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-parcare { --culoare-hi: #64B5F6; }
        .help-nou .hi-parcare::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2zM9%2016V8h4a2%202%200%200%201%200%204H9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2zM9%2016V8h4a2%202%200%200%201%200%204H9%22%2F%3E%3C%2Fsvg%3E"); }
        .help-nou .hi-schimb { --culoare-hi: #00E676; }
        .help-nou .hi-schimb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010h14l-4-4M17%2014H3l4%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010h14l-4-4M17%2014H3l4%204%22%2F%3E%3C%2Fsvg%3E"); }

        /* săgeata de pe butonul „Poliție": deschide elicopterul și drona */
        .report-mai-mult {
            position: absolute;
            top: 4px;
            right: 8px;
            font-size: 14px;
            line-height: 1;
            color: rgba(255, 255, 255, 0.75);
        }
        .report-btn { position: relative; }
        .sub-report-buttons .btn-groapa { background: #3a2f10; }
        .sub-report-buttons .btn-vehicul { background: #10243a; }
        .sub-report-buttons .btn-aglomeratie { background: #3a1010; }
        .sub-report-buttons .btn-elicopter { background: #123a2a; }
        .sub-report-buttons .btn-drona { background: #2a1240; }
        .sub-report-buttons .btn-politie-sub { background: #0D47A1; }
        #sub-control-modal {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2400;
            padding: 20px;
        }

        /* Sub „Pericol" sunt acum cinci variante: pe un singur rând ar ieși din ecran.
           Grilă de trei pe rând, cu butoane la fel de mari. */
        .sub-report-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        #sub-control-modal .sub-report-buttons { grid-template-columns: repeat(3, 1fr); }
        .sub-report-buttons button { width: auto; min-width: 0; }
        .sub-report-buttons .sub-label { font-size: 12px; line-height: 1.15; }

        /* fereastra „Poliție / Elicopter / Dronă" arată exact ca cea de la Pericol */
        #sub-control-modal .modal-box {
            background: var(--panel-bg);
            border: 2px solid var(--cb-blue);
            border-radius: 24px;
            padding: 30px 20px;
            max-width: 340px;
            width: 90%;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        #sub-control-modal .modal-box h3 { color: #FFF; font-size: 22px; font-weight: 900; }
        #sub-control-modal .sub-report-buttons button {
            border: none;
            border-radius: 16px;
            padding: 16px 8px;
            color: #FFF;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        #sub-control-modal .sub-icon { font-size: 30px; }
        #sub-control-modal .sub-label { font-size: 12px; font-weight: 800; text-transform: uppercase; }
        #sub-control-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 4px;
        }

        /* ===== NAVIGAȚIE ===== */
        #navi-panou {
            position: absolute;
            left: 10px;
            right: 10px;
            top: calc(70px + var(--safe-top));
            background: #0b0b0e;
            border: 1px solid #26262e;
            border-radius: 18px;
            padding: 12px;
            z-index: 2500;
            display: none;
            flex-direction: column;
            gap: 10px;
            max-height: 70vh;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            color: #fff;
            pointer-events: auto;
        }
        #navi-panou.deschis { display: flex; }
        .navi-cap { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 800; }
        .navi-x { background: none; border: none; color: #8b8b95; font-size: 16px; cursor: pointer; }
        .navi-profile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
        .navi-profil {
            background: #101014;
            border: 1px solid #26262e;
            border-radius: 12px;
            color: #c9c9d2;
            font-size: 10px;
            font-weight: 700;
            padding: 8px 2px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .navi-profil span { font-size: 18px; }
        .navi-profil.ales { border-color: #2979FF; color: #82B1FF; background: #0c1730; }
        /* se vede, dar nu se poate alege încă: apăsat, spune de ce */
        .navi-profil.in-lucru { opacity: 0.55; border-style: dashed; }
        .navi-profil.in-lucru i {
            display: block;
            font-style: normal;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #FF8F00;
            margin-top: 2px;
        }

        /* strada trece pe rândul al doilea, sub manevră: întâi vezi ce ai de făcut */
        .navi-strada {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: #9a9aa2;
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* confirmarea că traseul ține cont de vehiculul tău */
        .navi-verificat {
            margin-top: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            background: #0b2016;
            border: 1px solid #1d4a32;
            color: #7fd3a3;
            font-size: 12px;
            line-height: 1.45;
        }

        /* ===== VEHICULUL MEU: dimensiunile camionului pentru navigație ===== */
        /* Al cincilea profil stă pe tot rândul: are de arătat ce a scris șoferul. */
        /* randul sta peste toate cele patru coloane ale grilei de profile */
        .navi-meu-rand { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 6px; }
        .navi-profil-meu {
            flex: 1;
            display: grid;
            grid-template-columns: 22px 1fr;
            grid-template-rows: auto auto;
            gap: 1px 8px;
            text-align: left;
            align-items: center;
            padding: 8px 10px;
            min-width: 0;
        }
        .navi-profil-meu span { grid-row: 1 / 3; font-size: 18px; }
        .navi-profil-meu b { font-size: 13px; font-weight: 700; }
        .navi-profil-meu i {
            font-style: normal;
            font-size: 11px;
            color: #8b8b95;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .navi-profil-meu.gol i { color: #FF8F00; }
        /* la rândul lat, „în lucru" stă în dreapta numelui, nu sub el */
        .navi-profil-meu.in-lucru i { color: #8b8b95; }
        .navi-meu-creion {
            width: 42px;
            border-radius: 10px;
            background: #12121a;
            border: 1px solid #23232c;
            color: #c9c9d2;
            font-size: 15px;
            cursor: pointer;
            flex: none;
        }

        /* rândul din meniu */
        .btn-vehicul {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 12px 14px;
            border-radius: 12px;
            background: #12121a;
            border: 1px solid #23232c;
            color: #fff;
            text-align: left;
            cursor: pointer;
        }
        .btn-vehicul .bv-ic { font-size: 22px; flex: none; }
        .btn-vehicul .bv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .btn-vehicul .bv-text b {
            font-size: 14px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .btn-vehicul .bv-text small {
            font-size: 11px;
            color: #8b8b95;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .btn-vehicul .bv-sageata { color: #55555f; font-size: 20px; flex: none; }

        /* foaia cu dimensiunile */
        #vehicul-foaie-fundal, #vehicul-foaie { display: none; }
        #vehicul-foaie-fundal.deschis {
            display: block;
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2400;
        }
        #vehicul-foaie.deschis {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            overflow-y: auto;
            min-height: 0;   /* iPhone: altfel nu se derulează, ci se revarsă */
            background: #0d0d10;
            border-top: 1px solid #2979FF;
            border-radius: 22px 22px 0 0;
            padding: 12px 18px calc(18px + var(--safe-bottom)) 18px;
            z-index: 2401;
            color: #fff;
        }
        .vf-cap { display: flex; align-items: center; gap: 12px; margin-right: 40px; }
        .vf-ic {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: #0c1730;
            border: 1px solid #1d3a6e;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex: none;
        }
        .vf-cap h3 { margin: 0; font-size: 17px; }
        .vf-cap p { margin: 2px 0 0; font-size: 12px; color: #8b8b95; }
        .vf-campuri { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
        .vf-camp {
            display: grid;
            grid-template-columns: 1fr 96px 22px;
            align-items: center;
            gap: 8px;
        }
        .vf-camp > span { font-size: 14px; }
        .vf-camp input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            background: #16161b;
            border: 1px solid #2a2a33;
            color: #fff;
            font-size: 16px;      /* sub 16px, telefonul mărește singur pagina la scris */
            text-align: right;
        }
        .vf-camp input:focus { outline: none; border-color: #2979FF; }
        .vf-camp i { font-style: normal; font-size: 13px; color: #8b8b95; }
        .vf-adr {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
            font-size: 14px;
            cursor: pointer;
        }
        .vf-adr input { width: 20px; height: 20px; accent-color: #2979FF; }
        .vf-nota { font-size: 12px; color: #8b8b95; margin: 12px 0 0; line-height: 1.5; }
        .vf-salveaza {
            width: 100%;
            margin-top: 14px;
            padding: 15px;
            border: none;
            border-radius: 12px;
            background: #2979FF;
            color: #fff;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
        }

        #navi-cauta {
            background: #101014;
            border: 1px solid #26262e;
            border-radius: 12px;
            color: #fff;
            padding: 12px;
            font-size: 15px;
            width: 100%;
            box-sizing: border-box;
        }
        .navi-rezultate { display: flex; flex-direction: column; gap: 6px; }
        .navi-rezultat {
            background: #101014;
            border: 1px solid #26262e;
            border-radius: 10px;
            color: #fff;
            text-align: left;
            padding: 10px 12px;
            font-size: 13px;
            cursor: pointer;
        }
        .navi-gol { color: #8b8b95; font-size: 13px; padding: 4px 2px; }
        .navi-sumar:empty { display: none; }
        .navi-linie-mare { font-size: 20px; font-weight: 800; }
        .navi-linie-mica { font-size: 12px; color: #8b8b95; }
        .navi-atentie {
            margin-top: 8px;
            background: rgba(255, 145, 0, .12);
            border: 1px solid rgba(255, 145, 0, .45);
            border-radius: 10px;
            padding: 8px 10px;
            font-size: 12px;
            color: #FFB74D;
        }
        #navi-porneste {
            background: #2979FF;
            border: none;
            border-radius: 14px;
            color: #fff;
            font-size: 16px;
            font-weight: 800;
            padding: 14px;
            cursor: pointer;
        }
        /* banda de navigație, cât ești pe drum */
        #navi-bara {
            position: absolute;
            left: 10px;
            right: 10px;
            top: calc(62px + var(--safe-top));
            background: rgba(8, 12, 24, 0.95);
            border: 1px solid #2979FF;
            border-radius: 16px;
            padding: 10px 12px;
            z-index: 14;
            display: none;
            color: #fff;
            pointer-events: auto;
        }
        #navi-bara.deschis { display: block; }
        #navi-manevra { font-size: 15px; line-height: 1.3; }
        #navi-manevra b { font-size: 20px; color: #82B1FF; margin-right: 6px; }
        .navi-jos { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #8b8b95; }
        .navi-jos button {
            background: none;
            border: 1px solid #5a1c1c;
            color: #FF5252;
            border-radius: 10px;
            padding: 6px 12px;
            font-size: 12px;
            cursor: pointer;
        }
        body.tema-noua #navi-bara { top: calc(112px + var(--safe-top)); }

        /* propunerea de ocolire, cât ești pe drum */
        #navi-ocolire {
            position: absolute;
            left: 10px;
            right: 10px;
            top: calc(150px + var(--safe-top));
            background: rgba(26, 15, 5, 0.97);
            border: 1px solid #FF9100;
            border-radius: 16px;
            padding: 12px;
            z-index: 16;
            display: none;
            color: #fff;
            pointer-events: auto;
        }
        #navi-ocolire.deschis { display: block; }
        #navi-ocolire-text { font-size: 14px; line-height: 1.4; }
        #navi-ocolire-butoane { display: flex; gap: 8px; margin-top: 10px; }
        #navi-ocolire-butoane button {
            flex: 1;
            background: none;
            border: 1px solid #33333a;
            color: #c9c9d2;
            border-radius: 10px;
            padding: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        #navi-ocolire-butoane .ocolire-da { background: #FF9100; border-color: #FF9100; color: #1f0d00; }

        #navi-simuleaza {
            background: none;
            border: 1px dashed #55555e;
            border-radius: 12px;
            color: #c9c9d2;
            font-size: 13px;
            padding: 10px;
            cursor: pointer;
        }

        /* semnul „fără internet", cât ești pe drum */
        #navi-offline {
            position: absolute;
            left: 10px;
            right: 10px;
            top: calc(150px + var(--safe-top));
            background: rgba(40, 30, 5, 0.95);
            border: 1px solid #FFB300;
            border-radius: 12px;
            padding: 8px 12px;
            font-size: 12px;
            color: #FFD54F;
            z-index: 15;
            display: none;
            pointer-events: none;
        }
        #navi-offline.deschis { display: block; }
        body.tema-noua #navi-offline { top: calc(200px + var(--safe-top)); }

        /* ======================================================================
           iPHONE — reparații de robustețe (29.09.2026)

           Clienții au raportat două lucruri: în meniu se suprapuneau cardurile,
           iar din panou nu se mai putea ieși cu X decât închizând browserul.
           Cauzele erau trei, toate de aici:
             • listele care trebuiau să se deruleze se revărsau în schimb
               (reparat mai sus, cu „min-height: 0");
             • antetul cu X putea fi împins afară de conținutul revărsat;
             • antetul stătea sub decupajul ecranului, unde atingerea nu ajunge.
           ====================================================================== */

        /* Antetul cu butonul de închidere nu se mai micșorează și nu mai poate fi
           împins de conținutul de sub el, oricât ar fi de lung. */
        .settings-header,
        .popup-header,
        .navi-cap,
        .vf-cap,
        .pf-cap {
            flex: 0 0 auto;
        }

        /* Panourile care acoperă tot ecranul respectă zonele telefonului: decupajul
           de sus, bara de gesturi de jos, colțurile rotunjite în orizontal.
           `max` păstrează distanța de dinainte pe telefoanele fără decupaj. */
        #settings-panel,
        #utilities-panel,
        #radio-panel {
            padding-top: max(40px, calc(var(--safe-top) + 14px));
            padding-right: max(20px, var(--safe-right));
            padding-bottom: max(20px, calc(var(--safe-bottom) + 10px));
            padding-left: max(20px, var(--safe-left));
        }
        /* aspectul nou își ține distanțele lui, dar tot cu marginile respectate */
        body.tema-noua #settings-panel {
            padding-top: calc(14px + var(--safe-top));
            padding-right: var(--safe-right);
            padding-bottom: 0;
            padding-left: var(--safe-left);
        }
        body.tema-noua .settings-scroll-area {
            padding-bottom: calc(30px + var(--safe-bottom));
        }

        /* Butoanele de închidere: cel puțin 44x44, minimul cu care se poate nimeri
           cu degetul. Unele erau la 34, iar unul n-avea mărime deloc. */
        .close-settings,
        .popup-close,
        .pf-x,
        .vf-x,
        .navi-x,
        .close-chat,
        .modal-close {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Cât timp e deschis un panou, bannerul de instalare nu mai stă peste el.
           Acoperea antetul, deci și butonul de închidere: omul apăsa pe X și nimerea
           în „Descarcă". Pe iPhone se vedea cel mai des, fiindcă acolo bannerul e
           singurul fel de a instala aplicația și rămâne pe ecran. */
        body.panou-deschis .banner-instalare { display: none !important; }

        /* Panoul deschis peste tot ecranul nu lasă atingerile să ajungă la hartă,
           chiar dacă undeva rămâne o margine transparentă. */
        #settings-panel.open,
        #utilities-panel.open,
        #radio-panel.open {
            touch-action: manipulation;
        }

        /* ===== UNDE SE DUC BANII ===== */
        #transparenta-fundal, #transparenta-foaie { display: none; }
        #transparenta-fundal.deschis {
            display: block;
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;   /* iPhone mai vechi */
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2400;
        }
        #transparenta-foaie.deschis {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            overflow-y: auto;
            min-height: 0;
            background: #0d0d10;
            border-top: 1px solid #FF6B00;
            border-radius: 22px 22px 0 0;
            padding: 12px max(18px, var(--safe-left)) calc(18px + var(--safe-bottom)) max(18px, var(--safe-right));
            z-index: 2401;
            color: #fff;
        }
        .tr-cifre { display: flex; gap: 10px; margin-top: 14px; }
        .tr-cifre div {
            flex: 1;
            background: #101018;
            border: 1px solid #23232c;
            border-radius: 14px;
            padding: 14px 10px;
            text-align: center;
        }
        .tr-cifre b { display: block; font-size: 22px; font-weight: 900; }
        .tr-cifre span { font-size: 12px; color: #8b8b95; }
        .tr-cifre .tr-intrat b { color: #7fd3a3; }
        .tr-cifre .tr-iesit b { color: #FF9100; }
        .tr-detalii { margin-top: 14px; }
        .tr-detalii div {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 2px;
            border-bottom: 1px solid #1c1c22;
            font-size: 14px;
        }
        .tr-detalii div span:last-child { color: #8b8b95; white-space: nowrap; }

        /* ===== CERCUL DE DEBLOCAT PREMIUM (bara de sus) =====
           Fără Premium arăta ca un semn de circulație alb cu chenar roșu: omul nu
           avea de unde ghici că e un buton. Acum e auriu, cu lacătul deschis, și
           pulsează încet — cât să-l prinzi cu coada ochiului, nu cât să te enerveze
           la volan. */
        .speed-limit-sign.fara-premium {
            background: linear-gradient(135deg, #FFD24A, #FF9500);
            /* chenarul gros îl făcea să pară semn de circulație și, la 44 px, mânca
               tot locul: cuvântul ajungea lipit de margine. Subțire, arată a buton. */
            border: 3px solid #FFB300;
            color: #3A2500;
            box-shadow: 0 4px 16px rgba(255, 170, 0, 0.45);
        }
        /* în aspectul clasic cercul e deja `absolute`, deci inelul are de ce se agăța;
           în cel nou stă în bara de sus, `static`, și are nevoie de un reper.
           ATENȚIE: nu se pune `position: relative` pe amândouă — în clasic ar scoate
           cercul din colțul lui și l-ar arunca în stânga paginii. */
        body.tema-noua #map-speed-limit.fara-premium { position: relative; }
        .speed-limit-sign.fara-premium .score-sub {
            color: #3A2500;
            font-weight: 900;
            font-size: 8px;
            letter-spacing: -0.4px;
            white-space: nowrap;
            max-width: none;
            overflow: visible;
            text-overflow: clip;
        }
        body.tema-noua #map-speed-limit.fara-premium .score-sub { font-size: 6px; }
        .speed-limit-sign.fara-premium::after {
            content: '';
            position: absolute;
            top: -6px; right: -6px; bottom: -6px; left: -6px;   /* iPhone mai vechi */
            inset: -6px;
            border-radius: 50%;
            border: 2px solid rgba(255, 179, 0, 0.75);
            animation: puls-deblocare 2.6s ease-out infinite;
            pointer-events: none;
        }
        @keyframes puls-deblocare {
            0%   { transform: scale(0.94); opacity: 0.85; }
            70%  { transform: scale(1.18); opacity: 0; }
            100% { transform: scale(1.18); opacity: 0; }
        }
        /* cine a cerut mai puțină mișcare pe ecran nu primește pulsul */
        @media (prefers-reduced-motion: reduce) {
            .speed-limit-sign.fara-premium::after { animation: none; opacity: 0.5; }
        }