/* MOBILNA RESPONSYWNOŚĆ DLA MAPY */
        #map { height: 320px; border-radius: 1.5rem; z-index: 1; }
        @media (min-width: 1024px) {
            #map { height: 530px; border-radius: 2rem; }
        }

        /* POPRAWIONE MARKERY: IDEALNE KÓŁKA */
        .temp-badge { 
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-weight: 800; 
            font-size: 11px; 
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            cursor: pointer; 
            transition: all 0.2s; 
            white-space: nowrap; 
        }
        .active-city { border-color: #ef4444 !important; transform: scale(1.15); z-index: 1000; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); }
        
        .rain-bar { height: 100%; flex: 1; border-radius: 2px; transition: transform 0.2s; cursor: help; }
        .rain-bar:hover { transform: scaleY(1.2); filter: brightness(1.2); }
        .table-container { max-height: 450px; overflow-y: auto; }

        /* NOWY DYNAMICZNY PANEL GŁÓWNY */
        .vibe-header { 
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
            transition: background 0.5s ease;
        }
        .dark .vibe-header {
            border: 1px solid rgba(255,255,255,0.05);
        }

        /* INTEGRACJA KAFELKÓW WEWNĄTRZ PANELU */
        .insight-card { 
            transition: all 0.3s ease; 
            background: rgba(255, 255, 255, 0.4); 
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.5);
        }
        .dark .insight-card { 
            background: rgba(15, 23, 42, 0.4); 
            border: 1px solid rgba(255,255,255,0.05);
        }
        .insight-card:hover { 
            transform: translateY(-2px); 
            background: rgba(255, 255, 255, 0.6);
        }
        .dark .insight-card:hover {
            background: rgba(15, 23, 42, 0.6);
        }

        .icon-box {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background: rgba(0,0,0,0.04);
        }
        .dark .icon-box {
            background: rgba(255,255,255,0.05);
        }

        /* RESPONSYWNY KONTENER WYKRESU */
        .chart-container {
            position: relative;
            height: 280px; 
            width: 100%;
        }
        @media (min-width: 768px) {
            .chart-container { height: 400px; }
        }
		
        /* MOBILNA RESPONSYWNOŚĆ DLA MAPY */
        #map { height: 320px; border-radius: 1.5rem; z-index: 1; }
        @media (min-width: 1024px) {
            #map { height: 530px; border-radius: 2rem; }
        }

        /* POPRAWIONE MARKERY: IDEALNE KÓŁKA */
        .temp-badge { 
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-weight: 800; 
            font-size: 11px; 
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            cursor: pointer; 
            transition: all 0.2s; 
            white-space: nowrap; 
        }
        .active-city { border-color: #ef4444 !important; transform: scale(1.15); z-index: 1000; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); }
        
        .rain-bar { height: 100%; flex: 1; border-radius: 2px; transition: transform 0.2s; cursor: help; }
        .rain-bar:hover { transform: scaleY(1.2); filter: brightness(1.2); }
        .table-container { max-height: 450px; overflow-y: auto; }

        /* NOWY DYNAMICZNY PANEL GŁÓWNY */
        .vibe-header { 
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
            transition: background 0.5s ease;
        }
        .dark .vibe-header {
            border: 1px solid rgba(255,255,255,0.05);
        }

        /* INTEGRACJA KAFELKÓW WEWNĄTRZ PANELU */
        .insight-card { 
            transition: all 0.3s ease; 
            background: rgba(255, 255, 255, 0.4); 
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.5);
        }
        .dark .insight-card { 
            background: rgba(15, 23, 42, 0.4); 
            border: 1px solid rgba(255,255,255,0.05);
        }
        .insight-card:hover { 
            transform: translateY(-2px); 
            background: rgba(255, 255, 255, 0.6);
        }
        .dark .insight-card:hover {
            background: rgba(15, 23, 42, 0.6);
        }

        .icon-box {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background: rgba(0,0,0,0.04);
        }
        .dark .icon-box {
            background: rgba(255,255,255,0.05);
        }

        /* RESPONSYWNY KONTENER WYKRESU */
        .chart-container {
            position: relative;
            height: 280px; 
            width: 100%;
        }
        @media (min-width: 768px) {
            .chart-container { height: 400px; }
        }