/* ============================================
   CSS VARIABLES - GLASSMORPHISM ANTRACIT
   ============================================ */
:root {
    --bg-base: #1A1A2E;
    --bg-darker: #12121F;
    --bg-lighter: #252540;
    --bg-gradient: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #1A1A2E 100%);
    
    --glass-bg: rgba(255, 255, 255, 0.01);
    --glass-bg-hover: rgba(255, 255, 255, 0.025);
    --glass-bg-active: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.035);
    --glass-border-hover: rgba(255, 255, 255, 0.07);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-blur: blur(4px) saturate(1.1);
    --tile-thickness: 4px;
    
    --accent-primary: #60A5FA;
    --accent-primary-light: #93C5FD;
    --accent-secondary: #34D399;
    --accent-tertiary: #A78BFA;
    --accent-warning: #FBBF24;
    --accent-error: #F87171;
    
    --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    --gradient-secondary: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    --gradient-tertiary: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    --gradient-warm: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    
    --text-primary: #F8FAFC;
    --text-secondary: rgba(248, 250, 252, 0.7);
    --text-muted: rgba(248, 250, 252, 0.5);
    
    --success: #34D399;
    --success-bg: rgba(52, 211, 153, 0.15);
    --warning: #FBBF24;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --error: #F87171;
    --error-bg: rgba(248, 113, 113, 0.15);
    --info: #60A5FA;
    --info-bg: rgba(96, 165, 250, 0.15);
    
    --chart-1: #60A5FA;
    --chart-2: #34D399;
    --chart-3: #FBBF24;
    --chart-4: #F87171;
    --chart-5: #A78BFA;
    
    --font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --tile-gap: 16px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    
    --sidebar-width: 260px;
    --header-height: 93px;

    /* Z-index skála */
    --z-base: 1;
    --z-above: 10;
    --z-header: 50;
    --z-sidebar: 100;
    --z-dropdown: 200;
    --z-sticky: 1000;
    --z-popup: 1001;
    --z-notification: 1002;
    --z-modal: 10000;
    --z-modal-above: 10001;
    --z-system-banner: 20000;
    --z-cookie-banner: 20001;
    --z-gdpr: 30000;
    --z-splash: 50000;

    /* Gyakran használt színek */
    --color-green: #22c55e;
    --color-red: #ef4444;
    --color-blue: #3b82f6;
    --color-violet: #a78bfa;
    --color-violet-dark: #8b5cf6;
    --color-amber: #f59e0b;
    --color-emerald: #10b981;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    background: var(--bg-gradient);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* Közös üvegcsempe stílusok – 3D vastagság + fénytörés */
.glass-tile-effect {
    backdrop-filter: blur(4px) saturate(1.1);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
}

/* SVG Icons base */
.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 28px; height: 28px; }

/* ============================================
   LAYOUT
   ============================================ */
.app {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.008);
    backdrop-filter: blur(4px) saturate(1.1);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

/* Sidebar: prizmás jobb szélcsík */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 2px; height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(96,165,250,0.08) 15%, rgba(167,139,250,0.10) 35%, rgba(255,255,255,0.08) 50%, rgba(52,211,153,0.08) 65%, rgba(96,165,250,0.06) 85%, transparent 100%);
    pointer-events: none;
    z-index: 200;
}

/* Sidebar: felületi fény overlay */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 30%, transparent 60%, rgba(255,255,255,0.01) 100%);
    pointer-events: none;
    z-index: 1;
}


/* Connection Lines SVG Pattern - Halvány kék kapcsolati vonalak - TELJES OLDAL HÁTTÉR */
.connection-lines-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.connection-lines-bg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.15;
}

.connection-lines-bg .line {
    stroke: #7DD3FC;
    stroke-width: 0.6;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.4));
}

.connection-lines-bg .line-thin {
    stroke: #60A5FA;
    stroke-width: 0.3;
    fill: none;
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.3));
}

.connection-lines-bg .node {
    fill: #93C5FD;
    filter: drop-shadow(0 0 4px rgba(147, 197, 253, 0.5));
}

.connection-lines-bg .node-sm {
    fill: #7DD3FC;
    filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.4));
}


.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: var(--radius-full);
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--glass-border-hover);
}

.sidebar-branding {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--glass-border);
    height: 56px;
    min-height: 56px;
}

.sidebar-branding img {
    max-width: 90%;
    height: auto;
    max-height: 36px;
    object-fit: contain;
}

/* Sidebar Header */
.sidebar-header {
    flex-shrink: 0;
    height: var(--header-height);
    padding: 0 var(--space-5);
    background: rgba(255, 255, 255, 0.008);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.sidebar-header-icon {
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-header-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.sidebar-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sidebar-header-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    z-index: 1;
}

.sidebar-logo-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
}

.sidebar-logo-icon svg {
    width: 26px;
    height: 26px;
    color: white;
}

.sidebar-logo-text {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.sidebar-logo-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.sidebar-section {
    margin-bottom: var(--space-6);
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-left: var(--space-3);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    position: relative;
}

.sidebar-unread-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.sidebar-nav-item:has(.nav-label-multiline) {
    align-items: flex-start;
}

.sidebar-nav-item:has(.nav-label-multiline) svg {
    margin-top: 2px;
}

.sidebar-nav-item svg {
    color: currentColor;
    opacity: 0.7;
}

.sidebar-nav-item:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.sidebar-nav-item:hover svg {
    opacity: 1;
}

.sidebar-nav-item.active {
    background: var(--glass-bg-active);
    color: var(--accent-primary);
    border-color: rgba(96, 165, 250, 0.15);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.08);
}

.sidebar-nav-item.active svg {
    opacity: 1;
}

.sidebar-nav-badge {
    margin-left: auto;
    background: var(--error);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
}

.nav-label-multiline {
    line-height: 1.3;
}

.nav-label-multiline small {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.sidebar-nav-item:hover .nav-label-multiline small,
.sidebar-nav-item.active .nav-label-multiline small {
    color: var(--text-secondary);
}

.sidebar-footer {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--glass-border);
}

/* Presence indikátor */
.presence-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.presence-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    animation: presencePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes presencePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.presence-text {
    white-space: nowrap;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-user:hover {
    background: var(--glass-bg-hover);
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sidebar-user-avatar svg {
    width: 22px;
    height: 22px;
    color: white;
}

.sidebar-user-info { flex: 1; }

.sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main {
    flex: 1;
    margin-left: var(--sidebar-width);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    overflow: hidden;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    height: var(--header-height);
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

.header-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* Pillér színek a header ikonhoz */
.header-icon.icon-overview {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}
.header-icon.icon-economy {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.header-icon.icon-people {
    background: linear-gradient(135deg, var(--color-red) 0%, #dc2626 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}
.header-icon.icon-governance, .header-icon.icon-city {
    background: linear-gradient(135deg, var(--color-blue) 0%, #2563eb 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.header-icon.icon-mobility {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}
.header-icon.icon-environment {
    background: linear-gradient(135deg, var(--color-green) 0%, #16a34a 100%);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.header-icon.icon-living {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}
.header-icon.icon-map {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}
.header-icon.icon-services {
    background: linear-gradient(135deg, var(--color-violet-dark) 0%, #7c3aed 100%);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.header-icon.icon-notifications {
    background: linear-gradient(135deg, var(--color-amber) 0%, #d97706 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
.header-icon.icon-culture {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}
.header-icon.icon-healthcare {
    background: linear-gradient(135deg, var(--color-red) 0%, #dc2626 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}
.header-icon.icon-datastore {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.header-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.header-title {
    font-size: 20px;
    font-weight: 700;
}

.header-title span {
    color: var(--accent-primary);
}

.header-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

/* ─── ASSZISZTENS FEJLÉC GOMB ───────────────── */
.assistant-header-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 16px 2px 2px; border-radius: 28px; margin-right: 8px;
    background: none; border: none;
    cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.assistant-header-btn:hover { background: rgba(96,165,250,0.12); }
.assistant-header-btn:focus { outline: none; }
.assistant-header-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.assistant-header-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(96,165,250,0.18); overflow: hidden; flex-shrink: 0; }
.assistant-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.assistant-header-avatar svg { width: 22px; height: 22px; color: #60a5fa; }
.assistant-header-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; flex-shrink: 0; }
.assistant-header-name { font-size: 14px; font-weight: 700; color: #e2e8f0; white-space: nowrap; }
.assistant-header-label { font-size: 11px; font-weight: 500; color: #93c5fd; white-space: nowrap; }

/* ─── ASSZISZTENS CHAT PANEL ─────────────────── */
.assistant-panel {
    position: fixed; top: 64px; right: 16px; width: 380px; max-height: calc(100vh - 80px);
    background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6); z-index: 9999;
    display: flex; flex-direction: column; overflow: hidden;
}
.assistant-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.assistant-panel-identity { display: flex; align-items: center; gap: 10px; }
.assistant-panel-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(96,165,250,0.18);
}
.assistant-panel-avatar svg { width: 20px; height: 20px; color: #60a5fa; }
.assistant-panel-name { font-size: 15px; font-weight: 600; color: #e2e8f0; }
.assistant-panel-actions { display: flex; gap: 4px; }
.assistant-panel-btn { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 6px; }
.assistant-panel-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }

.assistant-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
    min-height: 200px; max-height: 400px;
}
.assistant-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.assistant-msg-bot { background: rgba(96,165,250,0.12); color: #e2e8f0; align-self: flex-start; border-bottom-left-radius: 4px; }
.assistant-msg-user { background: rgba(255,255,255,0.08); color: #e2e8f0; align-self: flex-end; border-bottom-right-radius: 4px; }
.assistant-msg-thinking { color: #94a3b8; font-style: italic; }

.assistant-input-area {
    display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08);
}
.assistant-input {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px; color: #e2e8f0; font-size: 14px; outline: none;
}
.assistant-input:focus { border-color: rgba(96,165,250,0.5); }
.assistant-input::placeholder { color: #64748b; }
.assistant-quick-topics { display: flex; gap: 8px; padding: 8px 12px 0; flex-shrink: 0; }
.assistant-topic-btn {
    flex: 1; padding: 10px 8px; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2);
    color: #93c5fd; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600;
    transition: background 0.2s;
}
.assistant-topic-btn:hover { background: rgba(96,165,250,0.18); }
.assistant-send-btn {
    background: rgba(96,165,250,0.2); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa;
    border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center;
}
.assistant-send-btn:hover { background: rgba(96,165,250,0.3); }
.assistant-topic-back { text-align: center; margin-top: 8px; }
.assistant-topic-back-btn {
    background: none; border: 1px solid rgba(96,165,250,0.25); color: #93c5fd;
    padding: 6px 16px; border-radius: 8px; cursor: pointer; font-size: 12px;
}
.assistant-topic-back-btn:hover { background: rgba(96,165,250,0.12); }

/* Asszisztens választó */
.assistant-chooser {
    position: absolute; inset: 0; background: #0f172a; z-index: 1;
    display: flex; flex-direction: column; align-items: center; padding: 16px; gap: 12px;
    overflow-y: auto;
}
.assistant-chooser h3 { color: #e2e8f0; font-size: 16px; font-weight: 600; margin: 0; }
.assistant-chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.assistant-chooser-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.assistant-chooser-card:hover { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3); }
.assistant-chooser-card .assistant-name { display: block; width: 100%; font-size: 14px; font-weight: 600; color: #e2e8f0; }
.assistant-chooser-card .assistant-desc { display: block; width: 100%; font-size: 11px; font-weight: 400; color: #94a3b8; line-height: 1.3; }
.assistant-chooser-x {
    position: absolute; top: 8px; right: 8px; background: none; border: none;
    color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; padding: 4px 8px; z-index: 2;
}
.assistant-chooser-x:hover { color: #e2e8f0; }

@media (max-width: 768px) {
    .assistant-panel { right: 8px; left: 8px; width: auto; }
    .assistant-header-text { display: none; }
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--success-bg);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
}

/* Élő adat badge — card variant eltávolítva (nem volt HTML/JS használat, duplikálta a crosswalk pill badge-et) */

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-scale 2s infinite;
    box-shadow: 0 0 10px var(--success);
}

@keyframes pulse-scale {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    width: 180px;
    margin-left: 8px;
    transition: all var(--transition-fast);
}

.search-box:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
}

.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.header-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.header-btn svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.header-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

.header-btn:hover svg {
    color: var(--text-primary);
}

.header-btn .badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: var(--error);
    border-radius: 50%;
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 8px var(--error);
}
.header-btn.has-notif svg {
    color: var(--color-red);
    filter: drop-shadow(0 0 4px rgba(239,68,68,0.5));
}

/* ============================================
   ÉRTESÍTÉSI PANEL
   ============================================ */
.notif-panel {
    position: fixed;
    top: 60px;
    right: 80px;
    width: 380px;
    max-height: 480px;
    background: var(--bg-darker);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 1002;
    display: none;
    flex-direction: column;
}
.notif-panel.active {
    display: flex;
}
.notif-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.notif-panel-clear {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.notif-panel-clear:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}
.notif-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.notif-empty {
    text-align: center;
    padding: 32px 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background var(--transition-fast);
}
.notif-item:hover {
    background: var(--glass-bg);
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.notif-item-dot.info { background: var(--accent-primary); }
.notif-item-dot.warning { background: var(--color-amber); }
.notif-item-dot.critical { background: var(--color-red); }
.notif-item-content {
    flex: 1;
    min-width: 0;
}
.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-detail {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Értesítések checkbox lista a settings panelen */
.notif-source-group {
    margin-bottom: 2px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.notif-source-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    user-select: none;
    transition: background var(--transition-fast);
}
.notif-source-group-title:hover {
    background: var(--glass-bg-hover);
}
.notif-source-group-title .notif-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
    color: var(--text-muted);
    flex-shrink: 0;
}
.notif-source-group.open .notif-chevron {
    transform: rotate(180deg);
}
.notif-source-group-title .notif-group-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}
.notif-source-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.notif-source-group.open .notif-source-group-body {
    max-height: 400px;
}
.notif-source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 16px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.notif-source-item:hover {
    background: var(--glass-bg);
}
.notif-source-item input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ============================================
   SETTINGS PANEL
   ============================================ */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.settings-overlay.active {
    opacity: 1;
    visibility: visible;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--bg-darker);
    border-left: 1px solid var(--glass-border);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-base);
}

.settings-panel.active {
    right: 0;
}

.settings-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.settings-title svg {
    width: 22px;
    height: 22px;
    color: var(--accent-primary);
}

.settings-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.settings-close:hover {
    background: var(--glass-bg-hover);
}

.settings-close svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.settings-section {
    margin-bottom: var(--space-6);
}

.settings-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--glass-border);
}

.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.settings-option:last-child {
    border-bottom: none;
}

.settings-option-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.settings-option-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-option-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.settings-option-icon.green { background: linear-gradient(135deg, var(--color-green) 0%, #16a34a 100%); }
.settings-option-icon.blue { background: linear-gradient(135deg, var(--color-blue) 0%, #2563eb 100%); }
.settings-option-icon.yellow { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.settings-option-icon.purple { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); }
.settings-option-icon.red { background: linear-gradient(135deg, var(--color-red) 0%, #dc2626 100%); }
.settings-option-icon.pink { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.settings-option-icon.cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.settings-option-icon.orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }

.settings-option-text {
    display: flex;
    flex-direction: column;
}

.settings-option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-option-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background: white;
}

/* ---- Language Selector ---- */
.lang-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    font-family: var(--font-family);
}
.lang-option:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.lang-option.active {
    background: rgba(99,102,241,0.15);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}
.lang-flag {
    font-size: 20px;
    line-height: 1;
}
.lang-name {
    font-weight: 500;
}

.settings-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: var(--space-3);
}

.settings-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.settings-btn.primary {
    background: var(--accent-primary);
    color: white;
}

.settings-btn.primary:hover {
    background: var(--accent-secondary);
}

.settings-btn.secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.settings-btn.secondary:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

/* Mozaik elrejtés */
.mosaic-hidden {
    display: none !important;
}

/* ============================================
   PAGE SYSTEM
   ============================================ */
.page {
    display: none;
}

.page.active {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap);
    flex: 1;
    min-height: 0;
}

/* Page Header */

/* Mosaic Grid */
/* Mosaic Grid */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tile-gap);
}

.mosaic-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Mosaic Card */
.mosaic-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.09);
    border-left-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.10),
        0 6px 16px rgba(0, 0, 0, 0.18),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.55),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.03),
        0 calc(var(--tile-thickness) + 6px) 20px rgba(0, 0, 0, 0.28);
}

.mosaic-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.25) 10%, rgba(139,92,246,0.20) 25%, rgba(255,255,255,0.40) 50%, rgba(52,211,153,0.20) 75%, rgba(96,165,250,0.25) 90%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

.mosaic-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 25%, transparent 50%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

.mosaic-card:hover {
    border-color: var(--glass-border-hover);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.09),
        0 2px 6px rgba(0, 0, 0, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.25),
        0 calc(var(--tile-thickness) + 2px) 0 0 rgba(10, 10, 25, 0.45),
        0 calc(var(--tile-thickness) + 10px) 32px rgba(0, 0, 0, 0.32);
}

.mosaic-card.span-2 {
    grid-column: span 2;
}

.mosaic-card.span-3 {
    grid-column: span 3;
}

.mosaic-card.span-4 {
    grid-column: span 4;
}

.mosaic-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.mosaic-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mosaic-card-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.mosaic-card-badge.live {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.mosaic-card-badge.monthly {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.mosaic-card-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: var(--space-2);
}

.mosaic-card-value.small {
    font-size: 28px;
}

.mosaic-card-unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: var(--space-1);
}

.mosaic-card-trend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
}

.mosaic-card-trend.up {
    color: var(--success);
}

.mosaic-card-trend.down {
    color: var(--error);
}

.mosaic-card-trend.neutral {
    color: var(--text-muted);
}

.mosaic-card-trend svg {
    width: 14px;
    height: 14px;
}

/* Mini Chart in Mosaic */
.mosaic-mini-chart {
    height: 60px;
    margin-top: var(--space-4);
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.mosaic-mini-chart .bar {
    flex: 1;
    background: linear-gradient(to top, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.6));
    border-radius: 2px 2px 0 0;
    transition: all var(--transition-fast);
}

.mosaic-mini-chart .bar:hover {
    background: linear-gradient(to top, rgba(168, 85, 247, 0.5), rgba(168, 85, 247, 0.9));
}

/* List in Mosaic */
.mosaic-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mosaic-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mosaic-list-item:last-child {
    border-bottom: none;
}

.mosaic-list-rank {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: var(--space-3);
}

.mosaic-list-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.mosaic-list-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Donut Chart */
.mosaic-donut {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.mosaic-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    justify-content: center;
}

.mosaic-donut-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-secondary);
}

.mosaic-donut-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Gauge */
.mosaic-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mosaic-gauge-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
}

.mosaic-gauge-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.mosaic-gauge-bar {
    width: 100%;
    height: 8px;
    background: var(--glass-bg);
    border-radius: var(--radius-full);
    margin-top: var(--space-4);
    overflow: hidden;
}

.mosaic-gauge-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.mosaic-gauge-fill.purple { background: linear-gradient(90deg, #a855f7, #9333ea); }
.mosaic-gauge-fill.green { background: linear-gradient(90deg, var(--color-green), #16a34a); }
.mosaic-gauge-fill.blue { background: linear-gradient(90deg, var(--color-blue), #2563eb); }
.mosaic-gauge-fill.yellow { background: linear-gradient(90deg, #eab308, #ca8a04); }

/* ============================================
   PIN ICON (Kitűzés)
   ============================================ */
.pin-icon {
    position: absolute;
    bottom: 8px;
    left: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

.pin-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.4;
    transition: all var(--transition-fast);
}

.pin-icon:hover svg {
    color: var(--accent-primary);
    opacity: 1;
}

/* Aktív (kitűzött) állapot */
.pin-icon.pinned svg {
    color: var(--accent-primary);
    opacity: 0.8;
}

.pin-icon.pinned:hover svg {
    color: var(--error);
}

/* Tooltip */
.pin-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bg-darker);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    margin-bottom: 4px;
    z-index: 100;
}

.pin-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Kártyák position relative kell a pin-hez */
.kpi-card,
.radar-card,
.quick-links-card,
.map-card,
.stats-card,
.chart-card,
.mobility-map-tile,
.travel-time-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid var(--glass-border);
}

.header-nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.header-nav-link:hover {
    color: var(--text-primary);
    background: var(--glass-bg-hover);
}

/* ============================================
   PAGE CONTENT
   ============================================ */
.content {
    flex: 1;
    padding: var(--space-6);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

.content::-webkit-scrollbar {
    width: 8px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: var(--radius-full);
}

.content::-webkit-scrollbar-thumb:hover {
    background: var(--glass-border-hover);
}

/* ============================================
   NEWS TICKER / HÍRFOLYAM
   ============================================ */
.news-ticker-wrapper {
    padding: var(--space-4) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pinned-tiles-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--tile-gap);
    padding-top: 16px;
    align-items: start;
}
.pinned-tiles-container:empty {
    display: none;
}
.pinned-tile-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
}
.pinned-tile-wrapper > * {
    position: relative !important;
    flex: 1;
    min-height: 0;
    overflow: auto;
    inset: auto !important;
}

.news-ticker {
    height: 44px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    gap: var(--space-4);
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
}

/* Hírfolyam prizmás felső fénycsík */
.news-ticker::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.06) 10%, rgba(139,92,246,0.05) 25%, rgba(255,255,255,0.10) 50%, rgba(52,211,153,0.05) 75%, rgba(96,165,250,0.06) 90%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

/* Hírfolyam felületi fény */
.news-ticker::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 25%, transparent 50%, rgba(255,255,255,0.005) 100%);
    pointer-events: none;
    z-index: 1;
}

.news-ticker:not(.ticker-hidden) + .news-ticker:not(.ticker-hidden) {
    margin-top: 8px;
}

/* Ticker elrejtése */
.news-ticker.ticker-hidden {
    display: none !important;
}

.news-ticker-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    padding-right: var(--space-4);
    border-right: 1px solid var(--glass-border);
}

.news-ticker-label svg {
    width: 16px;
    height: 16px;
}

/* Ticker label színvariációk */
.news-ticker-label.blue { color: var(--accent-primary); }
.news-ticker-label.purple { color: #a855f7; }
.news-ticker-label.orange { color: #f97316; }
.news-ticker-label.green { color: var(--success); }

.news-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.news-ticker-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    animation: ticker-scroll 30s linear infinite;
    width: max-content;
}

.news-ticker:hover .news-ticker-content {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.news-ticker-content .news-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    white-space: nowrap;
}

.news-ticker-content .news-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-ticker-content .news-item-dot.info { background: var(--accent-primary); }
.news-ticker-content .news-item-dot.success { background: var(--success); }
.news-ticker-content .news-item-dot.warning { background: var(--warning); }
.news-ticker-content .news-item-dot.error { background: var(--error); }

.news-ticker-content .news-item-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.news-ticker-content .news-item-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: var(--space-4);
}

/* ============================================
   OVERVIEW ROW (Radar + Quick Links)
   ============================================ */
.overview-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--tile-gap);
}

/* Radar Chart */
.radar-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

.radar-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.radar-card-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
}

.radar-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.radar-chart {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.radar-grid {
    fill: none;
    stroke: var(--glass-border);
    stroke-width: 1;
}

.radar-axis {
    stroke: var(--glass-border);
    stroke-width: 1;
}

.radar-area {
    fill: rgba(96, 165, 250, 0.2);
    stroke: var(--accent-primary);
    stroke-width: 2;
}

.radar-point {
    fill: var(--accent-primary);
    stroke: var(--bg-base);
    stroke-width: 2;
}

.radar-label {
    font-size: 10px;
    fill: var(--text-secondary);
    text-anchor: middle;
}

.radar-value {
    font-size: 9px;
    fill: var(--text-muted);
    text-anchor: middle;
}

/* Quick Links Grid */
.quick-links-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.quick-links-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quick-links-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.quick-link:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.quick-link-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow var(--transition-fast);
}

.quick-link:hover .quick-link-icon {
    box-shadow: 0 0 20px currentColor;
}

.quick-link-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.quick-link-icon.economy { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); }
.quick-link-icon.people { background: linear-gradient(135deg, var(--color-red) 0%, #dc2626 100%); }
.quick-link-icon.governance { background: linear-gradient(135deg, var(--color-blue) 0%, #2563eb 100%); }
.quick-link-icon.mobility { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.quick-link-icon.environment { background: linear-gradient(135deg, var(--color-green) 0%, #16a34a 100%); }
.quick-link-icon.living { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }

.quick-link-text {
    text-align: center;
}

.quick-link-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.quick-link-score {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================
   KPI CARDS
   ============================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tile-gap);
}

.kpi-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.09);
    border-left-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    padding-bottom: 44px;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.10),
        0 6px 16px rgba(0, 0, 0, 0.18),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.55),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.03),
        0 calc(var(--tile-thickness) + 6px) 20px rgba(0, 0, 0, 0.28);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.25) 10%, rgba(139,92,246,0.20) 25%, rgba(255,255,255,0.40) 50%, rgba(52,211,153,0.20) 75%, rgba(96,165,250,0.25) 90%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 25%, transparent 50%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

.kpi-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hover);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.09),
        0 2px 6px rgba(0, 0, 0, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.25),
        0 calc(var(--tile-thickness) + 2px) 0 0 rgba(10, 10, 25, 0.45),
        0 calc(var(--tile-thickness) + 10px) 32px rgba(0, 0, 0, 0.32),
        0 0 40px var(--kpi-glow-color, rgba(96, 165, 250, 0.08));
}

.kpi-card.blue { --kpi-color: var(--gradient-primary); --kpi-accent: #60A5FA; --kpi-glow-color: rgba(96, 165, 250, 0.10); }
.kpi-card.green { --kpi-color: var(--gradient-secondary); --kpi-accent: #34D399; --kpi-glow-color: rgba(52, 211, 153, 0.10); }
.kpi-card.yellow { --kpi-color: var(--gradient-warm); --kpi-accent: #FBBF24; --kpi-glow-color: rgba(251, 191, 36, 0.10); }
.kpi-card.purple { --kpi-color: var(--gradient-tertiary); --kpi-accent: var(--color-violet); --kpi-glow-color: rgba(167, 139, 250, 0.10); }

.kpi-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon svg {
    width: 26px;
    height: 26px;
}

.kpi-card.blue .kpi-icon { background: var(--info-bg); }
.kpi-card.blue .kpi-icon svg { color: var(--chart-1); }
.kpi-card.green .kpi-icon { background: var(--success-bg); }
.kpi-card.green .kpi-icon svg { color: var(--chart-2); }
.kpi-card.yellow .kpi-icon { background: var(--warning-bg); }
.kpi-card.yellow .kpi-icon svg { color: var(--chart-3); }
.kpi-card.purple .kpi-icon { background: rgba(167, 139, 250, 0.15); }
.kpi-card.purple .kpi-icon svg { color: var(--chart-5); }

.kpi-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
}

.kpi-trend svg {
    width: 14px;
    height: 14px;
}

.kpi-trend.up { background: var(--success-bg); color: var(--success); }
.kpi-trend.down { background: var(--error-bg); color: var(--error); }
.kpi-trend.stable { background: var(--glass-bg); color: var(--text-muted); }

.kpi-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-1);
    color: var(--kpi-accent);
}

.kpi-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-sublabel {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ============================================
   CONTENT GRID
   ============================================ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--tile-gap);
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }

/* ============================================
   GLASS CARD
   ============================================ */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.09);
    border-left-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
    position: relative;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.10),
        0 6px 16px rgba(0, 0, 0, 0.18),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.55),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.03),
        0 calc(var(--tile-thickness) + 6px) 20px rgba(0, 0, 0, 0.28);
}

.card:hover {
    border-color: var(--glass-border-hover);
}

.card-header {
    padding: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-title svg {
    width: 20px;
    height: 20px;
    color: var(--accent-primary);
}

.card-actions {
    display: flex;
    gap: var(--space-2);
}

.card-body {
    padding: var(--space-5);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border-color: var(--glass-border);
}

.btn-secondary:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.btn-secondary.active {
    background: var(--glass-bg-active);
    color: var(--accent-primary);
    border-color: rgba(96, 165, 250, 0.3);
}

/* ============================================
   CHART CONTAINER
   ============================================ */
.chart-container {
    height: 250px;
    position: relative;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tile-gap);
}

.stat-item {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
}

.stat-icon.green { background: var(--success-bg); }
.stat-icon.green svg { color: var(--success); }
.stat-icon.blue { background: var(--info-bg); }
.stat-icon.blue svg { color: var(--info); }
.stat-icon.cyan { background: rgba(34, 211, 238, 0.15); }
.stat-icon.cyan svg { color: #22D3EE; }
.stat-icon.purple { background: rgba(167, 139, 250, 0.15); }
.stat-icon.purple svg { color: var(--accent-tertiary); }

.stat-content { flex: 1; }

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
}

.stat-value .unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

/* NEWS LIST — eltávolítva: .news-list és generic .news-item nem volt használatban (lásd news-tile-body scope) */

.news-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.news-icon svg {
    width: 22px;
    height: 22px;
}

.news-icon.warning { background: var(--warning-bg); }
.news-icon.warning svg { color: var(--warning); }
.news-icon.success { background: var(--success-bg); }
.news-icon.success svg { color: var(--success); }
.news-icon.info { background: var(--info-bg); }
.news-icon.info svg { color: var(--info); }

.news-content { flex: 1; }

.news-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.news-time {
    font-size: 12px;
    color: var(--text-muted);
}

.news-arrow {
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.news-item:hover .news-arrow {
    color: var(--accent-primary);
    transform: translateX(4px);
}

/* ============================================
   MAP CONTAINER
   ============================================ */
.page-map-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    min-height: 0;
}
.page-map-tile .map-inner-card #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page-map-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 40, 0.9);
    z-index: 10;
    border-radius: 10px;
}
.page-map-loading.hidden { display: none; }

/* Fullscreen térkép oldal */
.page-map-tile.fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 10000;
    border-radius: 0;
    border: none;
    background: var(--bg-primary, #0f0f23);
}
.page-map-tile.fullscreen .mobility-map-body {
    flex: 1; padding: 0;
}
.page-map-tile.fullscreen .map-inner-card {
    border-radius: 0; border: none;
}
.page-map-tile.fullscreen .mobility-map-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(15, 15, 35, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.page-map-tile.fullscreen .fullscreen-btn .icon-maximize { display: none; }
.page-map-tile.fullscreen .fullscreen-btn .icon-minimize { display: block; }

#map { width: 100%; height: 100%; }

.leaflet-container { background: var(--bg-darker); }
.leaflet-tile { filter: brightness(0.7) contrast(1.1) saturate(0.8); }

.leaflet-control-zoom { border: none !important; }
.leaflet-control-zoom a {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--glass-bg-hover) !important;
}

/* ============================================
   QUICK LINKS
   ============================================ */
.quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
    padding-top: 0;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.quick-link:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
}

.quick-link-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
}

.quick-link:hover .quick-link-icon {
    background: var(--info-bg);
}

.quick-link-icon svg {
    width: 22px;
    height: 22px;
    color: var(--accent-primary);
}

.quick-link-label {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: var(--space-4) var(--space-6);
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
}

.footer-links {
    display: flex;
    gap: var(--space-4);
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: color var(--transition-fast);
}

.footer-link svg {
    width: 14px;
    height: 14px;
}

.footer-link:hover {
    color: var(--accent-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1400px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: repeat(6, 1fr); }
    .col-4, .col-5 { grid-column: span 3; }
    .col-6, .col-7, .col-8 { grid-column: span 6; }
}

@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .main { margin-left: 0; }
}

@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .content-grid { grid-template-columns: 1fr; }
    [class*="col-"] { grid-column: span 1; }
    .header { padding: 0 var(--space-4); }
    .search-box { display: none; }
    .quick-links { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   MOBILITY MAP STYLES
   ============================================ */
.mobility-map-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobility-map-header {
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.mobility-map-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}

.mobility-layers-bar {
    padding: var(--space-3) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.15);
}

.mobility-layer-btn {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: var(--font-family);
}

.mobility-layer-btn .btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mobility-layer-btn:hover {
    background: rgba(255,255,255,0.008);
    color: var(--text-secondary);
}

.mobility-layer-btn.active {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--accent-primary);
}

.mobility-layer-btn .count {
    background: rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 4px;
}

/* Réteg színek */
.mobility-layer-btn.active[data-layer="bus"] {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--color-green);
}
.mobility-layer-btn.active[data-layer="charging"] {
    background: rgba(234, 179, 8, 0.2);
    border-color: rgba(234, 179, 8, 0.4);
    color: #eab308;
}
.mobility-layer-btn.active[data-layer="parking"] {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60a5fa;
}
.mobility-layer-btn.active[data-layer="crosswalk"] {
    background: rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.4);
    color: var(--color-violet);
}
.mobility-layer-btn.active[data-layer="bike"] {
    background: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}
.mobility-layer-btn.active[data-layer="fuel"] {
    background: rgba(251, 146, 60, 0.2);
    border-color: rgba(251, 146, 60, 0.4);
    color: #fb923c;
}
.mobility-layer-btn.active[data-layer="construction"] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--color-red);
}
.mobility-layer-btn.active[data-layer="maintenance"] {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.mobility-layer-btn.active[data-layer="speedcam"] {
    background: rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.4);
    color: #ec4899;
}

/* Térkép oldal réteg színek */
.mobility-layer-btn.active[data-map-layer="government"] {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60a5fa;
}
.mobility-layer-btn.active[data-map-layer="culture"] {
    background: rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.4);
    color: var(--color-violet);
}
.mobility-layer-btn.active[data-map-layer="education"] {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.4);
    color: #06b6d4;
}
.mobility-layer-btn.active[data-map-layer="health"] {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}
.mobility-layer-btn.active[data-map-layer="shopping"] {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.mobility-layer-btn.active[data-map-layer="dining"] {
    background: rgba(251, 146, 60, 0.2);
    border-color: rgba(251, 146, 60, 0.4);
    color: #fb923c;
}
.mobility-layer-btn.active[data-map-layer="sport"] {
    background: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}
.mobility-layer-btn.active[data-map-layer="historic"] {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}
.mobility-layer-btn.active[data-map-layer="transport"] {
    background: rgba(251, 146, 60, 0.2);
    border-color: rgba(251, 146, 60, 0.4);
    color: var(--color-amber);
}
.mobility-layer-btn.active[data-map-layer="safety"] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--color-red);
}

.mobility-map-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.map-inner-card {
    flex: 1;
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.map-inner-card #mobilityMap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.map-inner-card .mobility-map-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 40, 0.9);
    z-index: 10;
    border-radius: 10px;
}

.mobility-map-loading.hidden {
    display: none;
}

/* Fullscreen térkép */
.mobility-map-tile.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    border-radius: 0;
    border: none;
    background: var(--bg-primary, #0f0f23);
}
.mobility-map-tile.fullscreen .mobility-map-body {
    flex: 1;
    padding: 0;
}
.mobility-map-tile.fullscreen .map-inner-card {
    border-radius: 0;
    border: none;
}
.mobility-map-tile.fullscreen .mobility-map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1000;
    background: rgba(15, 15, 35, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}
.mobility-map-tile.fullscreen .mobility-map-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(15, 15, 35, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.fullscreen-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.008);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.fullscreen-btn:hover {
    background: rgba(255,255,255,0.15);
}
.fullscreen-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
}
.fullscreen-btn:hover svg {
    stroke: var(--text-primary);
}
.fullscreen-btn .icon-minimize {
    display: none;
}
.mobility-map-tile.fullscreen .fullscreen-btn .icon-maximize {
    display: none;
}
.mobility-map-tile.fullscreen .fullscreen-btn .icon-minimize {
    display: block;
}

.mobility-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.05);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.mobility-map-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.mobility-map-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.mobility-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.mobility-legend-color {
    width: 16px;
    height: 4px;
    border-radius: 2px;
}

.mobility-legend-color.green { background: var(--color-green); }
.mobility-legend-color.yellow { background: #eab308; }
.mobility-legend-color.orange { background: #f97316; }
.mobility-legend-color.red { background: var(--color-red); }

.mobility-location-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobility-location-status:hover {
    background: rgba(96, 165, 250, 0.25);
    transform: scale(1.02);
}

.mobility-location-status:active {
    transform: scale(0.98);
}

.mobility-location-status svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 1200px) {
    .mobility-layers-bar { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .mobility-layers-bar { justify-content: center; }
}

/* Közlekedésmeteorológia csempe */
.weather-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
}

.weather-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.weather-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    color: var(--text-primary);
}

.weather-tile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-tile-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.weather-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.weather-temp {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.weather-desc {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.weather-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.weather-item {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.weather-item svg {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.weather-item span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.weather-alert {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.weather-biometeo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.weather-biometeo .biometeo-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-biometeo .biometeo-icon svg {
    width: 12px;
    height: 12px;
}

.weather-biometeo .biometeo-title {
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-biometeo.warning { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); }
.weather-biometeo.warning .biometeo-icon svg { color: var(--color-amber); }
.weather-biometeo.warning .biometeo-title { color: var(--color-amber); }

.weather-biometeo.danger { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); }
.weather-biometeo.danger .biometeo-icon svg { color: var(--color-red); }
.weather-biometeo.danger .biometeo-title { color: var(--color-red); }

.weather-biometeo.good { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
.weather-biometeo.good .biometeo-icon svg { color: var(--color-emerald); }
.weather-biometeo.good .biometeo-title { color: var(--color-emerald); }

.weather-alert.warning { background: rgba(245, 158, 11, 0.15); color: var(--color-amber); border: 1px solid rgba(245, 158, 11, 0.3); }
.weather-alert.danger { background: rgba(239, 68, 68, 0.15); color: var(--color-red); border: 1px solid rgba(239, 68, 68, 0.3); }
.weather-alert.good { background: rgba(16, 185, 129, 0.15); color: var(--color-emerald); border: 1px solid rgba(16, 185, 129, 0.3); }
.weather-alert.info { background: rgba(59, 130, 246, 0.15); color: var(--color-blue); border: 1px solid rgba(59, 130, 246, 0.3); }

.weather-refresh-btn {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.weather-refresh-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--accent-primary);
}

.weather-refresh-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.weather-refresh-btn.spinning svg {
    animation: spinIcon 0.6s linear 1;
}

@keyframes spinIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes refreshFlash {
    0% { color: var(--color-emerald); }
    100% { color: inherit; }
}

.refresh-flash {
    animation: refreshFlash 2s ease-out forwards;
}

/* ========== ÜVEG CSEMPE: 3D VASTAGSÁG + FÉNYTÖRÉS ========== */
/* Közös üveg stílus minden közlekedési csempére */
.weather-tile,
.mobility-map-tile,
.page-map-tile,
.travel-time-tile,
.traffic-flow-tile,
.news-tile,
.utinform-tile,
.crosswalk-tile,
.sxr-tile,
.transit-tile,
.transport-links-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
}

/* Prizmás felső fénycsík – minden közlekedési csempén */
.weather-tile::before,
.mobility-map-tile::before,
.page-map-tile::before,
.travel-time-tile::before,
.traffic-flow-tile::before,
.news-tile::before,
.utinform-tile::before,
.crosswalk-tile::before,
.sxr-tile::before,
.transit-tile::before,
.transport-links-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.12) 10%,
        rgba(139, 92, 246, 0.10) 25%,
        rgba(255, 255, 255, 0.09) 40%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.09) 60%,
        rgba(52, 211, 153, 0.10) 75%,
        rgba(96, 165, 250, 0.12) 90%,
        transparent 100%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

/* Felületi fényvisszaverődés overlay – minden közlekedési csempén */
.weather-tile::after,
.mobility-map-tile::after,
.page-map-tile::after,
.travel-time-tile::after,
.traffic-flow-tile::after,
.news-tile::after,
.utinform-tile::after,
.crosswalk-tile::after,
.sxr-tile::after,
.transit-tile::after,
.transport-links-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.025) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.01) 80%,
        rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ========== GRIDSTACK DARK THEME ========== */

/* Fallback layout GridStack betöltése előtt */
.mobility-grid-container:not(.grid-stack),
.environment-grid-container:not(.grid-stack),
.governance-grid-container:not(.grid-stack),
.economy-grid-container:not(.grid-stack),
.culture-grid-container:not(.grid-stack),
.healthcare-grid-container:not(.grid-stack),
.datastore-grid-container:not(.grid-stack),
.events-grid-container:not(.grid-stack),
.reports-grid-container:not(.grid-stack),
.suggestions-grid-container:not(.grid-stack),
.services-grid-container:not(.grid-stack),
.developments-grid-container:not(.grid-stack),
.livinglab-grid-container:not(.grid-stack),
.about-grid-container:not(.grid-stack),
.profile-grid-container:not(.grid-stack) {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--tile-gap);
}

/* GridStack overrides */
.mobility-grid-container.grid-stack,
.environment-grid-container.grid-stack,
.governance-grid-container.grid-stack,
.economy-grid-container.grid-stack,
.culture-grid-container.grid-stack,
.healthcare-grid-container.grid-stack,
.datastore-grid-container.grid-stack,
.events-grid-container.grid-stack,
.reports-grid-container.grid-stack,
.suggestions-grid-container.grid-stack,
.services-grid-container.grid-stack,
.developments-grid-container.grid-stack,
.livinglab-grid-container.grid-stack,
.about-grid-container.grid-stack,
.profile-grid-container.grid-stack {
    background: transparent;
    min-height: 100px;
}

.mobility-grid-container .grid-stack-item-content,
.environment-grid-container .grid-stack-item-content,
.governance-grid-container .grid-stack-item-content,
.economy-grid-container .grid-stack-item-content,
.culture-grid-container .grid-stack-item-content,
.healthcare-grid-container .grid-stack-item-content,
.datastore-grid-container .grid-stack-item-content,
.events-grid-container .grid-stack-item-content,
.reports-grid-container .grid-stack-item-content,
.suggestions-grid-container .grid-stack-item-content,
.services-grid-container .grid-stack-item-content,
.developments-grid-container .grid-stack-item-content,
.livinglab-grid-container .grid-stack-item-content,
.about-grid-container .grid-stack-item-content,
.profile-grid-container .grid-stack-item-content {
    background: transparent;
    overflow: visible !important;
}

/* Tile-specifikus CSS nem írhatja felül a GridStack margin/méretezést */
.mobility-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.environment-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.governance-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.economy-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.culture-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.healthcare-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.datastore-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.events-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.reports-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.suggestions-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.services-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.developments-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.livinglab-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.about-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content,
.profile-grid-container.grid-stack > .grid-stack-item > .grid-stack-item-content {
    max-width: none;
    height: auto;
}

/* Csempe tartalom: a tile maga kapja a grid-stack-item-content osztályt */
.grid-stack-item-content.weather-tile,
.grid-stack-item-content.mobility-map-tile,
.grid-stack-item-content.travel-time-tile,
.grid-stack-item-content.traffic-flow-tile,
.grid-stack-item-content.news-tile,
.grid-stack-item-content.utinform-tile,
.grid-stack-item-content.crosswalk-tile,
.grid-stack-item-content.sxr-tile,
.grid-stack-item-content.transit-tile,
.grid-stack-item-content.transport-links-tile,
.grid-stack-item-content.env-tile,
.grid-stack-item-content.gov-tile,
.grid-stack-item-content.battanet-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Görgetés engedélyezése a nem-térkép csempéken */
.grid-stack-item-content.weather-tile {
    overflow: hidden;
}
.grid-stack-item-content.travel-time-tile,
.grid-stack-item-content.traffic-flow-tile,
.grid-stack-item-content.news-tile,
.grid-stack-item-content.utinform-tile,
.grid-stack-item-content.crosswalk-tile,
.grid-stack-item-content.sxr-tile,
.grid-stack-item-content.transit-tile,
.grid-stack-item-content.transport-links-tile,
.grid-stack-item-content.env-tile,
.grid-stack-item-content.gov-tile,
.grid-stack-item-content.battanet-tile {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar stílus - dark theme */
.grid-stack-item-content ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.grid-stack-item-content ::-webkit-scrollbar-track {
    background: transparent;
}
.grid-stack-item-content ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}
.grid-stack-item-content ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}
.grid-stack-item-content * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* Drag handle stílus */
.gs-drag-handle {
    cursor: grab;
    user-select: none;
}
.gs-drag-handle:active {
    cursor: grabbing;
}

/* Drag közben placeholder */
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed rgba(59, 130, 246, 0.5) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border-radius: var(--radius-lg);
}

/* Resize handle - alapból rejtett, csak .gs-free-resize osztállyal aktív */
.grid-stack-item > .ui-resizable-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.grid-stack-item.gs-free-resize > .ui-resizable-handle {
    opacity: 1;
    pointer-events: auto;
}
.grid-stack-item.gs-free-resize {
    outline: 2px solid rgba(59, 130, 246, 0.4);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}
.grid-stack-item > .ui-resizable-se {
    width: 20px !important;
    height: 20px !important;
    bottom: 4px !important;
    right: 4px !important;
    background: none !important;
}
.grid-stack-item > .ui-resizable-se::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgba(96, 165, 250, 0.7);
    border-bottom: 2px solid rgba(96, 165, 250, 0.7);
    border-radius: 0 0 3px 0;
}

/* ========== TILE RESIZE POPUP ========== */
.tile-resize-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.tile-resize-btn:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-primary);
}
.tile-resize-btn svg {
    width: 16px;
    height: 16px;
}
.tile-resize-popup {
    position: fixed;
    margin-top: 4px;
    background: rgba(15,23,42,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 6px;
    min-width: 160px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: none;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}
.tile-resize-popup::-webkit-scrollbar {
    width: 6px;
}
.tile-resize-popup::-webkit-scrollbar-track {
    background: transparent;
}
.tile-resize-popup::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}
.tile-resize-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}
.tile-resize-popup.visible {
    display: block;
}
.tile-resize-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}
.tile-resize-option:hover {
    background: rgba(255,255,255,0.008);
    color: var(--text-primary);
}
.tile-resize-option:active {
    animation: mw-option-flash 0.35s ease-out;
}
.tile-resize-option.active {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
}
.tile-resize-option .size-preview {
    display: inline-flex;
    gap: 1px;
}
.tile-resize-option .size-block {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.5;
}
.tile-resize-option.active .size-block {
    opacity: 1;
}

/* ========== INTELLIGENS GYALOGÁTKELŐ CSEMPE ========== */
.crosswalk-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

.crosswalk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.crosswalk-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
}

.live-badge .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: traffic-pulse 2s infinite;
}

.crosswalk-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Egyedi dropdown */
.crosswalk-dropdown {
    position: relative;
    margin-bottom: 12px;
}

.crosswalk-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.crosswalk-dropdown-selected:hover {
    border-color: var(--color-violet);
    background: rgba(255, 255, 255, 0.08);
}

.crosswalk-dropdown-selected.open {
    border-color: var(--color-violet);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.crosswalk-dropdown-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.crosswalk-dropdown-text {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crosswalk-dropdown-arrow {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.crosswalk-dropdown-arrow.open {
    transform: rotate(180deg);
}

.crosswalk-dropdown-arrow svg {
    width: 16px;
    height: 16px;
}

.crosswalk-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid var(--color-violet);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.crosswalk-dropdown-list.open {
    display: block;
}

.crosswalk-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.crosswalk-dropdown-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.crosswalk-dropdown-list::-webkit-scrollbar-thumb {
    background: var(--color-violet);
    border-radius: 3px;
}

.crosswalk-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.crosswalk-dropdown-item:last-child {
    border-bottom: none;
}

.crosswalk-dropdown-item:hover {
    background: rgba(167, 139, 250, 0.15);
}

.crosswalk-dropdown-item.selected {
    background: rgba(167, 139, 250, 0.2);
}

.crosswalk-dropdown-item-text {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crosswalk-dropdown-item-id {
    color: var(--color-violet);
    font-weight: 600;
    margin-right: 8px;
    font-size: 12px;
}

.crosswalk-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
}

.crosswalk-status-badge.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
}

.crosswalk-status-badge.inactive {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.crosswalk-status-badge.maintenance {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber);
}

.crosswalk-status-badge .crosswalk-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.crosswalk-status-badge.active .crosswalk-status-dot {
    animation: traffic-pulse 2s infinite;
}

/* Belső csempék */
.crosswalk-inner-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crosswalk-inner-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.crosswalk-inner-tile-left {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.crosswalk-inner-tile-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.crosswalk-inner-tile-value {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.crosswalk-inner-tile-unit {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: normal;
}

.crosswalk-inner-tile-change {
    font-size: 10px;
    margin-top: 2px;
}

.crosswalk-inner-tile-change.up { color: var(--color-green); }
.crosswalk-inner-tile-change.down { color: var(--color-red); }
.crosswalk-inner-tile-change.neutral { color: var(--text-muted); }

.crosswalk-inner-tile-chart {
    flex: 1;
    height: 50px;
    min-width: 120px;
}

.crosswalk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .crosswalk-inner-tile {
        flex-direction: column;
        align-items: flex-start;
    }
    .crosswalk-inner-tile-chart {
        width: 100%;
        min-width: unset;
    }
}

/* ========== FORGALMI TERHELÉS CSEMPE ========== */
.traffic-flow-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.traffic-flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.traffic-flow-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.traffic-flow-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

.traffic-flow-title-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-blue), var(--color-violet-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.traffic-flow-title-icon svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

/* Egységes csempe cím: ikon + szöveg egy sorban */
.tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}

/* Egységes csempe cím ikon stílus */
.tile-title-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tile-title-icon svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
}
.tile-title-icon.yellow { background: linear-gradient(135deg, #fbbf24, var(--color-amber)); }
.tile-title-icon.orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.tile-title-icon.blue { background: linear-gradient(135deg, var(--color-blue), var(--color-violet-dark)); }
.tile-title-icon.purple { background: linear-gradient(135deg, var(--color-violet), var(--color-violet-dark)); }
.tile-title-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.tile-title-icon.sky { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }

/* Pin (kitűzés) gomb - jobb felső sarok */
.tile-pin-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tile-pin-btn:hover {
    background: rgba(255,255,255,0.015);
}
.tile-pin-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    opacity: 0.35;
    transition: all 0.2s;
}
.tile-pin-btn:hover svg {
    stroke: var(--text-primary);
    opacity: 0.7;
}
.tile-pin-btn.pinned {
    background: rgba(96, 165, 250, 0.12);
}
.tile-pin-btn.pinned svg {
    stroke: #60a5fa;
    fill: #60a5fa;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.5));
}
.tile-pin-btn.pinned:hover svg {
    stroke: var(--color-red);
    fill: var(--color-red);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

/* Header jobb oldali elemek wrapper — drag handle-ön belül is kattintható */
.tile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.traffic-flow-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.traffic-control-group {
    display: flex;
    background: rgba(255,255,255,0.015);
    border-radius: 8px;
    overflow: hidden;
}

.traffic-control-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.traffic-control-btn:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-primary);
}

.traffic-control-btn.active {
    background: rgba(59, 130, 246, 0.3);
    color: var(--color-blue);
}

.traffic-direction-selector {
    display: flex;
    gap: 8px;
    margin: 16px 18px;
    flex-shrink: 0;
}

.traffic-direction-btn {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.traffic-direction-btn:hover {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.2);
}

.traffic-direction-btn.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.traffic-direction-btn .arrow {
    font-size: 16px;
}

.traffic-chart-container {
    position: relative;
    flex: 1 0 120px;
    margin: 0 18px 16px 18px;
}

.traffic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 16px 18px 0 18px;
    margin: 0 18px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.traffic-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.traffic-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.traffic-legend-label {
    display: flex;
    flex-direction: column;
}

.traffic-legend-road {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.traffic-legend-route {
    font-size: 11px;
    color: var(--text-muted);
}

.road-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 4px;
}

.road-badge.motorway {
    background: #16a34a;
    color: #fff;
}

.road-badge.main-road {
    background: #2563eb;
    color: #fff;
}

.traffic-flow-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.traffic-data-source {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Közös adatforrás stílus minden csempéhez */
.tile-data-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

.tile-data-source .source-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-green);
    animation: traffic-pulse 2s infinite;
}

.tile-data-source .source-dot.static,
.tile-data-source .source-dot.demo {
    display: none;
}
.tile-data-source .source-dot.loading {
    background: var(--color-amber);
    animation: pulse 1s infinite;
}

.tile-data-source .source-dot.error {
    background: var(--color-red);
    animation: none;
}

.weather-tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.traffic-live-indicator {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: traffic-pulse 2s infinite;
}

@keyframes traffic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.traffic-status-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 18px 16px 18px;
    flex-shrink: 0;
}

.traffic-status-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.traffic-status-card .road-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.traffic-status-card .congestion-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 2px;
}

.traffic-status-card .congestion-value.good { color: var(--color-green); }
.traffic-status-card .congestion-value.medium { color: var(--color-amber); }
.traffic-status-card .congestion-value.bad { color: var(--color-red); }

.traffic-status-card .congestion-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.traffic-status-card .speed-info {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}

.traffic-status-card .speed-info.good { 
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
}
.traffic-status-card .speed-info.medium { 
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber);
}
.traffic-status-card .speed-info.bad { 
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-red);
}

.traffic-status-card .speed-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 900px) {
    .traffic-status-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .traffic-chart-container {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .traffic-status-cards {
        grid-template-columns: 1fr;
    }
    .traffic-direction-selector {
        flex-direction: column;
    }
}


/* ========== MINI WIDGET (2×2) ========== */
.mw-content {
    overflow: visible !important;
    border-radius: var(--radius-lg);
}
.mini-widget {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    cursor: grab;
    height: 100%;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 3px 0 0 rgba(10, 10, 25, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.05);
}
/* Mini-widget prizmás felső perem */
.mini-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.10) 15%, rgba(255,255,255,0.15) 50%, rgba(52,211,153,0.10) 85%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}
.mini-widget:active {
    cursor: grabbing;
}
.mini-widget[data-pinned="1"] {
    cursor: default;
}
/* Fejléc sor: ikon bal felső, settings jobb felső */
.mw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 0 8px;
    flex-shrink: 0;
}
.mini-widget-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mini-widget-icon-wrap svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
}
[data-source="crosswalk"] .mini-widget-icon-wrap svg { fill: #fff; stroke: none; }
.mini-widget-icon-wrap.yellow  { background: linear-gradient(135deg, #fbbf24, var(--color-amber)); }
.mini-widget-icon-wrap.orange  { background: linear-gradient(135deg, #f97316, #ea580c); }
.mini-widget-icon-wrap.blue    { background: linear-gradient(135deg, var(--color-blue), var(--color-violet-dark)); }
.mini-widget-icon-wrap.purple  { background: linear-gradient(135deg, var(--color-violet), var(--color-violet-dark)); }
.mini-widget-icon-wrap.cyan    { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.mini-widget-icon-wrap.green   { background: linear-gradient(135deg, var(--color-green), #16a34a); }

/* Header jobb oldali gombok wrapper */
.mw-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
/* Pin gomb */
.mw-pin-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.mw-pin-btn svg { width: 12px; height: 12px; }
.mini-widget:hover .mw-pin-btn { opacity: 1; }
.mw-pin-btn:hover { background: rgba(255,255,255,0.015); }
.mw-pin-btn.pinned {
    opacity: 1;
    background: rgba(96, 165, 250, 0.12);
}
.mw-pin-btn.pinned svg {
    stroke: #60a5fa;
    fill: #60a5fa;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.5));
}
.mw-pin-btn.pinned:hover svg {
    stroke: var(--color-red);
    fill: var(--color-red);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}
/* Settings gomb jobb felső */
.mini-widget-settings {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.mini-widget-settings svg { width: 13px; height: 13px; }
.mini-widget:hover .mini-widget-settings { opacity: 1; }
.mini-widget-settings:hover { background: rgba(255,255,255,0.015); color: var(--text-primary); }

/* Mini-widget címke */
.mw-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 1px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    opacity: 0.7;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Tartalom közép */
.mw-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 8px 4px;
    min-height: 0;
    text-align: center;
    gap: 1px;
    overflow: hidden;
}
.mw-primary {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mw-secondary {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}
.mw-sub {
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}
/* Perc: nagy szám + kis egység */
.mw-time-big {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.mw-time-unit {
    font-size: 9px;
    color: var(--text-muted);
    margin-left: 2px;
    font-weight: 400;
}
/* Badge */
.mw-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}
.mw-badge.good { background: rgba(16,185,129,0.15); color: var(--color-emerald); border: 1px solid rgba(16,185,129,0.3); }
.mw-badge.warning { background: rgba(245,158,11,0.15); color: var(--color-amber); border: 1px solid rgba(245,158,11,0.3); }
.mw-badge.danger { background: rgba(239,68,68,0.15); color: var(--color-red); border: 1px solid rgba(239,68,68,0.3); }
.mw-badge.info { background: rgba(59,130,246,0.15); color: var(--color-blue); border: 1px solid rgba(59,130,246,0.3); }
.mw-badge-sm { font-size: 8px; padding: 1px 5px; border-radius: 6px; }
/* Trend nyíl (↑↓) a mini-widgetekben */
.mw-trend {
    font-size: 10px;
    font-weight: 700;
    margin-left: 3px;
    white-space: nowrap;
    vertical-align: middle;
}
.mw-trend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}
/* Emoji ikon (időjárás hőm.) */
.mw-emoji-icon {
    font-size: 28px;
    line-height: 1;
}

/* Előrejelzés mini-widget: ikon + adat egymás mellett */
.mw-fc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.mw-fc-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.mw-fc-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.mw-fc-data .mw-primary {
    font-size: 18px;
}
.mw-fc-data .mw-sub {
    text-align: left;
}
/* Ha a body-ban van .mw-fc-row, a tartalmat középre igazítjuk */
.mw-body:has(.mw-fc-row) {
    justify-content: center;
    padding-top: 0;
}

/* Pollen mini-widget rács */
.mw-pollen-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0 4px;
}
.mw-pollen-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
}
.mw-pollen-type {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
}
.mw-pollen-val {
    font-weight: 700;
    font-size: 10px;
}

/* Mini widget adatforrás (bal alsó sarok) */
.mw-source {
    position: absolute;
    bottom: 4px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    color: var(--text-muted);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.mw-source-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-green);
    flex-shrink: 0;
    animation: traffic-pulse 2s infinite;
}
.mw-source-dot.demo {
    background: #fbbf24;
    animation: none;
}
.mw-source-dot.offline {
    background: var(--color-red);
    animation: none;
}

/* Mini widget háttérszínek */
.mini-widget.mw-color-default { background: var(--glass-bg); }
.mini-widget.mw-color-dark    { background: rgba(15,23,42,0.7); border-color: rgba(255,255,255,0.12); }
.mini-widget.mw-color-orange  { background: rgba(249,115,22,0.55); border-color: rgba(249,115,22,0.7); }
.mini-widget.mw-color-red     { background: rgba(239,68,68,0.55); border-color: rgba(239,68,68,0.7); }
.mini-widget.mw-color-pink    { background: rgba(236,72,153,0.55); border-color: rgba(236,72,153,0.7); }
.mini-widget.mw-color-sky     { background: rgba(56,189,248,0.55); border-color: rgba(56,189,248,0.7); }
.mini-widget.mw-color-forest  { background: rgba(22,163,74,0.55); border-color: rgba(22,163,74,0.7); }
.mini-widget.mw-color-lime    { background: rgba(132,204,22,0.55); border-color: rgba(132,204,22,0.7); }
.mini-widget.mw-color-violet  { background: rgba(139,92,246,0.55); border-color: rgba(139,92,246,0.7); }
.mini-widget.mw-color-yellow  { background: rgba(250,204,21,0.55); border-color: rgba(250,204,21,0.7); }
.mini-widget.mw-color-white   { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.4); }

/* Mini widget settings popup — BODY-LEVEL FIXED */
.mw-popup-global {
    position: fixed;
    background: rgba(15,23,42,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 6px;
    z-index: 10000;
    display: none;
    min-width: 190px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overscroll-behavior: contain;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}
.mw-popup-global::-webkit-scrollbar {
    width: 6px;
}
.mw-popup-global::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}
.mw-popup-global::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}
.mw-popup-global::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}
.mw-popup-global.visible { display: block; }
.mw-popup-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}
.mw-popup-option:hover { background: rgba(255,255,255,0.008); color: var(--text-primary); }
.mw-popup-option:active { animation: mw-option-flash 0.35s ease-out; }
.mw-popup-option.active { background: rgba(96,165,250,0.15); color: var(--accent-primary); }
.mw-popup-option.delete { color: var(--color-red); }
.mw-popup-option.delete:hover { background: rgba(239,68,68,0.15); }
.mw-popup-option.delete:active { animation: mw-option-flash-red 0.35s ease-out; }
.mw-popup-divider { height: 1px; background: rgba(255,255,255,0.008); margin: 4px 0; }
.mw-popup-label { padding: 4px 10px; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Színválasztó grid */
.mw-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 4px 8px 6px;
}
.mw-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.mw-color-swatch:hover { transform: scale(1.15); }
.mw-color-swatch:active { animation: mw-swatch-pop 0.3s ease-out; }
.mw-color-swatch.active { border-color: #fff; }
.mw-color-swatch[data-color="default"] { background: var(--glass-bg); border-color: rgba(255,255,255,0.05); }
.mw-color-swatch[data-color="dark"]    { background: rgba(15,23,42,0.3); border-color: rgba(255,255,255,0.02); }
.mw-color-swatch[data-color="orange"]  { background: rgba(249,115,22,0.5); }
.mw-color-swatch[data-color="red"]     { background: rgba(239,68,68,0.5); }
.mw-color-swatch[data-color="pink"]    { background: rgba(236,72,153,0.5); }
.mw-color-swatch[data-color="sky"]     { background: rgba(56,189,248,0.5); }
.mw-color-swatch[data-color="forest"]  { background: rgba(22,163,74,0.5); }
.mw-color-swatch[data-color="lime"]    { background: rgba(132,204,22,0.5); }
.mw-color-swatch[data-color="violet"]  { background: rgba(139,92,246,0.5); }
.mw-color-swatch[data-color="yellow"]  { background: rgba(250,204,21,0.5); }
.mw-color-swatch[data-color="white"]   { background: rgba(255,255,255,0.35); }

/* Add mini widget gomb a resize popup-ban */
.tile-resize-option.add-mini {
    color: var(--accent-primary);
}
.tile-resize-option.add-mini svg { color: var(--accent-primary); }

/* Popup/dropdown kattintás flash animációk */
@keyframes mw-option-flash {
    0%   { background: rgba(96,165,250,0.25); }
    100% { background: transparent; }
}
@keyframes mw-option-flash-red {
    0%   { background: rgba(239,68,68,0.30); }
    100% { background: transparent; }
}
@keyframes mw-swatch-pop {
    0%   { transform: scale(0.85); box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); box-shadow: none; }
}

/* ========== MENETREND TILE-OK ========== */
.transit-section { 
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 400px;
    box-sizing: border-box;
}
.transit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tile-gap); 
    flex: 1;
    min-height: 0;
}
.transit-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.transit-tile-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02); 
    flex-shrink: 0;
}
.transit-tile-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; }
.transit-tile-title svg, .transit-tile-title img { 
    object-fit: contain; 
}
.transit-tile-title .mav-icon { height: 20px; width: auto; }
.transit-tile-title .volan-icon { height: 20px; width: auto; }
.transit-line-badge { background: #00A0E3; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.transit-selectors { display: flex; gap: 8px; margin-bottom: 12px; }
.transit-select { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: #1e293b; color: white; font-size: 13px; }
.transit-direction-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.transit-dir-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.transit-dir-btn.active { background: rgba(0, 160, 227, 0.2); border-color: #00A0E3; color: #00A0E3; }
.transit-schedule { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.transit-item { display: flex; align-items: center; padding: 5px 8px; background: rgba(255,255,255,0.008); border-radius: 6px; gap: 8px; }
.transit-item.past { opacity: 0.3; }
.transit-time { font-size: 13px; font-weight: 700; font-family: monospace; min-width: 42px; }
.transit-time.upcoming { color: var(--color-emerald); }
.transit-time.past { color: var(--color-red); }
.transit-status-dot { width: 6px; height: 6px; border-radius: 50%; }
.transit-status-dot.upcoming { background: var(--color-emerald); }
.transit-status-dot.past { background: var(--color-red); }
.transit-dest { flex: 1; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transit-service { font-size: 9px; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,0.015); color: var(--text-muted); }
.transit-eta { font-size: 11px; font-weight: 600; color: var(--color-emerald); white-space: nowrap; margin-left: auto; padding-left: 6px; }
.transit-item.past .transit-eta { display: none; }
.transit-tile-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    background: rgba(0,0,0,0.025);
    flex-shrink: 0;
}
.transit-tile-footer a { color: var(--text-muted); font-size: 11px; }
@media (max-width: 900px) { .transit-grid { grid-template-columns: 1fr; } }

/* ========== ÉLŐ ADATOK OLDAL ========== */
.live-data-container {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap, 16px);
}
.live-data-container .live-tile-wrapper {
    width: 100%;
}
.live-data-container .live-transit-section {
    width: 100%;
}
.live-data-container .live-transit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tile-gap, 16px);
}
@media (max-width: 900px) { .live-data-container .live-transit-grid { grid-template-columns: 1fr; } }

/* Intelligens gyalogátkelő csempe - régi osztályok (nem használtak, de megtartva kompatibilitásra) */
.crosswalk-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    flex-shrink: 0;
}

.crosswalk-tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

.crosswalk-tile-title svg {
    width: 22px;
    height: 22px;
    fill: var(--color-violet);
}

.crosswalk-selector {
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    min-width: 200px;
}

.crosswalk-selector:focus {
    outline: none;
    border-color: var(--color-violet);
}

.crosswalk-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tile-gap);
    margin-bottom: 20px;
}

.crosswalk-stat-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.crosswalk-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-violet);
    margin-bottom: 4px;
}

.crosswalk-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crosswalk-stat-sublabel {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.crosswalk-directions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.crosswalk-direction {
    flex: 1;
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.crosswalk-direction-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crosswalk-direction-icon.north {
    background: rgba(34, 197, 94, 0.15);
}

.crosswalk-direction-icon.south {
    background: rgba(59, 130, 246, 0.15);
}

.crosswalk-direction-icon svg {
    width: 20px;
    height: 20px;
}

.crosswalk-direction-icon.north svg { stroke: var(--color-green); }
.crosswalk-direction-icon.south svg { stroke: var(--color-blue); }

.crosswalk-direction-info {
    flex: 1;
}

.crosswalk-direction-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.crosswalk-direction-value {
    font-size: 18px;
    font-weight: 600;
}

.crosswalk-direction-value.north { color: var(--color-green); }
.crosswalk-direction-value.south { color: var(--color-blue); }

.crosswalk-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.crosswalk-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.crosswalk-status-indicator.active { background: var(--color-green); }
.crosswalk-status-indicator.inactive { background: #64748b; animation: none; }
.crosswalk-status-indicator.maintenance { background: var(--color-amber); }
.crosswalk-status-indicator.error { background: var(--color-red); }

.crosswalk-status-text {
    flex: 1;
    font-size: 13px;
}

.crosswalk-status-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.crosswalk-status-badge.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
}

.crosswalk-status-badge.inactive {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.crosswalk-status-badge.maintenance {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber);
}

.crosswalk-tile-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    background: rgba(0,0,0,0.025);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .crosswalk-stats {
        grid-template-columns: 1fr;
    }
    .crosswalk-directions {
        flex-direction: column;
    }
}


/* Egységes footer struktúra */
.tile-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-icon-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.footer-icon-btn:hover {
    background: rgba(255,255,255,0.008);
    color: var(--text-secondary);
}

.footer-icon-btn svg {
    width: 14px;
    height: 14px;
}

/* Hírek csempe */
.news-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.news-tile-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.news-tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}

.news-admin-btn {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
}

.news-admin-btn:hover {
    background: rgba(59, 130, 246, 0.12);
}

.news-tile-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.news-tile-body .news-item {
    background: rgba(255,255,255,0.005);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.news-tile-body .news-item:hover {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.04);
}

.news-tile-body .news-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.news-tile-body .news-item-icon.construction {
    background: rgba(239, 68, 68, 0.1);
}

.news-tile-body .news-item-icon.maintenance {
    background: rgba(245, 158, 11, 0.1);
}

.news-tile-body .news-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.news-tile-body .news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.news-tile-body .news-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-tile-body .news-item-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.news-tile-body .news-item-location {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-tile-body .news-item:hover .news-item-location {
    animation: marquee 8s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.news-tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

/* ========== ÚTINFORM CSEMPE ========== */
.utinform-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.utinform-tile-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.utinform-tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}

.utinform-tile-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.utinform-item {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.utinform-item.critical {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

.utinform-item.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}

.utinform-item.info {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

.utinform-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.utinform-item.critical .utinform-item-icon { background: rgba(239, 68, 68, 0.2); }
.utinform-item.warning .utinform-item-icon { background: rgba(245, 158, 11, 0.2); }
.utinform-item.info .utinform-item-icon { background: rgba(59, 130, 246, 0.2); }

.utinform-item-content {
    flex: 1;
    min-width: 0;
}

.utinform-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.utinform-item-location {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utinform-item-time {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

.utinform-tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.utinform-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.utinform-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-emerald);
}

.utinform-status-dot.error { background: var(--color-red); }
.utinform-status-dot.loading { background: var(--color-amber); animation: pulse 1s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* News Admin Modal */
.news-admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.news-admin-modal.active {
    display: flex;
}

.news-admin-content {
    background: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.news-admin-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.5);
}

.news-admin-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.news-admin-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}

.news-admin-close:hover {
    color: var(--text-primary);
}

.news-admin-tabs {
    display: flex;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(30, 41, 59, 0.3);
}

.news-admin-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-family);
}

.news-admin-tab.active {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
}

.news-admin-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.admin-form-group {
    margin-bottom: 14px;
}

.admin-form-label {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.admin-form-input,
.admin-form-select {
    width: 100%;
    padding: 10px 12px;
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 8px;
    color: #e2e8f0 !important;
    font-size: 13px;
    font-family: var(--font-family);
    box-sizing: border-box;
}

.admin-form-select {
    color-scheme: dark;
    -webkit-appearance: auto;
    appearance: auto;
}

.admin-form-select option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

.admin-form-input:focus,
.admin-form-select:focus {
    outline: none;
    border-color: var(--accent-primary) !important;
}

.admin-form-input::placeholder {
    color: #64748b;
}

textarea.admin-form-input {
    resize: vertical;
}

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-save-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
}

.admin-save-btn:hover {
    background: var(--color-blue);
}

.admin-news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-news-item {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-news-info h4 {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.admin-news-info span {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-news-actions {
    display: flex;
    gap: 8px;
}

.admin-edit-btn,
.admin-delete-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-family);
}

.admin-edit-btn {
    background: rgba(96, 165, 250, 0.2);
    color: var(--accent-primary);
}

.admin-delete-btn {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-red);
}

/* Menetidő csempe */
.travel-time-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
}

.travel-time-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.travel-time-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}

.travel-edit-btn {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.travel-edit-btn:hover {
    background: rgba(255,255,255,0.015);
    color: rgba(255,255,255,0.8);
}

.travel-edit-btn svg {
    width: 16px;
    height: 16px;
}

.travel-time-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

.travel-time-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    transition: opacity 0.3s ease;
}

.travel-time-body .transport-mode-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.travel-time-body .transport-mode-selector .mode-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.02);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.travel-time-body .transport-mode-selector .mode-btn:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-secondary);
}

.travel-time-body .transport-mode-selector .mode-btn.active {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--accent-primary);
}

.travel-time-body .transport-mode-selector .mode-btn svg {
    width: 18px;
    height: 18px;
}

/* Úticél kártya */
.destination-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.destination-card:hover {
    background: rgba(255,255,255,0.01);
    border-color: rgba(255,255,255,0.06);
}

.destination-info {
    flex: 1;
    min-width: 0;
}

.destination-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destination-address {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destination-time {
    text-align: right;
    flex-shrink: 0;
}

.time-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.time-unit {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 2px;
}

.time-trend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
}

.time-trend svg {
    width: 14px;
    height: 14px;
}

.time-trend.up { color: var(--color-red); }
.time-trend.down { color: var(--color-green); }
.time-trend.stable { color: var(--text-muted); }

/* Üres slot */
.destination-card.empty {
    border-style: dashed;
    justify-content: center;
    min-height: 70px;
}

.empty-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.empty-text svg {
    width: 18px;
    height: 18px;
}

/* Footer */
.travel-time-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.travel-refresh-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.refresh-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent-primary);
}

.refresh-btn:active {
    background: rgba(96, 165, 250, 0.25);
}

.refresh-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.refresh-btn.spinning svg,
.footer-icon-btn.spinning svg {
    animation: spinIcon 0.6s linear 1;
}

/* Úticél szerkesztő modal */
.travel-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.travel-editor-modal.active {
    display: flex;
}

.travel-editor-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.travel-editor-content {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.travel-editor-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.travel-editor-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.travel-editor-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.travel-editor-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--color-red);
}

.travel-editor-close svg {
    width: 18px;
    height: 18px;
}

.travel-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.travel-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.travel-editor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

.travel-editor-item-info {
    flex: 1;
    min-width: 0;
}

.travel-editor-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.travel-editor-item-address {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.travel-editor-item-delete {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--color-red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.travel-editor-item-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.travel-editor-item-delete svg {
    width: 16px;
    height: 16px;
}

.travel-editor-add-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.travel-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input {
    padding: 10px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255,255,255,0.008);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.address-suggestions.active {
    display: block;
}

.address-suggestion-item {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.address-suggestion-item:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-primary);
}

.travel-editor-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: var(--color-green);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 8px;
}

.travel-editor-add-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.travel-editor-add-btn svg {
    width: 18px;
    height: 18px;
}

.travel-editor-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.travel-editor-cancel {
    padding: 10px 20px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.travel-editor-cancel:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-primary);
}

.travel-editor-save {
    padding: 10px 24px;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.travel-editor-save:hover {
    background: var(--color-blue);
    transform: translateY(-1px);
}

.travel-editor-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Gyors helyek */
.quick-places {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(96, 165, 250, 0.05);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 10px;
}

.quick-places-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.quick-places-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-place-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-place-btn:hover {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent-primary);
}
/* ===== SPLASH SCREEN ===== */
#splashScreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-splash);
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
#splashScreen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(96, 165, 250, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(52, 211, 153, 0.025) 0%, transparent 60%);
    pointer-events: none;
}
#splashScreen.splash-exit {
    transform: translateY(-100%);
    opacity: 0;
}
.splash-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
}
.splash-waves .line {
    stroke: #7DD3FC;
    stroke-width: 0.6;
    fill: none;
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.4));
}
.splash-waves .line-thin {
    stroke: #60A5FA;
    stroke-width: 0.3;
    fill: none;
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.3));
}
.splash-waves .node {
    fill: #93C5FD;
    filter: drop-shadow(0 0 4px rgba(147, 197, 253, 0.5));
}
.splash-waves .node-sm {
    fill: #7DD3FC;
    filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.4));
}
.splash-logo {
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 60vw;
    height: auto;
    opacity: 0;
    transform: scale(0.9);
    animation: splashFadeIn 0.6s ease-out 0.2s forwards;
}
@keyframes splashFadeIn {
    to { opacity: 1; transform: scale(1); }
}

/* ===== SXR TRAFFIC TILE ===== */

/* SXR Tile Container - crosswalk tile width (span 3 in 6-col grid) */
.sxr-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
}

/* Header */
.sxr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.sxr-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

/* Body */
.sxr-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    flex: 1;
}

/* Location Dropdown (crosswalk style) */
.sxr-dropdown {
    position: relative;
}

.sxr-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.sxr-dropdown-selected:hover {
    border-color: var(--color-blue);
    background: rgba(255, 255, 255, 0.08);
}
.sxr-dropdown-selected.open {
    border-color: var(--color-blue);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.sxr-dropdown-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.sxr-dropdown-text {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sxr-dropdown-arrow {
    color: var(--text-muted);
    transition: transform 0.2s;
}
.sxr-dropdown-arrow.open { transform: rotate(180deg); }
.sxr-dropdown-arrow svg { width: 16px; height: 16px; }

.sxr-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid var(--color-blue);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}
.sxr-dropdown-list.open { display: block; }

.sxr-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sxr-dropdown-item:last-child { border-bottom: none; }
.sxr-dropdown-item:hover { background: rgba(59, 130, 246, 0.15); }
.sxr-dropdown-item.selected { background: rgba(59, 130, 246, 0.2); }

.sxr-dropdown-item-text {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
}

.sxr-device-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
}
.sxr-device-status.online { background: var(--success-bg); color: var(--success); }
.sxr-device-status.offline { background: var(--error-bg); color: var(--error); }
.sxr-device-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Period selector row */
.sxr-period-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sxr-period-group {
    display: flex;
    background: rgba(255,255,255,0.015);
    border-radius: 8px;
    overflow: hidden;
}

.sxr-period-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.sxr-period-btn:hover {
    background: rgba(255,255,255,0.015);
    color: var(--text-primary);
}
.sxr-period-btn.active {
    background: rgba(59, 130, 246, 0.3);
    color: var(--color-blue);
}

.sxr-date-input {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 12px;
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
    color-scheme: dark;
    flex: 1;
    min-width: 0;
}
.sxr-date-input:focus { border-color: var(--accent-primary); }
.sxr-date-input::-webkit-inner-spin-button { opacity: 1; }

/* KPI Row - compact (half height) */
.sxr-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.sxr-kpi {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}
.sxr-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.sxr-kpi:hover { border-color: rgba(255,255,255,0.06); }
.sxr-kpi:hover::before { opacity: 1; }
.sxr-kpi.blue::before { background: var(--gradient-primary); }
.sxr-kpi.green::before { background: var(--gradient-secondary); }
.sxr-kpi.yellow::before { background: var(--gradient-warm); }
.sxr-kpi.purple::before { background: var(--gradient-tertiary); }

.sxr-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sxr-kpi-icon svg { width: 16px; height: 16px; }
.sxr-kpi.blue .sxr-kpi-icon { background: var(--info-bg); }
.sxr-kpi.blue .sxr-kpi-icon svg { color: var(--chart-1); stroke: var(--chart-1); fill: none; }
.sxr-kpi.green .sxr-kpi-icon { background: var(--success-bg); }
.sxr-kpi.green .sxr-kpi-icon svg { color: var(--chart-2); stroke: var(--chart-2); fill: none; }
.sxr-kpi.yellow .sxr-kpi-icon { background: var(--warning-bg); }
.sxr-kpi.yellow .sxr-kpi-icon svg { color: var(--chart-3); stroke: var(--chart-3); fill: none; }
.sxr-kpi.purple .sxr-kpi-icon { background: rgba(167,139,250,0.15); }
.sxr-kpi.purple .sxr-kpi-icon svg { color: var(--chart-5); stroke: var(--chart-5); fill: none; }

.sxr-kpi-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sxr-kpi-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}
.sxr-kpi.blue .sxr-kpi-value { color: var(--chart-1); }
.sxr-kpi.green .sxr-kpi-value { color: var(--chart-2); }
.sxr-kpi.yellow .sxr-kpi-value { color: var(--chart-3); }
.sxr-kpi.purple .sxr-kpi-value { color: var(--chart-5); }

.sxr-kpi-label { font-size: 8px; color: var(--text-secondary); font-weight: 500; line-height: 1.2; }

/* Charts - stacked vertically */
.sxr-charts-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sxr-chart-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 14px;
    overflow: hidden;
    min-width: 0;
}

.sxr-chart-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sxr-chart-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sxr-chart-icon svg { width: 14px; height: 14px; }

.sxr-chart-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sxr-chart-container {
    position: relative;
    height: 180px;
    min-width: 0;
    overflow: hidden;
}

/* Donut cards */
.sxr-donuts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sxr-donut-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 14px;
    overflow: hidden;
    min-width: 0;
}

.sxr-donut-container {
    position: relative;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sxr-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 8px;
}

.sxr-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-secondary);
}

.sxr-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Speed chart legend */
.sxr-speed-legend {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    justify-content: center;
}

/* Footer */
.sxr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.sxr-footer-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.sxr-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sxr-footer-ts {
    font-size: 11px;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 600px) {
    .sxr-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .sxr-donuts-row { grid-template-columns: 1fr; }
    .sxr-period-row { flex-wrap: wrap; }
}

/* ========== KÖZLEKEDÉSI LINKEK CSEMPE (appok + weboldalak) ========== */
.transport-links-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.transport-links-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}
.transport-links-header .tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}
.transport-links-header .tile-title .tile-title-icon {
    flex-shrink: 0;
}
.transport-links-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.transport-links-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Kártya rács */
.transport-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
/* Egyedi kártya */
.transport-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}
.transport-card:hover {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.04);
}
/* Kártya ikon — SVG fallback az img mögött */
.transport-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.transport-card-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.transport-card-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    z-index: 1;
}
/* Kártya szöveg */
.transport-card-info {
    flex: 1;
    min-width: 0;
}
.transport-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.transport-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Store badge-ek (appok csempe) */
.transport-card-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.store-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    text-decoration: none;
}
.store-badge svg {
    width: 14px;
    height: 14px;
}
.store-badge.android {
    background: rgba(61,220,132,0.15);
    color: #3ddc84;
}
.store-badge.android:hover {
    background: rgba(61,220,132,0.3);
}
.store-badge.ios {
    background: rgba(255,255,255,0.015);
    color: #ccc;
}
.store-badge.ios:hover {
    background: rgba(255,255,255,0.2);
}
/* External link nyíl (weboldalak csempe) */
a.transport-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.transport-card-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.15s;
}
.transport-card-arrow svg {
    width: 16px;
    height: 16px;
}
.transport-card-link:hover .transport-card-arrow {
    opacity: 1;
}
@media (max-width: 600px) {
    .transport-cards-grid { grid-template-columns: 1fr; }
}

/* ==================== KÖRNYEZET OLDAL ==================== */

/* Tile-title-icon: forest szín */
.tile-title-icon.forest { background: linear-gradient(135deg, var(--color-green), #16a34a); }
.tile-title-icon.violet { background: linear-gradient(135deg, var(--color-violet-dark), #7c3aed); }
.tile-title-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); }
.tile-title-icon.pink { background: linear-gradient(135deg, #ec4899, #db2777); }
.tile-title-icon.red { background: linear-gradient(135deg, var(--color-red), #dc2626); }

/* Környezet tile - egységes csempe stílus */
.env-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Prizmás felső fénycsík */
.env-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.12) 10%,
        rgba(139, 92, 246, 0.10) 25%,
        rgba(255, 255, 255, 0.09) 40%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.09) 60%,
        rgba(52, 211, 153, 0.10) 75%,
        rgba(96, 165, 250, 0.12) 90%,
        transparent 100%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

/* Felületi fényvisszaverődés overlay */
.env-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.025) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.01) 80%,
        rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

.env-tile .tile-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}
.env-tile .tile-header .tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}
.env-tile .tile-header .tile-title .tile-title-icon { flex-shrink: 0; }
.env-tile .tile-body-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.env-tile .tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.env-tile .tile-footer .timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Levegőminőség csempe --- */
.env-aqi-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.env-aqi-circle {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    border: 4px solid #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
}
.env-aqi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.env-aqi-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.env-aqi-info { flex: 1; min-width: 0; }
.env-aqi-status {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    transition: color 0.3s;
}
.env-aqi-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.env-pollutants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.env-pollutant-card {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.env-pollutant-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}
.env-pollutant-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.env-pollutant-unit {
    font-size: 10px;
    color: var(--text-muted);
}
@media (max-width: 600px) {
    .env-pollutants-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Állomásválasztó sáv */
.env-air-station-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.env-air-station-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.env-air-station-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
.env-air-station-btn.active {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.3);
    color: var(--color-green);
    font-weight: 600;
}

/* Időszak váltó (Élő / 24h / 7 nap / 30 nap) */
.env-air-range-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.env-air-range-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    flex: 1;
    text-align: center;
}
.env-air-range-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.env-air-range-btn.active {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.3);
    color: var(--color-blue);
    font-weight: 600;
}

/* Történeti chart stílusok */
.env-air-chart-header {
    margin-bottom: 8px;
}
.env-air-chart-title {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.env-air-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 600px) {
    .env-air-chart-grid { grid-template-columns: 1fr; }
}
.env-air-sparkline-card {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 8px;
}
.env-air-sparkline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.env-air-sparkline-label {
    font-size: 11px;
    font-weight: 600;
}
.env-air-sparkline-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.env-air-sparkline-value small {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
}
.env-air-sparkline-canvas {
    width: 100%;
    height: 50px;
    display: block;
}
.env-air-sparkline-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9px;
    color: var(--text-muted);
}

/* Domináns szennyező és mérési idő */
.env-aqi-dominant {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-weight: 500;
}
.env-aqi-measure-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.7;
}

/* --- UV-index és pollenjelzés --- */
.env-uv-pollen-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.env-uv-section {
    display: flex;
    align-items: center;
    gap: 20px;
}
.env-uv-gauge {
    text-align: center;
    min-width: 70px;
}
.env-uv-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.env-uv-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    transition: color 0.3s;
}
.env-uv-bar-container { flex: 1; }
.env-uv-bar {
    height: 12px;
    background: rgba(255,255,255,0.008);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    /* Gradiens háttér: zöld → sárga → narancs → piros → sötétpiros */
    background: linear-gradient(90deg, var(--color-green) 0%, var(--color-amber) 30%, #f97316 55%, var(--color-red) 75%, #7f1d1d 100%);
    opacity: 0.3;
}
.env-uv-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease, background 0.3s;
    position: absolute;
    top: 0;
    left: 0;
}
.env-uv-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 2px;
}
.env-pollen-section { }
.env-pollen-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.env-pollen-subtitle {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.7;
}
.env-pollen-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.env-pollen-item {
    flex: 1 1 auto;
    min-width: 80px;
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.env-pollen-type {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.env-pollen-level {
    font-size: 11px;
    font-weight: 600;
    transition: color 0.3s;
    white-space: nowrap;
}

/* --- Időjárási riasztás a Környezet oldalon --- */
.env-weather-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.env-weather-alert.good { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald); border: 1px solid rgba(16, 185, 129, 0.25); }
.env-weather-alert.warning { background: rgba(245, 158, 11, 0.15); color: var(--color-amber); border: 1px solid rgba(245, 158, 11, 0.3); }
.env-weather-alert.danger { background: rgba(239, 68, 68, 0.15); color: var(--color-red); border: 1px solid rgba(239, 68, 68, 0.3); }
.env-weather-alert.info { background: rgba(59, 130, 246, 0.15); color: var(--color-blue); border: 1px solid rgba(59, 130, 246, 0.3); }

/* --- Időjárás-előrejelzés 5 napos --- */
.env-forecast-days {
    display: flex;
    gap: 8px;
}
.env-forecast-day {
    flex: 1;
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.env-forecast-day:hover {
    background: rgba(255,255,255,0.008);
    border-color: rgba(255,255,255,0.15);
}
.env-forecast-day.today {
    border-color: rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.08);
}
.env-forecast-day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.env-forecast-day.today .env-forecast-day-name { color: var(--color-blue); }
.env-forecast-day-icon {
    font-size: 28px;
    margin-bottom: 6px;
    line-height: 1;
}
.env-forecast-temps {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.env-forecast-max {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.env-forecast-min {
    font-size: 14px;
    color: var(--text-muted);
}
.env-forecast-desc {
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}
.env-forecast-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .env-forecast-days { flex-wrap: wrap; }
    .env-forecast-day { min-width: calc(33% - 6px); }
}

/* --- Duna monitoring (kibővített vízszint) --- */

/* Fül-navigáció */
.ew-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ew-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ew-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.02); }
.ew-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    background: rgba(96,165,250,0.05);
}

/* Panelek */
.ew-panel { display: none; padding: 12px; }
.ew-panel.active { display: block; }

/* 2 oszlopos grid */
.ew-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .ew-grid-2col { grid-template-columns: 1fr; }
}

/* Szekció blokk */
.ew-section {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px;
}
.ew-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Betöltés placeholder */
.ew-loading {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    padding: 12px;
}

/* Aktuális mérés (megtartott régi stílusok) */
.env-water-main { text-align: center; }
.env-water-level-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}
.env-water-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.env-water-unit {
    font-size: 16px;
    color: var(--text-muted);
}
.env-water-station {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.env-water-status {
    font-size: 13px;
    font-weight: 600;
    transition: color 0.3s;
}

/* Vízszint sáv (5 zóna) */
.env-water-levels {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
}
.env-water-level-bar {
    width: 36px;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
}
.env-water-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 600;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: rgba(255,255,255,0.7);
}
.env-water-zone-flood { background: rgba(239,68,68,0.35); }
.env-water-zone-warn { background: rgba(249,115,22,0.3); }
.env-water-zone-normal { background: rgba(245,158,11,0.25); }
.env-water-zone-ok { background: rgba(34,197,94,0.3); }
.env-water-zone-low { background: rgba(59,130,246,0.2); }
.env-water-marker {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    transition: bottom 0.5s ease;
}
.env-water-bar-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    font-size: 9px;
    color: var(--text-muted);
}

/* Extra adatok (vízhőmérséklet, vízhozam) */
.ew-extra-data {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.03);
    padding-top: 6px;
}
.ew-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 3px 0;
}
.ew-data-label { color: var(--text-muted); }
.ew-data-val { font-weight: 600; color: var(--text-primary); }

/* Riasztások */
.ew-alert-box { margin-bottom: 10px; }
.ew-alert-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.12);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-green);
}
.ew-alert-status.warning {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.15);
    color: var(--color-amber);
}
.ew-alert-status.danger {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.15);
    color: var(--color-red);
}
.ew-alert-icon { font-size: 16px; }
.ew-alert-distance {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

/* Küszöb sávok (progress bar) */
.ew-threshold-bars { display: flex; flex-direction: column; gap: 6px; }
.ew-tbar { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.ew-tbar-label { min-width: 72px; color: var(--text-muted); white-space: nowrap; }
.ew-tbar-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
}
.ew-tbar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-green), var(--color-amber));
    transition: width 0.5s ease;
    width: 0%;
}
.ew-tbar-pct { min-width: 30px; text-align: right; color: var(--text-muted); font-weight: 600; }

/* Közeli mérőállomások táblázat */
.ew-stations-row { margin-top: 0; }
.ew-stations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ew-stations-table th {
    text-align: left;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ew-stations-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    color: var(--text-secondary);
}
.ew-stations-table tr.ew-current-station td {
    color: var(--text-primary);
    font-weight: 600;
    background: rgba(96,165,250,0.06);
}
.ew-stations-table .ew-trend-up { color: var(--color-red); }
.ew-stations-table .ew-trend-down { color: var(--color-emerald); }
.ew-stations-table .ew-trend-flat { color: var(--text-muted); }

/* Duna mini-térkép */
.ew-map-section { min-height: 160px; }
.ew-map-container {
    width: 100%;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Grafikon fül */
.ew-chart-range {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.ew-range-btn {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.ew-range-btn:hover { background: rgba(255,255,255,0.03); }
.ew-range-btn.active {
    background: rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.2);
    color: #60a5fa;
}
.ew-chart-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}
.ew-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.ew-chart-sm { height: 140px; }
.ew-chart-sm canvas { width: 100% !important; height: 100% !important; }

/* Előrejelzés sor */
.ew-forecast-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}
.ew-fc-day {
    flex: 1;
    min-width: 70px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.03);
}
.ew-fc-day-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.ew-fc-day-val { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 4px 0; }
.ew-fc-day-trend { font-size: 10px; }
.ew-fc-day-alert { font-size: 12px; margin-top: 2px; }
.ew-fc-estimated { opacity: 0.6; border-style: dashed; }
.ew-fc-estimated .ew-fc-day-val { font-style: italic; }
.ew-fc-source { width: 100%; text-align: right; font-size: 9px; color: var(--text-muted); padding-top: 4px; }

/* Aszály fül */
.ew-drought-index { text-align: center; }
.ew-drought-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}
.ew-drought-bar {
    position: relative;
    margin: 8px 0;
}
.ew-drought-scale {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    height: 18px;
}
.ew-drought-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.ew-dz-none { background: rgba(34,197,94,0.35); }
.ew-dz-mild { background: rgba(245,158,11,0.3); }
.ew-dz-moderate { background: rgba(249,115,22,0.35); }
.ew-dz-severe { background: rgba(239,68,68,0.35); }
.ew-dz-extreme { background: rgba(185,28,28,0.4); }
.ew-drought-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 24px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    transition: left 0.5s ease;
    left: 0%;
}
.ew-drought-label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
    transition: color 0.3s;
}
.ew-drought-sub { margin-top: 8px; }

/* Talajnedvesség táblázat */
.ew-soil-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ew-soil-table th {
    text-align: left;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ew-soil-table td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    color: var(--text-secondary);
}
.ew-soil-avg { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.03); }

/* Csapadék */
.ew-precip-diff .ew-data-val { font-weight: 700; }

/* Hírek fül */
.ew-warnings { margin-bottom: 12px; }
.ew-news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ew-news-item {
    padding: 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.03);
    transition: background 0.2s;
}
.ew-news-item:hover { background: rgba(255,255,255,0.02); }
.ew-news-fetch-ts {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.01);
    border-radius: 4px;
    text-align: right;
}
.ew-news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.ew-news-date {
    font-size: 10px;
    color: #60a5fa;
    font-weight: 600;
}
.ew-news-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.ew-news-title:hover { color: #60a5fa; }
.ew-news-source {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    padding: 1px 6px;
    border-radius: 3px;
}
.ew-news-link {
    float: right;
    font-size: 10px;
    color: #60a5fa;
    text-decoration: none;
}
.ew-news-link:hover { text-decoration: underline; }

/* --- Zajszint térkép --- */
.env-noise-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.env-noise-map-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.02);
    flex: 1;
}
.env-noise-map-placeholder {
    min-height: 280px;
    height: 100%;
    background: rgba(0,0,0,0.1);
}
.env-noise-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}
.env-noise-legend-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.env-noise-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.env-noise-zone {
    display: flex;
    align-items: center;
    gap: 5px;
}
.env-noise-zone-color {
    width: 14px;
    height: 10px;
    min-width: 14px;
    border-radius: 2px;
}
.env-noise-zone-label {
    font-size: 11px;
    color: var(--text-secondary);
}
.env-noise-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.env-noise-src-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.env-noise-src-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.env-noise-summary p {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}
.env-noise-district-label {
    background: none !important;
    border: none !important;
}
.env-noise-district-label span {
    font-size: 10px;
    font-weight: 600;
    color: #e2e8f0;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* --- Zöldterületek --- */
.env-green-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.env-green-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.env-green-stat {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.env-green-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-green);
    line-height: 1.2;
}
.env-green-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}
.env-green-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.env-green-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: rgba(255,255,255,0.01);
    border-radius: 6px;
}
.env-green-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--color-green);
}
.env-green-dot.sty { background: var(--color-blue); }
.env-green-dot.nat { background: #a855f7; }
.env-green-dot.trl { background: var(--color-amber); }
.env-green-category {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-top: 4px;
}
.env-green-category:first-child { margin-top: 0; padding-top: 0; }
@media (max-width: 600px) {
    .env-green-stats { grid-template-columns: 1fr; }
}

/* --- Hulladékgyűjtési naptár --- */
.wc-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    overflow-x: auto;
}
.wc-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.wc-tab:hover { color: var(--text-secondary); }
.wc-tab.active {
    color: var(--color-amber);
    border-bottom-color: var(--color-amber);
}
.wc-panel { display: none; padding: 12px; }
.wc-panel.active { display: block; }

/* Hónap navigáció */
.wc-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.wc-month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.wc-nav-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.wc-nav-btn:hover { background: rgba(255,255,255,0.08); }

/* Naptár rács */
.wc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.wc-grid-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0;
}
.wc-day {
    position: relative;
    text-align: center;
    font-size: 11px;
    padding: 5px 2px;
    border-radius: 5px;
    color: var(--text-secondary);
    min-height: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background 0.15s;
}
.wc-day.wc-empty { opacity: 0; pointer-events: none; }
.wc-day.wc-other-month { opacity: 0.25; }
.wc-day.wc-today {
    outline: 2px solid var(--color-amber);
    outline-offset: -1px;
    font-weight: 700;
    color: var(--text-primary);
}
.wc-day.wc-weekend { color: var(--text-muted); opacity: 0.5; }

/* Színkódolt háttér — vegyes/szelektív */
.wc-day.wc-komm-lakotelep { background: rgba(212,160,23,0.35); color: var(--text-primary); }
.wc-day.wc-komm-csaladi { background: rgba(41,128,185,0.35); color: var(--text-primary); }
.wc-day.wc-szelektiv1 { background: rgba(230,126,34,0.45); color: var(--text-primary); }
.wc-day.wc-szelektiv2 { background: rgba(93,173,226,0.40); color: var(--text-primary); }

/* Színkódolt háttér — zöldhulladék */
.wc-day.wc-zold1 { background: rgba(27,122,27,0.45); color: var(--text-primary); }
.wc-day.wc-zold2 { background: rgba(39,174,96,0.40); color: var(--text-primary); }
.wc-day.wc-zold3 { background: rgba(125,206,160,0.35); color: var(--text-primary); }

/* Szelektív péntek overlay jelölő — kommunális + szelektív */
.wc-day.wc-szelektiv1.wc-komm-lakotelep,
.wc-day.wc-szelektiv2.wc-komm-lakotelep { background: none; }
.wc-day.wc-szelektiv1.wc-komm-lakotelep {
    background: linear-gradient(135deg, rgba(212,160,23,0.30) 50%, rgba(230,126,34,0.45) 50%);
}
.wc-day.wc-szelektiv2.wc-komm-lakotelep {
    background: linear-gradient(135deg, rgba(212,160,23,0.30) 50%, rgba(93,173,226,0.40) 50%);
}

/* Pont jelölők a cella alján */
.wc-dots {
    display: flex;
    gap: 2px;
    justify-content: center;
}
.wc-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Jelmagyarázat */
.wc-legend {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
}
.wc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Hulladékudvar (depot) panel */
.env-waste-depot { padding: 4px 0; }
.env-waste-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.env-waste-depot-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.env-waste-depot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.env-waste-depot-item svg { color: var(--text-muted); }
.wc-depot-note {
    margin-top: 16px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
}

/* ========== IVÓVÍZMINŐSÉG CSEMPE ========== */

/* Tab navigáció (ew-tabs mintájára) */
.wq-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    overflow-x: auto;
}
.wq-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.wq-tab:hover { color: var(--text-secondary); }
.wq-tab.active {
    color: #22d3ee;
    border-bottom-color: #22d3ee;
}

/* Tab panelek */
.wq-panel { display: none; padding: 12px; }
.wq-panel.active { display: block; }

/* Áttekintés: státusz badge */
.wq-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    margin-bottom: 12px;
}
.wq-status-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.wq-status-text {
    font-size: 13px;
    font-weight: 600;
    color: #4ade80;
}
.wq-status-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Áttekintés: összefoglaló kártya-rács */
.wq-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.wq-summary-card {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 10px 12px;
}
.wq-summary-card-title {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}
.wq-summary-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wq-summary-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.wq-summary-card-pct {
    font-size: 13px;
    font-weight: 600;
}
.wq-summary-card-detail {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Áttekintés: meta infó */
.wq-meta-section {
    background: rgba(255,255,255,0.005);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
}
.wq-meta-row {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.wq-meta-row + .wq-meta-row { margin-top: 4px; }
.wq-meta-label {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 90px;
}

/* Paraméter táblázat */
.wq-param-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.wq-param-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    background: rgba(15,15,30,0.95);
    z-index: 2;
}
.wq-param-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.15s;
}
.wq-param-table tbody tr:hover {
    background: rgba(255,255,255,0.015);
}
.wq-param-table td {
    padding: 5px 6px;
    color: var(--text-secondary);
    vertical-align: middle;
}
.wq-param-table td:first-child {
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}
.wq-param-table td:first-child:hover {
    color: #22d3ee;
    text-decoration: underline;
}
.wq-param-table .wq-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Megfelelőségi szín-pont */
.wq-compliance-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.wq-compliance-dot.green { background: var(--color-green); }
.wq-compliance-dot.yellow { background: #eab308; }
.wq-compliance-dot.red { background: var(--color-red); }
.wq-compliance-dot.gray { background: #6b7280; }

/* Kémiai alszekció cím */
.wq-subsection-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 0;
}
.wq-subsection-title:first-child { padding-top: 0; }

/* Info popup (paraméter leírás) */
.wq-info-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    max-width: 380px;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(20, 20, 40, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overscroll-behavior: contain;
}
.wq-info-popup.visible { display: block; }
.wq-info-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-right: 20px;
}
.wq-info-popup-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.wq-info-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
}
.wq-info-popup-close:hover { color: var(--text-primary); }
.wq-info-popup-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: var(--text-muted);
}

/* Kifogás kiemelés */
.wq-param-table tbody tr.wq-warning {
    background: rgba(234, 179, 8, 0.04);
}
.wq-param-table tbody tr.wq-warning:hover {
    background: rgba(234, 179, 8, 0.07);
}

/* ========== INTERAKTÍV NAPTÉRKÉP CSEMPE ========== */

/* Fő body: térkép + overlay sidebar */
.solar-map-body {
    display: flex !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
.solar-map-wrapper {
    flex: 1;
    margin: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 0;
    position: relative;
}
#solar-map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#solar-map-container .leaflet-control-layers {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    color: #334155;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#solar-map-container .leaflet-control-layers label { color: #334155; }
#solar-map-container .leaflet-control-layers-toggle { width: 30px; height: 30px; }

/* Jelmagyarázat overlay a térképen (világos térkép) */
.solar-legend {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 11px;
    color: #475569;
    pointer-events: auto;
}
.solar-legend h4 {
    font-size: 11px;
    color: #334155;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.solar-legend-bar {
    width: 160px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--color-red) 0%, #fb923c 25%, var(--color-amber) 50%, #84cc16 75%, var(--color-green) 100%);
}
.solar-legend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 9px;
}

/* Napenergia térkép városrész címkék (világos térkép → sötét szöveg) */
.solar-district-label {
    background: none !important;
    border: none !important;
}
.solar-district-label span {
    font-size: 10px;
    font-weight: 600;
    color: #334155;
    text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.7);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Overlay sidebar */
.solar-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 85%;
    height: 100%;
    background: rgba(15, 15, 30, 0.92);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.solar-sidebar.open {
    transform: translateX(0);
}
.solar-sidebar::-webkit-scrollbar { width: 6px; }
.solar-sidebar::-webkit-scrollbar-track { background: transparent; }
.solar-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* Tab bar */
.solar-tab-bar {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.solar-tab-btn {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.solar-tab-btn:hover { color: var(--text-secondary); }
.solar-tab-btn.active { color: var(--color-amber); border-bottom-color: var(--color-amber); }

/* Tab content */
.solar-tab-content { display: none; padding: 16px; flex: 1; overflow-y: auto; }
.solar-tab-content.active { display: block; }

/* Click hint */
.solar-click-hint {
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
.solar-click-hint p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Info sorok */
.solar-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
}
.solar-info-row .si-label { color: var(--text-muted); }
.solar-info-row .si-value { color: var(--text-primary); font-weight: 600; }
.solar-info-row .si-value.excellent { color: var(--color-green); }
.solar-info-row .si-value.good { color: var(--color-amber); }
.solar-info-row .si-value.medium { color: #fb923c; }

/* Eredmény kártya */
.solar-result-card {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 14px;
    margin: 10px 0;
}
.solar-big-num { font-size: 26px; font-weight: 700; color: var(--color-amber); line-height: 1; }
.solar-big-unit { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.solar-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.solar-result-item {
    text-align: center;
    padding: 8px 4px;
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 8px;
}
.solar-result-item .sr-val { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.solar-result-item .sr-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Gauge bar */
.solar-gauge {
    position: relative;
    width: 100%;
    height: 20px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    margin: 10px 0 4px;
    overflow: hidden;
}
.solar-gauge-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s ease;
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-amber) 40%, var(--color-green) 70%, var(--color-emerald) 100%);
}
.solar-gauge-marker {
    position: absolute;
    top: -1px;
    width: 3px;
    height: 22px;
    background: #fff;
    border-radius: 2px;
    transition: left 0.8s ease;
}

/* Havi grafikon */
.solar-month-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    margin: 10px 0 2px;
}
.solar-month-bar {
    flex: 1;
    background: linear-gradient(to top, var(--color-amber), #fbbf24);
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: height 0.5s ease;
    min-height: 3px;
    cursor: pointer;
}
.solar-month-bar:hover { opacity: 0.8; }
.solar-month-bar .solar-bar-tip {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,15,30,0.95);
    color: var(--text-primary);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 9px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}
.solar-month-bar:hover .solar-bar-tip { opacity: 1; }
.solar-month-labels {
    display: flex;
    gap: 3px;
}
.solar-month-labels span {
    flex: 1;
    text-align: center;
    font-size: 8px;
    color: var(--text-muted);
}

/* Panel szekciók */
.solar-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.solar-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.solar-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Calculator form */
.solar-calc-group { margin-bottom: 10px; }
.solar-calc-group label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.solar-calc-input,
.solar-calc-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.solar-calc-input:focus,
.solar-calc-select:focus { border-color: var(--color-amber); }
.solar-calc-select { appearance: auto; }
.solar-calc-select option {
    background: #1e293b;
    color: #e2e8f0;
}
.solar-btn-calc {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, var(--color-amber), #d97706);
    color: #0f172a;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    margin-top: 4px;
}
.solar-btn-calc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.solar-btn-calc:active { transform: translateY(0); }
.solar-btn-calc:disabled { opacity: 0.6; cursor: not-allowed; }

/* Loading spinner */
.solar-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--color-amber);
    border-radius: 50%;
    animation: solar-spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes solar-spin { to { transform: rotate(360deg); } }

/* ========== MOL DUNAI FINOMÍTÓ CSEMPE ========== */
.mol-report-body { padding: 0; }
.mol-report-tabs {
    display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 12px; background: rgba(0,0,0,0.08);
}
.mol-report-tab {
    padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--text-muted);
    background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.mol-report-tab:hover { color: var(--text-primary); }
.mol-report-tab.active { color: var(--color-amber); border-bottom-color: var(--color-amber); }
.mol-report-content { display: none; padding: 12px; }
.mol-report-content.active { display: block; }

/* KPI grid */
.mol-kpi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.mol-kpi-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 10px 12px;
}
.mol-kpi-value { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.mol-kpi-unit { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.mol-kpi-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.mol-kpi-change { font-size: 10px; margin-top: 4px; font-weight: 500; }
.mol-kpi-change.down { color: var(--color-green); }
.mol-kpi-change.up { color: var(--color-red); }
.mol-kpi-change.neutral { color: var(--text-muted); }

/* Group emissions bar chart */
.mol-section-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mol-gb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mol-gb-label { width: 36px; font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.mol-gb-bars { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mol-gb-bar {
    height: 14px; border-radius: 3px; display: flex; align-items: center;
    padding-left: 6px; min-width: 2px; transition: width 0.5s ease;
}
.mol-gb-bar span { font-size: 9px; color: rgba(255,255,255,0.8); white-space: nowrap; }
.mol-gb-bar-2024 { background: var(--color-amber); }
.mol-gb-bar-2023 { background: rgba(255,255,255,0.12); }
.mol-gb-change { width: 52px; font-size: 10px; font-weight: 600; text-align: right; flex-shrink: 0; }
.mol-gb-change.down { color: var(--color-green); }
.mol-gb-change.up { color: var(--color-red); }
.mol-gb-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 10px; color: var(--text-muted); }
.mol-gb-leg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.mol-gb-leg-dot.leg-2024 { background: var(--color-amber); }
.mol-gb-leg-dot.leg-2023 { background: rgba(255,255,255,0.12); }

/* Shared chart legend */
.mol-chart-legend {
    display: flex; gap: 14px; margin-bottom: 8px; font-size: 10px; color: var(--text-muted);
}
.mol-chart-leg-item { display: flex; align-items: center; gap: 4px; }
.mol-chart-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Emissions & Waste charts use mol-gb-* shared bar styles */
.mol-emissions-chart { margin-bottom: 14px; }

/* Emissions table */
.mol-emissions-table-wrap { overflow-x: auto; }
.mol-emissions-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mol-emissions-table th {
    text-align: left; padding: 6px 8px; font-weight: 600; color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 10px; text-transform: uppercase;
}
.mol-emissions-table td { padding: 5px 8px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.04); }
.mol-emissions-table td:first-child { color: var(--text-secondary); font-weight: 500; max-width: 180px; }
.mol-emissions-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mol-emissions-table th:not(:first-child) { text-align: right; }
.mol-emissions-total td { font-weight: 700; color: var(--text-primary); border-top: 2px solid rgba(255,255,255,0.15); }

/* Waste chart uses mol-gb-* shared bar styles */
.mol-waste-chart { margin-bottom: 14px; }

/* Waste info stats */
.mol-waste-info { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); }
.mol-waste-stat { display: flex; align-items: center; gap: 6px; }
.mol-waste-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.mol-waste-dot.hazardous { background: var(--color-red); }
.mol-waste-dot.non-hazardous { background: var(--color-blue); }

/* Immission stations */
.mol-imm-station { margin-bottom: 14px; }
.mol-imm-station-name { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.mol-imm-station-bars { display: flex; flex-direction: column; gap: 4px; }
.mol-imm-row { display: flex; align-items: center; gap: 8px; }
.mol-imm-label { width: 50px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.mol-imm-bar-wrap {
    flex: 1; height: 14px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden;
}
.mol-imm-bar { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.mol-imm-val { width: 90px; font-size: 10px; color: var(--text-muted); text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mol-imm-limit { color: rgba(255,255,255,0.3); }
.mol-immission-note {
    margin-top: 12px; font-size: 11px; color: var(--text-muted); padding: 8px 10px;
    background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15); border-radius: 6px;
}

@media (max-width: 768px) {
    .mol-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== MET DUNAMENTI ERŐMŰ CSEMPE ========== */
.dert-report-body { padding: 0; }
.dert-report-tabs {
    display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 12px; background: rgba(0,0,0,0.08);
}
.dert-report-tab {
    padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--text-muted);
    background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.dert-report-tab:hover { color: var(--text-primary); }
.dert-report-tab.active { color: #0ea5e9; border-bottom-color: #0ea5e9; }
.dert-report-content { display: none; padding: 12px; }
.dert-report-content.active { display: block; }

/* DERT bar colors (sky theme) */
.dert-bar-2024 { background: #0ea5e9; }
.dert-bar-2023 { background: rgba(255,255,255,0.12); }
.dert-leg-2024 { background: #0ea5e9; }
.dert-leg-2023 { background: rgba(255,255,255,0.12); }

/* Scope breakdown strip */
.dert-scope-strip {
    display: flex; height: 20px; border-radius: 6px; overflow: hidden; gap: 1px;
}
.dert-scope-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: rgba(255,255,255,0.8); min-width: 2px;
    transition: width 0.5s ease;
}

/* BESS timeline */
.dert-tl-item {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dert-tl-item:last-child { border-bottom: none; }
.dert-tl-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #0ea5e9;
    flex-shrink: 0; margin-top: 4px;
}
.dert-tl-item:last-child .dert-tl-dot { background: var(--color-green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.dert-tl-content { flex: 1; }
.dert-tl-date { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.dert-tl-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dert-tl-cap {
    font-weight: 400; font-size: 11px; color: #0ea5e9;
    background: rgba(14,165,233,0.1); padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.dert-tl-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* G3 specs grid */
.dert-specs-grid { display: flex; flex-direction: column; gap: 4px; }
.dert-spec-row {
    display: flex; gap: 8px; padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dert-spec-row:last-child { border-bottom: none; }
.dert-spec-label {
    width: 100px; font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0;
}
.dert-spec-value { font-size: 11px; color: var(--text-muted); }

/* Info note */
.dert-note {
    font-size: 10px; color: var(--text-muted); padding: 6px 8px;
    background: rgba(14,165,233,0.06); border: 1px solid rgba(14,165,233,0.12);
    border-radius: 6px; line-height: 1.4;
}

/* ========== VÁROSI ENERGIAFELHASZNÁLÁS CSEMPE ========== */
.nrg-body { padding: 0; }
.nrg-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nrg-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.nrg-tab:hover { color: var(--text-secondary); }
.nrg-tab.active {
    color: #a3e635;
    border-bottom-color: #a3e635;
}
.nrg-panel {
    display: none;
    padding: 12px;
}
.nrg-panel.active { display: block; }

/* KPI sor */
.nrg-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.nrg-kpi {
    flex: 1;
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.nrg-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.nrg-kpi-unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}
.nrg-kpi-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

/* Szektor sávdiagramok */
.nrg-sector-title, .nrg-daily-chart-title, .nrg-mix-title, .nrg-balance-title,
.nrg-price-chart-title, .nrg-carbon-bar-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.nrg-sector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.nrg-sector-name {
    font-size: 11px;
    color: var(--text-secondary);
    width: 85px;
    flex-shrink: 0;
}
.nrg-sector-bar {
    flex: 1;
    height: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    overflow: hidden;
}
.nrg-sector-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.nrg-sector-fill.nrg-residential { background: #60a5fa; }
.nrg-sector-fill.nrg-commercial  { background: var(--color-violet); }
.nrg-sector-fill.nrg-industrial  { background: var(--color-amber); }
.nrg-sector-fill.nrg-lighting    { background: #fbbf24; }
.nrg-sector-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    width: 52px;
    text-align: right;
    flex-shrink: 0;
}

/* Napi terhelési görbe (mini bar chart) */
.nrg-daily-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    margin-top: 4px;
}
.nrg-hour-bar {
    flex: 1;
    background: rgba(163,230,53,0.3);
    border-radius: 2px 2px 0 0;
    min-width: 3px;
    transition: height 0.4s ease;
    position: relative;
}
.nrg-hour-bar.nrg-now {
    background: #a3e635;
}
.nrg-hour-bar:hover::after {
    content: attr(data-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-primary);
    background: rgba(0,0,0,0.7);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* Termelési mix sávok */
.nrg-mix-bars {
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.nrg-mix-seg {
    height: 100%;
    transition: width 0.6s ease;
    min-width: 1px;
    position: relative;
}
.nrg-mix-seg:hover { opacity: 0.8; }
.nrg-mix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 14px;
}
.nrg-mix-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-secondary);
}
.nrg-mix-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Energiamérleg */
.nrg-balance-section {
    background: rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 10px 12px;
}
.nrg-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 11px;
}
.nrg-balance-label { color: var(--text-secondary); }
.nrg-balance-val { font-weight: 600; color: var(--text-primary); }
.nrg-balance-row.nrg-balance-total {
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: 4px;
    padding-top: 8px;
}
.nrg-balance-row.nrg-balance-total .nrg-balance-val { color: #a3e635; font-size: 13px; }

/* Ár chart */
.nrg-price-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    margin: 4px 0 10px;
}
.nrg-price-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-width: 3px;
    transition: height 0.4s ease;
    position: relative;
}
.nrg-price-bar.nrg-now { opacity: 1; }
.nrg-price-bar:hover::after {
    content: attr(data-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-primary);
    background: rgba(0,0,0,0.7);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}
.nrg-price-note, .nrg-carbon-note {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 6px;
    line-height: 1.4;
}

/* Karbon sávok */
.nrg-carbon-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}
.nrg-carbon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nrg-carbon-name {
    font-size: 10px;
    color: var(--text-secondary);
    width: 70px;
    flex-shrink: 0;
}
.nrg-carbon-sbar {
    flex: 1;
    height: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
    overflow: hidden;
}
.nrg-carbon-sfill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.nrg-carbon-sval {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    width: 45px;
    text-align: right;
    flex-shrink: 0;
}

/* ========== SZÉLMOZGÁS TÉRKÉP (Windy.com embed) ========== */
.env-wind-map-body {
    display: flex !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
.env-wind-map-wrapper {
    flex: 1;
    margin: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 0;
    position: relative;
}
.env-wind-map-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* =====================================================================
   ÖNKORMÁNYZAT OLDAL
   ===================================================================== */

/* --- Gov tile: env-tile mintájára --- */
.gov-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.gov-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 189, 248, 0.12) 10%,
        rgba(139, 92, 246, 0.10) 25%,
        rgba(255, 255, 255, 0.09) 40%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.09) 60%,
        rgba(52, 211, 153, 0.10) 75%,
        rgba(56, 189, 248, 0.12) 90%,
        transparent 100%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}
.gov-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.025) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.01) 80%,
        rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 1;
}
.gov-tile .tile-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}
.gov-tile .tile-header .tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}
.gov-tile .tile-header .tile-title .tile-title-icon { flex-shrink: 0; }
.gov-tile .tile-body-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}
.gov-tile .tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gov-tile .tile-footer .timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

/* =====================================================================
   BATTANET TILE — gov-tile mintájára
   ===================================================================== */

.battanet-tile {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 var(--tile-thickness) 0 0 rgba(10, 10, 25, 0.14),
        0 calc(var(--tile-thickness) + 1px) 0 0 rgba(255, 255, 255, 0.008),
        0 calc(var(--tile-thickness) + 6px) 16px rgba(0, 0, 0, 0.07);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.battanet-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 189, 248, 0.12) 10%,
        rgba(139, 92, 246, 0.10) 25%,
        rgba(255, 255, 255, 0.09) 40%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.09) 60%,
        rgba(52, 211, 153, 0.10) 75%,
        rgba(56, 189, 248, 0.12) 90%,
        transparent 100%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}
.battanet-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.025) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.01) 80%,
        rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 1;
}
.battanet-tile .tile-header {
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
}
.battanet-tile .tile-header .tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
}
.battanet-tile .tile-header .tile-title .tile-title-icon { flex-shrink: 0; }
.battanet-tile .tile-body-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.battanet-tile .tile-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.025);
    height: 44px;
    min-height: 44px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.battanet-tile .tile-footer .timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Battanet kártya tartalom (bn-*) --- */
.bn-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bn-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.bn-page-content {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
}
.bn-page-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bn-page-content a:hover {
    opacity: 0.85;
}
.bn-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 6px 0;
}
.bn-page-content p {
    margin: 0 0 8px 0;
}
.bn-page-content ul, .bn-page-content ol {
    margin: 0 0 8px 0;
    padding-left: 20px;
}
.bn-page-content h1, .bn-page-content h2, .bn-page-content h3, .bn-page-content h4 {
    color: var(--text-primary);
    margin: 12px 0 6px 0;
    font-size: 14px;
    font-weight: 600;
}
.bn-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.bn-card {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.005);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.bn-card:hover {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.04);
}
.bn-card-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
}
.bn-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bn-card-body {
    flex: 1;
    min-width: 0;
}
.bn-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 3px;
}
.bn-card-excerpt {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bn-card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Battanet statikus tartalom kártyák */
.bn-static-content {
    padding: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.bn-static-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}
.bn-static-content p {
    margin: 0 0 8px 0;
}
.bn-info-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.bn-info-card .bn-info-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.bn-info-card .bn-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Gov tabs --- */
.gov-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    overflow-x: auto;
}
.gov-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.gov-tab:hover { color: var(--text-secondary); }
.gov-tab.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

/* --- Gov panels --- */
.gov-panel { display: none; }
.gov-panel.active { display: block; }
#gov-panel-evk-map.active { display: flex; flex-direction: column; height: 100%; }
#gov-panel-evk-map .evk-map-wrapper { flex: 1; }

/* --- Gov sections --- */
.gov-section {
    margin-bottom: 16px;
}
.gov-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Person cards --- */
.gov-persons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.gov-person-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s;
}
.gov-person-card:hover {
    background: rgba(255,255,255,0.03);
}
.gov-mayor-card {
    background: rgba(56, 189, 248, 0.04);
    border-color: rgba(56, 189, 248, 0.10);
}
.gov-mayor-card:hover {
    background: rgba(56, 189, 248, 0.06);
}
.gov-person-card-sm {
    padding: 10px;
}
.gov-person-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gov-person-avatar svg {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}
.gov-mayor-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: rgba(56, 189, 248, 0.08);
}
.gov-mayor-avatar svg {
    width: 28px;
    height: 28px;
    color: #38bdf8;
}
.gov-person-avatar-sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gov-person-avatar-sm svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}
.gov-person-info {
    flex: 1;
    min-width: 0;
}
.gov-person-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.gov-person-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.gov-person-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.gov-detail-label {
    color: rgba(255,255,255,0.4);
}
.gov-person-bio {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
    opacity: 0.8;
}

/* --- Party badge --- */
.gov-party-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

/* --- Composition bars --- */
.gov-composition {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gov-comp-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gov-comp-label {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 120px;
    flex-shrink: 0;
}
.gov-comp-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
}
.gov-comp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.gov-comp-pct {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

/* --- Committee cards --- */
.gov-committee-card {
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 10px;
    overflow: hidden;
}
.gov-committee-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.gov-committee-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gov-committee-icon svg {
    width: 18px;
    height: 18px;
    color: #38bdf8;
}
.gov-committee-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.gov-committee-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}
.gov-committee-body {
    padding: 10px 14px;
}
.gov-committee-row {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.gov-committee-scope {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* --- Nationality cards --- */
.gov-nationality-card {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 8px;
}
.gov-nationality-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.gov-nationality-members {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Office info --- */
.gov-office-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
}
.gov-office-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.gov-office-row svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* --- Office hours --- */
.gov-office-hours {
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.gov-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-size: 12px;
}
.gov-hours-row:last-child { border-bottom: none; }
.gov-hours-day {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 80px;
}
.gov-hours-time {
    color: var(--text-muted);
}
.gov-hours-closed {
    opacity: 0.5;
}

/* --- Departments --- */
.gov-departments {
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.gov-dept-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-size: 12px;
}
.gov-dept-row:last-child { border-bottom: none; }
.gov-dept-name {
    color: var(--text-secondary);
    font-weight: 500;
}
.gov-dept-phone {
    color: var(--text-muted);
    font-family: 'Inter', monospace;
}

/* --- Web link --- */
.gov-web-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.04);
    border: 1px solid rgba(56, 189, 248, 0.10);
    color: #38bdf8;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}
.gov-web-link:hover {
    background: rgba(56, 189, 248, 0.08);
}
.gov-web-link svg {
    flex-shrink: 0;
}

/* --- Kattintható avatárok --- */
a.gov-person-avatar,
a.gov-mayor-avatar,
a.gov-person-avatar-sm {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
a.gov-person-avatar:hover,
a.gov-person-avatar-sm:hover {
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}
a.gov-mayor-avatar:hover {
    background: rgba(56, 189, 248, 0.14);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

/* --- Profil név linkek --- */
.gov-person-name a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}
.gov-person-name a:hover {
    color: #38bdf8;
}

/* --- Committee badges --- */
.gov-committee-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.gov-comm-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-muted);
    letter-spacing: 0.2px;
}
.gov-comm-badge.gov-comm-chair {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    font-weight: 600;
}

/* --- Avatar fénykép --- */
.gov-person-avatar img,
.gov-mayor-avatar img,
.gov-person-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
a.gov-person-avatar img,
a.gov-mayor-avatar img,
a.gov-person-avatar-sm img {
    border-radius: 50%;
}

/* --- EVK választókörzeti térkép --- */
.evk-map-wrapper {
    margin: 8px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: calc(100% - 16px);
    min-height: 350px;
}
#evk-map-container {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 1;
}

/* EVK fénykép marker */
.evk-photo-marker {
    background: none !important;
    border: none !important;
}
.evk-marker-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.evk-marker-ring:hover {
    transform: scale(1.15);
}
.evk-marker-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.evk-marker-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 1px 5px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* EVK popup */
.evk-leaflet-popup .leaflet-popup-content-wrapper {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #e2e8f0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
}
.evk-leaflet-popup .leaflet-popup-tip {
    background: rgba(15, 23, 42, 0.95);
}
.evk-leaflet-popup .leaflet-popup-content {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
.evk-popup {
    padding: 12px;
    min-width: 200px;
}
.evk-popup-header {
    padding: 4px 0 8px 10px;
    font-size: 13px;
    margin-bottom: 10px;
    color: #f1f5f9;
}
.evk-popup-person {
    display: flex;
    gap: 10px;
    align-items: center;
}
.evk-popup-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.evk-popup-info {
    flex: 1;
    min-width: 0;
}
.evk-popup-name {
    font-size: 13px;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 2px;
}
.evk-popup-name a {
    color: #38bdf8;
    text-decoration: none;
}
.evk-popup-name a:hover {
    text-decoration: underline;
}
.evk-popup-title {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.evk-popup-party {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
}

/* EVK jelmagyarázat */
.evk-legend {
    background: rgba(15, 23, 42, 0.90);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    color: #e2e8f0;
    font-size: 11px;
    max-width: 240px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.evk-legend-title {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.evk-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 10px;
    color: #cbd5e1;
}
.evk-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.8;
}
.evk-legend-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   KSH ADATTÁR CSEMPÉK
   ===================================================================== */

.ksh-tile .ksh-body { padding: 12px; }
.ksh-tile .ksh-body:has(.ksh-tabs) { padding: 0; }

/* --- KSH Tab rendszer (nrg-tab mintájára) --- */
.ksh-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ksh-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ksh-tab:hover { color: var(--text-secondary); }
.ksh-tab.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}
.ksh-panel {
    display: none;
    padding: 12px;
}
.ksh-panel.active { display: block; }

/* --- KSH KPI rács --- */
.ksh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.ksh-kpi-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.ksh-kpi {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
}
.ksh-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.ksh-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.ksh-kpi-sub {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 2px;
}
.ksh-kpi-change {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}
.ksh-kpi-change.pos { color: var(--color-green); }
.ksh-kpi-change.neg { color: var(--color-red); }

/* --- KSH Sávdiagram sorok --- */
.ksh-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ksh-bar-label {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}
.ksh-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    overflow: hidden;
}
.ksh-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.ksh-bar-val {
    font-size: 11px;
    color: var(--text-primary);
    min-width: 90px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- KSH Népesség-sorok (vízszintes sávdiagram) --- */
.ksh-chart-container { padding: 0; }
.ksh-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ksh-pop-year {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
    font-weight: 600;
}
.ksh-pop-bar-track {
    flex: 1;
    height: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    overflow: hidden;
}
.ksh-pop-bar-fill {
    height: 100%;
    background: #60a5fa;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.ksh-pop-val {
    font-size: 11px;
    color: var(--text-primary);
    min-width: 50px;
    font-weight: 600;
    text-align: right;
}
.ksh-pop-change {
    font-size: 10px;
    font-weight: 600;
    min-width: 55px;
}
.ksh-pop-change.pos { color: var(--color-green); }
.ksh-pop-change.neg { color: var(--color-red); }

/* --- KSH Stacked bar (nemzetiség, településrészek) --- */
.ksh-stacked-bar {
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    margin: 8px 0;
}
.ksh-stacked-seg {
    transition: width 0.5s ease;
    min-width: 2px;
}
.ksh-stacked-seg:hover { opacity: 0.8; }
.ksh-stacked-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
}
.ksh-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.ksh-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- KSH Szekció cím --- */
.ksh-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* --- KSH Megjegyzés --- */
.ksh-note {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
    line-height: 1.5;
}

/* --- KSH Intézmények lista --- */
.ksh-inst-list {
    margin-bottom: 12px;
}
.ksh-inst-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.ksh-inst-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- KSH header szín variánsok --- */
.sky-header { border-bottom: 2px solid rgba(56,189,248,0.3); }
.blue-header { border-bottom: 2px solid rgba(59,130,246,0.3); }
.purple-header { border-bottom: 2px solid rgba(167,139,250,0.3); }
.forest-header { border-bottom: 2px solid rgba(34,197,94,0.3); }
.yellow-header { border-bottom: 2px solid rgba(251,191,36,0.3); }
.violet-header { border-bottom: 2px solid rgba(139,92,246,0.3); }
.pink-header { border-bottom: 2px solid rgba(236,72,153,0.3); }
.cyan-header { border-bottom: 2px solid rgba(34,211,238,0.3); }
.red-header { border-bottom: 2px solid rgba(239,68,68,0.3); }
.lime-header { border-bottom: 2px solid rgba(163,230,53,0.3); }
.orange-header { border-bottom: 2px solid rgba(249,115,22,0.3); }

/* ===== GOV-VIDEOS: Tájékoztató kisfilmek csempe ===== */
.gov-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 12px;
}
.gov-video-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.15s, border-color 0.15s;
}
.gov-video-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56,189,248,0.3);
}
.gov-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.gov-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gov-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.15s;
}
.gov-video-card:hover .gov-video-play {
    background: rgba(239,68,68,0.85);
}
.gov-video-play svg {
    width: 20px; height: 20px;
    fill: #fff;
    margin-left: 2px;
}
.gov-video-label {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary, rgba(255,255,255,0.8));
}
.gov-video-label .gov-video-part {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.45));
    margin-bottom: 2px;
}
.gov-video-card .gov-video-ext {
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
}

/* ============================================================
   ÁLLAMPOLGÁRI RÉSZVÉTEL (gov-participation) CSEMPE
   ============================================================ */

.gp-content { padding: 0 12px 12px; }

/* ─── TAB NAVIGÁCIÓ ─────────────────────────────────────── */
.gp-tabs { display: flex; gap: 2px; padding: 3px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gp-tab { flex: 1; padding: 6px 8px; border: none; border-radius: 6px; background: transparent; color: var(--text-muted, #94a3b8); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; text-align: center; }
.gp-tab:hover { color: var(--text-primary, #e2e8f0); background: rgba(255,255,255,0.05); }
.gp-tab.active { color: #fff; background: #7c3aed; }
.gp-panel { display: none; animation: gpFade 0.3s ease; }
.gp-panel.active { display: block; }
@keyframes gpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── KÖZÖS ─────────────────────────────────────────────── */
.gp-section-title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.gp-empty { display: flex; align-items: center; justify-content: center; padding: 24px 12px; color: var(--text-muted); font-size: 12px; }
.gp-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.gp-badge-live { background: rgba(34,197,94,0.2); color: var(--color-green); }

/* ─── GOMBOK ────────────────────────────────────────────── */
.gp-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.gp-btn-primary { background: #7c3aed; color: #fff; }
.gp-btn-primary:hover { background: #6d28d9; }
.gp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.gp-btn-accent { background: #7c3aed; color: #fff; font-size: 11px; padding: 5px 10px; }
.gp-btn-accent:hover { background: #6d28d9; }
.gp-btn-secondary { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.gp-btn-secondary:hover { background: rgba(255,255,255,0.15); }
.gp-btn-sm { padding: 3px 8px; font-size: 10px; }
.gp-icon-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: none; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-muted); font-size: 11px; cursor: pointer; transition: all 0.15s; }
.gp-icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.gp-icon-btn svg { width: 13px; height: 13px; }

/* ─── 1. SZAVAZÁS ───────────────────────────────────────── */
.gp-poll-card { background: rgba(30,41,59,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.gp-poll-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gp-poll-expires { font-size: 11px; color: var(--text-muted); }
.gp-poll-question { font-size: 13px; font-weight: 600; margin: 0 0 10px; line-height: 1.4; }
.gp-poll-options { display: flex; flex-direction: column; gap: 6px; }
.gp-poll-option { position: relative; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s; overflow: hidden; }
.gp-poll-selectable { border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 8px; }
.gp-poll-selectable:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.05); }
.gp-poll-selectable.selected { border-color: #7c3aed; background: rgba(124,58,237,0.1); }
.gp-poll-radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0; transition: all 0.15s; }
.gp-poll-selectable.selected .gp-poll-radio { border-color: #7c3aed; background: #7c3aed; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3); }
.gp-poll-result { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; cursor: default; }
.gp-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(124,58,237,0.15); border-radius: 6px; transition: width 0.5s ease; }
.gp-poll-opt-text { position: relative; z-index: 1; font-size: 12px; }
.gp-poll-pct { position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: var(--color-violet); }
.gp-poll-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.gp-poll-total { font-size: 11px; color: var(--text-muted); }

/* Lezárt szavazások */
.gp-closed-card { padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); margin-bottom: 6px; }
.gp-closed-q { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.gp-closed-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
/* Szavazás eredmény sávdiagram */
.gp-result-bars { margin-top: 4px; }
.gp-result-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.gp-result-label { font-size: 10px; color: var(--text-muted); min-width: 60px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-result-bar-wrap { flex: 1; height: 12px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; }
.gp-result-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 3px; min-width: 2px; transition: width 0.3s; }
.gp-result-pct { font-size: 10px; color: var(--text-muted); min-width: 30px; text-align: right; }
/* Szavazás típus UI */
.gp-poll-desc { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.gp-poll-checkbox { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.25); border-radius: 3px; flex-shrink: 0; margin-right: 2px; transition: all 0.15s; }
.gp-multi .selected .gp-poll-checkbox, .gp-poll-selectable.gp-multi.selected .gp-poll-checkbox { background: #8b5cf6; border-color: #8b5cf6; }
.gp-multi-hint { font-size: 10px; color: #a78bfa; margin-bottom: 4px; }
.gp-select-items-section { margin-bottom: 8px; }
.gp-select-label { font-size: 11px; color: #a78bfa; font-weight: 600; margin-bottom: 4px; }
.gp-select-item { background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.15); }
.gp-select-item.selected { background: rgba(139,92,246,0.15); border-color: #8b5cf6; }
.gp-select-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0; }
.gp-lakos-notice { font-size: 11px; color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.gp-voted-notice { font-size: 12px; color: #22c55e; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-weight: 600; }

/* Összecsukható szavazás kártyák */
.gp-poll-filter-bar { display: flex; gap: 6px; padding: 6px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gp-poll-filter-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; color: var(--text-muted); font-size: 12px; padding: 4px 14px; cursor: pointer; transition: all 0.15s; }
.gp-poll-filter-btn:hover { background: rgba(255,255,255,0.08); }
.gp-poll-filter-btn.active { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.gp-poll-collapse-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.gp-poll-collapse-card.open { border-color: rgba(124,58,237,0.25); }
.gp-poll-collapse-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; transition: background 0.15s; }
.gp-poll-collapse-header:hover { background: rgba(255,255,255,0.03); }
.gp-poll-collapse-left { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }
.gp-poll-chevron { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); transition: transform 0.2s; }
.gp-poll-collapse-card.open .gp-poll-chevron { transform: rotate(180deg); }
.gp-poll-collapse-info { flex: 1; min-width: 0; }
.gp-poll-collapse-q { font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-poll-collapse-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.gp-poll-collapse-votes { font-weight: 600; }
.gp-poll-collapse-time { color: var(--text-muted); }
.gp-poll-collapse-body { padding: 0 12px 12px; }
.gp-poll-card-voted { color: #22c55e; font-weight: 600; }
.gp-poll-card-notvoted { color: #f59e0b; font-style: italic; }
.gp-badge-closed { background: rgba(239,68,68,0.15); color: #ef4444; }
.gp-badge-live { background: rgba(34,197,94,0.15); color: #22c55e; }

.gp-follow-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; flex-shrink: 0; transition: color 0.2s; opacity: 0.5; }
.gp-follow-btn:hover { color: #f59e0b; opacity: 1; }
.gp-follow-btn.followed { color: #f59e0b; opacity: 1; }

/* Eredmény szekciók */
.gp-results-section { margin-top: 8px; }
.gp-results-title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.gp-closed-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
/* Cross-tab táblázat */
.gp-crosstab { overflow-x: auto; margin-top: 4px; }
.gp-crosstab-row { display: flex; align-items: center; min-height: 28px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gp-crosstab-header { font-weight: 600; font-size: 10px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.08); }
.gp-crosstab-cell { flex: 1; min-width: 70px; padding: 3px 4px; font-size: 10px; text-align: center; }
.gp-crosstab-label { min-width: 100px; max-width: 140px; flex: 0 0 auto; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-crosstab-item { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-crosstab-bar-wrap { height: 10px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; margin-bottom: 1px; }
.gp-crosstab-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 3px; min-width: 1px; }
.gp-crosstab-val { font-size: 9px; color: var(--text-muted); }

/* ─── 2. JAVASLATOK ─────────────────────────────────────── */
.gp-proposals-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.gp-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.gp-chip { padding: 4px 8px; border: none; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 10px; cursor: pointer; transition: all 0.15s; }
.gp-chip:hover { background: rgba(255,255,255,0.1); }
.gp-chip.active { background: rgba(124,58,237,0.2); color: var(--color-violet); }
.gp-proposal-card { padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; }
.gp-proposal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gp-proposal-status { font-size: 10px; font-weight: 600; }
.gp-proposal-title { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.gp-proposal-desc { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.4; }
.gp-proposal-foot { display: flex; align-items: center; justify-content: space-between; }
.gp-proposal-author { font-size: 10px; color: var(--text-muted); }
.gp-proposal-actions { display: flex; gap: 4px; }

/* ─── 3. KÖLTSÉGVETÉS ───────────────────────────────────── */
.gp-budget-header { margin-bottom: 12px; }
.gp-budget-header h4 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.gp-budget-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.gp-budget-points-info { font-size: 12px; color: var(--text-muted); padding: 6px 0 10px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; }
.gp-budget-card { padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; }
.gp-budget-card-title { font-size: 12px; font-weight: 600; margin: 0 0 4px; }
.gp-budget-cost { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.gp-budget-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.gp-budget-bar { height: 100%; background: linear-gradient(90deg, #7c3aed, var(--color-violet)); border-radius: 3px; transition: width 0.5s ease; }
.gp-budget-card-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.gp-budget-vote-row { display: flex; align-items: center; gap: 4px; }
.gp-budget-input { width: 36px; text-align: center; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: rgba(0,0,0,0.2); color: var(--text-primary); font-size: 11px; padding: 2px; }

/* ─── 4. EREDMÉNYKÖVETÉS ────────────────────────────────── */
.gp-acc-card { padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; }
.gp-acc-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gp-acc-card-header h4 { font-size: 12px; font-weight: 600; margin: 0; }
.gp-acc-timeline { display: flex; align-items: center; gap: 0; margin-bottom: 8px; }
.gp-acc-step { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.gp-acc-step span { font-size: 9px; color: var(--text-muted); }
.gp-acc-step.done span { color: var(--text-primary); font-weight: 600; }
.gp-acc-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); }
.gp-acc-step.done .gp-acc-dot { border-color: transparent; }
.gp-acc-line { flex: 1; height: 2px; background: rgba(255,255,255,0.1); min-width: 16px; }
.gp-acc-updates { padding: 6px; background: rgba(255,255,255,0.02); border-radius: 6px; margin-bottom: 6px; }
.gp-acc-update { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); padding: 2px 0; }
.gp-acc-update-date { color: #7c3aed; font-weight: 500; min-width: 50px; }

/* ─── KOMMENTEK ─────────────────────────────────────────── */
.gp-comment { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gp-comment:last-child { border-bottom: none; }
.gp-comment-author { font-size: 10px; color: var(--color-violet); font-weight: 500; margin-bottom: 2px; }
.gp-comment-body { font-size: 12px; line-height: 1.4; }
.gp-comment-form { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }

/* ─── MODÁLOK ───────────────────────────────────────────── */
.gp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.gp-modal { background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; }
.gp-modal-sm { max-width: 400px; }
.gp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.gp-modal-header h3 { font-size: 14px; font-weight: 600; margin: 0; }
.gp-modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.gp-modal-close:hover { color: var(--text-primary); }
.gp-modal-body { padding: 16px; }
.gp-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.gp-admin-bar { display: flex; justify-content: flex-end; padding: 8px 0; }
.gp-btn-danger { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.gp-btn-danger:hover { background: rgba(239,68,68,0.25); }
.gp-form-group { margin-bottom: 10px; }
.gp-form-group label { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }
.gp-form-group input, .gp-form-group select, .gp-form-group textarea { width: 100%; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(0,0,0,0.2); color: var(--text-primary); font-size: 12px; font-family: inherit; box-sizing: border-box; }
.gp-form-group input:focus, .gp-form-group select:focus, .gp-form-group textarea:focus { outline: none; border-color: #7c3aed; }
.gp-form-group select { appearance: auto; }

/* ═══════════════════════════════════════════════════════════════════
   ADATTÁR — TEIR / Településstatisztika vizualizációk (Deploy #208)
   ═══════════════════════════════════════════════════════════════════ */

/* --- Vonaldiagram (ds-line-chart) --- */
.ds-line-chart { margin-bottom: 14px; }
.ds-line-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; padding-left: 2px; }
.ds-line-area {
    display: flex; align-items: flex-end; gap: 2px;
    height: 80px; padding: 0 2px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.ds-line-col {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    height: 100%; position: relative; cursor: default;
    min-width: 0;
}
.ds-line-col::before {
    content: ''; display: block; width: 100%; max-width: 16px; border-radius: 2px 2px 0 0;
    background: var(--line-color, #60a5fa); opacity: 0.45;
    height: var(--h, 0%);
    transition: height 0.4s ease;
}
.ds-line-col:hover::before { opacity: 0.8; }
.ds-line-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--line-color, #60a5fa);
    position: absolute; top: calc(100% - var(--h, 0%) - 2px);
    z-index: 1;
}
.ds-line-yr {
    font-size: 8px; color: var(--text-muted); position: absolute; bottom: -18px;
    white-space: nowrap; user-select: none;
}

/* --- Pozitív/negatív sávdiagram (ds-pn-chart) --- */
.ds-pn-chart { margin-bottom: 14px; }
.ds-pn-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; padding-left: 2px; }
.ds-pn-row {
    display: flex; align-items: center; gap: 4px;
    height: 18px; margin-bottom: 2px;
}
.ds-pn-yr { font-size: 9px; color: var(--text-muted); min-width: 28px; text-align: right; flex-shrink: 0; }
.ds-pn-track {
    flex: 1; display: flex; height: 12px;
    position: relative;
}
.ds-pn-left {
    width: 50%; display: flex; justify-content: flex-end;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.ds-pn-right-empty { width: 50%; }
.ds-pn-bar {
    height: 100%; border-radius: 2px;
    transition: width 0.4s ease;
}
.ds-pn-bar.pos { background: var(--color-green); opacity: 0.7; }
.ds-pn-bar.neg { background: var(--color-red); opacity: 0.7; }
.ds-pn-val {
    font-size: 9px; min-width: 48px; text-align: left; flex-shrink: 0;
}
.ds-pn-val.pos { color: #4ade80; }
.ds-pn-val.neg { color: #f87171; }

/* --- Korfa / piramis (ds-pyramid) --- */
.ds-pyramid-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 600; margin-bottom: 8px; padding: 0 4px;
}
.ds-pyr-m { color: #60a5fa; }
.ds-pyr-f { color: #f472b6; }
.ds-pyr-title { color: var(--text-muted); font-weight: 500; }
.ds-pyramid { display: flex; flex-direction: column; gap: 3px; }
.ds-pyr-row {
    display: flex; align-items: center; gap: 4px; height: 20px;
}
.ds-pyr-val {
    font-size: 9px; color: var(--text-muted); min-width: 36px; flex-shrink: 0;
}
.ds-pyr-val-l { text-align: right; }
.ds-pyr-val-r { text-align: left; }
.ds-pyr-bar-l {
    flex: 1; height: 14px; display: flex; justify-content: flex-end;
    background: rgba(255,255,255,0.03); border-radius: 2px; overflow: hidden;
}
.ds-pyr-bar-r {
    flex: 1; height: 14px; display: flex; justify-content: flex-start;
    background: rgba(255,255,255,0.03); border-radius: 2px; overflow: hidden;
}
.ds-pyr-fill-m {
    height: 100%; background: linear-gradient(90deg, transparent, #60a5fa);
    border-radius: 2px; opacity: 0.65; transition: width 0.4s ease;
}
.ds-pyr-fill-f {
    height: 100%; background: linear-gradient(90deg, #f472b6, transparent);
    border-radius: 2px; opacity: 0.65; transition: width 0.4s ease;
}
.ds-pyr-age {
    font-size: 9px; font-weight: 600; color: var(--text-primary);
    min-width: 36px; text-align: center; flex-shrink: 0;
}

/* --- Városunk csempe tab rendszer --- */
.about-city-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}
.about-city-tab {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.about-city-tab:hover { color: var(--text-secondary); }
.about-city-tab.active {
    color: #fb923c;
    border-bottom-color: #fb923c;
}
.about-city-panel {
    display: none;
    padding: 12px;
}
.about-city-panel.active { display: block; }
.about-city-panel .bn-page-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.about-city-panel .bn-page-content h1,
.about-city-panel .bn-page-content h2,
.about-city-panel .bn-page-content h3,
.about-city-panel .bn-page-content h4 {
    color: var(--text-primary);
    margin: 16px 0 8px;
}
.about-city-panel .bn-page-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}
.about-city-panel .bn-page-content .bn-city-img {
    margin: 20px 0 12px;
}
.about-city-panel .bn-page-content .bn-city-img:first-child {
    margin-top: 0;
}
.about-city-panel .bn-page-content .bn-city-img img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}
.about-city-panel .bn-page-content a {
    color: #fb923c;
    text-decoration: underline;
}
.about-city-panel .bn-page-content p { margin: 0 0 10px; }
.about-city-panel .bn-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 12px;
}
.about-city-panel .bn-page-content td,
.about-city-panel .bn-page-content th {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.about-city-panel .bn-page-content figure {
    margin: 10px 0;
}

/* === Helyi szolgáltatások csempe === */
.ls-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}
.ls-tab {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.ls-tab:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
.ls-tab.active {
    background: rgba(132,204,22,0.15);
    border-color: rgba(132,204,22,0.3);
    color: #a3e635;
}
.ls-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 8px;
}
.ls-search-input {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
}
.ls-search-input:focus {
    border-color: rgba(132,204,22,0.4);
}
.ls-search-input::placeholder {
    color: var(--text-muted);
}
.ls-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ls-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
    overflow-y: auto;
}
.ls-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s;
}
.ls-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.ls-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.ls-card-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.2;
}
.ls-card-title-wrap {
    min-width: 0;
}
.ls-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-card-type {
    font-size: 11px;
    color: var(--text-muted);
}
.ls-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ls-card-row {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    display: flex;
    gap: 4px;
    align-items: baseline;
    line-height: 1.4;
}
.ls-card-row a {
    word-break: break-all;
}
.ls-card-label {
    flex-shrink: 0;
    font-size: 11px;
}
/* Services oldal */
.services-grid-container {
    padding: 8px;
}

.ls-loading, .ls-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 12px;
    font-size: 13px;
    grid-column: 1 / -1;
}

/* ==================== BEJELENTÉS OLDAL ==================== */

/* ==================== BEJELENTÉSEK (REPORTS) — Javaslatok mintájára ==================== */

.reports-content { padding: 8px 12px; }
.reports-list { padding: 4px 0; }
.reports-empty { text-align: center; color: var(--text-muted); padding: 24px; font-size: 13px; }

.reports-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reports-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.reports-toolbar-right { display: flex; gap: 8px; align-items: center; }

.rp-category-filter {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: #e2e8f0; font-size: 12px; padding: 4px 8px;
    cursor: pointer; -webkit-appearance: auto;
}
.rp-category-filter option { background: #1e293b; color: #e2e8f0; }

.reports-new-btn {
    background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 8px; color: #f97316; font-size: 12px; font-weight: 600;
    padding: 6px 14px; cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.reports-new-btn:hover { background: rgba(249, 115, 22, 0.25); }

/* Összecsukható kártyák */
.rp-collapse-card {
    border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
    margin-bottom: 6px; overflow: hidden; transition: border-color 0.2s;
}
.rp-collapse-card.open { border-color: rgba(249, 115, 22, 0.25); }
.rp-collapse-header {
    display: flex; align-items: center; padding: 10px 12px;
    cursor: pointer; user-select: none; transition: background 0.15s;
}
.rp-collapse-header:hover { background: rgba(255,255,255,0.03); }
.rp-collapse-left {
    display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
}
.rp-collapse-chevron {
    flex-shrink: 0; margin-top: 2px; color: var(--text-muted);
    transition: transform 0.2s;
}
.rp-collapse-card.open .rp-collapse-chevron { transform: rotate(180deg); }
.rp-collapse-info { flex: 1; min-width: 0; }
.rp-collapse-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-collapse-meta {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    font-size: 11px; margin-top: 3px;
}
.rp-collapse-cat { color: var(--text-muted); }
.rp-collapse-support { font-weight: 600; }
.rp-collapse-date { color: var(--text-muted); }
.rp-own-badge {
    background: rgba(249, 115, 22, 0.15); color: #f97316;
    padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
}
.rp-collapse-body { padding: 0 12px 12px; }

/* Státusz badge-ek */
.rp-status {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
}
.rp-status-open {
    background: rgba(239, 68, 68, 0.18); color: #ef4444;
}
.rp-status-in_progress {
    background: rgba(234, 179, 8, 0.18); color: #eab308;
}
.rp-status-resolved {
    background: rgba(34, 197, 94, 0.18); color: #22c55e;
}
.rp-status-closed {
    background: rgba(107, 114, 128, 0.18); color: #9ca3af;
}

/* Összesítő sáv (admin+) */
.rp-stats-bar {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rp-stat-pill {
    background: rgba(255,255,255,0.05); border-radius: 12px;
    padding: 3px 10px; font-size: 11px; color: var(--text-muted);
}
.rp-stat-pill b { color: #e2e8f0; }
.rp-stat-open { border-left: 3px solid #ef4444; }
.rp-stat-progress { border-left: 3px solid #eab308; }
.rp-stat-resolved { border-left: 3px solid #22c55e; }
.rp-stat-closed { border-left: 3px solid #6b7280; }

.rp-export-btn {
    background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.2);
    border-radius: 6px; color: #60a5fa; font-size: 11px; font-weight: 600;
    padding: 4px 12px; cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.rp-export-btn:hover { background: rgba(59,130,246,0.22); }

/* Body tartalom */
.rp-location { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; }
.rp-desc { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.5; white-space: pre-wrap; }
.rp-ref { font-size: 11px; color: var(--text-muted); font-family: monospace; margin: 0 0 8px; }

/* Fotók */
.rp-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-photo-thumb {
    width: 80px; height: 60px; object-fit: cover; border-radius: 6px;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.1);
}
.rp-photo-thumb:hover { opacity: 0.8; }

/* Támogatás szekció */
.rp-support-section {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.rp-support-count { font-size: 12px; color: var(--text-secondary); }
.rp-support-btn {
    background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 6px; color: #f97316; font-size: 11px; font-weight: 600;
    padding: 4px 12px; cursor: pointer; transition: background 0.2s;
}
.rp-support-btn:hover { background: rgba(249, 115, 22, 0.25); }
.rp-supported-badge {
    font-size: 11px; color: #22c55e; font-weight: 600;
}

/* Admin szekció (kártyán belül) */
.rp-admin-actions {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.rp-admin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-admin-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.rp-status-select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: #e2e8f0; font-size: 12px; padding: 3px 8px;
    cursor: pointer; color-scheme: dark;
}
.rp-status-select option { background: #1e293b; color: #e2e8f0; }

.rp-admin-response { margin-top: 8px; padding: 8px; background: rgba(30,41,59,0.4); border-radius: 6px; }
.rp-admin-response strong { font-size: 11px; color: #60a5fa; display: block; margin-bottom: 4px; }
.rp-response-item { padding: 4px 0; font-size: 12px; color: var(--text-secondary); }
.rp-response-readonly { border-bottom: 1px solid rgba(255,255,255,0.04); }
.rp-response-date { font-size: 10px; color: var(--text-muted); margin-right: 6px; }
.rp-response-meta { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.rp-response-admin { color: #60a5fa; font-weight: 600; }
.rp-response-text { font-size: 12px; color: var(--text-secondary); }
.rp-response-history { margin-bottom: 8px; }

.rp-admin-response-editor { margin-top: 8px; }
.rp-admin-response-editor label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.rp-admin-response-input {
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: #e2e8f0; font-size: 12px; padding: 6px 8px;
    resize: vertical; font-family: inherit;
}
.rp-admin-save-btn {
    margin-top: 6px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.25);
    border-radius: 6px; color: #60a5fa; font-size: 11px; font-weight: 600;
    padding: 4px 14px; cursor: pointer; transition: background 0.2s;
}
.rp-admin-save-btn:hover { background: rgba(59,130,246,0.25); }
.rp-admin-meta { margin-top: 8px; }
.rp-admin-delete-btn {
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
    border-radius: 6px; color: #ef4444; font-size: 11px; padding: 4px 12px;
    cursor: pointer; transition: background 0.2s;
}
.rp-admin-delete-btn:hover { background: rgba(239,68,68,0.22); }

.rp-photo-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px; color: var(--text-muted); font-size: 12px;
    padding: 6px 12px; cursor: pointer; transition: background 0.2s;
}
.rp-photo-add-btn:hover { background: rgba(255,255,255,0.08); }

.rp-form-charcount { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.rp-form-error { color: #ef4444; font-size: 12px; padding: 6px; }

/* 7.2 Szerkesztő gomb a csempe fejlécben (admin+ only) */
.tile-edit-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 4px; border-radius: 4px; opacity: 0.5;
    transition: opacity 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center;
}
.tile-edit-btn:hover { opacity: 1; color: var(--accent-blue, #60a5fa); }

/* 7.5 Admin válasz megjelenítés */
.report-admin-response {
    margin-top: 8px; padding: 10px 12px;
    background: rgba(30, 41, 59, 0.5); border-left: 3px solid var(--accent-blue, #60a5fa); border-radius: 0 6px 6px 0;
}
.response-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.response-author { font-weight: 600; color: var(--accent-blue, #60a5fa); font-size: 12px; }
.response-date { font-size: 11px; color: var(--text-muted); }
.response-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ==================== JAVASLATOK (SUGGESTIONS) ==================== */

.suggestions-content {
    padding: 8px 12px;
}

/* régi .suggestions-toolbar (eltávolítva — alább bővített verzió) */

.suggestions-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.suggestions-filter-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.suggestions-filter-btn:hover {
    background: rgba(255,255,255,0.1);
}
.suggestions-filter-btn.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
    border-color: rgba(34, 197, 94, 0.3);
}

.suggestions-new-btn {
    background: rgba(34, 197, 94, 0.12);
    border: 1px dashed rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: var(--color-green);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.suggestions-new-btn:hover {
    background: rgba(34, 197, 94, 0.2);
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestions-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
    font-size: 13px;
}

/* ── Összecsukható javaslat kártyák (szavazás mintájára) ── */
.sg-collapse-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.sg-collapse-card.open { border-color: rgba(34, 197, 94, 0.25); }
.sg-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.sg-collapse-header:hover { background: rgba(255,255,255,0.03); }
.sg-collapse-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.sg-collapse-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--text-muted);
    margin-top: 2px;
}
.sg-collapse-card.open .sg-collapse-chevron { transform: rotate(180deg); }
.sg-collapse-info { flex: 1; min-width: 0; }
.sg-collapse-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-collapse-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.sg-collapse-cat { color: var(--text-muted); }
.sg-collapse-support { font-weight: 600; }
.sg-collapse-date { color: var(--text-muted); }
.sg-own-badge {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}

/* Profil javaslat linkek */
.profile-sg-link { cursor: pointer; transition: background 0.15s; }
.profile-sg-link:hover { background: rgba(255,255,255,0.04); }
.profile-sg-link-info { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
.sg-collapse-body { padding: 0 12px 12px; }

/* ── Javaslat összesítő sáv (admin+) ── */
.sg-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sg-stat-pill {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.sg-stat-pill b { color: var(--text-primary, #e2e8f0); }
.sg-stat-pill.sg-stat-new { border-color: rgba(239,68,68,0.3); }
.sg-stat-pill.sg-stat-review { border-color: rgba(234,179,8,0.3); }
.sg-stat-pill.sg-stat-accepted { border-color: rgba(34,197,94,0.3); }
.sg-stat-pill.sg-stat-implemented { border-color: rgba(59,130,246,0.3); }
.sg-stat-pill.sg-stat-rejected { border-color: rgba(148,163,184,0.3); }
.sg-export-btn {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 8px;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.sg-export-btn:hover { background: rgba(59,130,246,0.22); }

.sg-category {
    font-size: 12px;
    color: var(--text-muted);
}

.sg-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.sg-status-new {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.sg-status-under_review {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.sg-status-accepted {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-green);
}

.sg-status-implemented {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.sg-status-rejected {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.sg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin: 0 0 4px 0;
}

.sg-desc {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.sg-admin-response {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid var(--color-green);
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
    margin-top: 8px;
}

.sg-admin-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.sg-status-select {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    color-scheme: dark;
}
.sg-status-select option { background: #1e293b; color: #e2e8f0; }

.sg-admin-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.sg-admin-response-input {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 12px;
    padding: 6px 8px;
    width: 100%;
    resize: vertical;
    min-height: 36px;
    color-scheme: dark;
    font-family: inherit;
}

.sg-admin-save-btn {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.sg-admin-save-btn:hover { background: rgba(59, 130, 246, 0.25); }

/* ── Javaslatok fotók és támogatás ── */
.sg-photos {
    display: flex;
    gap: 6px;
    margin: 8px 0;
    flex-wrap: wrap;
}
.sg-photo-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: opacity 0.2s;
}
.sg-photo-thumb:hover { opacity: 0.8; }

.sg-support-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
}
.sg-support-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}
.sg-support-btn {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 8px;
    color: #f97316;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.sg-support-btn:hover { background: rgba(249, 115, 22, 0.25); }
.sg-supported-badge {
    font-size: 12px;
    color: #22c55e;
    font-weight: 600;
}

.sg-photo-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.sg-photo-add-btn:hover { background: rgba(255,255,255,0.08); }

/* ── Javaslatok toolbar — sticky a tile-body-wrapper-en belül ── */
.suggestions-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
    background: var(--glass-bg, rgba(255,255,255,0.01));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 2;
    position: sticky;
    top: 0;
}
.suggestions-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sg-category-filter {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-primary, #e2e8f0);
    font-size: 12px;
    padding: 5px 8px;
    color-scheme: dark;
}
.sg-category-filter option { background: #1e293b; color: #e2e8f0; }

/* ── Javaslat form bővítés ── */
.sg-form-charcount {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
}
.sg-form-error {
    color: #ef4444;
    font-size: 12px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    margin-top: 8px;
}

/* ── Javaslat admin szekció a csempében ── */
.sg-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sg-response-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}
.sg-response-item {
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(34, 197, 94, 0.4);
    border-radius: 0 6px 6px 0;
    padding: 6px 10px;
    font-size: 12px;
}
.sg-response-readonly {
    border-left-color: rgba(96, 165, 250, 0.4);
}
.sg-response-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 2px;
}
.sg-response-admin {
    font-weight: 600;
    font-size: 11px;
    color: #60a5fa;
}
.sg-response-date {
    font-size: 10px;
    color: var(--text-muted, #64748b);
}
.sg-response-text {
    color: var(--text-secondary, #94a3b8);
    line-height: 1.4;
}
.sg-admin-response-editor {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sg-admin-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.sg-admin-delete-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.sg-admin-delete-btn:hover { background: rgba(239, 68, 68, 0.2); }

.sg-status-rejected {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.15);
}
/* ── Admin panel — Javaslatok tab ── */
.admin-sg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.admin-sg-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-sg-toolbar-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.admin-sg-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}
.admin-sg-stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
    min-width: 80px;
}
.admin-sg-stat-card.sg-stat-new { border-color: rgba(239, 68, 68, 0.3); }
.admin-sg-stat-card.sg-stat-review { border-color: rgba(234, 179, 8, 0.3); }
.admin-sg-stat-card.sg-stat-accepted { border-color: rgba(34, 197, 94, 0.3); }
.admin-sg-stat-card.sg-stat-implemented { border-color: rgba(59, 130, 246, 0.3); }
.admin-sg-stat-card.sg-stat-rejected { border-color: rgba(148, 163, 184, 0.3); }
.admin-sg-stat-num {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}
.admin-sg-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}
.admin-sg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-sg-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px;
}
.admin-sg-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.admin-sg-item-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-sg-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.admin-sg-cat-badge {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
}
.admin-sg-date {
    font-size: 11px;
    color: var(--text-muted, #64748b);
}
.admin-sg-upvotes {
    font-size: 12px;
}
.admin-sg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin: 0 0 4px 0;
}
.admin-sg-desc {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin: 0 0 6px 0;
    line-height: 1.5;
}
.admin-sg-author {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}
.admin-sg-response-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-sg-delete-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    font-size: 13px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.admin-sg-delete-btn:hover { background: rgba(239, 68, 68, 0.25); }
.admin-empty-text {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
    font-size: 13px;
}

/* ==================== ADOK-VESZEK (CLASSIFIEDS) ==================== */

.cf-filters {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    flex-wrap: wrap;
}

.cf-filter-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-primary, #e2e8f0);
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    cursor: pointer;
    color-scheme: dark;
}
.cf-filter-select option {
    background: #1e293b;
    color: #e2e8f0;
}

.cf-search-input {
    flex: 1;
    min-width: 100px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-primary, #e2e8f0);
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
}
.cf-search-input::placeholder {
    color: #64748b;
}

.cf-list {
    padding: 4px 12px;
}

.cf-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.cf-card:hover {
    background: rgba(255,255,255,0.06);
}

.cf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cf-card-type {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.cf-card-cat {
    font-size: 12px;
    color: var(--text-muted);
}

.cf-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 4px;
}

.cf-card-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.cf-card-price {
    font-weight: 600;
    color: #f97316;
}

.cf-card-ref {
    font-family: monospace;
    opacity: 0.7;
}

.cf-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
}

.cf-card-expanded .cf-card-details {
    max-height: 300px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.cf-card-desc {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.4;
    margin-bottom: 6px;
}

.cf-card-contact {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 6px;
}

.cf-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.cf-delete-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: var(--color-red);
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.cf-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.cf-new-btn {
    width: 100%;
    background: rgba(132, 204, 22, 0.12);
    border: 1px dashed rgba(132, 204, 22, 0.3);
    border-radius: 8px;
    color: #84cc16;
    font-size: 13px;
    font-weight: 600;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.cf-new-btn:hover {
    background: rgba(132, 204, 22, 0.2);
}

/* ==================== HALOM TV CSEMPE ==================== */

.htv-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.htv-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.htv-tab.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}
.htv-tab:hover {
    color: var(--text-secondary);
}
.htv-panel {
    display: none;
    padding: 12px;
}
.htv-panel.active {
    display: block;
}
.htv-stream-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.htv-stream-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.htv-stream-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    transition: background 0.2s;
}
.htv-stream-placeholder:hover {
    background: rgba(56,189,248,0.05);
}
.htv-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(56,189,248,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    transition: all 0.2s;
}
.htv-play-btn:hover {
    background: rgba(56,189,248,0.25);
    transform: scale(1.05);
}
.htv-play-btn svg {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}
.htv-play-label {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 13px;
}
.htv-info-box {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}
.htv-info-row {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 3px 0;
}
.htv-info-row strong {
    color: var(--text-primary);
}
.htv-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}
.htv-link-card:hover {
    background: rgba(56,189,248,0.06);
    border-color: rgba(56,189,248,0.15);
}
.htv-link-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(56,189,248,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
}
.htv-link-icon svg {
    width: 18px;
    height: 18px;
}
.htv-link-text {
    flex: 1;
    min-width: 0;
}
.htv-link-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.htv-link-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.htv-link-arrow {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.htv-desc-box {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.htv-about-section {
    padding: 4px 0;
}
.htv-about-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}
.htv-about-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}
.htv-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.htv-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.htv-contact-item svg {
    flex-shrink: 0;
    color: #38bdf8;
}

/* ── Lakihegy Rádió csempe ── */
.lkr-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.lkr-tab { background: transparent; border: none; color: var(--text-muted); font-size: 12px; padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.lkr-tab.active { color: var(--color-violet); border-bottom-color: var(--color-violet); }
.lkr-tab:hover { color: var(--text-secondary); }
.lkr-panel { display: none; padding: 12px; }
.lkr-panel.active { display: block; }
.lkr-stream-container { width: 100%; min-height: 120px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; position: relative; }
.lkr-stream-container iframe { width: 100%; min-height: 200px; border: none; }
.lkr-stream-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; cursor: pointer; transition: background 0.2s; }
.lkr-stream-placeholder:hover { background: rgba(167,139,250,0.05); }
.lkr-play-btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(167,139,250,0.15); display: flex; align-items: center; justify-content: center; color: var(--color-violet); transition: all 0.2s; }
.lkr-play-btn:hover { background: rgba(167,139,250,0.25); transform: scale(1.05); }
.lkr-play-btn svg { width: 32px; height: 32px; margin-left: 4px; }
.lkr-play-label { margin-top: 12px; color: var(--text-muted); font-size: 13px; }
.lkr-info-box { margin-top: 12px; padding: 10px 12px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); }
.lkr-info-row { font-size: 12px; color: var(--text-secondary); padding: 3px 0; }
.lkr-info-row strong { color: var(--text-primary); }
.lkr-link-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-bottom: 8px; }
.lkr-link-card:hover { background: rgba(167,139,250,0.06); border-color: rgba(167,139,250,0.15); }
.lkr-link-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(167,139,250,0.1); display: flex; align-items: center; justify-content: center; color: var(--color-violet); }
.lkr-link-icon svg { width: 18px; height: 18px; }
.lkr-link-text { flex: 1; min-width: 0; }
.lkr-link-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lkr-link-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lkr-link-arrow { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.lkr-desc-box { padding: 10px 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.lkr-about-section { padding: 4px 0; }
.lkr-about-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; }
.lkr-about-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px 0; }
.lkr-contact-grid { display: flex; flex-direction: column; gap: 8px; }
.lkr-contact-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.lkr-contact-item svg { flex-shrink: 0; color: var(--color-violet); }

/* ==================== FÉNYKÉP FELTÖLTÉS ==================== */

.photo-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border: 2px dashed rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.photo-upload-area:hover {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.5);
}
.photo-upload-area svg {
    opacity: 0.5;
}

.photo-preview-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.photo-preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.photo-preview-remove:hover {
    background: var(--color-red);
}

.photo-gallery {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.photo-gallery img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.photo-gallery img:hover {
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.25);
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.photo-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.photo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* ========== FEJLESZTÉSEK OLDAL ========== */

.dev-tile .tile-footer {
    font-size: 11px;
    color: var(--text-muted);
}
.dev-tile .tile-footer .timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

/* Projekt kártya */
.dev-project-card {
    padding: 16px;
}
.dev-project-top {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.dev-thumb {
    width: 120px;
    height: 90px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dev-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.dev-project-info {
    flex: 1;
    min-width: 0;
}
.dev-project-desc {
    font-size: 13px;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
    margin-bottom: 10px;
}
.dev-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.dev-meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}
.dev-meta-label {
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}
.dev-meta-value {
    color: var(--text-primary, #e2e8f0);
    font-weight: 600;
}

/* Gantt-diagram */
.dev-gantt-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dev-gantt-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.dev-gantt-header {
    display: grid;
    gap: 0;
    margin-bottom: 4px;
}
.dev-gantt-header span {
    font-size: 9px;
    color: var(--text-muted, #64748b);
    text-align: center;
}
.dev-gantt-row {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    min-height: 22px;
}
.dev-gantt-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary, #cbd5e1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}
.dev-gantt-track {
    flex: 1;
    height: 16px;
    position: relative;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
}
.dev-gantt-bar {
    position: absolute;
    top: 1px;
    height: 14px;
    border-radius: 3px;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.dev-gantt-bar:hover {
    opacity: 1;
}
.dev-gantt-bar.forest { background: linear-gradient(90deg, var(--color-green), #16a34a); }
.dev-gantt-bar.sky { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.dev-gantt-bar.orange { background: linear-gradient(90deg, #fb923c, #f97316); }
.dev-gantt-bar.violet { background: linear-gradient(90deg, var(--color-violet), var(--color-violet-dark)); }
.dev-gantt-bar.lime { background: linear-gradient(90deg, #a3e635, #84cc16); }
.dev-gantt-months {
    display: flex;
    margin-bottom: 2px;
    padding-left: 110px;
}
.dev-gantt-months span {
    flex: 1;
    font-size: 9px;
    color: var(--text-muted, #64748b);
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.04);
}
.dev-gantt-months span:first-child {
    border-left: none;
}

/* Státusz badge */
.dev-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.dev-status.planned {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}
.dev-status.in-progress {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
}
.dev-status.completed {
    background: rgba(34,197,94,0.15);
    color: var(--color-green);
}

/* Dokumentum mellékletek */
.dev-docs-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dev-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dev-doc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary, #cbd5e1);
    font-size: 11px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}
.dev-doc-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}
.dev-doc-item svg {
    flex-shrink: 0;
}

/* ── Webkamerák csempe ── */
.webcam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    padding: 12px;
}
.webcam-slot {
    position: relative;
}
.webcam-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06);
    aspect-ratio: 16 / 9;
}
.webcam-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.webcam-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
    background: rgba(100,100,100,0.7);
    color: rgba(255,255,255,0.6);
}
.webcam-live-badge.live {
    background: rgba(239,68,68,0.85);
    color: #fff;
    animation: webcam-pulse 2s ease-in-out infinite;
}
@keyframes webcam-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.webcam-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.webcam-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.webcam-coords {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    font-family: monospace;
}

/* =============================================
   ESEMÉNYEK OLDAL — Városi események naptár
   ============================================= */

/* Toolbar: hónap navigáció + nézet váltó */
.evt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.evt-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.evt-nav-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.evt-nav-btn:hover {
    background: rgba(255,255,255,0.12);
}
.evt-month-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}
.evt-view-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 2px;
}
.evt-view-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.evt-view-btn.active {
    background: rgba(167,139,250,0.2);
    color: var(--color-violet);
}
.evt-view-btn:hover:not(.active) {
    color: var(--text-primary);
}

/* Naptár rács */
.evt-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 10px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.evt-cal-header > span {
    padding: 6px 0;
    border-bottom: 2px solid rgba(255,255,255,0.08);
}
.evt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 10px 10px;
    border-collapse: collapse;
}
.evt-cal-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 6px 5px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    min-height: 110px;
    border: 1px solid rgba(255,255,255,0.06);
    margin: -0.5px;
}
.evt-cal-day:hover:not(.evt-cal-empty) {
    background: rgba(255,255,255,0.04);
    z-index: 1;
    border-color: rgba(255,255,255,0.15);
}
.evt-cal-day.evt-cal-empty {
    cursor: default;
    background: rgba(0,0,0,0.08);
    border-color: rgba(255,255,255,0.03);
}
.evt-cal-day-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 5px;
    text-align: right;
    padding-right: 2px;
}
.evt-cal-day.evt-cal-weekend .evt-cal-day-num {
    color: var(--text-muted);
    opacity: 0.5;
}
.evt-cal-day.evt-cal-today {
    background: rgba(167,139,250,0.08);
    border-color: rgba(167,139,250,0.4) !important;
    box-shadow: inset 0 0 16px rgba(167,139,250,0.08);
    z-index: 2;
}
.evt-cal-day.evt-cal-today .evt-cal-day-num {
    color: var(--color-violet);
    font-weight: 800;
}
.evt-cal-day.evt-cal-has-events {
    cursor: pointer;
}
.evt-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.evt-cal-event-chip {
    display: block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    color: #0f172a;
}
.evt-cal-event-more {
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 5px;
    font-weight: 600;
}

/* Lista nézet */
.evt-list {
    padding: 10px 14px;
}
.evt-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.evt-list-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.evt-list-item-color {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}
.evt-list-item-body {
    flex: 1;
    min-width: 0;
}
.evt-list-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evt-list-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11px;
    color: var(--text-muted);
}
.evt-list-item-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.4;
}
.evt-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Részlet panel (kibontás) */
.evt-detail-panel {
    padding: 14px;
}
.evt-detail-back {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: background 0.2s;
}
.evt-detail-back:hover {
    background: rgba(255,255,255,0.1);
}
.evt-detail-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.evt-detail-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 20px;
}
.evt-detail-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
}
.evt-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    line-height: 1.3;
}
.evt-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.evt-detail-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}
.evt-detail-info-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.evt-detail-info-item > span:last-child {
    font-size: 13px;
    color: var(--text-primary);
}
.evt-detail-image {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
}
.evt-detail-image img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.evt-detail-image img:hover {
    transform: scale(1.02);
}
.evt-detail-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 14px;
    white-space: pre-line;
}
.evt-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-violet);
    font-size: 13px;
    text-decoration: none;
    padding: 6px 14px;
    background: rgba(167,139,250,0.1);
    border-radius: 8px;
    transition: background 0.2s;
}
.evt-detail-link:hover {
    background: rgba(167,139,250,0.2);
}

/* ================================================================
   AUTH — Bejelentkezés / Regisztráció oldal (v257)
   ================================================================ */

/* Teljes képernyős auth overlay */
#page-auth {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.auth-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    opacity: 0.97;
}

/* Glassmorphism kártya */
.auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.auth-card::-webkit-scrollbar { width: 6px; }
.auth-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Nyelvválasztó */
.auth-lang-wrapper {
    position: absolute;
    top: 16px;
    right: 16px;
}
.auth-lang-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.auth-lang-select option {
    background: #1e293b;
    color: #e2e8f0;
}

/* Logo és fejléc */
.auth-header {
    text-align: center;
    margin-bottom: 24px;
}
.auth-header-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2));
    margin-bottom: 12px;
    color: #60a5fa;
}
.auth-title {
    font-size: 20px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}
.auth-subtitle {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 4px 0 0;
}

/* Tab váltó */
.auth-tabs {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 20px;
}
.auth-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    font-family: inherit;
}
.auth-tab.active {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}
.auth-tab:hover:not(.active) {
    color: #94a3b8;
}

/* Form mezők */
.auth-field {
    margin-bottom: 16px;
}
.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 6px;
}
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.auth-field input:focus {
    outline: none;
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.auth-field input::placeholder {
    color: #475569;
}

/* Jelszó wrapper (input + eye toggle) */
.auth-pw-wrapper {
    position: relative;
}
.auth-pw-wrapper input {
    padding-right: 40px;
}
.auth-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
.auth-pw-toggle:hover { color: #94a3b8; }

/* Jelszó erősség jelző */
.auth-pw-strength {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.auth-pw-strength-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
    width: 0;
}
.auth-pw-strength-bar.strength-weak { width: 25%; background: var(--color-red); }
.auth-pw-strength-bar.strength-medium { width: 60%; background: var(--color-amber); }
.auth-pw-strength-bar.strength-strong { width: 100%; background: var(--color-green); }
.auth-pw-strength-bar.strength-blocked { width: 100%; background: var(--color-red); }

.auth-pw-strength-label {
    font-size: 11px;
    margin-top: 4px;
    display: block;
}
.auth-pw-strength-label.strength-weak { color: var(--color-red); }
.auth-pw-strength-label.strength-medium { color: var(--color-amber); }
.auth-pw-strength-label.strength-strong { color: var(--color-green); }
.auth-pw-strength-label.strength-blocked { color: var(--color-red); }

/* Opciók sor (emlékezz rám + elfelejtett jelszó) */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 12px;
}
.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 12px;
}
.auth-checkbox-label input[type="checkbox"] {
    accent-color: var(--color-blue);
}
.auth-link {
    color: #60a5fa;
    text-decoration: none;
    font-size: 12px;
}
.auth-link:hover { text-decoration: underline; }

/* Hibaüzenet */
.auth-error-msg {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    color: #fca5a5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 12px;
}
.auth-success-msg {
    background: rgba(34,197,94,0.1) !important;
    border-color: rgba(34,197,94,0.2) !important;
    color: #86efac !important;
}

/* Submit gomb */
.auth-submit-btn {
    width: 100%;
    padding: 11px 0;
    background: linear-gradient(135deg, var(--color-blue), #6366f1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    font-family: inherit;
}
.auth-submit-btn:hover { opacity: 0.9; }
.auth-submit-btn:active { transform: scale(0.98); }
.auth-submit-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Panel váltó szöveg */
.auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

/* Panel cím (jelszó reset) */
.auth-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px;
}

/* Üzenet panel (e-mail verifikáció) */
.auth-message-icon {
    text-align: center;
    color: var(--color-green);
    margin-bottom: 16px;
}
.auth-message-text {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px;
}
.auth-message-sub {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 0;
}

/* GDPR checkbox */
.auth-gdpr-label {
    font-size: 12px;
}

/* Inaktivitás figyelmeztetés */
#auth-inactivity-warning {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-above);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}
.auth-inactivity-content {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    color: #f1f5f9;
    max-width: 400px;
}
.auth-inactivity-content p {
    margin: 0 0 16px;
    font-size: 14px;
}
.auth-inactivity-seconds {
    font-weight: 700;
    color: var(--color-amber);
}

/* ─── Sidebar auth elemek ─── */
.sidebar-logout-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.sidebar-logout-btn:hover {
    color: var(--color-red);
    background: rgba(239,68,68,0.1);
}

.sidebar-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.sidebar-avatar-monogram {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* Role badge-ek (csak admin+ saját sidebarjában látható) */
.role-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.role-admin {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}
.role-foadmin {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}
.role-superadmin {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}

/* ================================================================
   PROFIL OLDAL (v257)
   ================================================================ */

.profile-grid-container {
    min-height: 100%;
}

.profile-content {
    padding: 16px;
}

/* Avatár */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.profile-avatar-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.1);
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-avatar-monogram {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-blue), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
}
.profile-avatar-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #94a3b8);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.profile-avatar-btn:hover { background: rgba(255,255,255,0.1); }

/* Form fields */
.profile-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.profile-input:focus {
    outline: none;
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.profile-input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
}
.profile-textarea {
    resize: vertical;
    min-height: 60px;
}
/* E-mail módosítás */
.profile-email-change { margin-top: 6px; }
.profile-email-change-btn {
    background: rgba(96, 165, 250, 0.15); border: 1px solid rgba(96, 165, 250, 0.3);
    color: #93c5fd; padding: 5px 14px; border-radius: 6px; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: background 0.2s;
    font-family: var(--font-family, 'Quicksand', sans-serif);
}
.profile-email-change-btn:hover { background: rgba(96, 165, 250, 0.25); }
.profile-email-change-form { margin-top: 8px; }
.profile-email-change-form .profile-input { margin-bottom: 8px; }
.profile-email-change-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.profile-email-confirm { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; }
.profile-email-confirm:hover { background: #2563eb !important; }
.profile-email-cancel { background: rgba(255,255,255,0.06) !important; color: #94a3b8 !important; }
.profile-email-hint { font-size: 11px; color: #64748b; margin: 0; }
select.profile-input {
    cursor: pointer;
    color-scheme: dark;
}
select.profile-input option {
    background: #1e293b;
    color: #e2e8f0;
}

.profile-form-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-save-btn {
    margin-top: 12px;
}

/* Section title */
.profile-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* 2FA status */
.profile-2fa-status {
    font-size: 13px;
    margin: 0 0 8px;
}
.profile-2fa-status.tfa-on { color: var(--color-green); }
.profile-2fa-status.tfa-off { color: var(--text-muted, #64748b); }

/* MFA status row */
.mfa-status-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.mfa-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mfa-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.mfa-status-dot.mfa-active {
    background: var(--color-green);
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}
.mfa-status-dot.mfa-inactive {
    background: #64748b;
}
.mfa-disable-btn {
    background: rgba(239,68,68,0.2) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    color: #fca5a5 !important;
}
.mfa-disable-btn:hover {
    background: rgba(239,68,68,0.35) !important;
}

/* MFA code input */
.mfa-code-input-wrap {
    display: flex;
    justify-content: center;
    margin: 20px 0 12px;
}
.mfa-code-input {
    font-family: 'Courier New', monospace;
    font-size: 28px;
    letter-spacing: 8px;
    text-align: center;
    width: 200px;
    padding: 12px 16px;
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #f1f5f9;
    outline: none;
    transition: border-color 0.2s;
}
.mfa-code-input:focus {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.mfa-recovery-input {
    font-size: 20px;
    letter-spacing: 4px;
    width: 220px;
    text-transform: uppercase;
}

/* MFA challenge panel */
.auth-mfa-desc {
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.5;
}
.auth-mfa-attempts {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    text-align: center;
    margin-bottom: 12px;
}

/* MFA modal overlay */
.mfa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mfa-modal-content {
    background: #0f172a;
    border-radius: 12px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.mfa-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px;
    text-align: center;
}
.mfa-modal-desc {
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.5;
}
.mfa-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.mfa-modal-actions .auth-submit-btn {
    flex: 1;
}
.mfa-cancel-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}
.mfa-cancel-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* QR container */
.mfa-qr-container {
    display: flex;
    justify-content: center;
    margin: 16px 0;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.mfa-qr-container img {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

/* Secret key display */
.mfa-secret-row {
    text-align: center;
    margin: 8px 0 0;
}
.mfa-secret-label {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    display: block;
    margin-bottom: 4px;
}
.mfa-secret-code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: #f1f5f9;
    background: rgba(30,41,59,0.8);
    padding: 6px 12px;
    border-radius: 4px;
    user-select: all;
    word-break: break-all;
}

/* Recovery codes display */
.mfa-recovery-codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 16px 0;
    padding: 16px;
    background: rgba(30,41,59,0.6);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.mfa-recovery-code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: #f1f5f9;
    text-align: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

/* Sessions list */
.profile-sessions-section {
    margin-top: 8px;
}
.profile-sessions-list {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 12px;
}
.profile-session-item {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.profile-session-item:hover {
    background: rgba(255,255,255,0.05);
}
.profile-session-item.current {
    border-left: 3px solid var(--accent-blue, var(--color-blue));
}
.session-device {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.session-device-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
}
.session-device-name {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
}
.session-current-badge {
    font-size: 11px;
    background: rgba(34,197,94,0.15);
    color: #22c55a;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: auto;
}
.session-details {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
}
.session-revoke-btn {
    background: rgba(239,68,68,0.1);
    color: var(--color-red);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.session-revoke-btn:hover {
    background: rgba(239,68,68,0.2);
    border-color: rgba(239,68,68,0.35);
}
.session-revoke-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.session-loading,
.session-empty {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
}
.profile-btn-danger {
    background: rgba(239,68,68,0.15);
    color: var(--color-red);
    border: 1px solid rgba(239,68,68,0.2);
    width: 100%;
}
.profile-btn-danger:hover {
    background: rgba(239,68,68,0.25);
}
.profile-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Divider */
.profile-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 16px 0;
}

/* GDPR */
.profile-gdpr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}
.profile-gdpr-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.profile-gdpr-badge.gdpr-ok {
    background: rgba(34,197,94,0.15);
    color: var(--color-green);
}
.profile-gdpr-badge.gdpr-missing {
    background: rgba(245,158,11,0.15);
    color: var(--color-amber);
}
.profile-gdpr-btn {
    width: 100%;
    padding: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #94a3b8);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 8px;
    font-family: inherit;
    transition: background 0.2s;
}
.profile-gdpr-btn:hover { background: rgba(255,255,255,0.1); }
.profile-gdpr-btn.profile-gdpr-danger {
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.profile-gdpr-btn.profile-gdpr-danger:hover {
    background: rgba(239,68,68,0.1);
}
.profile-gdpr-note {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin: 4px 0 0;
    line-height: 1.4;
}

/* ─── Profil oldal: elem listák (bejelentések, hirdetések, javaslatok, üzenetek) ─── */
.profile-item-list { padding: 8px 12px; }
.profile-list-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; gap: 8px; }
.profile-msg-icon { flex-shrink: 0; font-size: 16px; }
.profile-msg-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-msg-suggestion-auto { color: #60a5fa; }
.profile-msg-suggestion-response { color: #22c55e; }
.profile-item-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.profile-item-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.status-submitted, .status-open { background: rgba(239,68,68,0.2); color: var(--color-red); }
.status-in_progress { background: rgba(251,191,36,0.2); color: #fbbf24; }
.status-resolved, .status-closed { background: rgba(34,197,94,0.2); color: var(--color-green); }

/* ─── Profil oldal: részvételi statisztikák ─── */
.profile-participation-stats { display: flex; gap: 12px; padding: 8px 12px; }
.profile-stat-card { flex: 1; text-align: center; padding: 12px 8px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.profile-stat-num { display: block; font-size: 24px; font-weight: 700; color: #60a5fa; }
.profile-stat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.profile-subheading { font-size: 12px; font-weight: 600; color: #94a3b8; padding: 10px 12px 4px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; }

/* ─── Profil oldal: értesítési összefoglaló ─── */
.profile-notif-summary { padding: 8px 12px; }
.profile-notif-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.profile-notif-badge { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; }
.profile-notif-badge.badge-on { background: rgba(34,197,94,0.2); color: var(--color-green); }
.profile-notif-badge.badge-off { background: rgba(100,116,139,0.2); color: #64748b; }
.profile-notif-hint { font-size: 11px; color: var(--text-muted); padding: 8px 12px; font-style: italic; }

/* ─── Regisztráció: asszisztens választó rács ─── */
.auth-assistant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.auth-assistant-option { display: flex; flex-direction: column; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; text-align: center; }
.auth-assistant-option:has(input:checked) { border-color: #60a5fa; background: rgba(96,165,250,0.1); }
.auth-assistant-option input { display: none; }
.auth-assistant-img { border-radius: 50%; margin-bottom: 8px; width: 80px !important; height: 80px !important; }
.assistant-name { display: block; width: 100%; font-weight: 600; font-size: 14px; color: #e2e8f0; }
.assistant-desc { display: block; width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
.assistant-chooser-img { border-radius: 50%; margin-bottom: 8px; }

/* ─── Adatvédelmi tájékoztató modál ─── */
.auth-privacy-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); }
.auth-privacy-content { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.auth-privacy-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.auth-privacy-header h3 { margin: 0; font-size: 18px; color: #e2e8f0; }
.auth-privacy-close { background: none; border: none; color: #94a3b8; font-size: 28px; cursor: pointer; padding: 0 4px; line-height: 1; }
.auth-privacy-close:hover { color: #e2e8f0; }
.auth-privacy-body { padding: 20px; overflow-y: auto; color: #cbd5e1; font-size: 13px; line-height: 1.6; }
.auth-privacy-body h4 { color: #60a5fa; font-size: 14px; margin: 16px 0 8px 0; }
.auth-privacy-body h4:first-child { margin-top: 0; }
.auth-privacy-body p { margin: 0 0 8px 0; }
.auth-privacy-body ul { margin: 0 0 12px 0; padding-left: 20px; }
.auth-privacy-body li { margin-bottom: 4px; }
.auth-privacy-meta { font-size: 11px; color: #64748b; font-style: italic; margin-bottom: 16px !important; }

/* ─── Sidebar user dropdown (7.1) ─── */
.sidebar-user {
    position: relative;
}
.sidebar-user-menu-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
.sidebar-user-menu-btn:hover { color: #94a3b8; }

.sidebar-user-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    min-width: 160px;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 4px;
    z-index: 100;
    margin-bottom: 8px;
}
.sidebar-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    text-align: left;
}
.sidebar-user-dropdown-item:hover { background: rgba(255,255,255,0.06); }
.sidebar-dropdown-logout { color: #f87171; }
.sidebar-dropdown-logout:hover { background: rgba(239,68,68,0.1); }

/* Turnstile wrapper */
.auth-turnstile-wrap {
    margin-bottom: 12px;
    min-height: 0;
}
/* Resend button */
.auth-resend-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #94a3b8);
}
.auth-resend-btn:hover { background: rgba(255,255,255,0.1); }

/* ================================================================
   ADMIN PANEL
   ================================================================ */

.admin-panel-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100%;
}

/* Tab navigáció */
.admin-panel-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0;
}

.admin-panel-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-family: var(--font-family, 'Quicksand', sans-serif);
}

.admin-panel-tab:hover {
    color: var(--text-primary, #e2e8f0);
}

.admin-panel-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

/* Tab tartalom */
.admin-tab-content {
    min-height: 200px;
}

/* Felhasználó lista */
.admin-users-list,
.admin-content-list,
.admin-audit-list,
.admin-settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Admin keresés/szűrés toolbar */
.admin-users-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.admin-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
}
.admin-search-input:focus { outline: none; border-color: #3b82f6; }
.admin-search-input::placeholder { color: var(--text-muted); }
.admin-role-filter {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    appearance: auto;
    color-scheme: dark;
}
.admin-role-filter option {
    background: #1e293b;
    color: #e2e8f0;
}

/* Felhasználó elem */
.admin-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: background 0.2s;
}

.admin-user-item:hover {
    background: rgba(255,255,255,0.04);
}

.admin-user-item.locked {
    border-left: 3px solid var(--color-red);
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.admin-user-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-user-main strong {
    color: var(--text-primary, #e2e8f0);
    font-size: 13px;
}

.admin-user-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.admin-user-email {
    opacity: 0.7;
}

.admin-user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Szerepkör választó */
.admin-role-select {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    cursor: pointer;
    color-scheme: dark;
}

.admin-role-select option {
    background: #1e293b;
    color: #e2e8f0;
}

/* Action gombok */
.admin-action-btn {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #fca5a5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-family, 'Quicksand', sans-serif);
}

.admin-action-btn:hover {
    background: rgba(239,68,68,0.25);
}

/* Badge-ek */
.admin-2fa-badge {
    display: inline-block;
    background: rgba(34,197,94,0.15);
    color: #86efac;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(34,197,94,0.3);
}

.admin-locked-badge {
    display: inline-block;
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(239,68,68,0.3);
}

/* Audit napló — toolbar */
.admin-audit-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-audit-toolbar select,
.admin-audit-toolbar input[type="date"] {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    font-family: inherit;
    appearance: auto;
    color-scheme: dark;
}
.admin-audit-toolbar select option {
    background: #1e293b;
    color: #e2e8f0;
}
.admin-audit-export-btn {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.admin-audit-export-btn:hover {
    background: rgba(59,130,246,0.3);
}

/* Audit napló — lista */
.admin-audit-item {
    display: grid;
    grid-template-columns: 140px 70px 180px 180px 1fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 12px;
    align-items: center;
}

.audit-time {
    color: var(--text-muted, #64748b);
    font-size: 11px;
    white-space: nowrap;
}

/* Audit badge színek */
.audit-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}
.audit-badge-auth    { background: rgba(59,130,246,0.2); color: #60a5fa; }
.audit-badge-admin   { background: rgba(245,158,11,0.2); color: #fbbf24; }
.audit-badge-content { background: rgba(34,197,94,0.2);  color: #4ade80; }
.audit-badge-role    { background: rgba(139,92,246,0.2);  color: #a78bfa; }
.audit-badge-gdpr    { background: rgba(239,68,68,0.2);   color: #f87171; }
.audit-badge-system  { background: rgba(148,163,184,0.2); color: #94a3b8; }

.audit-action {
    color: #60a5fa;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-user {
    color: var(--text-secondary, #94a3b8);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-details {
    color: var(--text-secondary, #94a3b8);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Audit napló — lapozás */
.admin-audit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 0;
}
.admin-audit-pagination button {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.admin-audit-pagination button:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
}
.admin-audit-pagination button:disabled {
    opacity: 0.3;
    cursor: default;
}
#audit-page-info {
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

/* Tartalom moderáció */
.admin-content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.admin-content-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.admin-content-info strong {
    color: var(--text-primary, #e2e8f0);
    font-size: 13px;
}

.admin-content-category {
    color: var(--text-muted, #64748b);
    font-size: 11px;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.admin-content-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-content-date {
    color: var(--text-muted, #64748b);
    font-size: 11px;
}

/* Státusz színek */
.admin-status-open { color: #f87171; font-size: 11px; font-weight: 600; }
.admin-status-in_progress { color: #fbbf24; font-size: 11px; font-weight: 600; }
.admin-status-resolved { color: #34d399; font-size: 11px; font-weight: 600; }
.admin-status-closed { color: #94a3b8; font-size: 11px; font-weight: 600; }

/* Rendszerbeállítások */
.admin-section-title {
    color: var(--text-primary, #e2e8f0);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.admin-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin-bottom: 6px;
}

.admin-setting-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-setting-info strong {
    color: var(--text-primary, #e2e8f0);
    font-size: 13px;
}

.admin-setting-desc {
    color: var(--text-muted, #64748b);
    font-size: 11px;
}

/* Toggle switch for feature flags */
.admin-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.admin-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 22px;
    transition: background 0.2s;
}

.admin-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #94a3b8;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.admin-toggle input:checked + .admin-toggle-slider {
    background: rgba(96,165,250,0.3);
}

.admin-toggle input:checked + .admin-toggle-slider::before {
    transform: translateX(18px);
    background: #60a5fa;
}

/* Empty state */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #64748b);
    font-size: 13px;
}

/* Loading */
.admin-panel-container .loading-text {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #64748b);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-panel-tabs {
        flex-wrap: wrap;
    }
    .admin-audit-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .admin-user-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .admin-user-actions {
        width: 100%;
    }
}

/* 14.5 Mobil admin optimalizálás */
@media (max-width: 768px) {
    .tile-edit-btn {
        width: 36px;
        height: 36px;
    }
    .admin-panel-content {
        padding: 8px;
    }
    .report-admin-response {
        padding: 8px 10px;
    }
    .response-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .ptr-hint {
        text-align: center;
        padding: 8px;
        color: var(--text-muted);
        font-size: 12px;
    }
    /* Mobil admin bővítés — v265 */
    .admin-panel-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .admin-panel-tab {
        font-size: 11px;
        padding: 6px 10px;
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
    }
    .admin-permissions-table {
        font-size: 10px;
    }
    .perm-col-header {
        font-size: 8px;
    }
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .admin-stat-value {
        font-size: 22px;
    }
    .admin-gdpr-item {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .admin-msg-header {
        flex-wrap: wrap;
    }
    /* FAB (Floating Action Button) stílus admin oldalra */
    .admin-fab {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #60a5fa;
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        font-size: 24px;
        cursor: pointer;
        z-index: 1000;
        display: none;
    }
    .page-admin .admin-fab { display: flex; align-items: center; justify-content: center; }
    /* Pull-to-refresh terület */
    .admin-panel-container {
        overscroll-behavior-y: contain;
    }
    /* Gombok nagyobb touch target */
    .admin-action-btn {
        min-height: 36px;
        min-width: 36px;
        padding: 8px 12px;
    }
    .admin-toggle {
        width: 44px;
        height: 24px;
    }
}

/* ═══ Admin panel bővítés — v264 ═══ */

/* Admin Content tab — szavazás kezelő (v305) */
.admin-ct-info { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; padding: 8px 12px; background: rgba(139,92,246,0.08); border-radius: 6px; border-left: 3px solid #8b5cf6; }
.admin-ct-toolbar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.admin-ct-toolbar-right { display: flex; gap: 8px; align-items: center; }
.admin-ct-filter-select { font-size: 11px; padding: 4px 8px; border-radius: 6px; background: #1e293b; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); color-scheme: dark; }
/* Szavazás szerkesztő form */
.admin-poll-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; }
.admin-poll-field { display: flex; flex-direction: column; gap: 4px; }
.admin-poll-row { display: flex; gap: 12px; align-items: flex-end; }
.admin-poll-type-row { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-poll-type-opt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.admin-poll-type-opt input[type="radio"], .admin-poll-type-opt input[type="checkbox"] { accent-color: #8b5cf6; }
.admin-poll-max-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.admin-poll-max-label { margin: 0 !important; font-size: 11px !important; white-space: nowrap; }
.admin-poll-hint { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.admin-poll-select-section { padding: 10px 12px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.15); border-radius: 8px; }
.admin-poll-select-section .admin-form-label { color: #a78bfa; }
.admin-poll-opts-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.admin-poll-opt-row { display: flex; align-items: center; gap: 4px; }
.admin-poll-opt-num { font-size: 11px; color: var(--text-muted); min-width: 20px; text-align: right; }
.admin-poll-opt-input { flex: 1 !important; font-size: 12px !important; padding: 5px 8px !important; }
.admin-poll-opt-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; flex-shrink: 0; }
.admin-poll-opt-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.admin-poll-opt-del { color: #f87171; }
.admin-poll-opt-del:hover { background: rgba(239,68,68,0.15); }
.admin-poll-add-opt-btn { align-self: flex-start; font-size: 11px; margin-top: 4px; }
.admin-poll-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.admin-ct-create-btn { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; font-weight: 600; }
.admin-ct-create-btn:hover { background: rgba(34,197,94,0.25); }
.admin-ct-poll-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(30,41,59,0.4); border-radius: 8px; margin-bottom: 6px; gap: 12px; }
.admin-ct-poll-main { flex: 1; min-width: 0; }
.admin-ct-poll-question { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; word-break: break-word; }
.admin-ct-poll-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--text-muted); }
.admin-ct-poll-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.admin-ct-poll-active { background: rgba(34,197,94,0.15); color: #22c55e; }
.admin-ct-poll-closed { background: rgba(239,68,68,0.15); color: #f87171; }
.admin-ct-poll-actions { flex-shrink: 0; }
.admin-ct-close-btn { font-size: 11px; padding: 4px 10px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #f87171; }
.admin-ct-close-btn:hover { background: rgba(239,68,68,0.25); }
/* Tartalom csempe kártyák */
.admin-ct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-ct-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: rgba(30,41,59,0.5); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.admin-ct-card:hover { background: rgba(30,41,59,0.7); border-color: rgba(139,92,246,0.3); }
.admin-ct-card-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(139,92,246,0.15); color: #a78bfa; }
.admin-ct-card-icon svg { width: 22px; height: 22px; }
.admin-ct-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.admin-ct-card-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Panel fejléc (vissza gomb + cím) */
.admin-ct-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.admin-ct-back-btn { font-size: 12px; padding: 4px 10px; background: rgba(30,41,59,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-muted); cursor: pointer; }
.admin-ct-back-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); }
.admin-ct-panel-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
/* Sub-tabok */
.admin-ct-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 6px; flex-wrap: wrap; }
.admin-ct-tab { padding: 6px 14px; font-size: 12px; border: none; border-radius: 6px 6px 0 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.2s; }
.admin-ct-tab.active { background: rgba(139,92,246,0.15); color: #a78bfa; font-weight: 600; }
.admin-ct-tab:hover:not(.active) { background: rgba(255,255,255,0.04); }
.admin-ct-panel { min-height: 100px; }
/* Javaslat leírás */
.admin-ct-proposal-desc { font-size: 11px; color: var(--text-muted); margin: 2px 0 4px; }
/* Státusz dropdown */
.admin-ct-status-select { font-size: 11px; padding: 4px 8px; border-radius: 6px; background: #1e293b; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); color-scheme: dark; }
/* Szekció cím */
.admin-ct-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 12px 0 6px; }
/* Szavazat opciók */
.admin-ct-poll-results { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.admin-ct-poll-opt { font-size: 10px; padding: 2px 6px; background: rgba(255,255,255,0.04); border-radius: 4px; color: var(--text-muted); }
/* Nagy szerkesztő modál */
.admin-ct-editor-overlay { z-index: 1100; }
.admin-ct-editor-content { max-width: 960px !important; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.admin-ct-editor-content .news-admin-header { flex-shrink: 0; }
.admin-ct-editor-content .admin-ct-tabs { flex-shrink: 0; padding: 0 16px; margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-ct-toolbar-fixed { flex-shrink: 0; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.admin-ct-toolbar-fixed:empty { display: none; }
.admin-ct-editor-panel { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
/* Eredmény sávdiagramok */
.admin-ct-poll-expanded { flex-direction: column; }
.admin-ct-poll-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.admin-ct-results-bars { margin-top: 8px; }
.admin-ct-result-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.admin-ct-result-label { font-size: 11px; color: var(--text-muted); min-width: 100px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ct-result-bar-wrap { flex: 1; height: 16px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; }
.admin-ct-result-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 4px; transition: width 0.3s; min-width: 2px; }
.admin-ct-result-pct { font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; }
.admin-ct-result-total { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; }
/* Összesítő kártyák (javaslatok) */
.admin-ct-summary-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-ct-summary-card { flex: 1; min-width: 90px; padding: 8px 12px; background: rgba(30,41,59,0.5); border-radius: 8px; }
.admin-ct-summary-num { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.admin-ct-summary-label { font-size: 10px; color: var(--text-muted); }
/* Törlés gomb */
.admin-ct-del-btn { font-size: 10px; padding: 3px 8px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #f87171; }
.admin-ct-del-btn:hover { background: rgba(239,68,68,0.2); }
/* Admin poll részletek */
.admin-ct-poll-desc { font-size: 11px; color: var(--text-muted); margin: 2px 0 4px; }
.admin-ct-select-items { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.admin-ct-select-items-label { font-weight: 600; color: #a78bfa; }
.admin-ct-select-item-tag { display: inline-block; padding: 1px 6px; background: rgba(139,92,246,0.1); border-radius: 4px; margin: 1px 2px; font-size: 10px; color: #c4b5fd; }
.admin-ct-results-section-title { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
/* Admin cross-tab */
.admin-ct-crosstab { overflow-x: auto; margin-top: 4px; }
.admin-ct-crosstab-row { display: flex; align-items: center; min-height: 28px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.admin-ct-crosstab-header { font-weight: 600; font-size: 10px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-ct-crosstab-cell { flex: 1; min-width: 80px; padding: 3px 6px; font-size: 10px; text-align: center; }
.admin-ct-crosstab-label { min-width: 120px; max-width: 180px; flex: 0 0 auto; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ct-crosstab-item { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ct-crosstab-bar-wrap { height: 12px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; margin-bottom: 1px; }
.admin-ct-crosstab-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 3px; min-width: 1px; }
.admin-ct-crosstab-val { font-size: 9px; color: var(--text-muted); }
@media (max-width: 768px) {
    .admin-ct-editor-content { width: 100vw; max-height: 100vh; border-radius: 0; }
    .admin-ct-result-label { min-width: 60px; max-width: 100px; }
    .admin-ct-summary-card { min-width: 70px; }
}

/* Jogosultság editor — v302 */
.admin-perm-table-wrap { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.admin-permissions-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-permissions-table th, .admin-permissions-table td { padding: 6px 5px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-permissions-table thead { position: sticky; top: 0; z-index: 1; background: #0f172a; }
.perm-col-header { font-size: 10px; color: var(--text-muted); writing-mode: vertical-rl; text-orientation: mixed; max-width: 32px; white-space: nowrap; padding-bottom: 8px !important; }
.perm-col-header span { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.perm-user-col { text-align: left !important; font-weight: 600; min-width: 120px; }
.perm-action-col { min-width: 90px; }
.perm-user-name { text-align: left !important; font-weight: 600; white-space: nowrap; padding-right: 8px !important; }
.perm-user-email { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.perm-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: #60a5fa; }
.admin-perm-toolbar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.admin-perm-info { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; padding: 8px 12px; background: rgba(59,130,246,0.08); border-radius: 6px; border-left: 3px solid #3b82f6; }
.admin-perm-search-bar { margin-bottom: 12px; }
.admin-perm-search { width: 100%; max-width: 320px; padding: 6px 10px; font-size: 12px; border-radius: 6px; background: rgba(30,41,59,0.6); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); }
.admin-perm-search::placeholder { color: var(--text-muted); }
.admin-perm-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 16px 0 8px 0; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-perm-section-title .admin-perm-count { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.admin-perm-save-btn { font-size: 11px; padding: 4px 10px; }
.admin-perm-save-all-btn { background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.4); color: #60a5fa; font-weight: 600; }
.admin-perm-save-all-btn:hover { background: rgba(59,130,246,0.35); }
@media (max-width: 768px) {
    .perm-col-header { font-size: 9px; max-width: 26px; }
    .admin-perm-search { max-width: 100%; }
    .admin-perm-toolbar { flex-direction: column; align-items: stretch; }
}

/* GDPR kérelmek */
.admin-gdpr-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(30,41,59,0.4); border-radius: 8px; margin-bottom: 6px; }
.admin-gdpr-info { display: flex; flex-direction: column; gap: 2px; }
.admin-gdpr-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.admin-gdpr-meta { display: flex; align-items: center; gap: 8px; }
.admin-gdpr-status-pending { color: #fbbf24; font-size: 11px; font-weight: 600; }
.admin-gdpr-status-approved { color: var(--color-green); font-size: 11px; font-weight: 600; }
.admin-gdpr-status-rejected { color: var(--color-red); font-size: 11px; font-weight: 600; }
.admin-danger-btn { background: rgba(239,68,68,0.2) !important; color: var(--color-red) !important; border-color: rgba(239,68,68,0.3) !important; }
.admin-danger-btn:hover { background: rgba(239,68,68,0.3) !important; }

/* Admin rendszerüzenet modál */
.admin-msg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.admin-msg-modal-content { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; width: 90%; max-width: 480px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.admin-msg-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 600; color: #e2e8f0; }
.admin-msg-modal-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; padding: 0 4px; }
.admin-msg-modal-close:hover { color: #e2e8f0; }
.admin-msg-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.admin-msg-modal-body textarea.admin-form-input { resize: vertical; min-height: 80px; }
.admin-msg-modal-footer { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end; }

/* Webhook events grid */
.admin-wh-events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.admin-wh-events-grid .auth-checkbox-label { font-size: 12px; }
.admin-wh-active { color: #22c55e; font-size: 12px; font-weight: 600; }
.admin-wh-inactive { color: #94a3b8; font-size: 12px; }
.admin-wh-fail-badge { background: rgba(239,68,68,0.2); color: #ef4444; font-size: 11px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.admin-action-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.admin-action-btn:hover { background: rgba(255,255,255,0.1); }

/* API kulcs megjelenítés */
.admin-ak-warning { background: rgba(234,179,8,0.15); border: 1px solid rgba(234,179,8,0.3); color: #eab308; padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 10px; text-align: center; }
.admin-ak-key-display { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.admin-ak-key-display code { font-family: monospace; font-size: 13px; color: #22c55e; word-break: break-all; flex: 1; }
.admin-ak-copy-btn { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; flex-shrink: 0; }
.admin-ak-copy-btn:hover { color: #e2e8f0; }

/* ─── E-MAIL NAPLÓ ─── */
.admin-email-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.admin-email-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-email-stat-card { background: rgba(30,41,59,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 100px; flex: 1; }
.admin-email-stat-value { font-size: 22px; font-weight: 700; color: #e2e8f0; }
.admin-email-stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.admin-email-list { display: flex; flex-direction: column; gap: 6px; }
.admin-email-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(30,41,59,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; gap: 12px; }
.admin-email-item:hover { background: rgba(30,41,59,0.7); }
.admin-email-info { flex: 1; min-width: 0; }
.admin-email-subject { font-size: 13px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-email-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.admin-email-recipient { font-size: 12px; color: #94a3b8; }
.admin-email-template-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(59,130,246,0.2); color: #60a5fa; }
.admin-email-category-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(139,92,246,0.2); color: #a78bfa; }
.admin-email-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-email-date { font-size: 11px; color: #64748b; white-space: nowrap; }
.admin-email-opened, .admin-email-clicked { font-size: 14px; cursor: default; }
.admin-email-status-sent { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(34,197,94,0.15); color: #22c55e; }
.admin-email-status-delivered { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(34,197,94,0.25); color: #4ade80; }
.admin-email-status-opened { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(59,130,246,0.2); color: #60a5fa; }
.admin-email-status-bounced { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(234,179,8,0.2); color: #eab308; }
.admin-email-status-failed { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(239,68,68,0.2); color: #ef4444; }

/* ─── FUNKCIÓ KAPCSOLÓK ─── */
.admin-flags-list { display: flex; flex-direction: column; gap: 6px; }
.admin-flag-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(30,41,59,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; gap: 12px; }
.admin-flag-item:hover { background: rgba(30,41,59,0.7); }
.admin-flag-info { flex: 1; min-width: 0; }
.admin-flag-key { font-size: 13px; font-weight: 600; color: #e2e8f0; font-family: monospace; }
.admin-flag-desc { font-size: 12px; color: #94a3b8; margin-top: 3px; }
.admin-flag-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.admin-flag-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-flag-public-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(34,197,94,0.15); color: #22c55e; font-family: var(--font-family); font-weight: 500; vertical-align: middle; margin-left: 6px; }

/* Statisztika */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.admin-stat-card { background: rgba(30,41,59,0.4); border-radius: 10px; padding: 14px; text-align: center; border: 1px solid rgba(255,255,255,0.06); }
.admin-stat-icon { font-size: 24px; margin-bottom: 4px; }
.admin-stat-value { font-size: 28px; font-weight: 700; color: #e2e8f0; }
.admin-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.admin-chart-bar { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 0; }
.admin-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.admin-chart-bar-fill { width: 100%; background: rgba(96,165,250,0.4); border-radius: 4px 4px 0 0; min-height: 2px; display: flex; align-items: flex-start; justify-content: center; transition: height 0.3s; }
.admin-chart-bar-fill span { font-size: 10px; color: #e2e8f0; padding-top: 2px; }
.admin-chart-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* Városrész statisztika */
.admin-district-stats { padding: 0 0 12px; }
.admin-district-grid { display: flex; flex-direction: column; gap: 6px; }
.admin-district-row { display: flex; align-items: center; gap: 10px; }
.admin-district-label { width: 110px; flex-shrink: 0; font-size: 12px; color: #94a3b8; text-align: right; }
.admin-district-bar-wrap { flex: 1; height: 20px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; }
.admin-district-bar { height: 100%; background: rgba(96,165,250,0.45); border-radius: 4px; min-width: 2px; transition: width 0.3s; }
.admin-district-bar.none { background: rgba(255,255,255,0.08); }
.admin-district-count { width: 32px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: #e2e8f0; text-align: right; }
.admin-district-none .admin-district-label { color: #64748b; }

/* Rendszerüzenetek */
.admin-msg-item { background: rgba(30,41,59,0.4); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.06); }
.admin-msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.admin-msg-type { font-size: 10px; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.admin-msg-type-info { background: rgba(96,165,250,0.2); color: #60a5fa; }
.admin-msg-type-warning { background: rgba(251,191,36,0.2); color: #fbbf24; }
.admin-msg-type-error { background: rgba(239,68,68,0.2); color: var(--color-red); }
.admin-msg-type-maintenance { background: rgba(168,85,247,0.2); color: #a855f7; }
.admin-msg-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.admin-msg-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: var(--text-muted); }

/* Rendszer banner */
.system-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-system-banner); padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.system-banner-info { background: #1e40af; color: #dbeafe; }
.system-banner-warning { background: #92400e; color: #fef3c7; }
.system-banner-error { background: #991b1b; color: #fee2e2; }
.system-banner-maintenance { background: #581c87; color: #f3e8ff; }
.system-banner-text { flex: 1; }
.system-banner-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; opacity: 0.7; padding: 4px 8px; }
.system-banner-close:hover { opacity: 1; }

/* GDPR consent modál */
.gdpr-consent-overlay { position: fixed; inset: 0; z-index: var(--z-gdpr); background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gdpr-consent-modal { background: #1e293b; border-radius: 16px; padding: 32px; max-width: 500px; width: 100%; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); }
.gdpr-consent-modal h3 { margin: 0 0 16px; font-size: 20px; }
.gdpr-consent-modal p { font-size: 14px; line-height: 1.6; color: #94a3b8; margin-bottom: 24px; }
.gdpr-consent-actions { display: flex; flex-direction: column; gap: 10px; }

/* Cookie/localStorage banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cookie-banner); background: #1e293b; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: #94a3b8; border-top: 1px solid rgba(255,255,255,0.1); }
.cookie-banner-accept { background: #60a5fa; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ═══ Push értesítés toggle — v264 ═══ */
.push-toggle-field {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.push-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.push-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
}
.push-toggle-switch:hover {
    background: rgba(255,255,255,0.15);
}
.push-toggle-switch.active {
    background: rgba(34,197,94,0.35);
    border-color: rgba(34,197,94,0.5);
}
.push-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    transition: transform 0.25s;
    pointer-events: none;
}
.push-toggle-switch.active .push-toggle-slider {
    transform: translateX(20px);
    background: var(--color-green);
}
.push-status-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ═══ ÉRTESÍTÉSI TÍPUS PREFERENCIÁK ═══ */
.push-prefs-section {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.push-prefs-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.push-prefs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.push-pref-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #e2e8f0);
    cursor: pointer;
    padding: 4px 0;
}
.push-pref-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    flex-shrink: 0;
}

/* ═══ PUSH PROMPT BANNER ═══ */
.push-prompt-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    color: #e2e8f0;
    font-size: 13px;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    max-width: min(600px, 90vw);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.push-prompt-banner.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.push-prompt-banner svg {
    flex-shrink: 0;
    color: #60a5fa;
}
.push-prompt-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    transition: background 0.2s;
}
.push-prompt-accept {
    background: #3b82f6;
    color: #fff;
}
.push-prompt-accept:hover {
    background: #2563eb;
}
.push-prompt-later {
    background: rgba(255,255,255,0.1);
    color: #94a3b8;
}
.push-prompt-later:hover {
    background: rgba(255,255,255,0.15);
}

/* ═══ PWA TELEPÍTÉS GOMB — SIDEBAR ═══ */
.sidebar-install-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.3); border-radius: 8px; color: #60a5fa; cursor: pointer; font-size: 13px; margin-top: 8px; transition: background 0.2s; }
.sidebar-install-btn:hover { background: rgba(96,165,250,0.25); }

/* ═══ OFFLINE BANNER ═══ */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    animation: offlineBannerSlide 0.3s ease-out;
}
.offline-banner svg {
    flex-shrink: 0;
    opacity: 0.9;
}
.offline-queue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}
@keyframes offlineBannerSlide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Body class: offline mód — mini-widget frissítés jelzés */
.app-offline .mw-source-dot { background: #ef4444 !important; animation: none !important; }
.app-offline .source-dot { background: #ef4444 !important; animation: none !important; }

/* ═══ SW UPDATE BANNER ═══ */
.sw-update-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: swBannerFadeIn 0.3s ease-out;
}
.sw-update-btn {
    padding: 6px 14px;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.sw-update-btn:hover { background: #2563eb; }
@keyframes swBannerFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══ PWA INSTALL BANNER ═══ */
.pwa-install-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9999;
    width: 90%;
    max-width: 480px;
    padding: 16px 20px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 16px;
    color: #e2e8f0;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
}
.pwa-install-banner.pwa-banner-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pwa-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.pwa-banner-icon {
    flex-shrink: 0;
    color: #60a5fa;
    margin-top: 2px;
}
.pwa-banner-text {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}
.pwa-banner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.pwa-banner-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: inherit;
}
.pwa-banner-btn:active { transform: scale(0.97); }
.pwa-banner-accept {
    background: #3b82f6;
    color: #fff;
}
.pwa-banner-accept:hover { background: #2563eb; }
.pwa-banner-later {
    background: rgba(255,255,255,0.08);
    color: #94a3b8;
}
.pwa-banner-later:hover { background: rgba(255,255,255,0.12); }

/* ═══ TOAST ÉRTESÍTÉS ═══ */
.cd-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10001;
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}
.cd-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══ Permission change toast ═══ */
.permission-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 20002;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}
.permission-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.permission-toast-warning {
    background: rgba(146, 64, 14, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fef3c7;
}
.permission-toast-success {
    background: rgba(6, 78, 59, 0.95);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #d1fae5;
}

/* ── HEALTH CHECK DASHBOARD (Spec 14.8) ────────────── */
.admin-health-summary { display: flex; gap: 12px; margin-bottom: 16px; }
.admin-health-stat { flex: 1; padding: 12px 16px; border-radius: 8px; text-align: center; background: rgba(30,41,59,0.6); border: 1px solid rgba(255,255,255,0.08); }
.admin-health-stat .admin-health-num { font-size: 28px; font-weight: 700; display: block; }
.admin-health-stat .admin-health-label { font-size: 11px; color: #94a3b8; }
.admin-health-green .admin-health-num { color: #4ade80; }
.admin-health-yellow .admin-health-num { color: #fbbf24; }
.admin-health-red .admin-health-num { color: #f87171; }
.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 20px; }
.admin-health-item { padding: 10px 12px; border-radius: 8px; background: rgba(30,41,59,0.5); border: 1px solid rgba(255,255,255,0.06); }
.admin-health-item-green { border-left: 3px solid #4ade80; }
.admin-health-item-yellow { border-left: 3px solid #fbbf24; }
.admin-health-item-red { border-left: 3px solid #f87171; }
.admin-health-item-name { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; }
.admin-health-item-ms { font-size: 12px; color: #94a3b8; }
.admin-health-item-err { font-size: 11px; color: #f87171; margin-top: 2px; word-break: break-all; }
.admin-health-item-time { font-size: 10px; color: #64748b; margin-top: 2px; }
.admin-health-commands { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.admin-health-cmd-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── MOBIL ADMIN (Spec 14.5) ───────────────────────── */
.admin-fab { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; background: #3b82f6; color: #fff; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(59,130,246,0.4); }
@media (max-width: 768px) {
    .admin-fab.admin-fab-visible { display: flex; align-items: center; justify-content: center; }
    .admin-panel-tab { font-size: 11px; padding: 6px 8px; }
    .admin-health-grid { grid-template-columns: 1fr 1fr; }
    .admin-health-summary { flex-wrap: wrap; }
    .admin-health-stat { min-width: calc(33% - 8px); }
}

/* ── KIOSK MÓD (Spec 14.10) ───────────────────────── */
.kiosk-mode .sidebar { display: none !important; }
.kiosk-mode .header-nav { display: none !important; }
.kiosk-mode .assistant-header-btn { display: none !important; }
.kiosk-mode .header-user-area { display: none !important; }
.kiosk-mode .app-content { margin-left: 0 !important; }
.kiosk-qr-overlay { display: none; position: fixed; inset: 0; z-index: 30000; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
.kiosk-qr-overlay.visible { display: flex; }
.kiosk-qr-card { background: #1e293b; border-radius: 16px; padding: 32px; text-align: center; max-width: 320px; }
.kiosk-qr-card img { width: 200px; height: 200px; margin: 16px auto; }
.kiosk-qr-card p { color: #94a3b8; font-size: 14px; margin-top: 12px; }
.admin-fab-popup { display: none; position: fixed; bottom: 88px; right: 24px; z-index: 9999; flex-direction: column; gap: 6px; }
.admin-fab-popup[style*="display: flex"] { display: flex; }
.admin-fab-menu-item { background: #1e293b; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 16px; font-size: 13px; cursor: pointer; white-space: nowrap; text-align: left; }
.admin-fab-menu-item:hover { background: #334155; }
.admin-wh-events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.admin-wh-events-grid .auth-checkbox-label { font-size: 12px; padding: 4px 0; }